@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700;6..96,800;6..96,900&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Prata&display=swap');

:root {
    --spacing-0-5: 0.125rem;
    --spacing-1: 0.25rem;
    --spacing-1-5: 0.375rem;
    --spacing-2: 0.5rem;
    --spacing-2-5: 0.625rem;
    --spacing-3: 0.75rem;
    --spacing-3-5: 0.875rem;
    --spacing-4: 1rem;
    --spacing-4-5: 1.125rem;
    --spacing-5: 1.25rem;
    --spacing-5-5: 1.375rem;
    --spacing-6: 1.5rem;
    --spacing-6-5: 1.625rem;
    --spacing-7: 1.75rem;
    --spacing-7-5: 1.875rem;
    --spacing-8: 2rem;
    --spacing-8-5: 2.125rem;
    --spacing-9: 2.25rem;
    --spacing-9-5: 2.375rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-14: 3.5rem;
    --spacing-16: 4rem;
    --spacing-18: 4.5rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-28: 7rem;
    --spacing-32: 8rem;
    --spacing-36: 9rem;
    --spacing-40: 10rem;
    --spacing-44: 11rem;
    --spacing-48: 12rem;
    --spacing-52: 13rem;
    --spacing-56: 14rem;
    --spacing-60: 15rem;
    --spacing-64: 16rem;
    --spacing-72: 18rem;
    --spacing-80: 20rem;
    --spacing-96: 24rem;

    --container-max-width: 1600px;
    --container-narrow-max-width: 1350px;
    --container-gutter: var(--spacing-5);
    --section-outer-spacing-block: var(--spacing-12);
    --section-inner-max-spacing-block: var(--spacing-10);
    --section-inner-spacing-inline: var(--container-gutter);
    --section-stack-spacing-block: var(--spacing-8);
    --grid-gutter: var(--spacing-5);
    --product-list-row-gap: var(--spacing-8);
    --product-list-column-gap: var(--grid-gutter);

    --heading-font-family: 'Bodoni Moda', 'Prata', serif;
    --heading-font-weight: 700;
    --heading-font-style: normal;
    --heading-text-transform: normal;
    --heading-letter-spacing: -0.02em;
    --text-font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --text-font-weight: 400;
    --text-font-style: normal;
    --text-letter-spacing: 0.01em;

    --text-h0: 3rem;
    --text-h1: 2.5rem;
    --text-h2: 2rem;
    --text-h3: 1.5rem;
    --text-h4: 1.375rem;
    --text-h5: 1.125rem;
    --text-h6: 1rem;
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.875rem;
    --text-lg: 1.125rem;

    --brand-dark-green: 28 67 53;
    --brand-green-deep: 17 49 38;
    --brand-green-soft: 224 234 225;
    --brand-gold: 176 125 62;
    --brand-gold-soft: 244 234 207;
    --surface-white: 255 255 255;
    --accent-metallic: var(--brand-gold);
    --accent: var(--brand-dark-green);
    --text-primary: 31 39 34;
    --background-primary: var(--surface-white);
    --border-color: 28 67 53 / 0.14;
    --button-background-primary: var(--brand-dark-green);
    --button-text-primary: 251 248 244;
    --button-background-secondary: var(--surface-white);
    --button-text-secondary: var(--brand-green-deep);
    --on-sale-text: 185 28 28;
    --on-sale-badge-background: 185 28 28;
    --on-sale-badge-text: 255 255 255;
    --sold-out-badge-background: 254 226 226;
    --sold-out-badge-text: 153 27 27;
    --primary-badge-background: var(--brand-green-deep);
    --primary-badge-text: 255 255 255;
    --star-color: 255 183 74;
    --product-card-background: var(--surface-white);
    --product-card-text: var(--text-primary);
    --header-background: var(--brand-green-deep);
    --header-text: 250 247 239;
    --footer-background: var(--brand-green-deep);
    --footer-text: 247 244 236;

    --rounded-xs: 0.25rem;
    --rounded-sm: 0.375rem;
    --rounded: 0.75rem;
    --rounded-lg: 1.5rem;
    --rounded-full: 9999px;
    --rounded-block: 1.5rem;
    --rounded-button: 9999px;
    --rounded-input: 0.5rem;

    --shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.08);
    --shadow: 0 5px 15px rgb(var(--text-primary) / 0.08);
    --shadow-md: 0 8px 25px rgb(var(--text-primary) / 0.08);
    --shadow-block: 0px 18px 50px rgb(var(--text-primary) / 0.08);

    --announcement-bar-height: 42px;
    --header-height: 76px;
    --sticky-announcement-bar-enabled: 1;
    --sticky-header-enabled: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--text-font-family);
    font-weight: var(--text-font-weight);
    font-style: var(--text-font-style);
    font-size: var(--text-base);
    color: rgb(var(--text-primary));
    background: rgb(var(--background-primary));
    line-height: 1.6;
    letter-spacing: var(--text-letter-spacing);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul {
    list-style: none;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
}

@media screen and (min-width: 700px) {
    :root {
        --text-h0: 4rem;
        --text-h1: 3rem;
        --text-h2: 2.5rem;
        --text-h3: 2rem;
        --text-h4: 1.625rem;
        --text-h5: 1.25rem;
        --text-h6: 1.125rem;
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1.0rem;
        --text-lg: 1.25rem;
        --container-gutter: 2rem;
        --section-outer-spacing-block: var(--spacing-16);
        --section-inner-max-spacing-block: var(--spacing-12);
        --section-inner-spacing-inline: var(--spacing-12);
        --section-stack-spacing-block: var(--spacing-12);
        --grid-gutter: var(--spacing-6);
        --product-list-row-gap: var(--spacing-12);
    }
}

@media screen and (min-width: 1000px) {
    :root {
        --container-gutter: var(--spacing-12);
        --section-outer-spacing-block: var(--spacing-18);
        --section-inner-max-spacing-block: var(--spacing-16);
        --section-inner-spacing-inline: var(--spacing-16);
        --section-stack-spacing-block: var(--spacing-12);
    }
}

@media screen and (min-width: 1150px) {
    :root {
        --section-outer-spacing-block: var(--spacing-20);
        --section-inner-max-spacing-block: var(--spacing-16);
        --section-inner-spacing-inline: var(--spacing-16);
        --section-stack-spacing-block: var(--spacing-12);
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --text-h0: 5rem;
        --text-h1: 3.75rem;
        --text-h2: 3rem;
        --text-h3: 2.25rem;
        --text-h4: 2rem;
        --text-h5: 1.5rem;
        --text-h6: 1.25rem;
        --section-outer-spacing-block: var(--spacing-24);
        --section-inner-max-spacing-block: var(--spacing-18);
        --section-inner-spacing-inline: var(--spacing-18);
    }
}

@media screen and (min-width: 1600px) {
    :root {
        --section-outer-spacing-block: var(--spacing-24);
        --section-inner-max-spacing-block: var(--spacing-20);
        --section-inner-spacing-inline: var(--spacing-20);
    }
}

.announcement-bar {
    background: rgb(var(--accent));
    color: #fff;
    height: var(--announcement-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1001;
    overflow: hidden;
}

.announcement-bar__scrolling-list {
    display: flex;
    gap: var(--spacing-6);
    animation: marquee 40s linear infinite;
    white-space: nowrap;
}

.announcement-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.header-main {
    background: rgb(var(--header-background));
    position: sticky;
    top: var(--announcement-bar-height);
    z-index: 1000;
    border-bottom: 1px solid rgb(var(--border-color));
}

.header__wrapper {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    position: relative;
}

/* header__main-nav and header__link-list rules moved to Site Header section below */

.header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: calc(100% - 200px);
}

.header__logo a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.header__logo-image {
    height: 32px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 699px) {
    .header__wrapper {
        gap: var(--spacing-2);
    }
    .header__logo {
        position: static;
        transform: none;
        max-width: calc(100% - 150px);
        margin: 0 auto;
    }
    .header__logo-image {
        height: 24px;
    }
    .header__icon-list {
        gap: 2px;
    }
    .header__icon-list a,
    .header__icon-list button {
        width: 36px;
        height: 36px;
    }
    .header__main-nav,
    .header__secondary-nav {
        flex: 0 0 auto;
    }
}

@media screen and (max-width: 999px) {
    .header__locale {
        display: none !important;
    }
    .mobile-menu-drawer__selectors {
        display: grid !important;
    }
}

.header__secondary-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.header__locale {
    position: relative;
    margin-inline-end: 0.1rem;
    color: rgb(var(--header-text));
}

.header__locale-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--header-text) / 0.18);
    background: rgb(255 255 255 / 0.04);
    color: inherit;
    cursor: pointer;
    list-style: none;
    font-family: var(--text-font-family);
    direction: ltr;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.header__locale-trigger::-webkit-details-marker,
.header__locale-trigger::marker {
    display: none;
}

.header__locale-trigger:hover {
    background: rgb(255 255 255 / 0.1);
    border-color: rgb(var(--header-text) / 0.32);
}

.header__locale[open] .header__locale-trigger {
    background: rgb(255 255 255 / 0.12);
    border-color: rgb(var(--header-text) / 0.38);
}

.header__locale-trigger:focus-visible {
    outline: 2px solid rgb(var(--brand-gold));
    outline-offset: 3px;
}

.header__locale-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.header__locale-flag:has(.locale-flag) {
    width: auto;
}

.header__locale-flag .locale-flag {
    display: block;
    width: 1.35em;
    height: 1em;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.22);
}

.header__locale-value {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}

.header__locale-symbol {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.78;
    line-height: 1;
}

.header__locale-divider {
    width: 1px;
    height: 12px;
    background: rgb(var(--header-text) / 0.3);
    flex-shrink: 0;
}

.header__locale-chevron {
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.header__locale[open] .header__locale-chevron {
    transform: rotate(180deg);
}

.header__locale-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    inset-inline-end: 0;
    z-index: 1200;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.85rem;
    border-radius: 0.75rem;
    background: rgb(var(--surface-white));
    color: rgb(var(--text-primary));
    box-shadow: 0 18px 40px rgb(17 49 38 / 0.16), 0 0 0 1px rgb(var(--border-color));
    display: grid;
    gap: 0.85rem;
    animation: header-locale-in 0.18s ease;
}

@keyframes header-locale-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header__locale-section {
    display: grid;
    gap: 0.4rem;
}

.header__locale-label {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--text-primary) / 0.48);
}

