.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-sm);
    background-color: var(--color-badge-bg);
    color: var(--color-badge);
    border: 1px solid var(--color-badge-border, transparent)
}

.sale-badge {
    --color-badge-bg: var(--color-sale-bg);
    --color-badge: var(--color-sale)
}

.badge--soldout {
    --color-badge-bg: rgba(0, 0, 0, .6);
    --color-badge: var(--color-accent);
    box-shadow: 0 1.2rem 3.2rem #0000004d;
    border-radius: var(--rounded-full)
}

.card-banner--style-1:before {
    content: "";
    background: var(--color-banner-bg);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(272 / 356 * 100%);
    -webkit-clip-path: polygon(0% 24.23%, 0% 24.23%, .028% 23.568%, .11% 22.936%, .243% 22.34%, .421% 21.789%, .642% 21.289%, .901% 20.848%, 1.194% 20.475%, 1.518% 20.176%, 1.869% 19.959%, 2.243% 19.832%, 97.158% .219%, 97.158% .219%, 97.605% .195%, 98.034% .302%, 98.439% .53%, 98.812% .868%, 99.146% 1.306%, 99.435% 1.833%, 99.672% 2.438%, 99.85% 3.11%, 99.961% 3.84%, 100% 4.616%, 100% 95.573%, 100% 95.573%, 99.967% 96.291%, 99.87% 96.972%, 99.716% 97.608%, 99.509% 98.188%, 99.255% 98.704%, 98.959% 99.146%, 98.626% 99.506%, 98.261% 99.775%, 97.87% 99.943%, 97.458% 100.001%, 2.542% 100.001%, 2.542% 100.001%, 2.13% 99.943%, 1.739% 99.775%, 1.374% 99.506%, 1.041% 99.146%, .745% 98.704%, .491% 98.188%, .284% 97.608%, .13% 96.972%, .033% 96.291%, 0% 95.573%, 0% 24.23%);
    clip-path: polygon(0% 24.23%, 0% 24.23%, .028% 23.568%, .11% 22.936%, .243% 22.34%, .421% 21.789%, .642% 21.289%, .901% 20.848%, 1.194% 20.475%, 1.518% 20.176%, 1.869% 19.959%, 2.243% 19.832%, 97.158% .219%, 97.158% .219%, 97.605% .195%, 98.034% .302%, 98.439% .53%, 98.812% .868%, 99.146% 1.306%, 99.435% 1.833%, 99.672% 2.438%, 99.85% 3.11%, 99.961% 3.84%, 100% 4.616%, 100% 95.573%, 100% 95.573%, 99.967% 96.291%, 99.87% 96.972%, 99.716% 97.608%, 99.509% 98.188%, 99.255% 98.704%, 98.959% 99.146%, 98.626% 99.506%, 98.261% 99.775%, 97.87% 99.943%, 97.458% 100.001%, 2.542% 100.001%, 2.542% 100.001%, 2.13% 99.943%, 1.739% 99.775%, 1.374% 99.506%, 1.041% 99.146%, .745% 98.704%, .491% 98.188%, .284% 97.608%, .13% 96.972%, .033% 96.291%, 0% 95.573%, 0% 24.23%)
}

.card-banner--style-1 .card-banner__image img {
    box-shadow: 0 20px 48px #3333
}

