/* ============================================
   Product Card Typography
   ============================================ */
.price-label {
    display: block;
    margin-bottom: 0.25rem;
}

/* ============================================
   Section-Specific Variables
   ============================================ */
.section-main-products {
    --section-background-hash: 0;
}

.section-main-products+* {
    --previous-section-background-hash: 0;
}

.section-main-products {
    --product-list-gap              : var(--product-list-row-gap) var(--spacing-2);
    --product-list-items-per-row    : 2;
    --product-list-grid             : auto-flow dense / repeat(var(--product-list-items-per-row), minmax(0, 1fr));
    --product-list-promo-grid-column: span 2;
    --content-over-media-gap        : var(--spacing-8);
}

@media screen and (min-width: 700px) {
    .section-main-products {
        --product-list-gap              : var(--product-list-row-gap) var(--product-list-column-gap);
        --product-list-items-per-row    : 2;
        --product-list-promo-grid-column: span 1;
    }
}

@media screen and (min-width: 1000px) {
    .section-main-products {
        --product-list-items-per-row    : 2;
        --product-list-promo-grid-column: span 2;
    }
}

@media screen and (min-width: 1200px) {
    .section-main-products {
        --product-list-items-per-row: 3;
    }
}

@media screen and (min-width: 1400px) {
    .section-main-products {
        --product-list-items-per-row: 4;
    }
}

/* ============================================
   Base Styles
   ============================================ */
body {
    --background  : var(--background-primary);
    --text-color  : var(--text-primary);
    background    : rgb(var(--background));
    color         : rgb(var(--text-color));
    font          : var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
    letter-spacing: var(--text-letter-spacing);
    margin        : 0;
    position      : relative;
}

@media screen and (pointer: fine) {
    .button:not([disabled]):hover {
        --button-background-opacity: 0.85;
    }
}