.header__locale-options {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__locale-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgb(var(--text-primary));
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.header__locale-option-main {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.header__locale-option .header__locale-flag {
    font-size: 1.05rem;
}

.header__locale-option:hover {
    background: rgb(var(--brand-green-soft) / 0.7);
}

.header__locale-option.is-active {
    background: rgb(var(--brand-green-deep));
    color: rgb(250 247 239);
}

.header__locale-option-meta {
    opacity: 0.7;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.header__locale-options--currency {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}

.header__icon-list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.header__icon-list a,
.header__icon-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: rgb(var(--header-text));
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.header__icon-list a:hover,
.header__icon-list button:hover {
    background: rgb(255 255 255 / 0.08);
}

.header__cart-toggle {
    position: relative;
}

.mobile-menu-drawer__selectors {
    display: none;
    margin-top: var(--spacing-5);
    gap: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid rgb(var(--border-color));
    grid-template-columns: 1fr;
}

.mobile-menu-drawer__selector-block {
    display: grid;
    gap: 0.55rem;
}

.mobile-menu-drawer__selector-label {
    margin: 0;
    font-family: var(--text-font-family);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(var(--text-primary) / 0.55);
}

.mobile-menu-drawer__locale-list {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu-drawer__locale-list--currency {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-menu-drawer__locale-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgb(var(--border-color));
    border-radius: 0.5rem;
    background: rgb(var(--surface-white));
    color: rgb(var(--text-primary));
    font-family: var(--text-font-family);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mobile-menu-drawer__locale-option .header__locale-flag {
    font-size: 1.05rem;
}

.mobile-menu-drawer__locale-list:not(.mobile-menu-drawer__locale-list--currency) .mobile-menu-drawer__locale-option {
    justify-content: flex-start;
}

.mobile-menu-drawer__locale-option.is-active {
    background: rgb(var(--brand-green-deep));
    border-color: rgb(var(--brand-green-deep));
    color: rgb(250 247 239);
}

.mobile-menu-drawer__locale-option.is-active .header__locale-option-meta {
    color: inherit;
    opacity: 0.8;
}

[dir="rtl"] .header__wrapper,
[dir="rtl"] .header__main-nav,
[dir="rtl"] .header__secondary-nav,
[dir="rtl"] .header__icon-list,
[dir="rtl"] .header__link-list ul,
[dir="rtl"] .mobile-menu-drawer__nav,
[dir="rtl"] .checkout-page__summary-item,
[dir="rtl"] .cart-item,
[dir="rtl"] .product-show__quantity,
[dir="rtl"] .product-show__notes-list {
    direction: rtl;
}

[dir="rtl"] .header__logo {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

[dir="rtl"] .announcement-bar__scrolling-list,
[dir="rtl"] .header__link-list ul,
[dir="rtl"] .header__icon-list,
[dir="rtl"] .product-show__notes-list,
[dir="rtl"] .cart-item__info,
[dir="rtl"] .checkout-page__summary-item {
    text-align: right;
}

[dir="rtl"] .checkout-page__coupon-form,
[dir="rtl"] .checkout-shipping-method,
[dir="rtl"] .checkout-section-heading,
[dir="rtl"] .checkout-payment-option,
[dir="rtl"] .checkout-checkbox,
[dir="rtl"] .branch-card__contacts,
[dir="rtl"] .store-locator__content,
[dir="rtl"] .contact-form,
[dir="rtl"] .admin-form__grid,
[dir="rtl"] .admin-actions,
[dir="rtl"] .branch-directory,
[dir="rtl"] .branch-card,
[dir="rtl"] .store-locator,
[dir="rtl"] .contact-form label,
[dir="rtl"] .checkout-page__form label {
    text-align: right;
}

.money,
.product-show__price,
.cart-item__price,
.cart-item__subtotal,
.cart-drawer__item-price {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header__cart-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--rounded-full);
    background: rgb(var(--brand-gold));
    color: #fff;
    font-family: var(--text-font-family);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 1.5px rgb(var(--header-background));
}

[dir="rtl"] .header__cart-count {
    right: auto;
    left: 2px;
}

.section {
    padding-top: var(--section-outer-spacing-block);
    padding-bottom: var(--section-outer-spacing-block);
}

.section-full {
    padding-left: 0;
    padding-right: 0;
}

.section-blends {
    background: rgb(var(--background-primary));
}

.section-blends + .section-blends,
.related-products {
    border-top: 1px solid rgb(var(--brand-gold) / 0.24);
}

.video-hero {
    position: relative;
    min-height: 460px;
    height: clamp(460px, 52vw, 760px);
    overflow: hidden;
    background: rgb(var(--brand-green-deep));
    isolation: isolate;
}

.video-hero__floating-bar {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.1rem;
    pointer-events: none;
}

.video-hero__floating-bar > * {
    pointer-events: auto;
}

@media screen and (max-width: 999px) {
    body.homepage .header-main {
        display: block;
    }
}

.video-hero__icon-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.video-hero__icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.video-hero__icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.video-hero__brand {
    flex: 1;
    text-align: center;
    font-family: var(--heading-font-family);
    font-size: clamp(1.2rem, 2vw, 2.25rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.video-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
}

.hero-slideshow {
    position: absolute;
    inset: 0;
}

.hero-slideshow__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slideshow__slide.is-active {
    opacity: 1;
}

.hero-slideshow__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    will-change: transform;
}

.hero-slideshow__slide:is(.is-active, .is-leaving)[data-effect="zoom-in"] img {
    animation: hero-zoom-in var(--hero-slide-duration, 7500ms) ease-out forwards;
}

.hero-slideshow__slide:is(.is-active, .is-leaving)[data-effect="zoom-out"] img {
    animation: hero-zoom-out var(--hero-slide-duration, 7500ms) ease-out forwards;
}

.hero-slideshow__slide:is(.is-active, .is-leaving)[data-effect="shake"] img {
    animation: hero-shake 2.6s ease-in-out infinite;
}

.hero-slideshow__slide:is(.is-active, .is-leaving)[data-effect="pan-left"] img {
    animation: hero-pan-left var(--hero-slide-duration, 7500ms) linear forwards;
}

.hero-slideshow__slide:is(.is-active, .is-leaving)[data-effect="pan-right"] img {
    animation: hero-pan-right var(--hero-slide-duration, 7500ms) linear forwards;
}

.hero-slideshow__slide[data-effect="none"] img {
    transform: none;
}

@keyframes hero-zoom-in {
    from { transform: scale(1); }
    to { transform: scale(1.18); }
}

@keyframes hero-zoom-out {
    from { transform: scale(1.22); }
    to { transform: scale(1); }
}

@keyframes hero-shake {
    0%, 100% { transform: scale(1.1) translate(0, 0) rotate(0deg); }
    15% { transform: scale(1.1) translate(-1.2%, 0.6%) rotate(-0.6deg); }
    30% { transform: scale(1.1) translate(1%, -0.8%) rotate(0.5deg); }
    45% { transform: scale(1.1) translate(-0.8%, -0.4%) rotate(-0.4deg); }
    60% { transform: scale(1.1) translate(1.1%, 0.7%) rotate(0.6deg); }
    75% { transform: scale(1.1) translate(-0.6%, 0.3%) rotate(-0.3deg); }
    90% { transform: scale(1.1) translate(0.4%, -0.3%) rotate(0.2deg); }
}

@keyframes hero-pan-left {
    from { transform: scale(1.15) translateX(4%); }
    to { transform: scale(1.15) translateX(-4%); }
}

@keyframes hero-pan-right {
    from { transform: scale(1.15) translateX(-4%); }
    to { transform: scale(1.15) translateX(4%); }
}

.hero-slideshow__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 3;
    display: flex;
    gap: .55rem;
    transform: translateX(-50%);
}

.hero-slideshow__dot {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hero-slideshow__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .6rem;
    height: .6rem;
    border: 1px solid rgb(255 255 255 / 0.8);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: background .2s ease, transform .2s ease;
}

.hero-slideshow__dot.is-active::after {
    background: rgb(var(--brand-gold));
    border-color: rgb(var(--brand-gold));
    transform: translate(-50%, -50%) scale(1.25);
}

.hero-slideshow__dot:focus-visible {
    outline: 2px solid rgb(var(--brand-gold));
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slideshow__slide {
        transition: none;
    }

    .hero-slideshow__slide img,
    .hero-slideshow__slide:is(.is-active, .is-leaving) img {
        animation: none !important;
        transform: none;
    }
}

.video-hero__overlay {
    position: absolute;
    inset: 0;
    background: none;
    z-index: 1;
}

.video-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 5rem 1.5rem 3rem;
}

.video-hero__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 1.44rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

/* Latin and Cyrillic eyebrows grow with uppercase tracking; keep them inside the logo. */
[dir="ltr"] .video-hero__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.12em;
}

.video-hero__title {
    font-family: var(--heading-font-family);
    font-size: clamp(3rem, 6vw, 8rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
}

.video-hero__title--logo {
    line-height: 0;
}

.video-hero__logo {
    display: block;
    width: clamp(180px, 38vw, 460px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.video-hero__subtitle {
    margin-top: 0.85rem;
    font-size: clamp(0.95rem, 1.5vw, 1.4rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
}

.video-hero__actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.video-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.video-hero__button:hover {
    transform: translateY(-1px);
}

.video-hero__button--primary {
    background: #fff;
    color: rgb(var(--brand-green-deep));
    box-shadow: 0 12px 28px rgba(9, 31, 23, 0.28);
}

.video-hero__button--primary:hover {
    background: rgba(255, 255, 255, 0.88);
}

.video-hero__button--secondary {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    backdrop-filter: blur(3px);
}

.video-hero__content > * {
    animation: hero-rise 0.7s ease both;
}

.video-hero__content > :nth-child(2) { animation-delay: 0.08s; }
.video-hero__content > :nth-child(3) { animation-delay: 0.16s; }
.video-hero__content > :nth-child(4) { animation-delay: 0.24s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* The homepage uses one shared header over the campaign video. */
body.homepage .site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1000;
    color: #fff;
}

body.homepage #main > .section:first-child {
    padding-top: 0;
}

body.homepage .announcement-bar {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    background: rgb(var(--brand-green-deep) / 0.82);
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.homepage .header-main {
    position: absolute;
    inset: var(--announcement-bar-height) 0 auto;
    width: 100%;
    background: rgb(var(--brand-green-deep) / 0.2);
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.homepage .header__icon-list a,
body.homepage .header__icon-list button,
body.homepage .mobile-menu-toggle,
body.homepage .header__link-list > ul > li > a,
body.homepage .header__link-list > ul > li > details > summary {
    color: #fff;
}

body.homepage .header__icon-list a:hover,
body.homepage .header__icon-list button:hover,
body.homepage .mobile-menu-toggle:hover,
body.homepage .header__link-list > ul > li > a:hover,
body.homepage .header__link-list > ul > li > details > summary:hover {
    color: rgb(255 255 255 / 0.72);
    background: rgb(255 255 255 / 0.1);
}

body.homepage .header__locale {
    color: #fff;
}

body.homepage .header__locale-trigger {
    border-color: rgb(255 255 255 / 0.28);
    background: rgb(255 255 255 / 0.08);
}

body.homepage .header__locale-trigger:hover,
body.homepage .header__locale[open] .header__locale-trigger {
    background: rgb(255 255 255 / 0.16);
    border-color: rgb(255 255 255 / 0.42);
}

body.homepage .header__locale-divider {
    background: rgb(255 255 255 / 0.35);
}

body.homepage .header__cart-count {
    box-shadow: 0 0 0 1.5px rgb(17 49 38 / 0.55);
}

@media screen and (min-width: 1000px) {
    body.homepage .header__wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--spacing-6);
    }

    body.homepage .header__logo {
        position: static;
        left: auto;
        transform: none;
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        max-width: 130px;
    }

    body.homepage .header__main-nav {
        grid-column: 2;
        grid-row: 1;
    }

    body.homepage .header__secondary-nav {
        grid-column: 3;
        grid-row: 1;
    }
}

.section-stack {
    max-width: var(--container-narrow-max-width);
    margin: 0 auto;
    padding-left: var(--section-inner-spacing-inline);
    padding-right: var(--section-inner-spacing-inline);
    display: flex;
    flex-direction: column;
    gap: var(--section-stack-spacing-block);
}

.home-campaign-card,
.home-collection-card,
.home-category-card,
.home-trust-card,
.home-testimonial-card,
.home-gallery-card {
    background: rgb(var(--product-card-background));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-sm);
    overflow: hidden;
}

.home-campaign-slider {
    position: relative;
}

.home-campaign-slider__slides {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #fff;
}

.home-campaign-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.home-campaign-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    z-index: 1;
}

.home-campaign-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-campaign-card__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .35rem;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-bottom: clamp(2.75rem, 6vw, 3.5rem);
    padding-inline: clamp(5.5rem, 11vw, 8rem);
    text-align: start;
    color: #fff;
    background: linear-gradient(180deg, transparent 58%, rgb(17 49 38 / 0.45) 100%);
}

.home-campaign-card__content > * {
    max-width: min(32rem, 100%);
}

.home-campaign-card__content h2 {
    margin: 0 0 .35rem;
    color: #fff;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

.home-campaign-card__content p {
    margin: 0 0 .75rem;
    color: rgb(255 255 255 / 0.88);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

.home-campaign-card__content .text-with-icon {
    color: rgb(var(--brand-gold-soft));
    font-weight: 700;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

.home-campaign-card__content .text-with-icon:hover {
    color: rgb(var(--brand-gold));
}

.home-campaign-slider__slides {
    touch-action: pan-y;
}

.home-campaign-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.6);
    border-radius: 50%;
    color: #fff;
    background: rgb(17 49 38 / 0.55);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s ease, border-color .2s ease;
}

.home-campaign-slider__arrow:hover {
    background: rgb(var(--brand-gold));
    border-color: rgb(var(--brand-gold));
}

.home-campaign-slider__arrow:focus-visible {
    outline: 2px solid rgb(var(--brand-gold));
    outline-offset: 3px;
}

.home-campaign-slider__arrow--prev {
    inset-inline-start: clamp(.5rem, 2vw, 1.25rem);
}

.home-campaign-slider__arrow--next {
    inset-inline-end: clamp(.5rem, 2vw, 1.25rem);
}

[dir="rtl"] .home-campaign-slider__arrow svg {
    transform: scaleX(-1);
}

.home-campaign-slider__controls {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: var(--spacing-4);
}

.home-campaign-slider__dot {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
}

.home-campaign-slider__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border: 1px solid rgb(var(--brand-dark-green));
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: background .2s ease, transform .2s ease;
}

.home-campaign-slider__dot.is-active::after {
    background: rgb(var(--brand-gold));
    border-color: rgb(var(--brand-gold));
    transform: translate(-50%, -50%) scale(1.2);
}

.home-campaign-slider__dot:focus-visible {
    outline: 2px solid rgb(var(--brand-gold));
    outline-offset: 3px;
}

.home-campaign-card,
.home-collection-card,
.home-category-card,
.home-gallery-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-campaign-card:hover,
.home-collection-card:hover,
.home-category-card:hover,
.home-gallery-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.home-collection-card img,
.home-category-card img,
.home-gallery-card img {
    width: 100%;
    object-fit: cover;
}

.home-campaign-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-collection-card__content,
.home-category-card__content,
.home-gallery-card__content {
    padding: var(--spacing-5);
}

.home-campaign-card h2,
.home-collection-card h3,
.home-category-card h3 {
    color: rgb(var(--brand-green-deep));
}

.home-campaign-card__content h2 {
    color: #fff;
}

.home-categories__title {
    font-size: 1.5rem;
}

.home-category-card h3.home-category-card__title {
    font-size: 1.08rem;
    line-height: 1.24;
    overflow-wrap: anywhere;
}

.home-collection-card h3 {
    font-size: 1.28rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

[dir="rtl"] .home-category-card__title,
[dir="rtl"] .home-collection-card h3 {
    font-size: 1.05rem;
    line-height: 1.42;
    word-break: normal;
}

.home-category-card__count {
    display: block;
    margin-top: .4rem;
    color: rgb(var(--text-primary) / 0.62);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-campaign-card p,
.home-collection-card p {
    color: rgb(var(--text-primary) / 0.68);
}

.home-campaign-card__content p {
    color: #fff;
}

[dir="rtl"] .home-campaign-card__content,
[dir="rtl"] .home-collection-card__content,
[dir="rtl"] .home-category-card__content,
[dir="rtl"] .home-offer-card,
[dir="rtl"] .home-flash-offer-card__content {
    text-align: right;
}

[dir="rtl"] .home-campaign-card__content {
    direction: rtl;
    text-align: right;
    align-items: flex-start;
}

[dir="rtl"] .home-campaign-card__content h2,
[dir="rtl"] .home-campaign-card__content p,
[dir="rtl"] .home-campaign-card__content .text-with-icon {
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
}

[dir="rtl"] .home-offer-card {
    align-items: stretch;
    text-align: right;
}

[dir="rtl"] .home-offer-card__value,
[dir="rtl"] .home-offer-card h3,
[dir="rtl"] .home-offer-card p {
    direction: rtl;
    unicode-bidi: isolate;
}

[dir="rtl"] .home-offer-card__value {
    letter-spacing: 0;
    text-transform: none;
}

.home-offers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--grid-gutter);
}

.home-offer-card {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--spacing-6);
    background: rgb(var(--brand-green-deep));
    color: #fff;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease;
}

.home-offer-card:hover {
    background: rgb(var(--brand-dark-green));
    color: #fff;
    transform: translateY(-3px);
}

.home-offer-card__value {
    margin-bottom: auto;
    color: rgb(var(--brand-gold-soft));
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-offer-card h3 {
    margin: var(--spacing-6) 0 var(--spacing-2);
    color: #fff;
}

.home-offer-card p {
    margin: 0 0 var(--spacing-5);
    color: rgb(255 255 255 / .76);
}

.home-trust-card,
.home-testimonial-card {
    padding: var(--spacing-6);
}

.home-trust-card strong,
.home-testimonial-card strong,
.home-gallery-card strong {
    color: rgb(var(--brand-green-deep));
}

.home-trust-card > div:first-child {
    color: rgb(var(--accent-metallic));
}

.home-testimonial-card > div:first-child,
.home-gallery-card__content > div {
    color: rgb(var(--text-primary) / 0.68);
}

@media screen and (max-width: 699px) {
    .video-hero {
        min-height: 0;
        height: clamp(400px, 110vw, 440px);
    }

    .video-hero__content {
        padding: 8rem 1rem 3.5rem;
    }

    .video-hero__logo {
        width: clamp(140px, 42vw, 200px);
    }

    .video-hero__actions {
        width: min(100%, 22rem);
        flex-wrap: nowrap;
        gap: .6rem;
    }

    .video-hero__button {
        flex: 1 1 0;
        min-width: 0;
        padding: .75rem .9rem;
    }

    .video-hero:has(.hero-slideshow) {
        height: auto;
        padding-top: calc(var(--announcement-bar-height) + var(--header-height));
    }

    .video-hero:has(.hero-slideshow) .hero-slideshow {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 9;
    }

    .hero-slideshow__slide img,
    .hero-slideshow__slide:is(.is-active, .is-leaving) img {
        object-fit: contain;
        transform: none;
        animation: none !important;
    }

    .video-hero:has(.hero-slideshow) .hero-slideshow__dots {
        bottom: 0;
    }

    .video-hero:has(.hero-slideshow) .video-hero__content {
        height: auto;
        padding: 1.25rem 1rem 2rem;
    }

    .home-campaign-slider__slides {
        aspect-ratio: auto;
        height: 0;
        padding-bottom: calc(56.25% + 6.5rem);
    }

    .home-campaign-card > img {
        height: calc(100% - 6.5rem);
    }

    .home-campaign-card__content {
        top: auto;
        height: 6.5rem;
        justify-content: center;
        gap: .12rem;
        padding: .7rem 1.15rem .75rem;
        background: rgb(var(--brand-green-deep));
    }

    .home-campaign-card__content h2,
    .home-campaign-card__content p,
    .home-campaign-card__content .text-with-icon {
        text-shadow: none;
    }

    .home-campaign-card__content h2 {
        margin-bottom: 0;
        font-size: 1.15rem;
        line-height: 1.15;
    }

    .home-campaign-card__content p {
        margin-bottom: 0;
        font-size: .8rem;
        line-height: 1.35;
        text-wrap: pretty;
    }

    .home-campaign-card__content .text-with-icon {
        font-size: .78rem;
    }

    .home-campaign-slider__arrow {
        top: calc((100% - 6.5rem) / 2);
        width: 2.25rem;
        height: 2.25rem;
    }
}

@media screen and (max-height: 520px) {
    .video-hero {
        min-height: 0;
        height: 100svh;
        height: 100dvh;
    }

    .video-hero__content {
        padding-top: 3.5rem;
        padding-bottom: 1.25rem;
    }

    .video-hero__logo {
        width: min(160px, 36vw);
    }

    .video-hero__actions {
        margin-top: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-campaign-card {
        transition: none;
    }
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.section-header h2 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: clamp(2rem, 2vw + 1rem, 3rem);
    letter-spacing: var(--heading-letter-spacing);
    line-height: 1.05;
}

.hero-split-media-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gutter);
    padding: 0 var(--container-gutter);
}

@media screen and (min-width: 1000px) {
    .hero-split-media-grid {
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: var(--grid-gutter);
        height: 640px;
    }
    .hero-split-media-grid__hero {
        grid-row: 1 / -1;
        min-height: 0;
    }
    .hero-split-media-grid__bottom {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: var(--grid-gutter);
        min-height: 0;
    }
    .hero-split-media-grid__item {
        min-height: 0;
    }
}

.hero-split-media-grid__link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--rounded-block);
    box-shadow: var(--shadow-sm);
    background: #111;
}