.btn {
    border-width: 1px;
    border-color: transparent;
    text-align: center;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.btn {
    padding: calc(var(--spacing-3) - 1px) calc(var(--spacing-5) - 1px);
    border-radius: var(--rounded-button)
}

.btn:hover {
    filter: brightness(1.1)
}

.btn:not(:disabled):active {
    transform: scale(.98)
}

.btn--small {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    font-size: 1.4rem;
    line-height: 2rem
}

.btn--large {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
    padding-top: var(--spacing-3-5);
    padding-bottom: var(--spacing-3-5)
}

.btn:disabled {
    cursor: not-allowed
}

.ega-theme .swiper {
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 40px;
    --swiper-pagination-color: var(--color-neutral-300);
    --swiper-pagination-bottom: 1.2rem;
    --swiper-pagination-bullet-width: 1.2rem;
    --swiper-pagination-bullet-height: .4rem;
    --swiper-pagination-bullet-border-radius: .5rem;
    --swiper-pagination-bullet-horizontal-gap: .8rem;
    --swiper-navigation-sides-offset: 1.2rem
}

.section-home-slider .swiper {
    --swiper-pagination-color: #fff
}

.ega-theme .swiper-pagination-bullet {
    transition: width .3s ease-out
}

.ega-theme .swiper-pagination-bullet-active {
    --swiper-pagination-bullet-width: 3.2rem
}

.ega-theme .swiper-button-prev:after, .ega-theme .swiper-rtl .swiper-button-next:after {
    font-family: ega-iconfont !important;
    content: ""
}

.ega-theme .swiper-button-next:after, .ega-theme .swiper-rtl .swiper-button-prev:after {
    font-family: ega-iconfont !important;
    content: ""
}

.ega-theme .swiper-button-next, .ega-theme .swiper-button-prev {
    transition: transform .3s ease-out;
    background-color: var(--color-neutral-200);
    width: var(--swiper-navigation-size);
    border-radius: 100%;
    opacity: .5
}

.ega-theme .swiper-button-next:active, .ega-theme .swiper-button-prev:active {
    transform: scale(.9)
}

.ega-theme .swiper-button-next:hover, .ega-theme .swiper-button-prev:hover {
    opacity: 1
}

.ega-theme .swiper-button-next:after, .ega-theme .swiper-button-prev:after {
    font-size: 1.6rem
}

.ega-theme .swiper-button-prev, .ega-theme .swiper-container-rtl .swiper-button-next, .ega-theme .swiper-button-next, .ega-theme .swiper-container-rtl .swiper-button-prev {
    background-image: none
}

.product-gallery {
    --gallery-gap: 1.2rem;
    --thumbs-size: 6.4rem
}

.gallery-thumbnails .swiper-slide > div {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--rounded-sm);
    overflow: hidden
}

.gallery-thumbnails .swiper-slide-thumb-active > div {
    border: 1px solid var(--color-secondary)
}

@media (max-width: 767px) {
    .ega-theme .swiper-button-next:after, .ega-theme .swiper-button-prev:after {
        font-size: 1.2rem
    }

    .ega-theme .swiper {
        --swiper-pagination-bullet-width: .4rem;
        --swiper-navigation-size: 2rem;
        --swiper-pagination-bullet-horizontal-gap: .4rem
    }

    .ega-theme .swiper-pagination-bullet-active {
        --swiper-pagination-bullet-width: 1.2rem
    }
}

.cart-table {
    --total-width: 94.4;
    --table-gap: calc(3.6 / 94.4 * 100%);
    --product-column: calc(32 / var(--total-width) * 100%);
    --default-column: calc(12 / var(--total-width) * 100%);
    --cart-template: var(--product-column) var(--default-column) 13rem var(--default-column) auto
}

.cart-item__image {
    width: 4.4rem;
    height: 4.4rem;
    flex: 0 0 4.4rem
}

.cart {
    --cart-right-column: calc(400 / 1384 * 100%);
    --cart-left-column: calc(944 / 1384 * 100%);
    --cart-gap: 4rem
}

@media (max-width: 975px) {
    .cart {
        --cart-right-column: 100%;
        --cart-left-column: 100%;
        --cart-gap: 1.6rem
    }

    .cart-table {
        --cart-template: 4.2rem 1fr 1fr
    }

    .cart-item {
        grid-template-areas:"product product product" "space total quantity";
        padding: 1.6rem 0;
        grid-template-columns:var(--cart-template)
    }

    .cart-item .cart-product-col {
        grid-area: product;
        padding-right: 2rem;
        gap: 1.2rem
    }

    .cart-quantity-col {
        grid-area: quantity;
        justify-content: flex-end
    }

    .cart-total-col {
        grid-area: total
    }

    .cart-remove-col {
        position: absolute;
        right: 0;
        top: 1.6rem;
        z-index: 1
    }

    .cart-quantity-col .custom-number-input button {
        padding: .4rem
    }

    .cart-quantity-col .custom-number-input {
        width: 9.6rem;
        height: 3.2rem
    }
}

.coupon-item:before, .coupon-item:after {
    --coupon-item-dot-with: 1.6rem;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--coupon-item-dot-with, 1.6rem);
    height: var(--coupon-item-dot-with, 1.6rem);
    border-radius: 100%;
    background-color: var(--color-background-body)
}

.coupon-item:before {
    left: calc(-1 * var(--coupon-item-dot-with) / 2)
}

