.errors-box{position: absolute; right: 0; bottom: 0vh;}
.givenPrice .quantity{align-items:center;}
header {box-shadow: var(--box-shadow); position: relative; z-index: 2; background-color: #fff;}
header .topBar {padding-block: 7px;}
header .topBar .wrapper {display: flex; align-items: center; justify-content: space-between;}
header .topBar .carousel {width: 70%; position: relative; padding-bottom: unset;}
header .topBar .carousel-caption {position: static; padding: unset;}
header .topBar .carousel-caption > :first-child {font-size: var(--fs-xs); font-weight: 400; padding: 0 10px; color: #000;}
header .carousel :where(.carousel-control-prev, .carousel-control-next) { opacity: 1 !important; transition: var(--transition);}
header .carousel :where(.carousel-control-prev, .carousel-control-next):hover {transform: scale(1.1);}
header .carousel :where(.carousel-control-prev-icon, .carousel-control-next-icon) {height: 1rem; width: 1rem; filter: invert(1);}
header .social ul {display: flex; align-items: center; justify-content: start; gap: 13px; margin: unset; padding: unset;}
header .social img {height: 18px; width: 18px; transition: var(--transition);}
header .social img:hover {filter: var(--_c-primary-filter);}
header .secondBar {padding-block: 9px; border-block: 1px solid var(--_c-border);}
header .menued {display: flex; align-items: center; gap: 20px;}
header .menued button {display: none;}
header .menued button img {height: 22px; width: 22px;}
header .logo img {width: 120px;}
header .wrapper {display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
header .search {max-width: 550px; width: 100%;}
header form {display: flex; align-items: center; justify-content: center; gap: 10px;}
header form img {height: 18px; width: 18px; filter: invert(1);}
header .search input {padding: 7px 98px 8px 15px; border: none; border-radius: 5px; box-shadow: var(--_c-shadow); outline: none; transition: var(--transition);}
header input:hover {box-shadow: var(--_c-secondary-shadow);}
header input::placeholder {color: #00000066;}
header .search input:focus {box-shadow:  0 0 0 2px #000;}
header .secondBar form button {padding: 11px;}
header .extra { display: flex; align-items: center; justify-content: center; gap: 20px;}
header .extra button {color: #000;}
header :where(.account, .cart) {flex: none;}
header :where(.account, .cart) button {transition: var(--transition);}
header :where(.account, .cart) button:hover {color: var(--c-primary);}
header :where(.account, .cart) button > img {width: 26px; height: 26px;}
header .account button:hover > Img {filter: var(--_c-primary-filter);}
header .cart button:hover .cartIcon img{filter: var(--_c-primary-filter);} 
header .account {position: relative;}
header .account button {display: flex; align-items: center; gap: 8px;}
header .signIn {width: 210px; position: absolute; transform: none !important; right: 0 !important; left: auto !important; top: 35px !important; animation: animateMenuOpen .2s ease;}
header .signIn ul {display: flex; flex-direction: column; gap: 4px;}
header .signIn li a {width: 100%; display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); padding: 5px 15px; transition: var(--transition);}
header .signIn li a:hover {color: var(--c-primary);}
header .signIn li a:hover img {filter: var(--_c-primary-filter);}
header .list {display: flex; flex-direction: column; align-items: start;}
header :where(.list, .price) > :first-child {font-size: var(--fs-xs); font-weight: 400; line-height: 1;}
header :where(.list, .price) > :nth-child(2) {font-size: var(--fs-base); font-weight: 500; line-height: 1;}
header .signIn img {width: 14px; height: 14px;}
header .cart button {display: flex; align-items: center; gap: 8px;}
header .cartIcon {position: relative;}
header .cartIcon > :nth-child(2) {width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; font-size: 9px; text-align: center; background-color: var(--c-primary); color: #fff; padding: 3px; margin-left: 15px; border-radius: 100%; position: absolute; top: -5px; right: -5px;}
header .price {display: flex; flex-direction: column; align-items: start;}

header .bottomBar {display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4;}
header .dropdown {width: 33%; position: relative;}
header .dropdown > :first-child {width: 100%; font-size: 16px; text-transform: uppercase; display: none; background-color: #fff; color: #000; padding: 9px 5px 10px 5px; border-bottom: 1px solid var(--_c-border);}
header .dropdown button {display: flex; align-items: center; justify-content: center; gap: 10px; color: #000; transition: var(--transition); position: relative;}
header .dropdown button[aria-expanded="true"] > :first-child {display: none;}
header .dropdown button[aria-expanded="true"] > :nth-child(2) {display: block;}
header .dropdown > :nth-child(2):hover {color: var(--c-primary);}
header .dropdown > :nth-child(2):hover img {filter: var(--_c-primary-filter);}
header .dropdown button > :nth-child(2) {display: none;}
header .dropdown button > :nth-child(3) {font-weight: 500;}
header .dropdown button img {height: 20px; width: 20px;}

header .listed {width: 300px; background-color: #fff; border: unset; border-radius: 12px; position: absolute; top: 37px !important; left: -4px !important; transform: unset !important; box-shadow: var(--_c-third-shadow); animation: animateMenuOpen 0.4s ease;}
header .bottomBar .listed ul {flex-direction: column; align-items: start; gap: 0;}
header .bottomBar .listed li {width: 100%;}
header .bottomBar .listed ul a{width: 100%; justify-content: start; padding: 10px 30px 10px 15px; transition: var(--transition);}
header .bottomBar .listed ul a img {height: 24px; width: 24px;}
header .bottomBar .listed > ul > li > ul { width: 830px; display: none; background-color: #fff; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 15px 20px; border: 1px solid #0000001A; border-radius: 12px; position: absolute; inset: 0; left: 100%; box-shadow: var(--_c-third-shadow);}
header .bottomBar .listed > ul > li:hover { background-color: #00000008;}
header .bottomBar .listed > ul > li:hover > a {color: var(--c-primary);}
header .bottomBar .listed > ul > li:hover > a img {transition: var(--transition);}
header .bottomBar .listed > ul > li:hover > a img {filter: var(--_c-primary-filter);}
header .bottomBar .listed > ul > li:hover > ul {display: grid;}
header .bottomBar .listed > ul > li > ul a {text-wrap: nowrap; font-weight: 400; padding: 5px 0;}
header .bottomBar .listed > ul > li > ul > li > a {font-weight: 700; padding: 10px 30px 10px 15px; border-bottom: .1rem solid rgba(0, 0, 0, .08); position: relative;}
header .bottomBar .listed > ul > li > ul > li > a:hover  {color: var(--c-primary);}
header .bottomBar .listed > ul > li > a {display: flex; align-items: center; gap: 10px;}
header .bottomBar .listed > ul > li > ul > li > ul li:hover a {color: var(--c-primary);}

header .bottomBar ul {display: flex; align-items: center; gap: 30px;}
header .bottomBar ul a{color: #000; transition: var(--transition);}
header .bottomBar ul button:hover::after {filter: var(--_c-primary-filter);}
header .bottomBar ul button:hover img {filter: var(--_c-primary-filter);}
header .bottomBar ul button.show::after {transform: rotate(-180deg);}
header .bottomBar ul img {height: 16px; width: 10px;}

header .menu-btn {display: none;}
header .absolute {width: 66%; display: flex; align-items: center; justify-content: space-between;}
header .lists > ul > li {position: relative; padding-block: 13px; transition: var(--transition);}
header .lists > ul > li:hover > a {color: var(--c-primary);}

header .lists > ul > li > ul {width: 200px; display: none; flex-direction: column; align-items: start; gap: 0; background-color: #fff; padding-block: 0.5rem; border-radius: 12px; box-shadow: var(--_c-third-shadow); position: absolute; top: 46px; left: -8px; animation: animateMenuOpen 0.4s ease;}
header .lists > ul > li > ul > li {width: 100%; padding: 10px 30px 10px 15px;}
header .lists > ul > li > ul > li:hover  {background-color: #00000008;}
header .lists > ul > li > ul > li:hover a {color: var(--c-primary);}
header .lists > ul > li:hover > ul {display: flex;}
header .features ul {gap: 1rem;}
header .features ul > li:hover a {color: var(--c-primary);}
header .features a {padding-right: 10px; position: relative;}
header .features a::after {position: absolute; right: 0; content: "|"; color: #00000066; width: 0; height: auto;}
header .features ul > :last-child a::after {content: unset;}

header .cartBox {position: relative;}
header .cartBox .scrollbar .scrollbar{padding-bottom: 157px;}
header .offcanvas {width: 100% !important; max-width: 500px; border-top-left-radius: 1rem;}
header .offcanvas-header {display: block; background-color: var(--_c-bg); color: #fff; border-top-left-radius: 1rem; padding: 15px 20px; position: relative;}
header .content > :first-child {font-size: calc(var(--fs-md) - 2px); font-weight: 500; line-height: 1;}
header .shipping {display: flex; align-items: center; gap: 5px; margin-block: 10px 15px;}
header .bar {width: 100%; height: 6px; background-color: var(--_c-light-green); border-radius: 4px;}
header .btn-close {position: absolute; top: 15px; right: 20px; filter: invert(1); opacity: 1;}
header .btn-close:hover {opacity: 1;}
header .shipping > :nth-child(2) {font-size: var(--fs-base); line-height: calc(1 + 0.8 / 1.0);}
header .shipping > :nth-child(2) > :last-child {font-weight: bold; transition: var(--transition);}
header .shipping > :nth-child(2):hover > :last-child {color: var(--_c-light-green);}
header .cartBox .timer {max-width: 404px; background-color: var(--c-light-bg); display: flex; align-items: center; justify-content: center; padding: 8px 30px 10px; border-radius: 8px; margin-block: 15px; margin-inline: auto;}
header .cartBox .timer > * {min-width: 80px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; line-height: 1;}
header .cartBox .timer >:not(:first-child)::after { content: ":"; position: absolute; left: 0; font-size: calc(var(--fs-md) + 4px);}
header .cartBox .product {min-height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 1.5rem 20px; }
header .cartBox .product-info {display: flex; align-items: center; justify-content: center; gap: 15px;}
header .cartBox .product-info > :first-child {width: 98px; height: 98px; border-radius: 8px;}
header .cartBox .productInfo {max-width: 30rem;}
header .cartBox .productInfo > :first-child {font-size: var(--fs-base); font-weight: 500; line-height: calc(1 + .3/max(1, 1.0)); text-transform: capitalize; transition: var(--transition);}
header .cartBox .productInfo > :first-child:hover {color: var(--c-primary);}
header .cartBox .color {color: #00000099; font-size: var(--fs-xs); font-weight: 500; line-height: calc(1 + .5 / 1.0); margin-block: 8px .6rem;}
header .cartBox .color > :first-child {color: #000; font-weight: 500;}
header .cartBox .timer + .scrollbar {max-height: 315px;}
header .cartBox .timer + .scrollbar.maxHeight {max-height: 146px;}
header .productInfo > :nth-child(3) {font-size: var(--fs-base); font-weight: 700; line-height: calc(1 + .5 / 1.0);}
header .givenPrice {display: flex; flex-direction: column; gap: 10px; align-items: end;}
header .givenPrice > button {padding: 12px; background-color: var(--_c-bg);}
header .givenPrice > button::before {background-color: var(--c-primary);}
header .givenPrice > button img { width: 1rem; height: 1rem; filter: invert(1);}
header .givenPrice .quantityChange {display: flex; border: 1px solid #00000040; border-radius: 6px;}
header .givenPrice .quantityChange button {font-size: var(--fs-md); padding: 8px 15px; line-height: 1;}
header .givenPrice .quantityChange input {width: 40px; text-align: center;}
header .givenPrice .quantityChange input:hover {box-shadow: unset;}
header .givenPrice .quantityChange input:focus {outline: none; box-shadow: unset;}
header .cartBar {position: absolute; bottom: 0; width: 100%; background-color: #fff; z-index: 1; border-top: 1px solid var(--_c-border);}
header .givenPrice .recover {display: flex; flex-direction: row-reverse; gap: 8px;}
header .givenPrice .recover .btn__primary {width: 35px; background-color: #011f2d;}

header .cartBar > :first-child {font-size: var(--fs-base); font-weight: 600; line-height: 1;}
header .cartBar > :last-child {font-size: calc(var(--fs-base) + 2px); font-weight: 700;}
header .subtotal { margin-inline: 20px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between;}
header .cart-btn {display: flex; align-items: center; justify-content: center; gap: 15px; margin: 15px 20px 15px 20px;}
header .cart-btn a {width: 100%; background-color: var(--_c-bg); color: #fff; padding-block: 12px;}
header .cart-btn a::before {background-color: var(--c-primary);}
header .cart-btn a:hover {color: #fff;}
header .company-logo {width: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--c-light-bg); padding-block: 15px; gap: 5px;}
header .like {width: 190px; background-color: #fff; position: absolute; left: -190px; top: 90px; border-top-left-radius: 1rem; }
header .liked {display: flex; justify-content: space-between; align-items: center; padding: 4px 10px;}
header .liked > :first-child {font-size: calc(var(--fs-base) + 2px); font-weight: 500;}
header .liked img {height: 14px; width: 14px;}
header .liked-section {display: flex; flex-direction: column; align-items: center; padding: 1rem 10px .5rem 10px; border-top: 1px solid #0000001A;}
header .liked-section img {width: 167px; height: 167px; border-radius: 8px;}
header .liked-section > :nth-child(2) {font-size: var(--fs-base);}
header .liked-section button {color: #fff; background-color: var(--_c-bg); padding-block: 8px;}
header .liked-section button:hover {color: #fff;}
header .liked-section button::before {background-color: var(--c-primary);}
header .mainContent {max-height: 84vh;}
header .pricing {display: flex; align-items: start;gap: 5px;}
header .pricing > :nth-child(2) {font-size: var(--fs-xs); color: #00000080;  text-decoration: line-through;}

/* button for moving topward */
.topBtn {display: none; position: fixed; right: 3%; bottom: 5%; z-index: 4;}
.topBtn a {padding: 14px; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}
.topBtn a:hover {background-color: #fff;}
.topBtn a img {width: 1rem; height: 1rem; filter: invert(1); transition: var(--transition);}
.topBtn a:hover img {filter: unset;}
.topBtn a::before {content: unset;}

header .bottomBar .listed > ul > li:has( > ul) > a {position: relative;}
header .bottomBar .listed > ul > li:has( > ul) > a::before {width: 10px; height: 10px; background: no-repeat center / cover url('../images/icons/chevron-down.svg'); margin-block: auto; margin-left: auto; position: absolute; inset: 0; right: 15px; content: ""; transition: var(--transition);}
header .bottomBar .listed > ul > li:has( > ul):hover > a::before {filter: var(--_c-primary-filter); transform: rotate(-90deg);}
header .bottomBar .listed > ul > li > ul > li > ul li {transition: var(--transition); }
header .bottomBar .listed > ul > li > ul > li > ul li:hover {background-color: #00000008;}
header .bottomBar .listed > ul > li > ul > li > ul li a {padding: 10px 30px 10px 15px;}
header .lists > ul > li:has(> ul) > a {padding-right: 14px; cursor: pointer;}
header .lists > ul > li:has(> ul):hover > a {color: var(--c-primary);}
header .lists > ul > li:has(> ul) > a {position: relative;}
header .lists > ul > li:has(> ul) > a::before{width: 10px; height: 10px; background: no-repeat center / cover url('../images/icons/chevron-down.svg'); margin-block: auto; margin-left: auto; position: absolute; inset: 0;  content: ""; transition: var(--transition);}
header .lists > ul > li:hover > a::before {filter: var(--_c-primary-filter); transform: rotate(-180deg);}
header .mobile-bg {position: fixed; background: rgba(0, 0, 0, 0.8); z-index: 1; width: 100%; height: 100vh; top: 0;}

@media only screen and (max-width: 1200px) {
    header .bottomBar .listed > ul > li > ul {width: 670px;}
}

@media only screen and (max-width: 991px) {
    header .wrapper {flex-wrap: wrap; justify-content: center; gap: 1rem 0;}
    header .menued {order: 1; width: 50%;}
    header .extra {order: 2; width: 50%; justify-content: end;}
    header .search {order: 3; width: 100%; max-width: unset;}
    header .menued button {display: flex;}
    header .menued button:hover img {filter: var(--_c-primary-filter);}
    header .menued button > :first-child {display: block;}
    header .menued button > :nth-child(2) {display: none;}
    header .menued button.menuBtnActive > :first-child {display: none;}
    header .menued button.menuBtnActive > :nth-child(2) {display: block;}
    header .bottomBar {display: none;}
    header .bottomBar.active {display: block;}
    header .bottomBar .container {padding-inline: unset;}
    header .bottomBar .wrapper {justify-content: center; align-items: center; flex-direction: row-reverse; gap: unset;}
    header .dropdown {width: 50%; position: static;}
    header .dropdown > :first-child {display: flex;}
    header .dropdown > :first-child.btnColorActive {background-color: #000; color: #fff;}
    header .menu-btn {display: block; width: 50%; }
    header .menu-btn button {width: 100%; font-size: var(--fs-base); text-transform: uppercase; color: #000; padding: 10px 5px 10px 5px; border-bottom: 1px solid var(--_c-border);}
    header .menu-btn button.btnColorActive {width: 100%;  background-color: #000; color: #fff; }
    header .dropdown > :nth-child(2) {display: none;}
    header .listed {width: 100%; display: none; border-radius: unset; box-shadow: unset; left: 0 !important; top: 44px !important; transform: unset;}
    header .bottomBar {padding-block: unset;}
    header .bottomBar .listed > ul > li.invisibleListed {display: none;}
    header .bottomBar .listed > ul > li.activeListed {display: flex; flex-wrap: wrap;}
    header .bottomBar .listed > ul > li.activeListed.none >:where(button, a) {display: none;}

    header .bottomBar .listed > ul > li.activeListed > a {order: 2; width: 89%; padding-left: unset;}
    header .bottomBar .listed > ul > li.invisibleListed > button {order: 1; width: 49px;}
    header .bottomBar .listed > ul > li.invisibleListed > button img {transform: rotate(180deg);}
    
    header .bottomBar .listed > ul > li:hover > ul {display: none;}
    header .bottomBar .listed > ul > li:has( > ul) {display: flex; align-items: center; cursor: pointer;}
    header .bottomBar .listed > ul > li > button {width: 100%; display: flex; align-items: center; justify-content: end; padding: 10px 15px; padding-right: 20px;}
    header .bottomBar .listed > ul > li > button img {width: 17px; height: 17px;}
    header .bottomBar .listed > ul > li:hover > button img {filter: var(--_c-primary-filter); transition: var(--transition);}
    header .bottomBar .listed > ul > li > a {width: 100%;}
    header .bottomBar .listed > ul > li > ul { width: 100%; display: block;  position: static;}
    header .bottomBar .listed > ul > li > ul.ulActived {display: block; order: 3; padding: unset; border-radius: unset; box-shadow: unset; border: 0;}
    header .bottomBar .listed.listedActive {display: block; background-color: #fff; padding-block: unset; z-index: 1; box-shadow: var(--_c-shadow);}
    header .bottomBar .listed > ul > li > ul {display: none;}
    header .bottomBar .listed > ul > li > ul.listActive a {width: fit-content; display: block;}
    header .bottomBar .listed > ul > li > ul > li {display: flex; align-items: center; padding: unset;}
    header .bottomBar .listed > ul > li > ul > li > button {width: 100%; display: flex; align-items: center; justify-content: end; padding: 10px 15px;}
    header .bottomBar .listed > ul > li > ul > li button img {width: 17px; height: 17px;}
    header .bottomBar .listed > ul > li > ul > li:hover button img {filter: var(--_c-primary-filter); transition: var(--transition);}

    header .bottomBar .listed > ul > li > ul > li > a {font-weight: 400; padding: 10px 30px 10px 15px; border-bottom: unset;}
    header .bottomBar .listed > ul > li > ul > li {position: relative; transition: var(--transition);}

    header .bottomBar .listed > ul > li > ul > li:hover {background-color: #00000008;}
    header .bottomBar .listed > ul > li > ul > li:hover a {color: var(--c-primary);}
    header .bottomBar .listed > ul > li > ul > li > ul {display: none;}
    header .bottomBar .listed > ul > li > ul > li > ul.nestedActive {display: block;}
    header  .lists {width: 100%;}
    header .lists > ul > li {width: 100%; display: flex; align-items: center; padding-block: unset; cursor: pointer;}
    header .lists > ul > li a {width: 100%;}
    header .lists > ul > li > button {width: 100%; display: flex; align-items: center; justify-content: end; padding: 10px 15px; padding-right: 20px;}
    header .lists > ul > li > button img {width: 17px; height: 17px;}
    header .lists > ul > li:hover {background-color: #00000008;}
    header .lists > ul > li:hover button img {filter: var(--_c-primary-filter);}
    header .lists > ul > li.listedInvisible {display: none;}
    header .lists > ul > li.liActive {display: flex; flex-wrap: wrap;}
    header .lists > ul > li.liActive > button {order: 1; width: 49px;}
    header .lists > ul > li.liActive > button img {transform: rotate(180deg);}
    header .lists > ul > li.liActive > a {order: 2; width: 89%; padding-left: unset;}

    header .lists ul {display: none; order: 3;}
    header .lists ul.activeUI {width: 100%; display: block; background-color: #fff; animation: animateMenuOpen 0.4s ease;}
    header .activeUI a {padding: 10px 15px; text-align: start;}
    header .lists > ul > li > ul {width: 100%; padding-block: unset; border-radius: unset; position: static; box-shadow: unset;}
    header .lists > ul > li > ul.ulActive {display: block;}
    header .lists > ul > li > ul a {padding: unset;}
    header .features ul {display: none;}
    header .features ul.activeUI {display: block; width: 100%; background-color: #fff; animation: animateMenuOpen 0.4s ease;}
    header .features ul.activeUI a::after {content: unset;}
    header .features ul > li { cursor: pointer;}
    header .features ul > li:hover {background-color: #00000008;}
    header .features ul > li > a {width: 100%;}
    header .lists > ul > li.activeItem {display: block; padding-right: unset;}
    header .lists > ul > li:hover::before {transform: rotate(0); }
    header .lists > ul > li.activeItem::before {margin-block: unset; margin-left: unset; top: 16px; left: 15px; transform: rotate(180deg);} 
    header .lists > ul > li.activeItem > a {padding-left: 45px;}
    header .lists > ul > li:hover > ul {display: none;}
    header .lists > ul > li.liActive:hover > ul {display: block;}
    header .lists > ul > li.activeItem > ul {display: block;}
    header .menus > ul > li > a {font-weight: unset; border-bottom: unset; padding: 10px 15px; position: relative;}
    header .cartBox .timer + .scrollbar {overflow: hidden; max-height: unset;}
    .cartBox .offcanvas > .scrollbar {overflow: auto; max-height: 100%;}
    header .features {width: 100%;}
    header .lists > ul > li:has(> ul) a {position: relative;}

    header .bottomBar .listed > ul > li > ul > li > a {font-weight: unset; padding: 10px 15px; border-bottom: 0;}
    header .bottomBar .listed > ul > li > ul > li > ul {display: none;}
    header .lists > ul > li:has(> ul) > a::before {content: unset;}
    header .bottomBar .listed > ul > li:has( > ul) > a::before {content: unset;}

    header .bottomBar .listed > ul > li > ul > li.noActive {display: none;}
    header .bottomBar .listed > ul > li > ul > li.lis-active {display: flex; flex-wrap: wrap;}
    header .bottomBar .listed > ul > li > ul > li.lis-active > button {order: 1; width: 49px;}
    header .bottomBar .listed > ul > li > ul > li.lis-active > button img {transform: rotate(180deg);}
    header .bottomBar .listed > ul > li > ul > li.lis-active > a {order: 2; width: 89%; padding-left: unset;}
    header .bottomBar .listed > ul > li > ul > li.lis-active ul {width: 100%; order: 3;}
    header .bottomBar .listed > ul > li > ul > li.lis-active:hover {background-color: transparent;}
    header .bottomBar .listed > ul > li > ul > li.lis-active:hover a {color: #000;}
    header .bottomBar .listed > ul > li > ul > li.lis-active:hover button img {filter: unset;}
    header .bottomBar .listed > ul > li > ul > li.lis-active:hover {background-color: #00000008;}
    header .bottomBar .listed > ul > li > ul > li.lis-active:hover > a {color: var(--c-primary);}
    header .bottomBar .listed > ul > li > ul > li.lis-active:hover > button img {filter: var(--_c-primary-filter);}
    header .bottomBar .listed > ul > li > ul > li.lis-active > ul {background-color: #fff;}
    header .bottomBar .listed > ul > li > ul > li.lis-active > ul li:hover a {color: var(--c-primary);} 
    header .absolute {width: 100%; flex-direction: column; background-color: #fff; position: absolute; top: 44px; box-shadow: var(--_c-shadow);}
}
@media only screen and (max-width: 768px) {
    header .topBar .social {display: none;}
    header .topBar .carousel {width: 100%;}
    header .list {display: none;}
    header .price {display: none;}
    header .like {display: none !important;}
    header .offcanvas {border-bottom-left-radius: 1rem;}
    header .cartBar {border-bottom-left-radius: 1rem;}
    header .cartBar > :last-child {border-bottom-left-radius: 1rem;}
}
@media only screen and (max-width: 575px) {
    header .givenPrice {flex-direction: row;}
}
@media only screen and (max-width: 476px) {
    header .lists > ul > li.liActive > a {width: 84%;}
}


/* KEYFRAME FOR DROPDOWN ANIMATION */
@keyframes animateMenuOpen {
    0% {opacity: 0; transform: translateY(-1.5rem);}
    100%{opacity: 1; transform: translateY(0);}
}