.hero-split-media-grid__hero,
.hero-split-media-grid__item {
    aspect-ratio: 4 / 5;
}

.hero-split-media-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17,17,17,0.08) 0%, rgba(17,17,17,0.66) 100%);
    z-index: 1;
}

.hero-split-media-grid__hero .content-over-media__content,
.hero-split-media-grid__item .content-over-media__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--spacing-8);
}

.hero-split-media-grid__hero .content-over-media__content h2,
.hero-split-media-grid__item .content-over-media__content p {
    font-size: clamp(1.5rem, 2.2vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: none;
    line-height: 0.95;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.28);
}

@media screen and (min-width: 1000px) {
    .hero-split-media-grid__hero,
    .hero-split-media-grid__item {
        aspect-ratio: auto;
        min-height: 0;
    }
}

.hero-split-media-grid__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-split-media-grid__link:hover .hero-split-media-grid__media {
    transform: scale(1.03);
}

.hero-slider {
    position: relative;
    padding: 0 1.25rem;
}

.hero-slider__slides {
    position: relative;
    min-height: 520px;
}

.hero-slide {
    display: none;
    animation: heroFade 0.5s ease;
}

.hero-slide.is-active {
    display: block;
}

@keyframes heroFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-slide__eyebrow {
    display: inline-block;
    margin-bottom: var(--spacing-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.83);
}