@media all {

    button,
    label,
    summary,
    [type="checkbox"],
    [type="radio"],
    [type="submit"] {
        -webkit-tap-highlight-color: transparent;
        touch-action               : manipulation;
        cursor                     : pointer;
    }

    summary {
        -webkit-user-select: none;
        user-select        : none;
        list-style-type    : none;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    p {
        margin: 0;
    }

    input::placeholder {
        opacity: 1;
        color  : #9ca3af;
    }

    :disabled {
        cursor: default;
    }

    img {
        display: block;
    }

    img {
        color    : #0000;
        max-width: min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%);
        height   : auto;
    }

    @media screen and (min-width: 700px) {
        img {
            max-width: min(var(--image-max-width, 100%), 100%);
        }
    }

    *,
    :before,
    :after {
        box-sizing  : border-box;
        border-style: solid;
        border-width: 0;
        border-color: rgb(var(--text-color) / 0.12);
    }

    .accordion {
        --accordion-spacing     : var(--spacing-5);
        box-sizing              : content-box;
        border-block-start-width: 1px;
        border-block-end-width  : 1px;
    }

    .accordion__toggle {
        gap                : var(--spacing-2);
        flex-grow          : 1;
        justify-content    : space-between;
        align-items        : center;
        padding-block-start: var(--accordion-spacing);
        padding-block-end  : var(--accordion-spacing);
        display            : flex;
    }

    .accordion__content {
        margin-block-end  : var(--accordion-spacing);
        padding-inline-end: var(--spacing-6);
        transform         : translateY(-4px);
    }

    .accordion--lg {
        --accordion-spacing: var(--spacing-8);
    }

    .accordion+.accordion {
        border-block-start-width: 0;
    }

    .accordion-box {
        padding: var(--spacing-1) var(--spacing-6);
    }

    .accordion-box> :first-child {
        border-block-start-width: 0;
    }

    .accordion-box> :last-child {
        border-block-end-width: 0;
    }

    @media screen and (min-width: 1000px) {
        .accordion-box {
            padding: var(--spacing-5) var(--spacing-12);
        }
    }

    .button {
        --button-background   : var(--button-background-primary) / var(--button-background-opacity, 1);
        --button-text-color   : var(--button-text-primary);
        --button-outline-color: var(--button-background-primary);
        -webkit-appearance    : none;
        appearance            : none;
        border-radius         : var(--rounded-button);
        background-color      : rgb(var(--button-background));
        color                 : rgb(var(--button-text-color));
        text-align            : center;
        font-size             : var(--text-sm);
        letter-spacing        : var(--text-letter-spacing);
        padding-block-start   : var(--spacing-2-5);
        padding-block-end     : var(--spacing-2-5);
        padding-inline-start  : var(--spacing-5);
        padding-inline-end    : var(--spacing-5);
        font-weight           : bold;
        line-height           : 1.6;
        transition            : background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        display               : inline-block;
        position              : relative;
    }

    .button--lg {
        font-size           : var(--text-base);
        padding-block-start : 0.8125rem;
        padding-block-end   : 0.8125rem;
        padding-inline-start: var(--spacing-6);
        padding-inline-end  : var(--spacing-6);
    }

    .button--xl {
        font-size           : var(--text-base);
        padding-block-start : var(--spacing-4);
        padding-block-end   : var(--spacing-4);
        padding-inline-start: var(--spacing-8);
        padding-inline-end  : var(--spacing-8);
    }

    .button__loader {
        gap            : var(--spacing-1-5);
        opacity        : 0;
        pointer-events : none;
        justify-content: center;
        align-items    : center;
        display        : flex;
        position       : absolute;
        top            : 0;
        bottom         : 0;
        left           : 0;
        right          : 0;
    }

    .button__loader>* {
        width        : var(--spacing-1-5);
        height       : var(--spacing-1-5);
        border-radius: var(--rounded-full);
        background   : currentColor;
    }

    @media screen and (min-width: 700px) {
        .button {
            padding-block-start : var(--spacing-3);
            padding-block-end   : var(--spacing-3);
            padding-inline-start: var(--spacing-6);
            padding-inline-end  : var(--spacing-6);
        }

        .button--lg {
            padding-block-start : var(--spacing-3-5);
            padding-block-end   : var(--spacing-3-5);
            padding-inline-start: var(--spacing-8);
            padding-inline-end  : var(--spacing-8);
        }

        .button--xl {
            padding-block-start : 1.075rem;
            padding-block-end   : 1.075rem;
            padding-inline-start: var(--spacing-10);
            padding-inline-end  : var(--spacing-10);
        }
    }

    .circle-chevron {
        width        : var(--spacing-6);
        height       : var(--spacing-6);
        border-radius: var(--rounded-full);
        background   : rgb(var(--text-color) / 0.1);
        flex-shrink  : 0;
        place-items  : center;
        transition   : all 0.2s ease-in-out;
        display      : grid;
    }

    @media screen and (pointer: fine) {
        .group:hover .circle-chevron.group-hover\:colors:not([disabled]) {
            background: rgb(var(--text-color));
            color     : rgb(var(--background));
        }
    }

    .popover {
        --background                   : var(--dialog-background);
        --text-color                   : var(--text-primary);
        --popover-title-padding        : var(--spacing-5);
        --popover-body-padding         : var(--spacing-4) 0;
        --popover-content-max-height   : 75vh;
        --popover-content-max-width    : none;
        --popover-anchor-block-spacing : var(--spacing-4);
        --popover-anchor-inline-spacing: 0;
        width                          : auto;
        min-width                      : 200px;
        visibility                     : hidden;
        padding                        : var(--spacing-4);
        z-index                        : 9999;
        display                        : none;
        position                       : absolute;
        background                     : rgb(var(--background));
        border-radius                  : var(--rounded-lg);
        box-shadow                     : 0 4px 20px rgba(0, 0, 0, 0.15);
        border                         : 1px solid rgb(var(--text-color) / 0.1);
        opacity                        : 0;
        transition                     : opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }

    .popover[open] {
        visibility: visible;
        display   : block;
        opacity   : 1;
    }

    /* Popover listbox styling */
    .popover-listbox {
        display       : flex;
        flex-direction: column;
        gap           : var(--spacing-0-5);
    }

    @media screen and (min-width: 1000px) {
        .popover {
            --popover-content-max-height: 350px;
            --popover-content-max-width : 380px;
            max-width                   : 300px;
        }
    }

    /* Expanded state for button */
    [aria-expanded="true"].group .circle-chevron,
    .group.expanded .circle-chevron {
        transform: rotate(180deg);
    }

    /* Group hover and expanded colors */
    .group-expanded\:rotate {
        transition: transform 0.2s ease-in-out;
    }

    [aria-expanded="true"] .group-expanded\:rotate {
        transform: rotate(180deg);
    }

    /* Sort by facet positioning */
    .sort-by-facet {
        position: relative;
    }

    .popover-listbox__option {
        justify-content: flex-start;
        align-items    : center;
        gap            : var(--spacing-2);
        width          : 100%;
        padding        : var(--spacing-2-5) var(--spacing-4);
        color          : rgb(var(--text-color) / 0.7);
        transition     : color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        display        : flex;
        border         : none;
        background     : transparent;
        text-align     : left;
        cursor         : pointer;
        border-radius  : var(--rounded-sm);
        white-space    : nowrap;
    }

    .popover-listbox__option[aria-selected="true"] {
        color      : rgb(var(--text-color));
        background : rgb(var(--text-color) / 0.08);
        font-weight: 600;
    }

    .popover-listbox__option:hover {
        color     : rgb(var(--text-color));
        background: rgb(var(--text-color) / 0.05);
    }

    @media screen and (min-width: 1000px) {
        .popover-listbox__option {
            justify-content    : start;
            padding-block-start: var(--spacing-1-5);
            padding-block-end  : var(--spacing-1-5);
            padding-inline-end : var(--spacing-10);
        }
    }

    /* DRAWER CLASSES */

    :is(.drawer, .popover):not(:defined):not([open]) {
        display: none;
    }

    .drawer[open] {
        visibility: visible !important;
        display   : block !important;
    }

    :is(.drawer, .popover)::part(outside-close-button),
    :is(.drawer, .popover)::part(close-button) {
        -webkit-appearance: none;
        appearance        : none;
        cursor            : pointer;
        border            : none;
        padding           : 0;
    }

    :is(.drawer, .popover)::part(outside-close-button) {
        width              : var(--spacing-12);
        height             : var(--spacing-12);
        bottom             : 100%;
        left               : calc(50% - var(--spacing-6));
        background         : rgb(var(--dialog-background));
        color              : rgb(var(--text-color));
        border-radius      : var(--rounded-full);
        z-index            : 1;
        place-items        : center;
        margin-block-end   : var(--spacing-4);
        margin-inline-start: auto;
        margin-inline-end  : auto;
        display            : grid;
        position           : absolute;
    }

    :is(.drawer, .popover)::part(close-button) {
        color              : currentColor;
        background         : none;
        margin-inline-start: auto;
        display            : none;
    }

    @media screen and (min-width: 700px) {
        :is(.drawer, .popover)::part(outside-close-button) {
            display: none;
        }

        :is(.drawer, .popover)::part(close-button) {
            display: grid;
        }
    }

    .drawer {
        --container-outer-width    : var(--spacing-6);
        --background               : var(--dialog-background);
        --text-color               : var(--text-primary);
        --drawer-header-padding    : var(--spacing-5);
        --drawer-body-padding      : var(--spacing-5) var(--spacing-6);
        --drawer-footer-padding    : var(--spacing-6);
        --drawer-content-max-height: none;
        width                      : 100%;
        visibility                 : hidden;
        padding                    : var(--spacing-2);
        z-index                    : 1000;
        position                   : fixed;
        right                      : 0;
        transition                 : transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, opacity 0.3s;
        opacity                    : 0;
    }

    .drawer[open] {
        visibility: visible !important;
        opacity   : 1;
    }

    .drawer::part(overlay) {
        min-height    : 100lvh;
        min-width     : 100vw;
        background    : rgba(0, 0, 0, 0.5);
        position      : fixed;
        top           : 0;
        bottom        : 0;
        left          : 0;
        right         : 0;
        opacity       : 0;
        visibility    : hidden;
        transition    : opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
        pointer-events: none;
        z-index       : 998;
        cursor        : pointer;
    }

    .drawer[open]::part(overlay) {
        opacity       : 1;
        visibility    : visible;
        pointer-events: auto;
    }

    /* Drawer */
    .drawer {
        position      : fixed;
        bottom        : 0;
        left          : 0;
        right         : 0;
        background    : rgb(var(--dialog-background));
        border-radius : var(--rounded-lg) var(--rounded-lg) 0 0;
        box-shadow    : 0 -4px 24px rgba(0, 0, 0, 0.15);
        z-index       : 1001;
        max-height    : 80vh;
        display       : flex;
        flex-direction: column;
        transform     : translateY(100%);
        transition    : transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
        opacity       : 0;
        visibility    : hidden;
    }

    .oola-main-products-drawer .drawer__body > .accordion {
        border-block-start-width: 0;
    }
    
    /* Drawer accordion labels inherit drawer typography */
    .oola-main-products-drawer .accordion__toggle {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

    @media (min-width: 700px) {
        .drawer {
            right        : auto;
            left         : auto;
            width        : 510px;
            right        : 1rem;
            bottom       : 0;
            top          : 0;
            border-radius: var(--rounded-lg);
            max-height   : none;
            transform    : translateX(100%);
        }
    }

    .drawer[open] {
        transform : translateY(0);
        opacity   : 1;
        visibility: visible;
    }

    @media (min-width: 700px) {
        .drawer[open] {
            transform: translateX(0);
        }
    }

    .drawer__overlay {
        position  : fixed;
        top       : 0;
        left      : 0;
        right     : 0;
        bottom    : 0;
        background: rgba(0, 0, 0, 0.5);
        z-index   : 999;
        opacity   : 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .drawer[open]+.drawer__overlay,
    .drawer[open] .drawer__overlay {
        opacity   : 1;
        visibility: visible;
    }

    /* Mobile close button (outside drawer) */
    .drawer__outside-close {
        width              : var(--spacing-12);
        height             : var(--spacing-12);
        bottom             : 100%;
        left               : calc(50% - var(--spacing-6));
        background         : rgb(var(--dialog-background));
        color              : rgb(var(--text-color));
        border-radius      : var(--rounded-full);
        z-index            : 1;
        place-items        : center;
        margin-block-end   : var(--spacing-4);
        margin-inline-start: auto;
        margin-inline-end  : auto;
        display            : grid;
        position           : absolute;
        cursor             : pointer;
        border             : none;
        padding            : 0;
    }

    /* Hide mobile close button on tablet/desktop */
    @media (min-width: 700px) {
        .drawer__outside-close {
            display: none;
        }
    }

    /* Drawer header (tablet/desktop only) */
    .drawer__header {
        padding      : 1.5rem;
        border-bottom: 1px solid rgb(var(--text-primary) / 0.1);
        position     : relative;
        display      : flex;
        align-items  : center;
        justify-content: space-between;
    }
    
    .drawer__header span {
        display: block;
    }

    /* Hide header on mobile */
    @media (max-width: 699px) {
        .drawer__header {
            display: none;
        }
    }

    /* Close button inside header (tablet/desktop) */
    .drawer__close {
        background: none;
        border    : none;
        cursor    : pointer;
        padding   : 0.5rem;
        color     : rgb(var(--text-primary));
        display   : block;
    }

    /* Hide this close button on mobile (mobile uses drawer__outside-close) */
    @media (max-width: 699px) {
        .drawer__close {
            display: none;
        }
    }

    .drawer__body {
        flex      : 1;
        overflow-y: auto;
        padding   : 1.5rem;
    }

    .drawer__footer {
        padding   : 1.5rem;
    }

    .checkbox-container {
        align-items: baseline;
        display    : flex;
    }

    .checkbox {
        -webkit-appearance: none;
        appearance        : none;
        width             : var(--spacing-4);
        height            : var(--spacing-4);
        background        : rgb(var(--text-color) / 0.15) var(--checkmark-svg-url) no-repeat center;
        background-size   : 0;
        border-radius     : 2px;
        flex-shrink       : 0;
        transition        : background-color 0.2s ease-in-out;
        position          : relative;
        top               : 0.1875rem;
        box-shadow        : inset 1px 1px 2px #0000001a;
    }

    .checkbox:checked {
        background-color: rgb(var(--accent));
        background-size : 10px 8px;
    }

    .checkbox:checked~label {
        opacity   : 1;
        transition: all 0.2s ease-in-out;
    }

    .checkbox~label {
        opacity             : 0.7;
        padding-inline-start: var(--spacing-3);
    }

    .checkbox:disabled {
        opacity: 0.5;
    }

    .checkbox:disabled~label {
        color: rgb(var(--text-color) / 0.5);
    }

    .checkbox-list {
        gap    : var(--spacing-2);
        display: grid;
    }

    @media screen and (min-width: 700px) {
        .checkbox {
            top: var(--spacing-0-5);
        }
    }

    .switch {
        -webkit-appearance: none;
        appearance        : none;
        height            : var(--spacing-5);
        width             : var(--spacing-10);
        border-radius     : var(--rounded-full);
        background        : rgb(var(--text-color) / 0.15);
        padding           : 3px !important;
        transition        : background 0.2s ease-in-out;
        display           : grid;
    }

    .switch:after {
        content      : "";
        width        : var(--spacing-3-5);
        height       : var(--spacing-3-5);
        background   : rgb(var(--background));
        border-radius: var(--rounded-full);
        transition   : transform 0.2s ease-in-out;
        box-shadow   : 0 1px 1px #0003;
    }

    .switch:checked {
        background: rgb(var(--accent));
    }

    .switch:checked:after {
        transform: translateX(calc(var(--transform-logical-flip) * var(--spacing-5)));
    }

    .v-stack {
        display: grid;
    }

    .section-main-products-container {
        --container-inner-width: min((100vw - var(--scrollbar-width, 0px)) - var(--container-gutter) * 2, var(--container-max-width));
        --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width)) / 2);
        margin-inline-start    : max(var(--container-gutter), 50% - var(--container-max-width) / 2);
        margin-inline-end      : max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    }

    [role="main"] .section-main-products {
        --section-is-first                : 0;
        --hash-difference                 : calc(var(--section-background-hash) - var(--previous-section-background-hash, -1));
        --hash-difference-abs             : max(var(--hash-difference), -1 * var(--hash-difference));
        --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1));
        position                          : relative;
    }

    [role="main"] .section-main-products:not(.contents) {
        display: flow-root;
    }

    [role="main"] .section-main-products:empty {
        display: none;
    }

    [role="main"] .section-main-products:first-child {
        --section-is-first: 1;
    }

    @media screen and (min-width: 700px) {
        .section-main-products:first-child {
            --section-outer-spacing-block-start: 24px;
        }
    }

    .range {
        -webkit-appearance: none;
        appearance        : none;
        width             : 100%;
        background        : none;
        cursor            : pointer;
    }

    /* Webkit (Chrome, Safari) thumb styling */
    .range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance        : none;
        width             : 16px;
        height            : 16px;
        border-radius     : 50%;
        background        : rgb(var(--text-color));
        cursor            : pointer;
        border            : 2px solid rgb(var(--background));
        box-shadow        : 0 2px 4px rgba(0, 0, 0, 0.2);
        transition        : all 0.2s ease-in-out;
    }

    .range::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }

    .range::-webkit-slider-thumb:active {
        transform: scale(1.2);
    }

    /* Firefox thumb styling */
    .range::-moz-range-thumb {
        width        : 16px;
        height       : 16px;
        border-radius: 50%;
        background   : rgb(var(--text-color));
        cursor       : pointer;
        border       : 2px solid rgb(var(--background));
        box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.2);
        transition   : all 0.2s ease-in-out;
    }

    .range::-moz-range-thumb:hover {
        transform: scale(1.1);
    }

    .range::-moz-range-thumb:active {
        transform: scale(1.2);
    }

    /* Remove default focus outline */
    .range:focus {
        outline: none;
    }

    /* Focus ring for accessibility */
    .range:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 3px rgb(var(--text-color) / 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .range:focus::-moz-range-thumb {
        box-shadow: 0 0 0 3px rgb(var(--text-color) / 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .range-group {
        height       : 4px;
        background   : linear-gradient(to var(--transform-origin-end), rgb(var(--text-color) / 0.12) var(--range-min), rgb(var(--text-color)) var(--range-min), rgb(var(--text-color)) var(--range-max), rgb(var(--text-color) / 0.12) var(--range-max));
        border-radius: 2px;
        position     : relative;
    }

    .range-group {
        cursor: pointer;
    }

    .range-group .range {
        pointer-events: all;
        height        : 4px;
        vertical-align: top;
        position      : relative;
        z-index       : 1;
    }

    .range-group .range:last-child {
        position: absolute;
        top     : 0;
        z-index : 1;
    }

    .range-group .range:last-child:not( :lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
        left: 0;
    }

    .input-group {
        align-items: center;
        column-gap : 20px;
        display    : flex;
    }

    .input-prefix {
        min-width      : 0;
        border-radius  : min(10px, var(--rounded-button));
        border         : 1px solid rgb(var(--text-color) / 0.12);
        flex           : 1 0 0;
        justify-content: space-between;
        align-items    : center;
        padding        : 10px 15px;
        display        : flex;
    }

    .input-prefix>.field {
        -webkit-appearance : textfield;
        appearance         : textfield;
        min-width          : 0;
        width              : 100%;
        text-align         : end;
        background         : none;
        border             : none;
        margin-inline-start: 10px;
        padding            : 0;
    }

    .input-prefix>.field:focus {
        outline: none;
    }

    .price-range {
        gap                : 24px;
        padding-block-start: 12px;
        display            : grid;
    }

    @media screen and not (pointer: fine) {
        .price-range {
            row-gap            : 18px;
            padding-block-start: 16px;
        }
    }

    .product-list {
        grid              : var(--product-list-grid);
        gap               : var(--product-list-gap);
        scroll-padding-top: calc(var(--sticky-area-height) + 20px);
        display           : grid;
        position          : relative;
    }

    .product-card {
        --product-card-badge-spacing  : var(--spacing-2);
        --product-card-info-padding   : var(--spacing-4);
        --product-card-quick-buy-inset: var(--spacing-2);
        border-radius                 : var(--rounded-sm);
        grid-template-columns         : minmax(0, 1fr);
        align-content                 : start;
        display                       : grid;
        position                      : relative;
    }

    .product-card__figure {
        display : block;
        position: relative;
    }

    .product-card__image {
        object-fit     : contain;
        object-position: center;
        transition     : opacity 0.2s ease-in-out;
        width          : 100%;
        height         : 100%;
    }

    .product-card__image:not( :lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
        border-top-left-radius : var(--rounded-sm);
        border-top-right-radius: var(--rounded-sm);
    }

    .product-card__title {
        line-height: 1.5;
        display: block;
    }
    
    .product-card__title a {
        text-decoration: none;
        color: inherit;
    }

    .product-card__info {
        gap                  : var(--spacing-1);
        padding              : var(--product-card-info-padding);
        grid-template-columns: minmax(0, 1fr);
        justify-items        : start;
        display              : grid;
    }

    .product-card--blends .product-card__info {
        padding-block-end   : 0;
        padding-inline-start: 0;
        padding-inline-end  : 0;
    }

    .product-card__info--center {
        text-align     : center;
        justify-content: center;
        justify-items  : center;
    }

    @media screen and (min-width: 700px) {
        .product-card {
            --product-card-badge-spacing  : var(--spacing-4);
            --product-card-info-padding   : var(--spacing-5);
            --product-card-quick-buy-inset: var(--spacing-4);
        }
    }

    @media screen and (min-width: 1400px) {
        .product-card__info {
            --product-card-info-padding: var(--spacing-6) var(--spacing-8) var(--spacing-8) var(--spacing-8);
        }
    }

    .reversed-link {
        text-decoration: none;
        background     : linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
        transition     : background-size 0.3s ease-in-out;
    }

    @media screen and (pointer: fine) {
        .group:hover .reversed-link {
            background-size: 100% 1px;
        }
    }

    .text-with-icon {
        gap        : var(--spacing-3);
        align-items: center;
        display    : flex;
    }

    .text-with-icon>svg {
        flex-shrink: 0;
    }

    .icon {
        display: block;
    }

    .collection {
        --collection-sidebar-width: 250px;
        gap                       : var(--spacing-8);
        grid-template-columns     : minmax(0, 1fr);
        margin-block-start        : var(--spacing-8);
        margin-block-end          : var(--section-outer-spacing-block);
        display                   : grid;
    }

    .collection__top-bar,
    .collection__facets {
        display: none;
    }

    .collection__results {
        scroll-padding-top: calc(var(--sticky-area-height) + 20px);
        transition        : opacity 0.1s;
    }

    @media screen and (min-width: 700px) {
        .collection {
            margin-block-start: var(--spacing-12);
        }
    }

    @media screen and (min-width: 1000px) {
        .collection {
            column-gap: var(--spacing-12);
        }

        .collection--filters-sidebar {
            grid-template-columns: var(--collection-sidebar-width) minmax(0, 1fr);
        }

        .collection__top-bar {
            column-gap           : var(--spacing-6);
            grid-column          : 1 / -1;
            grid-template-columns: auto minmax(0, 1fr);
            display              : grid;
        }

        .collection--filters-sidebar .collection__top-bar {
            grid-template-columns: inherit;
            column-gap           : inherit;
        }

        .collection__facets {
            display: block;
        }

        .facets-summary {
            align-items    : start;
            gap            : var(--spacing-4);
            grid-column-end: -1;
            display        : flex;
            flex-wrap      : wrap;
        }

        .active-facets {
            align-items: center;
            gap        : var(--spacing-2);
            flex-wrap  : wrap;
            display    : flex;
        }

        .removable-facet {
            display    : inline-flex;
            align-items: center;

            gap          : var(--spacing-3);
            padding      : var(--spacing-2-5) var(--spacing-4);
            background   : rgb(var(--text-color) / 0.1);
            /* color     : rgb(var(--text-color)); */
            border-radius: var(--rounded-button);
            flex-shrink  : 0;
            align-items  : baseline;
            display      : flex;
            order        : 1;
        }

        .removable-facet:hover {
            background: rgb(var(--text-color) / 0.08);
        }

        .removable-facet .tap-area {
            display        : inline-flex;
            align-items    : center;
            justify-content: center;
            width          : 16px;
            height         : 16px;
            padding        : 0;
            margin         : 0;
            cursor         : pointer;
            transition     : all 0.2s ease-in-out;
            color          : rgb(var(--text-color) / 0.6);
        }

        .removable-facet .tap-area:hover {
            color: rgb(var(--text-color));
        }

        .removable-facet .icon-delete {
            width : 10px;
            height: 10px;
        }

        .active-facets>.facet-clear-all {
            order              : 2;
            margin-inline-start: var(--spacing-2);
            margin-inline-end  : 0;
            display            : inline-flex;
            align-items        : center;
            text-decoration    : none;
            cursor             : pointer;
        }

        @media screen and (min-width: 1000px) {
            .active-facets>.facet-clear-all {
                margin-inline-start: var(--spacing-4);
                margin-inline-end  : 0;
            }
        }

        .facet-clear-all .link {
            text-decoration: underline;
        }

        .facet-clear-all:hover {
            color: rgb(var(--text-color));
        }

        .facet-clear-all:hover .link {
            text-decoration-thickness: 2px;
        }

        .collection__facets-scroller {
            display : block;
            position: sticky;
            top     : calc(var(--sticky-area-height) + 20px);
        }
    }

    .sort-by-facet {
        justify-content    : end;
        gap                : var(--spacing-1);
        flex-shrink        : 0;
        margin-inline-start: auto;
        display            : flex;
        position           : relative;
    }

    .facets__floating-filter {
        width          : 100%;
        z-index        : 100;
        position       : fixed;
        bottom         : var(--spacing-8);
        left           : 0;
        right          : 0;
        display        : flex;
        justify-content: center;
        align-items    : center;
        transition     : opacity 0.3s ease, transform 0.3s ease;
        /* Visible on mobile and tablet */
    }

    /* Show Filter and Sort button when hamburger is visible (below 1150px) */
    @media screen and (max-width: 1149px) {
        .facets__floating-filter {
            display: flex;
        }
    }

    /* Hide Filter and Sort button when menu is visible (1150px and above) */
    @media screen and (min-width: 1150px) {
        .facets__floating-filter {
            display: none;
        }
    }

    /* FACETS-DRAWER CLASSES */

    .facets-drawer {
        --background: var(--background);
    }

    .facets-drawer::part(content) {
        background: rgb(var(--background));
    }

    .facets-drawer::part(header) {
        padding-block: var(--spacing-6);
    }

    .facets-drawer::part(body) {
        flex-grow          : 1;
        padding-block-start: 0;
        padding-block-end  : 0;
    }

    .facets-drawer .facets-vertical {
        min-height    : 100%;
        flex-direction: column;
        display       : flex;
    }

    .facets-drawer .accordion {
        border-block-start-width: 0;
    }

    .facets-drawer__floating-apply {
        background         : linear-gradient(180deg, rgb(var(--background-primary) / 0), rgb(var(--background)));
        margin-block-start : auto;
        margin-inline-start: calc(-1 * var(--spacing-3));
        margin-inline-end  : calc(-1 * var(--spacing-3));
        padding-block-start: var(--spacing-5);
        padding-block-end  : var(--spacing-5);
        position           : sticky;
        bottom             : 0;
    }

    @media screen and (max-width: 699px) {
        .facets-drawer::part(header) {
            display: none;
        }

        .facets-drawer::part(content) {
            max-height: none;
            height    : 65vh;
        }
    }

    @media screen and (min-width: 700px) {
        .facets-drawer__floating-apply {
            margin-inline-start: calc(-1 * var(--spacing-4));
            margin-inline-end  : calc(-1 * var(--spacing-4));
            padding-block-start: var(--spacing-6);
            padding-block-end  : var(--spacing-6);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .js reveal-items {
            opacity: 0;
        }
    }

    .text-custom {
        color: rgb(var(--text-color));
    }

    .text-subdued {
        color: rgb(var(--text-color) / 0.7);
    }

    @media screen and (min-width: 1000px) {
        .md\:hidden {
            display: none;
        }
    }

    .text-center {
        text-align: center;
    }

    .justify-center {
        justify-content: safe center;
    }

    .justify-items-center {
        justify-items: safe center;
    }

    .w-full {
        width: 100%;
    }

    .gap-0\.5 {
        gap: var(--spacing-0-5);
    }

    .gap-4 {
        gap: var(--spacing-4);
    }

    .gap-6 {
        gap: var(--spacing-6);
    }

    .bold {
        font-weight: bold;
    }

    .text-sm {
        font-size  : var(--text-sm);
        line-height: 1.6;
    }

    .h5 {
        font-family   : var(--heading-font-family);
        font-weight   : var(--heading-font-weight);
        font-style    : var(--heading-font-style);
        letter-spacing: var(--heading-letter-spacing);
        text-transform: var(--heading-text-transform);
        overflow-wrap : anywhere;
    }

    .h5 {
        font-size  : var(--text-h5);
        line-height: 1.4;
    }
}

/*! CSS Used from: Embedded */
#section-main-products {
    --section-background-hash: 0;
}

#section-main-products+* {
    --previous-section-background-hash: 0;
}

/*! CSS Used from: Embedded */
#section-main-products {
    --product-list-gap              : var(--product-list-row-gap) var(--spacing-2);
    --product-list-items-per-row    : 2;
    --product-list-grid             : auto-flow dense / repeat(var(--product-list-items-per-row), minmax(0, 1fr));
    --product-list-promo-grid-column: span 2;
    --content-over-media-gap        : var(--spacing-8);
}

@media screen and (min-width: 700px) {
    #section-main-products {
        --product-list-gap              : var(--product-list-row-gap) var(--product-list-column-gap);
        --product-list-items-per-row    : 2;
        --product-list-promo-grid-column: span 1;
    }
}

@media screen and (min-width: 1000px) {
    #section-main-products {
        --product-list-items-per-row    : 2;
        --product-list-promo-grid-column: span 2;
    }
}

@media screen and (min-width: 1200px) {
    #section-main-products {
        --product-list-items-per-row: 3;
    }
}

@media screen and (min-width: 1400px) {
    #section-main-products {
        --product-list-items-per-row: 4;
    }
}