.coupon-item:after {
    right: calc(-1 * var(--coupon-item-dot-with) / 2)
}

.coupon-group {
    --color-coupon-header: #EE7F19;
    --color-coupon-border: #FED7D7;
    --color-coupon-background: linear-gradient(180deg, rgba(238, 127, 25, .1) 0%, rgba(255, 255, 255, 0) 100%);
    background: var(--color-coupon-background);
    border-color: var(--color-coupon-border)
}

.coupon-group-header {
    color: var(--color-coupon-header)
}

.promo-box-group {
    --color-prombox-header: #218410;
    --color-prombox-border: #218410;
    --color-prombox-background: #EBF4E5;
    background: var(--color-prombox-background);
    border-color: transparent
}

.promo-box__header {
    color: var(--color-prombox-header)
}

.portal-dialog {
    position: fixed !important;
    z-index: var(--dialog-index, 3000);
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent
}

.portal-overlay {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dialog-overlay-color, rgba(0, 0, 0, .5))
}

.portal-inner {
    position: relative;
    z-index: 1;
    max-width: var(--dialog-max-width, 400px)
}

.section-flashsale:before, .section-flashsale:after {
    content: "";
    position: absolute;
    height: 100%;
    width: calc(120px + (100vw - 1440px - var(--container-padding)) / 2);
    top: 0;
    background: var(--color-flashsale-bg);
    z-index: 0
}

.section-flashsale:before {
    left: 0;
    -webkit-clip-path: polygon(0% 0%, 93.535% 11.004%, 93.535% 11.004%, 94.664% 11.161%, 95.705% 11.355%, 96.652% 11.582%, 97.496% 11.84%, 98.23% 12.125%, 98.848% 12.433%, 99.341% 12.762%, 99.702% 13.109%, 99.924% 13.469%, 100% 13.841%, 100% 86.159%, 100% 86.159%, 99.924% 86.531%, 99.702% 86.891%, 99.341% 87.238%, 98.848% 87.567%, 98.23% 87.875%, 97.496% 88.16%, 96.652% 88.418%, 95.705% 88.645%, 94.664% 88.839%, 93.535% 88.996%, 0% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 93.535% 11.004%, 93.535% 11.004%, 94.664% 11.161%, 95.705% 11.355%, 96.652% 11.582%, 97.496% 11.84%, 98.23% 12.125%, 98.848% 12.433%, 99.341% 12.762%, 99.702% 13.109%, 99.924% 13.469%, 100% 13.841%, 100% 86.159%, 100% 86.159%, 99.924% 86.531%, 99.702% 86.891%, 99.341% 87.238%, 98.848% 87.567%, 98.23% 87.875%, 97.496% 88.16%, 96.652% 88.418%, 95.705% 88.645%, 94.664% 88.839%, 93.535% 88.996%, 0% 100%, 0% 0%)
}

.section-flashsale:after {
    right: 0;
    -webkit-clip-path: polygon(100% 0%, 6.466% 11.004%, 6.466% 11.004%, 5.337% 11.161%, 4.295% 11.355%, 3.349% 11.582%, 2.504% 11.84%, 1.77% 12.125%, 1.152% 12.433%, .659% 12.762%, .298% 13.109%, .076% 13.469%, 0% 13.841%, 0% 86.159%, 0% 86.159%, .076% 86.531%, .298% 86.891%, .659% 87.238%, 1.152% 87.567%, 1.77% 87.875%, 2.504% 88.16%, 3.349% 88.418%, 4.295% 88.645%, 5.337% 88.839%, 6.466% 88.996%, 100% 100%, 100% 0%);
    clip-path: polygon(100% 0%, 6.466% 11.004%, 6.466% 11.004%, 5.337% 11.161%, 4.295% 11.355%, 3.349% 11.582%, 2.504% 11.84%, 1.77% 12.125%, 1.152% 12.433%, .659% 12.762%, .298% 13.109%, .076% 13.469%, 0% 13.841%, 0% 86.159%, 0% 86.159%, .076% 86.531%, .298% 86.891%, .659% 87.238%, 1.152% 87.567%, 1.77% 87.875%, 2.504% 88.16%, 3.349% 88.418%, 4.295% 88.645%, 5.337% 88.839%, 6.466% 88.996%, 100% 100%, 100% 0%)
}

.flashsale-news__item {
    flex: 0 0 auto;
    width: auto
}