.hero-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: 1rem;
}

.hero-slider__button {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgb(var(--border-color));
    color: rgb(var(--text-primary));
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.hero-slider__button:hover {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.hero-slider__dots {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.hero-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgba(var(--text-primary), 0.2);
    transition: all 0.2s ease;
}

.hero-slider__dot.is-active {
    width: 28px;
    border-radius: 99px;
    background: rgb(var(--accent));
}

.hero-split-media-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17,17,17,0.04) 0%, rgba(17,17,17,0.7) 100%);
    z-index: 1;
}

.hero-split-media-grid__hero .content-over-media__content,
.hero-split-media-grid__item .content-over-media__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.5rem;
}

.hero-split-media-grid__hero .content-over-media__content h2,
.hero-split-media-grid__item .content-over-media__content p {
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.22);
    line-height: 1;
}

@media screen and (min-width: 1000px) {
    .hero-slider {
        padding: 0 1.5rem;
    }
    .hero-slider__slides {
        min-height: 560px;
    }
    .hero-split-media-grid {
        gap: 1rem;
        height: 560px;
    }
}

@media screen and (max-width: 999px) {
    .hero-slider__slides {
        min-height: auto;
    }
    .hero-split-media-grid__hero,
    .hero-split-media-grid__item {
        aspect-ratio: 1 / 1.15;
    }
}

.content-over-media {
    position: relative;
}

.content-over-media__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-8);
    z-index: 1;
}

.product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--product-list-column-gap);
}

@media screen and (min-width: 700px) {
    .product-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1000px) {
    .product-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    position: relative;
    min-width: 0;
}

.product-card__badge-list {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--rounded-full);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.badge--primary {
    background: rgb(var(--primary-badge-background));
    color: rgb(var(--primary-badge-text));
}

.badge--on-sale {
    background: rgb(var(--on-sale-badge-background));
    color: rgb(var(--on-sale-badge-text));
    border: 1px solid rgb(185 28 28 / 0.35);
}

.badge--sold-out {
    background: rgb(var(--sold-out-badge-background));
    color: rgb(var(--sold-out-badge-text));
    border: 1px solid rgb(220 38 38 / 0.28);
}

.product-card__figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--rounded-sm);
    background: rgb(var(--product-card-background));
    aspect-ratio: 3 / 4;
    border: 1px solid rgb(var(--border-color));
    box-shadow: 0 4px 18px rgb(var(--brand-green-deep) / 0.06);
}

.product-card__image-actions {
    position: absolute;
    right: var(--spacing-3);
    bottom: var(--spacing-3);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.product-card__image-actions .product-card__quick-add-form {
    display: flex;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
}
.product-card__image-actions .button--icon-only {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgb(var(--border-color));
    box-shadow: 0 5px 16px rgb(0 0 0 / 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-card__image-actions .product-share-button {
    background: rgb(255 255 255 / 0.9);
    color: rgb(var(--text-primary));
}

.product-card__image-actions .product-share-button:hover {
    background: #fff;
    color: rgb(var(--accent));
}

.product-card__image-actions .product-card__quick-add-form .button {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.product-card__image-actions .product-card__quick-add-form .button:hover {
    background: rgb(var(--brand-gold));
    border-color: rgb(var(--brand-gold));
}

.product-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-4);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card__image--primary {
    opacity: 1;
    z-index: 1;
}

.product-card__image--secondary {
    opacity: 0;
    z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-card__image--primary {
        opacity: 0;
    }

    .product-card:hover .product-card__image--secondary {
        opacity: 1;
    }

    .product-card:hover .product-card__image {
        transform: scale(1.04);
    }
}

.product-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2-5);
    padding: 0 var(--spacing-1);
}

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

.product-card__title {
    font-family: var(--heading-font-family);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.product-card__title a {
    transition: color 0.2s ease;
}

.product-card__title a:hover {
    color: rgb(var(--accent) / 0.7);
}

.price-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    align-items: center;
}

.price-list--stacked {
    align-items: center;
}

.price-list--compare {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
}

.price-list .money {
    font-size: var(--text-sm);
    font-weight: 600;
}

.price-list__sale-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

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

.line-through {
    text-decoration: line-through;
    font-size: var(--text-xs);
}

.text-on-sale {
    color: rgb(var(--on-sale-text));
    font-size: var(--text-base);
    font-weight: 700;
    font-size: 1rem;
}

.product-card__price-badge {
    flex-shrink: 0;
}

.product-card__quick-buy-inline {
    margin-top: var(--spacing-2);
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-card__quick-buy-inline .product-card__quick-add-form { flex: 1; }

.product-share-button { flex: 0 0 auto; }

.button--icon-only {
    padding: var(--spacing-3);
    gap: 0;
}

.button--icon-only svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.icon-cart {
    width: 22px;
    height: 22px;
    display: block;
}

.button--icon-only .icon-cart {
    width: 1.55rem;
    height: 1.55rem;
}

.button--icon-only.product-share-button {
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
}

.product-show__action-row {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
}

.product-show__action-row .button--primary {
    flex: 1;
    min-height: 3rem;
    gap: 0.55rem;
    white-space: nowrap;
}

.product-show__action-row .button--primary .icon-cart {
    width: 1.2rem;
    height: 1.2rem;
}

.offer-flash-badge {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: 999px;
    background: rgb(var(--brand-dark-green));
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-3);
}

.offer-flash-state {
    padding: var(--spacing-6);
    border-radius: var(--rounded-block);
    background: rgb(var(--text-primary) / 0.05);
    margin-top: var(--spacing-4);
}

.offer-countdown {
    margin: var(--spacing-4) 0;
}

.offer-countdown__label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--text-primary) / 0.6);
    margin: 0 0 var(--spacing-2);
}

.offer-countdown__units {
    display: flex;
    gap: var(--spacing-3);
}

.offer-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.5rem;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--rounded-button);
    background: rgb(var(--brand-dark-green));
    color: #fff;
}

.offer-countdown__unit span {
    font-size: var(--text-h4);
    font-weight: 700;
    line-height: 1.1;
}

.offer-countdown__unit small {
    font-size: var(--text-xs);
    opacity: 0.8;
    text-transform: uppercase;
}

.offer-countdown.is-ended .offer-countdown__unit {
    background: rgb(var(--text-primary) / 0.3);
}

.home-flash-offer-card {
    position: relative;
    display: block;
    border-radius: var(--rounded-block);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
}

.home-flash-offer-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.home-flash-offer-card__content {
    padding: var(--spacing-4);
}

.home-flash-offer-card .offer-countdown__units {
    gap: var(--spacing-2);
}

.home-flash-offer-card .offer-countdown__unit {
    min-width: 2.75rem;
    padding: var(--spacing-1) var(--spacing-2);
}

.home-flash-offer-card .offer-countdown__unit span {
    font-size: var(--text-base);
}

.whatsapp-floating-button {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
    width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
    border-radius: 50%; background: #25d366; color: #fff; font-size: 1.45rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.2); text-decoration: none;
}
.whatsapp-floating-button:hover { background: #128c7e; color: #fff; }
@media (max-width: 640px) { .whatsapp-floating-button { right: .85rem; bottom: .85rem; } }

.offer-progress {
    padding: var(--spacing-4);
    border-radius: var(--rounded-block);
    background: rgb(var(--brand-gold-soft) / 0.5);
    margin-bottom: var(--spacing-4);
}

.offer-progress__message {
    font-size: var(--text-sm);
    margin: 0 0 var(--spacing-2);
    color: rgb(var(--text-primary));
}

.offer-progress__message strong {
    color: rgb(var(--brand-dark-green));
}

.offer-progress__track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgb(var(--text-primary) / 0.12);
    overflow: hidden;
}

.offer-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: rgb(var(--brand-dark-green));
    transition: width 0.3s ease;
}



.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--rounded-button);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.button--primary {
    background: rgb(var(--button-background-primary));
    color: rgb(var(--button-text-primary));
    box-shadow: 0 6px 18px rgb(var(--text-primary) / 0.08);
}

.button:focus-visible,
.video-hero__button:focus-visible,
.video-hero__icon-btn:focus-visible,
.header__icon-list a:focus-visible,
.header__icon-list button:focus-visible {
    outline: 2px solid rgb(var(--accent-metallic));
    outline-offset: 3px;
}

.button--primary:hover {
    background: rgb(var(--button-background-primary) / 0.9);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgb(var(--text-primary) / 0.12);
}

.button--secondary {
    background: rgb(var(--button-background-secondary));
    color: rgb(var(--button-text-secondary));
    border: 1px solid rgb(var(--brand-dark-green) / 0.35);
}

.button--secondary:hover {
    background: rgb(var(--brand-gold-soft));
    border-color: rgb(var(--brand-gold));
}

.button:active {
    transform: translateY(0);
}

.scroll-area {
    display: flex;
    gap: var(--grid-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--spacing-4);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
    display: none;
}

.scroll-area > * {
    flex-shrink: 0;
}

/* Product list inside a scroll carousel: use flex, not grid.
   Snap each card. Snapping the list wrapper locks the row on the first card. */
.scroll-area .product-list {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gutter);
    width: max-content;
    min-width: 100%;
}

.scroll-area .product-card {
    min-width: 240px;
    width: 240px;
    scroll-snap-align: start;
}

@media screen and (max-width: 699px) {
    .scroll-area .product-card {
        /* Two full cards in the visible row. */
        width: calc((100vw - (var(--section-inner-spacing-inline) * 2) - var(--grid-gutter)) / 2);
        min-width: calc((100vw - (var(--section-inner-spacing-inline) * 2) - var(--grid-gutter)) / 2);
    }

    .scroll-area .product-card__image-actions .product-card__quick-add-form,
    .scroll-area .product-card__image-actions .button--icon-only {
        width: 2.25rem;
        height: 2.25rem;
        flex-basis: 2.25rem;
    }
}

@media screen and (min-width: 700px) {
    .scroll-area .product-card {
        min-width: 270px;
        width: 270px;
    }
}

@media screen and (min-width: 1000px) {
    .scroll-area .product-card {
        min-width: 290px;
        width: 290px;
    }
}

.scroll-area.is-scrollable {
    padding-left: var(--section-inner-spacing-inline);
    padding-right: var(--section-inner-spacing-inline);
    margin-left: calc(-1 * var(--section-inner-spacing-inline));
    margin-right: calc(-1 * var(--section-inner-spacing-inline));
}

.floating-controls-container {
    position: relative;
}

.circle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgb(var(--border-color));
    background: #fff;
    color: rgb(var(--text-primary));
    transition: all 0.2s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.circle-button--lg {
    width: 56px;
    height: 56px;
}

.circle-button--fill {
    background: #fff;
    box-shadow: var(--shadow);
}

