/* ========================================
   ELEGANCE THEME - Compiled Stylesheet
   Performance-optimized: removed unused effects
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --transition-slow: 400ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    --storefront-action-radius: 10px;
    --elegance-product-card-gap: clamp(5px, 0.45vw, 7px);
    --storefront-layout-max-width: 1536px;
    --storefront-layout-gutter: 12px;
}

/* ========================================
   STOREFRONT AUTHENTICATION EXPERIENCE
   A focused, route-backed authentication surface. The merchant storefront
   chrome is intentionally removed so keyboard, OTP, and recovery states own
   the viewport without competing navigation or floating actions.
   ======================================== */
.storefront-auth-mode {
    background: #f8fafc;
}

.storefront-auth-mode :is(
    [data-storefront-mobile-nav],
    #support-widget-fab,
    #pwa-install-btn,
    #storefront-desktop-utility-rail,
    #whatsapp-fab
) {
    display: none !important;
}

.storefront-shell-main--auth {
    padding: 0 !important;
}

.storefront-auth-shell {
    position: relative;
    display: grid;
    min-height: calc(100dvh - var(--site-header-spacer-height, var(--site-header-height, 81px)));
    place-items: center;
    overflow: hidden;
    padding: clamp(42px, 5vw, 70px) clamp(20px, 5vw, 72px);
    background:
        linear-gradient(135deg, rgb(var(--color-primary) / 0.055), transparent 42%),
        linear-gradient(315deg, rgb(var(--color-secondary) / 0.045), transparent 46%),
        #f8fafc;
    color: #0f172a;
}

.storefront-auth-shell__glow {
    position: absolute;
    width: clamp(260px, 32vw, 480px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(var(--color-primary) / 0.075);
    filter: blur(74px);
    pointer-events: none;
}

.storefront-auth-shell__glow--start {
    inset-block-start: -18%;
    inset-inline-start: -12%;
}

.storefront-auth-shell__glow--end {
    inset-block-end: -22%;
    inset-inline-end: -10%;
    background: rgb(var(--color-secondary) / 0.055);
}

.storefront-auth-surface {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 940px);
    min-height: 545px;
    grid-template-columns: minmax(285px, 0.82fr) minmax(430px, 1.18fr);
    overflow: visible;
    border: 1px solid rgb(148 163 184 / 0.16);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 70px rgb(15 23 42 / 0.12);
}

.storefront-auth-story {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 38px 34px;
    background:
        radial-gradient(circle at 80% 8%, rgb(255 255 255 / 0.16), transparent 26%),
        linear-gradient(145deg, rgb(var(--color-secondary)) 0%, rgb(var(--color-primary)) 125%);
    color: #fff;
    border-start-start-radius: 23px;
    border-end-start-radius: 23px;
}

.storefront-auth-story::after {
    content: "";
    position: absolute;
    inset-inline-end: -95px;
    inset-block-end: -95px;
    width: 245px;
    height: 245px;
    border: 46px solid rgb(255 255 255 / 0.055);
    border-radius: 50%;
}

.storefront-auth-story__brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.storefront-auth-story__brand > strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-auth-story__logo,
.storefront-auth-story__monogram {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: 13px;
    background: #fff;
    color: rgb(var(--color-primary));
    box-shadow: 0 7px 24px rgb(15 23 42 / 0.14);
}

.storefront-auth-story__logo img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
}

.storefront-auth-story__monogram {
    font-size: 23px;
    font-weight: 900;
}

.storefront-auth-story__copy {
    position: relative;
    z-index: 1;
    margin-block: auto;
    padding-block: 44px 34px;
}

.storefront-auth-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.09);
    color: rgb(255 255 255 / 0.9);
    font-size: 11px;
    font-weight: 750;
}

.storefront-auth-story__eyebrow svg {
    width: 14px;
    height: 14px;
}

.storefront-auth-story__copy h2 {
    margin-top: 17px;
    font-size: clamp(25px, 2.3vw, 32px);
    font-weight: 850;
    line-height: 1.32;
}

.storefront-auth-story__copy p {
    margin-top: 12px;
    color: rgb(255 255 255 / 0.76);
    font-size: 14px;
    line-height: 1.8;
}

.storefront-auth-benefits {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.storefront-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgb(255 255 255 / 0.88);
    font-size: 12.5px;
    font-weight: 650;
}

.storefront-auth-benefits li > span {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
}

.storefront-auth-benefits svg {
    width: 12px;
    height: 12px;
}

.storefront-auth-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 40px clamp(38px, 4vw, 58px) 32px;
    border-start-end-radius: 23px;
    border-end-end-radius: 23px;
    background: #fff;
}

.storefront-auth-progress {
    display: grid;
    width: min(100%, 270px);
    grid-template-columns: auto minmax(36px, 1fr) auto;
    align-items: start;
    margin-bottom: 30px;
}

.storefront-auth-progress__item {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: #94a3b8;
}

.storefront-auth-progress__item > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #dbe2ea;
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
}

.storefront-auth-progress__item > strong {
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.storefront-auth-progress__item.is-active {
    color: rgb(var(--color-primary));
}

.storefront-auth-progress__item.is-active > span {
    border-color: rgb(var(--color-primary));
    background: rgb(var(--color-primary));
    color: #fff;
    box-shadow: 0 5px 14px rgb(var(--color-primary) / 0.24);
}

.storefront-auth-progress__line {
    height: 2px;
    margin-top: 13px;
    background: #e2e8f0;
}

.storefront-auth-progress__line.is-complete {
    background: rgb(var(--color-primary) / 0.58);
}

.storefront-auth-heading {
    margin-bottom: 26px;
}

.storefront-auth-heading__icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 12px;
    background: rgb(var(--color-primary) / 0.085);
    color: rgb(var(--color-primary));
}

.storefront-auth-heading__icon.is-success {
    background: #ecfdf5;
    color: #059669;
}

.storefront-auth-heading__icon svg {
    width: 21px;
    height: 21px;
}

.storefront-auth-heading h1 {
    color: #0f172a;
    font-size: clamp(25px, 2.2vw, 31px);
    font-weight: 850;
    line-height: 1.32;
    letter-spacing: -0.02em;
}

.storefront-auth-heading p {
    max-width: 410px;
    margin-top: 8px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.75;
}

.storefront-auth-step,
.storefront-auth-form {
    display: grid;
    gap: 18px;
}

.storefront-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.65;
}

.storefront-auth-alert svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
}

.storefront-auth-alert--error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.storefront-auth-alert--warning {
    border-color: #f3cf86;
    background: #fff8e8;
    color: #713f12;
}

.storefront-auth-alert--success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.storefront-auth-alert__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.storefront-auth-alert__copy strong {
    color: inherit;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.5;
}

.storefront-auth-alert__copy span {
    color: inherit;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.7;
    opacity: 0.94;
}

.storefront-auth-phone label,
.storefront-auth-otp-panel label {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.storefront-auth-phone > div > .relative.flex {
    min-height: 52px;
    border-width: 1px !important;
    border-color: #dce3eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.storefront-auth-phone > div > .relative.flex:focus-within {
    border-color: rgb(var(--color-primary)) !important;
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1) !important;
}

.storefront-auth-phone button[aria-haspopup="listbox"] {
    min-width: 108px;
    border-inline-end-color: rgb(var(--color-primary) / 0.14) !important;
    border-start-start-radius: 11px !important;
    border-end-start-radius: 11px !important;
    background: rgb(var(--color-primary) / 0.055) !important;
    color: #243044 !important;
}

.storefront-auth-phone button[aria-haspopup="listbox"]:hover,
.storefront-auth-phone button[aria-haspopup="listbox"][aria-expanded="true"] {
    background: rgb(var(--color-primary) / 0.1) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-auth-phone .storefront-phone-input__selected-flag {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 8px;
    background: #fff;
    font-size: 15px !important;
    box-shadow: 0 2px 7px rgb(15 23 42 / 0.06);
}

.storefront-auth-phone .storefront-phone-input__selected-dial {
    color: #334155 !important;
    font-size: 11px !important;
}

.storefront-auth-phone .storefront-phone-input__country-menu {
    width: min(292px, calc(100vw - 32px));
    margin-top: 7px !important;
    overflow: hidden;
    border: 1px solid rgb(var(--color-primary) / 0.2) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow:
        inset 0 3px 0 rgb(var(--color-primary)),
        0 22px 52px rgb(15 23 42 / 0.16),
        0 4px 12px rgb(15 23 42 / 0.06) !important;
}

.storefront-auth-phone .storefront-phone-input__country-search {
    padding: 12px 10px 9px !important;
    border-bottom-color: #edf0f4 !important;
    background: linear-gradient(180deg, rgb(var(--color-primary) / 0.055), #f8fafc) !important;
}

.storefront-auth-phone .storefront-phone-input__country-search-field {
    min-height: 38px;
    border: 1px solid #dfe5ec !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #172033 !important;
    font-size: 12px !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.storefront-auth-phone .storefront-phone-input__country-search-field:focus {
    border-color: rgb(var(--color-primary)) !important;
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1) !important;
}

.storefront-auth-phone .storefront-phone-input__country-list {
    max-height: min(270px, 40dvh) !important;
    padding: 6px !important;
    scrollbar-color: rgb(var(--color-primary) / 0.4) transparent;
    scrollbar-width: thin;
}

.storefront-auth-phone .storefront-phone-input__country-option {
    min-height: 44px;
    margin-block: 1px;
    padding: 6px 8px !important;
    border: 1px solid transparent;
    border-radius: 9px !important;
    color: #334155;
}

.storefront-auth-phone .storefront-phone-input__country-option:hover {
    border-color: rgb(var(--color-primary) / 0.12);
    background: rgb(var(--color-primary) / 0.055) !important;
}

.storefront-auth-phone .storefront-phone-input__country-option.bg-primary-50 {
    border-color: rgb(var(--color-primary) / 0.2);
    border-inline-start-width: 3px;
    background: rgb(var(--color-primary) / 0.09) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-auth-phone .storefront-phone-input__country-flag {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border: 1px solid #e7ebf0;
    border-radius: 8px;
    background: #fff;
    font-size: 16px !important;
}

.storefront-auth-phone .storefront-phone-input__country-name {
    color: #293548 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.storefront-auth-phone .storefront-phone-input__country-dial {
    min-width: 48px;
    padding: 4px 6px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #64748b !important;
    text-align: center;
}

.storefront-auth-phone input[type="tel"] {
    min-height: 50px;
    color: #0f172a !important;
    font-size: 16px !important;
    background: transparent !important;
}

.storefront-auth-primary-action {
    width: 100% !important;
    min-height: 50px !important;
    padding: 11px 18px !important;
    border-radius: 10px !important;
    background: rgb(var(--color-primary)) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 9px 22px rgb(var(--color-primary) / 0.2) !important;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}

.storefront-auth-primary-action:hover {
    filter: brightness(0.94);
    box-shadow: 0 12px 25px rgb(var(--color-primary) / 0.26) !important;
    transform: translateY(-1px);
}

.storefront-auth-primary-action__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.storefront-auth-primary-action__content svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.storefront-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.65;
}

.storefront-auth-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
    color: rgb(var(--color-primary));
}

.storefront-auth-phone-summary {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 11px 9px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
}

.storefront-auth-phone-summary > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.storefront-auth-phone-summary small {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 650;
}

.storefront-auth-phone-summary strong {
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 800;
}

.storefront-auth-phone-summary button {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding-inline: 9px;
    border-radius: 8px;
    color: rgb(var(--color-primary));
    font-size: 11px;
    font-weight: 800;
}

.storefront-auth-phone-summary button:hover { background: rgb(var(--color-primary) / 0.07); }

.storefront-auth-phone-summary button svg {
    width: 14px;
    height: 14px;
}

.storefront-auth-otp-panel > div,
.storefront-auth-otp-panel form {
    gap: 16px;
}

.storefront-auth-otp-flow,
.storefront-auth-otp-form {
    display: grid;
    gap: 14px;
}

.storefront-auth-assistance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #a7e9c7;
    border-radius: 10px;
    background: #f0fdf6;
    color: #14532d;
}

.storefront-auth-assistance__copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.65;
}

.storefront-auth-assistance__icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 8px;
    background: #dcfce7;
    color: #047857;
}

.storefront-auth-assistance__icon svg {
    width: 15px;
    height: 15px;
}

.storefront-auth-assistance__action {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 11px;
    border: 1px solid #047857;
    border-radius: 8px;
    background: #047857;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgb(4 120 87 / 0.18);
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.storefront-auth-assistance__action:hover {
    background: #066b50;
    box-shadow: 0 7px 15px rgb(4 120 87 / 0.22);
    transform: translateY(-1px);
}

.storefront-auth-assistance__action svg {
    width: 13px;
    height: 13px;
}

[dir="rtl"] .storefront-auth-assistance__action svg {
    transform: scaleX(-1);
}

.storefront-auth-otp-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid #e2e8f0;
}

.storefront-auth-otp-input input {
    min-height: 54px;
    border-width: 1px !important;
    border-color: #dce3eb !important;
    border-radius: 11px !important;
    color: #0f172a !important;
    font-size: 20px !important;
    letter-spacing: 0.5em !important;
}

.storefront-auth-otp-input input:focus {
    border-color: rgb(var(--color-primary)) !important;
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1) !important;
}

.storefront-auth-otp-panel form > button[type="submit"] {
    min-height: 50px;
    border-radius: 10px !important;
    background: rgb(var(--color-primary)) !important;
    font-size: 14px;
    box-shadow: 0 9px 22px rgb(var(--color-primary) / 0.18) !important;
}

.storefront-auth-verified-number {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12.5px;
    font-weight: 750;
}

.storefront-auth-verified-number__icon {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border-radius: 50%;
    background: #059669;
    color: #fff;
}

.storefront-auth-verified-number__icon svg {
    width: 14px;
    height: 14px;
}

.storefront-auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
    color: #94a3b8;
    font-size: 10.5px;
    line-height: 1.5;
    text-align: center;
}

.storefront-auth-security-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #64748b;
}

@media (max-width: 959px) {
    .storefront-auth-shell {
        align-items: start;
        padding: 36px 24px 44px;
    }

    .storefront-auth-surface {
        width: min(100%, 520px);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        border-radius: 20px;
    }

    .storefront-auth-story { display: none; }

    .storefront-auth-panel {
        justify-content: flex-start;
        padding: 28px 34px 26px;
        border-radius: 20px;
    }

    .storefront-auth-progress { margin-inline: auto; }
}

@media (max-width: 599px) {
    .storefront-auth-shell {
        display: block;
        min-height: calc(100dvh - var(--site-header-spacer-height, var(--site-header-height, 81px)));
        overflow: visible;
        padding: 24px 0 max(30px, env(safe-area-inset-bottom));
        background: #fff;
    }

    .storefront-auth-shell__glow { display: none; }

    .storefront-auth-surface {
        width: 100%;
        min-height: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .storefront-auth-panel {
        padding: 8px 16px 22px;
    }

    .storefront-auth-progress {
        width: min(100%, 236px);
        margin-bottom: 22px;
    }

    .storefront-auth-progress__item > span {
        width: 26px;
        height: 26px;
    }

    .storefront-auth-progress__line { margin-top: 12px; }

    .storefront-auth-progress__item > strong { font-size: 10px; }

    .storefront-auth-heading { margin-bottom: 22px; }

    .storefront-auth-heading__icon {
        width: 38px;
        height: 38px;
        margin-bottom: 11px;
    }

    .storefront-auth-heading h1 {
        font-size: clamp(22px, 6.1vw, 25px);
        line-height: 1.38;
    }

    .storefront-auth-heading p {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.65;
    }

    .storefront-auth-step,
    .storefront-auth-form { gap: 16px; }

    .storefront-auth-primary-action,
    .storefront-auth-otp-panel form > button[type="submit"] {
        min-height: 48px !important;
    }

    .storefront-auth-note { font-size: 11px; }

    .storefront-auth-security-note {
        margin-top: 20px;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@media (max-width: 359px) {
    .storefront-auth-panel { padding-inline: 13px; }
    .storefront-auth-phone button[aria-haspopup="listbox"] { min-width: 98px; padding-inline: 10px; }
    .storefront-auth-heading h1 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-auth-shell *,
    .storefront-auth-shell *::before,
    .storefront-auth-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   STOREFRONT INFORMATION PAGES
   One restrained, merchant-branded system for directories, content pages,
   contact details, and legal documents. Business data and visibility rules
   remain owned by the existing Livewire pages and settings DTOs.
   ======================================== */
.storefront-info-page {
    min-height: 100vh;
    overflow: clip;
    background:
        radial-gradient(circle at 12% 4%, rgb(var(--color-primary) / 0.045), transparent 26rem),
        #f8fafc;
    color: #182230;
}

.storefront-info-container {
    width: min(calc(100% - 32px), 1380px);
    margin-inline: auto;
}

.storefront-info-breadcrumb {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.storefront-info-breadcrumb a {
    transition: color 160ms ease;
}

.storefront-info-breadcrumb a:hover {
    color: rgb(var(--color-primary));
}

.storefront-info-breadcrumb > svg {
    width: 14px;
    height: 14px;
    color: #98a2b3;
}

[dir="rtl"] .storefront-info-breadcrumb > svg,
[dir="rtl"] .storefront-brand-card__arrow,
[dir="rtl"] .storefront-category-card__title > svg,
[dir="rtl"] .storefront-info-action > svg {
    transform: rotate(180deg);
}

.storefront-info-breadcrumb--component {
    min-height: 46px;
}

.storefront-info-breadcrumb--component > * {
    width: 100%;
}

.storefront-info-breadcrumb--inverse {
    min-height: 0;
    margin-bottom: 16px;
    color: rgb(255 255 255 / 0.68);
}

.storefront-info-breadcrumb--inverse a:hover,
.storefront-info-breadcrumb--inverse span {
    color: #fff;
}

.storefront-info-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 14px;
    background: rgb(var(--color-primary) / 0.075);
    color: rgb(var(--color-primary));
}

.storefront-info-icon svg {
    width: 23px;
    height: 23px;
}

.storefront-info-eyebrow {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    padding-inline: 11px;
    border: 1px solid rgb(var(--color-primary) / 0.13);
    border-radius: 8px;
    background: rgb(var(--color-primary) / 0.07);
    color: rgb(var(--color-primary));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.storefront-info-eyebrow--inverse {
    border-color: rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

.storefront-info-card {
    border: 1px solid rgb(148 163 184 / 0.16);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgb(15 23 42 / 0.045);
}

.storefront-info-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 17px;
    border-radius: var(--storefront-action-radius, 10px);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.storefront-info-action:hover {
    transform: translateY(-1px);
}

.storefront-info-action > svg {
    width: 17px;
    height: 17px;
}

.storefront-info-action--quiet {
    border: 1px solid #e4e7ec;
    background: #fff;
    color: #344054;
}

.storefront-info-action--quiet:hover {
    border-color: rgb(var(--color-primary) / 0.3);
    color: rgb(var(--color-primary));
    box-shadow: 0 8px 18px rgb(15 23 42 / 0.06);
}

.storefront-info-action--primary {
    border: 1px solid rgb(var(--color-primary));
    background: rgb(var(--color-primary));
    color: #fff;
    box-shadow: 0 8px 18px rgb(var(--color-primary) / 0.18);
}

.storefront-info-action--primary:hover {
    background: rgb(var(--color-primary) / 0.92);
    color: #fff;
}

.storefront-info-action--inverse {
    border: 1px solid rgb(255 255 255 / 0.6);
    background: #fff;
    color: rgb(var(--color-primary));
    box-shadow: 0 9px 20px rgb(15 23 42 / 0.16);
}

.storefront-info-empty {
    display: flex;
    min-height: 340px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 20px;
    border: 1px dashed rgb(148 163 184 / 0.38);
    border-radius: 20px;
    background: rgb(255 255 255 / 0.72);
    text-align: center;
}

.storefront-info-empty__icon {
    display: flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgb(var(--color-primary) / 0.07);
    color: rgb(var(--color-primary) / 0.7);
}

.storefront-info-empty__icon svg {
    width: 32px;
    height: 32px;
}

.storefront-info-empty h2 {
    color: #182230;
    font-size: 20px;
    font-weight: 800;
}

.storefront-info-empty p {
    max-width: 480px;
    margin-top: 7px;
    color: #667085;
    font-size: 13px;
    line-height: 1.8;
}

.storefront-info-empty .storefront-info-action {
    margin-top: 20px;
}

/* Directory pages: brands and categories. */
.storefront-directory-page {
    padding-bottom: 64px;
}

.storefront-directory-hero {
    position: relative;
    display: flex;
    min-height: 116px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 24px clamp(20px, 3vw, 36px);
    border: 1px solid rgb(148 163 184 / 0.14);
    border-radius: 20px;
    background:
        linear-gradient(120deg, rgb(var(--color-primary) / 0.075), transparent 42%),
        #fff;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.045);
}

.storefront-directory-hero::after {
    position: absolute;
    inset-block: 18px;
    inset-inline-end: -42px;
    width: 120px;
    border: 18px solid rgb(var(--color-primary) / 0.035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.storefront-directory-hero__copy {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.storefront-directory-hero__copy h1 {
    color: #182230;
    font-family: var(--font-display, inherit);
    font-size: clamp(22px, 2.3vw, 31px);
    font-weight: 850;
    line-height: 1.25;
}

.storefront-directory-hero__copy p {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.storefront-directory-search {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 340px);
    min-height: 44px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding-inline: 13px 9px;
    border: 1px solid #dfe3e8;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.035);
    color: rgb(var(--color-primary));
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.storefront-directory-search:focus-within {
    border-color: rgb(var(--color-primary) / 0.58);
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1);
}

.storefront-directory-search > svg {
    width: 19px;
    height: 19px;
}

.storefront-directory-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #182230;
    font-size: 13px;
}

.storefront-directory-search input::placeholder {
    color: #98a2b3;
}

.storefront-directory-search button {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #667085;
    transition: background-color 160ms ease, color 160ms ease;
}

.storefront-directory-search button:hover {
    background: #f2f4f7;
    color: #182230;
}

.storefront-directory-search button svg {
    width: 15px;
    height: 15px;
}

.storefront-directory-content {
    padding-top: 22px;
}

.storefront-brand-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.storefront-brand-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px 17px;
    border: 1px solid rgb(148 163 184 / 0.18);
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 5px 16px rgb(15 23 42 / 0.03);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.storefront-brand-card:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--color-primary) / 0.3);
    box-shadow: 0 14px 28px rgb(15 23 42 / 0.08);
}

.storefront-brand-card__logo {
    display: flex;
    width: 86px;
    height: 70px;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fafc;
    color: rgb(var(--color-primary) / 0.42);
    font-size: 28px;
    font-weight: 850;
}

.storefront-brand-card__logo img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
    transition: transform 220ms ease;
}

.storefront-brand-card:hover .storefront-brand-card__logo img {
    transform: scale(1.05);
}

.storefront-brand-card__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.storefront-brand-card__copy strong {
    overflow: hidden;
    color: #182230;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-brand-card__copy small {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 600;
}

.storefront-brand-card__arrow {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    width: 14px;
    height: 14px;
    color: transparent;
    transition: color 160ms ease, transform 160ms ease;
}

.storefront-brand-card:hover .storefront-brand-card__arrow {
    color: rgb(var(--color-primary));
}

[dir="rtl"] .storefront-brand-card:hover .storefront-brand-card__arrow {
    transform: rotate(180deg) translateX(2px);
}

[dir="ltr"] .storefront-brand-card:hover .storefront-brand-card__arrow {
    transform: translateX(2px);
}

.storefront-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 12px;
}

.storefront-category-item {
    min-width: 0;
}

.storefront-category-card {
    display: block;
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 0.16);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 16px rgb(15 23 42 / 0.035);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.storefront-category-card:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--color-primary) / 0.28);
    box-shadow: 0 14px 28px rgb(15 23 42 / 0.08);
}

.storefront-category-card__media {
    position: relative;
    display: flex;
    aspect-ratio: 5 / 4;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc, #f2f4f7);
    color: #cbd5e1;
}

.storefront-category-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.storefront-category-card:hover .storefront-category-card__media > img {
    transform: scale(1.045);
}

.storefront-category-card__media > svg {
    width: 48px;
    height: 48px;
}

.storefront-category-card__count {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    display: inline-flex;
    min-width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    padding-inline: 7px;
    border: 1px solid rgb(255 255 255 / 0.72);
    border-radius: 9px;
    background: rgb(255 255 255 / 0.9);
    color: #344054;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
    backdrop-filter: blur(8px);
}

.storefront-category-card__title {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-inline: 15px;
}

.storefront-category-card__title strong {
    overflow: hidden;
    color: #182230;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 160ms ease;
}

.storefront-category-card:hover .storefront-category-card__title strong {
    color: rgb(var(--color-primary));
}

.storefront-category-card__title > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #98a2b3;
}

.storefront-category-children {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 4px 0;
}

.storefront-category-children a {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    max-width: 100%;
    padding-inline: 9px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f2f4f7;
    color: #667085;
    font-size: 10.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.storefront-category-children a:hover,
.storefront-category-children .storefront-category-children__more {
    border-color: rgb(var(--color-primary) / 0.12);
    background: rgb(var(--color-primary) / 0.06);
    color: rgb(var(--color-primary));
}

/* Shared editorial pages. */
.storefront-info-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(230px, 25vw, 340px);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 25%, rgb(var(--color-primary) / 0.34), transparent 22rem),
        linear-gradient(120deg, rgb(var(--color-secondary)), rgb(var(--color-secondary) / 0.93));
    color: #fff;
}

.storefront-info-hero::after {
    position: absolute;
    z-index: -1;
    inset-block-end: -130px;
    inset-inline-end: -70px;
    width: 310px;
    height: 310px;
    border: 45px solid rgb(255 255 255 / 0.035);
    border-radius: 50%;
    content: "";
}

.storefront-info-hero__media,
.storefront-info-hero__media::after {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.storefront-info-hero__media::after {
    z-index: 1;
    background: linear-gradient(110deg, rgb(var(--color-secondary) / 0.94), rgb(var(--color-secondary) / 0.66));
    content: "";
}

.storefront-info-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storefront-info-hero__inner {
    display: flex;
    min-height: inherit;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 46px;
    text-align: center;
}

.storefront-info-hero__inner h1 {
    max-width: 850px;
    margin-top: 15px;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: clamp(31px, 4.2vw, 54px);
    font-weight: 850;
    line-height: 1.2;
}

.storefront-info-hero__inner > p {
    max-width: 680px;
    margin-top: 13px;
    color: rgb(255 255 255 / 0.76);
    font-size: clamp(13px, 1.5vw, 16px);
    line-height: 1.9;
}

.storefront-info-section {
    padding-block: clamp(54px, 7vw, 88px);
}

.storefront-info-section--tinted {
    border-block: 1px solid rgb(148 163 184 / 0.09);
    background: linear-gradient(180deg, rgb(var(--color-primary) / 0.035), rgb(255 255 255 / 0.3));
}

.storefront-info-heading {
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 46px);
    text-align: center;
}

.storefront-info-heading h2 {
    margin-top: 12px;
    color: #182230;
    font-family: var(--font-display, inherit);
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 850;
    line-height: 1.3;
}

.storefront-info-heading > p {
    margin-top: 9px;
    color: #667085;
    font-size: 14px;
    line-height: 1.85;
}

.storefront-info-prose {
    color: #475467;
    font-size: 15px;
    line-height: 2;
}

.storefront-info-prose :is(h2, h3, h4) {
    margin-block: 1.5em 0.55em;
    color: #182230;
    font-family: var(--font-display, inherit);
    font-weight: 800;
    line-height: 1.45;
}

.storefront-info-prose p + p,
.storefront-info-prose :is(ul, ol, blockquote) {
    margin-top: 0.85em;
}

.storefront-info-prose :is(ul, ol) {
    padding-inline-start: 1.25rem;
}

.storefront-info-prose ul {
    list-style: disc;
}

.storefront-info-prose ol {
    list-style: decimal;
}

.storefront-info-prose a {
    color: rgb(var(--color-primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* About page. */
.storefront-about-story__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(34px, 6vw, 82px);
}

.storefront-about-story__grid--without-media {
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
}

.storefront-about-story__media {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 20px;
    background: #eef2f6;
    box-shadow: 0 18px 42px rgb(15 23 42 / 0.1);
}

.storefront-about-story__media::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgb(255 255 255 / 0.55);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.storefront-about-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storefront-about-story__copy h2 {
    margin-block: 13px 15px;
    color: #182230;
    font-family: var(--font-display, inherit);
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 850;
    line-height: 1.35;
}

.storefront-about-duo,
.storefront-about-card-grid,
.storefront-about-team-grid {
    display: grid;
    gap: 14px;
}

.storefront-about-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-about-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storefront-about-team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storefront-about-principle,
.storefront-about-value,
.storefront-about-testimonial {
    padding: clamp(24px, 3.5vw, 36px);
}

.storefront-about-principle__icon,
.storefront-about-value__index {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgb(var(--color-primary) / 0.09);
    color: rgb(var(--color-primary));
}

.storefront-about-principle__icon svg {
    width: 25px;
    height: 25px;
}

.storefront-about-principle h3,
.storefront-about-value h3 {
    margin-bottom: 9px;
    color: #182230;
    font-size: 19px;
    font-weight: 850;
}

.storefront-about-principle p,
.storefront-about-value p {
    color: #667085;
    font-size: 13px;
    line-height: 1.9;
}

.storefront-about-value {
    text-align: start;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.storefront-about-value:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--color-primary) / 0.25);
    box-shadow: 0 16px 30px rgb(15 23 42 / 0.08);
}

.storefront-about-value__index {
    margin-inline: 0;
    font-size: 18px;
    font-weight: 850;
}

.storefront-about-stats {
    position: relative;
    overflow: hidden;
    padding-block: clamp(50px, 6vw, 74px);
    background: linear-gradient(120deg, rgb(var(--color-secondary)), rgb(var(--color-primary) / 0.88));
}

.storefront-about-stats__inner {
    position: relative;
}

.storefront-about-team-card {
    min-width: 0;
    text-align: start;
}

.storefront-about-team-card__media {
    aspect-ratio: 1;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 16px;
    background: #eef2f6;
}

.storefront-about-team-card__media img,
.storefront-about-team-card__fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 280ms ease;
}

.storefront-about-team-card:hover .storefront-about-team-card__media img {
    transform: scale(1.035);
}

.storefront-about-team-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-primary) / 0.08);
}

.storefront-about-team-card h3 {
    color: #182230;
    font-size: 16px;
    font-weight: 800;
}

.storefront-about-team-card > p {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.storefront-about-team-card .storefront-about-team-card__position {
    color: rgb(var(--color-primary));
    font-weight: 700;
}

.storefront-about-timeline {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
}

.storefront-about-timeline__line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: 2px;
    background: rgb(var(--color-primary) / 0.18);
    transform: translateX(-50%);
}

[dir="rtl"] .storefront-about-timeline__line {
    transform: translateX(50%);
}

.storefront-about-timeline__item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.storefront-about-timeline__item--even {
    flex-direction: row-reverse;
}

.storefront-about-timeline__side {
    width: 50%;
    padding-inline: 30px;
}

.storefront-about-timeline__card {
    padding: 22px;
}

.storefront-about-timeline__card h3 {
    color: #182230;
}

.storefront-about-timeline__card p {
    color: #667085;
    font-size: 13px;
    line-height: 1.8;
}

.storefront-about-timeline__dot {
    position: absolute;
    inset-inline-start: 50%;
    width: 14px;
    height: 14px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: rgb(var(--color-primary));
    box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.22);
    transform: translateX(-50%);
}

[dir="rtl"] .storefront-about-timeline__dot {
    transform: translateX(50%);
}

.storefront-about-testimonial__quote {
    min-height: 74px;
    margin-block: 12px 22px;
    color: #475467;
    font-size: 13px;
    line-height: 1.9;
}

.storefront-info-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, rgb(var(--color-secondary)), rgb(var(--color-primary) / 0.86));
    color: #fff;
}

.storefront-info-cta__media,
.storefront-info-cta__media > div,
.storefront-info-cta__background {
    position: absolute;
    inset: 0;
}

.storefront-info-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storefront-info-cta__media > div {
    background: rgb(var(--color-secondary) / 0.84);
}

.storefront-info-cta__background {
    background: linear-gradient(120deg, rgb(var(--color-secondary)), rgb(var(--color-primary) / 0.84));
}

.storefront-info-cta__content {
    position: relative;
    display: flex;
    min-height: 280px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 54px;
    text-align: center;
}

.storefront-info-cta__content h2,
.storefront-legal-cta h3 {
    color: #fff;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 850;
}

.storefront-info-cta__content p,
.storefront-legal-cta p {
    max-width: 650px;
    margin-block: 10px 22px;
    color: rgb(255 255 255 / 0.76);
    font-size: 14px;
    line-height: 1.85;
}

/* Contact page. */
.storefront-contact-layout {
    padding-block: clamp(30px, 5vw, 64px);
}

.storefront-contact-grid {
    display: grid;
    grid-template-columns: minmax(245px, 0.78fr) minmax(0, 2fr);
    align-items: start;
    gap: 16px;
}

.storefront-contact-details {
    display: grid;
    gap: 10px;
}

.storefront-contact-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 17px;
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.storefront-contact-card:hover {
    border-color: rgb(var(--color-primary) / 0.24);
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.055);
}

.storefront-contact-card__icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgb(var(--color-primary) / 0.08);
    color: rgb(var(--color-primary));
}

.storefront-contact-card__icon svg {
    width: 20px;
    height: 20px;
}

.storefront-contact-card h3,
.storefront-contact-social h3 {
    color: #182230;
    font-size: 13px;
    font-weight: 800;
}

.storefront-contact-card p,
.storefront-contact-card a {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: #667085;
    font-size: 11px;
    line-height: 1.6;
}

.storefront-contact-card a:hover {
    color: rgb(var(--color-primary));
}

.storefront-contact-social {
    padding: 17px;
    box-shadow: none;
}

.storefront-contact-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.storefront-contact-social__link {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-primary) / 0.13);
    border-radius: 10px;
    background: rgb(var(--color-primary) / 0.06);
    color: rgb(var(--color-primary));
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.storefront-contact-social__link:hover {
    transform: translateY(-2px);
    background: rgb(var(--color-primary));
    color: #fff;
}

.storefront-contact-form-card {
    min-width: 0;
    padding: clamp(24px, 4vw, 42px);
}

.storefront-contact-form-card__heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 26px;
}

.storefront-contact-form-card__heading h2 {
    color: #182230;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 850;
}

.storefront-contact-form-card__heading p {
    margin-top: 3px;
    color: #667085;
    font-size: 11px;
}

.storefront-contact-form {
    display: grid;
    gap: 20px;
}

.storefront-contact-submit {
    width: fit-content;
    min-width: 150px;
}

.storefront-contact-success {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 11px 13px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
}

.storefront-contact-success svg {
    width: 18px;
    height: 18px;
}

.storefront-contact-map {
    padding-top: 10px;
}

.storefront-contact-map__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 0.18);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgb(15 23 42 / 0.08);
}

.storefront-contact-map__canvas {
    width: 100%;
    height: clamp(360px, 50vh, 520px);
}

.storefront-contact-map__canvas iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.storefront-contact-map__overlay {
    position: absolute;
    inset-inline: 18px;
    inset-block-end: 18px;
}

.storefront-contact-map__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 0.7);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.94);
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.12);
    backdrop-filter: blur(12px);
}

/* Legal pages. */
.storefront-legal-hero {
    min-height: clamp(185px, 20vw, 250px);
}

.storefront-legal-hero .storefront-info-hero__inner {
    align-items: flex-start;
    text-align: start;
}

.storefront-legal-hero .storefront-info-hero__inner h1 {
    margin-top: 0;
    font-size: clamp(29px, 3.5vw, 43px);
}

.storefront-legal-content {
    padding-block: clamp(28px, 5vw, 58px) clamp(54px, 7vw, 84px);
}

.storefront-legal-layout {
    width: min(100%, 920px);
    margin-inline: auto;
}

.storefront-legal-updated {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.storefront-legal-updated__icon,
.storefront-legal-note__icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(var(--color-primary) / 0.075);
    color: rgb(var(--color-primary));
}

.storefront-legal-updated__icon svg,
.storefront-legal-note__icon svg {
    width: 17px;
    height: 17px;
}

.storefront-legal-note {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-inline-start: 3px solid rgb(var(--color-primary));
    border-radius: 12px;
    background: rgb(var(--color-primary) / 0.045);
}

.storefront-legal-note__inner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.storefront-legal-note p {
    color: #475467;
    font-size: 13px;
    line-height: 1.85;
}

.storefront-legal-sections {
    padding: clamp(24px, 4vw, 42px);
}

.storefront-legal-section {
    padding-block: 30px;
    border-bottom: 1px solid #eaecf0;
}

.storefront-legal-section:first-child {
    padding-top: 0;
}

.storefront-legal-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.storefront-legal-section h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    color: #182230;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 850;
    line-height: 1.5;
}

.storefront-legal-section__index {
    display: inline-flex;
    min-width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding-inline: 7px;
    border-radius: 9px;
    background: rgb(var(--color-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}

.storefront-legal-prose {
    padding-inline-start: 43px;
    font-size: 14px;
    line-height: 2;
}

.storefront-legal-cta {
    margin-top: 16px;
    padding: clamp(30px, 5vw, 46px);
    border-radius: 18px;
    text-align: center;
}

.storefront-legal-cta h3 {
    font-size: clamp(21px, 2.5vw, 28px);
}

.storefront-legal-cta .storefront-info-action {
    margin-inline: auto;
}

@media (max-width: 1199px) {
    .storefront-brand-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .storefront-category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .storefront-about-team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .storefront-info-container {
        width: min(calc(100% - 24px), 1380px);
    }

    .storefront-info-breadcrumb {
        min-height: 40px;
        font-size: 10.5px;
    }

    .storefront-directory-page {
        padding-bottom: 42px;
    }

    .storefront-directory-hero {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 17px;
        padding: 18px;
        border-radius: 16px;
    }

    .storefront-directory-hero__copy {
        gap: 11px;
    }

    .storefront-info-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .storefront-info-icon svg {
        width: 20px;
        height: 20px;
    }

    .storefront-directory-hero__copy h1 {
        font-size: 21px;
    }

    .storefront-directory-search {
        width: 100%;
        min-height: 42px;
    }

    .storefront-directory-content {
        padding-top: 12px;
    }

    .storefront-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .storefront-brand-card {
        min-height: 146px;
        padding: 15px 10px;
        border-radius: 13px;
    }

    .storefront-brand-card__logo {
        width: 70px;
        height: 58px;
        margin-bottom: 10px;
    }

    .storefront-brand-card__arrow {
        display: none;
    }

    .storefront-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 7px;
    }

    .storefront-category-card {
        border-radius: 13px;
    }

    .storefront-category-card__media {
        aspect-ratio: 1;
    }

    .storefront-category-card__title {
        min-height: 46px;
        padding-inline: 11px;
    }

    .storefront-category-card__title strong {
        font-size: 12px;
    }

    .storefront-category-children {
        display: grid;
        grid-auto-columns: max-content;
        grid-auto-flow: column;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .storefront-category-children::-webkit-scrollbar {
        display: none;
    }

    .storefront-info-hero {
        min-height: 210px;
    }

    .storefront-info-hero__inner {
        padding-block: 38px;
    }

    .storefront-info-hero__inner h1 {
        font-size: 29px;
    }

    .storefront-info-section {
        padding-block: 50px;
    }

    .storefront-about-story__grid,
    .storefront-about-duo,
    .storefront-about-card-grid,
    .storefront-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-about-story__grid {
        gap: 26px;
    }

    .storefront-about-story__media {
        aspect-ratio: 4 / 3;
        border-radius: 16px;
    }

    .storefront-about-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 9px;
    }

    .storefront-about-principle,
    .storefront-about-value,
    .storefront-about-testimonial {
        padding: 22px;
    }

    .storefront-about-timeline__line,
    .storefront-about-timeline__dot,
    .storefront-about-timeline__side:empty {
        display: none;
    }

    .storefront-about-timeline__item,
    .storefront-about-timeline__item--even {
        display: block;
    }

    .storefront-about-timeline__side {
        width: 100%;
        padding-inline: 0;
    }

    .storefront-contact-grid {
        gap: 12px;
    }

    .storefront-contact-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .storefront-contact-card,
    .storefront-contact-social {
        min-width: 0;
        padding: 14px;
    }

    .storefront-contact-card__icon {
        width: 38px;
        height: 38px;
    }

    .storefront-contact-form-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .storefront-contact-submit {
        width: 100%;
    }

    .storefront-contact-map__frame {
        border-radius: 16px;
    }

    .storefront-contact-map__canvas {
        height: 410px;
    }

    .storefront-contact-map__overlay {
        inset-inline: 10px;
        inset-block-end: 10px;
    }

    .storefront-contact-map__summary {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .storefront-contact-map__summary .storefront-info-action {
        width: 100%;
    }

    .storefront-legal-hero {
        min-height: 170px;
    }

    .storefront-legal-sections {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .storefront-legal-section {
        padding-block: 23px;
    }

    .storefront-legal-prose {
        padding-inline-start: 0;
        font-size: 13px;
    }

    .storefront-legal-note {
        padding: 13px;
    }

    .storefront-legal-cta {
        padding: 28px 18px;
        border-radius: 16px;
    }
}

@media (max-width: 420px) {
    .storefront-contact-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-about-team-card h3 {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-info-page *,
    .storefront-info-page *::before,
    .storefront-info-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   COUNTRY PHONE SELECTOR
   Anchored popover on larger screens and a thumb-friendly sheet on phones.
   Country ISO badges are used instead of platform-dependent flag emoji so
   the control renders consistently on Windows, Android, and iOS.
   ======================================== */
.storefront-phone-input__country-backdrop {
    display: none;
}

.storefront-phone-country-enter,
.storefront-phone-country-leave {
    transition: opacity 170ms ease, transform 170ms var(--ease-out-expo);
}

.storefront-phone-country-enter-start,
.storefront-phone-country-leave-end {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
}

.storefront-phone-country-enter-end,
.storefront-phone-country-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.storefront-phone-input__country-menu,
.storefront-auth-phone .storefront-phone-input__country-menu {
    width: min(320px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid rgb(var(--color-primary) / 0.22) !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #172033;
    box-shadow: 0 24px 64px rgb(15 23 42 / 0.2), 0 5px 16px rgb(15 23 42 / 0.08) !important;
}

.storefront-phone-input__country-menu--up,
.storefront-auth-phone .storefront-phone-input__country-menu--up {
    inset-block: auto calc(100% + 7px) !important;
    margin: 0 !important;
}

.storefront-phone-input__country-menu--up.storefront-phone-country-enter-start,
.storefront-phone-input__country-menu--up.storefront-phone-country-leave-end {
    transform: translateY(5px) scale(0.985);
}

.storefront-phone-input__country-header {
    display: grid;
    min-height: 68px;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid rgb(var(--color-primary) / 0.1);
    background: linear-gradient(135deg, rgb(var(--color-primary) / 0.11), rgb(var(--color-primary) / 0.025));
}

.storefront-phone-input__country-header-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgb(var(--color-primary) / 0.18);
    border-radius: 10px;
    background: #fff;
    color: rgb(var(--color-primary));
    box-shadow: 0 4px 12px rgb(var(--color-primary) / 0.09);
}

.storefront-phone-input__country-header-icon svg {
    width: 19px;
    height: 19px;
}

.storefront-phone-input__country-header-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.storefront-phone-input__country-header-copy strong {
    color: #172033;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}

.storefront-phone-input__country-header-copy small {
    overflow: hidden;
    color: #718096;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-phone-input__country-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: rgb(255 255 255 / 0.82);
    color: #64748b;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.storefront-phone-input__country-close:hover {
    border-color: rgb(var(--color-primary) / 0.25);
    background: #fff;
    color: rgb(var(--color-primary));
}

.storefront-phone-input__country-close svg {
    width: 16px;
    height: 16px;
}

.storefront-phone-input__country-search,
.storefront-auth-phone .storefront-phone-input__country-search {
    padding: 9px !important;
    border-bottom: 1px solid #edf0f4 !important;
    background: #fff !important;
}

.storefront-phone-input__country-search-field,
.storefront-auth-phone .storefront-phone-input__country-search-field {
    min-height: 40px;
    border: 1px solid #dbe2ea !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #172033 !important;
    font-size: 11.5px !important;
    box-shadow: none !important;
}

.storefront-phone-input__country-search-field:focus,
.storefront-auth-phone .storefront-phone-input__country-search-field:focus {
    border-color: rgb(var(--color-primary)) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.1) !important;
}

.storefront-phone-input__country-list,
.storefront-auth-phone .storefront-phone-input__country-list {
    max-height: min(225px, 35dvh) !important;
    padding: 6px !important;
    background: #fff;
    scrollbar-color: rgb(var(--color-primary) / 0.38) transparent;
    scrollbar-width: thin;
}

.storefront-phone-input__country-option,
.storefront-auth-phone .storefront-phone-input__country-option {
    min-height: 47px;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #334155 !important;
}

.storefront-phone-input__country-option + .storefront-phone-input__country-option {
    margin-top: 3px !important;
}

.storefront-phone-input__country-option:hover,
.storefront-auth-phone .storefront-phone-input__country-option:hover {
    border-color: rgb(var(--color-primary) / 0.12) !important;
    background: rgb(var(--color-primary) / 0.045) !important;
}

.storefront-phone-input__country-option.bg-primary-50,
.storefront-auth-phone .storefront-phone-input__country-option.bg-primary-50 {
    border-color: rgb(var(--color-primary) / 0.2) !important;
    background: rgb(var(--color-primary) / 0.09) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-phone-input__country-flag,
.storefront-auth-phone .storefront-phone-input__country-flag,
.storefront-auth-phone .storefront-phone-input__selected-flag {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 1px solid rgb(var(--color-primary) / 0.15);
    border-radius: 9px;
    background: rgb(var(--color-primary) / 0.07);
    color: rgb(var(--color-primary));
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 9.5px !important;
    font-weight: 900;
    letter-spacing: 0.025em;
    box-shadow: none;
}

.storefront-phone-input__country-name,
.storefront-auth-phone .storefront-phone-input__country-name {
    color: #263246 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.storefront-phone-input__country-option-meta {
    display: inline-flex;
    min-width: 70px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.storefront-phone-input__country-dial,
.storefront-auth-phone .storefront-phone-input__country-dial {
    min-width: 50px;
    padding: 4px 7px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #64748b !important;
    text-align: center;
}

.storefront-phone-input__country-check {
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 50%;
    background: rgb(var(--color-primary));
    color: #fff;
}

.storefront-phone-input__country-trigger,
.storefront-auth-phone .storefront-phone-input__country-trigger {
    gap: 7px !important;
    padding-inline: 9px 11px !important;
    border-inline-end-color: rgb(var(--color-primary) / 0.14) !important;
    background: rgb(var(--color-primary) / 0.045) !important;
}

.storefront-phone-input__country-trigger:hover,
.storefront-phone-input__country-trigger[aria-expanded="true"],
.storefront-auth-phone .storefront-phone-input__country-trigger:hover,
.storefront-auth-phone .storefront-phone-input__country-trigger[aria-expanded="true"] {
    background: rgb(var(--color-primary) / 0.09) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-phone-input__selected-dial,
.storefront-auth-phone .storefront-phone-input__selected-dial {
    color: #334155 !important;
    font-size: 11px !important;
}

@media (min-width: 960px) {
    .storefront-phone-input__country-list,
    .storefront-auth-phone .storefront-phone-input__country-list {
        max-height: 180px !important;
    }
}

@media (max-width: 599px) {
    .storefront-phone-input__country-backdrop {
        position: fixed;
        z-index: var(--z-shell-modal);
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgb(15 23 42 / 0.48);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .storefront-phone-input__country-menu,
    .storefront-auth-phone .storefront-phone-input__country-menu {
        position: fixed !important;
        z-index: calc(var(--z-shell-modal) + 1) !important;
        inset: auto 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(76dvh, 610px);
        margin: 0 !important;
        border-width: 1px 0 0 !important;
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -18px 60px rgb(15 23 42 / 0.2) !important;
    }

    .storefront-phone-country-enter,
    .storefront-phone-country-leave {
        transition: opacity 220ms ease, transform 260ms var(--ease-out-expo);
    }

    .storefront-phone-country-enter-start,
    .storefront-phone-country-leave-end {
        opacity: 0;
        transform: translateY(100%);
    }

    .storefront-phone-country-enter-end,
    .storefront-phone-country-leave-start {
        opacity: 1;
        transform: translateY(0);
    }

    .storefront-phone-input__country-header {
        min-height: 72px;
        padding: 13px 14px 10px;
        border-radius: 22px 22px 0 0;
    }

    .storefront-phone-input__country-search,
    .storefront-auth-phone .storefront-phone-input__country-search {
        padding-inline: 14px !important;
    }

    .storefront-phone-input__country-list,
    .storefront-auth-phone .storefront-phone-input__country-list {
        max-height: calc(min(76dvh, 610px) - 131px) !important;
        padding: 7px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        overscroll-behavior: contain;
    }

    .storefront-phone-input__country-option,
    .storefront-auth-phone .storefront-phone-input__country-option {
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-phone-country-enter,
    .storefront-phone-country-leave {
        transition-duration: 0.01ms !important;
    }
}

@media (min-width: 480px) {
    :root { --storefront-layout-gutter: 16px; }
}

@media (min-width: 768px) {
    :root {
        --storefront-layout-gutter: clamp(24px, calc(5.21vw - 16px), 64px);
    }
}

@media (min-width: 1200px) {
    :root {
        --storefront-layout-gutter: clamp(64px, 5.75vw, 88px);
    }
}

/* ========================================
   BASE STYLES
   ======================================== */
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', 'Tajawal', sans-serif;
    overflow-x: hidden;
}
[dir="rtl"] body { font-family: 'Tajawal', 'Poppins', sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5e6e8; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgb(var(--color-primary)), rgb(var(--color-gold)));
    border-radius: 10px;
}

/* ========================================
   GLASS MORPHISM
   ======================================== */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
@media not all and (min-width: 768px) {
    .glass {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-elegant {
    position: relative;
    overflow: hidden;
    border-radius: var(--storefront-action-radius) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-elegant::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}
.btn-elegant:hover::before { left: 100%; }

/* ========================================
   PRODUCT CARD
   ======================================== */
.product-card {
    transition: border-color 0.2s ease;
}

/* Merchant-configurable product card variants. */
.elegance-product-card {
    --product-card-primary: rgb(var(--color-primary));
    --product-card-secondary: rgb(var(--color-secondary));
    --product-card-border: #e8eaf0;
    --product-card-border: color-mix(in srgb, var(--product-card-secondary) 10%, white);
    --product-card-soft: #f8fafc;
    --product-card-primary-soft: rgb(var(--color-primary) / 0.08);
    --product-card-tool-size: clamp(30px, 14.5cqi, 34px);
    --product-card-tool-icon-size: clamp(12px, 5.8cqi, 15px);
    --product-card-tool-gap: clamp(5px, 3cqi, 8px);
    --product-card-media-action-size: clamp(32px, 16cqi, 38px);
    --product-card-media-action-icon-size: clamp(15px, 8cqi, 18px);
    position: relative;
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(4px, 0.45vw, 6px);
    border: 1px solid var(--product-card-border);
    border-radius: 4px;
    background: #fafafa;
    box-shadow: none;
    isolation: isolate;
    container: elegance-product-card / inline-size;
    transition: transform 0.2s var(--ease-out-expo), border-color 0.2s ease, box-shadow 0.2s ease;
}

.elegance-product-card:focus-within {
    border-color: rgb(var(--color-primary) / 0.24);
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.08), 0 12px 28px rgb(15 23 42 / 0.07);
}

.elegance-product-card.is-out-of-stock { opacity: 0.82; }

.elegance-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f5f7;
}

.elegance-product-card__media-link,
.elegance-product-card__image,
.elegance-product-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.elegance-product-card__image {
    object-fit: contain;
    object-position: center;
    transition: transform 0.32s var(--ease-out-expo);
}

.elegance-product-card.is-out-of-stock .elegance-product-card__image {
    filter: grayscale(0.88);
    opacity: 0.58;
}

.elegance-product-card__placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fafafa, #eef0f4);
    color: #94a3b8;
}

.elegance-product-card__placeholder svg {
    width: 36px;
    height: 36px;
}

.elegance-product-card__badges {
    position: absolute;
    z-index: 3;
    inset-block-start: 9px;
    inset-inline-start: 9px;
    display: flex;
    max-width: calc(100% - 54px);
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}

.elegance-product-card__badge {
    display: inline-flex;
    max-width: 100%;
    min-height: 23px;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 8px;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.1);
}

.elegance-product-card__badge svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

.elegance-product-card__badge--discount { background: #e11d48; }
.elegance-product-card__badge--flash { background: linear-gradient(135deg, #ef4444, #f97316); }
.elegance-product-card__badge--stock { background: #475569; }
.elegance-product-card__badge--featured { background: #059669; }
.elegance-product-card__badge--label { background: var(--product-card-primary); }
.elegance-product-card__badge--variants { background: #2563eb; pointer-events: auto; }

.elegance-product-card__tools {
    position: absolute;
    z-index: 4;
    inset-block-start: 9px;
    inset-inline-end: 9px;
    display: flex;
    flex-direction: column;
    gap: var(--product-card-tool-gap);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.elegance-product-card__tool,
.elegance-product-card__share-tool > button {
    position: relative;
    display: inline-grid;
    width: var(--product-card-tool-size);
    height: var(--product-card-tool-size);
    place-items: center;
    border: 1px solid rgb(148 163 184 / 0.16);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.9);
    color: #475569;
    box-shadow: 0 2px 7px rgb(15 23 42 / 0.07);
    backdrop-filter: blur(8px);
    transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.elegance-product-card__tool::after,
.elegance-product-card__share-tool > button::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.elegance-product-card__action::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.elegance-product-card__tool:hover,
.elegance-product-card__share-tool > button:hover {
    border-color: rgb(var(--color-primary) / 0.16);
    background: rgb(var(--color-primary) / 0.075);
    color: var(--product-card-primary);
    box-shadow: 0 3px 9px rgb(var(--color-primary) / 0.09);
}

.elegance-product-card__tool--wishlist.is-active {
    border-color: var(--product-card-primary);
    background: var(--product-card-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgb(var(--color-primary) / 0.2);
}

.elegance-product-card__tool--wishlist.is-active:hover {
    border-color: var(--product-card-primary);
    background: var(--product-card-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgb(var(--color-primary) / 0.24);
}

.elegance-product-card__tool svg,
.elegance-product-card__share-tool svg {
    width: var(--product-card-tool-icon-size);
    height: var(--product-card-tool-icon-size);
    stroke: currentColor;
}

.elegance-product-card__media-whatsapp {
    position: absolute;
    z-index: 4;
    inset-block-end: 9px;
    inset-inline-start: 9px;
    display: inline-grid;
    width: var(--product-card-media-action-size);
    height: var(--product-card-media-action-size);
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.78);
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    box-shadow: 0 5px 14px rgb(21 128 61 / 0.23);
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.elegance-product-card__media-whatsapp:hover {
    border-color: rgb(255 255 255 / 0.92);
    background: #16a34a;
    color: #fff;
    box-shadow: 0 6px 16px rgb(21 128 61 / 0.28);
}

.elegance-product-card__media-whatsapp svg {
    width: var(--product-card-media-action-icon-size);
    height: var(--product-card-media-action-icon-size);
    fill: currentColor;
    stroke: none;
}

.elegance-product-card__content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: 8px 1px 2px;
}

.elegance-product-card__meta {
    display: flex;
    min-width: 0;
    min-height: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 2px;
}

.elegance-product-card__brand {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elegance-product-card__rating {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    color: #d97706;
    font-size: 10px;
    direction: ltr;
}

.elegance-product-card__rating svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.elegance-product-card__rating small {
    color: #94a3b8;
    font-size: 9.5px;
}

.elegance-product-card__title-link {
    display: block;
    color: var(--product-card-secondary);
    text-decoration: none;
    transition: color 0.18s ease;
}

.elegance-product-card__title {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: start;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.elegance-product-card__title-link:hover { color: var(--product-card-primary); }

.elegance-product-card__title-link:is(:hover, :focus-visible) .elegance-product-card__title {
    text-decoration-color: rgb(var(--color-primary) / 0.62);
    text-decoration-line: underline;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.elegance-product-card__commerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: end;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.elegance-product-card__commerce.is-actions-only {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
}

.elegance-product-card__commerce.is-price-only { grid-template-columns: minmax(0, 1fr); }

.elegance-product-card__price {
    min-width: 0;
    overflow: hidden;
    line-height: 1.2;
}

.elegance-product-card__price-current,
.elegance-product-card__price-old {
    display: block;
    min-width: 0;
}

.elegance-product-card__price-current {
    color: var(--product-card-secondary);
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
}

.elegance-product-card__price-current.is-sale { color: var(--product-card-primary); }

.elegance-product-card__price-current :is(span, small) {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.elegance-product-card__price-old {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    text-decoration: line-through;
}

.elegance-product-card__price-old * { color: inherit !important; }

.elegance-product-card__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.elegance-product-card__action,
.elegance-product-card__stock-button {
    position: relative;
    display: inline-flex;
    min-width: 36px;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--product-card-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 7px 15px rgb(var(--color-primary) / 0.2);
    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.elegance-product-card__action:hover,
.elegance-product-card__stock-button:hover {
    color: #fff;
    filter: brightness(0.92);
    transform: translateY(-2px);
}

.elegance-product-card__action svg,
.elegance-product-card__stock-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
}

.elegance-product-card__stock-action,
.elegance-product-card__stock-action > div { display: contents; }

.elegance-product-card__action--stock,
.elegance-product-card__stock-button {
    background: #64748b;
    box-shadow: none;
}

.elegance-product-card__action--stock.is-subscribed { background: #059669; }

.elegance-product-card--quick .elegance-product-card__action,
.elegance-product-card--quick .elegance-product-card__stock-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 12px;
}

.elegance-product-card--quick .elegance-product-card__action-label { display: none; }

/*
 * Type 2 — Visual showcase.
 *
 * This variant deliberately removes the boxed-card chrome and lets the image
 * lead the browsing experience. It is intended for fashion, beauty and other
 * image-led catalogues where a quiet purchase row is more useful than another
 * conventional card shell.
 */
.elegance-product-card--ribbon {
    overflow: visible;
    padding: 0;
    border-color: transparent;
    border-radius: 16px;
    background: transparent;
}

.elegance-product-card--ribbon .elegance-product-card__media {
    border-radius: 16px;
    box-shadow: 0 8px 22px rgb(15 23 42 / 0.08);
    transition: transform 0.24s var(--ease-out-expo), box-shadow 0.24s ease;
}

.elegance-product-card--ribbon .elegance-product-card__content {
    position: relative;
    z-index: 5;
    width: calc(100% - 18px);
    margin: -54px auto 0;
    padding: 11px 12px 12px;
    border: 1px solid rgb(255 255 255 / 0.9);
    border-radius: 13px;
    background: rgb(255 255 255 / 0.95);
    box-shadow: 0 12px 28px rgb(15 23 42 / 0.11);
    backdrop-filter: blur(14px);
    transition: transform 0.24s var(--ease-out-expo), box-shadow 0.24s ease;
}

.elegance-product-card--ribbon .elegance-product-card__brand {
    color: var(--product-card-primary);
    font-weight: 700;
}

.elegance-product-card--ribbon .elegance-product-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.elegance-product-card__ribbon-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    align-items: stretch;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.elegance-product-card__ribbon {
    display: flex;
    min-width: 0;
    min-height: 36px;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.elegance-product-card__ribbon.is-price-only {
    justify-content: flex-start;
    padding-inline: 0;
}

.elegance-product-card__ribbon.is-action-only { justify-content: flex-end; }

.elegance-product-card__ribbon-price {
    min-width: 0;
    color: var(--product-card-secondary);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.elegance-product-card__ribbon-price.is-sale { color: var(--product-card-primary); }

.elegance-product-card__ribbon-price :is(span, small) {
    color: #64748b;
    font-size: 9.5px;
    font-weight: 700;
}

.elegance-product-card__ribbon-price del {
    margin-inline-start: 3px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 600;
}

.elegance-product-card__ribbon-price del * { color: inherit !important; }

.elegance-product-card__ribbon-action {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 11px;
    border: 1px solid rgb(var(--color-primary) / 0.3);
    border-radius: 8px;
    background: #fff;
    color: var(--product-card-primary);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 2px 7px rgb(var(--color-primary) / 0.08);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.elegance-product-card__ribbon-action:hover {
    color: #fff;
    border-color: var(--product-card-primary);
    background: var(--product-card-primary);
    box-shadow: 0 6px 14px rgb(var(--color-primary) / 0.2);
    transform: translateY(-1px);
}

.elegance-product-card__ribbon-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
}

/*
 * Type 3 — Purchase focus.
 *
 * A contained, identity-tinted shell and a full-width decision area make the
 * commercial information unmistakable. This is intentionally denser and more
 * action-oriented than both the default and visual-showcase variants.
 */
.elegance-product-card--deal {
    overflow: hidden;
    padding: 0;
    border-color: rgb(var(--color-primary) / 0.16);
    border-radius: 14px;
    background: #fff;
}

.elegance-product-card--deal .elegance-product-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 0;
}

.elegance-product-card--deal .elegance-product-card__content {
    padding: 11px;
    background: linear-gradient(145deg, rgb(var(--color-primary) / 0.08), #fff 72%);
}

.elegance-product-card--deal .elegance-product-card__meta {
    margin-bottom: 5px;
}

.elegance-product-card--deal .elegance-product-card__brand {
    display: inline-flex;
    width: fit-content;
    max-width: 68%;
    min-height: 21px;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.09);
    color: var(--product-card-primary);
    font-size: 9.5px;
    font-weight: 750;
}

.elegance-product-card--deal .elegance-product-card__title {
    min-height: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.55;
}

.elegance-product-card__deal-dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 9px;
    border: 0;
    border-radius: 10px;
    background: rgb(255 255 255 / 0.78);
}

.elegance-product-card__deal-dock.is-price-only {
    justify-content: flex-start;
    padding-inline: 9px;
}

.elegance-product-card__deal-dock.is-action-only {
    grid-template-columns: minmax(0, 1fr);
}

.elegance-product-card__dock-price {
    min-width: 0;
    color: var(--product-card-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.elegance-product-card__dock-price :is(span, small) {
    color: #64748b;
    font-size: 9.5px;
    font-weight: 700;
}

.elegance-product-card__dock-price del {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 600;
}

.elegance-product-card__dock-price del * { color: inherit !important; }

.elegance-product-card__dock-actions {
    display: flex;
    min-width: 0;
    width: 100%;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.elegance-product-card__dock-action {
    position: relative;
    display: inline-flex;
    min-width: 0;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: var(--product-card-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 5px 12px rgb(var(--color-primary) / 0.2);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.elegance-product-card__dock-action:hover {
    color: #fff;
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.elegance-product-card__dock-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
}

.elegance-product-card.is-out-of-stock :is(.elegance-product-card__ribbon-action, .elegance-product-card__dock-action) {
    background: #64748b;
    border-color: #64748b;
    color: #fff;
    box-shadow: none;
}

.elegance-product-card-grid {
    align-items: stretch;
    gap: var(--elegance-product-card-gap);
}

/* Merchant-controlled density. The existing compact gap remains the default. */
.elegance-product-layout--gap-small { --elegance-product-card-gap: clamp(5px, 0.45vw, 7px); }
.elegance-product-layout--gap-medium { --elegance-product-card-gap: clamp(10px, 0.9vw, 14px); }
.elegance-product-layout--gap-large { --elegance-product-card-gap: clamp(16px, 1.4vw, 22px); }

.elegance-product-layout--size-medium .elegance-product-card__media {
    aspect-ratio: 1 / 1;
}

.elegance-product-layout--size-small .elegance-product-card__media {
    aspect-ratio: 1 / 1;
}

.elegance-product-layout--size-medium .elegance-product-card--deal .elegance-product-card__media {
    aspect-ratio: 1 / 1;
}

.elegance-product-layout--size-small .elegance-product-card--deal .elegance-product-card__media {
    aspect-ratio: 1 / 1;
}

.elegance-product-layout--size-medium .elegance-product-card__content {
    padding-inline: clamp(8px, 0.8vw, 12px);
}

.elegance-product-layout--size-small .elegance-product-card__content {
    padding-inline: clamp(7px, 0.65vw, 10px);
}

.elegance-product-card-grid > * { min-width: 0; }

.container.elegance-product-layout-container {
    padding-inline: var(--storefront-layout-gutter);
}

.container.storefront-breadcrumb-container {
    padding-inline: var(--storefront-layout-gutter);
}

/*
 * Every regular page section follows the same horizontal rhythm as the
 * storefront header and footer. Explicit max-width containers (checkout,
 * dashboards and focused forms) keep their intentionally narrower measure.
 */
.storefront-shell-main .container.mx-auto {
    padding-inline: var(--storefront-layout-gutter);
}

.storefront-shell-main .container.mx-auto:not([class*="max-w-"]) {
    max-width: var(--storefront-layout-max-width);
}

.products-splide .splide__slide {
    min-width: 0;
    height: auto;
}

/*
 * The catalogue owns its responsive columns because the available card width
 * changes when the desktop filter rail appears. Homepage section columns stay
 * merchant-configurable and are intentionally excluded from this contract.
 */
.storefront-product-results .storefront-product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .storefront-product-results .storefront-product-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 896px) {
    .storefront-product-results .storefront-product-catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .storefront-product-results .storefront-product-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1360px) {
    .storefront-product-results .storefront-product-catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .storefront-product-results .storefront-product-catalog-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.elegance-product-card__details-note {
    margin-top: auto;
    padding-top: 10px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 600;
}

.elegance-product-card :is(a, button):focus-visible {
    outline: 3px solid rgb(var(--color-primary) / 0.28);
    outline-offset: 2px;
}

@container elegance-product-card (max-width: 185px) {
    .elegance-product-card { border-radius: 4px; }

    .elegance-product-card__content,
    .elegance-product-card--deal .elegance-product-card__content { padding: 7px 1px 1px; }

    .elegance-product-card__badges {
        inset-block-start: 7px;
        inset-inline-start: 7px;
        max-width: calc(100% - 44px);
        gap: 3px;
    }

    .elegance-product-card__badge {
        min-height: 21px;
        padding: 3px 6px;
        border-radius: 7px;
        font-size: 8.5px;
    }

    .elegance-product-card__tools {
        inset-block-start: 7px;
        inset-inline-end: 7px;
        gap: var(--product-card-tool-gap);
    }

    .elegance-product-card__media-whatsapp {
        inset-block-end: 7px;
        inset-inline-start: 7px;
    }

    .elegance-product-card__tool,
    .elegance-product-card__share-tool > button {
        width: var(--product-card-tool-size);
        height: var(--product-card-tool-size);
    }

    .elegance-product-card__tool svg,
    .elegance-product-card__share-tool svg {
        width: var(--product-card-tool-icon-size);
        height: var(--product-card-tool-icon-size);
    }

    .elegance-product-card__meta {
        min-height: 14px;
        gap: 4px;
        margin-bottom: 2px;
    }

    .elegance-product-card__brand,
    .elegance-product-card__rating { font-size: 9.5px; }

    .elegance-product-card__rating small { display: none; }

    .elegance-product-card__title {
        min-height: 0;
        font-size: 12.25px;
        font-weight: 600;
        line-height: 1.5;
    }

    .elegance-product-card__commerce,
    .elegance-product-card__ribbon-footer { padding-top: 5px; }

    .elegance-product-card__price-current { font-size: 12.5px; }
    .elegance-product-card__price-old { font-size: 9px; }

    .elegance-product-card__action,
    .elegance-product-card__stock-button {
        min-width: 34px;
        min-height: 34px;
        padding: 6px 8px;
        border-radius: 10px;
        font-size: 9px;
    }

    .elegance-product-card--quick .elegance-product-card__action,
    .elegance-product-card--quick .elegance-product-card__stock-button {
        width: 34px;
        height: 34px;
    }

    .elegance-product-card__action svg,
    .elegance-product-card__stock-button svg {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .elegance-product-card__ribbon-footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .elegance-product-card__ribbon {
        min-height: 38px;
        padding: 5px;
        border-radius: 10px;
    }

    .elegance-product-card__ribbon-price,
    .elegance-product-card__dock-price { font-size: 11px; }

    .elegance-product-card__ribbon-price del,
    .elegance-product-card__dock-price del {
        display: block;
        margin: 2px 0 0;
    }

    .elegance-product-card__ribbon-action,
    .elegance-product-card__dock-action {
        width: 31px;
        height: 31px;
        min-width: 31px;
        min-height: 31px;
        flex-basis: 31px;
        gap: 0;
        padding: 0;
        font-size: 8.5px;
    }

    .elegance-product-card--ribbon :is(.elegance-product-card__responsive-action-label, .elegance-product-card__action-label),
    .elegance-product-card--deal :is(.elegance-product-card__responsive-action-label, .elegance-product-card__action-label) {
        display: none;
    }

    .elegance-product-card__deal-dock {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 42px;
        padding: 6px;
        border-radius: 10px;
    }

    .elegance-product-card__deal-dock.is-action-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .elegance-product-card--ribbon {
        border-radius: 12px;
    }

    .elegance-product-card--ribbon .elegance-product-card__media {
        border-radius: 12px;
    }

    .elegance-product-card--ribbon .elegance-product-card__content {
        width: calc(100% - 10px);
        margin-top: -40px;
        padding: 8px;
        border-radius: 10px;
    }

    .elegance-product-card--deal {
        padding: 0;
        border-radius: 10px;
    }

    .elegance-product-card--deal .elegance-product-card__media {
        border-radius: 0;
    }

    .elegance-product-card--deal .elegance-product-card__content {
        padding: 8px;
    }

    .elegance-product-card--deal .elegance-product-card__brand {
        min-height: 19px;
        padding: 2px 6px;
        font-size: 8.5px;
    }

    .elegance-product-card--deal .elegance-product-card__dock-actions {
        width: auto;
    }

}

@media (max-width: 767px) {
    .elegance-product-card { border-radius: 4px; }

    .elegance-product-card__content,
    .elegance-product-card--deal .elegance-product-card__content { padding: 7px 1px 1px; }

    .elegance-product-card__badges {
        inset-block-start: 7px;
        inset-inline-start: 7px;
        max-width: calc(100% - 43px);
        gap: 3px;
    }

    .elegance-product-card__badge {
        min-height: 21px;
        padding: 3px 6px;
        border-radius: 7px;
        font-size: 8.5px;
    }

    .elegance-product-card__tools {
        inset-block-start: 7px;
        inset-inline-end: 7px;
        gap: var(--product-card-tool-gap);
    }

    .elegance-product-card__media-whatsapp {
        inset-block-end: 7px;
        inset-inline-start: 7px;
    }

    .elegance-product-card__tool,
    .elegance-product-card__share-tool > button {
        width: var(--product-card-tool-size);
        height: var(--product-card-tool-size);
    }

    .elegance-product-card__tool svg,
    .elegance-product-card__share-tool svg {
        width: var(--product-card-tool-icon-size);
        height: var(--product-card-tool-icon-size);
    }

    .elegance-product-card__meta {
        min-height: 14px;
        gap: 4px;
        margin-bottom: 2px;
    }

    .elegance-product-card__brand,
    .elegance-product-card__rating { font-size: 9.5px; }

    .elegance-product-card__rating small { display: none; }

    .elegance-product-card__title,
    .elegance-product-card--deal .elegance-product-card__title {
        min-height: 0;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.5;
    }

    .elegance-product-card__commerce,
    .elegance-product-card__ribbon-footer {
        gap: 4px;
        padding-top: 5px;
    }

    .elegance-product-card__price-current { font-size: 13px; }
    .elegance-product-card__price-old { font-size: 9px; }
    .elegance-product-card__actions { gap: 5px; }

    .elegance-product-card__action,
    .elegance-product-card__stock-button,
    .elegance-product-card--quick .elegance-product-card__action,
    .elegance-product-card--quick .elegance-product-card__stock-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
    }

    .elegance-product-card__action svg,
    .elegance-product-card__stock-button svg {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }

    .elegance-product-card__ribbon {
        min-height: 38px;
        gap: 5px;
        padding-block: 5px;
        padding-inline: 5px 8px;
        border-radius: 10px;
    }

    .elegance-product-card__ribbon-price { font-size: 11px; }

    .elegance-product-card__ribbon-price del {
        display: block;
        margin: 2px 0 0;
    }

    .elegance-product-card__ribbon-action {
        width: 31px;
        height: 31px;
        min-width: 31px;
        min-height: 31px;
        flex-basis: 31px;
        gap: 0;
        padding: 0;
        border-radius: 8px;
        font-size: 8.5px;
    }

    .elegance-product-card__deal-dock {
        min-height: 42px;
        gap: 4px;
        padding: 5px;
        border-radius: 10px;
    }

    .elegance-product-card__dock-price { font-size: 11px; }

    .elegance-product-card__dock-price del {
        display: block;
        margin: 2px 0 0;
    }

    .elegance-product-card__dock-actions { gap: 3px; }

    .elegance-product-card__dock-action {
        width: 31px;
        height: 31px;
        min-width: 31px;
        min-height: 31px;
        flex-basis: 31px;
        gap: 0;
        padding: 0;
        border-radius: 7px;
        font-size: 8.5px;
    }

    .elegance-product-card--ribbon :is(.elegance-product-card__responsive-action-label, .elegance-product-card__action-label),
    .elegance-product-card--deal :is(.elegance-product-card__responsive-action-label, .elegance-product-card__action-label) {
        display: none;
    }

    .elegance-product-card--ribbon {
        border-radius: 12px;
    }

    .elegance-product-card--ribbon .elegance-product-card__media {
        border-radius: 12px;
    }

    .elegance-product-card--ribbon .elegance-product-card__content {
        width: calc(100% - 12px);
        margin-top: -44px;
        padding: 9px;
        border-radius: 10px;
    }

    .elegance-product-card--deal {
        padding: 0;
        border-radius: 11px;
    }

    .elegance-product-card--deal .elegance-product-card__media {
        border-radius: 0;
    }

    .elegance-product-card--deal .elegance-product-card__content {
        padding: 9px;
    }

    .elegance-product-card--deal .elegance-product-card__brand {
        min-height: 19px;
        padding: 2px 6px;
        font-size: 8.5px;
    }

    .elegance-product-card--deal .elegance-product-card__deal-dock {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .elegance-product-card--deal .elegance-product-card__deal-dock.is-action-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .elegance-product-card--deal .elegance-product-card__dock-actions {
        width: auto;
    }
}

@media (hover: hover) and (pointer: fine) {
    .elegance-product-card:hover {
        border-color: rgb(var(--color-primary) / 0.2);
        box-shadow: 0 8px 20px rgb(15 23 42 / 0.06);
        transform: none;
    }

    .elegance-product-card:hover .elegance-product-card__image { transform: scale(1.025); }
    .elegance-product-card:hover .elegance-product-card__title-link { color: var(--product-card-primary); }

    .elegance-product-card--ribbon:hover {
        border-color: transparent;
        box-shadow: none;
    }

    .elegance-product-card--ribbon:hover .elegance-product-card__media {
        box-shadow: 0 12px 28px rgb(15 23 42 / 0.11);
        transform: translateY(-2px);
    }

    .elegance-product-card--ribbon:hover .elegance-product-card__content {
        box-shadow: 0 16px 32px rgb(15 23 42 / 0.14);
        transform: translateY(-2px);
    }

    .elegance-product-card--deal:hover {
        border-color: rgb(var(--color-primary) / 0.32);
        box-shadow: 0 12px 26px rgb(var(--color-primary) / 0.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .elegance-product-card,
    .elegance-product-card *,
    .elegance-product-card *::before,
    .elegance-product-card *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ========================================
   UNDERLINE ANIMATION
   ======================================== */
.elegant-underline {
    position: relative;
    display: inline-block;
}
.elegant-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--color-gold)));
    transition: width 0.3s ease;
}
.elegant-underline:hover::after,
.elegant-underline[aria-current="page"]::after {
    left: 0.5rem;
    width: calc(100% - 1rem);
}

/* ========================================
   GRADIENT TEXT
   ======================================== */
.gradient-text {
    background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-gold)) 50%, rgb(var(--color-primary)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   SPLIDE SLIDER STYLES
   ======================================== */
.hero-splide .splide__track,
.hero-splide .splide__list {
    height: 100%;
}

/* ========================================
   STOREFRONT HERO
   Merchant content and editor settings are rendered by slider.blade.php.
   This layer only controls the responsive presentation.
   ======================================== */
.elegance-hero-section {
    --elegance-hero-height: clamp(520px, 43vw, 620px);
    padding-block-start: 12px;
    padding-inline: 24px;
}

.elegance-hero-section--large { --elegance-hero-height: 700px; }
.elegance-hero-section--medium { --elegance-hero-height: 500px; }
.elegance-hero-section--small { --elegance-hero-height: 400px; }

.elegance-hero-shell {
    position: relative;
    width: 100%;
    max-width: 1536px;
    height: var(--elegance-hero-height);
    margin-inline: auto;
    overflow: hidden;
    border-radius: 28px;
    background: #17191f;
    box-shadow: 0 18px 48px rgb(21 24 31 / 0.17);
    isolation: isolate;
}

.elegance-hero {
    --elegance-hero-arrow-offset: 24px;
}

.elegance-hero,
.elegance-hero__slide,
.elegance-hero__media,
.elegance-hero__media picture,
.elegance-hero__media img,
.elegance-hero__media video,
.elegance-hero__embed {
    width: 100%;
    height: 100%;
}

.elegance-hero__slide {
    position: relative;
    overflow: hidden;
    background: #272932;
    color: #fff;
}

.elegance-hero__media,
.elegance-hero__media picture,
.elegance-hero__media img,
.elegance-hero__media video,
.elegance-hero__embed {
    position: absolute;
    inset: 0;
    display: block;
}

.elegance-hero__media {
    overflow: hidden;
}

.elegance-hero__media img,
.elegance-hero__media video {
    object-fit: cover;
    object-position: center;
}

.elegance-hero__media img {
    transition: transform 8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.elegance-hero__slide.is-active .elegance-hero__media img {
    transform: scale(1.035);
}

.elegance-hero__embed {
    overflow: hidden;
}

.elegance-hero__embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    min-width: 100%;
    height: 56.25vw;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

.elegance-hero__video-poster {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.elegance-hero__video-poster.is-loaded {
    opacity: 0;
}

.elegance-hero__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(0deg, rgb(8 11 17 / 0.9) 0%, rgb(8 11 17 / 0.62) 27%, rgb(8 11 17 / 0.2) 56%, transparent 80%);
    pointer-events: none;
}

.elegance-hero__overlay[data-alignment="left"] {
    background:
        linear-gradient(90deg, rgb(8 11 17 / 0.35), transparent 64%),
        linear-gradient(0deg, rgb(8 11 17 / 0.9) 0%, rgb(8 11 17 / 0.58) 28%, transparent 78%);
}

.elegance-hero__overlay[data-alignment="right"] {
    background:
        linear-gradient(270deg, rgb(8 11 17 / 0.35), transparent 64%),
        linear-gradient(0deg, rgb(8 11 17 / 0.9) 0%, rgb(8 11 17 / 0.58) 28%, transparent 78%);
}

.elegance-hero__content {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    padding: 0 66px 72px;
    pointer-events: none;
}

.elegance-hero__copy {
    width: fit-content;
    max-width: min(720px, 72%);
    margin-left: 0;
    margin-right: auto;
    color: #fff;
    text-align: left;
    text-shadow: 0 3px 24px rgb(0 0 0 / 0.34);
    pointer-events: auto;
}

.elegance-hero__copy::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 13px;
    margin-left: 0;
    margin-right: auto;
    border-radius: 999px;
    background: rgb(var(--color-primary));
    box-shadow: 0 3px 14px rgb(var(--color-primary) / 0.35);
}

.elegance-hero__content[data-alignment="right"] .elegance-hero__copy {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}

.elegance-hero__content[data-alignment="center"] .elegance-hero__copy {
    margin-inline: auto;
    text-align: center;
}

.elegance-hero__content[data-alignment="center"] .elegance-hero__copy::before {
    margin-left: auto;
    margin-right: auto;
}

.elegance-hero__content[data-alignment="right"] .elegance-hero__copy::before {
    margin-left: auto;
    margin-right: 0;
}

.elegance-hero__copy h2 {
    width: fit-content;
    max-width: 15ch;
    margin: 0;
    margin-right: auto;
    color: inherit;
    font-size: clamp(46px, 4.6vw, 66px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.elegance-hero__content[data-alignment="center"] .elegance-hero__copy h2 {
    margin-left: auto;
    margin-right: auto;
}

.elegance-hero__content[data-alignment="right"] .elegance-hero__copy h2 {
    margin-left: auto;
    margin-right: 0;
}

.elegance-hero__copy p {
    width: fit-content;
    max-width: 42ch;
    margin: 9px 0 0;
    margin-right: auto;
    color: rgb(255 255 255 / 0.84);
    font-size: 17px;
    line-height: 1.8;
}

.elegance-hero__content[data-alignment="center"] .elegance-hero__copy p {
    margin-left: auto;
    margin-right: auto;
    margin-top: 9px;
}

.elegance-hero__content[data-alignment="right"] .elegance-hero__copy p {
    margin-left: auto;
    margin-right: 0;
}

.elegance-hero__actions {
    display: flex;
    width: fit-content;
    margin: 17px 0 0;
    margin-right: auto;
    justify-content: flex-start;
}

.elegance-hero__content[data-alignment="right"] .elegance-hero__actions {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
}

.elegance-hero__content[data-alignment="center"] .elegance-hero__actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.elegance-hero__cta {
    display: inline-flex;
    max-width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 23px;
    border: 1px solid rgb(var(--color-primary));
    border-radius: 13px;
    background: rgb(var(--color-primary));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 25px rgb(var(--color-primary) / 0.31);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.elegance-hero__cta span {
    overflow-wrap: anywhere;
}

.elegance-hero__cta:hover {
    color: #fff;
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 13px 31px rgb(var(--color-primary) / 0.42);
}

.elegance-hero__cta:focus-visible {
    outline: 3px solid rgb(255 255 255 / 0.95);
    outline-offset: 3px;
}

.elegance-hero__cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

[dir="rtl"] .elegance-hero__cta svg {
    transform: rotate(180deg);
}

.elegance-splide.elegance-hero .splide__arrow {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(255 255 255 / 0.4);
    background: rgb(13 17 24 / 0.34);
    color: #fff;
    box-shadow: 0 8px 22px rgb(15 23 42 / 0.14);
    opacity: 1;
    z-index: 4;
    backdrop-filter: blur(12px);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.elegance-splide.elegance-hero .splide__arrow--prev {
    right: auto;
    left: var(--elegance-hero-arrow-offset);
}

.elegance-splide.elegance-hero .splide__arrow--next {
    right: var(--elegance-hero-arrow-offset);
    left: auto;
}

.elegance-splide.elegance-hero .splide__arrows--rtl .splide__arrow--prev {
    right: var(--elegance-hero-arrow-offset);
    left: auto;
}

.elegance-splide.elegance-hero .splide__arrows--rtl .splide__arrow--next {
    right: auto;
    left: var(--elegance-hero-arrow-offset);
}

.elegance-splide.elegance-hero .splide__arrow:hover {
    background: rgb(13 17 24 / 0.56);
    transform: translateY(-50%) scale(1.05);
}

.elegance-splide.elegance-hero .splide__arrow svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.elegance-splide.elegance-hero .splide__pagination {
    bottom: 27px;
    gap: 6px;
}

.elegance-splide.elegance-hero[data-pagination="true"] .splide__pagination {
    display: flex;
}

.elegance-splide.elegance-hero .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.52);
    opacity: 1;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.elegance-splide.elegance-hero .splide__pagination__page.is-active {
    width: 26px;
    border-radius: 999px;
    background: #fff;
    transform: none;
}

.elegance-hero__toggle,
.elegance-hero__count {
    position: absolute;
    z-index: 4;
    bottom: 20px;
}

.elegance-hero__toggle {
    inset-inline-end: 70px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 50%;
    background: rgb(13 17 24 / 0.38);
    color: #fff;
    backdrop-filter: blur(12px);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.elegance-hero__toggle:hover {
    background: rgb(13 17 24 / 0.6);
    transform: scale(1.05);
}

.elegance-hero__toggle:focus-visible {
    outline: 3px solid rgb(255 255 255 / 0.95);
    outline-offset: 2px;
}

.elegance-hero__toggle svg {
    width: 15px;
    height: 15px;
}

.elegance-hero__toggle .splide__toggle__play { display: inline-flex; }
.elegance-hero__toggle .splide__toggle__pause { display: none; }
.elegance-hero__toggle.is-active .splide__toggle__play { display: none; }
.elegance-hero__toggle.is-active .splide__toggle__pause { display: inline-flex; }

.elegance-hero__count {
    inset-inline-end: 24px;
    min-width: 38px;
    color: #fff;
    font: 700 10px/38px Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 4px #000;
    pointer-events: none;
}

.elegance-splide .splide__arrow {
    background: rgba(255,255,255,0.95);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgb(var(--color-primary) / 0.3);
    transition: all 0.3s ease;
    opacity: 1;
}
.elegance-splide .splide__arrow:hover {
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-gold)));
    transform: scale(1.1);
}
.elegance-splide .splide__arrow:hover svg { fill: white; }
.elegance-splide .splide__arrow svg {
    fill: rgb(var(--color-primary));
    width: 18px;
    height: 18px;
}
.elegance-splide .splide__pagination__page {
    background: rgb(var(--color-primary));
    opacity: 0.4;
    width: 12px;
    height: 12px;
    transition: all 0.3s ease;
}
.elegance-splide .splide__pagination__page.is-active {
    opacity: 1;
    width: 30px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--color-gold)));
    transform: scale(1);
}

/* Bug fix 4.5 (C_LCP_DELAY): paint the first slide BEFORE Splide mounts
   so the LCP element does not wait for ~1,860ms of JS initialisation.
   Once Splide adds the `is-initialized` class on the .splide root these
   rules stop matching and the library takes over the layout (flex track,
   transform-based slide positioning).

   The rule is universal (.splide:not(.is-initialized)) per task 4.5: it
   covers the hero slider for LCP. The products/category/bestseller
   sliders still get a usable skeleton because the first slide stays
   visible at full width via the products-splide width rules below; the
   remaining cards appear the instant Splide mounts (task 6.2 mounts on
   IntersectionObserver, so this gap is sub-frame in practice).

   _Preservation 3.2/3.3: Splide invariants (autoplay, RTL, loop,
   pagination, slide count) are unchanged because Splide replaces these
   styles the moment it mounts. */
.splide:not(.is-initialized) .splide__list { display: block; }
.splide:not(.is-initialized) .splide__slide:not(:first-child) { display: none; }
.splide:not(.is-initialized) .splide__slide { flex-shrink: 0; }
.products-splide:not(.is-initialized) .splide__slide { width: 100%; }
@media (min-width: 576px) {
    .products-splide:not(.is-initialized) .splide__slide { width: 50%; }
}
@media (min-width: 1024px) {
    .products-splide:not(.is-initialized) .splide__slide { width: 33.333%; }
}
@media (min-width: 1280px) {
    .products-splide:not(.is-initialized) .splide__slide { width: 25%; }
}

/* Compact category cards keep the section dense without using the merchant's
   fixed grid-column setting. The browser fills every row with as many cards
   as the available width can comfortably hold. */
.storefront-categories--compact {
    padding-block: clamp(3.25rem, 6vw, 5rem);
}

.storefront-categories--compact .storefront-categories__header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.storefront-category-grid--compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 0.75rem;
}

.storefront-category-grid--compact > * {
    min-width: 0;
}

.storefront-category-grid--compact .storefront-category-compact {
    height: 100%;
}

.storefront-category-compact {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 4.75rem;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    padding: 0.625rem;
    border: 1px solid rgb(var(--color-secondary) / 0.09);
    border-radius: 0.875rem;
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 2px 8px rgb(var(--color-secondary) / 0.045);
    color: rgb(var(--color-secondary));
    text-align: start;
    transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.storefront-category-compact:hover {
    border-color: rgb(var(--color-primary) / 0.24);
    box-shadow: 0 6px 16px rgb(var(--color-secondary) / 0.075);
    color: rgb(var(--color-primary));
    transform: translateY(-1px);
}

.storefront-category-compact:active {
    transform: scale(0.99);
}

.storefront-category-compact:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 3px;
}

.storefront-category-compact__media {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    place-items: center;
    overflow: hidden;
    border-radius: 0.6875rem;
    background: rgb(var(--color-primary) / 0.055);
}

.storefront-category-compact__media img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgb(var(--color-primary) / 0.04);
    object-fit: cover;
    transition: transform 300ms ease;
}

.storefront-category-compact:hover .storefront-category-compact__media img {
    transform: scale(1.035);
}

.storefront-category-compact__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: inherit;
    background: rgb(var(--color-primary) / 0.055);
    color: rgb(var(--color-primary) / 0.55);
}

.storefront-category-compact__placeholder svg {
    width: 1.35rem;
    height: 1.35rem;
}

.storefront-category-compact__name {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.categories-splide--compact .splide__track {
    padding-block: 0.25rem 1rem;
}

.categories-splide--compact .storefront-category-slide--compact {
    min-width: 0;
}

.categories-splide--compact:not(.is-initialized) .splide__slide {
    width: 9.5rem;
}

@media (min-width: 641px) {
    .categories-splide--compact:not(.is-initialized) .splide__slide {
        width: 10.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-category-compact,
    .storefront-category-compact__media img {
        transition: none;
    }
}

@media (max-width: 1199px) {
    .elegance-hero-section {
        --elegance-hero-height: clamp(460px, 55vw, 580px);
        padding-block-start: 10px;
        padding-inline: 16px;
    }

    .elegance-hero-section--large { --elegance-hero-height: 600px; }
    .elegance-hero-section--medium { --elegance-hero-height: 500px; }
    .elegance-hero-section--small { --elegance-hero-height: 400px; }

    .elegance-hero { --elegance-hero-arrow-offset: 20px; }
    .elegance-hero-shell { border-radius: 23px; }
    .elegance-hero__content { padding: 0 42px 63px; }
    .elegance-hero__copy { width: fit-content; max-width: min(680px, 78%); }
    .elegance-hero__copy h2 { font-size: clamp(40px, 5.8vw, 52px); }
    .elegance-hero__copy p { font-size: 15px; }
    .elegance-splide.elegance-hero .splide__arrow { width: 46px; height: 46px; }
}

@media (max-width: 767px) {
    .elegance-hero-section {
        --elegance-hero-height: clamp(340px, 105vw, 420px);
        padding-block-start: 8px;
        padding-inline: 10px;
    }

    .elegance-hero-section--large { --elegance-hero-height: clamp(360px, 112vw, 450px); }
    .elegance-hero-section--medium { --elegance-hero-height: clamp(310px, 90vw, 370px); }
    .elegance-hero-section--small { --elegance-hero-height: clamp(290px, 82vw, 340px); }

    .elegance-hero { --elegance-hero-arrow-offset: 12px; }
    .elegance-hero-shell { border-radius: 19px; }
    .elegance-hero__overlay,
    .elegance-hero__overlay[data-alignment="left"],
    .elegance-hero__overlay[data-alignment="right"] {
        background: linear-gradient(0deg, rgb(8 11 17 / 0.93) 0%, rgb(8 11 17 / 0.67) 32%, rgb(8 11 17 / 0.18) 65%, transparent 82%);
    }
    .elegance-hero__content { padding: 0 18px 58px; }
    .elegance-hero__copy { width: fit-content; max-width: 100%; }
    .elegance-hero__copy::before { width: 28px; height: 2px; margin-bottom: 9px; }
    .elegance-hero__copy h2 { max-width: 15ch; font-size: clamp(24px, 7.4vw, 31px); line-height: 1.25; }
    .elegance-hero__copy p { max-width: 34ch; margin-top: 6px; font-size: 12px; line-height: 1.65; }
    .elegance-hero__content[data-alignment="center"] .elegance-hero__copy p { margin-top: 6px; }
    .elegance-hero__actions { margin-top: 12px; }
    .elegance-hero__cta { min-height: 44px; gap: 8px; padding: 8px 17px; border-radius: 11px; font-size: 12px; }
    .elegance-splide.elegance-hero .splide__arrows { pointer-events: none; }
    .elegance-splide.elegance-hero .splide__arrow { width: 44px; height: 44px; pointer-events: auto; }
    .elegance-splide.elegance-hero .splide__pagination { bottom: 18px; }
    .elegance-hero__toggle { inset-inline-end: 14px; bottom: 12px; width: 34px; height: 34px; }
    .elegance-hero__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .elegance-hero__media img,
    .elegance-hero__video-poster,
    .elegance-hero__cta,
    .elegance-splide.elegance-hero .splide__arrow,
    .elegance-hero__toggle {
        transition: none;
    }

    .elegance-hero__slide.is-active .elegance-hero__media img {
        transform: none;
    }
}

/* ========================================
   FORM INPUTS
   ======================================== */
.input-elegant {
    border: 2px solid #e8c4c4;
    transition: all 0.3s ease;
}
.input-elegant:focus {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.1);
}

/* ========================================
   BADGES
   ======================================== */
.badge-elegant {
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-gold)));
    color: white;
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ========================================
   WISHLIST HEART
   ======================================== */
.heart-beat {
    animation: heartBeat 0.3s ease-in-out;
}
@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ========================================
   CARD HOVER (categories, features)
   ======================================== */
.card-elegant {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-elegant:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ========================================
   ANNOUNCEMENT BAR — Accessibility Contrast Fix
   Bug fix 8.2 (C_A11Y_CONTRAST): The original bg-primary + text-white
   combination does not meet WCAG 2.1 AA contrast ratio (≥ 4.5:1).
   This scoped class overrides the background/foreground ONLY on the
   announcement bar without touching bg-primary globally (preservation 3.1).
   #1a1a2e on #ffffff → contrast ratio ≈ 15.4:1 (well above 4.5:1).
   ======================================== */
.announcement-bar {
    background: var(--announcement-bg, #1a1a2e) !important;
    color: var(--announcement-fg, #ffffff) !important;
}

/* ========================================
   STOREFRONT SHELL
   Shared responsive spacing and stacking tokens for the fixed header,
   mobile navigation, sheets, drawers, dialogs, and floating actions.
   Component business logic remains independent from these presentation
   tokens; this layer only prevents visual gaps and collisions.
   ======================================== */
:root {
    --site-header-height: 66px;
    --shell-mobile-nav-height: 5rem;
    --storefront-floating-control-size: 44px;
    --shell-mobile-content-clearance: calc(
        var(--shell-mobile-nav-height) + max(0.5rem, env(safe-area-inset-bottom, 0px))
    );

    --z-shell-content: 10;
    --z-shell-navigation: 30;
    --z-shell-sticky: 40;
    --z-shell-fab: 50;
    --z-shell-popover: 60;
    --z-shell-sheet: 70;
    --z-shell-drawer: 80;
    --z-shell-modal: 90;
    --z-shell-critical: 100;
}

:root:has(.storefront-announcement-bar) {
    --site-header-height: 102px;
}

@media (min-width: 768px) {
    :root {
        --site-header-height: 110px;
        --storefront-floating-control-size: 46px;
    }

    :root:has(.storefront-announcement-bar) {
        --site-header-height: 146px;
    }
}

.storefront-shell-header {
    z-index: var(--z-shell-navigation);
}

.storefront-shell-main {
    z-index: var(--z-shell-content);
    padding-bottom: var(--shell-mobile-content-clearance);
}

.storefront-focus-mode .storefront-shell-main {
    padding-bottom: 0;
}

.storefront-focus-mode .storefront-floating-action {
    display: none !important;
}

.storefront-responsive-header {
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 1px 0 rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.035);
}

.storefront-shell-container {
    max-width: var(--storefront-layout-max-width);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .storefront-shell-container {
        padding-inline: var(--storefront-layout-gutter);
    }
}

.storefront-mobile-header-action {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-mobile-header-action:active {
    background: rgb(var(--color-primary) / 0.09);
    color: rgb(var(--color-primary));
}

@media (hover: hover) {
    .storefront-mobile-header-action:hover {
        background: rgb(var(--color-primary) / 0.06);
        color: rgb(var(--color-primary));
    }
}

[data-storefront-persistent-search] {
    /* Lift the isolated search context above the following navigation row. */
    position: relative;
    z-index: var(--z-shell-popover);
    isolation: isolate;
}

.storefront-search-shell,
.storefront-mobile-search-launch {
    --storefront-search-surface: rgb(255 255 255 / 0.95);
    --storefront-search-border: rgb(var(--color-primary) / 0.3);
    --storefront-search-shadow: 0 2px 10px rgb(15 23 42 / 0.06);
    --storefront-search-focus-border: rgb(var(--color-primary) / 0.7);
    --storefront-search-focus-shadow: 0 4px 18px rgb(15 23 42 / 0.1);
    --storefront-search-action: rgb(var(--color-primary));
}

.storefront-desktop-search-results {
    inline-size: max(100%, 36rem);
    max-inline-size: calc(100vw - 2rem);
    scroll-padding-block: 3rem 4rem;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary) / 0.3) transparent;
}

.storefront-desktop-search-feedback {
    display: flex;
    min-height: 9rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.25rem;
    color: rgb(75 85 99);
    font-size: 0.875rem;
    font-weight: 650;
    text-align: center;
}

.storefront-desktop-search-feedback__icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    flex: 0 0 1.75rem;
    border-radius: 9999px;
    background: rgb(var(--color-primary) / 0.1);
    color: rgb(var(--color-primary));
    font-size: 0.75rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    /* Keep the desktop hierarchy at every non-phone width, without a tablet-only mode. */
    .storefront-desktop-header {
        column-gap: clamp(10px, 1.6vw, 20px);
    }

    .storefront-desktop-brand {
        max-width: clamp(112px, 15vw, 190px);
    }

    .storefront-desktop-utilities {
        gap: clamp(4px, 0.6vw, 8px);
    }

    [data-storefront-persistent-search] .storefront-search-shell--header {
        border-color: var(--storefront-search-border);
        background: var(--storefront-search-surface);
        box-shadow: var(--storefront-search-shadow);
    }

    [data-storefront-persistent-search] .storefront-search-shell--header:focus-within {
        border-color: var(--storefront-search-focus-border);
        background: #fff;
        box-shadow: var(--storefront-search-focus-shadow);
    }

    [data-storefront-persistent-search] .storefront-search-submit--header {
        width: 48px;
        border-inline-end: 1px solid rgb(255 255 255 / 0.2);
        background: var(--storefront-search-action);
        box-shadow: none;
    }

    [data-storefront-persistent-search] .storefront-search-submit--header svg {
        width: 20px;
        height: 20px;
    }

    [data-storefront-persistent-search] .storefront-search-shell--header .storefront-search-input {
        padding-inline-start: 3.5rem;
    }
}

.storefront-desktop-nav-links {
    -ms-overflow-style: none;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 0.75rem;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.storefront-desktop-nav-links::-webkit-scrollbar {
    width: 0;
    height: 0;
}

@media (min-width: 768px) {
    [data-storefront-desktop-navigation] {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        border-top: 1px solid rgb(15 23 42 / 0.14);
        background: rgb(255 255 255 / 0.98);
    }
}

.storefront-desktop-category-slot {
    display: flex;
    align-items: center;
    height: 44px;
    margin-inline-end: 0;
    padding-inline-end: 0;
    border-inline-end: 0;
}

.storefront-desktop-nav-trigger,
.storefront-desktop-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding-inline: 0.875rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgb(var(--color-secondary));
    font-weight: 650;
    scroll-snap-align: start;
    white-space: nowrap;
    transition: color 180ms ease,
                background-color 180ms ease,
                opacity 180ms ease;
}

.storefront-desktop-nav-trigger[aria-expanded="true"],
.storefront-desktop-nav-trigger[aria-current="page"],
.storefront-desktop-nav-link[aria-current="page"] {
    background: transparent;
    box-shadow: none;
    color: rgb(var(--color-primary));
    font-weight: 750;
}

.storefront-desktop-nav-trigger::after,
.storefront-desktop-nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    left: 50%;
    width: calc(100% - 1.5rem);
    height: 3px;
    border-radius: 9999px;
    background: rgb(var(--color-primary));
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.storefront-desktop-nav-trigger[aria-expanded="true"]::after,
.storefront-desktop-nav-trigger[aria-current="page"]::after,
.storefront-desktop-nav-link[aria-current="page"]::after {
    transform: translateX(-50%) scaleX(1);
}

@media (hover: hover) {
    .storefront-desktop-nav-trigger:not([aria-expanded="true"]):hover,
    .storefront-desktop-nav-link:not([aria-current="page"]):hover {
        background: transparent;
        color: rgb(var(--color-primary));
    }
}

/* Desktop category explorer: wide, tenant-branded, and isolated from phone UI. */
.storefront-desktop-category-trigger {
    gap: 0.45rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
}

.storefront-desktop-category-trigger__menu {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
}

.storefront-desktop-category-trigger__chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 0.875rem;
    transition: transform 180ms ease;
}

.storefront-desktop-category-trigger__chevron.is-open {
    transform: rotate(180deg);
}

.storefront-desktop-category-trigger[aria-expanded="true"] {
    background: linear-gradient(180deg, transparent 40%, rgb(var(--color-primary) / 0.065));
}

.storefront-desktop-category-trigger[aria-expanded="true"]::after {
    width: calc(100% - 0.5rem);
    border-radius: 999px 999px 0 0;
}

@media (min-width: 768px) {
    [data-storefront-desktop-navigation] {
        position: relative;
        overflow: visible;
    }

    .storefront-desktop-mega-menu {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        z-index: var(--z-shell-popover);
        padding-block-start: 0;
    }

    html.storefront-desktop-mega-open .storefront-floating-action,
    html.storefront-desktop-mega-open #pwa-install-btn,
    html.storefront-desktop-mega-open #pwa-push-prompt,
    html.storefront-desktop-mega-open #pwa-push-settings-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .storefront-desktop-mega-menu__surface {
        --mega-border: rgb(var(--color-primary) / 0.13);
        --mega-soft: rgb(var(--color-primary) / 0.055);
        --mega-softer: rgb(var(--color-primary) / 0.025);
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        /* Reserve the measured header height and a little space below the menu. */
        max-height: calc(100vh - var(--site-header-height, 146px) - 1rem);
        max-height: calc(100dvh - var(--site-header-height, 146px) - 1rem);
        overflow: hidden;
        border: 1px solid var(--mega-border);
        border-block-start: 0;
        border-radius: 0 0 1.375rem 1.375rem;
        background: #fff;
        box-shadow: 0 24px 64px rgb(15 23 42 / 0.16), 0 8px 22px rgb(15 23 42 / 0.075);
        isolation: isolate;
    }

    .storefront-desktop-mega-menu__surface::before {
        content: '';
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 2;
        height: 2px;
        background: linear-gradient(90deg, rgb(var(--color-primary) / 0.22), rgb(var(--color-primary) / 0.78) 50%, rgb(var(--color-primary) / 0.22));
        box-shadow: 0 1px 0 rgb(255 255 255 / 0.92);
        pointer-events: none;
    }

    .storefront-desktop-mega-menu__header {
        display: flex;
        min-height: 4.25rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.875rem 1.25rem;
        border-block-end: 1px solid rgb(15 23 42 / 0.075);
        background: linear-gradient(135deg, var(--mega-soft), #fff 48%, var(--mega-softer));
    }

    .storefront-desktop-mega-menu__title {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.75rem;
        color: rgb(var(--color-secondary));
    }

    .storefront-desktop-mega-menu__title > span:last-child {
        display: grid;
        min-width: 0;
        gap: 0.15rem;
    }

    .storefront-desktop-mega-menu__title strong {
        font-size: 0.975rem;
        font-weight: 800;
        line-height: 1.45;
    }

    .storefront-desktop-mega-menu__title small {
        color: rgb(100 116 139);
        font-size: 0.75rem;
        line-height: 1.45;
    }

    .storefront-desktop-mega-menu__title-icon {
        display: inline-flex;
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 2.25rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(var(--color-primary) / 0.16);
        border-radius: 0.75rem;
        background: rgb(var(--color-primary) / 0.09);
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-mega-menu__title-icon svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .storefront-desktop-mega-menu__all-link {
        display: inline-flex;
        min-height: 2.5rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding-inline: 0.875rem;
        border: 1px solid rgb(var(--color-primary) / 0.2);
        border-radius: 0.75rem;
        background: #fff;
        color: rgb(var(--color-primary));
        font-size: 0.775rem;
        font-weight: 750;
        transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
    }

    .storefront-desktop-mega-menu__all-link svg,
    .storefront-desktop-mega-category-card__arrow,
    .storefront-desktop-mega-group__arrow,
    .storefront-desktop-mega-spotlight__copy a svg {
        width: 0.95rem;
        height: 0.95rem;
        flex: 0 0 0.95rem;
    }

    .storefront-desktop-mega-menu__all-link:hover {
        border-color: rgb(var(--color-primary) / 0.34);
        background: rgb(var(--color-primary) / 0.07);
        transform: translateY(-1px);
    }

    .storefront-desktop-mega-menu__body {
        display: grid;
        grid-template-columns: clamp(13rem, 21vw, 16.5rem) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
        max-height: min(34rem, 68vh);
    }

    .storefront-desktop-mega-menu__roots {
        display: flex;
        min-height: 0;
        flex-direction: column;
        border-inline-end: 1px solid rgb(15 23 42 / 0.08);
        background: linear-gradient(180deg, rgb(var(--color-primary) / 0.045), rgb(248 250 252 / 0.76));
    }

    .storefront-desktop-mega-menu__roots-label {
        padding: 0.875rem 1rem 0.5rem;
        color: rgb(100 116 139);
        font-size: 0.6875rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .storefront-desktop-mega-menu__roots-scroll,
    .storefront-desktop-mega-menu__content,
    .storefront-desktop-mega-menu__category-grid {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-color: rgb(var(--color-primary) / 0.32) transparent;
        scrollbar-width: thin;
    }

    .storefront-desktop-mega-menu__roots-scroll {
        display: grid;
        align-content: start;
        gap: 0.35rem;
        padding: 0.25rem 0.625rem 0.875rem;
    }

    .storefront-desktop-mega-menu__roots-scroll::-webkit-scrollbar,
    .storefront-desktop-mega-menu__content::-webkit-scrollbar,
    .storefront-desktop-mega-menu__category-grid::-webkit-scrollbar {
        width: 4px;
    }

    .storefront-desktop-mega-menu__roots-scroll::-webkit-scrollbar-thumb,
    .storefront-desktop-mega-menu__content::-webkit-scrollbar-thumb,
    .storefront-desktop-mega-menu__category-grid::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgb(var(--color-primary) / 0.28);
    }

    .storefront-desktop-mega-root {
        position: relative;
        display: grid;
        width: 100%;
        min-height: 3.5rem;
        grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
        align-items: center;
        gap: 0.625rem;
        padding: 0.45rem 0.625rem;
        border: 1px solid transparent;
        border-radius: 0.875rem;
        background: transparent;
        color: rgb(var(--color-secondary));
        text-align: start;
        transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
    }

    .storefront-desktop-mega-root::before {
        content: '';
        position: absolute;
        inset-block: 0.65rem;
        inset-inline-start: 0;
        width: 3px;
        border-radius: 999px;
        background: rgb(var(--color-primary));
        opacity: 0;
        transform: scaleY(0.45);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .storefront-desktop-mega-root:hover,
    .storefront-desktop-mega-root.is-active {
        border-color: rgb(var(--color-primary) / 0.14);
        background: #fff;
        color: rgb(var(--color-primary));
        box-shadow: 0 8px 22px rgb(15 23 42 / 0.065);
    }

    .storefront-desktop-mega-root.is-active::before {
        opacity: 1;
        transform: scaleY(1);
    }

    .storefront-desktop-mega-root:focus-visible,
    .storefront-desktop-mega-group a:focus-visible,
    .storefront-desktop-mega-group button:focus-visible,
    .storefront-desktop-mega-menu a:focus-visible {
        outline: 2px solid rgb(var(--color-primary));
        outline-offset: 2px;
    }

    .storefront-desktop-mega-root__art,
    .storefront-desktop-mega-root__art > span {
        display: inline-flex;
        width: 2.25rem;
        height: 2.25rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgb(var(--color-primary) / 0.11);
        border-radius: 0.75rem;
        background: rgb(var(--color-primary) / 0.075);
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-mega-root__art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-desktop-mega-root__art svg {
        width: 1rem;
        height: 1rem;
    }

    .storefront-desktop-mega-root__copy {
        display: grid;
        min-width: 0;
        gap: 0.1rem;
    }

    .storefront-desktop-mega-root__copy strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.79rem;
        font-weight: 750;
        line-height: 1.4;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .storefront-desktop-mega-root__copy small {
        overflow: hidden;
        color: rgb(100 116 139);
        font-size: 0.65rem;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-desktop-mega-root__arrow {
        width: 0.95rem;
        height: 0.95rem;
        color: rgb(148 163 184);
        transition: color 160ms ease, transform 160ms ease;
    }

    .storefront-desktop-mega-root.is-active .storefront-desktop-mega-root__arrow {
        color: rgb(var(--color-primary));
        transform: translateX(-2px);
    }

    .storefront-desktop-mega-menu__content {
        container-type: inline-size;
        padding: 1rem;
        background: #fff;
    }

    .storefront-desktop-mega-panel {
        min-height: 100%;
    }

    .storefront-desktop-mega-spotlight {
        position: relative;
        display: grid;
        min-height: 7.5rem;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        overflow: hidden;
        padding: 1rem 1.125rem;
        border: 1px solid rgb(var(--color-primary) / 0.12);
        border-radius: 1.125rem;
        background: linear-gradient(120deg, rgb(var(--color-primary) / 0.11), rgb(var(--color-primary) / 0.035) 52%, rgb(var(--color-cream) / 0.42));
    }

    .storefront-desktop-mega-spotlight.has-artwork {
        grid-template-columns: minmax(0, 1fr) clamp(6.75rem, 14cqi, 9rem);
        gap: 1rem;
    }

    .storefront-desktop-mega-spotlight::after {
        content: '';
        position: absolute;
        inset-block-start: -4rem;
        inset-inline-end: 16%;
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        background: rgb(var(--color-primary) / 0.055);
        pointer-events: none;
    }

    .storefront-desktop-mega-spotlight__copy {
        position: relative;
        z-index: 1;
        min-width: 0;
    }

    .storefront-desktop-mega-spotlight__copy > span {
        display: block;
        margin-block-end: 0.2rem;
        color: rgb(var(--color-primary));
        font-size: 0.65rem;
        font-weight: 800;
    }

    .storefront-desktop-mega-spotlight__copy h3 {
        margin: 0;
        color: rgb(var(--color-secondary));
        font-size: clamp(1rem, 2.6cqi, 1.3rem);
        font-weight: 850;
        line-height: 1.4;
    }

    .storefront-desktop-mega-spotlight__copy p {
        margin-block: 0.2rem 0.65rem;
        color: rgb(71 85 105);
        font-size: 0.72rem;
        line-height: 1.55;
    }

    .storefront-desktop-mega-spotlight__copy a {
        display: inline-flex;
        min-height: 2.25rem;
        align-items: center;
        gap: 0.35rem;
        padding-inline: 0.75rem;
        border-radius: 0.7rem;
        background: rgb(var(--color-primary));
        color: #fff;
        font-size: 0.7rem;
        font-weight: 750;
        box-shadow: 0 8px 18px rgb(var(--color-primary) / 0.18);
        transition: filter 160ms ease, transform 160ms ease;
    }

    .storefront-desktop-mega-spotlight__copy a:hover {
        filter: brightness(0.96);
        transform: translateY(-1px);
    }

    .storefront-desktop-mega-spotlight__art {
        position: relative;
        z-index: 1;
        height: 5.75rem;
        overflow: hidden;
        border: 2px solid rgb(255 255 255 / 0.78);
        border-radius: 0.95rem;
        background: #fff;
        box-shadow: 0 10px 28px rgb(15 23 42 / 0.12);
    }

    .storefront-desktop-mega-spotlight__art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-desktop-mega-panel__section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block: 1rem 0.625rem;
    }

    .storefront-desktop-mega-panel__section-heading h4 {
        margin: 0;
        color: rgb(var(--color-secondary));
        font-size: 0.78rem;
        font-weight: 800;
    }

    .storefront-desktop-mega-groups {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        align-items: start;
        gap: 0.75rem;
    }

    .storefront-desktop-mega-group {
        min-width: 0;
        padding: 0.75rem;
        border: 1px solid rgb(15 23 42 / 0.075);
        border-radius: 0.95rem;
        background: rgb(248 250 252 / 0.72);
        transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .storefront-desktop-mega-group:hover {
        border-color: rgb(var(--color-primary) / 0.2);
        background: #fff;
        box-shadow: 0 12px 28px rgb(15 23 42 / 0.075);
        transform: translateY(-2px);
    }

    .storefront-desktop-mega-group__heading {
        display: grid;
        min-width: 0;
        grid-template-columns: 2rem minmax(0, 1fr) 0.9rem;
        align-items: center;
        gap: 0.5rem;
        color: rgb(var(--color-secondary));
    }

    .storefront-desktop-mega-group__heading strong {
        overflow: hidden;
        font-size: 0.76rem;
        font-weight: 800;
        line-height: 1.45;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-desktop-mega-group__art,
    .storefront-desktop-mega-group__art > span {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 0.65rem;
        background: rgb(var(--color-primary) / 0.09);
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-mega-group__art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-desktop-mega-group__art svg {
        width: 0.9rem;
        height: 0.9rem;
    }

    .storefront-desktop-mega-group__arrow {
        color: rgb(148 163 184);
        transition: color 160ms ease, transform 160ms ease;
    }

    .storefront-desktop-mega-group__heading:hover,
    .storefront-desktop-mega-group__heading:hover .storefront-desktop-mega-group__arrow {
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-mega-group__heading:hover .storefront-desktop-mega-group__arrow {
        transform: translateX(-2px);
    }

    .storefront-desktop-mega-group__links {
        display: grid;
        gap: 0.2rem;
        margin-block-start: 0.6rem;
        padding-inline-start: 2.5rem;
    }

    .storefront-desktop-mega-group__links a,
    .storefront-desktop-mega-group__browse {
        position: relative;
        display: block;
        padding-block: 0.22rem;
        color: rgb(100 116 139);
        font-size: 0.69rem;
        line-height: 1.5;
        transition: color 150ms ease, transform 150ms ease;
    }

    .storefront-desktop-mega-group__links a::before {
        content: '';
        position: absolute;
        inset-block-start: 0.75rem;
        inset-inline-start: -0.65rem;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgb(var(--color-primary) / 0.42);
    }

    .storefront-desktop-mega-group__links a:hover,
    .storefront-desktop-mega-group__browse:hover {
        color: rgb(var(--color-primary));
        transform: translateX(-2px);
    }

    .storefront-desktop-mega-group__browse {
        margin-block-start: 0.45rem;
        padding-inline-start: 2.5rem;
        color: rgb(var(--color-primary));
        font-weight: 700;
    }

    .storefront-desktop-mega-group__more {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        margin-block-start: 0.35rem;
        margin-inline-start: 2.5rem;
        border: 0;
        background: transparent;
        color: rgb(var(--color-primary));
        font-size: 0.66rem;
        font-weight: 750;
    }

    .storefront-desktop-mega-group__more svg {
        width: 0.75rem;
        height: 0.75rem;
        transition: transform 160ms ease;
    }

    .storefront-desktop-mega-group__more svg.is-open {
        transform: rotate(180deg);
    }

    .storefront-desktop-mega-panel__empty {
        display: grid;
        min-height: 9rem;
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.875rem;
        margin-block-start: 0.875rem;
        padding: 1rem;
        border: 1px dashed rgb(var(--color-primary) / 0.24);
        border-radius: 1rem;
        background: rgb(var(--color-primary) / 0.035);
    }

    .storefront-desktop-mega-panel__empty > span {
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.85rem;
        background: rgb(var(--color-primary) / 0.1);
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-mega-panel__empty svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .storefront-desktop-mega-panel__empty div {
        display: grid;
        min-width: 0;
        gap: 0.15rem;
    }

    .storefront-desktop-mega-panel__empty strong {
        color: rgb(var(--color-secondary));
        font-size: 0.85rem;
        font-weight: 800;
    }

    .storefront-desktop-mega-panel__empty p {
        margin: 0;
        color: rgb(100 116 139);
        font-size: 0.72rem;
    }

    .storefront-desktop-mega-panel__empty > a {
        display: inline-flex;
        min-height: 2.4rem;
        align-items: center;
        padding-inline: 0.8rem;
        border-radius: 0.7rem;
        background: rgb(var(--color-primary));
        color: #fff;
        font-size: 0.7rem;
        font-weight: 750;
    }

    .storefront-desktop-mega-menu__category-grid {
        display: grid;
        max-height: min(31rem, 68vh);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
        align-content: start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .storefront-desktop-mega-category-card {
        display: grid;
        min-height: 4.75rem;
        grid-template-columns: 3rem minmax(0, 1fr) 1rem;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem;
        border: 1px solid rgb(15 23 42 / 0.08);
        border-radius: 1rem;
        background: rgb(248 250 252 / 0.7);
        color: rgb(var(--color-secondary));
        transition: border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
    }

    .storefront-desktop-mega-category-card:hover {
        border-color: rgb(var(--color-primary) / 0.22);
        background: #fff;
        box-shadow: 0 12px 28px rgb(15 23 42 / 0.08);
        transform: translateY(-2px);
    }

    .storefront-desktop-mega-category-card__art,
    .storefront-desktop-mega-category-card__art > span {
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 0.85rem;
        background: rgb(var(--color-primary) / 0.08);
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-mega-category-card__art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-desktop-mega-category-card__art svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .storefront-desktop-mega-category-card > span:nth-child(2) {
        display: grid;
        min-width: 0;
        gap: 0.15rem;
    }

    .storefront-desktop-mega-category-card strong {
        overflow: hidden;
        font-size: 0.8rem;
        font-weight: 800;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-desktop-mega-category-card small {
        color: rgb(100 116 139);
        font-size: 0.68rem;
    }

    .storefront-desktop-mega-category-card__arrow {
        color: rgb(148 163 184);
    }

    [dir="rtl"] .storefront-desktop-mega-menu__all-link svg,
    [dir="rtl"] .storefront-desktop-mega-category-card__arrow,
    [dir="rtl"] .storefront-desktop-mega-group__arrow,
    [dir="rtl"] .storefront-desktop-mega-spotlight__copy a svg,
    [dir="rtl"] .storefront-desktop-mega-root__arrow {
        transform: rotate(180deg);
    }

    [dir="rtl"] .storefront-desktop-mega-root.is-active .storefront-desktop-mega-root__arrow,
    [dir="rtl"] .storefront-desktop-mega-group__heading:hover .storefront-desktop-mega-group__arrow {
        transform: rotate(180deg) translateX(-2px);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .storefront-desktop-mega-menu {
        width: 100vw;
        max-width: 100vw;
        inset-inline-start: calc(50% - 50vw);
        inset-inline-end: auto;
    }

    .storefront-desktop-mega-menu__surface {
        border-inline: 0;
        border-radius: 0 0 1rem 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .storefront-desktop-mega-menu__header {
        min-height: 3.875rem;
        padding-inline: 0.875rem;
    }

    .storefront-desktop-mega-menu__body {
        grid-template-columns: 13rem minmax(0, 1fr);
        max-height: min(31rem, 68vh);
    }

    .storefront-desktop-mega-menu__content {
        padding: 0.75rem;
    }

    .storefront-desktop-mega-spotlight.has-artwork {
        grid-template-columns: minmax(0, 1fr) 5.75rem;
    }

    .storefront-desktop-mega-spotlight__art {
        height: 5rem;
    }

    .storefront-desktop-mega-groups {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        gap: 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-desktop-mega-menu *,
    .storefront-desktop-category-trigger__chevron {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.storefront-mobile-menu-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184 / 0.55) transparent;
}

.storefront-mobile-menu-scroll::-webkit-scrollbar {
    width: 3px;
}

.storefront-mobile-menu-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.storefront-mobile-menu-scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(148 163 184 / 0.55);
}

.storefront-mobile-menu-scroll {
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   MOBILE NAVIGATION DRAWER
   Faithful implementation of the approved mobile drawer prototype.
   Merchant colors and storefront data replace prototype-only values.
   ======================================== */
.storefront-mobile-drawer-backdrop {
    background: rgb(var(--color-secondary) / 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.storefront-mobile-drawer-panel {
    /*
     * Map the complete merchant palette to semantic drawer roles. The six
     * storefront variables are replaced by the PWA palette in standalone
     * mode, so this same component follows the correct identity in both the
     * browser storefront and the installed application.
    */
    --drawer-brand: rgb(var(--color-primary));
    --drawer-brand-soft: rgb(var(--color-primary) / 0.08);
    --drawer-brand-border: rgb(var(--color-primary) / 0.2);
    --drawer-accent-soft: rgb(var(--color-accent) / 0.12);
    --drawer-accent-border: rgb(var(--color-accent) / 0.24);
    --drawer-ink: rgb(var(--color-secondary));
    --drawer-ink-700: rgb(var(--color-secondary) / 0.84);
    --drawer-muted: rgb(var(--color-secondary) / 0.64);
    --drawer-muted-light: rgb(var(--color-secondary) / 0.46);
    --drawer-surface: #fff;
    --drawer-surface-soft: rgb(var(--color-cream));
    --drawer-border: rgb(var(--color-secondary) / 0.12);
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 88%;
    max-width: 345px;
    background: var(--drawer-surface);
    color: var(--drawer-ink);
    box-shadow: -12px 0 50px rgb(var(--color-secondary) / 0.3);
}

.storefront-mobile-drawer-panel,
.storefront-mobile-search-view,
.storefront-mobile-bottom-sheet {
    --storefront-mobile-action-height: 44px;
    --storefront-mobile-action-radius: 12px;
    --storefront-mobile-action-font-size: 0.75rem;
    --storefront-mobile-action-primary: rgb(var(--color-primary));
    --storefront-mobile-action-primary-shadow: 0 3px 9px rgb(var(--color-primary) / 0.18);
    --storefront-mobile-action-secondary-border: rgb(var(--color-primary) / 0.2);
    --storefront-mobile-action-secondary-shadow: 0 2px 7px rgb(var(--color-secondary) / 0.055);
}

[dir="ltr"] .storefront-mobile-drawer-panel {
    box-shadow: 12px 0 50px rgb(var(--color-secondary) / 0.3);
}

.storefront-mobile-drawer-header {
    display: flex;
    min-height: 57px;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding:
        max(0.75rem, env(safe-area-inset-top, 0px))
        1rem
        0.75rem;
    border-bottom: 1px solid var(--drawer-border);
    background: var(--drawer-surface);
}

.storefront-mobile-drawer-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
}

.storefront-mobile-drawer-brand__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--drawer-brand);
}

.storefront-mobile-drawer-brand strong {
    overflow: hidden;
    min-width: 0;
    color: var(--drawer-ink);
    font-family: var(--font-display, inherit);
    font-size: 0.9375rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-mobile-drawer-brand small {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--drawer-brand-border);
    border-radius: 6px;
    background: var(--drawer-brand-soft);
    color: var(--drawer-brand);
    font-size: 0.59375rem;
    font-weight: 800;
    line-height: 1.55;
}

.storefront-mobile-drawer-close {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--drawer-border);
    border-radius: 50%;
    background: var(--drawer-surface-soft);
    color: var(--drawer-ink-700);
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.storefront-mobile-drawer-close svg {
    width: 16px;
    height: 16px;
}

.storefront-mobile-drawer-close:active {
    transform: scale(0.94);
}

.storefront-mobile-drawer-content {
    padding: 0.875rem 1rem 1.25rem;
}

.storefront-mobile-drawer-account {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.875rem;
    padding: 0.875rem;
    border: 1px solid var(--drawer-brand-border);
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgb(var(--color-primary) / 0.08),
        rgb(var(--color-accent) / 0.11) 52%,
        rgb(var(--color-rose) / 0.62)
    );
    box-shadow: 0 4px 14px rgb(var(--color-primary) / 0.08);
}

.storefront-mobile-drawer-account::before {
    position: absolute;
    inset-block-start: -20px;
    inset-inline-end: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--color-primary) / 0.2), transparent 70%);
    content: '';
    pointer-events: none;
}

.storefront-mobile-drawer-account--authenticated {
    /* A regular customer account must follow the store identity, not a VIP card. */
    border-color: rgb(255 255 255 / 0.36);
    background-color: var(--drawer-brand);
    background-image: linear-gradient(
        135deg,
        rgb(var(--color-secondary) / 0.1),
        rgb(var(--color-secondary) / 0.18)
    );
    color: #fff;
    box-shadow: 0 4px 14px rgb(var(--color-primary) / 0.18);
}

.storefront-mobile-drawer-account--authenticated::before {
    display: none;
}

.storefront-mobile-drawer-user {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.625rem;
}

.storefront-mobile-drawer-avatar {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.72);
    background: var(--drawer-surface);
    color: var(--drawer-brand);
    font-size: 0.875rem;
    font-weight: 900;
    box-shadow: 0 2px 8px rgb(var(--color-secondary) / 0.12);
}

.storefront-mobile-drawer-guest-copy h3,
.storefront-mobile-drawer-user h3 {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 0.3125rem;
    color: var(--drawer-ink);
    font-size: 0.78125rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-mobile-drawer-guest-copy h3 svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--drawer-brand);
    fill: currentColor;
}

.storefront-mobile-drawer-guest-copy p,
.storefront-mobile-drawer-user p {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: var(--drawer-muted);
    font-size: 0.65625rem;
    line-height: 1.5;
}

.storefront-mobile-drawer-user h3 {
    color: #fff;
    font-size: 0.8125rem;
}

.storefront-mobile-drawer-user p {
    color: #fff;
    font-weight: 700;
}

.storefront-mobile-drawer-user p svg {
    width: 12px;
    height: 12px;
}

.storefront-mobile-drawer-auth-actions,
.storefront-mobile-drawer-account-actions {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.storefront-mobile-drawer-auth-actions a,
.storefront-mobile-drawer-account-actions a {
    display: flex;
    min-height: var(--storefront-mobile-action-height);
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    padding: 0.5rem 0.375rem;
    border-radius: var(--storefront-mobile-action-radius);
    font-size: var(--storefront-mobile-action-font-size);
    font-weight: 800;
    white-space: nowrap;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.storefront-mobile-drawer-auth-actions svg,
.storefront-mobile-drawer-account-actions svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.storefront-mobile-drawer-account-actions a {
    border: 1px solid rgb(255 255 255 / 0.48);
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    box-shadow: none;
}

.storefront-mobile-drawer-account-actions a svg {
    color: currentColor;
}

.storefront-mobile-drawer-account-actions a:first-child {
    border-color: #fff;
    background: var(--drawer-surface);
    color: var(--drawer-brand);
    box-shadow: 0 2px 8px rgb(var(--color-secondary) / 0.12);
}

.storefront-mobile-drawer-auth-primary {
    border: 1px solid var(--storefront-mobile-action-primary);
    background: var(--storefront-mobile-action-primary);
    color: #fff;
    box-shadow: var(--storefront-mobile-action-primary-shadow);
}

.storefront-mobile-drawer-auth-secondary {
    border: 1px solid var(--storefront-mobile-action-secondary-border);
    background: #fff;
    color: var(--drawer-brand);
    box-shadow: var(--storefront-mobile-action-secondary-shadow);
}

.storefront-mobile-drawer-auth-actions a:active,
.storefront-mobile-drawer-account-actions a:active {
    transform: scale(0.98);
}

.storefront-mobile-drawer-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 0.875rem;
    padding: 3px;
    border: 1px solid var(--drawer-border);
    border-radius: 12px;
    background: var(--drawer-surface-soft);
}

.storefront-mobile-drawer-tabs button {
    display: flex;
    min-width: 0;
    min-height: 34px;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.375rem;
    border-radius: 9px;
    color: var(--drawer-muted);
    font-size: clamp(0.625rem, 3vw, 0.71875rem);
    font-weight: 800;
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.storefront-mobile-drawer-tabs button:focus {
    outline: none;
}

.storefront-mobile-drawer-tabs button:focus-visible {
    outline: 2px solid rgb(var(--color-primary) / 0.42);
    outline-offset: 1px;
}

.storefront-mobile-drawer-tabs button:first-child {
    flex-grow: 1.18;
}

.storefront-mobile-drawer-tabs button:last-child {
    flex-grow: 1;
}

.storefront-mobile-drawer-tabs button > span {
    min-width: 0;
    white-space: nowrap;
}

.storefront-mobile-drawer-tabs button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.storefront-mobile-drawer-tabs button.is-active {
    background: var(--drawer-surface);
    color: var(--drawer-brand);
    box-shadow: 0 2px 10px rgb(var(--color-secondary) / 0.08);
}

.storefront-mobile-drawer-offers {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    padding: 0.6875rem 0.75rem;
    border: 1px solid var(--drawer-brand-border);
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgb(var(--color-primary) / 0.08),
        rgb(var(--color-gold) / 0.12) 52%,
        rgb(var(--color-rose) / 0.62)
    );
    color: var(--drawer-brand);
    font-size: 0.78125rem;
    font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.storefront-mobile-drawer-offers span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.storefront-mobile-drawer-offers svg {
    width: 17px;
    height: 17px;
}

.storefront-mobile-drawer-offers span svg {
    width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--drawer-brand);
}

.storefront-mobile-drawer-offers > svg,
.storefront-mobile-drawer-category__direct > svg,
.storefront-mobile-drawer-category__body a > svg,
.storefront-mobile-drawer-link__arrow,
.storefront-mobile-drawer-contact__arrow {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

[dir="rtl"] .storefront-mobile-drawer-offers > svg,
[dir="rtl"] .storefront-mobile-drawer-category__direct > svg,
[dir="rtl"] .storefront-mobile-drawer-category__body a > svg,
[dir="rtl"] .storefront-mobile-drawer-link__arrow,
[dir="rtl"] .storefront-mobile-drawer-contact__arrow {
    transform: rotate(180deg);
}

.storefront-mobile-drawer-accordion,
.storefront-mobile-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.storefront-mobile-drawer-category {
    overflow: hidden;
    border: 1px solid var(--drawer-border);
    border-radius: 12px;
    background: var(--drawer-surface);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.storefront-mobile-drawer-category.is-open {
    border-color: var(--drawer-brand-border);
    box-shadow: 0 4px 14px rgb(var(--color-secondary) / 0.04);
}

.storefront-mobile-drawer-category > button,
.storefront-mobile-drawer-category__direct {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5625rem 0.75rem;
    text-align: start;
}

.storefront-mobile-drawer-category__title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.625rem;
    color: var(--drawer-ink);
    font-size: 0.78125rem;
    font-weight: 800;
}

.storefront-mobile-drawer-category__title > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-mobile-drawer-category__icon {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--drawer-accent-border);
    border-radius: 9px;
    background: var(--drawer-accent-soft);
    color: var(--drawer-brand);
}

.storefront-mobile-drawer-category__icon img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.storefront-mobile-drawer-category__icon svg {
    width: 17px;
    height: 17px;
}

.storefront-mobile-drawer-category__chevron {
    display: flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--drawer-surface-soft);
    color: var(--drawer-muted-light);
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.storefront-mobile-drawer-category__chevron svg {
    width: 12px;
    height: 12px;
}

.storefront-mobile-drawer-category.is-open .storefront-mobile-drawer-category__chevron {
    transform: rotate(180deg);
    background: var(--drawer-brand-soft);
    color: var(--drawer-brand);
}

.storefront-mobile-drawer-category__body {
    margin-inline-start: 1rem;
    padding: 0.5rem 0.75rem 0.625rem;
    border-top: 1px solid var(--drawer-border);
    border-inline-start: 2px solid var(--drawer-border);
    background: var(--drawer-surface-soft);
}

.storefront-mobile-drawer-category__body a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.5rem;
    border-radius: 6px;
    color: var(--drawer-ink-700);
    font-size: 0.71875rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.storefront-mobile-drawer-category__body a:active {
    background: var(--drawer-surface);
    color: var(--drawer-brand);
}

.storefront-mobile-drawer-category__body a.storefront-mobile-drawer-category__nested {
    min-height: 32px;
    margin-inline-start: 0.75rem;
    padding-inline-start: 0.625rem;
    border-inline-start: 1px solid var(--drawer-border);
    color: var(--drawer-muted);
    font-size: 0.7rem;
}

.storefront-mobile-drawer-category__body a.storefront-mobile-drawer-category__all {
    margin-top: 0.25rem;
    border-top: 1px dashed var(--drawer-border);
    color: var(--drawer-brand);
    font-weight: 800;
}

.storefront-mobile-drawer-links > a {
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--drawer-border);
    border-radius: 12px;
    background: var(--drawer-surface);
    color: var(--drawer-ink);
    transition: border-color 180ms ease, background-color 180ms ease, transform 160ms ease;
}

.storefront-mobile-drawer-links > a[aria-current="page"] {
    border-color: var(--drawer-brand-border);
    background: var(--drawer-brand-soft);
}

.storefront-mobile-drawer-links > a:active {
    transform: scale(0.99);
}

.storefront-mobile-drawer-link__icon {
    display: flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--drawer-accent-border);
    border-radius: 8px;
    background: var(--drawer-accent-soft);
    color: var(--drawer-brand);
}

.storefront-mobile-drawer-link__icon svg {
    width: 16px;
    height: 16px;
}

.storefront-mobile-drawer-link__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    line-height: 1.25;
}

.storefront-mobile-drawer-link__copy strong {
    overflow: hidden;
    font-size: 0.78125rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-mobile-drawer-link__copy small {
    overflow: hidden;
    margin-top: 0.2rem;
    color: var(--drawer-muted);
    font-size: 0.625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-mobile-drawer-link__arrow {
    color: var(--drawer-muted);
}

.storefront-mobile-drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 1rem max(1.25rem, env(safe-area-inset-bottom, 0px));
    border-color: var(--drawer-border);
    background: var(--drawer-surface);
}

.storefront-mobile-drawer-contact {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--storefront-mobile-action-primary);
    border-radius: var(--storefront-mobile-action-radius);
    background: var(--storefront-mobile-action-primary);
    color: #fff;
    box-shadow: var(--storefront-mobile-action-primary-shadow);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.storefront-mobile-drawer-contact__icon {
    display: flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: #fff;
}

.storefront-mobile-drawer-contact__icon svg {
    width: 18px;
    height: 18px;
}

.storefront-mobile-drawer-contact strong,
.storefront-mobile-drawer-contact small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-mobile-drawer-contact strong {
    font-size: 0.75rem;
    font-weight: 800;
}

.storefront-mobile-drawer-contact small {
    margin-top: 0.125rem;
    color: rgb(255 255 255 / 0.82);
    font-size: 0.65625rem;
}

.storefront-mobile-drawer-contact__arrow {
    color: #fff;
}

.storefront-mobile-drawer-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.storefront-mobile-drawer__currency {
    min-width: 0;
    flex: 1;
}

.storefront-mobile-drawer__currency > div,
.storefront-mobile-drawer__currency > div > div {
    width: 100%;
}

.storefront-mobile-drawer__currency button[aria-controls="storefront-currency-menu"] {
    width: 100%;
    height: 38px;
    justify-content: center;
    border-radius: 9px;
    background: var(--drawer-surface-soft);
    box-shadow: none;
}

.storefront-mobile-drawer__currency #storefront-currency-menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + 0.5rem);
    inset-inline: 0;
    width: 100%;
    margin: 0;
}

.storefront-mobile-drawer-language {
    display: flex;
    height: 38px;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--drawer-border);
    border-radius: 9px;
    background: var(--drawer-surface-soft);
}

.storefront-mobile-drawer-language a {
    display: flex;
    min-width: 34px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--drawer-muted);
    font-size: 0.6875rem;
    font-weight: 750;
}

.storefront-mobile-drawer-language a.is-active {
    background: var(--drawer-surface);
    color: var(--drawer-brand);
    box-shadow: 0 1px 6px rgb(var(--color-secondary) / 0.08);
}

.storefront-mobile-drawer-logout button {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(254 202 202);
    border-radius: 9px;
    background: rgb(254 242 242);
    color: #dc2626;
}

.storefront-mobile-drawer-logout svg {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    .storefront-mobile-drawer-close:hover {
        border-color: var(--drawer-brand-border);
        background: var(--drawer-brand-soft);
        color: var(--drawer-brand);
    }

    .storefront-mobile-drawer-category > button:hover,
    .storefront-mobile-drawer-category__direct:hover,
    .storefront-mobile-drawer-links > a:hover {
        border-color: var(--drawer-brand-border);
        background: var(--drawer-brand-soft);
    }

    .storefront-mobile-drawer-contact:hover,
    .storefront-mobile-drawer-offers:hover {
        transform: translateY(-1px);
    }

    .storefront-mobile-drawer-contact:hover {
        box-shadow: 0 6px 18px rgb(var(--color-primary) / 0.35);
    }
}

@media (max-width: 359px) {
    .storefront-mobile-drawer-tabs button {
        gap: 0.25rem;
        padding-inline: 0.25rem;
        font-size: 0.625rem;
    }

    .storefront-mobile-drawer-tabs button svg {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}


html.storefront-overlay-open,
html.storefront-overlay-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

.storefront-floating-action {
    transition: opacity var(--transition-fast) ease,
                visibility var(--transition-fast) ease,
                transform var(--transition-normal) ease;
}

html.storefront-overlay-open .storefront-floating-action {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.storefront-overlay-open #pwa-push-prompt,
html.storefront-overlay-open #pwa-push-settings-btn,
html.storefront-overlay-open [data-storefront-popup-layer] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (min-width: 768px) {
    .storefront-shell-main {
        padding-bottom: 0;
    }
}

.storefront-announcement-bar {
    width: 100%;
    height: 2.25rem;
    min-height: 2.25rem;
    max-height: 2.25rem;
    padding-block: 0 !important;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    transform-origin: top;
    transition: height 180ms ease,
                min-height 180ms ease,
                max-height 180ms ease,
                opacity 140ms ease,
                transform 180ms ease;
    will-change: height, opacity, transform;
}

@media not all and (min-width: 768px) {
    .storefront-announcement-bar--mobile-hidden {
        height: 0;
        min-height: 0;
        max-height: 0;
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
    }
}

.storefront-announcement-desktop,
.storefront-announcement-single {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.storefront-announcement-mobile {
    display: none;
}

.storefront-announcement-track {
    width: 100%;
    height: 100%;
    align-items: center;
    padding-inline: 2.75rem;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 2.5rem,
        #000 calc(100% - 2.5rem),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 2.5rem,
        #000 calc(100% - 2.5rem),
        transparent 100%
    );
}

.storefront-announcement-track .animate-marquee {
    height: 100%;
    align-items: center;
}

.storefront-announcement-single {
    gap: 0.5rem;
    padding-inline: 3rem;
    font-weight: 600;
    white-space: nowrap;
}

.storefront-announcement-control {
    width: 28px;
    height: 28px;
    background: rgb(255 255 255 / 0.1);
}

.storefront-announcement-control:hover,
.storefront-announcement-control:active {
    background: rgb(255 255 255 / 0.2);
}

@media not all and (min-width: 768px) {
    :root {
        --site-header-height: 88px;
    }

    :root:has(.storefront-announcement-bar) {
        --site-header-height: 120px;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: rgb(148 163 184 / 0.45);
    }

    html {
        scrollbar-width: none;
    }

    .storefront-mobile-menu-scroll {
        scrollbar-width: none;
    }

    .storefront-mobile-menu-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .storefront-responsive-header {
        background: rgb(255 255 255 / 0.95);
        border-bottom-color: rgb(var(--color-primary) / 0.12);
        -webkit-backdrop-filter: blur(14px) saturate(1.08);
        backdrop-filter: blur(14px) saturate(1.08);
        box-shadow: 0 1px 0 rgb(var(--color-primary) / 0.06), 0 5px 16px rgb(15 23 42 / 0.055);
    }

    .storefront-shell-header {
        box-sizing: border-box;
        padding-top: env(safe-area-inset-top, 0px);
        background: rgb(255 255 255 / 0.96);
    }

    .storefront-mobile-app-header {
        width: 100%;
        overflow: hidden;
        background: rgb(255 255 255 / 0.97);
        color: rgb(var(--color-secondary));
    }

    .storefront-mobile-app-header__expanded {
        width: 100%;
        background:
            radial-gradient(circle at 50% -35%, rgb(var(--color-primary) / 0.08), transparent 48%),
            linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 0.97) 100%);
    }

    .storefront-mobile-app-header__actions {
        direction: rtl;
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr) 110px;
        align-items: center;
        width: 100%;
        height: 46px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        border-bottom: 1px solid rgb(226 232 240 / 0.68);
    }

    .storefront-mobile-app-header__menu {
        grid-column: 1;
        justify-self: start;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .storefront-mobile-app-header__logo {
        grid-column: 2;
        display: flex;
        min-width: 0;
        max-width: 108px;
        height: 40px;
        align-items: center;
        justify-content: center;
        justify-self: center;
        color: rgb(var(--color-secondary));
        font-family: var(--font-display, inherit);
        padding-inline: 0.25rem;
        border-radius: 12px;
        font-size: 0.9375rem;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
    }

    .storefront-mobile-app-header__logo picture {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .storefront-mobile-app-header__logo img {
        display: block;
        width: auto;
        max-width: 104px;
        height: auto;
        max-height: 36px;
        object-fit: contain;
    }

    .storefront-mobile-app-header__quick-actions {
        grid-column: 3;
        display: flex;
        align-items: center;
        gap: 1px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        justify-self: end;
    }

    .storefront-mobile-app-header__icon-button {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
    }

    .storefront-mobile-app-header__icon-button:active {
        background: rgb(var(--color-primary) / 0.09);
    }

    .storefront-mobile-app-header__instant-search {
        border: 0;
        background: transparent;
        box-shadow: none;
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-app-header__instant-search:active {
        background: rgb(var(--color-primary) / 0.12);
    }

    @media (hover: hover) and (pointer: fine) {
        .storefront-mobile-app-header__icon-button:hover {
            background: rgb(var(--color-primary) / 0.07);
            color: rgb(var(--color-primary));
        }
    }

    .storefront-mobile-app-header__count {
        position: absolute;
        inset-block-start: 1px;
        inset-inline-end: 0;
        display: flex;
        min-width: 16px;
        height: 16px;
        align-items: center;
        justify-content: center;
        padding-inline: 3px;
        border: 1.5px solid rgb(255 255 255 / 0.96);
        border-radius: 9999px;
        background: rgb(var(--color-primary));
        box-shadow: 0 2px 6px rgb(var(--color-primary) / 0.2);
        color: #fff;
        font-size: 0.5625rem;
        font-weight: 700;
        line-height: 1;
    }

    .storefront-mobile-category-chips {
        display: flex;
        width: 100%;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        align-items: center;
        gap: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-inline: 0.5rem;
        border-top: 1px solid rgb(15 23 42 / 0.14);
        background: rgb(255 255 255 / 0.98);
        box-shadow: inset 0 -1px 0 rgb(15 23 42 / 0.06);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-padding-inline: 0.75rem;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        transform-origin: top;
        transition: height 180ms ease,
                    min-height 180ms ease,
                    max-height 180ms ease,
                    padding 180ms ease,
                    opacity 140ms ease,
                    transform 180ms ease;
        will-change: height, opacity, transform;
    }

    .storefront-mobile-category-chips--hidden {
        height: 0;
        min-height: 0;
        max-height: 0;
        padding-block: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-0.5rem);
        pointer-events: none;
    }

    .storefront-mobile-category-chips::-webkit-scrollbar {
        display: none;
    }

    .storefront-mobile-category-chip {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        height: 39px;
        align-items: center;
        gap: 0.375rem;
        padding-inline: 0.75rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: rgb(var(--color-secondary));
        font-size: 0.75rem;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        transition: color 160ms ease, opacity 160ms ease;
    }

    .storefront-mobile-category-chip:active {
        background: transparent;
        color: rgb(var(--color-primary));
        opacity: 0.72;
    }

    .storefront-mobile-category-chip::after {
        content: '';
        position: absolute;
        inset-block-end: 0;
        left: 50%;
        width: calc(100% - 1.5rem);
        height: 3px;
        border-radius: 9999px;
        background: rgb(var(--color-primary));
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform 180ms ease;
    }

    .storefront-mobile-category-chip[aria-current="page"] {
        background: transparent;
        color: rgb(var(--color-primary));
        font-weight: 750;
    }

    .storefront-mobile-category-chip[aria-current="page"]::after {
        transform: translateX(-50%) scaleX(1);
    }

    .storefront-mobile-category-chip--offers {
        color: rgb(var(--color-primary));
        font-weight: 700;
    }

    .storefront-mobile-category-chip--offers svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    .storefront-mobile-category-chip img {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        border-radius: 9999px;
        object-fit: cover;
    }

    .storefront-mobile-search-view {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-mobile-search-topbar {
        position: relative;
        z-index: 20;
        padding-block-start: max(0.625rem, env(safe-area-inset-top, 0px));
        padding-block-end: 0.625rem;
        padding-inline: 1rem;
        border-bottom: 1px solid rgb(226 232 240 / 0.9);
        background: rgb(255 255 255 / 0.97);
    }

    .storefront-mobile-search-form {
        width: 100%;
    }

    .storefront-mobile-search-form .storefront-search-shell--mobile {
        overflow: hidden;
        border: 1px solid var(--storefront-search-border);
        border-radius: 12px;
        background: var(--storefront-search-surface);
        box-shadow: var(--storefront-search-shadow);
        transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
    }

    .storefront-mobile-search-form .storefront-search-shell--mobile:focus-within {
        border-color: var(--storefront-search-focus-border);
        background: #fff;
        box-shadow: var(--storefront-search-focus-shadow);
    }

    .storefront-mobile-search-form .storefront-search-submit--mobile {
        width: 48px;
        border-inline-end: 1px solid rgb(255 255 255 / 0.2);
        background: var(--storefront-search-action);
        box-shadow: none;
    }

    .storefront-mobile-search-form .storefront-search-submit--mobile svg {
        width: 20px;
        height: 20px;
    }

    .storefront-mobile-search-form .storefront-search-input {
        padding-inline-start: 3.5rem;
    }

    .storefront-mobile-search-body {
        overscroll-behavior: contain;
        padding: 1rem 1rem calc(5rem + env(safe-area-inset-bottom, 0px));
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-mobile-search-body::-webkit-scrollbar,
    .storefront-mobile-search-results::-webkit-scrollbar,
    .storefront-mobile-search-chip-track::-webkit-scrollbar {
        display: none;
    }

    .storefront-mobile-search-section {
        margin-block-end: 1.25rem;
    }

    .storefront-mobile-search-section__heading,
    .storefront-mobile-search-results__heading {
        display: flex;
        min-height: 1.75rem;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-block-end: 0.5rem;
        color: rgb(var(--color-secondary));
        font-size: 0.75rem;
        font-weight: 800;
    }

    .storefront-mobile-search-clear-history {
        min-height: 32px;
        padding-inline: 0.5rem;
        border-radius: 8px;
        color: rgb(var(--color-primary));
        font-size: 0.6875rem;
        font-weight: 700;
        transition: background-color 160ms ease, transform 160ms ease;
    }

    .storefront-mobile-search-clear-history:active {
        background: rgb(var(--color-primary) / 0.09);
        transform: scale(0.96);
    }

    .storefront-mobile-search-chip-track {
        display: flex;
        gap: 0.5rem;
        max-width: calc(100% + 2rem);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        margin-inline: -1rem;
        padding: 2px 1rem 6px;
        touch-action: pan-x;
        scroll-behavior: smooth;
        scroll-padding-inline: 1rem;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-mobile-search-chip {
        display: inline-flex;
        min-height: 36px;
        flex: 0 0 auto;
        align-items: center;
        gap: 0.375rem;
        padding-inline: 0.875rem;
        border: 1px solid rgb(226 232 240);
        border-radius: 9999px;
        background: rgb(248 250 252);
        color: rgb(var(--color-secondary));
        font-size: 0.75rem;
        font-weight: 700;
        scroll-snap-align: start;
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .storefront-mobile-search-chip:active {
        border-color: rgb(var(--color-primary) / 0.42);
        background: rgb(var(--color-primary) / 0.09);
        color: rgb(var(--color-primary));
        transform: scale(0.96);
    }

    .storefront-mobile-search-chip--popular {
        border-color: rgb(var(--color-primary) / 0.16);
        background: rgb(var(--color-primary) / 0.055);
    }

    .storefront-mobile-search-chip img {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        border-radius: 9999px;
        object-fit: cover;
    }

    .storefront-mobile-search-helper {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.75rem;
        border: 1px solid rgb(var(--color-primary) / 0.14);
        border-radius: 12px;
        background: rgb(var(--color-primary) / 0.055);
        color: rgb(var(--color-primary));
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.75;
    }

    .storefront-mobile-search-results {
        position: fixed;
        inset-block-start: calc(max(0.625rem, env(safe-area-inset-top, 0px)) + 3.5rem);
        inset-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        inset-inline: 0;
        z-index: 15 !important;
        overscroll-behavior: contain;
        padding-block: 0.875rem 1rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-mobile-search-results__inner,
    .storefront-mobile-search-view-all,
    .storefront-mobile-search-empty {
        width: min(100%, 36rem);
        margin-inline: auto;
        padding-inline: 1rem;
    }

    .storefront-mobile-search-results__heading {
        color: rgb(71 85 105);
    }

    .storefront-mobile-search-results__heading span:last-child {
        color: rgb(var(--color-primary));
        font-size: 0.6875rem;
    }

    .storefront-mobile-search-result {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
        min-height: 68px;
        margin-block-end: 0.625rem;
        padding: 0.5rem;
        border: 1px solid rgb(226 232 240);
        border-radius: 12px;
        background: rgb(248 250 252 / 0.92);
        transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .storefront-mobile-search-result:active {
        border-color: rgb(var(--color-primary) / 0.3);
        background: #fff;
        transform: scale(0.992);
    }

    .storefront-mobile-search-result__link {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.625rem;
    }

    .storefront-mobile-search-result__image {
        display: flex;
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgb(226 232 240);
        border-radius: 10px;
        background: #fff;
    }

    .storefront-mobile-search-result__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-mobile-search-result__image--empty {
        background: rgb(var(--color-primary) / 0.055);
    }

    .storefront-mobile-search-result__info {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.25rem;
    }

    .storefront-mobile-search-result__info strong {
        display: -webkit-box;
        overflow: hidden;
        color: rgb(var(--color-secondary));
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .storefront-mobile-search-result__price {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 0.375rem;
        font-size: 0.6875rem;
        white-space: nowrap;
    }

    .storefront-mobile-search-result__price b {
        color: rgb(var(--color-primary));
        font-weight: 900;
    }

    .storefront-mobile-search-result__price del {
        overflow: hidden;
        color: rgb(148 163 184);
        font-size: 0.625rem;
        text-overflow: ellipsis;
    }

    .storefront-mobile-search-result__add {
        display: inline-flex;
        width: var(--storefront-mobile-action-height);
        min-width: var(--storefront-mobile-action-height);
        flex: 0 0 var(--storefront-mobile-action-height);
        height: var(--storefront-mobile-action-height);
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: var(--storefront-mobile-action-radius);
        background: var(--storefront-mobile-action-primary);
        box-shadow: var(--storefront-mobile-action-primary-shadow);
        color: #fff;
        transition: filter 160ms ease, transform 160ms ease;
    }

    .storefront-mobile-search-result__add:active {
        filter: brightness(0.94);
        transform: scale(0.95);
    }

    .storefront-mobile-search-result__add:disabled {
        cursor: wait;
        opacity: 0.7;
    }

    .storefront-mobile-search-view-all {
        padding-block: 0.125rem 1rem;
    }

    .storefront-mobile-search-empty {
        padding-block: clamp(3rem, 18vh, 8rem);
        text-align: center;
    }

    .storefront-mobile-search-dock {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 30;
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgb(15 23 42 / 0.09);
        background: rgb(255 255 255 / 0.96);
        box-shadow: 0 -6px 18px rgb(var(--color-secondary) / 0.06);
        -webkit-backdrop-filter: blur(18px) saturate(1.08);
        backdrop-filter: blur(18px) saturate(1.08);
    }

    .storefront-mobile-search-dock__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 116px;
        align-items: center;
        gap: 0.5rem;
    }

    .storefront-mobile-search-close-3d,
    .storefront-mobile-search-cart-chip {
        display: inline-flex;
        height: var(--storefront-mobile-action-height);
        align-items: center;
        justify-content: center;
        border-radius: var(--storefront-mobile-action-radius);
        font-size: var(--storefront-mobile-action-font-size);
        font-weight: 800;
        transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
    }

    .storefront-mobile-search-close-3d {
        min-width: 0;
        width: 100%;
        gap: 0.375rem;
        padding-inline: 0.75rem;
        border: 1px solid var(--storefront-mobile-action-primary);
        background: var(--storefront-mobile-action-primary);
        box-shadow: var(--storefront-mobile-action-primary-shadow);
        color: #fff;
    }

    .storefront-mobile-search-dock__primary-icon {
        display: inline-flex;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: transparent;
    }

    .storefront-mobile-search-dock__primary-icon svg {
        width: 16px;
        height: 16px;
    }

    .storefront-mobile-search-close-3d:active {
        box-shadow: 0 1px 4px rgb(var(--color-primary) / 0.16);
        transform: translateY(1px);
    }

    .storefront-mobile-search-cart-chip {
        min-width: 0;
        width: 100%;
        gap: 0.25rem;
        padding-inline: 0.5rem;
        border: 1px solid var(--storefront-mobile-action-secondary-border);
        background: #fff;
        box-shadow: var(--storefront-mobile-action-secondary-shadow);
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-search-cart-chip > svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .storefront-mobile-search-cart-chip__label {
        white-space: nowrap;
    }

    .storefront-mobile-search-cart-chip__count {
        display: inline-flex;
        min-width: 20px;
        height: 20px;
        align-items: center;
        justify-content: center;
        padding-inline: 0.25rem;
        border-radius: 9999px;
        background: rgb(var(--color-primary));
        color: #fff;
        font-size: 0.625rem;
        line-height: 1;
    }

    .storefront-shell-main {
        transition: margin-top 180ms ease;
    }

    .storefront-search-shell--mobile .storefront-search-input {
        padding-inline-end: 3.5rem;
    }

    .storefront-announcement-bar {
        height: 2rem;
        min-height: 2rem;
        max-height: 2rem;
        font-size: 0.75rem;
        line-height: 1.25rem;
    }

    .storefront-announcement-bar--mobile-hidden {
        height: 0;
        min-height: 0;
        max-height: 0;
    }

    .storefront-announcement-desktop {
        display: none;
    }

    .storefront-announcement-mobile {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .storefront-announcement-mobile__viewport {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding-inline: 2.5rem;
    }

    .storefront-announcement-mobile__item {
        position: absolute;
        inset: 0;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        padding-inline: 2.5rem;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }

    .storefront-announcement-mobile__item span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-announcement-control {
        width: 26px;
        height: 26px;
        background: rgb(255 255 255 / 0.08);
    }
}

@media (max-width: 359px) {
    .storefront-mobile-app-header__actions {
        grid-template-columns: 104px minmax(0, 1fr) 104px;
    }

    .storefront-mobile-app-header__quick-actions {
        gap: 1px;
    }

    .storefront-mobile-app-header__quick-actions .storefront-mobile-app-header__icon-button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .storefront-mobile-app-header__logo,
    .storefront-mobile-app-header__logo img {
        max-width: 82px;
    }

    .storefront-mobile-search-result__add {
        width: var(--storefront-mobile-action-height);
        min-width: var(--storefront-mobile-action-height);
        padding: 0;
    }

    .storefront-mobile-search-dock__inner {
        grid-template-columns: minmax(0, 1fr) 108px;
    }

    .storefront-mobile-search-close-3d,
    .storefront-mobile-search-cart-chip {
        font-size: 0.6875rem;
    }

    .storefront-mobile-search-close-3d {
        gap: 0.25rem;
        padding-inline: 0.5rem;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-mobile-app-header *,
    .storefront-mobile-search-view *,
    .storefront-announcement-bar,
    .storefront-shell-main {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-announcement-bar .animate-marquee {
        animation: none !important;
        transform: none !important;
    }

    .storefront-announcement-bar .marquee-container > :nth-child(2) {
        display: none;
    }
}

/* ========================================
   MARQUEE (Announcement Bar)
   ======================================== */
@keyframes marquee-scroll {
    from { transform: translateX(0%); }
    to { transform: translateX(50%); }
}
.marquee-container {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
.animate-marquee {
    display: flex;
    flex-shrink: 0;
    animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
    will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }
.animate-marquee.storefront-marquee-paused { animation-play-state: paused; }
.animate-marquee.speed-slow { --marquee-duration: 30s; }
.animate-marquee.speed-medium { --marquee-duration: 20s; }
.animate-marquee.speed-fast { --marquee-duration: 10s; }

/* ========================================
   SCROLL ANIMATIONS (single class approach)
   ======================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}
.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-children.is-visible > *:nth-child(9) { transition-delay: 0.45s; }
.stagger-children.is-visible > *:nth-child(10) { transition-delay: 0.5s; }
.stagger-children.is-visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger-children.is-visible > *:nth-child(12) { transition-delay: 0.6s; }

/* ========================================
   SHINE EFFECT (used on Instagram images)
   ======================================== */
.shine-effect {
    position: relative;
    overflow: hidden;
}
.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.6s ease;
}
.shine-effect:hover::after {
    transform: rotate(30deg) translateX(100%);
}

/* ========================================
   HOVER LIFT (used on Instagram grid)
   ======================================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* ========================================
   RTL SUPPORT
   ======================================== */
[dir="rtl"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

/* ========================================
   MOBILE BOTTOM NAVIGATION
   ======================================== */
.safe-area-pb {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

@supports not (padding-bottom: max(0px, 1px)) {
    .safe-area-pb {
        padding-bottom: 0.5rem;
    }
}

.storefront-mobile-nav,
.mobile-bottom-nav {
    animation: slideUpNav 0.3s ease-out;
}

.storefront-mobile-nav {
    /* Layout and capsule states use Tailwind. Only the readable brand ink
       needs a scoped token; it follows web/PWA palette changes automatically. */
    --mobile-nav-ink: #374151;
    --mobile-nav-featured-end: rgb(var(--color-primary));
}

@supports (color: color-mix(in srgb, black, white)) {
    .storefront-mobile-nav {
        /* Even a white primary stays readable on the white navigation surface. */
        --mobile-nav-ink: color-mix(in srgb, rgb(var(--color-primary)) 45%, black);
        /* Use an opaque lighter brand shade, not a translucent ring. */
        --mobile-nav-featured-end: color-mix(in srgb, rgb(var(--color-primary)) 80%, white);
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-mobile-nav {
        animation: none;
    }
}

@media not all and (min-width: 768px) {
    .floating-popup-trigger {
        bottom: calc(var(--shell-mobile-content-clearance) + 0.75rem) !important;
    }
}
@keyframes slideUpNav {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.nav-item, .nav-item-home {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.nav-item-home > div {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-item-home:active > div {
    transform: scale(0.95);
}

/* ========================================
   PWA INSTALL ANIMATION
   ======================================== */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   NEWSLETTER SECTION - Minimal decorative
   ======================================== */
.magnetic-btn {
    position: relative;
    transition: transform 0.3s ease;
}
.magnetic-btn:hover { transform: scale(1.03); }

.btn-sparkle { position: relative; }

.animate-gentle-pulse {
    animation: gentle-pulse 2s ease-in-out infinite;
}
@keyframes gentle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/* Reusable bottom-sheet shell. Content/identity comes from each caller. */
.storefront-mobile-bottom-sheet {
    --sheet-max-width: 36rem;
    --sheet-max-height: 90dvh;
    --sheet-radius: 24px;
    --sheet-surface: #fff;
    --sheet-ink: rgb(var(--color-secondary));
    --sheet-accent-ink: rgb(var(--color-secondary));
    --sheet-accent-ink: color-mix(in srgb, rgb(var(--color-primary)) 45%, #172033);
    --sheet-line: #e8e9ed;
    --sheet-body-padding: 18px;
    --sheet-header-padding: 4px 16px;
    --sheet-footer-padding: 12px 18px;
    position: fixed;
    inset: 0;
    z-index: var(--z-shell-modal, 100);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgb(15 23 42 / 0.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--sheet-ink);
}
.storefront-mobile-bottom-sheet__panel {
    display: flex;
    width: 100%;
    max-width: var(--sheet-max-width);
    max-height: var(--sheet-max-height);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    background: var(--sheet-surface);
    box-shadow: 0 -12px 40px rgb(15 23 42 / 0.16);
}
.storefront-mobile-bottom-sheet--preference {
    --sheet-max-height: 80dvh;
    --sheet-body-padding: 16px 16px 20px;
}
.storefront-mobile-bottom-sheet__handle {
    display: block;
    width: 34px;
    height: 4px;
    flex: 0 0 4px;
    margin: 10px auto 2px;
    border-radius: 10px;
    background: #dbdde3;
}
.storefront-mobile-bottom-sheet__header {
    display: flex;
    min-height: 56px;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: var(--sheet-header-padding);
    border-bottom: 1px solid var(--sheet-line);
}
.storefront-mobile-bottom-sheet__title {
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    text-align: start;
    color: var(--sheet-ink);
    overflow-wrap: anywhere;
}
.storefront-mobile-bottom-sheet__close {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin-inline-start: auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}
.storefront-mobile-bottom-sheet__close::before {
    position: absolute;
    inset: 6px;
    border: 1px solid rgb(var(--color-secondary) / 0.06);
    border-radius: 50%;
    background: rgb(var(--color-secondary) / 0.04);
    content: "";
    transition: background-color 160ms ease;
    pointer-events: none;
}
.storefront-mobile-bottom-sheet__close:hover::before {
    background: rgb(var(--color-primary) / 0.07);
}
.storefront-mobile-bottom-sheet__close svg {
    position: relative;
    width: 18px;
    height: 18px;
}
.storefront-mobile-bottom-sheet__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sheet-body-padding);
}
.storefront-mobile-bottom-sheet__footer {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding: var(--sheet-footer-padding);
    border-top: 1px solid var(--sheet-line);
}
.storefront-mobile-bottom-sheet :is(button, a):focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}
.storefront-mobile-bottom-sheet--enter,
.storefront-mobile-bottom-sheet--leave {
    transition: opacity 220ms ease;
}
.storefront-mobile-bottom-sheet--transparent { opacity: 0; }
.storefront-mobile-bottom-sheet--opaque { opacity: 1; }
.storefront-mobile-bottom-sheet__panel--enter {
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.storefront-mobile-bottom-sheet__panel--leave {
    transition: transform 180ms ease-in;
}
.storefront-mobile-bottom-sheet__panel--offscreen { transform: translateY(100%); }
.storefront-mobile-bottom-sheet__panel--onscreen { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .storefront-mobile-bottom-sheet,
    .storefront-mobile-bottom-sheet__panel {
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PHONE HEADER EXPERIENCE
   The approved phone layout is isolated below 768px. Tablet and desktop keep
   their existing header markup, sizing, and scroll behavior.
   ======================================== */
@media not all and (min-width: 768px) {
    :root {
        --site-header-height: 104px;
    }

    :root:has(.storefront-mobile-primary-nav) {
        --site-header-height: 152px;
    }

    :root:has(.storefront-announcement-bar) {
        --site-header-height: 148px;
    }

    :root:has(.storefront-announcement-bar):has(.storefront-mobile-primary-nav) {
        --site-header-height: 196px;
    }

    .storefront-announcement-bar,
    .storefront-announcement-mobile,
    .storefront-announcement-mobile__viewport,
    .storefront-announcement-mobile__item {
        height: 44px;
        min-height: 44px;
    }

    .storefront-announcement-mobile__item {
        padding-inline: 32px;
        font-size: 11px;
        line-height: 1.45;
    }

    .storefront-announcement-control {
        width: 44px;
        height: 44px;
        inset-inline-end: 0.125rem;
    }

    /* Keep the expanded row dimensions stable while the phone header changes
       state. The visual transition below runs entirely on the compositor;
       shrinking these heights forced layout on every animation frame and made
       the fixed header appear to shake on slower mobile browsers. */
    .storefront-announcement-bar.storefront-announcement-bar--mobile-hidden {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }

    .storefront-shell-header {
        --storefront-phone-announcement-clip: 0px;
        --storefront-phone-navigation-clip: 0px;
        background: transparent;
        clip-path: inset(0 0 calc(var(--storefront-phone-announcement-clip) + var(--storefront-phone-navigation-clip)) 0);
        transition: clip-path 220ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: clip-path;
        pointer-events: none;
    }

    .storefront-shell-header:has(.storefront-announcement-bar--mobile-hidden) {
        --storefront-phone-announcement-clip: 44px;
    }

    .storefront-shell-header:has(.storefront-mobile-primary-nav--hidden) {
        --storefront-phone-navigation-clip: 48px;
    }

    .storefront-announcement-bar {
        transform: translate3d(0, 0, 0);
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        backface-visibility: hidden;
        pointer-events: auto;
    }

    .storefront-announcement-bar.storefront-announcement-bar--mobile-hidden {
        /* The row stays opaque while sliding out so page colors can never
           flash through before the solid identity row reaches the top. */
        opacity: 1;
        transform: translate3d(0, -100%, 0);
        pointer-events: none;
    }

    .storefront-responsive-header {
        border: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        transform: translate3d(0, 0, 0);
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        backface-visibility: hidden;
        pointer-events: none;
    }

    .storefront-announcement-bar--mobile-hidden + .storefront-responsive-header {
        transform: translate3d(0, -44px, 0);
    }

    .storefront-mobile-app-header {
        --storefront-mobile-compact-control-height: 36px;
        overflow: visible;
        background: transparent;
        pointer-events: none;
    }

    .storefront-mobile-identity {
        direction: rtl;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 56px;
        padding-inline: max(12px, env(safe-area-inset-left, 0px));
        background: #fff;
        pointer-events: auto;
    }

    .storefront-mobile-identity--guest {
        grid-template-columns: 126px minmax(60px, 1fr) 126px;
        gap: 4px;
        padding-inline: max(8px, env(safe-area-inset-left, 0px));
    }

    .storefront-mobile-identity--pwa:not(.storefront-mobile-identity--guest) {
        grid-template-columns: 88px minmax(0, 1fr) 88px;
        gap: 4px;
        padding-inline: max(8px, env(safe-area-inset-left, 0px));
    }

    .storefront-mobile-identity__primary-actions {
        grid-column: 1;
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
    }

    .storefront-mobile-identity--pwa .storefront-mobile-identity__primary-actions {
        width: 88px;
    }

    .storefront-mobile-identity--pwa .storefront-mobile-identity__primary-actions > .storefront-mobile-identity-action {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .storefront-mobile-identity-action {
        grid-column: 1;
        display: flex;
        width: 48px;
        height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgb(var(--color-secondary));
        line-height: 1.2;
        transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .storefront-mobile-identity-action:hover,
    .storefront-mobile-identity-action:active {
        background: rgb(var(--color-primary) / 0.07);
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-identity-action:active {
        transform: scale(0.97);
    }

    .storefront-mobile-identity-action svg {
        width: 20px;
        height: 20px;
    }

    .storefront-mobile-pwa-install {
        position: relative;
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        margin-inline: 2px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: rgb(var(--color-primary));
        box-shadow: none;
    }

    .storefront-mobile-pwa-install:hover,
    .storefront-mobile-pwa-install:active {
        border-color: rgb(var(--color-primary) / 0.2);
        background: rgb(var(--color-primary) / 0.09);
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-pwa-install svg {
        width: 18px;
        height: 18px;
    }

    .storefront-mobile-pwa-install[hidden] {
        display: none !important;
    }

    .storefront-mobile-identity__logo {
        grid-column: 2;
        display: flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        color: rgb(var(--color-secondary));
        font-family: var(--font-display, inherit);
        font-size: 20px;
        font-weight: 800;
        text-align: center;
    }

    .storefront-mobile-identity__logo picture {
        display: contents;
    }

    .storefront-mobile-identity__logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 132px;
        max-height: 35px;
        object-fit: contain;
    }

    .storefront-mobile-identity--guest .storefront-mobile-identity__logo img {
        max-width: 100%;
        max-height: 31px;
    }

    .storefront-mobile-identity__account {
        grid-column: 3;
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
    }

    .storefront-mobile-guest-auth {
        display: flex;
        width: 126px;
        max-width: 100%;
        height: var(--storefront-mobile-compact-control-height);
        min-width: 0;
        align-items: stretch;
        overflow: hidden;
        border: 1px solid rgb(var(--color-primary) / 0.22);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 7px rgb(15 23 42 / 0.055);
    }

    .storefront-mobile-guest-auth__button {
        display: inline-flex;
        min-width: 0;
        height: calc(var(--storefront-mobile-compact-control-height) - 2px);
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding-inline: 6px;
        border: 0;
        background: #fff;
        color: rgb(var(--color-secondary));
        font-size: 9.5px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
    }

    .storefront-mobile-guest-auth__button:first-child {
        flex: 1 1 50%;
    }

    .storefront-mobile-guest-auth__button:last-child {
        border-inline-start: 1px solid rgb(var(--color-primary) / 0.16);
    }

    .storefront-mobile-guest-auth__button svg {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }

    .storefront-mobile-guest-auth__button--primary {
        border-color: rgb(var(--color-secondary));
        background: rgb(var(--color-secondary));
        color: #fff;
    }

    .storefront-mobile-guest-auth__button:hover {
        background: rgb(var(--color-primary) / 0.08);
    }

    .storefront-mobile-guest-auth__button--primary:hover {
        background: rgb(var(--color-primary));
        color: #fff;
    }

    .storefront-mobile-guest-auth__button:active {
        transform: scale(0.96);
    }

    .storefront-mobile-notification-bell {
        position: relative;
        display: flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
    }

    .storefront-mobile-notification-trigger {
        position: relative;
        display: flex;
        width: 48px;
        height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgb(var(--color-secondary));
        transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
    }

    .storefront-mobile-notification-trigger:hover,
    .storefront-mobile-notification-trigger:active,
    .storefront-mobile-notification-trigger[aria-expanded="true"] {
        background: rgb(var(--color-primary) / 0.07);
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-notification-trigger:active {
        transform: scale(0.97);
    }

    .storefront-mobile-notification-trigger__icon {
        width: 20px;
        height: 20px;
    }

    .storefront-mobile-notification-trigger__label {
        max-width: 48px;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-mobile-notification-trigger__count {
        position: absolute;
        inset-block-start: 1px;
        inset-inline-end: 2px;
        display: flex;
        min-width: 17px;
        height: 17px;
        align-items: center;
        justify-content: center;
        padding-inline: 3px;
        border-radius: 999px;
        background: rgb(var(--color-primary));
        box-shadow: 0 0 0 2px #fff;
        color: #fff;
        font: 700 9px/1 Arial, sans-serif;
    }

    .storefront-mobile-notifications-header__content {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .storefront-mobile-notifications-header__content .storefront-mobile-bottom-sheet__title {
        flex: 0 1 auto;
    }
    .storefront-mobile-notifications-header__content > span {
        border-radius: 99px;
        padding: 2px 8px;
        background: rgb(var(--color-primary) / 0.08);
        color: var(--sheet-accent-ink);
        font-size: 12px;
        line-height: 1.5;
        font-weight: 600;
        white-space: nowrap;
    }

    .storefront-mobile-notifications-list {
        overflow: visible;
    }

    .storefront-mobile-notifications-note {
        margin: 14px 0 0;
        color: #667085;
        font-size: 12px;
        line-height: 1.65;
    }

    .storefront-mobile-notification-item {
        gap: 10px;
        min-height: 76px;
        padding: 12px;
        border: 1px solid #e8ebef;
        border-radius: 12px;
        margin-block-end: 8px;
        background: #fff;
    }

    .storefront-mobile-notification-item:last-child {
        border: 1px solid #e8ebef;
        margin-block-end: 0;
    }

    .storefront-mobile-notification-item.is-unread {
        border-color: rgb(var(--color-primary) / 0.2);
        background: rgb(var(--color-primary) / 0.045);
    }

    .storefront-mobile-notification-item:hover {
        background: rgb(var(--color-primary) / 0.045);
    }

    .storefront-mobile-notification-item__icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        background: rgb(var(--color-primary) / 0.08);
        color: var(--sheet-accent-ink);
    }

    .storefront-mobile-notification-item__icon svg {
        width: 18px;
        height: 18px;
    }

    .storefront-mobile-notification-item__copy {
        text-align: start;
    }

    .storefront-mobile-notification-item__title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: rgb(var(--color-secondary));
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .storefront-mobile-notification-item__message {
        margin-block-start: 3px;
        color: #4b5563;
        font-size: 13px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .storefront-mobile-notification-item__time {
        margin-block-start: 6px;
        color: #667085;
        font-size: 12px;
        line-height: 1.5;
    }

    .storefront-mobile-notification-item__time svg {
        display: none;
    }

    .storefront-mobile-notification-item__unread {
        display: block;
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        margin-block-start: 8px;
        background: var(--sheet-accent-ink);
    }

    .storefront-mobile-notifications-empty {
        padding: 24px 12px 28px;
    }

    .storefront-mobile-notifications-empty__icon {
        width: 44px;
        height: 44px;
        margin-block-end: 12px;
        background: rgb(var(--color-primary) / 0.08);
        color: rgb(var(--color-secondary));
    }

    .storefront-mobile-notifications-empty__icon svg {
        width: 22px;
        height: 22px;
        color: inherit;
    }

    .storefront-mobile-notifications-empty > p:first-of-type {
        font-size: 14px;
        font-weight: 600;
        color: var(--sheet-ink);
    }

    .storefront-mobile-notifications-empty > p:last-of-type {
        font-size: 13px;
        line-height: 1.6;
        color: #667085;
    }

    .storefront-mobile-bottom-sheet--notifications .storefront-mobile-bottom-sheet__footer > * {
        display: flex;
        min-width: 0;
        min-height: 44px;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }

    .storefront-mobile-bottom-sheet--notifications .storefront-mobile-notifications-footer__primary {
        border-color: var(--storefront-mobile-action-primary);
        background: var(--storefront-mobile-action-primary);
        box-shadow: var(--storefront-mobile-action-primary-shadow);
        color: #fff;
    }

    .storefront-mobile-bottom-sheet--notifications .storefront-mobile-notifications-footer__primary:visited {
        color: #fff;
    }

    .storefront-mobile-bottom-sheet--notifications .storefront-mobile-notifications-footer__secondary {
        border-color: rgb(var(--color-primary) / 0.24);
        background: rgb(var(--color-primary) / 0.045);
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-bottom-sheet--notifications .storefront-mobile-bottom-sheet__footer > :is(a, button):active {
        filter: brightness(0.96);
        transform: scale(0.985);
    }

    .storefront-mobile-notifications-footer__secondary:disabled {
        opacity: 0.55;
        cursor: wait;
    }

    .storefront-mobile-bottom-sheet--notifications .storefront-mobile-bottom-sheet__footer svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .storefront-mobile-discovery {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 116px;
        gap: 8px;
        width: 100%;
        height: 48px;
        align-items: center;
        padding: 0 12px 4px;
        background: #fff;
        pointer-events: auto;
    }

    .storefront-mobile-discovery:not(:has(.storefront-mobile-search-launch)),
    .storefront-mobile-discovery:not(:has(.storefront-mobile-display-tools .storefront-mobile-preference-button)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-mobile-display-tools:not(:has(.storefront-mobile-preference-button)) {
        display: none;
    }

    .storefront-mobile-search-launch {
        display: flex;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        align-items: center;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #646a76;
        text-align: start;
    }

    .storefront-mobile-search-launch__surface {
        display: flex;
        width: 100%;
        height: var(--storefront-mobile-compact-control-height);
        min-width: 0;
        align-items: center;
        overflow: hidden;
        border: 1px solid rgb(var(--color-primary) / 0.23);
        border-radius: 9px;
        background: #faf9fa;
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .storefront-mobile-search-launch:hover .storefront-mobile-search-launch__surface,
    .storefront-mobile-search-launch:focus-visible .storefront-mobile-search-launch__surface {
        border-color: rgb(var(--color-primary) / 0.55);
        box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.08);
    }

    .storefront-mobile-search-launch__icon {
        display: grid;
        align-self: stretch;
        flex: 0 0 36px;
        place-items: center;
        border-inline-end: 1px solid rgb(255 255 255 / 0.2);
        background: var(--storefront-search-action);
        color: #fff;
    }

    .storefront-mobile-search-launch__icon svg {
        width: 18px;
        height: 18px;
    }

    .storefront-mobile-search-launch__label {
        min-width: 0;
        overflow: hidden;
        padding-inline: 8px;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-mobile-display-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        min-width: 0;
    }

    .storefront-mobile-display-tools > :only-child,
    .storefront-mobile-display-tools > [wire\:id]:only-child {
        grid-column: 1 / -1;
    }

    .storefront-mobile-preference {
        position: relative;
        min-width: 0;
    }

.storefront-mobile-preference-button {
        display: flex;
        width: 100%;
        min-width: 48px;
        height: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        line-height: 1.25;
    }

    .storefront-mobile-preference-surface {
        display: flex;
        width: 100%;
        height: 36px;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2px 3px;
        border: 1px solid rgb(226 232 240);
        border-radius: 8px;
        background: #fff;
        transition: border-color 160ms ease, background-color 160ms ease;
    }

    .storefront-mobile-preference-button:hover .storefront-mobile-preference-surface,
    .storefront-mobile-preference-button[aria-expanded="true"] .storefront-mobile-preference-surface {
        border-color: rgb(var(--color-primary) / 0.32);
        background: rgb(var(--color-primary) / 0.06);
    }

    .storefront-mobile-preference-meta {
        max-width: 100%;
        overflow: hidden;
        color: #717784;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-mobile-preference-value {
        display: flex;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: rgb(var(--color-secondary));
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .storefront-mobile-preference-value > span {
        max-width: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .storefront-mobile-preference-value svg {
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        color: #717784;
    }

    .storefront-mobile-preference-menu__options {
        display: grid;
        gap: 8px;
    }

    .storefront-mobile-preference-menu__options > button,
    .storefront-mobile-preference-menu__options > a {
        display: flex;
        width: 100%;
        min-height: 56px;
        align-items: center;
        gap: 10px;
        padding: 9px 11px;
        border: 1px solid #e2e6ec;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.035);
        color: rgb(var(--color-secondary));
        text-align: start;
        transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .storefront-mobile-preference-menu__options > :is(button, a):not([aria-pressed="true"]):not([aria-current="true"]):hover {
        border-color: rgb(var(--color-primary) / 0.22);
        background: rgb(var(--color-primary) / 0.025);
    }

    .storefront-mobile-preference-menu__options > [aria-pressed="true"],
    .storefront-mobile-preference-menu__options > [aria-current="true"] {
        border-color: rgb(var(--color-primary) / 0.38);
        background: rgb(var(--color-primary) / 0.055);
        box-shadow: inset 0 0 0 1px rgb(var(--color-primary) / 0.08), 0 5px 14px rgb(var(--color-primary) / 0.06);
    }

    .storefront-mobile-preference-menu__options > button:active,
    .storefront-mobile-preference-menu__options > a:active {
        background: rgb(var(--color-primary) / 0.12);
        transform: scale(0.99);
    }

    .storefront-mobile-preference-menu__options > :is(button, a):focus-visible {
        outline: 2px solid rgb(var(--color-primary) / 0.42);
        outline-offset: 2px;
    }

    .storefront-mobile-preference-menu__copy {
        min-width: 0;
        flex: 1 1 auto;
        text-align: start;
    }

    .storefront-mobile-preference-menu__options strong {
        display: block;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .storefront-mobile-preference-menu__options strong[lang] {
        display: inline-block;
    }

    .storefront-mobile-preference-menu__options small {
        display: block;
        color: #667085;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 500;
    }

    .storefront-mobile-preference-menu__symbol {
        display: grid;
        width: 34px;
        height: 34px;
        min-height: 34px;
        flex: 0 0 34px;
        place-items: center;
        border-radius: 10px;
        background: rgb(242 243 246);
        color: #475467;
        font-size: 12px;
        font-weight: 600;
    }

    .storefront-mobile-preference-menu__check {
        display: grid;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        place-items: center;
        margin-inline-start: auto;
        border: 1.5px solid #c7cdd6;
        border-radius: 50%;
        color: transparent;
    }

    .storefront-mobile-preference-menu__check svg {
        width: 13px;
        height: 13px;
    }

    .storefront-mobile-preference-menu__options > [aria-pressed="true"] .storefront-mobile-preference-menu__symbol,
    .storefront-mobile-preference-menu__options > [aria-current="true"] .storefront-mobile-preference-menu__symbol {
        background: rgb(var(--color-primary) / 0.1);
        color: rgb(var(--color-primary));
    }

    .storefront-mobile-preference-menu__options > [aria-pressed="true"] .storefront-mobile-preference-menu__check,
    .storefront-mobile-preference-menu__options > [aria-current="true"] .storefront-mobile-preference-menu__check {
        border-color: var(--sheet-accent-ink);
        background: var(--sheet-accent-ink);
        color: #fff;
    }

    .storefront-mobile-preference-menu__note {
        margin: 12px 0 0;
        color: #667085;
        font-size: 12px;
        line-height: 1.65;
    }

    .storefront-mobile-primary-nav {
        position: relative;
        display: flex;
        width: 100%;
        height: 48px;
        align-items: stretch;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-inline: 12px;
        border-top: 1px solid rgb(15 23 42 / 0.14);
        background: #fff;
        scrollbar-width: none;
        scroll-padding-inline: 12px;
        scroll-snap-type: inline proximity;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
        box-shadow: 0 1px 0 rgb(var(--color-primary) / 0.06),
                    0 5px 16px rgb(15 23 42 / 0.055);
        transform: translate3d(0, 0, 0);
        transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
        pointer-events: auto;
        -webkit-overflow-scrolling: touch;
    }

    .storefront-mobile-primary-nav::-webkit-scrollbar {
        display: none;
    }

    .storefront-mobile-primary-nav--hidden {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
        pointer-events: none;
    }

    .storefront-mobile-app-header:has(.storefront-mobile-primary-nav--hidden) .storefront-mobile-discovery,
    .storefront-mobile-discovery:last-child {
        box-shadow: 0 1px 0 rgb(var(--color-primary) / 0.06),
                    0 5px 16px rgb(15 23 42 / 0.055);
    }

    .storefront-mobile-primary-nav > a,
    .storefront-mobile-primary-nav > button {
        position: relative;
        display: inline-flex;
        min-width: 48px;
        min-height: 48px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding-inline: 12px;
        border: 0;
        background: transparent;
        color: #636975;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .storefront-mobile-primary-nav > a::after,
    .storefront-mobile-primary-nav > button::after {
        position: absolute;
        inset-inline: 12px;
        inset-block-end: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: transparent;
        content: "";
        transition: background-color 160ms ease;
    }

    .storefront-mobile-primary-nav > [aria-current="page"] {
        color: rgb(var(--color-secondary));
        font-weight: 800;
    }

    .storefront-mobile-primary-nav > [aria-current="page"]::after {
        background: rgb(var(--color-primary));
    }

    .storefront-mobile-primary-nav svg {
        width: 14px;
        height: 14px;
    }

    /* Phone-only category explorer. */
    .storefront-mobile-category-backdrop {
        background: rgb(15 23 42 / 0.38);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .storefront-mobile-category-panel {
        display: flex;
        width: min(380px, 94vw);
        height: 100dvh;
        flex-direction: column;
        overflow: hidden;
        margin-inline-end: auto;
        border-inline-end: 1px solid rgb(var(--color-primary) / 0.12);
        background: #fff;
        box-shadow: -16px 0 48px rgb(15 23 42 / 0.18);
        color: rgb(var(--color-secondary));
    }

    [dir="ltr"] .storefront-mobile-category-panel {
        box-shadow: 16px 0 48px rgb(15 23 42 / 0.18);
    }

    .storefront-mobile-category-header {
        display: flex;
        min-height: calc(58px + env(safe-area-inset-top, 0px));
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: env(safe-area-inset-top, 0px) 10px 0 16px;
        border-bottom: 1px solid rgb(226 232 240);
        background: #fff;
    }

    .storefront-mobile-category-header > div {
        min-width: 0;
    }

    .storefront-mobile-category-header h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
    }

    .storefront-mobile-category-header p {
        margin: 1px 0 0;
        overflow: hidden;
        color: #717784;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-mobile-category-header button {
        display: grid;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        place-items: center;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgb(var(--color-secondary));
    }

    .storefront-mobile-category-header button:hover {
        background: rgb(var(--color-primary) / 0.07);
    }

    .storefront-mobile-category-header svg {
        width: 19px;
        height: 19px;
    }

    .storefront-mobile-category-scroll {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 14px 16px 24px;
        overscroll-behavior: contain;
        scrollbar-color: rgb(var(--color-primary) / 0.32) transparent;
        scrollbar-width: thin;
    }

    .storefront-mobile-category-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .storefront-mobile-category-scroll::-webkit-scrollbar-thumb {
        border-radius: 99px;
        background: rgb(var(--color-primary) / 0.32);
    }

    .storefront-mobile-category-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .storefront-mobile-category-card {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 108px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        overflow: hidden;
        padding: 12px;
        border: 1px solid rgb(226 232 240);
        border-radius: 15px;
        background: linear-gradient(145deg, #fff, rgb(var(--color-cream) / 0.48));
        text-align: start;
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .storefront-mobile-category-card::before {
        position: absolute;
        inset-block-start: -24px;
        inset-inline-end: -18px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgb(var(--color-primary) / 0.07);
        content: "";
    }

    .storefront-mobile-category-card:hover {
        border-color: rgb(var(--color-primary) / 0.26);
        box-shadow: 0 7px 18px rgb(15 23 42 / 0.07);
        transform: translateY(-1px);
    }

    .storefront-mobile-category-card__art,
    .storefront-mobile-category-hero__art {
        position: relative;
        display: grid;
        overflow: hidden;
        place-items: center;
        background: rgb(var(--color-primary) / 0.09);
        color: rgb(var(--color-secondary));
    }

    .storefront-mobile-category-card__art {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .storefront-mobile-category-card__art img,
    .storefront-mobile-category-hero__art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-mobile-category-card__art svg {
        width: 18px;
        height: 18px;
    }

    .storefront-mobile-category-card__copy {
        position: relative;
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: flex-end;
        justify-content: space-between;
        gap: 4px;
    }

    .storefront-mobile-category-card__copy > span {
        min-width: 0;
    }

    .storefront-mobile-category-card__copy strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.55;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .storefront-mobile-category-card__copy small {
        display: block;
        color: #717784;
        font-size: 9px;
        font-weight: 600;
    }

    .storefront-mobile-category-card__copy > svg,
    .storefront-mobile-subcategory-grid svg,
    .storefront-mobile-category-browse svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        color: rgb(var(--color-secondary));
    }

    [dir="rtl"] .storefront-mobile-category-card__copy > svg,
    [dir="rtl"] .storefront-mobile-subcategory-grid svg,
    [dir="rtl"] .storefront-mobile-category-browse svg {
        transform: rotate(180deg);
    }

    .storefront-mobile-category-empty {
        padding: 46px 18px;
        color: #717784;
        text-align: center;
    }

    .storefront-mobile-category-empty svg {
        width: 38px;
        height: 38px;
        margin-inline: auto;
    }

    .storefront-mobile-category-empty strong {
        display: block;
        margin: 10px 0 4px;
        color: rgb(var(--color-secondary));
        font-size: 14px;
    }

    .storefront-mobile-category-empty p {
        margin: 0;
        font-size: 11px;
    }

    .storefront-mobile-category-detail {
        animation: storefrontCategoryDetailIn 200ms ease both;
    }

    .storefront-mobile-category-back {
        display: flex;
        min-height: 44px;
        align-items: center;
        gap: 7px;
        margin: -4px -4px 9px;
        padding: 6px 7px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #717784;
        font-size: 11px;
        font-weight: 700;
    }

    .storefront-mobile-category-back:hover {
        background: rgb(var(--color-primary) / 0.06);
        color: rgb(var(--color-secondary));
    }

    .storefront-mobile-category-back svg {
        width: 16px;
        height: 16px;
    }

    [dir="ltr"] .storefront-mobile-category-back svg {
        transform: rotate(180deg);
    }

    .storefront-mobile-category-hero {
        position: relative;
        display: flex;
        min-height: 84px;
        align-items: center;
        gap: 12px;
        overflow: hidden;
        margin-bottom: 10px;
        padding: 14px;
        border: 1px solid rgb(var(--color-primary) / 0.18);
        border-radius: 16px;
        background: linear-gradient(135deg, rgb(var(--color-primary) / 0.08), #fff);
    }

    .storefront-mobile-category-hero::after {
        position: absolute;
        inset-inline-end: -26px;
        inset-block-end: -42px;
        width: 110px;
        height: 110px;
        border: 22px solid rgb(var(--color-primary) / 0.055);
        border-radius: 50%;
        content: "";
    }

    .storefront-mobile-category-hero__art {
        z-index: 1;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 5px 16px rgb(15 23 42 / 0.07);
    }

    .storefront-mobile-category-hero__art svg {
        width: 22px;
        height: 22px;
    }

    .storefront-mobile-category-hero strong {
        z-index: 1;
        min-width: 0;
        font-size: 15px;
    }

    .storefront-mobile-category-browse {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 12px;
        padding: 7px 11px;
        border: 1px solid rgb(var(--color-primary) / 0.2);
        border-radius: 11px;
        background: rgb(var(--color-primary) / 0.08);
        color: rgb(var(--color-secondary));
        font-size: 11px;
        font-weight: 800;
        text-align: start;
    }

    .storefront-mobile-category-subtitle {
        margin: 0 2px 7px;
        color: #717784;
        font-size: 10px;
        font-weight: 700;
    }

    .storefront-mobile-subcategory-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .storefront-mobile-subcategory-grid button {
        display: flex;
        min-width: 0;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 9px;
        border: 1px solid rgb(226 232 240);
        border-radius: 11px;
        background: #fff;
        color: rgb(var(--color-secondary));
        font-size: 11px;
        font-weight: 700;
        text-align: start;
    }

    .storefront-mobile-subcategory-grid button:hover {
        border-color: rgb(var(--color-primary) / 0.25);
        background: rgb(var(--color-primary) / 0.07);
    }

    .storefront-mobile-category-dock {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) 52px;
        flex: 0 0 auto;
        gap: 6px;
        padding: 7px 9px calc(7px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgb(226 232 240);
        background: rgb(255 255 255 / 0.96);
        box-shadow: 0 -8px 24px rgb(15 23 42 / 0.06);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .storefront-mobile-category-dock form {
        min-width: 0;
    }

    .storefront-mobile-category-dock > a,
    .storefront-mobile-category-dock > button,
    .storefront-mobile-category-dock form > button {
        position: relative;
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 6px 8px;
        border: 1px solid rgb(var(--color-primary) / 0.23);
        border-radius: 10px;
        background: #fff;
        color: rgb(var(--color-secondary));
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .storefront-mobile-category-dock > a > span,
    .storefront-mobile-category-dock > button > span,
    .storefront-mobile-category-dock form > button > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-mobile-category-dock > a svg,
    .storefront-mobile-category-dock > button svg,
    .storefront-mobile-category-dock form > button svg {
        width: 15px;
        height: 15px;
    }

    .storefront-mobile-category-dock .storefront-mobile-category-dock__primary {
        border-color: rgb(var(--color-secondary));
        background: rgb(var(--color-secondary));
        color: #fff;
    }

    .storefront-mobile-category-dock .storefront-mobile-category-dock__logout {
        border-color: rgb(185 28 28 / 0.16);
        background: rgb(254 242 242);
        color: rgb(153 27 27);
    }

    .storefront-mobile-category-dock .storefront-mobile-category-dock__cart {
        flex-direction: column;
        gap: 0;
        padding: 2px;
        color: #606672;
        font-size: 9px;
    }

    .storefront-mobile-category-dock__cart small {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 3px;
        display: grid;
        min-width: 15px;
        height: 15px;
        place-items: center;
        padding-inline: 3px;
        border-radius: 99px;
        background: rgb(var(--color-primary));
        box-shadow: 0 0 0 2px #fff;
        color: #fff;
        font: 700 9px/1 Arial, sans-serif;
    }
}

/* Let the guest actions use the space available on wider phones without
   displacing the centered store mark. Both side columns stay symmetrical. */
@media (min-width: 390px) and (max-width: 767px) {
    .storefront-mobile-identity--guest {
        --storefront-guest-auth-width: clamp(146px, calc(34vw + 14px), 196px);
        grid-template-columns:
            var(--storefront-guest-auth-width)
            minmax(60px, 1fr)
            var(--storefront-guest-auth-width);
        gap: 6px;
        padding-inline: max(8px, env(safe-area-inset-left, 0px));
    }

    .storefront-mobile-guest-auth {
        width: var(--storefront-guest-auth-width);
    }

    .storefront-mobile-guest-auth__button {
        flex-basis: 50%;
        gap: 5px;
        padding-inline: clamp(7px, 1.6vw, 11px);
        font-size: clamp(10px, 1.8vw, 11.5px);
    }

    .storefront-mobile-guest-auth__button svg {
        width: clamp(12px, 2.2vw, 14px);
        height: clamp(12px, 2.2vw, 14px);
        flex-basis: clamp(12px, 2.2vw, 14px);
    }
}

@media (max-width: 479px) {
    .storefront-mobile-guest-auth__button {
        flex: 1 1 0;
        flex-direction: row;
        gap: 2px;
        padding-inline: 3px;
        font-size: 9px;
        line-height: 1;
    }

    .storefront-mobile-guest-auth__button svg {
        display: block;
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }

    [dir="rtl"] .storefront-mobile-guest-auth__button:first-child,
    [dir="ltr"] .storefront-mobile-guest-auth__button:last-child {
        flex: 1.05 1 0;
    }

    [dir="rtl"] .storefront-mobile-guest-auth__button:last-child,
    [dir="ltr"] .storefront-mobile-guest-auth__button:first-child {
        flex: 0.95 1 0;
    }
}

@media (min-width: 360px) and (max-width: 389px) {
    .storefront-mobile-identity--guest {
        --storefront-guest-auth-width: clamp(144px, calc((100vw - 72px) / 2), 158px);
        grid-template-columns:
            var(--storefront-guest-auth-width)
            minmax(50px, 1fr)
            var(--storefront-guest-auth-width);
        gap: 4px;
        padding-inline: 6px;
    }

    .storefront-mobile-guest-auth {
        width: var(--storefront-guest-auth-width);
    }

    .storefront-mobile-guest-auth__button {
        padding-inline: 2px;
        font-size: 8.5px;
    }

    .storefront-mobile-guest-auth__button svg {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }
}

@media (min-width: 390px) and (max-width: 479px) {
    .storefront-mobile-identity--guest {
        --storefront-guest-auth-width: clamp(158px, calc((100vw - 74px) / 2), 202px);
        grid-template-columns:
            var(--storefront-guest-auth-width)
            minmax(52px, 1fr)
            var(--storefront-guest-auth-width);
        gap: 4px;
        padding-inline: 6px;
    }
}

@media (min-width: 440px) and (max-width: 479px) {
    .storefront-mobile-guest-auth__button {
        gap: 3px;
        padding-inline: 4px;
        font-size: 9.5px;
    }

    .storefront-mobile-guest-auth__button svg {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .storefront-mobile-identity--guest {
        --storefront-guest-auth-width: clamp(202px, calc((100vw - 74px) / 2), 260px);
        grid-template-columns:
            var(--storefront-guest-auth-width)
            minmax(52px, 1fr)
            var(--storefront-guest-auth-width);
        gap: 4px;
        padding-inline: 6px;
    }

    .storefront-mobile-guest-auth__button {
        gap: 4px;
        padding-inline: clamp(7px, 1.4vw, 10px);
    }
}

@media (max-width: 359px) {
    .storefront-mobile-identity {
        padding-inline: 8px;
    }

    .storefront-mobile-identity--guest {
        grid-template-columns: 126px minmax(48px, 1fr) 126px;
        gap: 3px;
        padding-inline: 6px;
    }

    .storefront-mobile-guest-auth {
        width: 126px;
    }

    .storefront-mobile-guest-auth__button {
        gap: 1.5px;
        padding-inline: 2px;
        font-size: 8px;
    }

    .storefront-mobile-guest-auth__button:first-child {
        flex-basis: 50%;
    }

    .storefront-mobile-guest-auth__button svg {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }

    .storefront-mobile-discovery {
        grid-template-columns: minmax(0, 1fr) 116px;
        gap: 6px;
        padding-inline: 8px;
    }

    .storefront-mobile-search-launch__label {
        font-size: 12px;
    }

    .storefront-mobile-primary-nav {
        padding-inline: 8px;
    }

    .storefront-mobile-category-scroll {
        padding-inline: 12px;
    }
}

@keyframes storefrontCategoryDetailIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================================
   HOMEPAGE PROMOTIONAL BANNERS
   Flexible merchant-driven banners for one, two, or many live items.
   ============================================================================ */
.storefront-promotional-banners {
    --promotional-banner-border: rgb(15 23 42 / 0.08);
    --promotional-banner-shadow: 0 18px 45px rgb(15 23 42 / 0.1);
    position: relative;
    padding-block: clamp(24px, 3vw, 36px);
    background: #fff;
}

.storefront-promotional-banners__container {
    width: min(100%, var(--storefront-layout-max-width));
    margin-inline: auto;
    padding-inline: var(--storefront-layout-gutter);
}

.storefront-promotional-banners__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.storefront-promotional-banners__item {
    min-width: 0;
}

@media (min-width: 768px) {
    .storefront-promotional-banners__item:only-child,
    .storefront-promotional-banners__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.storefront-promotional-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: clamp(270px, 26vw, 330px);
    height: 100%;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--promotional-banner-border);
    border-radius: 24px;
    background: linear-gradient(135deg, rgb(var(--color-secondary)), rgb(var(--color-primary)));
    color: #fff;
    box-shadow: var(--promotional-banner-shadow);
    text-decoration: none;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.storefront-promotional-banners__item:only-child .storefront-promotional-banner,
.storefront-promotional-banners__item:last-child:nth-child(odd) .storefront-promotional-banner {
    min-height: clamp(300px, 30vw, 370px);
}

.storefront-promotional-banner::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(0deg, rgb(8 11 17 / 0.9) 0%, rgb(8 11 17 / 0.56) 48%, rgb(8 11 17 / 0.08) 100%),
        linear-gradient(90deg, rgb(8 11 17 / 0.36), transparent 68%);
    content: '';
    pointer-events: none;
}

[dir="rtl"] .storefront-promotional-banner::before {
    background:
        linear-gradient(0deg, rgb(8 11 17 / 0.9) 0%, rgb(8 11 17 / 0.56) 48%, rgb(8 11 17 / 0.08) 100%),
        linear-gradient(270deg, rgb(8 11 17 / 0.36), transparent 68%);
}

.storefront-promotional-banner__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    background:
        radial-gradient(circle at 80% 16%, rgb(255 255 255 / 0.18), transparent 32%),
        linear-gradient(135deg, rgb(var(--color-secondary)), rgb(var(--color-primary)));
}

.storefront-promotional-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.storefront-promotional-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(100%, 650px);
    min-height: inherit;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(22px, 3.2vw, 38px);
}

.storefront-promotional-banner__badge {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    margin-block-end: 11px;
    padding: 5px 10px;
    border: 1px solid rgb(255 255 255 / 0.24);
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.88);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.13);
    backdrop-filter: blur(8px);
}

.storefront-promotional-banner__title {
    display: block;
    max-width: 22ch;
    margin: 0;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 850;
    letter-spacing: -0.022em;
    line-height: 1.28;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.28);
}

.storefront-promotional-banner__description {
    display: block;
    max-width: 52ch;
    margin: 8px 0 0;
    color: rgb(255 255 255 / 0.84);
    font-size: clamp(12px, 1.25vw, 14px);
    line-height: 1.75;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.28);
}

.storefront-promotional-banner__action {
    display: inline-flex;
    max-width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    margin-block-start: 17px;
    padding: 9px 14px;
    border: 1px solid rgb(255 255 255 / 0.84);
    border-radius: 11px;
    background: rgb(255 255 255 / 0.95);
    color: rgb(var(--color-secondary));
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    box-shadow: 0 8px 22px rgb(0 0 0 / 0.16);
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.storefront-promotional-banner__action > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.storefront-promotional-banner__action svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

[dir="rtl"] .storefront-promotional-banner__action svg {
    transform: rotate(180deg);
}

.storefront-promotional-banner:focus-visible {
    outline: 3px solid rgb(var(--color-primary) / 0.32);
    outline-offset: 4px;
}

@media (hover: hover) {
    .storefront-promotional-banner:hover {
        border-color: rgb(var(--color-primary) / 0.2);
        box-shadow: 0 22px 52px rgb(15 23 42 / 0.14);
        color: #fff;
        transform: translateY(-3px);
    }

    .storefront-promotional-banner:hover .storefront-promotional-banner__media img {
        transform: scale(1.025);
    }

    .storefront-promotional-banner:hover .storefront-promotional-banner__action {
        background: rgb(var(--color-primary));
        border-color: rgb(var(--color-primary));
        color: #fff;
        transform: translateY(-1px);
    }
}

.dark .storefront-promotional-banners {
    --promotional-banner-border: rgb(255 255 255 / 0.09);
    --promotional-banner-shadow: 0 18px 46px rgb(0 0 0 / 0.24);
    background: rgb(17 24 39);
}

@media (max-width: 767px) {
    .storefront-promotional-banners {
        padding-block: 24px;
    }

    .storefront-promotional-banners__container {
        padding-inline: 16px;
    }

    .storefront-promotional-banners__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .storefront-promotional-banners__grid.has-many {
        grid-template-columns: none;
        grid-auto-columns: min(84vw, 340px);
        grid-auto-flow: column;
        gap: 12px;
        overflow-x: auto;
        margin-inline: -16px;
        padding: 3px 16px 12px;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 16px;
        scroll-snap-type: inline mandatory;
        scrollbar-color: rgb(var(--color-primary) / 0.36) transparent;
        scrollbar-width: thin;
    }

    .storefront-promotional-banners__grid.has-many::-webkit-scrollbar {
        height: 4px;
    }

    .storefront-promotional-banners__grid.has-many::-webkit-scrollbar-track {
        background: transparent;
    }

    .storefront-promotional-banners__grid.has-many::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgb(var(--color-primary) / 0.36);
    }

    .storefront-promotional-banners__grid.has-many .storefront-promotional-banners__item {
        grid-column: auto;
        scroll-snap-align: start;
    }

    .storefront-promotional-banner,
    .storefront-promotional-banners__item:only-child .storefront-promotional-banner,
    .storefront-promotional-banners__item:last-child:nth-child(odd) .storefront-promotional-banner {
        min-height: 250px;
        border-radius: 19px;
    }

    .storefront-promotional-banner__content {
        width: 100%;
        padding: 20px;
    }

    [dir="rtl"] .storefront-promotional-banner__content {
        padding-inline-start: 58px;
    }

    .storefront-promotional-banner__title {
        max-width: 19ch;
        font-size: clamp(22px, 7vw, 28px);
    }

    .storefront-promotional-banner__description {
        font-size: 12px;
    }

    .storefront-promotional-banner__action {
        min-height: 40px;
        margin-block-start: 14px;
        padding: 8px 13px;
    }
}

@media (max-width: 379px) {
    .storefront-promotional-banners__container {
        padding-inline: 12px;
    }

    .storefront-promotional-banners__grid.has-many {
        grid-auto-columns: 86vw;
        margin-inline: -12px;
        padding-inline: 12px;
        scroll-padding-inline: 12px;
    }

    .storefront-promotional-banner__content {
        padding: 17px;
    }

    [dir="rtl"] .storefront-promotional-banner__content {
        padding-inline-start: 52px;
    }

    .storefront-promotional-banner__title {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-promotional-banner,
    .storefront-promotional-banner__media img,
    .storefront-promotional-banner__action {
        transition: none;
    }
}

/* ============================================================================
   HOMEPAGE TESTIMONIALS
   Calm, trust-led cards with clear review, customer and product hierarchy.
   ============================================================================ */
.storefront-testimonials {
    --testimonial-border: rgb(15 23 42 / 0.08);
    --testimonial-muted: rgb(100 116 139);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(58px, 7vw, 92px);
    background:
        linear-gradient(180deg, #fff 0%, rgb(var(--color-primary) / 0.035) 48%, #fff 100%);
}

.storefront-testimonials__glow {
    position: absolute;
    z-index: -1;
    width: min(36vw, 430px);
    aspect-ratio: 1;
    border-radius: 999px;
    filter: blur(72px);
    opacity: 0.5;
    pointer-events: none;
}

.storefront-testimonials__glow--start {
    inset-block-start: -42%;
    inset-inline-start: -12%;
    background: rgb(var(--color-primary) / 0.12);
}

.storefront-testimonials__glow--end {
    inset-block-end: -55%;
    inset-inline-end: -10%;
    background: rgb(var(--color-gold) / 0.12);
}

.storefront-testimonials__container {
    position: relative;
    z-index: 1;
    width: min(100%, var(--storefront-layout-max-width));
    margin-inline: auto;
    padding-inline: var(--storefront-layout-gutter);
}

.storefront-testimonials__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(24px, 5vw, 72px);
    margin-block-end: clamp(30px, 4vw, 48px);
}

.storefront-testimonials__heading {
    max-width: 720px;
}

.storefront-testimonials__eyebrow {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    margin-block-end: 12px;
    padding: 5px 11px;
    border: 1px solid rgb(var(--color-gold) / 0.2);
    border-radius: 999px;
    background: rgb(var(--color-gold) / 0.075);
    color: rgb(var(--color-gold));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.035em;
}

.storefront-testimonials__eyebrow svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.storefront-testimonials__heading h2 {
    margin: 0;
    color: rgb(var(--color-secondary));
    font-family: var(--font-display, inherit);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.22;
}

.storefront-testimonials__heading > p {
    max-width: 650px;
    margin: 12px 0 0;
    color: var(--testimonial-muted);
    font-size: clamp(13px, 1.2vw, 15px);
    line-height: 1.8;
}

.storefront-testimonials__summary {
    display: flex;
    min-width: 184px;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgb(var(--color-gold) / 0.2);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.86);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.055);
    backdrop-filter: blur(10px);
}

.storefront-testimonials__summary-stars {
    display: flex;
    gap: 1px;
    color: rgb(148 163 184 / 0.42);
}

.storefront-testimonials__summary-stars svg {
    width: 14px;
    height: 14px;
}

.storefront-testimonials__summary-stars .is-active {
    color: #f59e0b;
}

.storefront-testimonials__summary-copy {
    display: grid;
    gap: 1px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--testimonial-border);
}

.storefront-testimonials__summary-copy span {
    color: rgb(var(--color-secondary));
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.storefront-testimonials__summary-copy strong {
    font-size: 17px;
    font-weight: 850;
}

.storefront-testimonials__summary-copy small {
    color: var(--testimonial-muted);
    font-size: 10px;
}

.storefront-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.storefront-testimonials__grid > div {
    min-width: 0;
}

.storefront-testimonials__slider .splide__track {
    padding: 7px 4px 14px !important;
}

.storefront-testimonials__slider .splide__list {
    align-items: stretch;
}

.storefront-testimonials__slider .splide__slide {
    display: flex;
    height: auto;
}

.storefront-testimonial-card {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(20px, 2.2vw, 26px);
    border: 1px solid var(--testimonial-border);
    border-radius: 20px;
    background: rgb(255 255 255 / 0.94);
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.045);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.storefront-testimonial-card::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 28px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgb(var(--color-primary) / 0.62), transparent);
    content: '';
}

@media (hover: hover) {
    .storefront-testimonial-card:hover {
        border-color: rgb(var(--color-primary) / 0.18);
        box-shadow: 0 18px 42px rgb(15 23 42 / 0.085);
        transform: translateY(-3px);
    }
}

.storefront-testimonial-card__rating-row {
    display: flex;
    min-height: 27px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.storefront-testimonial-card__rating {
    display: flex;
    align-items: center;
    gap: 7px;
}

.storefront-testimonial-card__rating > span {
    display: flex;
    gap: 2px;
}

.storefront-testimonial-card__rating svg {
    width: 15px;
    height: 15px;
    color: rgb(226 232 240);
}

.storefront-testimonial-card__rating svg.is-active {
    color: #f59e0b;
}

.storefront-testimonial-card__rating strong {
    color: rgb(146 64 14);
    font-size: 11px;
    font-weight: 800;
}

.storefront-testimonial-card__verified {
    display: inline-flex;
    min-width: 0;
    min-height: 26px;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid rgb(16 185 129 / 0.16);
    border-radius: 999px;
    background: rgb(16 185 129 / 0.07);
    color: rgb(5 150 105);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.storefront-testimonial-card__verified svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
}

.storefront-testimonial-card__body {
    flex: 1 1 auto;
    padding-block: 20px 24px;
}

.storefront-testimonial-card__body h3 {
    margin: 0 0 8px;
    color: rgb(var(--color-secondary));
    font-family: var(--font-display, inherit);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

.storefront-testimonial-card__body blockquote {
    position: relative;
    margin: 0;
}

.storefront-testimonial-card__quote-mark {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-start: 0;
    color: rgb(var(--color-primary) / 0.17);
    font-family: Georgia, serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.storefront-testimonial-card__body blockquote p {
    position: relative;
    margin: 0;
    padding-inline-start: 26px;
    color: rgb(71 85 105);
    font-size: 13px;
    line-height: 1.9;
}

.storefront-testimonial-card__footer {
    display: grid;
    gap: 14px;
    padding-block-start: 17px;
    border-block-start: 1px solid rgb(15 23 42 / 0.065);
}

.storefront-testimonial-card__customer {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.storefront-testimonial-card__customer > img,
.storefront-testimonial-card__initial {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.16), 0 5px 12px rgb(15 23 42 / 0.08);
}

.storefront-testimonial-card__customer > img {
    object-fit: cover;
}

.storefront-testimonial-card__initial {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-primary) / 0.76));
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.storefront-testimonial-card__customer-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.storefront-testimonial-card__customer-copy > strong {
    overflow: hidden;
    color: rgb(var(--color-secondary));
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-testimonial-card__customer-copy small {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: var(--testimonial-muted);
    font-size: 10px;
    line-height: 1.45;
}

.storefront-testimonial-card__customer-copy small > span,
.storefront-testimonial-card__customer-copy time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-testimonial-card__customer-copy i {
    font-style: normal;
}

.storefront-testimonial-card__product {
    display: grid;
    min-width: 0;
    min-height: 42px;
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 5px;
    border: 1px solid rgb(var(--color-primary) / 0.09);
    border-radius: 11px;
    background: rgb(var(--color-primary) / 0.045);
    color: rgb(71 85 105);
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.storefront-testimonial-card__product > img,
.storefront-testimonial-card__product > span:first-child {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    color: rgb(var(--color-primary));
    object-fit: cover;
}

.storefront-testimonial-card__product > span:first-child svg {
    width: 15px;
    height: 15px;
}

.storefront-testimonial-card__product > strong {
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-testimonial-card__product-arrow {
    width: 14px;
    height: 14px;
    color: rgb(var(--color-primary));
}

.storefront-testimonial-card__product:not(.storefront-testimonial-card__product--static):hover {
    border-color: rgb(var(--color-primary) / 0.2);
    background: rgb(var(--color-primary) / 0.075);
    color: rgb(var(--color-primary));
}

.storefront-testimonial-card__product--static {
    grid-template-columns: 30px minmax(0, 1fr);
}

.storefront-testimonials__arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block-start: 12px;
}

.storefront-testimonials__slider .storefront-testimonials__arrow {
    position: static;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 12px;
    background: #fff;
    color: rgb(var(--color-primary));
    opacity: 1;
    box-shadow: 0 6px 18px rgb(15 23 42 / 0.07);
    transform: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.storefront-testimonials__slider .storefront-testimonials__arrow:hover {
    border-color: rgb(var(--color-primary) / 0.32);
    background: rgb(var(--color-primary));
    color: #fff;
    transform: translateY(-1px);
}

.storefront-testimonials__slider .storefront-testimonials__arrow:disabled {
    opacity: 0.38;
    transform: none;
}

.storefront-testimonials__slider .storefront-testimonials__arrow svg,
.storefront-testimonials__slider .storefront-testimonials__arrow:hover svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
}

.storefront-testimonials__slider .splide__pagination {
    position: static;
    gap: 5px;
    margin-block-start: 14px;
    padding: 0;
}

.storefront-testimonials__slider .splide__pagination__page {
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 999px;
    background: rgb(var(--color-primary));
    opacity: 0.22;
    transition: width 160ms ease, opacity 160ms ease;
}

.storefront-testimonials__slider .splide__pagination__page.is-active {
    width: 22px;
    border-radius: 999px;
    background: rgb(var(--color-primary));
    opacity: 1;
    transform: none;
}

.storefront-testimonials :is(a, button):focus-visible {
    outline: 3px solid rgb(var(--color-primary) / 0.25);
    outline-offset: 3px;
}

[dir="rtl"] .storefront-testimonial-card__product-arrow,
[dir="rtl"] .storefront-testimonials__arrow svg {
    transform: rotate(180deg);
}

.dark .storefront-testimonials {
    --testimonial-border: rgb(255 255 255 / 0.09);
    --testimonial-muted: rgb(148 163 184);
    background: linear-gradient(180deg, rgb(17 24 39), rgb(15 23 42));
}

.dark .storefront-testimonials__heading h2,
.dark .storefront-testimonials__summary-copy span,
.dark .storefront-testimonial-card__body h3,
.dark .storefront-testimonial-card__customer-copy > strong {
    color: #f8fafc;
}

.dark .storefront-testimonials__heading > p,
.dark .storefront-testimonial-card__body blockquote p {
    color: rgb(203 213 225);
}

.dark .storefront-testimonials__summary,
.dark .storefront-testimonial-card,
.dark .storefront-testimonials__slider .storefront-testimonials__arrow {
    background: rgb(30 41 59 / 0.9);
}

.dark .storefront-testimonial-card__footer {
    border-block-start-color: rgb(255 255 255 / 0.08);
}

.dark .storefront-testimonial-card__product {
    background: rgb(255 255 255 / 0.045);
    color: rgb(203 213 225);
}

@media (max-width: 1023px) {
    .storefront-testimonials__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .storefront-testimonials {
        padding-block: 52px;
    }

    .storefront-testimonials__container {
        padding-inline: 16px;
    }

    .storefront-testimonials__header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 20px;
        margin-block-end: 26px;
    }

    .storefront-testimonials__heading h2 {
        font-size: clamp(26px, 8vw, 34px);
    }

    .storefront-testimonials__summary {
        min-width: 0;
        width: fit-content;
        padding: 11px 13px;
    }

    .storefront-testimonials__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .storefront-testimonial-card {
        padding: 20px;
        border-radius: 17px;
    }

    .storefront-testimonial-card__body {
        padding-block: 18px 21px;
    }

    .storefront-testimonial-card__verified {
        max-width: 132px;
    }

    .storefront-testimonial-card__verified span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 379px) {
    .storefront-testimonials__container {
        padding-inline: 12px;
    }

    .storefront-testimonial-card {
        padding: 17px;
    }

    .storefront-testimonial-card__rating-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-testimonial-card,
    .storefront-testimonials__arrow,
    .storefront-testimonials__slider .splide__pagination__page {
        transition-duration: 0.01ms !important;
    }
}

/* Compact commerce reviews: familiar customer, rating, review, and product order. */
.storefront-testimonials {
    --testimonial-border: rgb(15 23 42 / 0.1);
    --testimonial-muted: #667085;
    padding-block: clamp(38px, 4.5vw, 56px);
    border-block: 1px solid rgb(15 23 42 / 0.055);
    background: #f8f9fa;
}

.storefront-testimonials__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px;
    margin-block-end: clamp(22px, 2.5vw, 30px);
    text-align: start;
}

.storefront-testimonials__heading {
    max-width: 680px;
}

.storefront-testimonials__eyebrow {
    min-height: 0;
    margin-block-end: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgb(var(--color-primary));
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.25rem;
    text-transform: uppercase;
}

.storefront-testimonials__heading h2 {
    color: rgb(var(--color-secondary));
    font-size: clamp(25px, 2.8vw, 34px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

.storefront-testimonials__heading > p {
    max-width: 620px;
    margin: 7px 0 0;
    color: var(--testimonial-muted);
    font-size: 12.5px;
    line-height: 1.75;
}

.storefront-testimonials__summary {
    min-width: 0;
    margin-block-start: 0;
    padding: 0 18px 0 0;
    border: 0;
    border-inline-start: 1px solid rgb(15 23 42 / 0.12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.storefront-testimonials__summary-stars {
    gap: 2px;
}

.storefront-testimonials__summary-stars svg {
    width: 13px;
    height: 13px;
}

.storefront-testimonials__summary-copy {
    gap: 0;
    padding-inline-start: 13px;
    border-inline-start-color: rgb(15 23 42 / 0.12);
    text-align: start;
}

.storefront-testimonials__summary-copy span {
    font-size: 11px;
    font-weight: 650;
}

.storefront-testimonials__summary-copy strong {
    font-size: 16px;
    font-weight: 800;
}

.storefront-testimonials__summary-copy small {
    margin-block-start: 1px;
    font-size: 9.5px;
}

.storefront-testimonials__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.storefront-testimonials__slider .splide__track {
    padding: 2px 2px 9px !important;
}

.storefront-testimonial-card {
    min-height: 100%;
    padding: 17px;
    border: 1px solid var(--testimonial-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 0.035);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.storefront-testimonial-card::before {
    display: none;
}

@media (hover: hover) {
    .storefront-testimonial-card:hover {
        border-color: rgb(15 23 42 / 0.17);
        box-shadow: 0 7px 20px rgb(15 23 42 / 0.055);
        transform: none;
    }
}

.storefront-testimonial-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 7px;
}

.storefront-testimonial-card__rating {
    align-self: start;
    gap: 0;
}

.storefront-testimonial-card__rating > span {
    gap: 2px;
}

.storefront-testimonial-card__rating svg {
    width: 13px;
    height: 13px;
    color: #d9dde3;
}

.storefront-testimonial-card__rating strong {
    color: #7a5a12;
    font-size: 9.5px;
    font-weight: 750;
}

.storefront-testimonial-card__quote-icon {
    display: none;
}

.storefront-testimonial-card__body {
    padding-block: 15px 17px;
}

.storefront-testimonial-card__body h3 {
    margin-block-end: 6px;
    color: rgb(var(--color-secondary));
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.storefront-testimonial-card__quote-mark {
    display: none;
}

.storefront-testimonial-card__body blockquote p {
    padding-inline-start: 0;
    color: #4b5565;
    font-size: 12px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.storefront-testimonial-card__footer {
    display: block;
    padding-block-start: 11px;
    border-block-start-color: rgb(15 23 42 / 0.08);
}

.storefront-testimonial-card__customer {
    gap: 9px;
}

.storefront-testimonial-card__customer > img,
.storefront-testimonial-card__initial {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-width: 1px;
    border-color: rgb(15 23 42 / 0.1);
    box-shadow: none;
}

.storefront-testimonial-card__initial {
    background: rgb(var(--color-secondary));
    font-size: 11px;
    font-weight: 750;
}

.storefront-testimonial-card__customer-copy {
    gap: 1px;
}

.storefront-testimonial-card__customer-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.storefront-testimonial-card__customer-name > strong {
    overflow: hidden;
    color: rgb(var(--color-secondary));
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-testimonial-card__verified {
    min-height: 0;
    gap: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #147a57;
    font-size: 8px;
    font-weight: 700;
}

.storefront-testimonial-card__verified span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.storefront-testimonial-card__verified svg {
    width: 9px;
    height: 9px;
    flex-basis: 9px;
}

.storefront-testimonial-card__customer-copy small {
    gap: 4px;
    color: #8a93a1;
    font-size: 8.5px;
}

.storefront-testimonial-card__product {
    min-height: 28px;
    grid-template-columns: 22px minmax(0, 1fr) 12px;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #596273;
}

.storefront-testimonial-card__product > img,
.storefront-testimonial-card__product > span:first-child {
    width: 22px;
    height: 22px;
    border: 1px solid rgb(15 23 42 / 0.06);
    border-radius: 4px;
}

.storefront-testimonial-card__product > span:first-child svg {
    width: 11px;
    height: 11px;
}

.storefront-testimonial-card__product > strong {
    font-size: 9px;
    font-weight: 650;
}

.storefront-testimonial-card__product-arrow {
    width: 12px;
    height: 12px;
    color: #7d8795;
}

.storefront-testimonial-card__product:not(.storefront-testimonial-card__product--static):hover {
    background: transparent;
    color: rgb(var(--color-primary));
}

.storefront-testimonials__arrows {
    gap: 8px;
    margin-block-start: 16px;
}

.storefront-testimonials__slider .storefront-testimonials__arrow {
    width: 40px;
    height: 40px;
    border-color: rgb(15 23 42 / 0.12);
    border-radius: 50%;
    background: #fff;
    color: rgb(var(--color-secondary));
    box-shadow: none;
}

.storefront-testimonials__slider .storefront-testimonials__arrow:hover {
    border-color: rgb(var(--color-secondary));
    background: rgb(var(--color-secondary));
    color: #fff;
    transform: none;
}

.storefront-testimonials__slider .splide__pagination {
    gap: 6px;
    margin-block-start: 13px;
}

.storefront-testimonials__slider .splide__pagination__page {
    width: 6px;
    height: 6px;
    background: rgb(var(--color-secondary));
    opacity: 0.18;
}

.storefront-testimonials__slider .splide__pagination__page.is-active {
    width: 18px;
    background: rgb(var(--color-secondary));
    opacity: 0.85;
}

.dark .storefront-testimonials {
    --testimonial-border: rgb(255 255 255 / 0.1);
    --testimonial-muted: #a7b0bf;
    border-block-color: rgb(255 255 255 / 0.06);
    background: #111827;
}

.dark .storefront-testimonial-card {
    background: #182131;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.16);
}

.dark .storefront-testimonial-card__body blockquote p {
    color: #d1d7e0;
}

.dark .storefront-testimonial-card__customer-name > strong {
    color: #f8fafc;
}

.dark .storefront-testimonial-card__product {
    border-color: rgb(255 255 255 / 0.08);
    background: transparent;
}

@media (max-width: 1199px) {
    .storefront-testimonials__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 819px) {
    .storefront-testimonials__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .storefront-testimonials {
        padding-block: 34px;
    }

    .storefront-testimonials__header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        margin-block-end: 20px;
        text-align: start;
    }

    .storefront-testimonials__heading h2 {
        font-size: clamp(23px, 7vw, 28px);
    }

    .storefront-testimonials__heading > p {
        font-size: 12px;
        line-height: 1.7;
    }

    .storefront-testimonials__summary {
        width: auto;
        margin-block-start: 0;
        padding: 0;
        border-inline-start: 0;
    }

    .storefront-testimonial-card {
        padding: 15px;
        border-radius: 9px;
    }

    .storefront-testimonial-card__body {
        padding-block: 13px 15px;
    }

    .storefront-testimonial-card__verified {
        max-width: none;
    }
}

@media (max-width: 379px) {
    .storefront-testimonial-card {
        padding: 14px;
    }

    .storefront-testimonial-card__header {
        gap: 8px;
    }

}

@media (max-width: 559px) {
    .storefront-testimonials__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Shared homepage commerce hierarchy and phone controls. */
.storefront-section-heading__title {
    text-wrap: balance;
}

.storefront-section-heading__description {
    text-wrap: pretty;
}

.storefront-section-link,
.storefront-section-action {
    min-height: 42px;
    justify-content: center;
}

.products-splide .splide__pagination {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-block-start: 8px;
    padding: 0;
}

.products-splide .splide__pagination__page {
    position: relative;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    margin: 0;
    border-radius: 999px;
    background: transparent;
    opacity: 1;
    transform: none;
}

.products-splide .splide__pagination__page::before {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgb(var(--color-secondary) / 0.24);
    content: '';
    transition: width 160ms ease, background-color 160ms ease;
}

.products-splide .splide__pagination__page.is-active {
    width: 28px;
    background: transparent;
    transform: none;
}

.products-splide .splide__pagination__page.is-active::before {
    width: 18px;
    background: rgb(var(--color-primary));
}

@media (max-width: 767px) {
    .storefront-commerce-section,
    .storefront-categories {
        padding-block: 42px;
    }

    .storefront-section-heading,
    .storefront-categories--compact .storefront-categories__header {
        align-items: flex-start;
        margin-block-end: 24px;
        text-align: start;
    }

    .storefront-section-heading--center {
        align-items: center;
        text-align: center;
    }

    .storefront-section-heading__eyebrow {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: 0.075em;
        line-height: 1.5;
    }

    .storefront-section-heading__title {
        margin-block-start: 6px;
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.3;
    }

    .storefront-section-heading__description {
        margin-block-start: 8px;
        font-size: 12px;
        line-height: 1.7;
    }

    .storefront-section-heading__rule {
        width: 48px;
        height: 2px;
        margin-block-start: 13px;
    }

    .storefront-section-heading__rule:has(> span) {
        width: auto;
        height: auto;
    }

    .storefront-section-heading--split .storefront-section-link {
        min-height: 36px;
        margin-block-start: 10px;
        gap: 6px;
        font-size: 12px;
    }

    .storefront-section-heading--split .storefront-section-link svg {
        width: 16px;
        height: 16px;
    }

    .storefront-section-footer {
        margin-block-start: 22px;
    }

    .storefront-section-action {
        width: auto;
        max-width: min(100%, 240px);
        min-height: 40px;
        gap: 7px;
        padding: 9px 17px;
        border-radius: 10px;
        box-shadow: none;
        font-size: 12px;
    }

    .storefront-section-action svg {
        width: 16px;
        height: 16px;
    }

    .products-splide .splide__track {
        padding-block-end: 4px;
    }

    .products-splide .splide__pagination {
        margin-block-start: 6px;
    }
}

@media (max-width: 379px) {
    .storefront-commerce-section,
    .storefront-categories {
        padding-block: 36px;
    }

    .storefront-section-heading__title {
        font-size: 23px;
    }

    .storefront-section-action {
        max-width: min(100%, 220px);
    }
}

/* ============================================================================
   STOREFRONT FOOTER
   Scoped responsive footer powered by the merchant's theme color variables.
   ============================================================================ */
.storefront-footer {
    --storefront-footer-accent: rgb(var(--color-primary));
    --storefront-footer-surface: #15171f;
    --storefront-footer-surface: color-mix(in srgb, rgb(var(--color-secondary)) 34%, #11131a);
    --storefront-footer-muted: rgb(209 213 219 / 0.82);
    position: relative;
    overflow: hidden;
    background: var(--storefront-footer-surface);
    color: #fff;
}

.storefront-footer::after {
    position: absolute;
    z-index: 0;
    inset-block-start: 92px;
    inset-inline-end: 0;
    width: min(330px, 100%);
    height: 330px;
    border-radius: 999px;
    background: radial-gradient(circle, rgb(var(--color-primary) / 0.14), transparent 68%);
    content: "";
    pointer-events: none;
}

.storefront-footer__accent {
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--color-gold)), rgb(var(--color-primary)));
}

.storefront-footer__container {
    position: relative;
    z-index: 1;
    width: min(100%, var(--storefront-layout-max-width));
    margin-inline: auto;
    padding-inline: var(--storefront-layout-gutter);
}

.storefront-footer__help {
    position: relative;
    z-index: 1;
    padding-block: 34px 28px;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    background: linear-gradient(135deg, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.025));
}

.storefront-footer__help-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.storefront-footer__help-heading h2 {
    margin: 3px 0 4px;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 700;
    line-height: 1.35;
}

.storefront-footer__help-heading p {
    margin: 0;
    color: var(--storefront-footer-muted);
    font-size: 13px;
}

.storefront-footer__back-top {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.06);
    color: #f3f4f6;
    font-size: 12px;
    font-weight: 600;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.storefront-footer__back-top svg {
    width: 16px;
    height: 16px;
    color: color-mix(in srgb, var(--storefront-footer-accent) 46%, white);
    transform: rotate(-90deg);
}

.storefront-footer__back-top:hover {
    border-color: rgb(var(--color-primary) / 0.6);
    background: rgb(255 255 255 / 0.1);
    transform: translateY(-2px);
}

.storefront-footer__back-top:focus-visible,
.storefront-footer a:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 3px;
}

.storefront-footer__back-only {
    display: flex;
    justify-content: flex-end;
    padding-block: 28px 0;
}

.storefront-footer__contact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.storefront-footer__contact-card {
    display: flex;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.055);
    color: #fff;
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.storefront-footer a.storefront-footer__contact-card:hover {
    border-color: rgb(var(--color-primary) / 0.55);
    background: rgb(255 255 255 / 0.085);
    transform: translateY(-2px);
}

.storefront-footer__contact-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 11px;
    background: rgb(var(--color-primary) / 0.16);
    color: color-mix(in srgb, var(--storefront-footer-accent) 46%, white);
}

.storefront-footer__contact-icon svg {
    width: 18px;
    height: 18px;
}

.storefront-footer__contact-copy {
    min-width: 0;
}

.storefront-footer__contact-copy small,
.storefront-footer__contact-copy strong {
    display: block;
}

.storefront-footer__contact-copy small {
    margin-bottom: 2px;
    color: rgb(209 213 219 / 0.72);
    font-size: 10px;
}

.storefront-footer__contact-copy strong {
    color: #f9fafb;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.storefront-footer__contact-card--address .storefront-footer__contact-copy strong {
    overflow-wrap: anywhere;
    white-space: normal;
}

.storefront-footer__main {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(360px, 0.95fr);
    gap: clamp(42px, 6vw, 76px);
    padding-block: 48px 42px;
}

.storefront-footer__main--brand-only {
    grid-template-columns: minmax(0, 620px);
}

.storefront-footer__brand-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.storefront-footer__logo {
    display: block;
    width: auto;
    max-width: min(100%, 190px);
    height: auto;
    max-height: 58px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.storefront-footer__store-name {
    margin: 0;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 700;
}

.storefront-footer__verified {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 5px;
    padding-inline: 9px;
    border: 1px solid rgb(52 211 153 / 0.26);
    border-radius: 999px;
    background: rgb(16 185 129 / 0.15);
    color: #a7f3d0;
    font-size: 10px;
    font-weight: 700;
}

.storefront-footer__verified svg {
    width: 13px;
    height: 13px;
}

.storefront-footer__description {
    max-width: 54ch;
    margin: 18px 0 20px;
    color: var(--storefront-footer-muted);
    font-size: 13px;
    line-height: 2;
}

.storefront-footer__social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgb(209 213 219 / 0.72);
    font-size: 11px;
}

.storefront-footer__socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.storefront-footer__socials a {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.055);
    color: #fff;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.storefront-footer__socials a:hover {
    border-color: var(--storefront-footer-accent);
    background: var(--storefront-footer-accent);
    transform: translateY(-2px);
}

.storefront-footer__socials svg {
    width: 19px;
    height: 19px;
}

.storefront-footer__navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
    padding-top: 5px;
}

.storefront-footer__navigation--single {
    grid-template-columns: minmax(0, 260px);
}

.storefront-footer__links h2 {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 12px;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: 17px;
    font-weight: 700;
}

.storefront-footer__links h2::after {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 30px;
    height: 2px;
    border-radius: 99px;
    background: var(--storefront-footer-accent);
    content: "";
}

.storefront-footer__links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.storefront-footer__links:not(.storefront-footer__contact-links) a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    color: var(--storefront-footer-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color 160ms ease, transform 160ms ease;
}

.storefront-footer__links:not(.storefront-footer__contact-links) a > span {
    width: 5px;
    height: 5px;
    margin-inline-end: 9px;
    border-radius: 99px;
    background: rgb(255 255 255 / 0.2);
    transition: background-color 160ms ease;
}

.storefront-footer__links:not(.storefront-footer__contact-links) a:hover {
    color: #fff;
}

[dir="rtl"] .storefront-footer__links:not(.storefront-footer__contact-links) a:hover {
    transform: translateX(-3px);
}

[dir="ltr"] .storefront-footer__links:not(.storefront-footer__contact-links) a:hover {
    transform: translateX(3px);
}

.storefront-footer__links:not(.storefront-footer__contact-links) a:hover > span {
    background: var(--storefront-footer-accent);
}

.storefront-footer__payments {
    position: relative;
    z-index: 1;
    border-block: 1px solid rgb(255 255 255 / 0.075);
    background: rgb(255 255 255 / 0.035);
}

.storefront-footer__payments-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-block: 22px;
}

.storefront-footer__payment-heading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.storefront-footer__payment-heading > svg {
    width: 20px;
    height: 20px;
    color: color-mix(in srgb, var(--storefront-footer-accent) 45%, white);
}

.storefront-footer__payment-heading strong,
.storefront-footer__payment-heading small {
    display: block;
}

.storefront-footer__payment-heading strong {
    color: #f3f4f6;
    font-size: 13px;
}

.storefront-footer__payment-heading small {
    margin-top: 2px;
    color: rgb(209 213 219 / 0.62);
    font-size: 10px;
}

.storefront-footer__payment-methods {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.storefront-footer__payment-method {
    display: grid;
    min-width: 72px;
    min-height: 52px;
    flex: 0 0 auto;
    place-items: center;
    padding: 8px 12px;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: 10px;
    background: transparent;
    color: #f3f4f6;
    font-size: 11px;
    font-weight: 600;
}

.storefront-footer__payment-method > span {
    max-width: 18ch;
    text-align: center;
    overflow-wrap: anywhere;
}

.storefront-footer__payment-method img {
    display: block;
    width: auto;
    max-width: 96px;
    height: auto;
    max-height: 34px;
    object-fit: contain;
    border-radius: 3px;
}

.storefront-footer__legal {
    position: relative;
    z-index: 1;
}

.storefront-footer__legal-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-block: 20px 24px;
    color: rgb(209 213 219 / 0.68);
    font-size: 11px;
}

.storefront-footer__legal-inner p {
    margin: 0;
}

.storefront-footer__platform {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    color: rgb(209 213 219 / 0.72);
    text-decoration: none;
}

.storefront-footer__platform strong {
    color: #fff;
}

.storefront-footer__platform img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.storefront-footer__platform:hover strong {
    color: color-mix(in srgb, var(--storefront-footer-accent) 45%, white);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .storefront-footer__contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storefront-footer__main {
        grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1.1fr);
        gap: 36px;
    }

    .storefront-footer__navigation {
        gap: 26px;
    }
}

@media not all and (min-width: 768px) {
    .storefront-footer__help {
        padding-block: 26px 22px;
    }

    .storefront-footer__help-heading {
        align-items: flex-start;
        margin-bottom: 17px;
    }

    .storefront-footer__help-heading h2 {
        font-size: 19px;
    }

    .storefront-footer__help-heading p {
        max-width: 30ch;
        font-size: 11px;
        line-height: 1.7;
    }

    .storefront-footer__back-top {
        width: 44px;
        padding: 0;
        flex: 0 0 44px;
    }

    .storefront-footer__back-top span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        clip-path: inset(50%);
    }

    .storefront-footer__contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .storefront-footer__contact-card {
        min-height: 56px;
        padding: 8px 9px;
    }

    .storefront-footer__contact-card--email,
    .storefront-footer__contact-card--address {
        grid-column: 1 / -1;
    }

    .storefront-footer__contact-card--email {
        order: 1;
    }

    .storefront-footer__contact-card--address {
        order: 2;
    }

    .storefront-footer__contact-grid > :only-child {
        grid-column: 1 / -1;
    }

    .storefront-footer__contact-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 9px;
    }

    .storefront-footer__contact-icon svg {
        width: 16px;
        height: 16px;
    }

    .storefront-footer__contact-copy strong {
        font-size: 11px;
    }

    .storefront-footer__main {
        display: block;
        padding-block: 32px 24px;
    }

    .storefront-footer__logo {
        max-width: 154px;
        max-height: 52px;
    }

    .storefront-footer__description {
        margin-block: 16px 18px;
        font-size: 12px;
        line-height: 1.9;
    }

    .storefront-footer__social-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .storefront-footer__navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 26px;
        padding-top: 24px;
        border-top: 1px solid rgb(255 255 255 / 0.09);
    }

    .storefront-footer__navigation--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-footer__links h2 {
        margin-bottom: 8px;
        padding-bottom: 10px;
        font-size: 15px;
        line-height: 1.6;
    }

    .storefront-footer__links:not(.storefront-footer__contact-links) a {
        display: flex;
        min-height: 44px;
        padding-block: 5px;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .storefront-footer__links:not(.storefront-footer__contact-links) a > span {
        flex: 0 0 5px;
    }

    .storefront-footer__payments-inner {
        display: block;
        padding-block: 20px;
    }

    .storefront-footer__payment-heading {
        margin-bottom: 13px;
    }

    .storefront-footer__payment-methods {
        gap: 8px;
    }

    .storefront-footer__payment-method {
        min-width: 68px;
        min-height: 48px;
        padding: 7px 10px;
    }

    .storefront-footer__legal-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding-block: 18px calc(var(--shell-mobile-content-clearance, 88px) + 18px);
        font-size: 11px;
    }
}

@media (max-width: 374px) {
    .storefront-footer__contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-footer__contact-card--email,
    .storefront-footer__contact-card--address {
        grid-column: auto;
    }
}


/* ============================================================================
   Formal storefront footer
   An editorial layout that preserves every merchant-controlled footer setting
   without turning the closing area into a dashboard of nested cards.
   ============================================================================ */
.storefront-footer {
    --storefront-footer-accent: rgb(var(--color-primary));
    --storefront-footer-surface: color-mix(in srgb, rgb(var(--color-secondary)) 36%, #0b0f18);
    --storefront-footer-panel: rgb(255 255 255 / 0.055);
    --storefront-footer-panel-strong: rgb(255 255 255 / 0.085);
    --storefront-footer-border: rgb(255 255 255 / 0.105);
    --storefront-footer-muted: rgb(226 232 240 / 0.76);
    padding-block-start: 0;
    background:
        radial-gradient(circle at 88% 18%, rgb(var(--color-primary) / 0.16), transparent 28rem),
        radial-gradient(circle at 8% 82%, rgb(var(--color-gold) / 0.08), transparent 25rem),
        var(--storefront-footer-surface);
}

.storefront-footer::after {
    display: none;
}

.storefront-footer__accent {
    height: 3px;
    background: linear-gradient(90deg, transparent, rgb(var(--color-primary)) 24%, rgb(var(--color-gold)) 50%, rgb(var(--color-primary)) 76%, transparent);
}

.storefront-footer__container {
    width: min(100%, var(--storefront-layout-max-width));
    padding-inline: var(--storefront-layout-gutter);
}

.storefront-footer__hub {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.storefront-footer__hub::before {
    display: none;
}

.storefront-footer__hub-control,
.storefront-footer__back-only {
    position: absolute;
    z-index: 5;
    inset-block-start: 30px;
    inset-inline-end: 0;
}

.storefront-footer__back-only {
    display: block;
    padding: 0;
}

.storefront-footer__back-top {
    min-width: 44px;
    min-height: 44px;
    padding: 7px 12px;
    border-color: rgb(255 255 255 / 0.16);
    border-radius: 13px;
    background: rgb(255 255 255 / 0.055);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.storefront-footer__back-top:hover {
    border-color: rgb(var(--color-primary) / 0.62);
    background: rgb(var(--color-primary) / 0.15);
}

.storefront-footer__main {
    display: grid;
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2.22fr);
    align-items: stretch;
    gap: clamp(38px, 4.8vw, 68px);
    padding: 58px 0 42px;
    border-block-end: 1px solid var(--storefront-footer-border);
}

.storefront-footer__main--brand-only {
    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
}

.storefront-footer__hub--without-contact.storefront-footer__hub--without-navigation .storefront-footer__main {
    grid-template-columns: minmax(0, 700px);
    justify-content: center;
}

.storefront-footer__brand {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.storefront-footer__brand::after {
    display: none;
}

.storefront-footer__brand-heading {
    width: 100%;
    margin-block-start: 0;
}

.storefront-footer__logo {
    max-width: min(100%, 188px);
    max-height: 66px;
}

.storefront-footer__store-name {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.35;
}

.storefront-footer__verified {
    min-height: 30px;
    border-color: rgb(167 243 208 / 0.25);
    background: rgb(16 185 129 / 0.14);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.storefront-footer__description {
    max-width: 54ch;
    margin-block: 22px 26px;
    color: rgb(241 245 249 / 0.82);
    font-size: 14px;
    line-height: 1.9;
}

.storefront-footer__social-row {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-block-start: 0;
    color: rgb(226 232 240 / 0.68);
    font-size: 12px;
}

.storefront-footer__socials {
    gap: 8px;
}

.storefront-footer__socials a {
    width: 42px;
    height: 42px;
    border-color: rgb(255 255 255 / 0.14);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.07);
}

.storefront-footer__workspace {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(340px, 1.42fr) minmax(230px, 0.88fr);
    align-content: start;
    gap: 0;
    padding-block-start: 0;
}

.storefront-footer__hub--without-contact .storefront-footer__workspace,
.storefront-footer__hub--without-navigation .storefront-footer__workspace {
    grid-template-columns: minmax(0, 1fr);
}

.storefront-footer__hub--without-contact .storefront-footer__navigation {
    padding-inline-start: 0;
}

.storefront-footer__hub--without-navigation .storefront-footer__help {
    padding-inline-end: 0;
    border-inline-end: 0;
}

.storefront-footer__help {
    order: 2;
    padding: 0;
    padding-inline-end: clamp(26px, 3vw, 42px);
    border: 0;
    border-inline-end: 1px solid var(--storefront-footer-border);
    border-radius: 0;
    background: transparent;
}

.storefront-footer__help-heading {
    align-items: flex-start;
    margin-block-end: 16px;
}

.storefront-footer__help-heading h2 {
    margin-block: 4px 3px;
    font-size: clamp(18px, 1.6vw, 22px);
}

.storefront-footer__help-heading p {
    color: var(--storefront-footer-muted);
    font-size: 12px;
    line-height: 1.65;
}

.storefront-footer__contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.storefront-footer__contact-card {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-inline: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--storefront-footer-muted);
    transition:
        background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Override the legacy inline link rule so linked contact rows use the full track. */
.storefront-footer__contact-links a.storefront-footer__contact-card {
    display: grid;
    width: 100%;
}

.storefront-footer .storefront-footer__contact-card:hover {
    background: rgb(255 255 255 / 0.065);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.035);
    transform: translateY(-1px);
}

.storefront-footer__contact-card--hours,
.storefront-footer__contact-card--address {
    grid-template-columns: 30px minmax(0, 1fr);
}

.storefront-footer__contact-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: rgb(var(--color-primary) / 0.12);
    color: color-mix(in srgb, var(--storefront-footer-accent) 55%, white);
    transition:
        background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront-footer__contact-icon svg {
    width: 15px;
    height: 15px;
}

.storefront-footer__contact-copy small {
    margin-block-end: 3px;
    color: rgb(226 232 240 / 0.64);
    font-size: 10px;
}

.storefront-footer__contact-copy strong {
    font-size: 12px;
    line-height: 1.5;
}

.storefront-footer a.storefront-footer__contact-card:hover .storefront-footer__contact-icon {
    background: rgb(var(--color-primary) / 0.2);
    color: #fff;
    transform: scale(1.04);
}

.storefront-footer__navigation {
    order: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(38px, 4.5vw, 60px);
    padding-inline-start: clamp(26px, 3vw, 42px);
    padding-block-start: 0;
}

.storefront-footer__navigation--single {
    grid-template-columns: minmax(0, 1fr);
}

.storefront-footer__links {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.storefront-footer__links h2 {
    margin-block-end: 13px;
    padding-block-end: 10px;
    font-size: 15px;
}

.storefront-footer__links ul {
    display: grid;
    gap: 5px;
}

.storefront-footer__links:not(.storefront-footer__contact-links) a {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    grid-template-columns: 5px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-inline: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    transition:
        background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront-footer__links:not(.storefront-footer__contact-links) a > span {
    width: 5px;
    height: 5px;
    margin: 0;
    transition:
        background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront-footer__links:not(.storefront-footer__contact-links) a:hover {
    background: rgb(255 255 255 / 0.065);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.035);
    transform: translateY(-1px);
}

.storefront-footer__links:not(.storefront-footer__contact-links) a:hover > span {
    background: var(--storefront-footer-accent);
    transform: scale(1.35);
}

.storefront-footer__payments {
    margin: 0;
    border: 0;
    border-block-end: 1px solid var(--storefront-footer-border);
    border-radius: 0;
    background: transparent;
}

.storefront-footer__payments-inner {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 22px;
    padding: 22px 0;
}

.storefront-footer__payment-heading {
    min-width: min(100%, 205px);
}

.storefront-footer__payment-heading-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.12);
    color: color-mix(in srgb, var(--storefront-footer-accent) 54%, white);
}

.storefront-footer__payment-heading-icon svg {
    width: 18px;
    height: 18px;
}

.storefront-footer__payment-heading strong {
    font-size: 12px;
}

.storefront-footer__payment-heading small {
    max-width: 28ch;
    font-size: 9px;
    line-height: 1.5;
}

.storefront-footer__payment-methods {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.storefront-footer__payment-method {
    min-width: 68px;
    min-height: 46px;
    padding: 6px 10px;
    border-color: rgb(255 255 255 / 0.13);
    border-radius: 10px;
    background: transparent;
}

.storefront-footer__payment-method img {
    max-width: 88px;
    max-height: 30px;
}

.storefront-footer__legal {
    background: transparent;
}

.storefront-footer__legal-inner {
    min-height: 68px;
    padding-block: 12px 16px;
    color: rgb(226 232 240 / 0.62);
}

.storefront-footer__platform {
    border-radius: 10px;
    transition: background-color 160ms ease, color 160ms ease;
}

.storefront-footer__platform:hover {
    color: #fff;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .storefront-footer__main,
    .storefront-footer__main--brand-only {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 52px 0 34px;
    }

    .storefront-footer__brand {
        padding: 0 0 30px;
        border-block-end: 1px solid var(--storefront-footer-border);
    }

    .storefront-footer__workspace {
        grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
        margin-block-start: 30px;
        padding-block-start: 0;
    }

    .storefront-footer__hub--without-contact .storefront-footer__workspace,
    .storefront-footer__hub--without-navigation .storefront-footer__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-footer__contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-footer__navigation {
        gap: 32px;
    }

    .storefront-footer__payments {
        margin: 0;
    }

    .storefront-footer__payments-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media not all and (min-width: 768px) {
    .storefront-footer {
        padding-block-start: 0;
    }

    .storefront-footer__container {
        padding-inline: var(--storefront-layout-gutter);
    }

    .storefront-footer__hub {
        border-radius: 0;
    }

    .storefront-footer__hub-control,
    .storefront-footer__back-only {
        inset-block-start: 18px;
        inset-inline-end: 0;
    }

    .storefront-footer__back-top {
        width: auto;
        min-width: 42px;
        min-height: 42px;
        padding-inline: 11px;
    }

    .storefront-footer__back-top span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        font-size: 10px;
    }

    .storefront-footer__main,
    .storefront-footer__main--brand-only {
        display: block;
        padding: 0 0 26px;
    }

    .storefront-footer__brand {
        min-height: 0;
        padding: 62px 0 28px;
        border-block-end: 1px solid var(--storefront-footer-border);
        border-radius: 0;
    }

    .storefront-footer__logo {
        max-width: 150px;
        max-height: 52px;
    }

    .storefront-footer__description {
        margin-block: 16px 20px;
        font-size: 12px;
        line-height: 1.85;
    }

    .storefront-footer__workspace {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-block-start: 26px;
        padding-block-start: 0;
    }

    .storefront-footer__help {
        padding: 0 0 24px;
        border-inline-end: 0;
        border-block-end: 1px solid var(--storefront-footer-border);
        border-radius: 0;
    }

    .storefront-footer__help-heading {
        margin-block-end: 14px;
    }

    .storefront-footer__help-heading h2 {
        font-size: 17px;
    }

    .storefront-footer__help-heading p {
        max-width: none;
        font-size: 11px;
    }

    .storefront-footer__contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .storefront-footer__contact-card {
        min-height: 44px;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
        padding: 7px 8px;
    }

    .storefront-footer__contact-card--hours,
    .storefront-footer__contact-card--address {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .storefront-footer__contact-card--email,
    .storefront-footer__contact-card--address {
        grid-column: 1 / -1;
    }

    .storefront-footer__contact-grid > :only-child {
        grid-column: 1 / -1;
    }

    .storefront-footer__contact-copy strong {
        font-size: 11px;
    }

    .storefront-footer__navigation {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
        gap: 28px;
        margin: 0;
        padding-inline-start: 0;
        padding: 0;
        border: 0;
    }

    .storefront-footer__navigation--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-footer__links {
        padding: 0;
        border-radius: 0;
    }

    .storefront-footer__links h2 {
        margin-block-end: 8px;
        font-size: 14px;
    }

    .storefront-footer__links:not(.storefront-footer__contact-links) a {
        min-height: 44px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .storefront-footer__payments {
        margin: 0;
        border-radius: 0;
    }

    .storefront-footer__payments-inner {
        display: block;
        padding: 20px 0;
    }

    .storefront-footer__payment-heading {
        margin-block-end: 12px;
    }

    .storefront-footer__payment-methods {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
        gap: 8px;
        overflow: visible;
        padding-block-end: 0;
        scroll-snap-type: none;
    }

    .storefront-footer__payment-method {
        width: 100%;
        min-width: 0;
        scroll-snap-align: unset;
    }

    .storefront-footer__legal-inner {
        align-items: center;
        flex-direction: column;
        gap: 3px;
        padding-block: 14px calc(var(--shell-mobile-content-clearance, 88px) + 16px);
        text-align: center;
    }
}

@media (max-width: 374px) {
    .storefront-footer__contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-footer__contact-card--email,
    .storefront-footer__contact-card--address {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-footer__contact-card,
    .storefront-footer__contact-icon,
    .storefront-footer__links a,
    .storefront-footer__links a > span,
    .storefront-footer__platform {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PWA direct-install experience
   Mirrors the approved Android bottom-sheet prototype while keeping
   all colors scoped to the merchant's active storefront identity.
   ═══════════════════════════════════════════════════════════════ */
.pwa-install-overlay {
    --pwa-install-primary: rgb(var(--color-primary));
    --pwa-install-secondary: rgb(var(--color-secondary));
    --pwa-install-accent: rgb(var(--color-accent));
    --pwa-install-gold: rgb(var(--color-gold));
    --pwa-install-cream: rgb(var(--color-cream));
    --pwa-install-rose: rgb(var(--color-rose));
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgb(0 0 0 / 0);
    opacity: 0;
    pointer-events: none;
    transition: background-color 280ms ease, opacity 280ms ease;
}

.pwa-install-overlay.is-visible {
    background: rgb(0 0 0 / 0.55);
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pwa-install-sheet {
    width: min(100%, 480px);
    max-height: min(88dvh, 680px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--pwa-install-primary) 18%, #e2e8f0);
    border-top-width: 2px;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -10px 40px rgb(15 23 42 / 0.18), 0 -2px 10px rgb(15 23 42 / 0.06);
    color: #12131a;
    transform: translate3d(0, 105%, 0);
    transition: transform 360ms cubic-bezier(0.32, 1, 0.45, 1);
    scrollbar-width: none;
}

.pwa-install-sheet::-webkit-scrollbar {
    display: none;
}

.pwa-install-overlay.is-visible .pwa-install-sheet {
    transform: translate3d(0, 0, 0);
}

.pwa-install-sheet__handle {
    width: 34px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pwa-install-primary) 28%, #e2e8f0);
}

.pwa-install-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    text-align: start;
}

.pwa-install-profile__icon {
    display: flex;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pwa-install-primary) 24%, transparent);
    border-radius: 14px;
    background: var(--pwa-install-primary);
    background: linear-gradient(135deg, var(--pwa-install-primary), color-mix(in srgb, var(--pwa-install-primary) 72%, white));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--pwa-install-primary) 22%, transparent);
    color: #fff;
}

.pwa-install-profile__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pwa-install-profile__icon svg {
    width: 24px;
    height: 24px;
}

.pwa-install-profile__content {
    min-width: 0;
    flex: 1;
}

.pwa-install-profile__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.pwa-install-profile__heading h3 {
    max-width: 100%;
    overflow: hidden;
    color: #12131a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-install-profile__heading span {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--pwa-install-primary) 18%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--pwa-install-primary) 8%, white);
    color: var(--pwa-install-primary);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.45;
}

.pwa-install-profile__content > p {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pwa-install-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 8px;
    margin-bottom: 12px;
    padding: 9px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f8fafc;
}

.pwa-install-benefit {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.pwa-install-benefit__icon {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pwa-install-benefit__icon svg {
    width: 11px;
    height: 11px;
}

.pwa-install-benefit__icon--green {
    background: #dcfce7;
    color: #16a34a;
}

.pwa-install-benefit__icon--blue {
    background: #e0f2fe;
    color: #0284c7;
}

.pwa-install-benefit__icon--rose {
    background: #ffe4e6;
    color: #e11d48;
}

.pwa-install-benefit__icon--amber {
    background: #fef3c7;
    color: #d97706;
}

.pwa-install-guide {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--pwa-install-primary) 12%, #e2e8f0);
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pwa-install-primary) 4%, white), #f8fafc);
    text-align: start;
}

.pwa-install-guide__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #12131a;
    font-size: 12px;
    font-weight: 800;
}

.pwa-install-guide__title svg {
    width: 15px;
    height: 15px;
    color: var(--pwa-install-primary);
}

.pwa-install-guide__steps {
    display: grid;
    gap: 7px;
    padding-inline-start: 22px;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
    list-style: decimal;
}

.pwa-install-guide__steps li::marker {
    color: var(--pwa-install-primary);
    font-weight: 900;
}

.pwa-install-guide__note {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.65;
}

.pwa-install-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pwa-install-actions__primary {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--pwa-install-primary) 74%, black);
    border-radius: 11px;
    background: var(--pwa-install-primary);
    background: linear-gradient(135deg, var(--pwa-install-primary), color-mix(in srgb, var(--pwa-install-primary) 78%, var(--pwa-install-secondary)));
    box-shadow: 0 5px 15px color-mix(in srgb, var(--pwa-install-primary) 30%, transparent);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.pwa-install-actions__primary svg {
    width: 17px;
    height: 17px;
}

.pwa-install-actions__primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--pwa-install-primary) 34%, transparent);
    transform: translateY(-1px);
}

.pwa-install-actions__primary:active {
    transform: translateY(1px) scale(0.99);
}

.pwa-install-actions__primary:focus-visible,
.pwa-install-actions__dismiss:focus-visible {
    outline: 2px solid var(--pwa-install-primary);
    outline-offset: 2px;
}

.pwa-install-actions__dismiss {
    width: 100%;
    min-height: 34px;
    padding: 4px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    transition: background-color 180ms ease, color 180ms ease;
}

.pwa-install-actions__dismiss:hover {
    background: #f8fafc;
    color: #475569;
}

@media (min-width: 768px) {
    .pwa-install-overlay {
        padding-inline: 24px;
    }

    .pwa-install-sheet {
        margin-inline: auto;
    }
}

@media (max-width: 359px) {
    .pwa-install-benefits {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET AND DESKTOP UTILITY RAIL
   A quiet recovery entry for a dismissed PWA invitation plus an
   independent back-to-top action. Phones keep only direct contact actions.
   ═══════════════════════════════════════════════════════════════ */
#pwa-install-btn {
    display: none !important;
}

html.pwa-standalone #pwa-mobile-header-install {
    display: none !important;
}

@media all and (display-mode: standalone) {
    #pwa-mobile-header-install {
        display: none !important;
    }
}

.storefront-desktop-utility-rail {
    display: none;
}

.storefront-desktop-utility-rail [hidden] {
    display: none !important;
}

/* Support and WhatsApp share one edge-attached control language at every
   viewport. Their wrappers own vertical-only movement and safe-area bounds. */
#support-widget-fab > button,
#whatsapp-fab > a {
    width: var(--storefront-floating-control-size);
    min-width: var(--storefront-floating-control-size);
    max-width: var(--storefront-floating-control-size);
    height: var(--storefront-floating-control-size);
    min-height: var(--storefront-floating-control-size);
    max-height: var(--storefront-floating-control-size);
    flex: 0 0 var(--storefront-floating-control-size);
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.13), 0 2px 5px rgb(15 23 42 / 0.08);
    cursor: ns-resize;
    transition: border-color 180ms ease, box-shadow 180ms ease,
                filter 180ms ease, transform 180ms ease;
    transform: none !important;
}

#support-widget-fab > button {
    background: rgb(var(--color-primary));
    background: linear-gradient(
        145deg,
        rgb(var(--color-primary)),
        color-mix(in srgb, rgb(var(--color-primary)) 78%, rgb(var(--color-secondary)))
    );
    border-color: rgb(var(--color-primary) / 0.76);
    box-shadow: 0 10px 24px rgb(var(--color-primary) / 0.27), 0 2px 5px rgb(15 23 42 / 0.08);
}

#whatsapp-fab > a {
    background: #25d366;
    background: linear-gradient(145deg, #25d366, #18ad52);
    border-color: rgb(18 140 66 / 0.42);
    box-shadow: 0 10px 24px rgb(18 140 66 / 0.2), 0 2px 5px rgb(15 23 42 / 0.08);
}

[data-fab-edge-attached="true"][data-fab-position$="left"] > :is(a, button) {
    border-left: 0;
    border-radius: 0 10px 10px 0;
}

[data-fab-edge-attached="true"][data-fab-position$="right"] > :is(a, button) {
    border-right: 0;
    border-radius: 10px 0 0 10px;
}

#support-widget-fab > button:hover,
#whatsapp-fab > a:hover {
    filter: brightness(1.035);
}

#support-widget-fab > button:hover {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 13px 30px rgb(var(--color-primary) / 0.34), 0 2px 6px rgb(15 23 42 / 0.08);
}

#whatsapp-fab > a:hover {
    border-color: rgb(18 140 66 / 0.58);
    box-shadow: 0 13px 30px rgb(18 140 66 / 0.27), 0 2px 6px rgb(15 23 42 / 0.08);
}

#support-widget-fab > button:focus-visible,
#whatsapp-fab > a:focus-visible {
    outline: 3px solid rgb(var(--color-primary) / 0.2);
    outline-offset: 2px;
}

#support-widget-fab > button > svg,
#whatsapp-fab > a > svg {
    width: 20px;
    height: 20px;
}

#support-widget-fab .storefront-support-trigger__badge {
    right: -4px !important;
    left: auto !important;
}

#whatsapp-fab > a > .animate-ping {
    border-radius: inherit;
}

#whatsapp-fab[data-fab-position$="left"] > span {
    right: auto;
    left: 0;
    transform: none;
}

#whatsapp-fab[data-fab-position$="right"] > span {
    right: 0;
    left: auto;
    transform: none;
}

@media (max-width: 767px) {
    #support-widget-fab .storefront-support-trigger__badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

@media (min-width: 768px) {
    .storefront-desktop-utility-rail {
        position: fixed;
        right: -1px;
        bottom: max(28px, env(safe-area-inset-bottom, 0px));
        z-index: var(--z-shell-fab);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(105%, 0, 0);
        visibility: hidden;
        transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 220ms ease;
    }

    .storefront-desktop-utility-rail.is-scroll-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    .storefront-desktop-install-entry {
        position: relative;
    }

    .storefront-desktop-utility-button {
        display: flex;
        width: var(--storefront-floating-control-size);
        min-width: var(--storefront-floating-control-size);
        max-width: var(--storefront-floating-control-size);
        height: var(--storefront-floating-control-size);
        min-height: var(--storefront-floating-control-size);
        max-height: var(--storefront-floating-control-size);
        flex: 0 0 var(--storefront-floating-control-size);
        padding: 0;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(15 23 42 / 0.1);
        border-right: 0;
        border-radius: 10px 0 0 10px;
        background: #fff;
        box-shadow: 0 8px 24px rgb(15 23 42 / 0.1), 0 2px 6px rgb(15 23 42 / 0.05);
        color: rgb(var(--color-secondary));
        transition: border-color 180ms ease, box-shadow 180ms ease,
                    color 180ms ease, transform 180ms ease;
    }

    .storefront-desktop-utility-button svg {
        width: 20px;
        height: 20px;
    }

    .storefront-desktop-utility-button__close-icon {
        display: none;
    }

    .storefront-desktop-install-entry.is-open .storefront-desktop-utility-button__download-icon {
        display: none;
    }

    .storefront-desktop-install-entry.is-open .storefront-desktop-utility-button__close-icon {
        display: block;
    }

    .storefront-desktop-utility-button:hover {
        border-color: rgb(var(--color-primary) / 0.34);
        box-shadow: 0 10px 28px rgb(var(--color-primary) / 0.14), 0 2px 7px rgb(15 23 42 / 0.06);
        color: rgb(var(--color-primary));
        transform: translateY(-1px);
    }

    .storefront-desktop-utility-button:active {
        transform: translateY(1px) scale(0.97);
    }

    .storefront-desktop-utility-button:focus-visible {
        outline: 3px solid rgb(var(--color-primary) / 0.2);
        outline-offset: 2px;
        border-color: rgb(var(--color-primary) / 0.55);
    }

    .storefront-desktop-utility-button--install {
        border-color: rgb(var(--color-primary) / 0.76);
        background: rgb(var(--color-primary));
        background: linear-gradient(
            145deg,
            rgb(var(--color-primary)),
            color-mix(in srgb, rgb(var(--color-primary)) 78%, rgb(var(--color-secondary)))
        );
        box-shadow: 0 10px 24px rgb(var(--color-primary) / 0.27), 0 2px 5px rgb(15 23 42 / 0.08);
        color: #fff;
    }

    .storefront-desktop-utility-button--install:hover {
        border-color: rgb(var(--color-primary));
        box-shadow: 0 13px 30px rgb(var(--color-primary) / 0.34), 0 2px 6px rgb(15 23 42 / 0.08);
        color: #fff;
    }

    .storefront-desktop-install-panel {
        position: absolute;
        bottom: 0;
        right: calc(100% + 14px);
        width: min(340px, calc(100vw - 104px));
        padding: 18px;
        border: 1px solid rgb(var(--color-primary) / 0.17);
        border-radius: 18px;
        background: linear-gradient(
            150deg,
            #fff 0%,
            color-mix(in srgb, rgb(var(--color-primary)) 3.5%, #fff) 100%
        );
        box-shadow: 0 20px 52px rgb(15 23 42 / 0.16), 0 5px 14px rgb(15 23 42 / 0.07);
        color: #172033;
        direction: inherit;
        opacity: 0;
        pointer-events: none;
        text-align: start;
        transform: translate3d(10px, 0, 0) scale(0.98);
        transform-origin: right bottom;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .storefront-desktop-install-panel::after {
        position: absolute;
        right: -7px;
        bottom: 31px;
        width: 14px;
        height: 14px;
        border-top: 1px solid rgb(var(--color-primary) / 0.17);
        border-right: 1px solid rgb(var(--color-primary) / 0.17);
        background: #fff;
        content: '';
        transform: rotate(45deg);
    }

    .storefront-desktop-install-panel::before {
        position: absolute;
        top: 0;
        right: -14px;
        width: 14px;
        height: 100%;
        content: '';
    }

    .storefront-desktop-install-entry.is-open .storefront-desktop-install-panel {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
        visibility: visible;
    }

    .storefront-desktop-install-panel__header {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 11px;
    }

    .storefront-desktop-install-panel__icon {
        display: flex;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgb(var(--color-primary) / 0.2);
        border-radius: 13px;
        background: rgb(var(--color-primary));
        color: #fff;
        box-shadow: 0 6px 16px rgb(var(--color-primary) / 0.18);
    }

    .storefront-desktop-install-panel__icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .storefront-desktop-install-panel__icon svg {
        width: 22px;
        height: 22px;
    }

    .storefront-desktop-install-panel__heading {
        display: grid;
        min-width: 0;
        gap: 2px;
    }

    .storefront-desktop-install-panel__eyebrow {
        color: rgb(var(--color-primary));
        font-size: 0.67rem;
        font-weight: 800;
        line-height: 1.45;
    }

    .storefront-desktop-install-panel__heading strong {
        overflow: hidden;
        color: #111827;
        font-size: 0.94rem;
        font-weight: 900;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-desktop-install-panel__description {
        margin-top: 12px;
        color: #5b6474;
        font-size: 0.76rem;
        font-weight: 600;
        line-height: 1.8;
    }

    .storefront-desktop-install-panel__benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 13px;
    }

    .storefront-desktop-install-panel__benefits li {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 6px;
        padding: 8px;
        border: 1px solid rgb(var(--color-primary) / 0.1);
        border-radius: 10px;
        background: rgb(var(--color-primary) / 0.045);
        color: #475569;
        font-size: 0.67rem;
        font-weight: 750;
        line-height: 1.45;
    }

    .storefront-desktop-install-panel__benefits svg {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        color: rgb(var(--color-primary));
    }

    .storefront-desktop-install-panel__action {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 13px;
        padding-inline: 16px;
        border: 1px solid rgb(var(--color-primary) / 0.82);
        border-radius: 11px;
        background: rgb(var(--color-primary));
        color: #fff;
        font-size: 0.76rem;
        font-weight: 900;
        box-shadow: 0 7px 18px rgb(var(--color-primary) / 0.22);
        transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .storefront-desktop-install-panel__action svg {
        width: 17px;
        height: 17px;
    }

    .storefront-desktop-install-panel__action:hover {
        filter: brightness(1.04);
        box-shadow: 0 9px 22px rgb(var(--color-primary) / 0.29);
        transform: translateY(-1px);
    }

    .storefront-desktop-install-panel__action:active {
        transform: translateY(1px) scale(0.99);
    }

    .storefront-desktop-install-panel__action:focus-visible {
        outline: 3px solid rgb(var(--color-primary) / 0.2);
        outline-offset: 2px;
    }
}

@media (min-width: 1024px) {
    :root {
        --storefront-floating-control-size: 49px;
    }

    #support-widget-fab > button > svg,
    #whatsapp-fab > a > svg,
    .storefront-desktop-utility-button svg {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-overlay,
    .pwa-install-sheet,
    .pwa-install-actions__primary,
    .pwa-install-actions__dismiss,
    .storefront-desktop-utility-rail,
    .storefront-desktop-utility-button,
    .storefront-desktop-install-panel,
    .storefront-desktop-install-panel__action,
    .storefront-footer__back-top,
    .storefront-footer__contact-card,
    .storefront-footer__socials a,
.storefront-footer__links a {
        transition: none;
    }
}

/* Elegance product catalog filters and responsive drawer. */
.storefront-product-catalog {
    --catalog-primary: rgb(var(--color-primary));
    --catalog-primary-soft: rgb(var(--color-primary) / 0.08);
    --catalog-primary-border: rgb(var(--color-primary) / 0.2);
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.storefront-product-catalog__layout { display: block; }
.storefront-product-catalog__content { min-width: 0; }

.storefront-product-filter-shell {
    position: fixed;
    inset: 0;
    z-index: var(--z-shell-modal);
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 220ms;
}

.storefront-product-filter-shell.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.storefront-product-filter-shell__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgb(15 23 42 / 0.48);
    opacity: 0;
    backdrop-filter: blur(2px);
    transition: opacity 220ms ease;
}

.storefront-product-filter-shell.is-open .storefront-product-filter-shell__backdrop { opacity: 1; }

.storefront-product-filter-shell__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: min(88dvh, 760px);
    max-height: min(88dvh, 760px);
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-block-end: 0;
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -24px 70px rgb(15 23 42 / 0.18);
    transform: translate3d(0, 105%, 0);
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
    will-change: transform;
}

.storefront-product-filter-shell.is-open .storefront-product-filter-shell__panel { transform: translate3d(0, 0, 0); }

.storefront-product-filter-panel__content {
    display: flex;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
    background: #fff;
}

.storefront-product-filter-panel__content.is-loading { cursor: progress; }

.storefront-product-filter-panel__header {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 76px;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #eef2f7;
    background: rgb(255 255 255 / 0.96);
    backdrop-filter: blur(12px);
}

.storefront-product-filter-panel__handle {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 50%;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    transform: translateX(50%);
}

[dir="ltr"] .storefront-product-filter-panel__handle { transform: translateX(-50%); }

.storefront-product-filter-panel__heading {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
}

.storefront-product-filter-panel__heading-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--catalog-primary-soft);
    color: var(--catalog-primary);
}

.storefront-product-filter-panel__heading-icon svg { width: 20px; height: 20px; }

.storefront-product-filter-panel__heading h2 {
    margin: 0;
    color: rgb(var(--color-secondary));
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.storefront-product-filter-panel__heading p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.storefront-product-filter-panel__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.storefront-product-filter-panel__clear {
    min-height: 38px;
    padding: 7px 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--catalog-primary);
    font-size: 13px;
    font-weight: 600;
    transition: background-color 160ms ease;
}

.storefront-product-filter-panel__clear:hover { background: var(--catalog-primary-soft); }

.storefront-product-filter-panel__close {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #475569;
}

.storefront-product-filter-panel__close svg { width: 18px; height: 18px; }

.storefront-product-filter-panel__body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary) / 0.2) transparent;
}

.storefront-product-filter-panel__body::-webkit-scrollbar { width: 3px; }
.storefront-product-filter-panel__body::-webkit-scrollbar-track { background: transparent; }

.storefront-product-filter-panel__body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.2);
}

.storefront-product-filter-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-primary) / 0.38);
}

.storefront-product-filter-group { border-bottom: 1px solid #eef2f7; }
.storefront-product-filter-group:last-child { border-bottom: 0; }

.storefront-product-filter-group__trigger {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    background: #fff;
    color: rgb(var(--color-secondary));
    font-size: 14px;
    font-weight: 700;
    text-align: start;
    transition: background-color 160ms ease, color 160ms ease;
}

.storefront-product-filter-group__trigger:hover { background: #f8fafc; }

.storefront-product-filter-group__trigger-end {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.storefront-product-filter-group__trigger-end > svg {
    width: 17px;
    height: 17px;
    color: #94a3b8;
    transition: transform 200ms ease;
}

.storefront-product-filter-group__trigger-end > svg.is-open { transform: rotate(180deg); }

.storefront-product-filter-group__count {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--catalog-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.storefront-product-filter-group__active-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--catalog-primary);
    box-shadow: 0 0 0 4px var(--catalog-primary-soft);
}

.storefront-product-filter-group__content { padding: 0 16px 14px; }

.storefront-product-filter-search {
    position: relative;
    display: flex;
    min-height: 40px;
    align-items: center;
    margin-bottom: 8px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #fbfcfd;
    color: #7c8ba1;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.storefront-product-filter-search:focus-within {
    border-color: rgb(var(--color-primary) / 0.52);
    background: #fff;
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.1);
}

.storefront-product-filter-search > svg {
    position: absolute;
    inset-inline-start: 11px;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.storefront-product-filter-search input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 35px 7px 11px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f172a;
    font-size: 13px;
}

[dir="ltr"] .storefront-product-filter-search input { padding: 7px 11px 7px 35px; }

.storefront-product-filter-options { display: grid; gap: 3px; }

.storefront-product-filter-more {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--catalog-primary);
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease;
}

.storefront-product-filter-more:hover { background: var(--catalog-primary-soft); }

.storefront-product-filter-more > svg {
    width: 15px;
    height: 15px;
    transition: transform 180ms ease;
}

.storefront-product-filter-more > svg.is-expanded { transform: rotate(180deg); }

.storefront-product-filter-option {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border-radius: 11px;
    color: #475569;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.storefront-product-filter-option:hover { background: #f8fafc; color: #0f172a; }
.storefront-product-filter-option.is-selected { background: var(--catalog-primary-soft); color: rgb(var(--color-secondary)); font-weight: 600; }

.storefront-product-filter-option input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-color: #cbd5e1;
    border-radius: 5px;
    accent-color: var(--catalog-primary);
}

.storefront-product-filter-option > span {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.45;
}

.storefront-product-filter-option > small { color: #94a3b8; font-size: 11px; }

.storefront-product-filter-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 8px;
}

.storefront-product-filter-price label { display: grid; min-width: 0; gap: 6px; color: #64748b; font-size: 12px; }

.storefront-product-filter-price input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    outline: 0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.storefront-product-filter-price input:focus {
    border-color: var(--catalog-primary-border);
    background: #fff;
    box-shadow: 0 0 0 3px var(--catalog-primary-soft);
}

.storefront-product-filter-price__separator { padding-block-end: 11px; color: #94a3b8; }

.storefront-product-filter-colors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.storefront-product-filter-color {
    display: grid;
    min-width: 0;
    min-height: 58px;
    place-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #64748b;
}

.storefront-product-filter-color > span {
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px #cbd5e1;
}

.storefront-product-filter-color > small {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-product-filter-color.is-selected {
    border-color: var(--catalog-primary-border);
    background: var(--catalog-primary-soft);
    color: rgb(var(--color-secondary));
}

.storefront-product-filter-panel__footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    flex: 0 0 auto;
    gap: 9px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e2e8f0;
    background: rgb(255 255 255 / 0.96);
    backdrop-filter: blur(12px);
}

.storefront-product-filter-panel__cancel,
.storefront-product-filter-panel__apply {
    min-height: 46px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
}

.storefront-product-filter-panel__cancel { border: 1px solid #dbe2ea; background: #fff; color: #475569; }

.storefront-product-filter-panel__apply {
    border: 1px solid var(--catalog-primary);
    background: var(--catalog-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgb(var(--color-primary) / 0.2);
}

.storefront-product-catalog__heading { display: grid; gap: 13px; margin-bottom: 14px; }

.storefront-product-catalog__title h1 {
    margin: 0;
    color: rgb(var(--color-secondary));
    font-size: clamp(19px, 4.8vw, 24px);
    font-weight: 800;
    line-height: 1.35;
}

.storefront-product-catalog__title p { margin: 4px 0 0; color: #64748b; font-size: 12px; }

.storefront-product-catalog__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
}

.storefront-product-filter-toggle,
.storefront-product-sort__trigger {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #dfe5ec;
    border-radius: 13px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.storefront-product-filter-toggle:hover,
.storefront-product-sort__trigger:hover {
    border-color: var(--catalog-primary-border);
    color: var(--catalog-primary);
    box-shadow: 0 5px 14px rgb(var(--color-primary) / 0.08);
}

.storefront-product-filter-toggle > svg,
.storefront-product-sort__trigger > svg { width: 18px; height: 18px; flex: 0 0 18px; }

.storefront-product-filter-toggle__count {
    display: inline-flex;
    min-width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--catalog-primary);
    color: #fff;
    font-size: 10px;
}

.storefront-product-sort { position: relative; min-width: 0; }
.storefront-product-sort__trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.storefront-product-sort__chevron {
    width: 15px !important;
    height: 15px !important;
    margin-inline-start: auto;
    color: #94a3b8;
    transition: transform 180ms ease;
}

.storefront-product-sort__chevron.is-open { transform: rotate(180deg); }

.storefront-product-sort__menu {
    position: absolute;
    inset-block-start: calc(100% + 7px);
    inset-inline-end: 0;
    z-index: 50;
    width: max(100%, 220px);
    overflow: hidden;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 46px rgb(15 23 42 / 0.15);
}

.storefront-product-sort__menu button {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    font-size: 13px;
    text-align: start;
}

.storefront-product-sort__menu button:hover { background: #f8fafc; color: #0f172a; }
.storefront-product-sort__menu button.is-selected { background: var(--catalog-primary-soft); color: var(--catalog-primary); font-weight: 700; }
.storefront-product-sort__menu button svg { width: 17px; height: 17px; }

.storefront-product-active-filters {
    display: flex;
    gap: 7px;
    margin: -2px 0 14px;
    padding-bottom: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.storefront-product-active-filters::-webkit-scrollbar { display: none; }

.storefront-product-active-filter {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--catalog-primary-border);
    border-radius: 999px;
    background: var(--catalog-primary-soft);
    color: rgb(var(--color-secondary));
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.storefront-product-active-filter svg { width: 14px; height: 14px; color: var(--catalog-primary); }

.storefront-product-active-filters__clear {
    min-height: 36px;
    flex: 0 0 auto;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.storefront-product-search-indicator {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--catalog-primary-border);
    border-radius: 13px;
    background: var(--catalog-primary-soft);
    color: #64748b;
    font-size: 13px;
}

.storefront-product-search-indicator > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--catalog-primary); }
.storefront-product-search-indicator strong { min-width: 0; overflow: hidden; color: rgb(var(--color-secondary)); text-overflow: ellipsis; white-space: nowrap; }

.storefront-product-search-indicator button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
}

.storefront-product-search-indicator button:hover { background: rgb(255 255 255 / 0.7); color: var(--catalog-primary); }
.storefront-product-search-indicator button svg { width: 16px; height: 16px; }

.storefront-product-results { position: relative; min-height: 220px; }

.storefront-product-results__loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    min-height: 220px;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    padding-top: 72px;
    background: rgb(255 255 255 / 0.76);
    color: var(--catalog-primary);
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(2px);
}

.storefront-product-results__loading svg { width: 20px; height: 20px; animation: spin 800ms linear infinite; }
.storefront-product-results__grid--loading { pointer-events: none; opacity: 0.58; }

.storefront-product-empty-state {
    display: flex;
    min-height: 360px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 42px 20px;
    border: 1px dashed #dbe2ea;
    border-radius: 18px;
    background: #fbfcfe;
    text-align: center;
}

.storefront-product-empty-state__icon {
    display: inline-flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 20px;
    background: var(--catalog-primary-soft);
    color: var(--catalog-primary);
}

.storefront-product-empty-state__icon svg { width: 34px; height: 34px; }
.storefront-product-empty-state h2 { margin: 0; color: rgb(var(--color-secondary)); font-size: 18px; font-weight: 800; }
.storefront-product-empty-state p { max-width: 360px; margin: 7px 0 18px; color: #64748b; font-size: 13px; }

.storefront-product-empty-state > :is(a, button) {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid var(--catalog-primary);
    border-radius: 12px;
    background: var(--catalog-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.storefront-product-catalog :is(button, input, a):focus-visible {
    outline: 3px solid rgb(var(--color-primary) / 0.24);
    outline-offset: 2px;
}

.storefront-product-catalog .storefront-product-filter-search input:focus-visible {
    outline: 0;
    outline-offset: 0;
}

@media (max-width: 1199px) {
    html.storefront-product-filters-open .storefront-shell-main {
        z-index: var(--z-shell-critical);
    }

    .storefront-product-filter-shell {
        inset-block-start: var(--site-header-height, 96px);
    }

    .storefront-product-filter-shell__panel {
        inset-block: 0;
        height: 100%;
        max-height: 100%;
    }
}

@media (max-width: 767px) {
    .storefront-product-filter-shell {
        inset: 0;
    }

    .storefront-product-filter-shell__panel {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .storefront-product-filter-panel__header {
        min-height: calc(76px + env(safe-area-inset-top, 0px));
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .storefront-product-filter-panel__footer {
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .storefront-product-filter-shell__panel {
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: min(390px, 92vw);
        border: 1px solid #e3e8ef;
        border-inline-start: 0;
        border-start-end-radius: 18px;
        border-end-end-radius: 18px;
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        box-shadow: 18px 0 48px rgb(15 23 42 / 0.16);
        transform: translate3d(-105%, 0, 0);
    }

    [dir="rtl"] .storefront-product-filter-shell__panel {
        box-shadow: -18px 0 48px rgb(15 23 42 / 0.16);
        transform: translate3d(105%, 0, 0);
    }

    .storefront-product-filter-shell.is-open .storefront-product-filter-shell__panel { transform: translate3d(0, 0, 0); }
    .storefront-product-filter-panel__handle { display: none; }
    .storefront-product-filter-panel__header { min-height: 72px; padding-block: 14px; }

    .storefront-product-catalog__heading {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
        align-items: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-product-filter-shell {
        transition-delay: 0s;
    }

    .storefront-product-filter-shell__backdrop,
    .storefront-product-filter-shell__panel {
        transition-duration: 0.01ms !important;
    }
}

@media (min-width: 1200px) {
    .storefront-product-catalog { padding-bottom: 0; }

    .storefront-product-catalog__layout {
        display: grid;
        grid-template-columns: 272px minmax(0, 1fr);
        grid-template-areas: "filters products";
        align-items: start;
        gap: 24px;
    }

    .storefront-product-filter-shell {
        --catalog-filter-sticky-top: var(--site-header-height, 96px);
        position: sticky;
        inset: auto;
        top: var(--catalog-filter-sticky-top);
        z-index: 8;
        grid-area: filters;
        height: calc(100dvh - var(--catalog-filter-sticky-top));
        visibility: visible;
        align-self: start;
        pointer-events: auto;
    }

    .storefront-product-filter-shell__backdrop { display: none; }

    .storefront-product-filter-shell__panel {
        position: static;
        height: 100%;
        max-height: 100%;
        border: 1px solid #e7ebf0;
        border-radius: 18px;
        box-shadow: 0 10px 34px rgb(15 23 42 / 0.06);
        transform: none;
    }

    .storefront-product-filter-panel__content { height: 100%; max-height: 100%; }

    .storefront-product-filter-panel__header {
        position: static;
        min-height: 68px;
        padding: 13px 14px;
        background: #fff;
        backdrop-filter: none;
    }

    .storefront-product-filter-panel__handle,
    .storefront-product-filter-panel__close,
    .storefront-product-filter-panel__cancel { display: none; }

    .storefront-product-filter-panel__footer {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 14px;
    }

    .storefront-product-filter-panel__body { overflow-y: auto; scrollbar-gutter: stable; }
    .storefront-product-filter-group__trigger { min-height: 51px; padding-inline: 14px; }
    .storefront-product-filter-group__content { padding-inline: 14px; }
    .storefront-product-filter-search,
    .storefront-product-filter-search input { min-height: 38px; }
    .storefront-product-catalog__content { grid-area: products; }

    .storefront-product-catalog__heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
    }

    .storefront-product-catalog__controls { display: block; flex: 0 0 auto; }
    .storefront-product-filter-toggle { display: none; }

    .storefront-product-sort__trigger {
        width: auto;
        min-width: 214px;
        justify-content: flex-start;
    }

    .storefront-product-active-filters { flex-wrap: wrap; overflow: visible; }
}

@media (max-width: 479px) {
    .storefront-product-catalog__controls { gap: 7px; }
    .storefront-product-filter-toggle,
    .storefront-product-sort__trigger { padding-inline: 9px; font-size: 12px; }

    .storefront-product-filter-shell__panel {
        border-radius: 0;
    }

    .storefront-product-filter-panel__heading-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .storefront-product-active-filter { min-height: 34px; padding-block: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-product-filter-shell__backdrop,
    .storefront-product-filter-shell__panel,
    .storefront-product-filter-group__trigger-end > svg,
    .storefront-product-sort__chevron { transition: none; }
}

/* ========================================
   QUICK VIEW — RESPONSIVE PRODUCT DIALOG
   ======================================== */
.elegance-quick-view {
    --quick-view-primary: rgb(var(--color-primary));
    --quick-view-primary-soft: rgb(var(--color-primary) / 0.08);
    --quick-view-ink: #172033;
    --quick-view-muted: #687386;
    position: fixed;
    inset: 0;
    isolation: isolate;
    overflow: hidden;
}

.elegance-quick-view__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.58);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.elegance-quick-view__viewport {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    pointer-events: none;
}

.elegance-quick-view__dialog {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: min(1220px, calc(100vw - 56px));
    height: min(740px, calc(100dvh - 40px));
    max-height: 740px;
    overflow: hidden;
    color: var(--quick-view-ink);
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.08);
    border-radius: 18px;
    box-shadow: 0 28px 75px rgb(15 23 42 / 0.26), 0 4px 14px rgb(15 23 42 / 0.12);
    pointer-events: auto;
}

.elegance-quick-view__topbar {
    position: absolute;
    inset-block-start: 14px;
    inset-inline: 14px;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.elegance-quick-view__topbar-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.elegance-quick-view__close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #475569;
    background: rgb(255 255 255 / 0.94);
    border: 1px solid rgb(15 23 42 / 0.1);
    border-radius: 50%;
    box-shadow: 0 5px 16px rgb(15 23 42 / 0.1);
    cursor: pointer;
    pointer-events: auto;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.elegance-quick-view__close svg { width: 20px; height: 20px; }

.elegance-quick-view__close:hover {
    color: var(--quick-view-primary);
    border-color: rgb(var(--color-primary) / 0.28);
    background: #fff;
    transform: rotate(4deg);
}

.elegance-quick-view__body {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "media details"
        "media purchase";
    min-width: 0;
    min-height: 0;
}

[dir="rtl"] .elegance-quick-view__body {
    grid-template-areas:
        "details media"
        "purchase media";
}

.elegance-quick-view__scroll-region { display: contents; }

.elegance-quick-view__media {
    grid-area: media;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 18px;
    background: linear-gradient(145deg, rgb(var(--color-primary) / 0.055), #f7f8fa 52%, rgb(var(--color-gold) / 0.06));
}

.elegance-quick-view__image-stage {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    background: #f8f8f6;
    border: 1px solid rgb(15 23 42 / 0.055);
    border-radius: 12px;
}

.elegance-quick-view__main-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    will-change: opacity;
}

.elegance-quick-view__main-image.is-active {
    z-index: 1;
    opacity: 1;
}

.elegance-quick-view__image-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #b7bfca;
    background: linear-gradient(145deg, #fafafa, #f1f3f5);
}

.elegance-quick-view__image-placeholder svg { width: 68px; height: 68px; }

.elegance-quick-view__discount {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding-inline: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    background: #e63b55;
    border-radius: 8px;
    box-shadow: 0 5px 13px rgb(190 24 52 / 0.2);
}

.elegance-quick-view__image-arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #334155;
    background: rgb(255 255 255 / 0.9);
    border: 1px solid rgb(15 23 42 / 0.09);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgb(15 23 42 / 0.12);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 160ms ease, color 160ms ease, transform 160ms ease;
}

.elegance-quick-view__image-stage:hover .elegance-quick-view__image-arrow,
.elegance-quick-view__image-arrow:focus-visible { opacity: 1; }
.elegance-quick-view__image-arrow:hover { color: var(--quick-view-primary); transform: translateY(-50%) scale(1.04); }
.elegance-quick-view__image-arrow svg { width: 18px; height: 18px; }
.elegance-quick-view__image-arrow--previous { inset-inline-start: 12px; }
.elegance-quick-view__image-arrow--next { inset-inline-end: 12px; }

.elegance-quick-view__thumbnails {
    display: flex;
    gap: 8px;
    min-height: 58px;
    padding-block-start: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.elegance-quick-view__thumbnails::-webkit-scrollbar { display: none; }

.elegance-quick-view__thumbnail {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    padding: 2px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    cursor: pointer;
    opacity: 0.68;
    transition: opacity 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.elegance-quick-view__thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.elegance-quick-view__thumbnail:hover { opacity: 1; }
.elegance-quick-view__thumbnail.is-active {
    opacity: 1;
    border-color: var(--quick-view-primary);
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.14);
}

.elegance-quick-view__details {
    grid-area: details;
    min-width: 0;
    min-height: 0;
    padding: 42px 34px 24px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary) / 0.35) transparent;
}

.elegance-quick-view__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding-inline: 9px;
    margin-block-end: 10px;
    color: var(--quick-view-primary);
    font-size: 11px;
    font-weight: 700;
    background: var(--quick-view-primary-soft);
    border-radius: 7px;
}

.elegance-quick-view__product-name {
    color: var(--quick-view-ink);
    font-family: var(--font-display, inherit);
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 750;
    line-height: 1.42;
    text-wrap: balance;
}

.elegance-quick-view__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 9px;
    color: #7b8493;
    font-size: 12px;
}

.elegance-quick-view__stars { display: flex; gap: 2px; }
.elegance-quick-view__stars svg { width: 15px; height: 15px; color: #dfe3e8; }
.elegance-quick-view__stars svg.is-filled { color: #f4b740; }

.elegance-quick-view__description {
    display: -webkit-box;
    margin-block-start: 14px;
    overflow: hidden;
    color: var(--quick-view-muted);
    font-size: 14px;
    line-height: 1.85;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.elegance-quick-view__price-stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 9px 16px;
    padding-block: 18px;
    margin-block-start: 12px;
    border-block: 1px solid #edf0f3;
}

.elegance-quick-view__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.elegance-quick-view__price { color: var(--quick-view-primary); font-size: clamp(23px, 2.3vw, 30px); font-weight: 800; line-height: 1.2; }
.elegance-quick-view__prices del { color: #98a1ae; font-size: 14px; }

.elegance-quick-view__total-price {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    gap: 5px;
    color: #7b8493;
    font-size: 12px;
}
.elegance-quick-view__total-price strong { color: var(--quick-view-primary); }

.elegance-quick-view__stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding-inline: 10px;
    font-size: 12px;
    font-weight: 650;
    border-radius: 8px;
}
.elegance-quick-view__stock i { width: 7px; height: 7px; border-radius: 50%; }
.elegance-quick-view__stock.is-available { color: #087a54; background: #eaf8f2; }
.elegance-quick-view__stock.is-available i { background: #10a673; box-shadow: 0 0 0 3px rgb(16 166 115 / 0.12); }
.elegance-quick-view__stock.is-unavailable { color: #c32c43; background: #fff0f2; }
.elegance-quick-view__stock.is-unavailable i { background: #e5485f; }

.elegance-quick-view__variants { position: relative; padding-block-start: 18px; }
.elegance-quick-view__variants.is-busy { pointer-events: none; }
.elegance-quick-view__variants.is-busy .elegance-quick-view__color-option:not(.is-loading),
.elegance-quick-view__variants.is-busy .elegance-quick-view__image-option:not(.is-loading),
.elegance-quick-view__variants.is-busy .elegance-quick-view__text-option:not(.is-loading) { opacity: 0.58; }
.elegance-quick-view__variant-group + .elegance-quick-view__variant-group { margin-block-start: 18px; }
.elegance-quick-view__variant-group legend { display: flex; align-items: center; gap: 7px; margin-block-end: 9px; color: #3c4657; font-size: 13px; font-weight: 650; }
.elegance-quick-view__variant-group legend strong { color: var(--quick-view-primary); font-weight: 700; }
.elegance-quick-view__options { display: flex; flex-wrap: wrap; gap: 8px; }

.elegance-quick-view__color-option,
.elegance-quick-view__image-option,
.elegance-quick-view__text-option {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 42px;
    min-height: 42px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.elegance-quick-view__color-option::before,
.elegance-quick-view__image-option::before,
.elegance-quick-view__text-option::before,
.elegance-quick-view__color-option::after,
.elegance-quick-view__image-option::after,
.elegance-quick-view__text-option::after {
    position: absolute;
    z-index: 2;
    display: none;
    content: '';
    pointer-events: none;
}

.elegance-quick-view__color-option.is-loading::before,
.elegance-quick-view__image-option.is-loading::before,
.elegance-quick-view__text-option.is-loading::before {
    inset: 2px;
    display: block;
    background: rgb(255 255 255 / 0.88);
    border-radius: inherit;
}

.elegance-quick-view__color-option.is-loading::after,
.elegance-quick-view__image-option.is-loading::after,
.elegance-quick-view__text-option.is-loading::after {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin-block-start: -8px;
    margin-inline-start: -8px;
    border: 2px solid rgb(var(--color-primary) / 0.22);
    border-block-start-color: var(--quick-view-primary);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
}

.elegance-quick-view__color-option {
    width: 42px;
    color: #fff;
    background: var(--quick-view-option-color);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cfd5dc;
}
.elegance-quick-view__color-option svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.7)); }
.elegance-quick-view__color-option.is-selected { box-shadow: 0 0 0 2px var(--quick-view-primary); transform: scale(1.04); }

.elegance-quick-view__image-option { width: 44px; height: 44px; padding: 2px; overflow: hidden; background: #fff; border: 1px solid #dbe0e6; border-radius: 9px; }
.elegance-quick-view__image-option img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.elegance-quick-view__image-option.is-selected { border-color: var(--quick-view-primary); box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.14); }

.elegance-quick-view__text-option { padding: 8px 14px; color: #4a5567; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid #dce1e7; border-radius: 9px; }
.elegance-quick-view__text-option:hover { border-color: rgb(var(--color-primary) / 0.45); }
.elegance-quick-view__text-option.is-selected { color: #fff; background: var(--quick-view-primary); border-color: var(--quick-view-primary); box-shadow: 0 5px 12px rgb(var(--color-primary) / 0.18); }
.elegance-quick-view__select-wrapper { position: relative; width: 100%; }
.elegance-quick-view__select {
    width: 100%;
    min-height: 42px;
    padding: 8px 36px 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #3c4657;
    background-color: #fff;
    border: 1px solid #dce1e7;
    border-radius: 9px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
[dir="rtl"] .elegance-quick-view__select { padding: 8px 14px 8px 36px; }
.elegance-quick-view__select:focus { outline: none; border-color: var(--quick-view-primary); box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14); }
.dark .elegance-quick-view__select { background-color: #1f2937; border-color: #374151; color: #f9fafb; }
.elegance-quick-view__option-price { font-size: 11px; opacity: 0.85; font-weight: 500; }
.elegance-quick-view__purchase {
    grid-area: purchase;
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgb(255 255 255 / 0.97);
    border-block-start: 1px solid #e9edf1;
    box-shadow: 0 -8px 25px rgb(15 23 42 / 0.035);
}

.elegance-quick-view__quantity {
    display: grid;
    grid-template-columns: 36px 38px 36px;
    align-items: center;
    min-height: 42px;
    padding: 3px;
    background: #f3f5f7;
    border: 1px solid #e4e8ec;
    border-radius: 10px;
}
.elegance-quick-view__quantity button { display: grid; place-items: center; width: 36px; height: 36px; color: #475569; background: #fff; border: 1px solid #e4e8ec; border-radius: 8px; cursor: pointer; }
.elegance-quick-view__quantity button:hover:not(:disabled) { color: var(--quick-view-primary); border-color: rgb(var(--color-primary) / 0.3); }
.elegance-quick-view__quantity button:disabled { opacity: 0.35; cursor: not-allowed; }
.elegance-quick-view__quantity button svg { width: 15px; height: 15px; }
.elegance-quick-view__quantity output { color: #263143; font-size: 14px; font-weight: 750; text-align: center; }

.elegance-quick-view__add-to-cart,
.elegance-quick-view__details-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding-inline: 17px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--storefront-action-radius);
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.elegance-quick-view__add-to-cart { color: #fff; background: var(--quick-view-primary); border: 1px solid var(--quick-view-primary); cursor: pointer; box-shadow: 0 8px 18px rgb(var(--color-primary) / 0.2); }
.elegance-quick-view__add-to-cart:hover { transform: translateY(-1px); box-shadow: 0 11px 23px rgb(var(--color-primary) / 0.28); }
.elegance-quick-view__add-to-cart.is-added { background: #15956a; border-color: #15956a; }
.elegance-quick-view__add-to-cart:disabled { opacity: 0.65; cursor: wait; transform: none; }
.elegance-quick-view__add-to-cart svg { width: 19px; height: 19px; }
.elegance-quick-view__details-link { color: #364153; background: #fff; border: 1px solid #dce1e7; }
.elegance-quick-view__details-link:hover { color: var(--quick-view-primary); border-color: rgb(var(--color-primary) / 0.38); background: var(--quick-view-primary-soft); }
.elegance-quick-view__details-link svg { width: 17px; height: 17px; }
[dir="rtl"] .elegance-quick-view__details-link svg { transform: scaleX(-1); }
.elegance-quick-view__stock-notification { grid-column: 1 / 3; min-width: 0; }
.elegance-quick-view__stock-notification > * { width: 100%; }
.elegance-quick-view__purchase.is-out-of-stock {
    grid-template-columns: 48px 48px;
    justify-content: end;
}
.elegance-quick-view__purchase.is-out-of-stock .elegance-quick-view__stock-notification {
    grid-column: auto;
    width: 48px;
}
.elegance-quick-view__purchase.is-out-of-stock .elegance-quick-view__details-link {
    width: 48px;
    padding: 0;
}
.elegance-quick-view__purchase.is-out-of-stock .elegance-quick-view__details-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.elegance-quick-view__stock-action {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--quick-view-primary);
    border-radius: var(--storefront-action-radius);
    background: var(--quick-view-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgb(var(--color-primary) / 0.2);
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.elegance-quick-view__stock-action > span {
    display: grid;
    place-items: center;
}
.elegance-quick-view__stock-action svg {
    width: 20px;
    height: 20px;
}
.elegance-quick-view__stock-action:hover:not(:disabled) {
    background: rgb(var(--color-secondary));
    border-color: rgb(var(--color-secondary));
    transform: translateY(-1px);
}
.elegance-quick-view__stock-action:disabled {
    opacity: 0.62;
    cursor: wait;
}
.elegance-quick-view__stock-action.is-subscribed {
    border-color: #15956a;
    background: #15956a;
    cursor: default;
    box-shadow: 0 8px 18px rgb(21 149 106 / 0.18);
}
.elegance-quick-view__stock-spinner {
    animation: spin 0.7s linear infinite;
}
.elegance-quick-view__button-loading { width: 17px; height: 17px; border: 2px solid rgb(255 255 255 / 0.35); border-block-start-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }

.elegance-quick-view__loading { display: grid; place-content: center; gap: 12px; height: 100%; min-height: 300px; color: var(--quick-view-muted); text-align: center; }
.elegance-quick-view__loading > span { width: 42px; height: 42px; margin-inline: auto; border: 3px solid rgb(var(--color-primary) / 0.18); border-block-start-color: var(--quick-view-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

.elegance-quick-view-transition { transition: opacity 180ms ease; }
.elegance-quick-view-backdrop-start { opacity: 0; }
.elegance-quick-view-backdrop-end { opacity: 1; }
.elegance-quick-view-dialog-transition { transition: opacity 200ms ease, transform 220ms var(--ease-out-expo); }
.elegance-quick-view-dialog-start { opacity: 0; transform: translateY(14px) scale(0.985); }
.elegance-quick-view-dialog-end { opacity: 1; transform: translateY(0) scale(1); }

.elegance-quick-view button:focus-visible,
.elegance-quick-view a:focus-visible {
    outline: 2px solid var(--quick-view-primary);
    outline-offset: 2px;
}

@media (max-width: 959px) {
    .elegance-quick-view__viewport { place-items: center; padding: 12px; }
    .elegance-quick-view__dialog {
        grid-template-rows: auto minmax(0, 1fr);
        width: min(680px, calc(100vw - 24px));
        height: calc(100dvh - 24px);
        max-height: 820px;
        border-radius: 16px;
    }

    .elegance-quick-view__topbar {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        padding-inline: 17px 10px;
        background: #fff;
        border-block-end: 1px solid #e9edf1;
        pointer-events: auto;
    }
    .elegance-quick-view__topbar-title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; color: #2a3546; font-size: 15px; font-weight: 750; }
    .elegance-quick-view__close { width: 38px; height: 38px; box-shadow: none; }
    .elegance-quick-view__body { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); min-height: 0; }
    .elegance-quick-view__scroll-region { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .elegance-quick-view__media { padding: 12px; }
    .elegance-quick-view__image-stage { flex: none; height: clamp(250px, 40dvh, 350px); }
    .elegance-quick-view__image-arrow { width: 40px; height: 40px; opacity: 1; }
    .elegance-quick-view__thumbnails { min-height: 54px; }
    .elegance-quick-view__thumbnail { flex-basis: 52px; width: 52px; height: 52px; }
    .elegance-quick-view__details { padding: 20px 20px 24px; overflow: visible; }
    .elegance-quick-view__product-name { font-size: clamp(20px, 4vw, 25px); }
    .elegance-quick-view__description { line-height: 1.75; }
    .elegance-quick-view__purchase { grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px 14px; padding-block-end: max(11px, env(safe-area-inset-bottom)); }
    .elegance-quick-view__stock-notification { grid-column: 1 / 3; }
}

@media (max-width: 599px) {
    .elegance-quick-view__viewport { padding: 0; }
    .elegance-quick-view__dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .elegance-quick-view__topbar { min-height: calc(52px + env(safe-area-inset-top)); padding-block-start: env(safe-area-inset-top); }
    .elegance-quick-view__image-stage { height: clamp(225px, 36dvh, 310px); }
    .elegance-quick-view__media { padding: 9px 10px 11px; }
    .elegance-quick-view__details { padding: 17px 15px 22px; }
    .elegance-quick-view__eyebrow { margin-block-end: 8px; }
    .elegance-quick-view__product-name { font-size: 20px; line-height: 1.45; }
    .elegance-quick-view__price { font-size: 23px; }
    .elegance-quick-view__price-stock { padding-block: 15px; }
    .elegance-quick-view__purchase { gap: 7px; padding-inline: 9px; }
    .elegance-quick-view__quantity { grid-template-columns: 32px 33px 32px; }
    .elegance-quick-view__quantity button { width: 32px; height: 36px; }
    .elegance-quick-view__add-to-cart,
    .elegance-quick-view__details-link { min-height: 46px; padding-inline: 12px; }
    .elegance-quick-view__details-link { width: 46px; padding: 0; }
    .elegance-quick-view__details-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .elegance-quick-view__details-link svg { width: 19px; height: 19px; }
    .elegance-quick-view__stock-notification { grid-column: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .elegance-quick-view *,
    .elegance-quick-view *::before,
    .elegance-quick-view *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* ========================================
   PRODUCT DETAIL EXPERIENCE
   Scoped to the Elegance product page so the storefront shell, product cards,
   quick view, and merchant content retain their existing behavior.
   ======================================== */
.pdp-page {
    --pdp-ink: rgb(var(--color-secondary));
    --pdp-muted: #667085;
    --pdp-border: #e7e9ee;
    --pdp-soft: #f7f8fa;
    --pdp-primary: rgb(var(--color-primary));
    --pdp-primary-soft: rgb(var(--color-primary) / 0.08);
    color: var(--pdp-ink);
    overflow-x: clip;
}

.pdp-page button,
.pdp-page a {
    -webkit-tap-highlight-color: transparent;
}

.pdp-breadcrumb {
    background: #fff;
}

.pdp-primary-section {
    position: relative;
    isolation: isolate;
    background: #fff;
    border-block-end: 1px solid rgb(231 233 238 / 0.85);
}

.pdp-primary-section::before {
    content: none;
}

.pdp-top-layout {
    display: grid;
    grid-template-areas:
        "identity"
        "gallery"
        "purchase";
    gap: clamp(18px, 3vw, 28px);
    min-width: 0;
}

.pdp-info {
    display: contents;
}

.pdp-gallery {
    grid-area: gallery;
    min-width: 0;
}

.pdp-identity {
    grid-area: identity;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.pdp-brand-actions { order: 1; }
.pdp-title { order: 2; }
.pdp-rating { order: 3; }
.pdp-purchase-count { order: 4; }

.pdp-brand-actions {
    min-width: 0;
    flex-wrap: wrap;
}

.pdp-brand-actions > :first-child {
    min-width: 0;
}

.pdp-brand-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-brand-mark {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    place-items: center;
    background: #fff;
    border: 1px solid var(--pdp-border);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgb(15 23 42 / 0.06);
}

.pdp-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.pdp-title {
    margin: 0;
    color: var(--pdp-ink);
    font-size: clamp(20px, 5.5vw, 22px);
    font-weight: 700;
    line-height: 1.5;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.pdp-rating {
    min-height: 30px;
    color: var(--pdp-muted);
    border-radius: 7px;
    transition: color 160ms ease, background-color 160ms ease;
}

.pdp-rating:hover {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
}

.pdp-purchase {
    grid-area: purchase;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.pdp-price { order: 1; }
.pdp-stock { order: 2; }
.pdp-short-description { order: 3; }
.pdp-flash-sale { order: 4; }
.pdp-variants { order: 5; }
.pdp-primary-purchase { order: 6; }
.pdp-meta { order: 7; }

.pdp-price > :first-child {
    font-size: clamp(24px, 6vw, 28px);
    line-height: 1.25;
}

.pdp-price {
    min-height: 42px;
}

.pdp-short-description {
    max-width: 68ch;
    margin: 0;
    overflow-wrap: anywhere;
}

.pdp-stock {
    width: fit-content;
    min-height: 30px;
    padding-inline: 9px;
    border-radius: 7px;
    background: #f5faf8;
}

.pdp-gallery-layout {
    position: relative;
    display: grid;
    grid-template-areas:
        "stage"
        "thumbs";
    gap: 9px;
    min-width: 0;
}

.pdp-gallery-stage {
    position: relative;
    grid-area: stage;
    display: block;
    width: 100%;
    min-height: 240px;
    height: auto;
    max-height: 380px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #fff 0%, #f7f8fa 66%, #f1f3f6 100%);
    border: 1px solid rgb(222 226 232 / 0.9);
    border-radius: 14px;
    box-shadow: 0 16px 42px rgb(15 23 42 / 0.075);
    cursor: zoom-in;
}

.pdp-gallery-stage::after {
    position: absolute;
    inset: -35%;
    z-index: 1;
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.42) 49%, transparent 63%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(-62%) rotate(5deg);
    transition: opacity 180ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pdp-gallery-stage:disabled {
    cursor: default;
}

.pdp-thumbnails {
    grid-area: thumbs;
    display: flex;
    gap: 7px;
    min-width: 0;
    padding-block: 1px 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
}

.pdp-thumbnail {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 2px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pdp-border);
    border-radius: 8px;
    opacity: 0.72;
    scroll-snap-align: start;
    transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-thumbnail:hover {
    opacity: 1;
    border-color: rgb(var(--color-primary) / 0.45);
}

.pdp-thumbnail.is-active {
    opacity: 1;
    border-color: var(--pdp-primary);
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.13);
    transform: translateY(-1px);
}

.pdp-thumbnail img {
    border-radius: 5px;
    object-fit: contain;
}

.pdp-gallery-image {
    object-fit: contain;
    object-position: center;
    transform-origin: var(--pdp-zoom-x, 50%) var(--pdp-zoom-y, 50%);
    transform: scale(1);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), transform-origin 80ms linear;
}

@media (hover: hover) and (pointer: fine) {
    .pdp-gallery-stage:hover .pdp-gallery-image {
        transform: scale(1.11);
    }

    .pdp-gallery-stage:hover::after {
        opacity: 1;
        transform: translateX(62%) rotate(5deg);
    }
}

.pdp-badges {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    max-width: calc(100% - 64px);
    pointer-events: none;
}

.pdp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.09);
}

.pdp-badge-quality {
    background: rgb(var(--color-secondary) / 0.82);
}

.pdp-gallery-expand {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgb(15 23 42 / 0.68);
    border: 1px solid rgb(255 255 255 / 0.32);
    border-radius: 9px;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.15);
    transition: background-color 160ms ease, transform 160ms ease;
}

.pdp-gallery-count {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding-inline: 10px;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
    background: rgb(255 255 255 / 0.88);
    border: 1px solid rgb(255 255 255 / 0.92);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.08);
    backdrop-filter: blur(10px);
}

.pdp-gallery-count bdi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pdp-gallery-stage:hover .pdp-gallery-expand {
    background: rgb(15 23 42 / 0.82);
    transform: translateY(-1px);
}

.pdp-flash-sale {
    --pdp-sale-start: #ef4444;
    --pdp-sale-end: #f97316;
    padding: 9px 11px;
    background: linear-gradient(110deg, rgb(239 68 68 / 0.07), rgb(249 115 22 / 0.08));
    border: 1px solid rgb(249 115 22 / 0.22);
    border-radius: 10px;
    box-shadow: 0 5px 16px rgb(239 68 68 / 0.055);
}

.pdp-flash-sale-inner,
.pdp-flash-sale-label,
.pdp-flash-sale-timer {
    display: flex;
    align-items: center;
}

.pdp-flash-sale-inner {
    justify-content: space-between;
    gap: 10px 14px;
}

.pdp-flash-sale-label {
    min-width: 0;
    gap: 8px;
}

.pdp-flash-sale-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--pdp-sale-start), var(--pdp-sale-end));
    border: 0;
    border-radius: 8px;
    box-shadow: 0 5px 12px rgb(239 68 68 / 0.2);
}

.pdp-flash-sale-name {
    overflow: hidden;
    color: #c2410c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-flash-sale-timer {
    flex: 0 0 auto;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}

.pdp-flash-time-unit {
    display: inline-grid;
    min-width: 29px;
    height: 28px;
    place-items: center;
    color: #344054;
    font-size: 11px;
    font-weight: 750;
    background: #fff;
    border: 1px solid rgb(249 115 22 / 0.18);
    border-radius: 7px;
    box-shadow: none;
}

.pdp-flash-time-unit.is-seconds {
    color: var(--pdp-sale-start);
    background: rgb(254 242 242 / 0.92);
}

.pdp-flash-time-separator {
    color: #f97316;
    font-size: 11px;
    font-weight: 700;
}

.pdp-flash-sale-ended {
    color: #667085;
    font-size: 12px;
}

.pdp-wishlist-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #667085;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(15 23 42 / 0.045);
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-wishlist-button:hover:not(:disabled) {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-color: rgb(var(--color-primary) / 0.32);
    transform: translateY(-1px);
}

.pdp-wishlist-button.is-active {
    color: #fff;
    background: var(--pdp-primary);
    border-color: var(--pdp-primary);
    box-shadow: 0 7px 16px rgb(var(--color-primary) / 0.2);
}

.pdp-wishlist-button:disabled {
    cursor: wait;
    opacity: 0.66;
}

.pdp-variants {
    padding-block: 2px;
}

.pdp-variant-group + .pdp-variant-group {
    margin-block-start: 16px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--pdp-border);
}

.pdp-variant-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    margin-block-end: 10px;
}

.pdp-variant-name {
    margin: 0;
    color: var(--pdp-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.pdp-variant-selection {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding-inline: 8px;
    color: var(--pdp-primary);
    font-size: 11px;
    font-weight: 700;
    background: var(--pdp-primary-soft);
    border-radius: 7px;
}

.pdp-variant-select-wrapper {
    position: relative;
    width: 100%;
}

.pdp-variant-select {
    width: 100%;
    min-height: 44px;
    padding: 9px 36px 9px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1d2939;
    background-color: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

[dir="rtl"] .pdp-variant-select {
    padding: 9px 14px 9px 36px;
}

.pdp-variant-select:focus {
    outline: none;
    border-color: var(--pdp-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14);
}

.dark .pdp-variant-select {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.pdp-variant-option-price {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

.pdp-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pdp-variant-option {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    overflow: hidden;
    color: #475467;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.025);
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-variant-option:hover:not(:disabled):not(.is-selected) {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-color: rgb(var(--color-primary) / 0.36);
    transform: translateY(-1px);
}

.pdp-variant-option:focus-visible {
    outline: none;
    border-color: var(--pdp-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14);
}

.pdp-variant-option.is-selected {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-color: var(--pdp-primary);
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.09);
}

.pdp-variant-option.is-unavailable {
    cursor: not-allowed;
    color: #98a2b3;
    background: #f7f8fa;
    border-color: #eaecf0;
    opacity: 0.58;
}

.pdp-variant-option.is-unavailable::after {
    position: absolute;
    inset-inline: 7px;
    inset-block-start: 50%;
    height: 1px;
    background: #c7cdd5;
    content: "";
    transform: rotate(-12deg);
}

.pdp-variant-option-content,
.pdp-variant-option-loading {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.pdp-variant-option-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    color: var(--pdp-primary);
    background: rgb(255 255 255 / 0.82);
    backdrop-filter: blur(1px);
}

.pdp-variant-option.is-loading {
    cursor: wait;
    border-color: rgb(var(--color-primary) / 0.42);
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.08);
}

.pdp-variant-option-label {
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-variant-check {
    flex: 0 0 auto;
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 140ms ease, transform 140ms ease;
}

.pdp-variant-option.is-selected .pdp-variant-check {
    opacity: 1;
    transform: scale(1);
}

.pdp-variant-option--color,
.pdp-variant-option--image {
    padding-inline: 9px 11px;
}

.pdp-variant-color {
    display: inline-grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    background: var(--pdp-option-color);
    border: 1px solid rgb(15 23 42 / 0.14);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.36);
}

.pdp-variant-image {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
}

.pdp-meta {
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.pdp-purchase-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 9px;
}

.pdp-quantity-selector {
    display: grid;
    grid-template-columns: 42px minmax(42px, 52px) 42px;
    align-items: center;
    min-height: 50px;
    padding: 3px;
    background: #f4f5f7;
    border: 1px solid var(--pdp-border);
    border-radius: 10px;
}

.pdp-quantity-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #475467;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.pdp-quantity-button:hover {
    color: var(--pdp-primary);
    border-color: rgb(var(--color-primary) / 0.35);
    background: var(--pdp-primary-soft);
}

.pdp-quantity-value {
    color: var(--pdp-ink);
    font-size: 16px;
    font-weight: 750;
    text-align: center;
}

.pdp-purchase-buttons {
    display: flex;
    flex: 1 1 180px;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

.pdp-add-button,
.pdp-whatsapp-button {
    min-width: min(100%, 180px);
    min-height: 50px;
    padding: 11px 18px;
    font-size: 14px;
    line-height: 1.3;
    border-radius: var(--storefront-action-radius);
    box-shadow: 0 7px 16px rgb(var(--color-primary) / 0.16);
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-add-button:hover:not(:disabled),
.pdp-whatsapp-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgb(var(--color-primary) / 0.22);
}

.pdp-whatsapp-button {
    box-shadow: none;
}

.pdp-details {
    margin-block-start: clamp(28px, 4vw, 48px);
    scroll-margin-block-start: calc(var(--site-header-height, 96px) + 12px);
}

.pdp-after-primary {
    padding-block-end: clamp(48px, 7vw, 88px);
}

.pdp-related-products {
    position: relative;
    margin-block-start: clamp(48px, 6vw, 76px);
    padding-block-start: clamp(24px, 3vw, 34px);
    border-block-start: 1px solid #e5e8ed;
}

.pdp-related-products::before {
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    width: clamp(52px, 7vw, 86px);
    height: 3px;
    content: "";
    background: var(--pdp-primary);
    border-radius: 999px;
}

.pdp-related-heading,
.pdp-related-heading-copy,
.pdp-related-view-all {
    display: flex;
    align-items: center;
}

.pdp-related-heading {
    justify-content: space-between;
    gap: 18px;
    margin-block-end: clamp(20px, 2.6vw, 28px);
}

.pdp-related-heading-copy {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
}

.pdp-related-heading-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 11px;
    box-shadow: 0 5px 14px rgb(var(--color-primary) / 0.08);
    place-items: center;
}

.pdp-related-heading-icon svg {
    width: 21px;
    height: 21px;
}

.pdp-related-title-group {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.pdp-related-title {
    margin: 0;
    color: var(--pdp-ink);
    font-family: var(--font-display, inherit);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pdp-related-title-accent {
    width: 38px;
    height: 3px;
    background: linear-gradient(90deg, var(--pdp-primary), rgb(var(--color-gold)));
    border-radius: 999px;
}

.pdp-related-view-all {
    min-height: 44px;
    flex: 0 0 auto;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    color: var(--pdp-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    background: #fff;
    border: 1px solid rgb(var(--color-primary) / 0.2);
    border-radius: var(--storefront-action-radius);
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.045);
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-related-view-all svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

[dir="rtl"] .pdp-related-view-all svg {
    transform: scaleX(-1);
}

.pdp-related-view-all:hover {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-color: rgb(var(--color-primary) / 0.34);
    box-shadow: 0 7px 18px rgb(var(--color-primary) / 0.1);
    transform: translateY(-1px);
}

.pdp-related-view-all:hover svg {
    transform: translateX(2px);
}

[dir="rtl"] .pdp-related-view-all:hover svg {
    transform: scaleX(-1) translateX(2px);
}

.pdp-related-grid {
    min-width: 0;
}

.pdp-details-layout {
    display: grid;
    gap: clamp(18px, 3vw, 28px);
    min-width: 0;
}

.pdp-details-main,
.pdp-details-aside {
    min-width: 0;
}

.pdp-details-aside-inner {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.pdp-details-aside .pdp-bundle {
    margin-block-start: 0;
}

.pdp-rating-overview {
    display: grid;
    gap: 14px;
    width: 100%;
    min-height: 44px;
    padding: 16px;
    color: var(--pdp-ink);
    text-align: start;
    background: #fff;
    border: 1px solid var(--pdp-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.055);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-rating-overview:hover {
    border-color: rgb(var(--color-primary) / 0.28);
    box-shadow: 0 11px 28px rgb(15 23 42 / 0.075);
    transform: translateY(-1px);
}

.pdp-rating-overview-heading,
.pdp-rating-overview-score,
.pdp-rating-overview-copy,
.pdp-rating-overview-stars,
.pdp-rating-overview-action {
    display: flex;
    align-items: center;
}

.pdp-rating-overview-heading {
    gap: 8px;
    font-size: 14px;
    font-weight: 750;
}

.pdp-rating-overview-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #f59e0b;
    background: #fffbeb;
    border-radius: 8px;
}

.pdp-rating-overview-icon svg {
    width: 17px;
    height: 17px;
}

.pdp-rating-overview-score {
    gap: 12px;
}

.pdp-rating-overview-score > strong {
    flex: 0 0 auto;
    color: var(--pdp-ink);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pdp-rating-overview-copy {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: #667085;
    font-size: 11px;
    line-height: 1.5;
}

.pdp-rating-overview-stars {
    gap: 2px;
    color: #e5e7eb;
}

.pdp-rating-overview-stars svg {
    width: 15px;
    height: 15px;
}

.pdp-rating-overview-stars .is-filled {
    color: #f59e0b;
}

.pdp-rating-overview-action {
    justify-content: space-between;
    gap: 8px;
    padding-block-start: 11px;
    color: var(--pdp-primary);
    font-size: 12px;
    font-weight: 700;
    border-block-start: 1px solid var(--pdp-border);
}

.pdp-rating-overview-action svg {
    width: 16px;
    height: 16px;
    transition: transform 160ms ease;
}

[dir="rtl"] .pdp-rating-overview-action svg {
    transform: scaleX(-1);
}

.pdp-rating-overview:hover .pdp-rating-overview-action svg {
    transform: translateX(2px);
}

[dir="rtl"] .pdp-rating-overview:hover .pdp-rating-overview-action svg {
    transform: scaleX(-1) translateX(2px);
}

.pdp-section-nav {
    display: none;
}

.pdp-sections {
    display: grid;
    gap: 9px;
}

.pdp-detail-section {
    min-width: 0;
    overflow: clip;
    background: #fff;
    border: 1px solid var(--pdp-border);
    border-radius: 11px;
    scroll-margin-block-start: calc(var(--site-header-height, 96px) + 72px);
}

.pdp-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    color: var(--pdp-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: start;
    background: #fff;
    transition: color 160ms ease, background-color 160ms ease;
}

.pdp-accordion-trigger[aria-expanded="true"] {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
}

.pdp-accordion-label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.pdp-accordion-label > svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    color: rgb(var(--color-primary) / 0.78);
}

.pdp-accordion-chevron {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    transition: transform 180ms ease;
}

.pdp-accordion-chevron.is-open {
    transform: rotate(180deg);
}

.pdp-section-title {
    display: none;
}

.pdp-section-count,
.pdp-bundle-selection {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    padding-inline: 6px;
    color: var(--pdp-primary);
    font-size: 11px;
    font-weight: 750;
    background: var(--pdp-primary-soft);
    border-radius: 999px;
}

.pdp-section-content {
    min-width: 0;
    padding: 16px 14px 19px;
    color: #535f70;
}

.pdp-section-content .prose {
    max-width: 80ch;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.85;
}

.pdp-section-content .prose :is(img, video, iframe, table) {
    max-width: 100%;
}

.pdp-section-content .prose table {
    display: block;
    overflow-x: auto;
}

.pdp-bundle {
    margin-block-start: clamp(22px, 3vw, 30px);
    padding: clamp(14px, 2vw, 18px);
    background:
        radial-gradient(circle at 100% 0%, rgb(var(--color-primary) / 0.07), transparent 42%),
        #fff;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgb(15 23 42 / 0.055);
}

.pdp-bundle-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: 14px;
}

.pdp-bundle-heading-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.12);
    border-radius: 10px;
}

.pdp-bundle-heading-icon svg {
    width: 19px;
    height: 19px;
}

.pdp-bundle-heading-copy {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1px;
}

.pdp-bundle-title {
    margin: 0;
    color: var(--pdp-ink);
    font-size: clamp(15px, 2.6vw, 17px);
    font-weight: 800;
    line-height: 1.45;
}

.pdp-bundle-subtitle {
    color: #7b8493;
    font-size: 11px;
    line-height: 1.65;
}

.pdp-bundle-heading .pdp-bundle-selection {
    flex: 0 0 auto;
    min-width: 25px;
    height: 25px;
    margin-inline-start: auto;
    background: #fff;
    border: 1px solid rgb(var(--color-primary) / 0.16);
    box-shadow: 0 3px 10px rgb(15 23 42 / 0.05);
}

.pdp-bundle-layout {
    display: grid;
    gap: 12px;
}

.pdp-bundle-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    width: 100%;
    gap: 9px;
    min-width: 0;
}

.pdp-bundle-product {
    position: relative;
    min-width: 0;
    padding: 8px;
    background: rgb(255 255 255 / 0.78);
    border: 1px solid var(--pdp-border);
    border-radius: 11px;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.pdp-bundle-product.is-selected {
    background: #fff;
    border-color: rgb(var(--color-primary) / 0.24);
    box-shadow: 0 5px 16px rgb(var(--color-primary) / 0.07);
}

.pdp-bundle-product:hover {
    border-color: rgb(var(--color-primary) / 0.34);
    box-shadow: 0 7px 20px rgb(15 23 42 / 0.07);
}

.pdp-bundle-plus {
    display: none;
}

.pdp-bundle-checkbox {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    cursor: pointer;
}

.pdp-bundle-checkbox > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: transparent;
    background: #fff;
    border: 1px solid #c8ced8;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.1);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.pdp-bundle-checkbox > span.is-selected {
    color: #fff;
    background: var(--pdp-primary);
    border-color: var(--pdp-primary);
    box-shadow: 0 4px 10px rgb(var(--color-primary) / 0.22);
}

.pdp-bundle-checkbox:hover > span {
    border-color: rgb(var(--color-primary) / 0.5);
    transform: scale(1.04);
}

.pdp-bundle-checkbox input:focus-visible + span {
    outline: 2px solid rgb(var(--color-primary) / 0.3);
    outline-offset: 2px;
}

.pdp-bundle-discount {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    padding: 3px 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    background: #e5485f;
    border-radius: 5px;
}

.pdp-bundle-link {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.pdp-bundle-image {
    width: 68px;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: var(--pdp-soft);
    border-radius: 9px;
}

.pdp-bundle-name {
    display: -webkit-box;
    min-height: 38px;
    margin: 0;
    overflow: hidden;
    color: #344054;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pdp-bundle-copy {
    min-width: 0;
    padding-inline-end: 38px;
}

.pdp-bundle-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin-block-start: 5px;
    color: var(--pdp-primary);
    font-size: 13px;
    font-weight: 750;
}

.pdp-bundle-price del {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 500;
}

.pdp-bundle-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: var(--pdp-primary);
    border: 1px solid var(--pdp-primary);
    border-radius: var(--storefront-action-radius);
    box-shadow: 0 7px 16px rgb(var(--color-primary) / 0.16);
    transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-bundle-add:hover:not(:disabled) {
    filter: brightness(0.94);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgb(var(--color-primary) / 0.22);
}

.pdp-bundle-add:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    box-shadow: none;
}

.pdp-bundle-add-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.pdp-mobile-purchase-dock {
    position: fixed;
    inset-inline: 0;
    /* Match the real 4rem mobile navigation rail instead of the broader
       page-content clearance token, which intentionally includes extra air. */
    inset-block-end: calc(4rem + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-shell-sticky, 40);
    padding: 7px var(--storefront-layout-gutter);
    background: rgb(255 255 255 / 0.96);
    border-block-start: 1px solid var(--pdp-border);
    box-shadow: 0 -8px 22px rgb(15 23 42 / 0.08);
    backdrop-filter: blur(12px);
}

.pdp-mobile-purchase-dock-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 520px;
    margin-inline: auto;
}

.pdp-mobile-purchase-button {
    display: inline-flex;
    flex: 0 1 210px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 9px 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    background: var(--pdp-primary);
    border-radius: var(--storefront-action-radius);
    box-shadow: 0 7px 16px rgb(var(--color-primary) / 0.18);
}

html.storefront-overlay-open .pdp-mobile-purchase-dock {
    display: none !important;
}

.pdp-page:has(input:focus, textarea:focus, select:focus) .pdp-mobile-purchase-dock {
    display: none !important;
}

.pdp-page :is(button, a):focus-visible {
    outline: 2px solid var(--pdp-primary);
    outline-offset: 2px;
}

@media (min-width: 480px) and (max-width: 767px) {
    .pdp-gallery-layout {
        max-width: 620px;
        margin-inline: auto;
    }

    .pdp-gallery-stage { min-height: 0; }
}

@media (min-width: 640px) {
    .pdp-gallery[data-thumbnail-position="left"] .pdp-gallery-layout,
    .pdp-gallery[data-thumbnail-position="right"] .pdp-gallery-layout {
        grid-template-areas: "thumbs stage";
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
    }

    .pdp-gallery[data-thumbnail-position="right"] .pdp-gallery-layout {
        grid-template-areas: "stage thumbs";
        grid-template-columns: minmax(0, 1fr) 58px;
    }

    .pdp-gallery[data-thumbnail-position="left"] .pdp-thumbnails,
    .pdp-gallery[data-thumbnail-position="right"] .pdp-thumbnails {
        flex-direction: column;
        max-height: 380px;
        padding-inline: 2px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .pdp-purchase-actions {
        flex-wrap: nowrap;
    }

    .pdp-bundle-layout {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
        align-items: center;
    }

    .pdp-bundle-add {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .pdp-page {
        /* Keep product-page gutters progressive across the 1200px boundary.
           The general storefront gutter deliberately steps up there, while
           this dense two-column experience benefits from a continuous scale. */
        --storefront-layout-gutter: clamp(24px, calc(8.333vw - 40px), 88px);
    }

    [dir="rtl"] .pdp-top-layout {
        grid-template-areas: "gallery info";
        grid-template-columns: minmax(320px, 0.96fr) minmax(0, 1fr);
    }

    [dir="ltr"] .pdp-top-layout {
        grid-template-areas: "gallery info";
        grid-template-columns: minmax(320px, 0.96fr) minmax(0, 1fr);
    }

    .pdp-top-layout {
        align-items: start;
        align-content: start;
        column-gap: clamp(22px, 3.2vw, 44px);
    }

    .pdp-info {
        grid-area: info;
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2vw, 24px);
        min-width: 0;
        padding: clamp(8px, 1.2vw, 16px) clamp(2px, 0.8vw, 10px);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .pdp-identity,
    .pdp-purchase {
        display: flex;
        flex-direction: column;
    }

    .pdp-purchase {
        padding-block-start: 2px;
        border-block-start: 0;
    }

    .pdp-title {
        font-size: clamp(22px, 2.6vw, 27px);
        line-height: 1.4;
    }

    .pdp-gallery-stage {
        height: auto;
        aspect-ratio: 1;
        max-height: min(530px, calc(100dvh - var(--site-header-height, 110px) - 92px));
    }

    .pdp-gallery-layout {
        max-width: 580px;
        margin-inline: auto;
    }

    .pdp-mobile-purchase-dock {
        display: none !important;
    }

    .pdp-section-content {
        padding: 18px 18px 22px;
    }

    .pdp-section-content .prose {
        font-size: 15px;
    }

    .pdp-bundle-product {
        flex-basis: 250px;
    }
}

@media (min-width: 960px) {
    .pdp-gallery {
        position: sticky;
        inset-block-start: calc(var(--site-header-height, 110px) + 16px);
        z-index: 1;
        align-self: start;
    }

    .pdp-thumbnails {
        padding: 6px;
        background: rgb(255 255 255 / 0.72);
        border: 1px solid rgb(222 226 232 / 0.82);
        border-radius: 11px;
        box-shadow: 0 9px 24px rgb(15 23 42 / 0.05);
        backdrop-filter: blur(10px);
    }

    .pdp-gallery[data-thumbnail-position="bottom"] .pdp-thumbnails {
        width: fit-content;
        max-width: 100%;
        justify-self: end;
    }

}

@media (min-width: 1024px) {
    [dir="rtl"] .pdp-top-layout {
        grid-template-columns: minmax(410px, 1.06fr) minmax(390px, 0.94fr);
    }

    [dir="ltr"] .pdp-top-layout {
        grid-template-columns: minmax(410px, 1.06fr) minmax(390px, 0.94fr);
    }

    .pdp-top-layout {
        column-gap: clamp(34px, 4vw, 64px);
    }

    .pdp-info {
        margin-inline-start: -16px;
    }

    .pdp-identity {
        gap: 8px;
    }

    .pdp-purchase {
        gap: 14px;
    }

    .pdp-bundle {
        display: grid;
        grid-template-columns: minmax(155px, 190px) minmax(0, 1fr) minmax(190px, 220px);
        align-items: center;
        gap: 20px;
    }

    .pdp-bundle-heading {
        margin-block-end: 0;
    }

    .pdp-bundle-layout {
        display: contents;
    }

    .pdp-bundle-products {
        grid-column: 2;
    }

    .pdp-bundle-product {
        flex-basis: 250px;
    }

    .pdp-bundle-add {
        grid-column: 3;
        width: 100%;
    }

    .pdp-section-nav {
        position: sticky;
        inset-block-start: var(--site-header-height, 110px);
        z-index: 8;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 3px 22px;
        min-height: 52px;
        padding-inline: 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        background: rgb(255 255 255 / 0.96);
        border-block-end: 1px solid var(--pdp-border);
        backdrop-filter: blur(10px);
        scrollbar-width: none;
        scroll-snap-type: inline proximity;
    }

    .pdp-section-nav::-webkit-scrollbar {
        display: none;
    }

    .pdp-section-nav-link {
        position: relative;
        flex: 0 0 auto;
        min-height: 52px;
        padding-inline: 2px;
        color: #667085;
        font-size: 14px;
        font-weight: 650;
        white-space: nowrap;
        scroll-snap-align: start;
        transition: color 160ms ease;
    }

    .pdp-section-nav-link::after {
        position: absolute;
        inset-inline: 0;
        inset-block-end: -1px;
        height: 2px;
        background: var(--pdp-primary);
        border-radius: 999px;
        content: "";
        opacity: 0;
        transform: scaleX(0.4);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .pdp-section-nav-link:hover,
    .pdp-section-nav-link.is-active {
        color: var(--pdp-primary);
    }

    .pdp-section-nav-link.is-active::after {
        opacity: 1;
        transform: scaleX(1);
    }

    .pdp-sections {
        display: block;
    }

    .pdp-detail-section {
        overflow: visible;
        padding-block: clamp(30px, 3.3vw, 42px);
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .pdp-detail-section + .pdp-detail-section {
        border-block-start: 1px solid var(--pdp-border);
    }

    .pdp-accordion-trigger {
        display: none;
    }

    .pdp-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 18px;
        color: var(--pdp-ink);
        font-size: 20px;
        font-weight: 750;
        line-height: 1.5;
    }

    .pdp-section-title::after {
        width: 34px;
        height: 2px;
        margin-inline-start: 4px;
        background: var(--pdp-primary);
        border-radius: 999px;
        content: "";
        opacity: 0.65;
    }

    .pdp-section-content {
        display: block !important;
        max-width: 100%;
        padding: 0;
    }

    .pdp-section-content .prose {
        font-size: 15px;
        line-height: 1.9;
    }

    .pdp-page .elegance-product-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .pdp-details-layout.has-aside {
        grid-template-columns: minmax(0, 1fr) clamp(280px, 29%, 340px);
        align-items: start;
        gap: clamp(20px, 2.4vw, 32px);
    }

    .pdp-details-layout.has-aside .pdp-details-main {
        grid-column: 1;
        grid-row: 1;
    }

    .pdp-details-layout.has-aside .pdp-details-aside {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
    }

    .pdp-details-aside-inner {
        position: sticky;
        inset-block-start: calc(var(--site-header-height, 110px) + 16px);
        max-height: calc(100dvh - var(--site-header-height, 110px) - 32px);
        padding-inline-end: 3px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-color: rgb(var(--color-primary) / 0.24) transparent;
        scrollbar-width: thin;
    }

    .pdp-details-aside .pdp-bundle {
        display: block;
        padding: 16px;
    }

    .pdp-details-aside .pdp-bundle-heading {
        margin-block-end: 12px;
    }

    .pdp-details-aside .pdp-bundle-title {
        font-size: 15px;
    }

    .pdp-details-aside .pdp-bundle-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 11px;
    }

    .pdp-details-aside .pdp-bundle-products {
        display: grid;
        grid-column: auto;
        gap: 8px;
        overflow: visible;
    }

    .pdp-details-aside .pdp-bundle-plus {
        display: none;
    }

    .pdp-details-aside .pdp-bundle-product {
        width: 100%;
        padding: 9px;
    }

    .pdp-details-aside .pdp-bundle-link {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 10px;
    }

    .pdp-details-aside .pdp-bundle-image {
        width: 66px;
    }

    .pdp-details-aside .pdp-bundle-name {
        min-height: 36px;
        font-size: 11.5px;
        line-height: 1.55;
    }

    .pdp-details-aside .pdp-bundle-add {
        grid-column: auto;
        min-height: 44px;
        font-size: 13px;
    }
}

@media (min-width: 1280px) {
    .pdp-info {
        margin-inline-start: -32px;
    }
}

@media (min-width: 1366px) {
    .pdp-info {
        margin-inline-start: -48px;
    }
}

@media (min-width: 1536px) {
    .pdp-info {
        margin-inline-start: -64px;
    }
}

@media (min-width: 1440px) {
    .pdp-gallery-stage {
        max-height: min(560px, calc(100dvh - var(--site-header-height, 146px) - 72px));
    }

    .pdp-page .elegance-product-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 359px) {
    .pdp-purchase-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pdp-quantity-selector {
        grid-template-columns: 38px 36px 38px;
    }

    .pdp-quantity-button {
        width: 38px;
    }

    .pdp-purchase-buttons {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr);
    }

    .pdp-add-button,
    .pdp-whatsapp-button {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-page *,
    .pdp-page *::before,
    .pdp-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
.pdp-section-title-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.12);
    border-radius: 10px;
}

.pdp-section-title-icon svg {
    width: 19px;
    height: 19px;
}

.pdp-section-title--reviews::after {
    display: none;
}

.pdp-section-title--reviews .pdp-section-title-icon {
    color: #b45309;
    background: #fff8e8;
    border-color: #f4d58f;
}

.pdp-review-summary {
    position: relative;
    margin-block-end: 26px;
    overflow: hidden;
    background: #fffdf8;
    border: 1px solid #ead9ad;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgb(120 86 24 / 0.09);
}

.pdp-review-summary::before {
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, #d97706, #fbbf24 52%, #d97706);
}

.pdp-review-summary-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
}

.pdp-review-overall {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(22px, 3vw, 30px);
    background:
        radial-gradient(circle at 14% 10%, rgb(251 191 36 / 0.17), transparent 46%),
        linear-gradient(145deg, #fffaf0 0%, #fff 72%);
    border-inline-end: 1px solid #eadfca;
}

.pdp-review-overall-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pdp-review-overall-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #f4d58f;
    border-radius: 9px;
    box-shadow: 0 4px 10px rgb(180 83 9 / 0.1);
    place-items: center;
}

.pdp-review-overall-icon svg {
    width: 16px;
    height: 16px;
}

.pdp-review-overall-label {
    color: #7c4a03;
    font-size: 12px;
    font-weight: 750;
}

.pdp-review-overall-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-block-start: 7px;
    color: var(--pdp-ink);
    font-variant-numeric: tabular-nums;
}

.pdp-review-overall-score strong {
    font-size: clamp(42px, 5vw, 56px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
}

.pdp-review-overall-score span {
    color: #a16207;
    font-size: 13px;
    font-weight: 650;
}

.pdp-review-overall-stars,
.pdp-review-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #dfe3e8;
}

.pdp-review-overall-stars {
    margin-block-start: 10px;
}

.pdp-review-overall-stars svg {
    width: 20px;
    height: 20px;
}

.pdp-review-stars svg {
    width: 16px;
    height: 16px;
}

.pdp-review-overall-stars .is-filled,
.pdp-review-stars .is-filled {
    color: #f59e0b;
}

.pdp-review-overall-count {
    margin-block-start: 6px;
    color: #78684f;
    font-size: 12px;
    line-height: 1.6;
}

.pdp-review-breakdown {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: clamp(20px, 3vw, 28px);
    background: #fffdf8;
}

.pdp-review-breakdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 5px;
    color: var(--pdp-ink);
    font-size: 13px;
}

.pdp-review-breakdown-heading::after {
    width: 34px;
    height: 3px;
    margin-inline-start: auto;
    content: "";
    background: linear-gradient(90deg, #fbbf24, #d97706);
    border-radius: 999px;
}

.pdp-review-breakdown-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 32px;
    padding: 4px 7px;
    color: #667085;
    text-align: start;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.pdp-review-breakdown-row:hover,
.pdp-review-breakdown-row.is-active {
    color: var(--pdp-ink);
    background: #fff8e7;
    border-color: #f1d28a;
}

.pdp-review-breakdown-row:focus-visible {
    outline: 2px solid rgb(217 119 6 / 0.34);
    outline-offset: 1px;
}

.pdp-review-breakdown-rating {
    font-size: 12px;
    font-weight: 700;
}

.pdp-review-breakdown-rating span {
    color: #f59e0b;
}

.pdp-review-breakdown-track {
    height: 8px;
    overflow: hidden;
    background: #eee7d9;
    border-radius: 999px;
}

.pdp-review-breakdown-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: inherit;
    transition: width 400ms ease;
}

.pdp-review-breakdown-count {
    color: #667085;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.pdp-review-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: var(--pdp-primary);
    border: 1px solid var(--pdp-primary);
    border-radius: var(--storefront-action-radius);
    box-shadow: 0 6px 15px rgb(var(--color-primary) / 0.16);
    transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-review-overall .pdp-review-action {
    width: 100%;
    margin-block-start: 17px;
}

.pdp-review-action:hover:not(:disabled) {
    filter: brightness(0.94);
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgb(var(--color-primary) / 0.22);
}

.pdp-review-modal {
    --pdp-ink: rgb(var(--color-secondary));
    --pdp-muted: #667085;
    --pdp-border: #e7e9ee;
    --pdp-primary: rgb(var(--color-primary));
    --pdp-primary-soft: rgb(var(--color-primary) / 0.08);
    position: fixed;
    z-index: var(--z-shell-modal, 140);
    inset: 0;
    display: grid;
    padding: 24px;
    overflow-y: auto;
    background: rgb(15 23 42 / 0.58);
    backdrop-filter: blur(4px);
    place-items: center;
}

.pdp-review-dialog {
    position: relative;
    display: flex;
    width: min(880px, 100%);
    max-height: min(88dvh, 820px);
    flex-direction: column;
    overflow: hidden;
    color: #344054;
    background: #fff;
    border: 1px solid rgb(255 255 255 / 0.72);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgb(15 23 42 / 0.26);
}

.pdp-review-dialog-header,
.pdp-review-dialog-heading-copy,
.pdp-review-rating-picker,
.pdp-review-rating-stars,
.pdp-review-dialog-footer,
.pdp-review-submit-loading,
.pdp-review-feedback h4,
.pdp-review-feedback-item {
    display: flex;
    align-items: center;
}

.pdp-review-dialog-header {
    position: relative;
    flex: 0 0 auto;
    gap: 12px;
    min-height: 76px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fffaf0 0%, #fff 54%, rgb(var(--color-primary) / 0.035) 100%);
    border-block-end: 1px solid #e9e5dc;
}

.pdp-review-dialog-heading-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #f4d58f;
    border-radius: 11px;
    box-shadow: 0 5px 12px rgb(180 83 9 / 0.1);
    place-items: center;
}

.pdp-review-dialog-heading-icon svg {
    width: 21px;
    height: 21px;
}

.pdp-review-dialog-heading-copy {
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pdp-review-dialog-heading-copy h3 {
    margin: 0;
    color: rgb(var(--color-secondary));
    font-family: var(--font-display, inherit);
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 800;
    line-height: 1.4;
}

.pdp-review-dialog-heading-copy small {
    display: block;
    max-width: min(58vw, 560px);
    overflow: hidden;
    color: #7b8493;
    font-size: 11px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-review-dialog-close {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #667085;
    background: #fff;
    border: 1px solid #e3e6eb;
    border-radius: 11px;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.055);
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    place-items: center;
}

.pdp-review-dialog-close svg {
    width: 18px;
    height: 18px;
}

.pdp-review-dialog-close:hover {
    color: rgb(var(--color-primary));
    background: rgb(var(--color-primary) / 0.06);
    border-color: rgb(var(--color-primary) / 0.22);
    transform: rotate(4deg);
}

.pdp-review-modal-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.pdp-review-dialog-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 22px 24px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(var(--color-primary) / 0.26) transparent;
    scrollbar-width: thin;
}

.pdp-review-rating-field {
    min-width: 0;
    margin: 0 0 20px;
    padding: 15px 17px;
    background: linear-gradient(135deg, #fffaf0, #fffdf8);
    border: 1px solid #ead9ad;
    border-radius: 13px;
}

.pdp-review-rating-field legend {
    padding-inline: 5px;
    color: #7c4a03;
    font-size: 13px;
    font-weight: 750;
}

.pdp-review-rating-field legend span {
    color: #dc2626;
}

.pdp-review-rating-picker {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.pdp-review-rating-stars {
    gap: 2px;
}

.pdp-review-rating-star {
    display: grid;
    width: 44px;
    height: 44px;
    color: #d9dde3;
    border-radius: 10px;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
    place-items: center;
}

.pdp-review-rating-star svg {
    width: 29px;
    height: 29px;
    filter: drop-shadow(0 2px 3px rgb(120 86 24 / 0.08));
}

.pdp-review-rating-star:is(.is-selected, .is-hovered) {
    color: #f59e0b;
}

.pdp-review-rating-star:hover {
    background: rgb(245 158 11 / 0.08);
    transform: translateY(-1px) scale(1.04);
}

.pdp-review-rating-label {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 6px 12px;
    color: #92400e;
    font-size: 12px;
    font-weight: 750;
    background: #fef3c7;
    border: 1px solid #f4d58f;
    border-radius: 999px;
}

.pdp-review-form-fields {
    display: grid;
    gap: 18px;
}

.pdp-review-form-grid,
.pdp-review-feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pdp-review-modal .pdp-review-form-fields :is(input, textarea) {
    border-width: 1px;
    border-color: #dfe3e8;
    border-radius: 10px;
    background: #fdfdfd;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.02);
}

.pdp-review-modal .pdp-review-form-fields :is(input, textarea):hover {
    border-color: #cbd1da;
}

.pdp-review-modal .pdp-review-form-fields :is(input, textarea):focus {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.11);
}

.pdp-review-modal .pdp-review-form-fields textarea {
    min-height: 116px;
}

.pdp-review-feedback {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

.pdp-review-feedback--pro {
    background: #f7fcf9;
    border-color: #d2eadb;
}

.pdp-review-feedback--con {
    background: #fff9f8;
    border-color: #f0d9d5;
}

.pdp-review-feedback h4 {
    gap: 7px;
    margin: 0 0 10px;
    color: #344054;
    font-size: 12px;
    font-weight: 750;
}

.pdp-review-feedback h4 > span {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 7px;
    place-items: center;
}

.pdp-review-feedback--pro h4 > span {
    color: #087443;
    background: #e9f8ef;
}

.pdp-review-feedback--con h4 > span {
    color: #b42318;
    background: #fff0ee;
}

.pdp-review-feedback h4 svg,
.pdp-review-feedback-item button svg,
.pdp-review-feedback-entry button svg {
    width: 15px;
    height: 15px;
}

.pdp-review-feedback-list {
    display: grid;
    gap: 7px;
}

.pdp-review-feedback-item {
    min-height: 36px;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    color: #475467;
    font-size: 12px;
    background: rgb(255 255 255 / 0.78);
    border: 1px solid rgb(15 23 42 / 0.055);
    border-radius: 8px;
}

.pdp-review-feedback-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pdp-review-feedback-item button {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: #98a2b3;
    border-radius: 7px;
    transition: color 150ms ease, background-color 150ms ease;
    place-items: center;
}

.pdp-review-feedback-item button:hover {
    color: #b42318;
    background: #fff0ee;
}

.pdp-review-feedback-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
}

.pdp-review-modal .pdp-review-feedback-entry input {
    min-width: 0;
    min-height: 42px;
    padding: 8px 11px;
    font-size: 12px;
    background: #fff;
}

.pdp-review-feedback-entry > button {
    display: grid;
    width: 42px;
    height: 42px;
    color: rgb(var(--color-primary));
    background: rgb(var(--color-primary) / 0.08);
    border: 1px solid rgb(var(--color-primary) / 0.16);
    border-radius: 10px;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
    place-items: center;
}

.pdp-review-feedback-entry > button:hover {
    color: #fff;
    background: rgb(var(--color-primary));
    transform: translateY(-1px);
}

.pdp-review-dialog-footer {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    min-height: 72px;
    padding: 12px 20px;
    background: #fff;
    border-block-start: 1px solid #e5e7eb;
    box-shadow: 0 -8px 20px rgb(15 23 42 / 0.035);
}

.pdp-review-modal-cancel {
    display: inline-flex;
    min-width: 105px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 17px;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #d9dde4;
    border-radius: var(--storefront-action-radius);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.pdp-review-modal-cancel:hover {
    color: rgb(var(--color-secondary));
    background: #f7f8fa;
    border-color: #c9ced7;
}

.pdp-review-modal-submit {
    min-width: 170px;
}

.pdp-review-submit-loading {
    justify-content: center;
    gap: 7px;
}

.pdp-review-submit-loading svg {
    width: 18px;
    height: 18px;
}

.pdp-review-modal-transition {
    transition: opacity 200ms ease;
}

.pdp-review-modal-is-hidden {
    opacity: 0;
}

.pdp-review-modal-is-visible {
    opacity: 1;
}

.pdp-review-dialog-transition {
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pdp-review-dialog-is-hidden {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
}

.pdp-review-dialog-is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pdp-review-modal :is(button, input, textarea):focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-review-modal,
    .pdp-review-dialog {
        transition-duration: 0.01ms !important;
    }
}

.pdp-review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-block: 0 14px;
    padding: 0 2px 14px;
    border-block-end: 1px solid #e7eaf0;
}

.pdp-review-toolbar-copy,
.pdp-review-toolbar-actions,
.pdp-review-toolbar-copy > span:last-child,
.pdp-review-sort-control,
.pdp-review-active-filter {
    display: flex;
    align-items: center;
}

.pdp-review-toolbar-copy {
    min-width: 0;
    gap: 9px;
}

.pdp-review-toolbar-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-radius: 9px;
}

.pdp-review-toolbar-icon svg,
.pdp-review-sort-icon svg,
.pdp-review-active-filter svg {
    width: 17px;
    height: 17px;
}

.pdp-review-toolbar-copy > span:last-child {
    min-width: 0;
    gap: 7px;
}

.pdp-review-toolbar-copy strong {
    color: var(--pdp-ink);
    font-size: 14px;
    font-weight: 750;
}

.pdp-review-toolbar-copy small {
    display: inline-grid;
    min-width: 23px;
    height: 23px;
    padding-inline: 6px;
    place-items: center;
    color: var(--pdp-primary);
    font-size: 11px;
    font-weight: 750;
    background: var(--pdp-primary-soft);
    border-radius: 999px;
}

.pdp-review-toolbar-actions {
    gap: 9px;
}

.pdp-review-active-filter {
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    color: var(--pdp-primary);
    font-size: 11px;
    font-weight: 650;
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.15);
    border-radius: 9px;
}

.pdp-review-sort-control {
    position: relative;
    min-width: 190px;
}

.pdp-review-sort-icon {
    position: absolute;
    inset-inline-start: 11px;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #667085;
    pointer-events: none;
}

.pdp-review-sort-field {
    width: 100%;
}

.pdp-review-sort-field .elegance-select__trigger {
    min-height: 40px;
    padding-block: 7px;
    padding-inline-start: 37px;
    color: #344054;
    font-size: 12px;
    font-weight: 650;
    border-width: 1px;
    border-color: #d9dee7;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.035);
}

.pdp-review-sort-field .elegance-select__trigger:hover {
    border-color: rgb(var(--color-primary) / 0.35);
}

.pdp-review-sort-field .elegance-select__menu {
    z-index: 30;
    border-width: 1px;
    border-color: #e1e5ec;
    border-radius: 10px;
    box-shadow: 0 16px 36px rgb(15 23 42 / 0.13);
}

.pdp-review-sort-field .elegance-select__option {
    min-height: 40px;
    font-size: 12px;
}

.pdp-review-list {
    display: grid;
    gap: 14px;
}

.pdp-review-card {
    padding: clamp(16px, 2.4vw, 22px);
    background: #fff;
    border: 1px solid #dfe4eb;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pdp-review-card:hover {
    border-color: rgb(var(--color-primary) / 0.24);
    box-shadow: 0 10px 26px rgb(15 23 42 / 0.065);
}

.pdp-review-card-header,
.pdp-review-author,
.pdp-review-author-name,
.pdp-review-meta,
.pdp-review-reply-heading,
.pdp-review-helpfulness,
.pdp-review-helpfulness > div,
.pdp-review-helpfulness button,
.pdp-review-points > div {
    display: flex;
    align-items: center;
}

.pdp-review-card-header {
    justify-content: space-between;
    gap: 14px;
    margin-block-end: 16px;
}

.pdp-review-author {
    min-width: 0;
    gap: 11px;
}

.pdp-review-avatar {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    background: var(--pdp-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.2), 0 5px 12px rgb(var(--color-primary) / 0.16);
}

.pdp-review-author-copy {
    min-width: 0;
}

.pdp-review-author-name {
    flex-wrap: wrap;
    gap: 7px;
}

.pdp-review-author-name h4 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--pdp-ink);
    font-size: 14px;
    font-weight: 750;
}

.pdp-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    color: #087443;
    font-size: 10px;
    font-weight: 700;
    background: #ecfdf3;
    border: 1px solid #c6f0d9;
    border-radius: 999px;
}

.pdp-review-verified svg {
    width: 12px;
    height: 12px;
}

.pdp-review-meta {
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 5px;
}

.pdp-review-date {
    color: #98a2b3;
    font-size: 11px;
}

.pdp-review-score-badge {
    display: inline-grid;
    flex: 0 0 auto;
    min-width: 42px;
    height: 32px;
    padding-inline: 8px;
    place-items: center;
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
    background: #fffbeb;
    border: 1px solid #fde7a8;
    border-radius: 8px;
}

.pdp-review-card-title {
    margin: 0 0 8px;
    color: var(--pdp-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
}

.pdp-review-comment {
    margin: 0 0 17px;
    color: #475467;
    font-size: 14px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.pdp-review-points-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-block-end: 16px;
}

.pdp-review-points {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 12px;
    border: 1px solid;
    border-radius: 10px;
}

.pdp-review-points.is-positive {
    color: #087443;
    background: #f2fbf6;
    border-color: #d5f0df;
}

.pdp-review-points.is-negative {
    color: #b42318;
    background: #fff7f6;
    border-color: #fee1de;
}

.pdp-review-points > strong {
    font-size: 11px;
    font-weight: 800;
}

.pdp-review-points > div {
    gap: 7px;
    font-size: 12px;
    line-height: 1.65;
}

.pdp-review-points svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

.pdp-review-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 16px;
}

.pdp-review-image {
    width: 76px;
    height: 76px;
    object-fit: cover;
    cursor: zoom-in;
    border: 1px solid #e0e4ea;
    border-radius: 9px;
    transition: opacity 150ms ease, transform 150ms ease;
}

.pdp-review-image:hover {
    opacity: 0.88;
    transform: scale(1.025);
}

.pdp-review-reply {
    margin-block-end: 16px;
    padding: 13px 14px;
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-inline-start: 3px solid var(--pdp-primary);
    border-radius: 10px;
}

.pdp-review-reply-heading {
    flex-wrap: wrap;
    gap: 7px;
    margin-block-end: 7px;
}

.pdp-review-reply-heading strong {
    color: var(--pdp-ink);
    font-size: 12px;
}

.pdp-review-reply-heading > span:last-child {
    color: #98a2b3;
    font-size: 10px;
}

.pdp-review-reply-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-radius: 7px;
}

.pdp-review-reply-icon svg {
    width: 14px;
    height: 14px;
}

.pdp-review-reply > p {
    margin: 0;
    color: #586474;
    font-size: 12px;
    line-height: 1.75;
}

.pdp-review-helpfulness {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-block-start: 14px;
    border-block-start: 1px solid #edf0f4;
}

.pdp-review-helpfulness > span {
    color: #667085;
    font-size: 12px;
}

.pdp-review-helpfulness > div {
    gap: 7px;
}

.pdp-review-helpfulness button {
    justify-content: center;
    gap: 5px;
    min-width: 43px;
    min-height: 36px;
    padding: 6px 9px;
    color: #667085;
    font-size: 11px;
    background: #f8fafc;
    border: 1px solid #e4e8ee;
    border-radius: 8px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.pdp-review-helpfulness button svg {
    width: 16px;
    height: 16px;
}

.pdp-review-helpfulness button.is-helpful:hover {
    color: #087443;
    background: #f2fbf6;
    border-color: #bfe8cf;
}

.pdp-review-helpfulness button.is-not-helpful:hover {
    color: #b42318;
    background: #fff7f6;
    border-color: #f9cbc5;
}

.pdp-review-empty {
    padding: clamp(34px, 6vw, 58px) 18px;
    background: #fafafa;
    border: 1px solid var(--pdp-border);
    border-radius: 11px;
}

@media (max-width: 639px) {
    .pdp-review-modal {
        align-items: end;
        padding: 0;
    }

    .pdp-review-dialog {
        width: 100%;
        max-height: 94dvh;
        border: 0;
        border-radius: 20px 20px 0 0;
    }

    .pdp-review-dialog-header {
        min-height: 70px;
        gap: 10px;
        padding: 13px 14px;
    }

    .pdp-review-dialog-heading-icon,
    .pdp-review-dialog-close {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .pdp-review-dialog-heading-copy small {
        max-width: 54vw;
    }

    .pdp-review-dialog-body {
        padding: 17px 14px 20px;
    }

    .pdp-review-rating-field {
        margin-block-end: 16px;
        padding: 13px 12px;
    }

    .pdp-review-rating-picker {
        justify-content: center;
        gap: 8px;
    }

    .pdp-review-rating-stars {
        justify-content: center;
        width: 100%;
    }

    .pdp-review-rating-star {
        width: 40px;
        height: 40px;
    }

    .pdp-review-rating-star svg {
        width: 27px;
        height: 27px;
    }

    .pdp-review-form-grid,
    .pdp-review-feedback-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdp-review-dialog-footer {
        min-height: 70px;
        padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    }

    .pdp-review-modal-cancel {
        min-width: 92px;
    }

    .pdp-review-modal-submit {
        min-width: 0;
        flex: 1 1 auto;
    }

    .pdp-review-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdp-review-overall {
        align-items: center;
        padding: 20px 16px;
        text-align: center;
        border-inline-end: 0;
        border-block-end: 1px solid #eadfca;
    }

    .pdp-review-breakdown {
        padding: 18px 13px;
    }

    .pdp-review-toolbar {
        align-items: stretch;
        padding-inline: 0;
    }

    .pdp-review-toolbar-copy,
    .pdp-review-toolbar-actions,
    .pdp-review-sort-control,
    .pdp-review-sort-field {
        width: 100%;
    }

    .pdp-review-toolbar-actions {
        align-items: stretch;
    }

    .pdp-review-active-filter {
        flex: 0 1 auto;
        max-width: 48%;
    }

    .pdp-review-sort-control {
        flex: 1 1 150px;
        min-width: 0;
    }

    .pdp-review-card {
        padding: 15px 13px;
    }

    .pdp-review-card-header {
        align-items: flex-start;
        gap: 8px;
    }

    .pdp-review-avatar {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .pdp-review-author-name {
        align-items: flex-start;
    }

    .pdp-review-score-badge {
        min-width: 38px;
        height: 30px;
    }

    .pdp-review-points-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdp-review-helpfulness {
        align-items: flex-start;
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    [dir="rtl"] .pdp-top-layout,
    [dir="ltr"] .pdp-top-layout {
        grid-template-areas:
            "identity"
            "gallery"
            "purchase";
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .pdp-info {
        display: contents;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .pdp-identity,
    .pdp-purchase {
        display: flex;
        width: min(100%, 680px);
        margin-inline: auto;
        flex-direction: column;
    }

    .pdp-gallery-layout {
        max-width: 680px;
    }

    .pdp-gallery-stage {
        width: 100%;
        min-height: 0;
        height: auto;
        max-height: 420px;
        aspect-ratio: 1 / 1;
    }

    .pdp-purchase {
        padding-block-start: 0;
        border-block-start: 0;
    }
}

/* Product questions */
.pdp-section-title--questions::after {
    display: none;
}

.pdp-section-title--questions .pdp-section-title-icon {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-color: rgb(var(--color-primary) / 0.14);
}

.pdp-questions-panel {
    display: grid;
    gap: 14px;
}

.pdp-questions-intro {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    background:
        radial-gradient(circle at 8% 0%, rgb(var(--color-primary) / 0.08), transparent 46%),
        #fff;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 14px;
}

.pdp-questions-intro-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.pdp-questions-intro-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.13);
    border-radius: 11px;
    place-items: center;
}

.pdp-questions-intro-icon svg {
    width: 21px;
    height: 21px;
}

.pdp-questions-intro-text {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.pdp-questions-intro-text strong {
    color: var(--pdp-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.pdp-questions-intro-text small {
    color: #748092;
    font-size: 11px;
    line-height: 1.65;
}

.pdp-question-toggle,
.pdp-question-submit,
.pdp-question-cancel {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-question-toggle,
.pdp-question-submit {
    color: #fff;
    background: var(--pdp-primary);
    border: 1px solid var(--pdp-primary);
    box-shadow: 0 7px 18px rgb(var(--color-primary) / 0.17);
}

.pdp-question-toggle svg,
.pdp-question-submit > svg,
.pdp-question-submitting svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.pdp-question-toggle:hover,
.pdp-question-submit:hover:not(:disabled) {
    color: #fff;
    background: rgb(var(--color-primary) / 0.9);
    border-color: transparent;
    box-shadow: 0 9px 22px rgb(var(--color-primary) / 0.22);
    transform: translateY(-1px);
}

.pdp-question-toggle.is-active {
    color: #475467;
    background: #fff;
    border-color: #dfe4ea;
    box-shadow: 0 3px 10px rgb(15 23 42 / 0.05);
}

.pdp-question-toggle.is-active:hover {
    color: var(--pdp-ink);
    background: #f8fafc;
    border-color: #d1d7df;
}

.pdp-question-success {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    color: #087443;
    background: #f2fbf6;
    border: 1px solid #bfe8cf;
    border-radius: 11px;
}

.pdp-question-success > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: #dcfce7;
    border-radius: 50%;
    place-items: center;
}

.pdp-question-success svg {
    width: 14px;
    height: 14px;
}

.pdp-question-success p {
    margin: 1px 0 0;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.75;
}

.pdp-question-modal {
    --pdp-ink: rgb(var(--color-secondary));
    --pdp-muted: #667085;
    --pdp-border: #e7e9ee;
    --pdp-primary: rgb(var(--color-primary));
    --pdp-primary-soft: rgb(var(--color-primary) / 0.08);
    position: fixed;
    z-index: var(--z-shell-modal, 140);
    inset: 0;
    display: grid;
    padding: 24px;
    overflow-y: auto;
    background: rgb(15 23 42 / 0.58);
    backdrop-filter: blur(4px);
    place-items: center;
}

.pdp-question-dialog {
    display: flex;
    width: min(620px, 100%);
    max-height: min(84dvh, 680px);
    flex-direction: column;
    overflow: hidden;
    color: #344054;
    background: #fff;
    border: 1px solid rgb(255 255 255 / 0.72);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgb(15 23 42 / 0.26);
}

.pdp-question-dialog-header,
.pdp-question-dialog-heading-copy,
.pdp-question-dialog-footer {
    display: flex;
    align-items: center;
}

.pdp-question-dialog-header {
    flex: 0 0 auto;
    gap: 12px;
    min-height: 74px;
    padding: 15px 19px;
    background: linear-gradient(135deg, rgb(var(--color-primary) / 0.045), #fff 58%);
    border-block-end: 1px solid #e7e9ee;
}

.pdp-question-dialog-heading-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 11px;
    place-items: center;
}

.pdp-question-dialog-heading-icon svg {
    width: 21px;
    height: 21px;
}

.pdp-question-dialog-heading-copy {
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pdp-question-dialog-heading-copy h3 {
    margin: 0;
    color: var(--pdp-ink);
    font-family: var(--font-display, inherit);
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 800;
    line-height: 1.4;
}

.pdp-question-dialog-heading-copy small {
    display: block;
    max-width: min(58vw, 410px);
    overflow: hidden;
    color: #7b8493;
    font-size: 11px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-question-dialog-close {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    color: #667085;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    place-items: center;
}

.pdp-question-dialog-close svg {
    width: 18px;
    height: 18px;
}

.pdp-question-dialog-close:hover {
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border-color: rgb(var(--color-primary) / 0.22);
    transform: rotate(4deg);
}

.pdp-question-modal-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.pdp-question-dialog-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 21px 23px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(var(--color-primary) / 0.25) transparent;
    scrollbar-width: thin;
}

.pdp-question-form-helper {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: #667085;
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.12);
    border-radius: 10px;
}

.pdp-question-form-helper svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--pdp-primary);
}

.pdp-question-form-helper p {
    margin: 0;
    font-size: 11px;
    line-height: 1.65;
}

.pdp-question-form-field {
    margin-block-start: 17px;
}

.pdp-question-form-field label {
    color: #475467;
    font-size: 12px;
    font-weight: 750;
}

.pdp-question-form-field textarea {
    min-height: 138px;
    padding: 12px 13px;
    color: var(--pdp-ink);
    font-size: 13px;
    line-height: 1.75;
    background: #fdfdfd;
    border-width: 1px;
    border-color: #dfe3e8;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.02);
}

.pdp-question-form-field textarea:hover {
    border-color: #cbd1da;
}

.pdp-question-form-field textarea:focus {
    border-color: var(--pdp-primary);
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.11);
}

.pdp-question-character-hint {
    display: block;
    margin-block-start: 6px;
    color: #98a2b3;
    font-size: 10px;
    line-height: 1.5;
}

.pdp-question-dialog-footer {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    min-height: 70px;
    padding: 12px 19px;
    background: #fff;
    border-block-start: 1px solid #e5e7eb;
    box-shadow: 0 -8px 20px rgb(15 23 42 / 0.035);
}

.pdp-question-cancel {
    color: #667085;
    background: #fff;
    border: 1px solid #dfe4ea;
}

.pdp-question-cancel:hover {
    color: var(--pdp-ink);
    background: #f2f4f7;
    border-color: #cfd6df;
}

.pdp-question-submit:disabled {
    cursor: wait;
    opacity: 0.62;
}

.pdp-question-submitting {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pdp-question-modal-transition {
    transition: opacity 200ms ease;
}

.pdp-question-modal-is-hidden {
    opacity: 0;
}

.pdp-question-modal-is-visible {
    opacity: 1;
}

.pdp-question-dialog-transition {
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pdp-question-dialog-is-hidden {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
}

.pdp-question-dialog-is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pdp-question-modal :is(button, textarea):focus-visible {
    outline: 2px solid var(--pdp-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-question-modal,
    .pdp-question-dialog {
        transition-duration: 0.01ms !important;
    }
}

.pdp-question-list {
    display: grid;
    gap: 9px;
}

.pdp-question-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pdp-question-card:hover,
.pdp-question-card.is-open {
    border-color: rgb(var(--color-primary) / 0.24);
    box-shadow: 0 8px 23px rgb(15 23 42 / 0.055);
}

.pdp-question-card-trigger {
    display: grid;
    width: 100%;
    min-height: 64px;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    color: inherit;
    text-align: start;
    background: transparent;
    border: 0;
}

.pdp-question-mark {
    display: grid;
    width: 36px;
    height: 36px;
    color: var(--pdp-primary);
    background: var(--pdp-primary-soft);
    border: 1px solid rgb(var(--color-primary) / 0.11);
    border-radius: 10px;
    place-items: center;
    transition: color 160ms ease, background-color 160ms ease;
}

.pdp-question-mark svg {
    width: 18px;
    height: 18px;
}

.pdp-question-card.is-open .pdp-question-mark {
    color: #fff;
    background: var(--pdp-primary);
}

.pdp-question-card-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.pdp-question-card-copy > strong {
    display: -webkit-box;
    overflow: hidden;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pdp-question-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.pdp-question-card-meta > small {
    color: #98a2b3;
    font-size: 10px;
    line-height: 1.4;
}

.pdp-question-status {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.35;
    border: 1px solid transparent;
    border-radius: 999px;
}

.pdp-question-status svg {
    width: 11px;
    height: 11px;
}

.pdp-question-status.is-answered {
    color: #087443;
    background: #f2fbf6;
    border-color: #ccebd7;
}

.pdp-question-status.is-pending {
    color: #9a6700;
    background: #fff8e8;
    border-color: #f5dfad;
}

.pdp-question-chevron {
    width: 17px;
    height: 17px;
    color: #98a2b3;
    transition: color 160ms ease, transform 180ms ease;
}

.pdp-question-chevron.is-open {
    color: var(--pdp-primary);
    transform: rotate(180deg);
}

.pdp-question-answer {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    margin-inline: 13px;
    padding: 13px 0 14px;
    border-block-start: 1px solid #edf0f4;
}

.pdp-question-answer-mark {
    display: grid;
    width: 28px;
    height: 28px;
    color: #087443;
    background: #dcfce7;
    border-radius: 8px;
    place-items: center;
}

.pdp-question-answer-mark.is-pending {
    color: #9a6700;
    background: #fef3c7;
}

.pdp-question-answer-mark svg {
    width: 15px;
    height: 15px;
}

.pdp-question-answer > div {
    min-width: 0;
}

.pdp-question-answer strong {
    display: block;
    margin-block-end: 3px;
    color: #344054;
    font-size: 11px;
    font-weight: 800;
}

.pdp-question-answer p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.pdp-question-empty {
    display: grid;
    min-height: 178px;
    place-items: center;
    align-content: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgb(var(--color-primary) / 0.06), transparent 52%),
        #fafbfc;
    border: 1px dashed #dfe4ea;
    border-radius: 13px;
}

.pdp-question-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-block-end: 3px;
    color: var(--pdp-primary);
    background: #fff;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 14px;
    box-shadow: 0 7px 18px rgb(15 23 42 / 0.05);
    place-items: center;
}

.pdp-question-empty-icon svg {
    width: 24px;
    height: 24px;
}

.pdp-question-empty > strong {
    color: var(--pdp-ink);
    font-size: 14px;
    font-weight: 800;
}

.pdp-question-empty > p {
    margin: 0;
    color: #7b8493;
    font-size: 11px;
    line-height: 1.65;
}

@media (max-width: 639px) {
    .pdp-questions-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
        padding: 14px;
    }

    .pdp-question-toggle {
        width: 100%;
    }

    .pdp-question-modal {
        align-items: end;
        padding: 0;
    }

    .pdp-question-dialog {
        width: 100%;
        max-height: 92dvh;
        border: 0;
        border-radius: 20px 20px 0 0;
    }

    .pdp-question-dialog-header {
        min-height: 68px;
        gap: 10px;
        padding: 13px 14px;
    }

    .pdp-question-dialog-heading-icon,
    .pdp-question-dialog-close {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .pdp-question-dialog-heading-copy small {
        max-width: 52vw;
    }

    .pdp-question-dialog-body {
        padding: 17px 14px 20px;
    }

    .pdp-question-form-field textarea {
        min-height: 132px;
    }

    .pdp-question-dialog-footer {
        min-height: 68px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }

    .pdp-question-cancel {
        flex: 0 0 auto;
        min-width: 90px;
    }

    .pdp-question-submit {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pdp-question-card-trigger {
        grid-template-columns: 34px minmax(0, 1fr) 17px;
        gap: 9px;
        padding: 10px 11px;
    }

    .pdp-question-mark {
        width: 34px;
        height: 34px;
    }

    .pdp-question-answer {
        margin-inline: 11px;
    }
}

/* ========================================
   CONTEXTUAL CHECKOUT AUTHENTICATION
   ======================================== */
.storefront-quick-auth {
    position: fixed;
    inset: 0;
    z-index: var(--z-shell-modal);
    color: #172033;
}

.storefront-quick-auth__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgb(15 23 42 / 0.62);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.storefront-quick-auth__viewport {
    position: relative;
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 20px;
    pointer-events: none;
}

.storefront-quick-auth__dialog {
    display: flex;
    width: min(100%, 420px);
    max-height: min(680px, calc(100dvh - 40px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(226 232 240 / 0.94);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 75px rgb(15 23 42 / 0.24), 0 8px 24px rgb(15 23 42 / 0.12);
    pointer-events: auto;
}

.storefront-quick-auth__handle {
    display: none;
}

.storefront-quick-auth__header {
    display: grid;
    min-height: 88px;
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    align-items: start;
    gap: 12px;
    padding: 15px 18px 13px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(145deg, rgb(var(--color-primary) / 0.065), #fff 56%);
}

.storefront-quick-auth__icon,
.storefront-quick-auth__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.storefront-quick-auth__icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgb(var(--color-primary) / 0.16);
    border-radius: 13px;
    background: rgb(var(--color-primary) / 0.09);
    color: rgb(var(--color-primary));
}

.storefront-quick-auth__icon svg {
    width: 21px;
    height: 21px;
}

.storefront-quick-auth__heading {
    display: block;
    min-width: 0;
}

.storefront-quick-auth__heading small {
    display: block;
    margin-bottom: 2px;
    color: rgb(var(--color-primary));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.storefront-quick-auth__heading strong {
    display: block;
    color: #111827;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.45;
}

.storefront-quick-auth__heading p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 11px;
    line-height: 1.55;
}

.storefront-quick-auth__close {
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #fff;
    color: #667085;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.storefront-quick-auth__close:hover {
    border-color: rgb(var(--color-primary) / 0.25);
    background: rgb(var(--color-primary) / 0.055);
    color: rgb(var(--color-primary));
}

.storefront-quick-auth__close svg {
    width: 17px;
    height: 17px;
}

.storefront-quick-auth__body {
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    overscroll-behavior: contain;
}

.storefront-quick-auth__body .storefront-auth-phone-summary {
    margin-bottom: 13px;
}

.storefront-quick-auth__phone-status {
    display: inline-flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding-inline: 9px;
    border: 1px solid #bbf7d0;
    border-radius: 9px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
}

.storefront-quick-auth__phone-status svg {
    width: 13px;
    height: 13px;
}

.storefront-quick-auth__footer {
    display: flex;
    justify-content: center;
    padding: 8px 18px 11px;
    border-top: 1px solid #edf0f4;
    background: #fff;
}

.storefront-quick-auth__cancel {
    min-height: 42px;
    padding-inline: 18px;
    border: 1px solid #e1e6ed;
    border-radius: var(--storefront-action-radius, 10px);
    background: #fff;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.storefront-quick-auth__cancel:hover {
    border-color: rgb(var(--color-primary) / 0.25);
    background: rgb(var(--color-primary) / 0.045);
    color: rgb(var(--color-primary));
}

@media (max-width: 599px) {
    .storefront-quick-auth__viewport {
        align-items: end;
        padding: 12px 0 0;
    }

    .storefront-quick-auth__dialog {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - 12px);
        border: 1px solid rgb(226 232 240 / 0.96);
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -16px 42px rgb(15 23 42 / 0.18);
    }

    .storefront-quick-auth__handle {
        display: block;
        width: 38px;
        height: 4px;
        margin: 7px auto 1px;
        border-radius: 999px;
        background: #d7dce3;
    }

    .storefront-quick-auth__header {
        min-height: 78px;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 10px;
        padding: 10px 16px 12px;
    }

    .storefront-quick-auth__icon,
    .storefront-quick-auth__close {
        width: 38px;
        height: 38px;
    }

    .storefront-quick-auth__heading strong {
        font-size: 15px;
    }

    .storefront-quick-auth__heading p {
        font-size: 10.5px;
    }

    .storefront-quick-auth__body {
        flex: 0 1 auto;
        padding: 14px 16px;
    }

    .storefront-quick-auth__footer {
        padding: 7px 16px calc(8px + env(safe-area-inset-bottom));
    }

    .storefront-quick-auth__cancel {
        width: 100%;
        min-height: 40px;
    }
}

@media (max-width: 379px) {
    .storefront-auth-assistance {
        gap: 8px;
        padding: 10px;
    }

    .storefront-auth-assistance__icon {
        display: none;
    }

    .storefront-auth-assistance__action {
        min-height: 34px;
        padding-inline: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-quick-auth *,
    .storefront-quick-auth *::before,
    .storefront-quick-auth *::after {
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   CART DRAWER EXPERIENCE
   Presentation-only refinements for clear hierarchy, accessible touch targets,
   merchant-brand continuity, and a stable checkout summary across viewports.
   ======================================== */
.storefront-cart-drawer__backdrop {
    background: rgb(15 23 42 / 0.46) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.storefront-cart-drawer__panel {
    inset-block: 0 !important;
    inset-inline: auto 0 !important;
    width: min(100%, 430px) !important;
    height: 100dvh !important;
    overflow: hidden;
    border-inline-start: 1px solid rgb(226 232 240 / 0.9);
    background: #f8fafc !important;
    color: #172033;
    box-shadow: 0 0 0 1px rgb(15 23 42 / 0.025), 0 24px 72px rgb(15 23 42 / 0.24) !important;
    isolation: isolate;
}

.storefront-cart-drawer__shell {
    min-height: 0;
    overflow: hidden;
}

.storefront-cart-drawer__header {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 76px;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
    border-color: rgb(var(--color-primary) / 0.11) !important;
    background:
        linear-gradient(135deg, rgb(var(--color-primary) / 0.085), transparent 50%),
        #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 0.035);
}

.storefront-cart-drawer__heading {
    min-width: 0;
    gap: 10px !important;
}

.storefront-cart-drawer__heading-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    border: 1px solid rgb(var(--color-primary) / 0.18);
    border-radius: 12px !important;
    background: rgb(var(--color-primary) / 0.085) !important;
    color: rgb(var(--color-primary));
    box-shadow: 0 5px 14px rgb(var(--color-primary) / 0.08);
}

.storefront-cart-drawer__heading-icon svg {
    width: 20px;
    height: 20px;
}

.storefront-cart-drawer__heading-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.storefront-cart-drawer__title {
    overflow: hidden;
    color: #172033 !important;
    font-size: 15px;
    font-weight: 850 !important;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-cart-drawer__count {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding-inline: 8px;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.065);
    color: rgb(var(--color-primary)) !important;
    font-size: 10px !important;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.storefront-cart-drawer__count-skeleton {
    margin: 0 !important;
}

.storefront-cart-drawer__header-actions {
    flex: 0 0 auto;
    gap: 7px !important;
}

.storefront-cart-drawer__clear,
.storefront-cart-drawer__close {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 10px !important;
    outline: none;
}

.storefront-cart-drawer__clear {
    padding-inline: 10px !important;
    border-color: rgb(239 68 68 / 0.16);
    background: #fff7f7 !important;
    color: #c53232 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
}

.storefront-cart-drawer__clear:hover {
    border-color: rgb(239 68 68 / 0.28);
    background: #fff0f0 !important;
    color: #b42323 !important;
}

.storefront-cart-drawer__close {
    width: 40px !important;
    height: 40px !important;
    border-color: #e5eaf0;
    background: rgb(255 255 255 / 0.88);
    color: #64748b;
}

.storefront-cart-drawer__close:hover {
    border-color: rgb(var(--color-primary) / 0.2);
    background: #fff !important;
    color: rgb(var(--color-primary));
}

.storefront-cart-drawer__close svg {
    color: currentColor !important;
}

.storefront-cart-drawer__clear:focus-visible,
.storefront-cart-drawer__close:focus-visible,
.storefront-cart-drawer__quantity-button:focus-visible,
.storefront-cart-drawer__remove:focus-visible,
.storefront-cart-drawer__empty-action:focus-visible,
.storefront-cart-drawer__checkout:focus-visible,
.storefront-cart-drawer__whatsapp:focus-visible,
.storefront-cart-drawer__view-cart:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.14) !important;
}

.storefront-cart-drawer__body {
    min-height: 0;
    overscroll-behavior: contain;
    padding: 14px 15px 20px !important;
    scrollbar-color: rgb(var(--color-primary) / 0.34) transparent;
    scrollbar-width: thin;
}

.storefront-cart-drawer__body::-webkit-scrollbar {
    width: 5px;
}

.storefront-cart-drawer__body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.32);
}

.storefront-cart-drawer__body > :not([hidden]) ~ :not([hidden]),
.storefront-cart-drawer__skeleton-list > :not([hidden]) ~ :not([hidden]) {
    margin-block-start: 10px !important;
}

.storefront-cart-drawer__skeleton-item,
.storefront-cart-drawer__item {
    border: 1px solid #e7ebf0;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.035);
}

.storefront-cart-drawer__item {
    min-height: 108px;
    align-items: stretch;
    gap: 11px !important;
    padding: 11px !important;
    transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease, opacity 170ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .storefront-cart-drawer__item:hover {
        border-color: rgb(var(--color-primary) / 0.2);
        box-shadow: 0 9px 24px rgb(15 23 42 / 0.075);
        transform: translateY(-1px);
    }
}

.storefront-cart-drawer__item-image {
    width: 84px !important;
    height: 84px !important;
    flex: 0 0 84px;
    align-self: center;
    border: 1px solid #edf0f4;
    border-radius: 11px !important;
    background: #f8fafc !important;
}

.storefront-cart-drawer__item-content {
    min-height: 84px;
    padding-inline-end: 27px;
}

.storefront-cart-drawer__item-name {
    color: #1c2738 !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    line-height: 1.62 !important;
}

.storefront-cart-drawer__item-variant {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-block-start: 3px !important;
    padding: 2px 7px;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b !important;
    font-size: 9.5px !important;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-cart-drawer__item-meta {
    gap: 9px;
    margin-block-start: 7px !important;
}

.storefront-cart-drawer__quantity {
    overflow: hidden;
    border-color: #dfe5ec !important;
    border-radius: 9px !important;
    background: #f8fafc;
}

.storefront-cart-drawer__quantity-button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 0 !important;
    color: #64748b !important;
}

.storefront-cart-drawer__quantity-button:hover {
    background: rgb(var(--color-primary) / 0.085) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-cart-drawer__quantity-value {
    width: 30px !important;
    color: #1e293b !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums;
}

.storefront-cart-drawer__item-price {
    color: rgb(var(--color-primary)) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.storefront-cart-drawer__remove {
    inset-block-start: 9px !important;
    inset-inline: auto 9px !important;
    width: 29px !important;
    height: 29px !important;
    opacity: 1 !important;
    border: 1px solid #e6eaf0;
    border-radius: 8px !important;
    background: #f8fafc;
    color: #94a3b8 !important;
}

.storefront-cart-drawer__remove:hover {
    border-color: rgb(239 68 68 / 0.22);
    background: #fff2f2 !important;
    color: #d92d2d !important;
}

.storefront-cart-drawer__empty {
    width: min(100%, 312px);
    height: auto !important;
    min-height: 300px;
    margin: clamp(34px, 8vh, 72px) auto;
    padding: 28px 22px !important;
    border: 1px solid #e7ebf0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 6%, rgb(var(--color-primary) / 0.075), transparent 52%),
        #fff;
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.055);
}

.storefront-cart-drawer__empty-icon {
    position: relative;
    width: 72px !important;
    height: 72px !important;
    margin-block-end: 16px !important;
    border: 1px solid rgb(var(--color-primary) / 0.16);
    border-radius: 18px !important;
    background: rgb(var(--color-primary) / 0.075) !important;
    color: rgb(var(--color-primary));
    box-shadow: 0 9px 22px rgb(var(--color-primary) / 0.08);
}

.storefront-cart-drawer__empty-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgb(var(--color-primary) / 0.08);
    border-radius: 23px;
}

.storefront-cart-drawer__empty-icon svg {
    color: rgb(var(--color-primary)) !important;
}

.storefront-cart-drawer__empty-title {
    margin-block-end: 4px !important;
    color: #172033 !important;
    font-size: 15px;
    font-weight: 850 !important;
}

.storefront-cart-drawer__empty-copy {
    margin-block-end: 18px !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    line-height: 1.7;
}

.storefront-cart-drawer__empty-action,
.storefront-cart-drawer__checkout,
.storefront-cart-drawer__whatsapp,
.storefront-cart-drawer__view-cart {
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.storefront-cart-drawer__empty-action {
    min-height: 44px;
    padding-inline: 20px !important;
    background: rgb(var(--color-primary)) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgb(var(--color-primary) / 0.2);
}

.storefront-cart-drawer__empty-action:hover {
    background: rgb(var(--color-primary) / 0.92) !important;
    box-shadow: 0 11px 24px rgb(var(--color-primary) / 0.25);
    transform: translateY(-1px);
}

.storefront-cart-drawer__footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px)) !important;
    border-color: #e5eaf0 !important;
    background: rgb(255 255 255 / 0.98) !important;
    box-shadow: 0 -12px 28px rgb(15 23 42 / 0.07);
}

.storefront-cart-drawer__subtotal {
    min-height: 53px;
    margin-block-end: 10px !important;
    padding: 9px 11px;
    border: 1px solid rgb(var(--color-primary) / 0.12);
    border-radius: 11px;
    background: linear-gradient(135deg, rgb(var(--color-primary) / 0.065), #f8fafc 75%);
}

.storefront-cart-drawer__subtotal-label {
    color: #526174 !important;
    font-size: 11px;
    font-weight: 700;
}

.storefront-cart-drawer__subtotal-value {
    color: #172033 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
}

.storefront-cart-drawer__actions > :not([hidden]) ~ :not([hidden]) {
    margin-block-start: 7px !important;
}

.storefront-cart-drawer__checkout {
    min-height: 46px;
    padding-block: 10px !important;
    background: rgb(var(--color-primary)) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgb(var(--color-primary) / 0.19);
}

.storefront-cart-drawer__checkout:hover {
    background: rgb(var(--color-primary) / 0.92) !important;
    box-shadow: 0 11px 24px rgb(var(--color-primary) / 0.24);
    transform: translateY(-1px);
}

.storefront-cart-drawer__whatsapp {
    min-height: 43px;
    padding-block: 9px !important;
    border-width: 1px !important;
    border-color: rgb(var(--color-primary) / 0.34) !important;
    background: rgb(var(--color-primary) / 0.045) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-cart-drawer__whatsapp:hover {
    background: rgb(var(--color-primary) / 0.1) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-cart-drawer__secondary-actions {
    align-items: stretch;
    gap: 7px !important;
}

.storefront-cart-drawer__view-cart {
    display: grid !important;
    min-height: 42px;
    place-items: center;
    padding-block: 8px !important;
    border-color: #dfe5ec !important;
    background: #fff;
    color: #334155 !important;
}

.storefront-cart-drawer__view-cart:hover {
    border-color: rgb(var(--color-primary) / 0.22) !important;
    background: rgb(var(--color-primary) / 0.045) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-cart-drawer__secondary-actions > [wire\:id] {
    flex: 0 0 44px;
}

.storefront-cart-drawer__secondary-actions > [wire\:id] > div > button {
    width: 44px;
    min-height: 42px;
    padding: 0 !important;
    border-color: #dfe5ec !important;
    border-radius: 10px !important;
    background: #fff;
    color: #64748b;
}

.storefront-cart-drawer__secondary-actions > [wire\:id] > div > button:hover {
    border-color: rgb(var(--color-primary) / 0.22) !important;
    background: rgb(var(--color-primary) / 0.045) !important;
    color: rgb(var(--color-primary)) !important;
}

.storefront-cart-drawer__confirm-backdrop {
    padding: 18px !important;
    background: rgb(15 23 42 / 0.56) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.storefront-cart-drawer__confirm {
    max-width: 350px;
    padding: 22px !important;
    border-color: rgb(226 232 240 / 0.9) !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 22px 64px rgb(15 23 42 / 0.24) !important;
}

.storefront-cart-drawer__confirm-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: #fff3f3 !important;
}

.storefront-cart-drawer__confirm-title {
    color: #172033 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.storefront-cart-drawer__confirm-copy {
    margin-block-start: 4px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.75 !important;
}

.storefront-cart-drawer__confirm-actions {
    gap: 8px !important;
    padding-block-start: 3px !important;
}

.storefront-cart-drawer__confirm-cancel,
.storefront-cart-drawer__confirm-submit {
    min-height: 42px;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.storefront-cart-drawer__confirm-cancel {
    border-color: #dfe5ec !important;
    color: #334155 !important;
}

.storefront-cart-drawer__confirm-submit {
    border: 1px solid #dc3030;
    background: #dc3030 !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgb(220 48 48 / 0.18) !important;
}

@media (min-width: 640px) {
    .storefront-cart-drawer__panel {
        border-start-start-radius: 20px;
        border-end-start-radius: 20px;
    }
}

@media (max-width: 639px) {
    .storefront-cart-drawer__panel {
        max-width: none !important;
        border: 0;
    }

    .storefront-cart-drawer__header {
        min-height: 69px;
        padding-inline: 13px !important;
    }

    .storefront-cart-drawer__heading-icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px;
    }

    .storefront-cart-drawer__body {
        padding: 12px 12px 18px !important;
    }

    .storefront-cart-drawer__footer {
        padding-inline: 12px !important;
    }
}

@media (max-width: 379px) {
    .storefront-cart-drawer__header {
        gap: 7px;
        padding-inline: 10px !important;
    }

    .storefront-cart-drawer__heading {
        gap: 7px !important;
    }

    .storefront-cart-drawer__heading-icon {
        width: 35px !important;
        height: 35px !important;
        flex-basis: 35px;
    }

    .storefront-cart-drawer__heading-copy {
        display: grid;
        gap: 1px;
    }

    .storefront-cart-drawer__title {
        font-size: 13.5px;
    }

    .storefront-cart-drawer__count {
        width: fit-content;
        min-height: 18px;
        padding-inline: 6px;
        font-size: 8.5px !important;
    }

    .storefront-cart-drawer__clear {
        min-width: 0;
        padding-inline: 8px !important;
        font-size: 9.5px !important;
    }

    .storefront-cart-drawer__item {
        min-height: 99px;
        gap: 9px !important;
        padding: 9px !important;
    }

    .storefront-cart-drawer__item-image {
        width: 74px !important;
        height: 74px !important;
        flex-basis: 74px;
    }

    .storefront-cart-drawer__item-content {
        min-height: 74px;
    }

    .storefront-cart-drawer__quantity-button {
        width: 31px !important;
        height: 31px !important;
    }

    .storefront-cart-drawer__quantity-value {
        width: 26px !important;
    }

    .storefront-cart-drawer__item-price {
        font-size: 11.5px !important;
    }

    .storefront-cart-drawer__empty {
        margin-block: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-cart-drawer *,
    .storefront-cart-drawer *::before,
    .storefront-cart-drawer *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   CHECKOUT EXPERIENCE
   Presentation-only checkout composition. Business rules, calculations,
   Livewire actions, and tenant conditions remain owned by existing components.
   ======================================== */
.storefront-checkout {
    min-height: 100vh;
    padding-block: clamp(18px, 2.6vw, 36px) 104px;
    background:
        radial-gradient(circle at 100% 0%, rgb(var(--color-primary) / 0.055), transparent 28rem),
        linear-gradient(180deg, rgb(248 250 252 / 0.92), #fff 32rem);
    color: #111827;
}

.storefront-checkout__container {
    width: min(100% - 24px, 1280px);
    margin-inline: auto;
}

.storefront-checkout__intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-block-end: 18px;
}

.storefront-checkout__intro-copy { min-width: 0; }

.storefront-checkout__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding-inline: 10px;
    border: 1px solid rgb(var(--color-primary) / 0.16);
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.065);
    color: rgb(var(--color-primary));
    font-size: 11px;
    font-weight: 700;
}

.storefront-checkout__title {
    margin-block-start: 7px;
    color: rgb(var(--color-secondary));
    font-family: inherit;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.storefront-checkout__subtitle {
    margin-block-start: 5px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.storefront-checkout__cart-link {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-inline: 14px;
    border: 1px solid #dfe4eb;
    border-radius: var(--storefront-action-radius, 10px);
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.04);
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.storefront-checkout__cart-link:hover {
    border-color: rgb(var(--color-primary) / 0.35);
    color: rgb(var(--color-primary));
    transform: translateY(-1px);
}

.storefront-checkout__steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 22px;
    padding: 11px 14px;
    overflow-x: auto;
    border: 1px solid #e8ebf0;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.86);
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.035);
    scrollbar-width: none;
}

.storefront-checkout__steps::-webkit-scrollbar { display: none; }

.storefront-checkout__step {
    display: inline-flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.storefront-checkout__step:hover { color: rgb(var(--color-primary)); }

.storefront-checkout__step-number {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-primary) / 0.24);
    border-radius: 50%;
    background: rgb(var(--color-primary) / 0.075);
    color: rgb(var(--color-primary));
    font-size: 10px;
    font-weight: 800;
}

.storefront-checkout__step-line {
    width: clamp(18px, 3vw, 58px);
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, #e5e7eb, rgb(var(--color-primary) / 0.28));
}

.storefront-checkout__alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-block-end: 16px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.storefront-checkout__alert--error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.storefront-checkout__layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.storefront-checkout__flow {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
}

.storefront-checkout__card,
.storefront-checkout__summary-card {
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 34px rgb(15 23 42 / 0.045);
}

.storefront-checkout__section {
    padding: clamp(16px, 2.2vw, 24px);
    scroll-margin-block-start: calc(var(--site-header-height, 110px) + 18px);
}

.storefront-checkout__section-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-block-end: 20px;
}

.storefront-checkout__section-icon,
.storefront-checkout__summary-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 11px;
    background: rgb(var(--color-primary) / 0.065);
    color: rgb(var(--color-primary));
}

.storefront-checkout__section-icon svg,
.storefront-checkout__summary-icon svg {
    width: 19px;
    height: 19px;
}

.storefront-checkout__section-kicker {
    display: block;
    color: rgb(var(--color-primary) / 0.75);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1;
}

.storefront-checkout__section-title {
    margin-block-start: 3px;
    color: #172033;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.storefront-checkout__section-description {
    margin-block-start: 3px;
    color: #8490a3;
    font-size: 11px;
    line-height: 1.55;
}

.storefront-checkout__fields {
    display: grid;
    gap: 14px;
}

.storefront-checkout__fields--two { grid-template-columns: minmax(0, 1fr); }

.storefront-checkout-field > label {
    margin-block-end: 7px !important;
    color: #3f4b5f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}

.storefront-checkout-field > label .text-red-500 {
    color: #e11d48 !important;
}

.storefront-checkout :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select),
.storefront-checkout .storefront-phone-input__control {
    border-width: 1px !important;
    border-color: #dfe4eb !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #172033 !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.025) !important;
}

.storefront-checkout :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select):focus,
.storefront-checkout .storefront-phone-input__control:focus-within {
    border-color: rgb(var(--color-primary) / 0.74) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.09) !important;
}

.storefront-checkout .storefront-phone-input__country-trigger {
    border-radius: 10px 0 0 10px !important;
    background: #f8fafc !important;
    color: #334155 !important;
}

[dir="rtl"] .storefront-checkout .storefront-phone-input__country-trigger {
    border-radius: 0 10px 10px 0 !important;
}

.storefront-checkout .storefront-phone-input__control input {
    background: transparent !important;
    color: #172033 !important;
}

.storefront-checkout__phone-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 14px;
    padding: 11px 12px;
    border: 1px solid #fde68a;
    border-radius: 11px;
    background: #fffbeb;
    color: #92400e;
    font-size: 11.5px;
    font-weight: 650;
}

.storefront-checkout__inline-action {
    display: inline-flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    border-radius: var(--storefront-action-radius, 10px);
    background: rgb(var(--color-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 750;
}

.storefront-checkout__address-layout {
    display: grid;
    gap: 16px;
}

.storefront-checkout__notes {
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    background: #fafbfc;
}

.storefront-checkout__notes-trigger {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-inline: 13px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.storefront-checkout__optional {
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-size: 9px;
    font-weight: 700;
}

.storefront-checkout__notes-field { padding: 0 12px 12px; }
.storefront-checkout__notes-field label { display: none; }

.storefront-checkout__digital-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
}

.storefront-checkout__digital-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #16a34a;
    color: #fff;
}

.storefront-checkout__digital-notice h3 { color: #14532d; font-size: 13px; font-weight: 800; }
.storefront-checkout__digital-notice p { margin-block-start: 3px; color: #15803d; font-size: 11px; line-height: 1.6; }

.storefront-checkout-address__saved-list,
.storefront-checkout-options {
    display: grid;
    gap: 9px;
}

.storefront-checkout-address__saved-list { margin-block-end: 14px; }

.storefront-checkout-choice {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid #e0e5ec;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.storefront-checkout-choice:hover {
    border-color: rgb(var(--color-primary) / 0.38);
    box-shadow: 0 7px 20px rgb(15 23 42 / 0.055);
    transform: translateY(-1px);
}

.storefront-checkout-choice.is-selected {
    border-color: rgb(var(--color-primary) / 0.65);
    background: rgb(var(--color-primary) / 0.045);
    box-shadow: inset 3px 0 0 rgb(var(--color-primary)), 0 6px 18px rgb(var(--color-primary) / 0.07);
}

[dir="rtl"] .storefront-checkout-choice.is-selected {
    box-shadow: inset -3px 0 0 rgb(var(--color-primary)), 0 6px 18px rgb(var(--color-primary) / 0.07);
}

.storefront-checkout-choice__radio {
    display: inline-flex;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
}

.storefront-checkout-choice__radio.is-selected {
    border-color: rgb(var(--color-primary));
    background: rgb(var(--color-primary));
}

.storefront-checkout-choice__media {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 10px;
    background: #f8fafc;
}

.storefront-checkout-choice__title {
    display: block;
    overflow: hidden;
    color: #172033;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-checkout-choice__description {
    display: -webkit-box;
    margin-block-start: 2px;
    overflow: hidden;
    color: #7c8799;
    font-size: 10.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.storefront-checkout-address__default {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgb(var(--color-primary) / 0.08);
    color: rgb(var(--color-primary));
    font-size: 9px;
    font-weight: 700;
}

.storefront-checkout-address__toggle {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 6px;
    margin-block-end: 12px;
    color: rgb(var(--color-primary));
    font-size: 12px;
    font-weight: 750;
}

.storefront-checkout-address__form--separated {
    padding-block-start: 16px;
    border-block-start: 1px solid #eef0f3;
}

.storefront-checkout-address__location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-block-end: 12px;
}

.storefront-checkout-address__save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-block-start: 15px;
    padding-block-start: 14px;
    border-block-start: 1px solid #eef0f3;
}

.storefront-checkout-address__save {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-inline: 16px;
    border-radius: var(--storefront-action-radius, 10px);
    background: rgb(var(--color-primary));
    color: #fff;
    font-size: 12px;
    font-weight: 750;
}

.storefront-checkout-state {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px dashed #d8dee7;
    border-radius: 12px;
    background: #fafbfc;
    color: #778397;
    font-size: 12px;
    font-weight: 650;
}

.storefront-checkout-state__icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgb(var(--color-primary) / 0.07);
    color: rgb(var(--color-primary));
}

.storefront-checkout-state__icon svg { width: 16px; height: 16px; }

/* ========================================
   CHECKOUT SWITCH TOGGLE
   ======================================== */
.storefront-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    padding: 2px;
    border: none;
    border-radius: 9999px;
    background: #d1d5db;
    cursor: pointer;
    outline: none;
    transition: background-color 200ms ease;
    box-sizing: border-box;
}

.storefront-switch:hover {
    background: #9ca3af;
}

.storefront-switch.is-active {
    background: rgb(var(--color-primary));
}

.storefront-switch--emerald.is-active {
    background: #059669;
}

.storefront-switch--amber.is-active {
    background: #d97706;
}

.storefront-switch__thumb {
    pointer-events: none;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 200ms ease;
    transform: translateX(0);
}

.storefront-switch.is-active .storefront-switch__thumb {
    transform: translateX(20px);
}

[dir="rtl"] .storefront-switch.is-active .storefront-switch__thumb {
    transform: translateX(-20px);
}

.storefront-checkout-options--payment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-checkout-payment__manual {
    display: grid;
    gap: 12px;
    margin-block-start: 15px;
    padding: 14px;
    border: 1px solid rgb(var(--color-primary) / 0.15);
    border-radius: 13px;
    background: rgb(var(--color-primary) / 0.035);
}

.storefront-checkout-payment__account {
    padding: 12px;
    border: 1px solid rgb(var(--color-primary) / 0.14);
    border-radius: 10px;
    background: #fff;
}

.storefront-checkout-payment__instructions {
    padding: 10px 11px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 11px;
    line-height: 1.65;
}

.storefront-checkout__summary { order: -1; min-width: 0; scroll-margin-block-start: calc(var(--site-header-height, 110px) + 18px); }
.storefront-checkout__summary-card { overflow: hidden; }

.storefront-checkout__summary-header {
    display: flex;
    width: 100%;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 15px;
    text-align: start;
}

.storefront-checkout__summary-heading { display: flex; min-width: 0; align-items: center; gap: 10px; }
.storefront-checkout__summary-icon { width: 36px; height: 36px; }
.storefront-checkout__summary-title { display: block; color: #172033; font-size: 14px; font-weight: 800; }
.storefront-checkout__summary-count { display: block; margin-block-start: 2px; color: #8a94a5; font-size: 10px; }
.storefront-checkout__summary-chevron { width: 17px; height: 17px; color: #94a3b8; transition: transform 160ms ease; }
.storefront-checkout__summary-body { border-block-start: 1px solid #eef0f3; }
.storefront-checkout__summary-content { padding: 14px 15px; }
.storefront-checkout__summary-actions { padding: 0 15px 15px; }

.storefront-checkout-order-summary__items {
    display: grid;
    gap: 10px;
    max-height: 220px;
    margin-block-end: 14px;
    padding-inline-end: 3px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary) / 0.28) transparent;
}

.storefront-checkout-order-summary__item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding-block-end: 10px;
    border-block-end: 1px solid #f0f2f5;
}

.storefront-checkout-order-summary__item:last-child { padding-block-end: 0; border-block-end: 0; }

.storefront-checkout-order-summary__item-image {
    width: 50px;
    height: 58px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #edf0f3;
    border-radius: 10px;
    background: #f5f7f9;
}

.storefront-checkout-order-summary__item-price {
    flex: 0 0 auto;
    color: rgb(var(--color-primary));
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.storefront-checkout-order-summary__benefits {
    margin-block: 12px;
    border: 1px solid #e7eaf0;
    border-radius: 11px;
    background: #fafbfc;
}

.storefront-checkout-order-summary__benefits-toggle {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-inline: 11px;
    color: #475569;
    font-size: 11px;
    font-weight: 750;
}

.storefront-checkout-order-summary__benefits-body {
    display: grid;
    gap: 10px;
    padding: 0 10px 10px;
}

.storefront-checkout-order-summary__benefit + .storefront-checkout-order-summary__benefit {
    padding-block-start: 10px;
    border-block-start: 1px solid #eceff3;
}

.storefront-checkout-order-summary__benefit-label {
    display: block;
    margin-block-end: 5px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.storefront-checkout-order-summary__code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.storefront-checkout-order-summary__code-input { min-width: 0; min-height: 38px; padding-inline: 10px !important; font-size: 11px !important; }
.storefront-checkout-order-summary__apply {
    min-height: 38px;
    padding-inline: 12px;
    border: 1px solid rgb(var(--color-primary) / 0.42);
    border-radius: var(--storefront-action-radius, 10px);
    color: rgb(var(--color-primary));
    font-size: 11px;
    font-weight: 750;
    transition: background 150ms ease, color 150ms ease;
}

.storefront-checkout-order-summary__apply:hover { background: rgb(var(--color-primary)); color: #fff; }

.storefront-checkout-order-summary__totals {
    display: grid;
    gap: 8px;
    padding-block-start: 13px;
    border-block-start: 1px solid #e7eaf0;
    font-size: 12px;
}

.storefront-checkout-order-summary__grand-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 3px;
    padding-block-start: 12px;
    border-block-start: 1px solid #dfe4eb;
    color: #172033;
    font-size: 15px;
    font-weight: 850;
}

.storefront-checkout__primary-action,
.storefront-checkout__whatsapp-action,
.storefront-checkout__mobile-dock-action {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--storefront-action-radius, 10px);
    font-size: 13px;
    font-weight: 800;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.storefront-checkout__primary-action,
.storefront-checkout__mobile-dock-action {
    background: rgb(var(--color-primary));
    color: #fff;
    box-shadow: 0 9px 22px rgb(var(--color-primary) / 0.2);
}

.storefront-checkout__primary-action:hover,
.storefront-checkout__mobile-dock-action:hover {
    box-shadow: 0 12px 26px rgb(var(--color-primary) / 0.27);
    transform: translateY(-1px);
}

.storefront-checkout__whatsapp-action {
    margin-block-start: 9px;
    border: 1px solid rgb(var(--color-primary) / 0.55);
    color: rgb(var(--color-primary));
}

.storefront-checkout__whatsapp-action:hover { background: rgb(var(--color-primary) / 0.055); }
.storefront-checkout :is(button, a):disabled { cursor: not-allowed; opacity: 0.55; transform: none; }

.storefront-checkout__secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-block-start: 10px;
    color: #94a3b8;
    font-size: 9.5px;
    line-height: 1.5;
    text-align: center;
}

.storefront-checkout__mobile-dock {
    position: fixed;
    z-index: var(--z-shell-sticky, 40);
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(148px, 1.28fr);
    align-items: center;
    gap: 10px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    border-block-start: 1px solid #e1e6ed;
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 -12px 30px rgb(15 23 42 / 0.1);
    backdrop-filter: blur(14px);
}

.storefront-checkout__mobile-dock-total { min-width: 0; }
.storefront-checkout__mobile-dock-total span { display: block; color: #7c8799; font-size: 9.5px; font-weight: 650; }
.storefront-checkout__mobile-dock-total strong { display: block; overflow: hidden; color: #172033; font-size: 13px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.storefront-checkout__mobile-dock-action { min-height: 43px; font-size: 12px; }

.storefront-checkout-payment-modal__layer { z-index: var(--z-shell-modal, 90); }
.storefront-checkout-payment-modal__dialog { border: 1px solid rgb(255 255 255 / 0.65); }
.storefront-checkout-payment-modal__header { background: linear-gradient(125deg, rgb(var(--color-secondary)), rgb(var(--color-primary))) !important; }
.storefront-checkout-payment-modal__close { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: rgb(255 255 255 / 0.1); }

@media (min-width: 600px) {
    .storefront-checkout__container { width: min(100% - 48px, 1280px); }
    .storefront-checkout__fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .storefront-checkout { padding-block-end: 112px; }
    .storefront-checkout__address-layout { grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.75fr); align-items: start; }
}

@media (min-width: 1200px) {
    .storefront-checkout { padding-block-end: 48px; }
    .storefront-checkout__container { width: min(100% - 72px, 1280px); }
    .storefront-checkout__layout { flex-direction: row; align-items: flex-start; gap: 22px; }
    .storefront-checkout__summary {
        position: sticky;
        width: 360px;
        flex: 0 0 360px;
        align-self: flex-start;
        order: 0;
        inset-block-start: calc(var(--site-header-height, 110px) + 18px);
    }
    .storefront-checkout__summary-card { position: static; }
    .storefront-checkout__summary-header { cursor: default; }
    .storefront-checkout__summary-chevron { display: none; }
    .storefront-checkout__summary-body { display: block !important; }
}

@media (max-width: 767px) {
    .storefront-checkout { padding-block-start: 14px; }
    .storefront-checkout__container { width: min(100% - 20px, 640px); }
    .storefront-checkout__intro { align-items: center; margin-block-end: 13px; }
    .storefront-checkout__eyebrow { display: none; }
    .storefront-checkout__title { margin: 0; font-size: 22px; }
    .storefront-checkout__subtitle { max-width: 250px; margin-block-start: 3px; font-size: 10.5px; line-height: 1.6; }
    .storefront-checkout__cart-link { min-height: 36px; padding-inline: 10px; font-size: 10.5px; }
    .storefront-checkout__steps { gap: 8px; margin-block-end: 14px; padding: 8px 10px; border-radius: 11px; }
    .storefront-checkout__step { font-size: 10px; }
    .storefront-checkout__step-number { width: 21px; height: 21px; font-size: 9px; }
    .storefront-checkout__step-line { width: 16px; }
    .storefront-checkout__flow { gap: 12px; }
    .storefront-checkout__card, .storefront-checkout__summary-card { border-radius: 13px; box-shadow: 0 6px 22px rgb(15 23 42 / 0.04); }
    .storefront-checkout__section { padding: 15px 13px; }
    .storefront-checkout__section-header { gap: 9px; margin-block-end: 15px; }
    .storefront-checkout__section-icon { width: 34px; height: 34px; border-radius: 10px; }
    .storefront-checkout__section-icon svg { width: 17px; height: 17px; }
    .storefront-checkout__section-title { font-size: 14px; }
    .storefront-checkout__section-description { font-size: 10px; }
    .storefront-checkout__fields { gap: 12px; }
    .storefront-checkout__phone-alert { align-items: stretch; flex-direction: column; }
    .storefront-checkout__inline-action { width: 100%; }
    .storefront-checkout__address-layout { gap: 13px; }
    .storefront-checkout-address__location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .storefront-checkout-options--payment { grid-template-columns: minmax(0, 1fr); }
    .storefront-checkout-choice { min-height: 58px; padding: 10px; }
    .storefront-checkout-choice__media { width: 34px; height: 34px; }
    .storefront-checkout-choice__title { font-size: 12px; }
    .storefront-checkout-choice__description { font-size: 10px; -webkit-line-clamp: 1; }
    .storefront-checkout__summary-header { min-height: 62px; padding: 10px 12px; }
    .storefront-checkout__summary-content { padding: 12px; }
    .storefront-checkout__summary-actions { padding: 0 12px 12px; }
    .storefront-checkout-order-summary__items { max-height: none; overflow: visible; }
    .storefront-checkout__summary-actions .storefront-checkout__primary-action { display: none; }

    .storefront-checkout-payment-modal__viewport {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .storefront-checkout-payment-modal__dialog {
        max-height: calc(100dvh - 12px);
        overflow-y: auto !important;
        border-end-start-radius: 0 !important;
        border-end-end-radius: 0 !important;
        border-start-start-radius: 18px !important;
        border-start-end-radius: 18px !important;
    }

    .storefront-checkout-payment-modal__header { padding: 16px 14px !important; }
    .storefront-checkout-payment-modal__header .w-12.h-12 { width: 40px !important; height: 40px !important; }
    .storefront-checkout-payment-modal__header .text-3xl { font-size: 1.45rem !important; }
    .storefront-checkout-payment-modal__body { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 379px) {
    .storefront-checkout__container { width: min(100% - 16px, 640px); }
    .storefront-checkout__intro { gap: 9px; }
    .storefront-checkout__subtitle { max-width: 210px; }
    .storefront-checkout-address__location-grid { grid-template-columns: minmax(0, 1fr); }
    .storefront-checkout__mobile-dock { grid-template-columns: 100px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-checkout *,
    .storefront-checkout *::before,
    .storefront-checkout *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}