.header {
    background-color: var(--color-header-bg);
    color: var(--color-header);
    min-height: var(--header-height);
    /*padding: var(--spacing-4-5) 0;*/
    z-index: 2000
}

.logo-wrapper {
    max-width: var(--logo-width)
}

.header-icon {
    background: rgba(255, 255, 255, .15);
    font-size: 2rem
}

.cart-count {
    color: var(--color-cart-bubble);
    background-color: var(--color-cart-bubble-bg);
    width: 1.6rem;
    height: 1.6rem;
    font-size: 1rem;
    right: 4px;
    top: 2px
}

.search-bar form {
    --search-button-size: 3.6rem;
    --search-button-width: 6.4rem;
    --search-button-height: 100%;
    padding-right: calc(var(--search-button-size) + .8rem)
}

.header-search {
    max-width: 100%;
    width: 100%
}

@media (min-width: 1024px) {
    .header-search {
        /*max-width: calc(100% - 3.6rem);*/
        width: 100%
    }
}

header .search-bar .form-select {
    max-width: clamp(16rem, 12.5vw, 17.5rem);
    margin-right: 1.2rem;
    padding: 0;
    padding-right: 1.2rem;
    border-radius: 0;
    border-right: 1px solid var(--color-neutral-100) !important;
    --tw-ring-color: transparent;
    border: none
}

.search-bar .search-button {
    width: var(--search-button-width, var(--search-button-size));
    height: var(--search-button-height, var(--search-button-size));
    font-size: 2rem
}

header .search-dropdown {
    box-shadow: 0 2.8rem 6.4rem #0003;
    display: none
}

header .search-bar:has(input:focus) .search-dropdown {
    display: table
}

.sub-header {
    background-color: var(--color-sub-header-bg);
    color: var(--color-sub-header)
}

.hot-product-list {
    grid-template-areas:"col1 col2 main main col5 col6" "col3 col4 main main col7 col8";
    grid-auto-columns: calc(100% / 6 - var(--grid-gutter))
}

@media (max-width: 1200px) {
    .hot-product-list {
        grid-template-areas:"main item item";
        grid-auto-columns: calc(100% / 3 - var(--grid-gutter))
    }
}

@media (max-width: 767px) {
    .hot-product-list {
        grid-template-areas:"main main" "item item";
        grid-auto-columns: calc(100% / 2 - var(--grid-gutter))
    }
}

.hot-product {
    grid-area: main;
    position: relative
}

.hot-product .card-product, .hot-product .card-product form {
    height: 100%
}

.hot-product:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 74%;
    left: 0;
    top: 0;
    background-color: var(--color-hot-product-bg, #EE1926);
    -webkit-clip-path: polygon(100% 80.297%, 100% 80.297%, 99.973% 80.761%, 99.893% 81.205%, 99.764% 81.624%, 99.59% 82.012%, 99.375% 82.365%, 99.122% 82.678%, 98.835% 82.945%, 98.518% 83.16%, 98.174% 83.32%, 97.808% 83.417%, 2.892% 99.764%, 2.892% 99.764%, 2.44% 99.793%, 2.005% 99.725%, 1.594% 99.568%, 1.214% 99.331%, .873% 99.02%, .578% 98.645%, .336% 98.211%, .154% 97.729%, .04% 97.204%, 0% 96.645%, 0% 3.15%, 0% 3.15%, .033% 2.639%, .13% 2.154%, .284% 1.702%, .491% 1.289%, .745% .922%, 1.041% .608%, 1.374% .352%, 1.739% .161%, 2.13% .041%, 2.542% 0%, 97.458% 0%, 97.458% 0%, 97.87% .041%, 98.261% .161%, 98.626% .352%, 98.959% .608%, 99.255% .922%, 99.509% 1.289%, 99.716% 1.702%, 99.87% 2.154%, 99.967% 2.639%, 100% 3.15%, 100% 80.297%);
    clip-path: polygon(100% 80.297%, 100% 80.297%, 99.973% 80.761%, 99.893% 81.205%, 99.764% 81.624%, 99.59% 82.012%, 99.375% 82.365%, 99.122% 82.678%, 98.835% 82.945%, 98.518% 83.16%, 98.174% 83.32%, 97.808% 83.417%, 2.892% 99.764%, 2.892% 99.764%, 2.44% 99.793%, 2.005% 99.725%, 1.594% 99.568%, 1.214% 99.331%, .873% 99.02%, .578% 98.645%, .336% 98.211%, .154% 97.729%, .04% 97.204%, 0% 96.645%, 0% 3.15%, 0% 3.15%, .033% 2.639%, .13% 2.154%, .284% 1.702%, .491% 1.289%, .745% .922%, 1.041% .608%, 1.374% .352%, 1.739% .161%, 2.13% .041%, 2.542% 0%, 97.458% 0%, 97.458% 0%, 97.87% .041%, 98.261% .161%, 98.626% .352%, 98.959% .608%, 99.255% .922%, 99.509% 1.289%, 99.716% 1.702%, 99.87% 2.154%, 99.967% 2.639%, 100% 3.15%, 100% 80.297%)
}