.circle-button:hover:not(:disabled) {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.circle-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.circle-button:first-of-type {
    inset-inline-start: var(--spacing-4);
}

.circle-button:last-of-type {
    inset-inline-end: var(--spacing-4);
}

@media screen and (max-width: 699px) {
    .circle-button {
        display: none;
    }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
    .circle-button,
    .circle-button--lg {
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
    }
}

.collection-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--rounded-block);
    min-width: 280px;
    max-width: 360px;
    aspect-ratio: 3 / 4;
}

@media screen and (min-width: 700px) {
    .collection-card {
        min-width: 320px;
    }
}

.collection-card__content-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-6);
    z-index: 1;
}

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

.collection-card__content p {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h4);
    letter-spacing: var(--heading-letter-spacing);
}

.site-footer {
    background: #fff;
    color: rgb(var(--text-primary));
    border-top: 1px solid rgb(var(--border-color));
}

.footer-benefits {
    padding: 3.5rem var(--container-gutter) 3.25rem;
}

.footer-benefits__grid {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.footer-benefit { display: flex; align-items: center; justify-content: center; gap: .9rem; min-width: 0; flex: 0 1 calc((100% - 6rem) / 4); }
.footer-benefit__icon { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; height: 3rem; border: 1px solid currentColor; border-radius: 50%; font-size: 1.15rem; line-height: 1; }
.footer-benefit__icon svg { display: block; width: 1.15rem; height: 1.15rem; }
.footer-benefit strong { display: block; font-size: .95rem; margin-bottom: .35rem; white-space: nowrap; }
.footer-benefit div > span { display: block; }
.footer-benefit div span { font-size: .76rem; opacity: .72; }
.footer-contact { background: rgb(var(--brand-dark-green)); color: #fff; }
.footer-contact__inner { max-width: var(--container-max-width); min-height: 5.5rem; margin: 0 auto; padding: 1.1rem var(--container-gutter); display: flex; align-items: center; gap: 2.25rem; }
.footer-contact__inner > div { display: flex; flex-direction: column; gap: .2rem; margin-right: auto; }
.footer-contact__inner > div strong { font-size: 1rem; }
.footer-contact__inner > div span { font-size: .75rem; opacity: .82; }
[dir="rtl"] .footer-contact__inner > div { margin-right: 0; margin-left: auto; text-align: right; }
.footer-contact__item { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.footer-contact__item:hover { color: rgb(var(--brand-gold)); }
.footer-contact__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; font-size: 1.25rem; }
.footer-contact .social-media { margin: 0; }
.footer-contact .social-media a { color: #fff; border-color: rgba(255,255,255,.8); }
.footer-contact .social-media a:hover { background: rgb(var(--brand-gold)); border-color: rgb(var(--brand-gold)); }
.footer-main { max-width: var(--container-max-width); margin: 0 auto; padding: 2.75rem var(--container-gutter) 1.25rem; }
.footer-main__grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 2rem; padding-bottom: 2.25rem; }
.footer-brand-block { display: flex; flex-direction: column; align-items: center; width: fit-content; max-width: 100%; }
.footer-brand { display: inline-block; margin-bottom: 1.25rem; }
.footer-brand__logo { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.footer-brand-block p { max-width: 18rem; margin: 0; text-align: center; font-size: .95rem; line-height: 1.6; opacity: .78; }
.footer-link-group { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer-link-group strong { margin-bottom: .45rem; font-size: .9rem; }
.footer-link-group a { color: rgb(var(--text-primary)); font-size: .8rem; }
.footer-link-group a:hover { color: rgb(var(--brand-gold)); }
.footer-bottom { border-top: 1px solid rgb(var(--border-color)); padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; opacity: .72; }
@media (max-width: 800px) {
    .footer-benefit { flex-basis: calc((100% - 2rem) / 2); }
    .footer-contact__inner { flex-wrap: wrap; gap: 1rem 1.5rem; }
    .footer-contact__inner > div { width: 100%; }
    .footer-main__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .footer-main__grid { grid-template-columns: 1fr; }
    .footer-benefits { padding-block: 2.5rem; }
    .footer-benefits__grid {
        flex-direction: column;
        align-items: stretch;
        width: max-content;
        max-width: 100%;
        gap: 1.75rem;
    }
    .footer-benefit {
        flex: none;
        width: auto;
        justify-content: flex-start;
    }
    .footer-contact__item { font-size: .75rem; }
    .footer-bottom { flex-direction: column; }
}

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

.footer__wrapper {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
}

@media screen and (min-width: 1000px) {
    .footer__wrapper {
        grid-template-columns: 1.5fr 1fr;
    }
}

.footer__block-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
}

@media screen and (min-width: 700px) {
    .footer__block-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer__block h4,
.footer__block p.bold {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-4);
}

.footer__block p,
.footer__block a {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
    line-height: 1.8;
}

.footer__block a:hover {
    color: rgb(var(--text-primary));
}

.footer__newsletter-form {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.footer__newsletter-form input {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    font-family: inherit;
    font-size: var(--text-sm);
    background: transparent;
    color: inherit;
}

.footer__newsletter-form input::placeholder {
    color: rgb(var(--text-primary) / 0.4);
}

.footer__newsletter-form button {
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--rounded-button);
    background: rgb(var(--button-background-primary));
    color: rgb(var(--button-text-primary));
    font-weight: 600;
    font-size: var(--text-sm);
    transition: opacity 0.2s ease;
}

.footer__newsletter-form button:hover {
    opacity: 0.85;
}

.footer__aside-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.social-media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.social-media a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgb(var(--border-color));
    color: rgb(var(--text-primary));
    transition: all 0.2s ease;
}

.social-media a:hover {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.footer__copyright {
    font-size: var(--text-xs);
    color: rgb(var(--text-primary) / 0.5);
    padding-top: var(--spacing-6);
    border-top: 1px solid rgb(var(--border-color));
}

.v-stack {
    display: flex;
    flex-direction: column;
}

.h-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.w-full { width: 100%; }
.text-with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.bold {
    font-weight: 700;
}

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

.reversed-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: rgb(var(--text-primary));
    transition: color 0.2s ease;
}

.reversed-link:hover {
    color: rgb(var(--accent) / 0.7);
}

.circle-chevron {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.group-hover\:colors:hover .circle-chevron {
    color: rgb(var(--accent) / 0.7);
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-banner {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f7f7;
}

.hero-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-banner__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    padding: var(--spacing-8);
}

.hero-banner__content h1 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h1);
    letter-spacing: var(--heading-letter-spacing);
    margin-bottom: var(--spacing-4);
    line-height: 1.1;
}

.hero-banner__content p {
    font-size: var(--text-lg);
    color: rgb(var(--text-primary) / 0.7);
    margin-bottom: var(--spacing-6);
}

.tabbed-collections__tabs {
    display: flex;
    gap: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
}

.tabbed-collections__tab-btn {
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--rounded-button);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--text-primary) / 0.6);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.tabbed-collections__tab-btn[aria-selected="true"] {
    color: rgb(var(--text-primary));
    border-color: rgb(var(--border-color));
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.tabbed-collections__tab-btn:hover {
    color: rgb(var(--text-primary));
}

.tabbed-collections__panel {
    display: none;
}

.tabbed-collections__panel.is-active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* mobile-menu-toggle and header__link-list responsive rules moved to Site Header section */

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.cart-drawer,
.search-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    visibility: hidden;
}

.cart-drawer.is-open,
.search-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: #fff;
    box-shadow: var(--shadow-block);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

.cart-drawer.is-open .cart-drawer__panel {
    transform: translateX(0);
}

.cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgb(var(--accent) / 0.4);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.cart-drawer.is-open .cart-drawer__overlay {
    opacity: 1;
}

.hidden {
    display: none !important;
}

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid rgb(var(--border-color));
}

.cart-drawer__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0;
}

.cart-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: rgb(var(--text-primary));
}

.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
}

.cart-drawer__items {
    display: flex;
    flex-direction: column;
}

.cart-drawer__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid rgb(var(--border-color));
}

.cart-drawer__item-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--rounded-md, 8px);
    flex-shrink: 0;
}

.cart-drawer__item-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 0;
}

.cart-drawer__item-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--text-primary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-drawer__item-price {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
}

.cart-drawer__item-quantity {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-full);
    padding: 2px 8px;
    width: fit-content;
}

.cart-drawer__qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1;
    padding: var(--spacing-1);
    color: rgb(var(--text-primary));
}

.cart-drawer__qty-value {
    font-size: var(--text-sm);
    min-width: 16px;
    text-align: center;
}

.cart-drawer__item-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: rgb(var(--text-primary) / 0.5);
    padding: var(--spacing-1);
}

.cart-drawer__item-remove:hover {
    color: rgb(var(--accent));
}

.cart-drawer__footer {
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid rgb(var(--border-color));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.cart-drawer__subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: var(--text-base);
}

/* ===== Site Header ===== */
.site-header {
    position: relative;
    z-index: 1000;
}

/* ─── Header nav structure ──────────────────────────────────────────── */
.header__main-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex: 1;
}

.mobile-menu-toggle {
    color: rgb(var(--header-text));
}

.header__link-list {
    display: none; /* hidden on mobile by default */
}

@media screen and (min-width: 1000px) {
    .header__link-list {
        display: flex;
        align-items: center;
        gap: 0;
    }
    .mobile-menu-toggle {
        display: none !important;
    }
}

.header__link-list > ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.header__link-list > ul > li {
    position: relative;
}

.header__link-list > ul > li > a,
.header__link-list > ul > li > details > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1-5);
    padding: var(--spacing-2) var(--spacing-3-5);
    font-family: var(--text-font-family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--header-text));
    text-decoration: none;
    border-radius: var(--rounded-sm);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.header__link-list > ul > li > a:hover,
.header__link-list > ul > li > details > summary:hover {
    color: rgb(var(--accent) / 0.65);
}

/* Remove browser default marker on summary */
.header__link-list summary::-webkit-details-marker { display: none; }
.header__link-list summary::marker { display: none; }

/* ─── Dropdown menus ─────────────────────────────────────────────────── */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    width: max-content;
    min-width: 220px;
    max-width: min(340px, calc(100vw - 2rem));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded);
    box-shadow: var(--shadow-md);
    z-index: 999;
    padding: var(--spacing-2) 0;
    animation: dropdownIn 0.18s ease;
}

.header__link-list > ul > li:last-child .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

details[open] > summary > .nav-chevron {
    transform: rotate(180deg);
}

/* ─── Nested submenus (shared by the desktop dropdown and mobile drawer) ─ */
.nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-submenu .nav-submenu {
    margin-inline-start: var(--spacing-4);
    border-inline-start: 1px solid rgb(var(--border-color));
}

.nav-submenu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    width: 100%;
    padding: var(--spacing-2-5) var(--spacing-5);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.35;
    color: rgb(var(--text-primary));
    text-align: start;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-submenu__link::-webkit-details-marker { display: none; }

.nav-submenu__link:hover,
.nav-submenu__link:focus-visible {
    background: rgb(var(--accent) / 0.04);
    color: rgb(var(--accent) / 0.7);
}

.nav-submenu__link--all {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nav-submenu__details[open] > .nav-submenu__link {
    font-weight: 600;
    background: rgb(var(--accent) / 0.03);
}

.nav-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
}

