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

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

.badge--soldout {
    --color-badge-bg: var(--color-neutral-50);
    --color-badge: var(--color-error)
}

.card-banner--style-1:before {
    content: "";
    background: var(--color-banner-bg);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(272 / 356 * 100%)
}

.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.2)
}

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

.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
}

.embla {
    position: relative
}

.embla__viewport {
    overflow: hidden;
    max-width: 100%;
}

.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom
}

.embla__slide {
    min-width: 0
}

.embla__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px
}

.embla__dot {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value),.5);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #909090
}

.embla__dot--selected {
    background-color: var(--color-primary)
}

.embla .embla__button {
    -webkit-tap-highlight-color: var(--color-background);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    width: 3.6rem;
    height: 3.6rem;
    z-index: 1;
    border-radius: 50%;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease-out
}

.embla__button {
    opacity: 0
}

.embla:hover .embla__button:not(:disabled) {
    opacity: 1
}

.embla:hover .embla__button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.embla__button--prev {
    left: var(--embla-button-offset, 12px )
}

.embla__button--next {
    right: var(--embla-button-offset, 12px )
}

.embla-thumbs .embla__slide {
    border-radius: var(--rounded);
    border: 2px solid var(--color-neutral-50);
    overflow: hidden
}

.embla-thumbs .embla__slide.embla-thumbs__slide--selected {
    border-color: var(--color-primary)
}

.embla__buttons:has([disabled]+[disabled]) {
    display: none
}

.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
    }
}

@media (min-width: 1270px) {
    .colllection-filter-bar {
        position:relative;
        z-index: 10
    }

    .colllection-filter-bar .title-head {
        margin-bottom: 0
    }

    .colllection-filter-bar details {
        position: relative
    }

    .colllection-filter-bar .aside-content {
        position: absolute;
        padding: var(--spacing-3);
        background: var(--color-background);
        max-height: 350px;
        min-width: 300px;
        left: 0;
        overflow: auto;
        bottom: auto;
        margin-top: 20px;
        border-radius: 0 0 var(--rounded) var(--rounded);
        margin-top: 3rem;
        z-index: 10
    }

    .colllection-filter-bar .facet-inner {
        overflow: initial
    }

    .product-list {
        position: relative;
        z-index: 0
    }
}

.coupon-item__dot {
    --coupon-item-dot-with: 1.6rem;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 8px;
    top: 0;
    left: -10px;
    height: 100%;
    z-index: 2;
    justify-content: center;
    align-items: center
}

.coupon-item__dot span {
    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);
    display: block
}

.coupon-item__label {
    position: absolute;
    height: 100%;
    background: var(--coupon-item-label-background, #EE7F19);
    width: 44px;
    padding: 7px;
    top: 0;
    left: 0;
    color: #fff;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.coupon-item__label span {
    transform: translateY(-50%) rotate(90deg);
    display: block;
    position: absolute;
    top: 50%
}

.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%)
}

.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)
}

.faq-item[open] summary {
    color: var(--color-primary)
}

.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-2) 0;
    z-index: 2000
}

.header.header--transparent:not(.active) {
    background-color: transparent
}

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

.header-icon .icon {
    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
}

.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 .card-product__bottom {
        padding:0
    }

    .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)
}

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

@media (min-width: 1200px) {
    .hot-product .card-product__bottom {
        padding:0
    }

    .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%
}

@media (min-width: 768px) {
    .img-text-section {
        background:linear-gradient(var(--gradient-direction),#fff 33.333%,var(--color-background) 33.333%)
    }
}

.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 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    content: "";
    max-height: 10rem;
    background: linear-gradient(0,var(--color-background) 0%,rgba(255,255,255,0) 100%)
}

.btn-showmore {
    position: relative;
    margin: auto;
    display: flex;
    gap: var(--spacing-1);
    border-color: var(--color-secondary);
    background-color: transparent;
    font-weight: 600;
    color: var(--color-secondary)
}

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

.btn-showmore {
    z-index: 1
}

.booking-form.sold-out {
    display: block
}

.booking-form.sold-out .booking-form-wrapper {
    display: none
}

.booking-form.sold-out .out-of-service {
    display: block
}

@media (min-width: 1280px) {
    .main-product .product-grid {
        display:grid;
        grid-template-columns: 1fr 350px;
        grid-gap: var(--grid-gutter);
        height: 100%
    }

    .main-product .product-gallery-wrapper,.main-product .product-right {
        height: -moz-max-content;
        height: max-content
    }
}

.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 #0000001a;
    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-horizontal>.menu-item:first-child>a {
    padding-left: 0
}

.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)
}

.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);
    font-family: var(--font-headings-family)
}

.compare-price {
    color: var(--color-price-compare);
    font-weight: 400;
    font-family: var(--font-headings-family)
}

.product-banner-list {
    grid-template-areas: "main main" "item item";
    grid-auto-columns: calc(100% / 3 - var(--grid-gutter))
}

@media (max-width: 975px) {
    .product-banner .card-product__bottom {
        padding:0
    }

    .product-banner-list {
        grid-template-areas: "main main" "item item";
        grid-auto-columns: calc(100% / 2 - var(--grid-gutter))
    }
}

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

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

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

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

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

.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(5.2rem)
}

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

.card-product__title {
    font-size: 1.8rem
}

.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-neutral-50),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:hover .card-product__utilites {
        transform: translate(0)
    }

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

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

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

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

.tab-nav--style3 .tab-btn {
    color: var(--color-primary);
    opacity: .7
}

.tab-nav--style3 .active {
    opacity: 1
}