@media (min-width: 768px) {
    .hot-product:before {
        height: 40%
    }
}

@media (min-width: 1200px) {
    .hot-product .card-product form:before, .hot-product .card-product:after {
        content: none
    }

    .hot-product .card-product__bottom {
        position: static;
        opacity: 1;
        visibility: visible;
        margin-top: var(--spacing-12)
    }

    .hot-product .card-product__body {
        padding-top: var(--spacing-10)
    }

    .hot-product:before {
        height: 40%
    }
}

.hot-product-item .flashsale__bottom, .hot-product-item .product-promo-tag {
    display: none
}

.hot-product-item .card-product {
    height: 100%
}

.product-detail:before {
    content: "";
    height: 100%;
    background: var(--color-background);
    z-index: 0;
    width: 50%;
    position: absolute;
    border-radius: var(--rounded-lg)
}

@media (min-width: 1440px) {
    .product-detail:before {
        width: calc(7 / 12 * 100%)
    }
}

.product-specifications table {
    border-collapse: unset;
    border-spacing: 0
}

.product-specifications table, #specification-modal table {
    max-width: 100%;
    width: 100%
}

.product-specifications table td {
    padding: 8px;
    border-right: 1px solid var(--color-neutral-100);
    border-bottom: 1px solid var(--color-neutral-100)
}

.product-specifications table tr:nth-of-type(odd) {
    background-color: var(--color-neutral-50)
}

.product-specifications table tr:first-child td {
    border-top: 1px solid var(--color-neutral-100)
}

.product-specifications table tr td:first-child {
    border-left: 1px solid var(--color-neutral-100);
    width: 40%
}

.product-specifications table tr:first-child td:first-child {
    border-top-left-radius: 8px
}

.product-specifications table tr:first-child td:last-child {
    border-top-right-radius: 8px
}

.product-specifications table tr:last-child td:last-child {
    border-bottom-right-radius: 8px
}

.product-specifications table tr:last-child td:first-child {
    border-bottom-left-radius: 8px
}

@media (max-width: 975px) {
    #product-specifications {
        display: block
    }

    .product-detail:before {
        width: 100%;
        background: var(--color-body-background)
    }
}

.expandable-content {
    position: relative;
    overflow: hidden
}

.expandable-content .content {
    transition: height .5s ease-in-out;
    overflow: hidden
}

.expandable-content.show-all .content {
    height: auto
}

.expandable-content:not(.show-all):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    max-height: 10rem;
    background: linear-gradient(0, #FFF 0%, rgba(255, 255, 255, 0) 100%)
}

.btn-showmore {
    position: relative;
    margin: auto;
    display: flex;
    gap: var(--spacing-1);
    border-color: var(--color-primary);
    background-color: var(--color-background);
    color: var(--color-primary)
}

.btn-showmore:hover {
    background-color: var(--color-primary);
    color: var(--color-background)
}

.btn-showmore {
    z-index: 1
}

.navigation-wrapper {
    height: 4.8rem
}

.navigation-header .navigation-vertical {
    width: 100%;
    color: var(--color-foreground);
    z-index: 2;
    top: 100%
}

.submenu {
    position: absolute;
    top: 0;
    right: calc(-1 * var(--navigation-width));
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    z-index: 1;
    box-shadow: 0 12px 24px #4a6eef1a;
    display: none
}

.navigation-horizontal-wrapper {
    max-height: 4.8rem
}

.navigation-horizontal {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%
}

.navigation-horizontal > .menu-item > a {
    padding: 1.4rem 2rem
}

.navigation-arrows {
    display: none
}