.nav-icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 108px;
    padding: 14px 6px 12px;
    border-bottom: 1px solid #eceae8;
    color: #1c1917;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-icon-grid__item img {
    width: 72px;
    height: 56px;
    object-fit: contain;
}

.nav-icon-grid__item:hover,
.nav-icon-grid__item:focus-visible {
    color: rgb(var(--accent) / 0.75);
}

.nav-icon-grid__item--text {
    justify-content: center;
}

.nav-icon-grid__item.is-active span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.afnan-line-nav {
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-2);
}

.afnan-line-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    width: 100%;
    margin: 0 0 var(--spacing-3);
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #eceae8;
    background: transparent;
    color: rgb(var(--text-primary));
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.afnan-line-nav__toggle::-webkit-details-marker { display: none; }
.afnan-line-nav__toggle::marker { content: ''; }

.afnan-line-nav__label--hide { display: none; }

.afnan-line-nav[open] > .afnan-line-nav__toggle .afnan-line-nav__label--show { display: none; }
.afnan-line-nav[open] > .afnan-line-nav__toggle .afnan-line-nav__label--hide { display: inline; }

.afnan-line-nav:not([open]) .nav-icon-grid { display: none; }

@media screen and (max-width: 999px) {

    .mobile-menu-drawer__nav .nav-icon-grid__item {
        display: flex;
        width: auto;
        min-height: 108px;
        padding: 14px 6px 12px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1.25;
        text-transform: uppercase;
    }
}

@media screen and (min-width: 1000px) {
    .dropdown-menu:has(.nav-submenu__details--icons[open]) {
        width: min(920px, calc(100vw - 2rem));
        max-width: min(920px, calc(100vw - 2rem));
    }

    .nav-icon-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .dropdown-menu .nav-icon-grid {
        padding: 4px 12px 8px;
        border-top: 1px solid #eceae8;
    }
}

/* ─── Toast notifications ────────────────────────────────────────────── */
.avero-toast {
    position: fixed;
    bottom: var(--spacing-6);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgb(var(--accent));
    color: #fff;
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--rounded-button);
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.avero-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.avero-toast--error {
    background: rgb(248 58 58);
}

/* ===== Utility Classes ===== */
.tap-area {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.relative {
    position: relative;
}

.contents {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wrap {
    flex-wrap: wrap;
}

.group {
    position: relative;
}

.group-hover\:colors:hover .circle-chevron,
.group:hover .circle-chevron {
    color: rgb(var(--accent) / 0.7);
}

/* ===== Responsive Utilities ===== */
@media screen and (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }
}

/* ===== Spacing Utilities ===== */
.gap-2\.5 { gap: var(--spacing-2-5); }

/* ===== Border Utilities ===== */
.border {
    border: 1px solid rgb(var(--border-color));
}

/* ===== Bleed Utilities ===== */
.bleed {
    margin-left: calc(-1 * var(--section-inner-spacing-inline));
    margin-right: calc(-1 * var(--section-inner-spacing-inline));
}

/* ===== Typography Utilities ===== */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    letter-spacing: var(--heading-letter-spacing);
    line-height: 1.2;
}

.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); }
.h4 { font-size: var(--text-h4); }
.h5 { font-size: var(--text-h5); }
.h6 { font-size: var(--text-h6); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }

.prose p, .prose {
    font-size: var(--text-base);
    line-height: 1.7;
    color: rgb(var(--text-primary) / 0.8);
}

.prose p + p {
    margin-top: var(--spacing-4);
}

/* ===== Link Utilities ===== */
.link-faded {
    color: rgb(var(--text-primary) / 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-faded:hover {
    color: rgb(var(--text-primary));
}

/* ===== Money / Price ===== */
.money {
    font-weight: 600;
    font-size: var(--text-sm);
    color: rgb(var(--text-primary));
}

.money.text-subdued {
    color: rgb(var(--text-primary) / 0.5);
    font-size: var(--text-xs);
    font-weight: 500;
}

.money.text-on-sale {
    color: rgb(var(--on-sale-text));
    font-size: 1rem;
    font-weight: 700;
}

/* ===== Count Bubble ===== */
.count-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--rounded-full);
    background: rgb(var(--accent));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

/* ===== Quick Add Form ===== */
.product-card__quick-add-form {
    width: 100%;
}

.product-card__quick-add-form .button {
    width: 100%;
    justify-content: center;
}

/* ===== Footer Layout ===== */
.footer__aside {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.footer__aside-bottom {
    padding-top: var(--spacing-6);
}

/* ===== Animated Arrows ===== */
.animated-arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
}

.animated-arrow--reverse {
    display: inline-flex;
    transform: rotate(180deg);
}

.circle-button:hover:not(:disabled) .animated-arrow {
    transform: translateX(3px);
}

.circle-button:hover:not(:disabled) .animated-arrow--reverse {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .circle-chevron,
[dir="rtl"] .animated-arrow:not(.animated-arrow--reverse) {
    transform: scaleX(-1);
}

[dir="rtl"] .circle-button:hover:not(:disabled) .animated-arrow:not(.animated-arrow--reverse) {
    transform: scaleX(-1) translateX(3px);
}

/* ===== Section Header Custom Element ===== */
section-header {
    display: block;
}

section-header.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

/* ===== Footer Block Base ===== */
.footer__block {
    display: flex;
    flex-direction: column;
}

/* ===== Cart Drawer Additional ===== */
.cart-drawer__panel {
    overflow-y: auto;
}

.cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12) var(--spacing-6);
    text-align: center;
    gap: var(--spacing-4);
}

.cart-drawer__empty p {
    color: rgb(var(--text-primary) / 0.6);
    font-size: var(--text-base);
}

/* ===== Search Drawer ===== */
.search-drawer__panel {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-6);
    overflow: hidden;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.search-drawer.is-open .search-drawer__panel {
    transform: translateY(0);
}

.search-drawer__input-wrapper {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin: 56px auto 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.search-drawer__panel:has(.search-suggest__list:not([hidden])) > p {
    display: none;
}

.search-drawer__input {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-button);
    font-family: inherit;
    font-size: var(--text-lg);
    background: transparent;
    color: inherit;
    outline: none;
}

.search-drawer__input:focus {
    border-color: rgb(var(--accent));
}

.search-drawer__close {
    position: absolute;
    top: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--text-primary));
    transition: background 0.2s ease;
}

.search-drawer__close:hover {
    background: rgb(var(--accent) / 0.04);
}

.search-suggest {
    position: relative;
}

.search-suggest--wide {
    width: 100%;
}

.search-drawer .search-suggest--wide {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-suggest__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: min(360px, 88vw);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    box-shadow: var(--shadow-block);
    max-height: min(360px, calc(100dvh - 160px));
    overflow: auto;
    overscroll-behavior: contain;
}

.search-drawer .search-suggest__list:not([hidden]) {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    max-height: calc(100dvh - 170px);
    margin-top: 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.search-suggest__item a,
.search-suggest__item button,
.search-suggest__all {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: var(--rounded-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.search-suggest__item.is-active a,
.search-suggest__item a:hover,
.search-suggest__item.is-active button,
.search-suggest__item button:hover,
.search-suggest__all.is-active,
.search-suggest__all:hover {
    background: rgb(var(--accent) / 0.06);
}

.search-suggest__thumb {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    object-fit: cover;
    flex: 0 0 44px;
    border-radius: 4px;
    background: rgb(var(--text-primary) / 0.04);
}

.search-suggest__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.search-suggest__name {
    font-size: var(--text-sm);
    line-height: 1.3;
}

.search-suggest__mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
}

.search-suggest__meta {
    font-size: var(--text-xs, 0.75rem);
    color: rgb(var(--text-primary) / 0.6);
}

.search-suggest__sold-out {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgb(var(--sold-out-badge-background));
    color: rgb(var(--sold-out-badge-text));
    border: 1px solid rgb(220 38 38 / 0.28);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-suggest__empty,
.search-suggest__all {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
}

.search-suggest__empty {
    padding: 10px 8px;
}

/* ===== Mobile Menu Drawer ===== */
.mobile-menu-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    visibility: hidden;
}

.mobile-menu-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.mobile-menu-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgb(var(--accent) / 0.4);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mobile-menu-drawer.is-open .mobile-menu-drawer__overlay {
    opacity: 1;
}

.mobile-menu-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: #fff;
    box-shadow: var(--shadow-block);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-menu-drawer.is-open .mobile-menu-drawer__panel {
    transform: translateX(0);
}

.mobile-menu-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid rgb(var(--border-color));
}

.mobile-menu-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--text-primary));
}

.mobile-menu-drawer__nav {
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.mobile-menu-drawer__nav a,
.mobile-menu-drawer__nav summary {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--text-base);
    font-weight: 600;
    color: rgb(var(--text-primary));
    text-decoration: none;
    border-radius: var(--rounded-sm);
    transition: background 0.2s ease;
}

.mobile-menu-drawer__nav a:hover,
.mobile-menu-drawer__nav summary:hover {
    background: rgb(var(--accent) / 0.04);
}

[dir="rtl"] .mobile-menu-drawer__panel {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

[dir="rtl"] .mobile-menu-drawer.is-open .mobile-menu-drawer__panel {
    transform: translateX(0);
}

/* ─── Mobile drawer submenus (tap an item to reveal its children) ────── */
.mobile-nav-details > summary {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-3);
    cursor: pointer;
    list-style: none;
}

.mobile-nav-details > summary::-webkit-details-marker { display: none; }

.mobile-nav-details[open] > summary {
    background: rgb(var(--accent) / 0.04);
}

.mobile-nav-sub {
    padding: var(--spacing-1) 0 var(--spacing-2);
    padding-inline-start: var(--spacing-3);
}

.mobile-menu-drawer__nav .nav-submenu__link {
    display: flex;
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgb(var(--text-primary) / 0.8);
    border-radius: var(--rounded-sm);
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-drawer__nav .nav-submenu__link--all,
.mobile-menu-drawer__nav .nav-submenu__details[open] > .nav-submenu__link {
    font-weight: 600;
    color: rgb(var(--text-primary));
}

.mobile-menu-drawer__nav .nav-submenu .nav-submenu {
    margin-inline-start: var(--spacing-3);
}

/* ===== Page Titles ===== */
.page-title {
    padding: var(--spacing-12) 0 var(--spacing-8);
    text-align: center;
}

.page-title h1 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h2);
    letter-spacing: var(--heading-letter-spacing);
    margin-bottom: var(--spacing-3);
}

.page-title p {
    font-size: var(--text-lg);
    color: rgb(var(--text-primary) / 0.7);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== About Page ===== */
.about-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-gutter) var(--spacing-16);
}

.about-content p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: rgb(var(--text-primary) / 0.8);
    margin-bottom: var(--spacing-6);
}

.rich-content h3 {
    font-family: var(--heading-font-family);
    font-size: 1.15rem;
    margin: 1.75rem 0 .6rem;
}

.rich-content p { margin-bottom: 1rem; }
.rich-content a { color: rgb(var(--brand-gold)); }
.rich-content ul { margin: 0 0 1rem 1.2rem; }
.rich-content li { margin-bottom: .35rem; line-height: 1.7; }

.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
    border: 1px solid rgb(var(--border-color));
    border-radius: 4px;
    padding: .9rem 1rem;
}
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: .75rem 0 0; }

.sitemap-page { max-width: 960px; }
.sitemap-section { margin-bottom: 2rem; }
.sitemap-section h2 {
    font-family: var(--heading-font-family);
    font-size: 1.2rem;
    margin-bottom: .75rem;
}
.sitemap-section ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sitemap-section a { color: rgb(var(--text-primary)); }
.sitemap-section a:hover { color: rgb(var(--brand-gold)); }
.sitemap-empty { opacity: .7; }
@media (max-width: 700px) {
    .sitemap-section ul { grid-template-columns: 1fr; }
}

.branch-directory {
    margin-top: var(--spacing-12);
}

.branch-directory h2 {
    font-family: var(--heading-font-family);
    font-size: var(--text-h4);
    margin-bottom: var(--spacing-5);
}

.branch-directory__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

.branch-card {
    border: 1px solid rgb(var(--border-color));
    border-radius: 8px;
    padding: var(--spacing-5);
}

.branch-card h3 {
    font-family: var(--heading-font-family);
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-1);
}

.branch-card p {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
}

.branch-card__city {
    color: rgb(var(--text-primary) / 0.65);
}

.branch-card__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-4);
}

.branch-card__contacts a {
    color: rgb(var(--accent));
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== Contact Page ===== */
.contact-form-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--container-gutter) var(--spacing-16);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.contact-form[hidden] {
    display: none;
}

.contact-form .search-suggest {
    width: 100%;
}

.track-search__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
}

.track-picked {
    display: flex;
    align-items: center;
    gap: 12px;
}

.track-picked img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    background: rgb(var(--text-primary) / 0.04);
}

.track-picked__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.track-picked__price {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.6);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-group label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--text-primary));
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    font-family: inherit;
    font-size: var(--text-base);
    background: transparent;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: rgb(var(--accent));
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.alert {
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--rounded);
    font-size: var(--text-sm);
    font-weight: 500;
}

.alert--success {
    background: rgb(var(--text-primary) / 0.05);
    color: rgb(var(--text-primary));
    border: 1px solid rgb(var(--text-primary) / 0.1);
}

.alert--error {
    background: rgb(248 58 58 / 0.05);
    color: rgb(248 58 58);
    border: 1px solid rgb(248 58 58 / 0.2);
}

/* ===== Product Show (PDP) ===== */
.product-show {
    padding-bottom: var(--spacing-16);
}

.product-show__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

@media screen and (min-width: 1000px) {
    .product-show__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-12);
    }
}

.product-show__gallery {
    position: relative;
}

.product-show__sale-badge {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    z-index: 2;
}

.product-show__main-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #f5f5f5;
    border-radius: var(--rounded);
    padding: var(--spacing-6);
    touch-action: pan-y;
}

.product-show__thumbnails {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.product-show__thumbnails::-webkit-scrollbar {
    display: none;
}

.product-show__thumbnail {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    scroll-snap-align: start;
    border-radius: var(--rounded-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
    background: #f5f5f5;
    padding: var(--spacing-1);
}

.product-show__thumbnail.is-active {
    border-color: rgb(var(--accent));
}

.product-show__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-show__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.product-show__title {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h3);
    letter-spacing: var(--heading-letter-spacing);
}

.product-show__taxonomy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-top: calc(var(--spacing-5) * -0.55);
}

.product-show__taxonomy-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-2);
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgb(var(--text-primary) / 0.62);
}

.product-show__taxonomy-label {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--text-primary) / 0.48);
}

.product-show__taxonomy-items {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.45rem;
}

.product-show__taxonomy-sep {
    color: rgb(var(--text-primary) / 0.35);
}

.product-show__taxonomy-link {
    color: rgb(var(--text-primary) / 0.72);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.product-show__taxonomy-link:hover {
    color: rgb(var(--text-primary));
    border-bottom-color: rgb(var(--text-primary) / 0.35);
}

.product-show__price-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.product-show__price {
    font-size: var(--text-xl);
    font-weight: 700;
}

.product-show__price--sale {
    color: rgb(var(--on-sale-text));
}

.product-show__price--original {
    font-size: var(--text-base);
    color: rgb(var(--text-primary) / 0.5);
    text-decoration: line-through;
}

.product-show__description {
    font-size: var(--text-base);
    line-height: 1.7;
    color: rgb(var(--text-primary) / 0.8);
}

.product-show__notes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.product-show__notes-title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.product-show__notes-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.product-show__note-tag {
    display: inline-flex;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--rounded-full);
    background: rgb(var(--accent) / 0.05);
    font-size: var(--text-xs);
    font-weight: 500;
    color: rgb(var(--text-primary) / 0.7);
}

.product-show__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

.product-show__quantity {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.product-show__quantity-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgb(var(--border-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 600;
    color: rgb(var(--text-primary));
    transition: all 0.2s ease;
}

.product-show__quantity-btn:hover {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.product-show__quantity-input {
    width: 60px;
    text-align: center;
    padding: var(--spacing-2);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    font-family: inherit;
    font-size: var(--text-base);
}

/* ===== Product Listing ===== */
.product-listing {
    padding-bottom: var(--spacing-16);
}

.product-listing__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-6) 0;
    flex-wrap: wrap;
}

.product-listing__header form {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.product-listing__title {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h3);
    letter-spacing: var(--heading-letter-spacing);
}

.product-listing__search,
.product-listing__sort {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    font-family: inherit;
    font-size: var(--text-base);
    background: transparent;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.product-listing__search {
    width: min(260px, 35vw);
}

.product-listing__search::placeholder {
    color: rgb(var(--text-primary) / 0.5);
}

.product-listing__search:focus,
.product-listing__sort:focus {
    border-color: rgb(var(--accent));
}

.product-listing__sort {
    cursor: pointer;
}

.product-listing__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gutter);
}

@media screen and (min-width: 700px) {
    .product-listing__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1000px) {
    .product-listing__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-listing__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-12);
    max-width: 100%;
}

.product-listing__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-3);
    border-radius: var(--rounded-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--text-primary));
    text-decoration: none;
    border: 1px solid rgb(var(--border-color));
    transition: all 0.2s ease;
}

.product-listing__page-btn.is-active,
.product-listing__page-btn:hover {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.product-listing__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Catalog Filters ===== */
.product-listing__header form.product-listing__controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.product-listing__controls .product-listing__sort {
    max-width: 200px;
    text-overflow: ellipsis;
}

@media screen and (max-width: 699px) {
    .product-listing__header form.product-listing__controls {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .product-listing__controls .search-suggest,
    .product-listing__controls .product-listing__search {
        grid-column: 1 / -1;
        width: 100%;
    }

    .product-listing__controls .product-listing__sort {
        max-width: none;
        width: 100%;
    }
}

.catalog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
}

.catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid rgb(var(--border-color));
    border-radius: 999px;
    font-size: var(--text-sm);
    color: rgb(var(--text-primary));
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.catalog-chip:hover {
    border-color: rgb(var(--accent));
}

.catalog-chip--clear {
    border-color: transparent;
    text-decoration: underline;
}

/* ===== Cart Page ===== */
.cart-page {
    padding: var(--spacing-12) 0 var(--spacing-16);
}

.cart-page__heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    border-bottom: 1px solid rgb(var(--border-color));
}

.cart-page__heading h1 {
    font-family: var(--heading-font-family);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1;
}

.cart-page__heading sup {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgb(var(--text-primary));
    color: #fff;
    font-family: var(--text-font-family);
    font-size: .7rem;
    vertical-align: top;
}

.cart-page__continue { font-size: var(--text-sm); text-decoration: underline; }
.offer-progress__labels { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .68rem; opacity: .68; }
.aiod-progress-bar-widget { border-radius: 0; background: transparent; padding: 0 0 var(--spacing-6); border-bottom: 1px solid rgb(var(--border-color)); }
.aiod-progress-bar-widget .offer-progress__track { height: 5px; background: rgb(var(--brand-green-soft)); }

.cart-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-6);
    text-align: center;
    gap: var(--spacing-6);
}

.cart-page__empty h2 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    gap: var(--spacing-4);
    padding: var(--spacing-7);
    border: 1px solid rgb(var(--brand-dark-green) / .16);
    border-radius: var(--rounded-lg);
    background: linear-gradient(145deg, #fff 0%, rgb(var(--brand-green-soft) / .2) 100%);
    box-shadow: var(--shadow-sm);
    color: rgb(var(--text-primary) / 0.7);
    max-width: 400px;
}
.checkout-page__summary-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid rgb(var(--border-color));
}

.checkout-page__summary-heading h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h4);
}

.checkout-page__summary-heading span {
    color: rgb(var(--text-primary) / .58);
    font-size: var(--text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cart-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--spacing-8);
}

@media screen and (max-width: 999px) {
    .cart-page__grid {
        grid-template-columns: 1fr;
    }
}

.cart-page__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    display: grid;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-sm);
    padding: var(--spacing-2);
}

.checkout-page__summary-product {
    min-width: 0;
}

.checkout-page__summary-product p {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-page__summary-product span {
    color: rgb(var(--text-primary) / .58);
    font-size: var(--text-xs);
}

.checkout-page__amount {
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.checkout-page__coupon-form {
    display: flex;
    gap: var(--spacing-2);
    margin: var(--spacing-2) 0;
}

.checkout-page__coupon-form input {
    min-width: 0;
    flex: 1;
}

.checkout-page__coupon-form .button {
    flex: 0 0 auto;
    padding-inline: var(--spacing-5);
}

.checkout-page__discounts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    color: #1f6a3d;
    font-size: var(--text-xs);
}

.checkout-page__discount-row,
.checkout-page__summary-row,
.checkout-page__summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-4);
}

.checkout-page__summary-row {
    color: rgb(var(--text-primary) / .72);
    font-size: var(--text-sm);
}

.checkout-page__summary-total {
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-4);
    border-top: 1px solid rgb(var(--brand-dark-green) / .22);
    color: rgb(var(--text-primary));
    font-size: var(--text-lg);
    font-weight: 700;
    align-items: center;
}

@media screen and (max-width: 499px) {
    .checkout-page__summary {
        padding: var(--spacing-5);
    }

    .checkout-page__summary-item {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .checkout-page__summary-item img {
        width: 48px;
        height: 48px;
    }
    .cart-item__image {
        width: 80px;
        height: 100px;
    }
}

.cart-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
}

.cart-item + .cart-item {
    border-top: 1px solid rgb(var(--border-color));
}

.cart-item__image {
    width: 116px;
    height: 140px;
    object-fit: contain;
    background: #f5f5f5;
    border-radius: var(--rounded-sm);
    padding: var(--spacing-2);
}

.cart-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.cart-item__name {
    font-weight: 600;
    font-size: var(--text-sm);
}

.cart-item__price {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
}