.navigation-horizontal .submenu {
    width: auto;
    top: initial;
    right: initial;
    bottom: initial;
    left: inherit;
    height: auto;
    width: 240px;
    color: var(--color-foreground);
    background: transparent
}

.navigation-horizontal .submenu__list {
    background: var(--color-background);
    overflow: auto
}

.navigation--horizontal .menu-item .submenu:hover, .navigation--horizontal .menu-item:hover .submenu {
    z-index: 900
}

.navigation-horizontal .submenu__item--main a {
    display: block;
    font-weight: 600;
    padding: var(--spacing-4)
}

.navigation-horizontal .submenu.mega-menu {
    width: 100%;
    left: 0;
    padding: 0 var(--container-padding);
    max-width: 1440px
}

.navigation-horizontal .mega-menu .submenu__list {
    display: grid;
    grid-template-columns:repeat(var(--megamenu-column, 4), 1fr);
    padding: var(--spacing-5) var(--container-padding);
    grid-gap: var(--grid-gutter);
    max-height: 40rem;
    overflow: auto
}

.mega-menu .submenu__item--main a {
    padding: 0
}

.submenu__col ul {
    padding-left: var(--spacing-5);
    list-style: disc;
    margin-top: var(--spacing-3)
}

.price {
    font-weight: 600;
    color: var(--color-price)
}

.compare-price {
    color: var(--color-price-compare)
}

.card-product {
    --bottom-height: 4.1rem
}

.card-product .price {
    font-size: 1.8rem
}

.card-product .compare-price {
    font-size: 1.2rem
}

.product-promo-tag img {
    height: 1.6rem;
    width: auto
}

.card-product__badges .icon-play {
    font-size: 2rem
}

.card-product--vertical:after {
    --shadow-height: 3.2rem;
    content: "";
    position: absolute;
    bottom: calc(var(--shadow-height) / 2);
    left: 50%;
    transform: translate(-50%);
    height: var(--shadow-height);
    width: calc(175 / 262 * 100%);
    border-radius: 8px;
    background: var(--color-secondary);
    filter: blur(32px)
}

.card-product__bottom {
    position: absolute;
    top: 100%;
    transform: translateY(-.7rem);
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease
}

.card-product__utilites {
    --button-size: 3.6rem;
    transform: translate(4.4rem)
}

.card-product__utilites button {
    width: var(--button-size);
    height: var(--button-size);
    opacity: .6;
    background: #ffffff;
    border-color: var(--color-label)
}

.card-product__utilites button:hover {
    opacity: 1
}

.card-product__utilites button span {
    background: black;
    color: #fff;
    border-radius: var(--rounded-full);
    transform: translate(calc(-50% - var(--button-size) / 2 - .4rem));
    left: auto;
    visibility: hidden
}

.card-product__option.selected .card-product__option-dot {
    box-shadow: 0 0 0 1px var(--color-swatch), inset 0 0 0 2px var(--color-background)
}

.card-product--horizontal form {
    display: grid;
    grid-template-columns:calc(2 / 4.72 * 100%) 1fr;
    grid-template-rows:1fr auto
}

@media (min-width: 1024px) {
    .card-product--vertical:hover {
        z-index: 900
    }

    .card-product--vertical:hover .card-product__bottom {
        opacity: 1;
        transform: translateY(-1rem);
        visibility: visible
    }

    .card-product--vertical form:before {
        content: "";
        background: #ffffff;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: -1;
        visibility: hidden;
        border-radius: var(--rounded-sm);
        transition: all .3s .1s ease-out
    }

    .card-product--vertical:has(.card-product__bottom):hover form:before {
        visibility: visible;
        height: calc(100% + var(--bottom-height) + .6rem)
    }

    .card-product--vertical:hover:after {
        bottom: auto
    }

    .card-product--vertical:hover .card-product__utilites {
        transform: translate(0)
    }

    .card-product__utilites button:hover span {
        opacity: 1;
        visibility: visible
    }
}

@media (max-width: 767px) {
    .card-product .price {
        font-size: 1.4rem
    }

    .card-product--vertical:after {
        content: none
    }
}

.heading-tab.active {
    color: var(--color-foreground)
}

.tab-nav--style2 .active {
    color: var(--color-secondary);
    border-bottom: 1.5px solid var(--color-secondary)
}

.text-w-icon--style-1 .item + .item:before {
    content: "";
    width: 1px;
    height: 3.2rem;
    background-color: var(--color-neutral-50);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}