.cart-item__quantity {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.cart-item__quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgb(var(--border-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    transition: all 0.2s ease;
}

.cart-item__quantity-btn:hover {
    background: rgb(var(--accent));
    color: #fff;
    border-color: rgb(var(--accent));
}

.cart-item__quantity-value {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-sm);
}

.cart-item__remove {
    font-size: 1.4rem;
    color: rgb(var(--text-primary) / 0.5);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.cart-item__remove:hover {
    color: rgb(var(--on-sale-text));
}

.cart-item__subtotal {
    font-weight: 700;
    font-size: var(--text-sm);
    text-align: right;
}

@media screen and (max-width: 699px) {
    .cart-item {
        gap: var(--spacing-3);
        padding: var(--spacing-3);
    }

    .cart-item__subtotal {
        text-align: end;
    }
}

.cart-page__summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6) 0;
    border-top: 1px solid rgb(var(--border-color));
    height: fit-content;
    position: sticky;
    top: calc(var(--announcement-bar-height) + var(--header-height) + var(--spacing-4));
}

.cart-page__summary h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h4);
}

.cart-page__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
}

.cart-page__summary-row--total {
    font-size: var(--text-base);
    font-weight: 700;
    color: rgb(var(--text-primary));
    padding-top: var(--spacing-3);
    border-top: 1px solid rgb(var(--border-color));
}

.cart-page__summary .button--primary { min-height: 3.75rem; }

/* ===== Checkout Page ===== */
.checkout-page {
    padding: var(--spacing-10) 0 var(--spacing-16);
}

.checkout-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

@media screen and (min-width: 1000px) {
    .checkout-page {
        --checkout-summary-bg: rgb(var(--brand-green-soft) / .6);
        padding: 0;
        background: linear-gradient(to right, transparent 50%, var(--checkout-summary-bg) 50%);
    }

    [dir="rtl"] .checkout-page {
        background: linear-gradient(to left, transparent 50%, var(--checkout-summary-bg) 50%);
    }

    .checkout-page > .container > .alert,
    .checkout-page > .container > form {
        width: 50%;
        margin-top: var(--spacing-6);
        padding-inline-end: var(--spacing-12);
        box-sizing: border-box;
    }

    .checkout-page__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        min-height: 100%;
    }

    .checkout-page__grid > .checkout-page__form {
        padding: var(--spacing-10) var(--spacing-12) var(--spacing-16) 0;
    }

    .checkout-page__grid > .checkout-page__summary {
        position: sticky;
        top: 0;
        align-self: start;
        padding: var(--spacing-10) 0 var(--spacing-16) var(--spacing-12);
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    [dir="rtl"] .checkout-page__grid > .checkout-page__form {
        padding: var(--spacing-10) 0 var(--spacing-16) var(--spacing-12);
    }

    [dir="rtl"] .checkout-page__grid > .checkout-page__summary {
        padding: var(--spacing-10) var(--spacing-12) var(--spacing-16) 0;
    }

    .checkout-page__summary .checkout-page__summary-item img,
    .checkout-page__summary .checkout-page__coupon-form input {
        background: #fff;
    }
}

.checkout-page__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    min-width: 0;
    max-width: 100%;
}

.checkout-section-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgb(var(--border-color)); padding-bottom: var(--spacing-3); }
.checkout-section-heading h3 { border: 0; padding: 0; }
.checkout-section-heading a, .checkout-secure-note { font-size: var(--text-xs); text-decoration: underline; opacity: .75; }
.checkout-checkbox { display: flex; align-items: center; gap: .45rem; font-size: var(--text-xs); }
.checkout-checkbox input { width: auto; }
.checkout-page__section .form-group label span { opacity: .6; font-weight: 400; }
.checkout-shipping-method { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid rgb(var(--brand-dark-green)); border-radius: var(--rounded-sm); font-size: var(--text-sm); }
.checkout-page__muted { font-size: var(--text-xs); color: rgb(var(--text-primary) / .65); }
.checkout-payment-options { display: flex; flex-direction: column; border: 1px solid rgb(var(--border-color)); border-radius: var(--rounded-sm); overflow: hidden; }
.checkout-payment-option { display: flex; align-items: center; gap: .75rem; min-height: 4.4rem; padding: .8rem 1rem; border-bottom: 1px solid rgb(var(--border-color)); cursor: pointer; }
.checkout-payment-option[hidden],
.checkout-page__discounts[hidden],
.checkout-page__summary-row[hidden],
#checkout-delivery-estimate[hidden],
#checkout-pricing-errors[hidden] { display: none; }
.checkout-payment-option:last-child { border-bottom: 0; }
.checkout-payment-option:has(input:checked) { background: rgb(var(--brand-green-soft) / .45); box-shadow: inset 0 0 0 1px rgb(var(--brand-dark-green)); }
.checkout-payment-option input { flex: 0 0 auto; width: auto; accent-color: rgb(var(--brand-dark-green)); }
.checkout-payment-option span { display: flex; flex: 1; flex-direction: column; gap: .2rem; font-size: var(--text-sm); }
.checkout-payment-option small { font-size: var(--text-xs); opacity: .65; }
.payment-badge { min-width: 2.5rem; padding: .25rem .4rem; border: 1px solid #d7dbe3; border-radius: 3px; color: #173ea5; background: #fff; font-size: .65rem; text-align: center; }
.payment-badge--cod { color: rgb(var(--brand-dark-green)); }
.payment-badge--dark { color: #111; }
.payment-badge--google { color: #4285f4; }
.checkout-page__payment-note { font-size: var(--text-xs); color: rgb(var(--text-primary) / .65); }

.checkout-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.checkout-page__section h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid rgb(var(--border-color));
}

.checkout-phone {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-3);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.checkout-phone__picker {
    position: relative;
    flex: 0 0 6.75rem;
    width: 6.75rem;
    max-width: 42%;
    min-width: 0;
}

.checkout-phone__picker-button,
.checkout-phone__menu button {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    color: inherit;
    font-size: var(--text-base);
    line-height: 1;
    direction: ltr;
}

.checkout-phone__picker-button span,
.checkout-phone__menu button span {
    direction: ltr;
    unicode-bidi: isolate;
}

.checkout-phone__picker-button {
    justify-content: center;
    min-height: 100%;
    padding: var(--spacing-3) var(--spacing-3);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    background: transparent;
}

.checkout-phone__flag {
    width: 20px;
    height: 14px;
    max-width: none;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, .15);
    flex: none;
}

.checkout-phone__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + .35rem);
    inset-inline-start: 0;
    width: 8.5rem;
    max-height: 16rem;
    overflow: auto;
    padding: .25rem;
    background: #fff;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded-input);
    box-shadow: 0 10px 28px rgba(17, 17, 17, .14);
}

.checkout-phone__menu button {
    padding: .45rem .5rem;
    border-radius: .4rem;
    text-align: start;
}

.checkout-phone__menu button:hover,
.checkout-phone__menu button[aria-selected="true"] {
    background: rgba(17, 17, 17, .06);
}

.checkout-phone__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.checkout-phone__number {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.checkout-page__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

@media screen and (max-width: 699px) {
    .checkout-page__row {
        grid-template-columns: 1fr;
    }
}

.checkout-page__summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded);
    height: fit-content;
}

.checkout-page__summary h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h4);
}

.checkout-page__summary-item {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
    font-size: var(--text-sm);
}

.checkout-page__summary-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #f5f5f5;
    border-radius: var(--rounded-sm);
    padding: var(--spacing-2);
    box-sizing: border-box;
    background: rgb(var(--brand-green-soft) / .25);
}

.checkout-page__summary-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-base);
    font-weight: 700;
    padding-top: var(--spacing-3);
    border-top: 1px solid rgb(var(--border-color));
}

/* ===== Success Page ===== */
.success-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-6);
    text-align: center;
    gap: var(--spacing-6);
    min-height: 60vh;
}

.success-page__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgb(var(--text-primary) / 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--text-primary));
}

.success-page h1 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h2);
}

.success-page p {
    color: rgb(var(--text-primary) / 0.7);
    max-width: 500px;
    font-size: var(--text-lg);
}

/* ===== Search Page ===== */
.search-page {
    padding-bottom: var(--spacing-16);
}

.search-page__header {
    padding: var(--spacing-6) 0;
}

.search-page__header h1 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h3);
}

.search-page__results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gutter);
}

@media screen and (min-width: 700px) {
    .search-page__results {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1000px) {
    .search-page__results {
        grid-template-columns: repeat(4, 1fr);
    }
}

.search-page__empty {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    color: rgb(var(--text-primary) / 0.7);
}

/* ===== Store Locator ===== */
.store-locator {
    padding-bottom: var(--spacing-16);
}

.store-locator__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-gutter);
}

@media screen and (min-width: 1000px) {
    .store-locator__content {
        grid-template-columns: 1fr 1fr;
    }
}

.store-locator__map {
    aspect-ratio: 4 / 3;
    background: #f5f5f5;
    border-radius: var(--rounded);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--text-primary) / 0.5);
    font-size: var(--text-base);
}

.store-locator__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.store-locator__info--full {
    width: 100%;
}

.store-locator__store {
    padding: var(--spacing-5);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded);
}

.store-locator__store h3 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h4);
    margin-bottom: var(--spacing-2);
}

.store-locator__store p {
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.7);
    line-height: 1.7;
}

/* ===== Toast Notifications ===== */
.toast-container {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    background: rgb(var(--accent));
    color: #fff;
    border-radius: var(--rounded);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    max-width: 400px;
}

.toast--success {
    background: rgb(34 197 94);
}

.toast--error {
    background: rgb(248 58 58);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ===== Accordion ===== */
.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.accordion__item {
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--rounded);
    overflow: hidden;
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgb(var(--text-primary));
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
}

.accordion__trigger:hover {
    background: rgb(var(--accent) / 0.02);
}

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

.accordion__icon {
    transition: transform 0.2s ease;
}

.accordion__panel {
    display: none;
    padding: 0 var(--spacing-5) var(--spacing-5);
    font-size: var(--text-sm);
    color: rgb(var(--text-primary) / 0.8);
    line-height: 1.7;
}

.accordion__panel.is-open {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* ===== Hero Banner ===== */
.hero-banner {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f7f7;
}

.hero-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-banner__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    padding: var(--spacing-8);
}

.hero-banner__content h1 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: var(--text-h1);
    letter-spacing: var(--heading-letter-spacing);
    margin-bottom: var(--spacing-4);
    line-height: 1.1;
}

.hero-banner__content p {
    font-size: var(--text-lg);
    color: rgb(var(--text-primary) / 0.7);
    margin-bottom: var(--spacing-6);
}

/* ===== Cookie Consent ===== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    background: rgb(var(--accent));
    color: #fff;
    padding: var(--spacing-4) var(--spacing-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-consent.is-visible {
    transform: translateY(0);
}

.cookie-consent p {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.cookie-consent__actions {
    display: flex;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

.cookie-consent__actions button {
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--rounded-button);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.2s ease;
}

.cookie-consent__accept {
    background: #fff;
    color: rgb(var(--accent));
}

.cookie-consent__decline {
    background: transparent;
    color: #fff;
    border: 1px solid rgb(255 255 255 / 0.3);
}

.cookie-consent__accept:hover {
    opacity: 0.9;
}

.cookie-consent__decline:hover {
    background: rgb(255 255 255 / 0.1);
}

/* ===== Image Placeholder ===== */
.img-placeholder {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--text-primary) / 0.3);
    font-size: var(--text-sm);
}