/* =========================================================
   Presentations by Patti — style.css
   Women's boutique. Warm, luxury, clean. Desktop-first base.
   Rules: px only (no rem), no margin (flex + padding + gap),
   H1–H6 sizes defined once via variables.
   ========================================================= */

/* ---------- ROOT VARIABLES ---------- */
:root {
    /* Colors — warm, premium, age-neutral */
    --color-text: rgb(43, 34, 31);          /* espresso */
    --color-muted: rgba(43, 34, 31, 0.62);
    --color-page-bg: #ffffff;
    --color-cream: rgb(251, 248, 244);      /* warm ivory */
    --color-blush: rgb(244, 235, 230);      /* soft blush */
    --color-card-bg: rgb(247, 243, 238);
    --color-white: #ffffff;

    --color-brand: rgb(140, 96, 88);        /* rosewood / mauve */
    --color-brand-dark: rgb(112, 74, 68);
    --color-gold: rgb(176, 141, 87);        /* brushed brass */
    --color-sale: rgb(158, 86, 86);         /* deep rose */
    --color-stock: rgb(96, 128, 80);        /* in-stock green */

    /* Logo accent — eucalyptus / sage green from the brand mark */
    --color-sage: rgb(116, 144, 133);       /* eucalyptus sage (logo leaves) */
    --color-sage-dark: rgb(92, 118, 108);   /* deeper sage for text/hover */

    --color-announcement-bg: rgb(140, 96, 88);
    --color-announcement-text: #ffffff;

    --color-badge-bestseller: rgb(176, 141, 87);   /* brushed brass */
    --color-badge-new: rgb(43, 34, 31);            /* espresso */
    --color-badge-sale: rgb(158, 86, 86);

    --color-cta-bg: rgb(43, 34, 31);
    --color-star: rgb(176, 141, 87);        /* gold stars */

    --color-border: rgba(43, 34, 31, 0.10);
    --color-border-strong: rgba(43, 34, 31, 0.20);

    /* Typography — families */
    --font-body: "Instrument Sans", sans-serif;
    --font-heading: "Cormorant Garamond", Georgia, serif;

    /* Body text scale (10px – 20px) — defined once */
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-body: var(--fs-16);

    /* Heading scale H1–H6 — each defined exactly once */
    --fs-h1: 68px;
    --fs-h2: 44px;
    --fs-h3: 34px;
    --fs-h4: 26px;
    --fs-h5: 19px;
    --fs-h6: 15px;

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Line heights */
    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-base: 1.6;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-0: 0px;
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-60: 60px;
    --space-80: 80px;
    --space-90: 90px;

    /* Layout */
    --container-width: 1620px;
    --gutter: 24px;
    --container-pad: 50px;
    --section-pad: 80px;

    /* Text transform */
    --tt-upper: uppercase;
    --tt-none: none;

    /* Effects */
    --shadow-card: 0 14px 34px rgba(43, 34, 31, 0.12);
    --shadow-soft: 0 8px 24px rgba(43, 34, 31, 0.08);
    --transition: 0.3s ease;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-page-bg);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;          /* clip full-bleed 100vw elements without breaking position: sticky */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; font-size: var(--fs-14); color: inherit; }

/* ---------- HEADINGS (sizes referenced only from H1–H6 vars) ---------- */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: 0.2px;
}

/* ---------- LAYOUT HELPERS ---------- */
.announcement-bar,
.header,
.header__nav,
main,
.footer,
.hero,
.trust,
.lifestyle,
.affiliate,
.newsletter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    display: flex;
    flex-direction: column;
    align-self: center;
}

.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section--cream { background: var(--color-cream); }

/* ---------- SECTION PADDING (top + bottom split into separate classes) ----------
   Each section has one class for its top padding and one for its bottom padding.
   Remove a class from the element in index.html to drop that side's padding. */
.hero-pt        { padding-top: var(--space-40); }
.hero-pb        { padding-bottom: var(--space-0); }
.trust-pt       { padding-top: var(--space-40); }
.trust-pb       { padding-bottom: var(--space-80); }
.bestsellers-pt { padding-top: var(--space-0); }
.bestsellers-pb { padding-bottom: var(--space-80); }
.collections-pt { padding-top: var(--space-0); }
.collections-pb { padding-bottom: var(--space-40); }
.lifestyle-pt   { padding-top: var(--space-40); }
.lifestyle-pb   { padding-bottom: var(--space-80); }
.affiliate-pt   { padding-top: var(--space-80); }
.affiliate-pb   { padding-bottom: var(--space-80); }
.arrivals-pt    { padding-top: var(--space-40); }
.arrivals-pb    { padding-bottom: var(--space-80); }
.reviews-pt     { padding-top: var(--space-80); }
.reviews-pb     { padding-bottom: var(--space-80); }
.stats-pt       { padding-top: var(--space-60); }
.stats-pb       { padding-bottom: var(--space-60); }
.feel-pt        { padding-top: var(--space-0); }
.feel-pb        { padding-bottom: var(--space-80); }
.gallery-pt     { padding-top: var(--space-80); }
.gallery-pb     { padding-bottom: var(--space-80); }
.newsletter-pt  { padding-top: var(--space-0); }
.newsletter-pb  { padding-bottom: var(--space-80); }

.section__head {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-24);
    padding-bottom: var(--space-40);
}
.section__head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-12);
}
.section__head-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
.section__title { font-size: var(--fs-h2); max-width: 640px; }

.eyebrow {
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: 2px;
    text-transform: var(--tt-upper);
    color: var(--color-brand);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.8); }

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: 14px 28px;
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
}
.btn--sm { padding: 10px 18px; font-size: var(--fs-13); }
.btn--lg { padding: 18px 32px; font-size: var(--fs-16); }
.btn--block { width: 100%; }

.btn--primary {
    background: var(--color-cta-bg);
    color: var(--color-white);
    border-color: var(--color-cta-bg);
}
.btn--primary:hover { background: var(--color-brand); border-color: var(--color-brand); }
/* On the rosewood announcement bar, the default rosewood hover would blend in —
   invert to a white button with brand text instead. */
.announcement-bar__cta:hover {
    background: var(--color-white);
    color: var(--color-brand);
    border-color: var(--color-white);
}

.btn--outline {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn--outline:hover { background: var(--color-text); color: var(--color-white); border-color: var(--color-text); }

.btn--white {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-white);
}
.btn--white:hover { background: rgba(255, 255, 255, 0.85); }

.btn--white-outline {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.7);
}
.btn--white-outline:hover { background: var(--color-white); color: var(--color-text); }

.link-arrow {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid currentColor;
    padding-bottom: var(--space-4);
    transition: var(--transition);
    align-self: flex-start;
}
.link-arrow:hover { gap: var(--space-12); }
.link-arrow--light { color: var(--color-white); }

/* ---------- STARS ---------- */
.stars {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-star);
    font-size: var(--fs-16);
}
.stars--sm { font-size: var(--fs-13); }
/* Fractional rating: gold fill layer clipped to --rating over the outline base */
.stars--rating { position: relative; display: inline-flex; }
.stars--rating .stars__base,
.stars--rating .stars__fill {
    display: inline-flex;
    flex-direction: row;
    gap: var(--space-2);
}
.stars--rating .stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--rating, 100%);
    overflow: hidden;
    white-space: nowrap;
}
.reviews__score {
    color: var(--color-muted);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    padding-left: var(--space-8);
}

/* ---------- SOCIAL LIST ---------- */
.social-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    font-size: var(--fs-16);
}
.social-list a { transition: var(--transition); opacity: 0.9; }
.social-list a:hover { opacity: 1; }
.social-list--dark { font-size: var(--fs-18); color: var(--color-text); }

/* ---------- COUNTDOWN ---------- */
.countdown {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    font-variant-numeric: tabular-nums;
}
.countdown strong { font-weight: var(--fw-bold); }
.countdown--card {
    color: var(--color-sale);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
}
.countdown--card i { font-size: var(--fs-14); }

/* =========================================================
   1. ANNOUNCEMENT BAR
   ========================================================= */
.announcement-bar {
    background: var(--color-announcement-bg);
    color: var(--color-announcement-text);
    font-size: var(--fs-13);
}
.announcement-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}
.announcement-bar__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    letter-spacing: 0.3px;
}
.announcement-bar__message .countdown { opacity: 0.95; }
.announcement-bar__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
}
.announcement-bar__country {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    color: inherit;
    font-size: var(--fs-13);
}

/* =========================================================
   2. HEADER + MEGA MENU
   ========================================================= */
/* Merged header: a single sticky bar holding logo · nav · icon actions. */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-page-bg);
    box-shadow: var(--shadow-soft);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.header__bar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-32);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}
.header__hamburger {
    font-size: var(--fs-20);
    display: none;          /* shown on mobile */
}
/* Brand mark medallion — brushed-brass ring echoing the logo's wreath,
   sized to sit neatly within the single-row bar. */
.header__logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, var(--color-cream) 70%, var(--color-blush) 100%);
    box-shadow:
        inset 0 0 0 1.5px var(--color-gold),   /* thin brass ring */
        inset 0 0 0 4px rgba(255, 255, 255, 0.65); /* white gap → double-ring */
    transition: transform var(--transition), box-shadow var(--transition);
}
.header__logo:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1.5px var(--color-gold),
        inset 0 0 0 4px rgba(255, 255, 255, 0.8);
}
.header__logo img { height: 58px; width: auto; display: block; }

/* Nav fills the space between logo and icons; links centered.
   The right icon cluster (~192px) is wider than the logo (76px), which would
   pull the centered links left — offset by the difference to true-center them. */
.header__nav {
    flex: 1;
    display: flex;
    flex-direction: row;      /* override the column set by the layout-helper rule */
    align-items: center;
    justify-content: center;
    padding-left: 116px;   /* right cluster (192px) − logo (76px) */
}
/* Icon-only actions (search, account, wishlist, cart) */
.header__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    flex-shrink: 0;
}
.header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--color-text);
    transition: var(--transition);
}
.header__action:hover {
    background: var(--color-cream);
    color: var(--color-brand);
}
.header__action i { font-size: var(--fs-20); }
/* Count badge (wishlist / cart) */
.header__action-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-sale);
    color: var(--color-white);
    font-size: var(--fs-10);
    font-weight: var(--fw-bold);
    line-height: 1;
}
/* Scrolled past the top: collapse to just the nav strip (desktop only).
   The logo + icons hide, leaving the centered nav links pinned at the top. */
@media (min-width: 769px) {
    .header.is-condensed .header__logo,
    .header.is-condensed .header__right { display: none; }
    .header.is-condensed .header__bar {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }
    /* Logo + icons are hidden now, so drop the balancing offset and truly center */
    .header.is-condensed .header__nav { padding-left: 0; }
}
.header__nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
}
.header__nav-links > li > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}
/* Hover + focus share one clean treatment: underline only, no gray box */
.header__nav-links > li > a:not(.btn):hover,
.header__nav-links > li > a:not(.btn):focus,
.header__nav-links > li > a:not(.btn):focus-visible {
    background: transparent;
    border-bottom-color: var(--color-text);
    outline: none;
}
/* Dropdown caret on the mega-menu trigger ("Shop all") */
.header__nav-links > li > a:not(.btn) > i {
    font-size: var(--fs-12);
    color: var(--color-text);
    transition: transform var(--transition);
}
.has-mega:hover > a > i,
.has-mega:focus-within > a > i {
    transform: rotate(180deg);
}
.nav-sale { color: var(--color-sale); font-weight: var(--fw-semibold); }

/* Mega menu */
.has-mega { position: static; }
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-page-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: row;
    gap: var(--space-40);
    padding: var(--space-40) max(var(--container-pad), calc((100% - var(--container-width)) / 2 + var(--container-pad)));
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition);
    z-index: 90;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Simple dropdown (e.g. About) */
.has-dropdown { position: relative; }
.nav-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-16);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition);
    z-index: 90;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown > li > a {
    display: block;
    padding: var(--space-12) var(--space-12);
    border-radius: var(--radius-sm);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    transition: var(--transition);
}
.nav-dropdown > li > a:hover,
.nav-dropdown > li > a:focus-visible {
    background: var(--color-cream);
    color: var(--color-brand);
    outline: none;
}
/* Column holds one or more stacked groups */
.mega__col { display: flex; flex-direction: column; gap: var(--space-32); min-width: 150px; }
.mega__group { display: flex; flex-direction: column; gap: var(--space-12); }
.mega__heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--font-body);
    font-size: var(--fs-15);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}
.mega__col ul { display: flex; flex-direction: column; gap: var(--space-12); }
.mega__col a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-14);
    color: var(--color-muted);
    transition: var(--transition);
}
.mega__col a:hover { color: var(--color-text); }

/* Inline badges next to an item or heading */
.mega__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--fs-10);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    border-radius: var(--radius-pill);
}
.mega__badge--new { background: var(--color-blush); color: var(--color-brand); }
.mega__badge--soft { background: rgba(96, 128, 80, 0.14); color: var(--color-stock); }

/* Feature card (far right) */
.mega__feature {
    margin-left: auto;
    flex: 0 0 320px;
    align-self: stretch;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-24);
    background-image: linear-gradient(to top, rgba(43,34,31,0.6) 0%, rgba(43,34,31,0) 55%), var(--mega-img);
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}
.mega__feature-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-white);
}
.mega__feature-label { font-family: var(--font-heading); font-size: var(--fs-h4); }

/* =========================================================
   3. HERO (single clean banner)
   ========================================================= */
.hero { color: var(--color-white); }
.hero__eyebrow {
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: 2px;
    text-transform: var(--tt-upper);
    color: rgba(255, 255, 255, 0.85);
}
.hero__wrap {
    /* vertical padding via .hero-pt / .hero-pb */
}
.hero__viewport {
    position: relative;
    width: 100%;
    min-height: 620px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* Slides */
.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;          /* content anchored to the top-left */
    background-image:
        linear-gradient(to bottom right, rgba(43,34,31,0.42) 0%, rgba(43,34,31,0.10) 45%, rgba(43,34,31,0) 70%),
        var(--hero-img);
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

/* Bottom-left variant — content anchored to the bottom, gradient darkens bottom-left */
.hero__slide--bottom {
    align-items: flex-end;
    background-image:
        linear-gradient(to top right, rgba(43,34,31,0.62) 0%, rgba(43,34,31,0.18) 50%, rgba(43,34,31,0.02) 80%),
        var(--hero-img);
}
.hero__slide--bottom .hero__content {
    padding-top: var(--space-60);
    padding-bottom: var(--space-80);
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-60);
    padding-top: var(--space-80);
    max-width: 780px;
}
.hero__title { font-size: var(--fs-h1); color: var(--color-white); max-width: 720px; }
.hero__sub { font-size: var(--fs-18); max-width: 460px; opacity: 0.94; }
.hero__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
}

/* Carousel controls — bottom centre */
.hero__carousel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-24);
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
}
.hero__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-18);
    cursor: pointer;
    transition: var(--transition);
}
.hero__nav:hover { background: rgba(255, 255, 255, 0.18); color: var(--color-white); }
.hero__dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
}
.hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.5); }
.hero__dot.is-active { background: var(--color-white); border-color: var(--color-white); }

/* =========================================================
   4. TRUST BADGES
   ========================================================= */
.trust {
    background: transparent;
}
.trust__grid {
    flex-direction: row;
    align-items: stretch;
    gap: var(--gutter);
    /* vertical padding via .trust-pt / .trust-pb */
}
.trust__item {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}
.trust__item + .trust__item { border-left: none; }
.trust__item i { font-size: 28px; color: var(--color-sage); }
.trust__title { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-bold); }
.trust__desc { font-size: var(--fs-12); color: var(--color-muted); }

/* =========================================================
   5. SHOP BY COLLECTION
   ========================================================= */
/* Left-aligned head with a highlighted word in the title */
.collections__head {
    align-items: flex-start;
    justify-content: flex-start;
}
.hl {
    /* hand-drawn marker-highlight blob — sage green theme tint */
    color: inherit;
    background: rgba(116, 144, 133, 0.30);   /* eucalyptus sage (logo green) */
    padding: 0.08em 0.5em;
    /* organic, slightly irregular rounded ends like a highlighter swash */
    border-radius: 0.9em 0.5em 0.8em 0.55em / 1.4em 1.1em 1.3em 1.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;   /* keeps the shape even across line wraps */
}

/* Horizontal carousel of collection cards (4 in view) */
.collection-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.collection-grid::-webkit-scrollbar { display: none; }
.collection-grid > .collection-card {
    flex: 0 0 calc((100% - (var(--gutter) * 4)) / 5);
    scroll-snap-align: start;
}

.collection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 460px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-card-bg);
    color: var(--color-text);
    transition: transform var(--transition);
}
.collection-card:hover { transform: translateY(-4px); }
.collection-card__media {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.collection-card__body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;          /* arrow aligns with the heading line, not the card centre */
    justify-content: space-between;
    gap: var(--space-16);
    padding: var(--space-24);
    background: var(--color-cream);
}
.collection-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
/* Title always on a single line */
.collection-card__title {
    font-size: var(--fs-20);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Description clamped to two lines */
.collection-card__desc {
    font-size: var(--fs-13);
    color: var(--color-brand);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.collection-card__arrow { font-size: var(--fs-18); line-height: 1.3; color: var(--color-text); flex-shrink: 0; }
.collection-card:hover .collection-card__arrow { transform: translateX(4px); }

/* Overlay variant — caption sits over the image (first card) */
.collection-card--overlay .collection-card__media { position: absolute; inset: 0; }
.collection-card--overlay .collection-card__body {
    position: relative;
    margin-top: auto;
    padding-top: var(--space-60);
    background: linear-gradient(to top, rgba(43,34,31,0.7) 0%, rgba(43,34,31,0) 100%);
    color: var(--color-white);
}
.collection-card--overlay .collection-card__desc { color: rgba(255, 255, 255, 0.85); }
.collection-card--overlay .collection-card__arrow { color: var(--color-white); }

/* =========================================================
   5b. MARQUEE STRIP — auto-scrolling words + thumbnails
   ========================================================= */
.marquee {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
    display: flex;
    align-items: center;
    gap: var(--space-40);
    padding-right: var(--space-40);   /* keep spacing even across the seam */
    flex-shrink: 0;
}
.marquee__word {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    letter-spacing: 1px;
    text-transform: var(--tt-upper);
    white-space: nowrap;
    color: var(--color-text);
}
.marquee__thumb {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    background-image: var(--m-img);
    background-size: cover;
    background-position: center;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* =========================================================
   6. LIFESTYLE CTA
   ========================================================= */
.lifestyle__split {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 600px;
    border-radius: 20px;
    overflow: hidden;
}
.lifestyle__panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-80) var(--space-60);
    background: var(--color-cream);
}
.lifestyle__icon {
    font-size: 26px;
    color: var(--color-sage);
}
.lifestyle__eyebrow {
    color: var(--color-muted);
    letter-spacing: 1px;
    text-transform: var(--tt-none);
    font-weight: var(--fw-medium);
}
.lifestyle__title { font-size: var(--fs-h2); color: var(--color-text); max-width: 520px; }
.lifestyle__sub { max-width: 460px; font-size: var(--fs-16); color: var(--color-muted); }
.lifestyle__btn { margin-top: var(--space-8); }
.lifestyle__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-12); }
.lifestyle__actions .lifestyle__btn { margin-top: 0; }

/* Contact form inside the split panel */
.panel-form {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    padding-top: var(--space-8);
}
.panel-form__row {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--space-12);
}
.panel-form__row .panel-form__field { flex: 1 1 50%; }
.panel-form__field {
    width: 100%;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-15);
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition);
}
.panel-form__field::placeholder { color: var(--color-muted); }
.panel-form__field:focus { outline: none; border-color: var(--color-sage-dark); }
.panel-form__field--area { resize: vertical; min-height: 44px; height: 44px; }
.panel-form__note {
    font-size: var(--fs-14);
    color: var(--color-text);
    text-align: center;
    padding-top: var(--space-4);
}
.panel-form__fineprint {
    font-size: var(--fs-12);
    color: var(--color-muted);
    text-align: center;
}
.panel-form__fineprint a { text-decoration: underline; }
.panel-form__submit {
    margin-top: var(--space-4);
    padding: 14px 40px;
    color: var(--color-white);
    background: var(--color-sage);
    border-color: var(--color-sage);
}
.panel-form__submit:hover { background: var(--color-sage-dark); border-color: var(--color-sage-dark); }

.lifestyle__media {
    flex: 1 1 50%;
    background-image: var(--life-img);
    background-size: cover;
    background-position: center;
}
/* When an <img> is used instead of the background variable, fill the panel */
.lifestyle__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   6b. HOME FEEL BANNER (full-bleed image w/ overlaid copy)
   ========================================================= */
.feel__banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;        /* copy anchored to the bottom */
    width: 100%;                      /* full-screen, edge-to-edge */
    min-height: 650px;
    overflow: hidden;
    /* Image placeholder — change --feel-img in index.html to swap. */
    background-image:
        linear-gradient(to right, rgba(43,34,31,0.58) 0%, rgba(43,34,31,0.38) 32%, rgba(43,34,31,0.12) 52%, rgba(43,34,31,0) 66%),
        var(--feel-img);
    background-size: cover;
    background-position: center;
    background-color: var(--color-card-bg);   /* fallback while image loads/missing */
}
/* .container keeps the copy aligned to the site's max-width; image stays full-bleed */
.feel__inner {
    padding-bottom: var(--space-60);
}
.feel__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    max-width: 860px;
    color: var(--color-white);
}
.feel__title { font-size: var(--fs-h1); color: var(--color-white); line-height: var(--lh-tight); }
.feel__sub { font-size: var(--fs-18); max-width: 620px; opacity: 0.94; }
.feel__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    padding-top: var(--space-8);
}

/* =========================================================
   7. AFFILIATE CALLOUT
   ========================================================= */
.affiliate {
    background: var(--color-brand);
    color: var(--color-white);
}
.affiliate__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
    /* vertical padding via .affiliate-pt / .affiliate-pb */
}
.affiliate__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-16);
    max-width: 760px;
}
.affiliate__title { font-size: var(--fs-h2); color: var(--color-white); }
.affiliate__sub { font-size: var(--fs-16); opacity: 0.92; }
.affiliate__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-24);
    padding-top: var(--space-8);
}
.affiliate__actions .link-arrow--light { color: var(--color-white); }
.affiliate__actions .link-arrow--light:hover { color: rgba(255, 255, 255, 0.82); }
/* Perks: compact, content-sized cards centered in the band */
.affiliate__perks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16);
}
.affiliate__perks li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
}
.affiliate__perks i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: var(--fs-14);
}

/* =========================================================
   8. NEW ARRIVALS — product cards + wishlist
   ========================================================= */
.product-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
}
/* Carousel variant: horizontal scroll track (4 cards in view) */
.product-grid--carousel {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;            /* Firefox */
}
.product-grid--carousel::-webkit-scrollbar { display: none; }
.product-grid--carousel > .product-card {
    flex: 0 0 calc((100% - (var(--gutter) * 3)) / 4);
    scroll-snap-align: start;
}
/* Bestsellers track shows 5 cards in view (desktop only; below this it
   follows the same responsive card counts as the other carousels) */
@media (min-width: 1025px) {
    #bestsellersTrack.product-grid--carousel > .product-card {
        flex: 0 0 calc((100% - (var(--gutter) * 4)) / 5);
    }
}

/* Swipeable on mobile: stays a normal grid on desktop, becomes an
   edge-to-edge horizontal swipe track on small screens (next card peeks).
   Used on the PDP "You may also like" grid. */
@media (max-width: 768px) {
    .product-grid--swipe {
        display: flex;
        grid-template-columns: none;
        height: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--gutter);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;                 /* Firefox */
        /* Bleed to the section edges so a card can peek past the padding */
        margin-left: calc(var(--container-pad) * -1);
        margin-right: calc(var(--container-pad) * -1);
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
        scroll-padding-left: var(--container-pad);
    }
    .product-grid--swipe::-webkit-scrollbar { display: none; }
    .product-grid--swipe > .product-card {
        flex: 0 0 72%;                         /* ~1.3 cards in view → next peeks */
        scroll-snap-align: start;
    }
}
@media (max-width: 480px) {
    .product-grid--swipe > .product-card { flex-basis: 80%; }
}

/* Hidden by the bestsellers category filter */
.product-card.is-hidden { display: none; }
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-page-bg);
    border-radius: 0;
    overflow: hidden;
    transition: transform var(--transition);
}
.product-card:hover { transform: translateY(-4px); }
.product-card__media {
    position: relative;
    background: var(--color-card-bg);
    aspect-ratio: 3 / 4;
    flex-shrink: 0;        /* never let the image squish to fit body text — keeps all card images identical */
    border-radius: var(--radius-lg);   /* rounded corners */
    overflow: hidden;
}
.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__badges {
    position: absolute;
    top: var(--space-16);          /* clear the media's rounded corner (14px) */
    right: var(--space-16);
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;         /* right-align the stack — no staircase */
    gap: var(--space-8);
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: var(--fs-11);
    font-weight: var(--fw-bold);
    text-transform: var(--tt-upper);
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
}
.badge--bestseller { background: var(--color-badge-bestseller); color: var(--color-white); }
.badge--new { background: var(--color-badge-new); color: var(--color-white); }
.badge--sale { background: var(--color-badge-sale); color: var(--color-white); }

/* Wishlist heart */
.wishlist {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    font-size: var(--fs-18);
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}
.wishlist:hover { background: var(--color-white); transform: scale(1.06); }
.wishlist.is-active { color: var(--color-sale); }
.wishlist.is-active i { font-weight: 700; }

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-16) 0 0;  /* keep top gap; text aligns to card edges */
    flex: 1;                       /* fill card height so CTA can bottom-align */
}
/* Push the "Add to bag" CTA to the bottom so it aligns across all cards */
.product-card__body .btn { margin-top: auto; }
.product-card__brand {
    font-size: var(--fs-12);
    color: var(--color-muted);
    text-transform: var(--tt-upper);
    letter-spacing: 0.5px;
}
.product-card__name {
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    white-space: nowrap;        /* keep every product name on a single line */
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-card__price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
}
.price-sale { color: var(--color-sale); }
.price-was { color: var(--color-muted); font-weight: var(--fw-regular); font-size: var(--fs-14); }

/* =========================================================
   4b. BESTSELLERS (layout per reference)
   ========================================================= */
.bestsellers__head {
    align-items: flex-end;
}
/* Filter pills (top-right of the head) */
.bestsellers__tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    flex-shrink: 0;
}
.tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
    background: transparent;
    transition: var(--transition);
}
.tab:hover { border-color: var(--color-text); }
.tab.is-active {
    background: var(--color-cta-bg);
    border-color: var(--color-cta-bg);
    color: var(--color-white);
}

/* Badges are top-right by default now; this modifier is kept for back-compat
   and simply matches the base position. */
.product-card__badges--right {
    left: auto;
    right: var(--space-16);
    align-items: flex-end;
}

/* "Select options" button — revealed on hover, centered at media bottom */
.product-card__options {
    position: absolute;
    left: 50%;
    bottom: var(--space-16);
    transform: translate(-50%, 8px);
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    background: var(--color-cta-bg);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.product-card__options:hover { background: var(--color-brand); }
.product-card:hover .product-card__options {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Price superscript cents */
.product-card__price sup {
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    vertical-align: super;
}

/* In-stock status with green dot */
.stock {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-13);
    color: var(--color-muted);
}
.stock i { font-size: var(--fs-10); color: var(--color-stock); }

/* Exclusive badge (dark) */
.badge--exclusive { background: var(--color-cta-bg); color: var(--color-white); }

/* Centered "View all" footer */
.bestsellers__foot {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: var(--space-40);
}

/* Carousel controls: progress track + prev/next buttons */
.slider-controls {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-40);
    padding-top: var(--space-40);
}
.slider-progress {
    flex: 1;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.slider-progress__bar {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--color-text);
    border-radius: var(--radius-pill);
}
.slider-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    flex-shrink: 0;
}
.slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: var(--fs-18);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}
/* The clickable button (direction still available): dark outline + dark icon,
   transparent fill. It only fills in on hover. */
.slider-btn--active {
    background: transparent;
    border-color: var(--color-text);
    color: var(--color-text);
}
/* Hover (only the clickable button ever reaches this): fill with dark espresso */
.slider-btn:hover {
    background: var(--color-cta-bg);
    border-color: var(--color-cta-bg);
    color: var(--color-white);
}
/* At the start/end of the track the button is inactive — muted, no hover fill */
.slider-btn:disabled {
    color: var(--color-muted);
    border-color: var(--color-border);
    cursor: default;
}
.slider-btn:disabled:hover {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-muted);
}

/* =========================================================
   9. REVIEWS
   ========================================================= */
.reviews__head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-12);
    padding-bottom: var(--space-40);
}
.reviews__rating {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
}
.reviews__rating .stars { color: var(--color-sage-dark); }
.reviews__rating .reviews__score { padding-left: 0; }
.reviews__sub {
    max-width: 620px;
    font-size: var(--fs-16);
    color: var(--color-muted);
    line-height: var(--lh-base);
}
.reviews__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: var(--gutter);
}
.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    transition: transform var(--transition);
}
.review-card:hover { transform: translateY(-4px); }
.review-card .stars { color: var(--color-sage-dark); }
.review-card__title { font-family: var(--font-heading); font-size: var(--fs-h4); }
.review-card__text { font-size: var(--fs-14); color: var(--color-muted); line-height: var(--lh-base); }
.review-card__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    margin-top: auto;
    padding-top: var(--space-12);
}
.avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); object-fit: cover; }
.review-card__author > div { display: flex; flex-direction: column; }
.review-card__name { font-size: var(--fs-14); font-weight: var(--fw-bold); }
.verified {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-12);
    color: var(--color-sage-dark);
}
.reviews__cta {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: var(--space-40);
}

/* =========================================================
   9b. STATS
   ========================================================= */
.stats__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
}
.stat__value {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-brand);
}
.stat__label {
    font-size: var(--fs-16);
    color: var(--color-text);
}

/* =========================================================
   10. GALLERY
   ========================================================= */
.gallery__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-12);
}
.gallery__item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-image: var(--g-img);
    background-size: cover;
    background-position: center;
    transition: transform var(--transition);
}
.gallery__item:hover { transform: scale(1.03); }
.gallery__tag {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--color-white);
    background: rgba(43, 34, 31, 0);
    opacity: 0;
    transition: var(--transition);
}
.gallery__item:hover .gallery__tag { opacity: 1; background: rgba(43, 34, 31, 0.35); }

/* =========================================================
   11. NEWSLETTER (footer block)
   ========================================================= */
.newsletter {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    padding-top: var(--space-0);
    padding-bottom: var(--space-80);
}
.newsletter__inner {
    width: 100%;
    /* Match the container's *content* width (container-width includes its
       horizontal padding), so this block lines up with every other section. */
    max-width: calc(var(--container-width) - var(--container-pad) * 2);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.newsletter__media {
    flex: 1;
    min-height: 560px;
    background-image: var(--news-img);
    background-size: cover;
    background-position: center;
}
.newsletter__panel {
    flex: 1;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    /* vertical padding via .newsletter-pt / .newsletter-pb */
    padding-left: var(--space-60);
    padding-right: var(--space-60);
}
.newsletter__panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
    max-width: 760px;
}
.newsletter__icon {
    font-size: 32px;
    color: var(--color-sage-dark);
    line-height: 1;
}
.newsletter__title {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}
.newsletter__sub { color: var(--color-muted); font-size: var(--fs-18); }
.newsletter__form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    padding-left: var(--space-16);
}
.newsletter__form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 0;
    font-size: var(--fs-16);
}
.newsletter__form .btn { border-radius: var(--radius-sm); font-size: var(--fs-15); }
.footer__form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    padding-left: var(--space-16);
}
.footer__form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 8px 0;
}
.footer__form .btn { border-radius: var(--radius-sm); }
.popup__form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-8);
}
.popup__form input {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: 13px 20px;
    outline: none;
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.footer { background: var(--color-cream); border-top: 1px solid var(--color-border); }
.footer__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-60);
    padding-top: var(--space-80);
    padding-bottom: var(--space-60);
}
.footer__col { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); }
.footer__col--brand { flex: 1.5; }
.footer__logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #ffffff 0%, var(--color-cream) 70%, var(--color-blush) 100%);
    box-shadow:
        inset 0 0 0 1.5px var(--color-gold),
        inset 0 0 0 4px rgba(255, 255, 255, 0.65);
    transition: transform var(--transition), box-shadow var(--transition);
}
.footer__logo:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1.5px var(--color-gold),
        inset 0 0 0 4px rgba(255, 255, 255, 0.8);
}
.footer__logo img { height: 58px; width: auto; display: block; }
.footer__tagline { font-size: var(--fs-14); color: var(--color-muted); max-width: 300px; }
.footer__heading {
    font-family: var(--font-body);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    text-transform: var(--tt-none);
    letter-spacing: 0;
}
.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    font-size: var(--fs-14);
    color: var(--color-muted);
}
.footer__links a { transition: var(--transition); }
.footer__links a:hover { color: var(--color-text); }
.footer__text { font-size: var(--fs-14); color: var(--color-muted); }
.footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding-top: var(--space-24);
    padding-bottom: var(--space-32);
    border-top: 1px solid var(--color-border);
}
.payment-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-16);
    font-size: var(--fs-12);
    color: var(--color-muted);
}
.payment-list li { display: inline-flex; flex-direction: row; align-items: center; }
.payment-list img { height: 26px; width: auto; display: block; }
.payment-list i { font-size: var(--fs-18); }
.footer__country {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-14);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    transition: var(--transition);
}
.footer__country:hover { border-color: var(--color-text); }
.footer__copy { font-size: var(--fs-12); color: var(--color-muted); }

/* =========================================================
   NEWSLETTER POP-UP
   ========================================================= */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: rgba(43, 34, 31, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition);
}
.popup-overlay.is-open { opacity: 1; visibility: visible; }
.popup {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 760px;
    background: var(--color-page-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transform: translateY(12px);
    transition: transform var(--transition);
}
.popup-overlay.is-open .popup { transform: translateY(0); }
.popup__close {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-18);
    z-index: 2;
}
.popup__media {
    flex: 1;
    min-height: 420px;
    background-image: var(--popup-img);
    background-size: cover;
    background-position: center;
}
.popup__body {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-40);
    justify-content: center;
}
.popup__title { font-size: var(--fs-h3); }
.popup__sub { font-size: var(--fs-14); color: var(--color-muted); }
.popup__form { flex-direction: column; align-items: stretch; }
.popup__form input {
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: 13px 20px;
    outline: none;
}
.popup__dismiss {
    font-size: var(--fs-12);
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: center;
}

/* =========================================================
   GALLERY LIGHTBOX — full-screen image pop-up
   ========================================================= */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(43, 34, 31, 0.82);
}
.lightbox__dialog {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 120px;
    max-width: 100%;
    transform: scale(0.96);
    transition: transform var(--transition);
}
.lightbox.is-open .lightbox__dialog { transform: scale(1); }
.lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.lightbox__close {
    position: absolute;
    top: calc(-1 * (44px + var(--space-12)));
    right: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-ink, #2b221f);
    font-size: var(--fs-18);
    z-index: 2;
}
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-ink, #2b221f);
    font-size: var(--fs-18);
    z-index: 2;
}
.lightbox__nav--prev { left: calc(-1 * (48px + var(--space-16))); }
.lightbox__nav--next { right: calc(-1 * (48px + var(--space-16))); }

/* =========================================================
   CART DRAWER — slides in from the right
   ========================================================= */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    pointer-events: none;
}
.cart-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}
.cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 34, 31, 0.45);
    opacity: 0;
    transition: opacity var(--transition);
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    background: var(--color-page-bg);
    box-shadow: var(--shadow-card);
    transform: translateX(100%);
    transition: transform var(--transition);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__close {
    position: absolute;
    top: var(--space-24);
    left: calc(-1 * (48px + var(--space-24)));
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-page-bg);
    box-shadow: var(--shadow-soft);
    font-size: var(--fs-20);
    color: var(--color-text);
    transition: background var(--transition);
}
.cart-drawer__close:hover { background: var(--color-card-bg); }
.cart-drawer__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-40);
    text-align: center;
}
.cart-drawer__title { font-size: var(--fs-h3); }
.cart-drawer__sub { font-size: var(--fs-14); color: var(--color-muted); }
.cart-drawer__suggestions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding-top: var(--space-12);
}
.cart-drawer__suggestions a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-24);
    border-radius: var(--radius-pill);
    background: var(--color-card-bg);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    transition: background var(--transition);
}
.cart-drawer__suggestions a:hover { background: var(--color-blush); }
.cart-drawer__suggestions i { font-size: var(--fs-13); }


/* =========================================================
   SHOP PAGE STYLES (merged from former shop.css)
   ========================================================= */

/* ---------- PAGE HEADER (breadcrumb + title + banner) ---------- */
.shop-hero {
    position: relative;                /* anchor for the full-bleed media */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-cream);
    overflow: hidden;
}
.shop-hero__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 440px;                 /* gives the banner its height */
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
}
.shop-hero__text {
    flex: 0 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-16);
    max-width: 560px;
    padding-right: var(--space-40);
}
.breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-13);
    color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted); transition: var(--transition); }
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb i { font-size: var(--fs-12); }
.shop-hero__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-tight); }
.shop-hero__sub { font-size: var(--fs-16); color: var(--color-muted); line-height: var(--lh-base); }
.shop-hero__media {
    position: absolute;                /* full-bleed to the right edge of the viewport */
    top: 0;
    right: 0;
    bottom: 0;
    width: 48%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------- CATEGORY PILL BAR ---------- */
.shop-pills {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}
.shop-pills__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;   /* left-aligned pills */
    gap: var(--space-12);
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
}
/* Uniform height + soft rounded-rectangle corners (not full capsule) */
.shop-pills .tab {
    line-height: 1;
    white-space: nowrap;
    border-radius: 5px;   /* rounded-rectangle corners */
}

/* ---------- MAIN LAYOUT: SIDEBAR + GRID ---------- */
.shop-section { width: 100%; display: flex; flex-direction: column; align-items: center; }
.shop-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-40);
    padding-top: var(--space-40);
    padding-bottom: var(--space-80);
}

/* ---------- SIDEBAR FILTERS ---------- */
.shop-sidebar {
    flex: 0 0 244px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--space-24);
    align-self: flex-start;                 /* so sticky has room to travel */
    max-height: calc(100vh - 48px);         /* never taller than the viewport... */
    overflow-y: auto;                       /* ...scroll its own overflow instead of getting pinned off-screen */
    scrollbar-width: thin;
    padding-right: var(--space-8);
}
.shop-sidebar::-webkit-scrollbar { width: 6px; }
.shop-sidebar::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); }
.filter-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-border); }
.filter-group__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-align: left;
    width: 100%;
}
.filter-group__head i { font-size: var(--fs-14); transition: transform var(--transition); }
.filter-group.is-collapsed .filter-group__head i { transform: rotate(-180deg); }
.filter-group__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-bottom: var(--space-24);
}
/* extra breathing room under the last checkbox so the divider isn't cramped */
.filter-option:last-child { padding-bottom: var(--space-4); }
.filter-group.is-collapsed .filter-group__body { display: none; }

.filter-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-14);
    color: var(--color-text);
    cursor: pointer;
}
.filter-option input { width: 16px; height: 16px; accent-color: var(--color-brand); cursor: pointer; }
.filter-option__count { color: var(--color-muted); font-size: var(--fs-13); }

/* Price range — draggable dual-handle slider */
.filter-price { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-8); padding-bottom: var(--space-12); }
.price-range {
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
    margin-left: 7px;
    margin-right: 7px;
}
.price-range__base {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
}
.price-range__fill {
    position: absolute;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-pill);
}
/* Two range inputs stacked; native track hidden, only thumbs catch pointer events */
.price-range input[type="range"] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 16px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}
.price-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-page-bg);
    border: 2px solid var(--color-text);
    cursor: grab;
    pointer-events: auto;
}
.price-range input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.price-range input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-page-bg);
    border: 2px solid var(--color-text);
    cursor: grab;
    pointer-events: auto;
}
.price-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.price-range input[type="range"]::-moz-range-track { background: transparent; }
.price-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.filter-price__inputs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
}
.filter-price__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-13);
    color: var(--color-muted);
}
.filter-price__field input {
    width: 100%;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: var(--fs-13);
    color: var(--color-text);
    background: transparent;
}

/* ---------- TOOLBAR (results + sort) ---------- */
.shop-main { flex: 1; display: flex; flex-direction: column; gap: var(--space-32); min-width: 0; }
.shop-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}
.shop-toolbar__count { font-size: var(--fs-13); color: var(--color-muted); }
.shop-toolbar__right { display: flex; flex-direction: row; align-items: center; gap: var(--space-12); }
.view-toggle { display: flex; flex-direction: row; align-items: center; gap: var(--space-8); color: var(--color-muted); }
.view-toggle button { background: transparent; border: none; cursor: pointer; color: var(--color-muted); font-size: var(--fs-18); display: inline-flex; }
.view-toggle button.is-active { color: var(--color-text); }
.shop-sort { display: flex; flex-direction: row; align-items: center; gap: var(--space-8); font-size: var(--fs-13); color: var(--color-muted); }
/* Wrapper so the custom caret sits flush after the selected text */
.shop-sort__control { display: inline-flex; align-items: center; gap: var(--space-4); }
.shop-sort select {
    font-family: var(--font-body);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    /* Hide the native arrow so the select sizes to its content, not its widest option */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
}
.shop-sort__control i { font-size: var(--fs-12); color: var(--color-text); pointer-events: none; }

/* Mobile-only filter drawer chrome — hidden on desktop, shown at <=900px */
.shop-filter-toggle,
.shop-filter-head,
.shop-filter-sort,
.shop-filter-apply,
.shop-filter-backdrop { display: none; }

/* ---------- PRODUCT GRID ---------- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}
.shop-grid .product-card.is-hidden { display: none; }

/* Promo tile inside the grid */
.promo-tile {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    align-self: stretch;           /* fill the full card height — image + the neighbour's text zone */
    min-height: 360px;             /* fallback height if it's the tallest item in its row */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.promo-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(43, 34, 31, 0.7) 0%, rgba(43, 34, 31, 0) 55%);
}
.promo-tile__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-24);
}
.promo-tile__title { font-family: var(--font-heading); font-size: var(--fs-h4); color: var(--color-white); }
.promo-tile__desc { font-size: var(--fs-14); color: rgba(255, 255, 255, 0.85); line-height: var(--lh-snug); }

/* Empty state when a filter matches nothing */
.shop-empty {
    grid-column: 1 / -1;
    padding-top: var(--space-60);
    padding-bottom: var(--space-60);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--fs-16);
    display: none;
}
.shop-empty.is-visible { display: block; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .shop-hero__inner { flex-direction: column-reverse; align-items: flex-start; min-height: 0; gap: var(--space-24); }
    .shop-hero__text { flex: none; max-width: 100%; padding-right: 0; }
    .shop-hero__media { position: static; width: 100%; height: 240px; border-radius: var(--radius-lg); }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .shop-layout { flex-direction: column; }
    .shop-hero__title { font-size: 48px; }

    /* "Filter & Sort" trigger button in the toolbar */
    .shop-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-8);
        padding: 9px 16px;
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-pill);
        background: var(--color-white);
        font-family: var(--font-body);
        font-size: var(--fs-13);
        font-weight: var(--fw-semibold);
        color: var(--color-text);
        cursor: pointer;
    }
    .shop-filter-toggle i { font-size: var(--fs-16); }

    /* Toolbar: button on the left, view toggle on the right; drop the count + inline sort */
    .shop-toolbar { justify-content: space-between; }
    .shop-toolbar__count,
    .shop-toolbar .shop-sort { display: none; }

    /* Sidebar becomes an off-canvas drawer that slides in from the left */
    .shop-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1200;
        width: min(360px, 86vw);
        max-height: 100vh;
        background: var(--color-white);
        padding: var(--space-24);
        overflow-y: auto;
        flex: none;
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: 0 10px 40px rgba(43, 34, 31, 0.22);
    }
    .shop-sidebar.is-open { transform: translateX(0); }

    /* Drawer header */
    .shop-filter-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--space-16);
        margin-bottom: var(--space-8);
        border-bottom: 1px solid var(--color-border);
    }
    .shop-filter-head__title { font-family: var(--font-heading); font-size: var(--fs-h5); }
    .shop-filter-head__close {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: var(--fs-22);
        color: var(--color-text);
        display: inline-flex;
        line-height: 1;
    }

    /* Sort control inside the drawer */
    .shop-filter-sort { display: flex; flex-direction: column; border-bottom: none; }
    .shop-filter-sort__label {
        padding-top: var(--space-16);
        padding-bottom: var(--space-12);
        font-size: var(--fs-15);
        font-weight: var(--fw-semibold);
        color: var(--color-text);
    }
    .shop-filter-sort__control {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
        margin-bottom: var(--space-16);
        padding: 10px 12px;
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sm);
    }
    .shop-filter-sort__control select {
        flex: 1;
        font-family: var(--font-body);
        font-size: var(--fs-14);
        font-weight: var(--fw-semibold);
        color: var(--color-text);
        border: none;
        background: transparent;
        cursor: pointer;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .shop-filter-sort__control i { font-size: var(--fs-12); color: var(--color-text); pointer-events: none; }

    /* Drawer footer */
    .shop-filter-apply {
        display: block;
        width: 100%;
        margin-top: var(--space-16);
        text-align: center;
    }

    /* Dimmed backdrop behind the drawer */
    .shop-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(43, 34, 31, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition);
    }
    .shop-filter-backdrop.is-open { opacity: 1; visibility: visible; }
}
@media (max-width: 560px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .shop-toolbar { flex-wrap: wrap; }
}


/* =========================================================
   RESPONSIVE / MEDIA QUERIES (merged from former responsive.css)
   Kept last so these overrides retain cascade priority.
   ========================================================= */

/* ---------- TABLET ( <= 1024px ) ---------- */
@media (max-width: 1024px) {
    :root {
        --fs-h1: 50px;
        --fs-h2: 34px;
        --fs-h3: 28px;
        --fs-h4: 23px;
        --fs-h5: 18px;
        --fs-h6: 14px;

        --section-pad: 56px;
        --gutter: 18px;
        --container-pad: 32px;
    }

    .header__bar { gap: var(--space-16); }
    .header__nav-links { gap: var(--space-16); font-size: var(--fs-13); }
    .header__logo { width: 70px; height: 70px; }
    .header__logo img { height: 54px; }

    .hero__viewport { min-height: 520px; }
    .hero__content { padding: var(--space-40); padding-bottom: var(--space-60); }

    .feel__banner { min-height: 460px; }
    .feel__inner { padding-bottom: var(--space-40); }

    /* Grids step down (drop the desktop fixed height so cards size to content) */
    .product-grid { grid-template-columns: repeat(2, 1fr); height: auto; }
    .reviews__grid { grid-template-columns: repeat(2, 1fr); }
    /* Carousels: 3 cards in view */
    .product-grid--carousel > .product-card,
    .collection-grid > .collection-card { flex-basis: calc((100% - (var(--gutter) * 2)) / 3); }
    .gallery__grid { grid-template-columns: repeat(3, 1fr); }

    /* Trust badges wrap to 2 rows */
    .trust__grid { flex-wrap: wrap; }
    .trust__item { flex: 0 0 calc(50% - var(--gutter)); }
    .trust__item:nth-child(3) { border-left: none; }

    /* Affiliate stacks */
    .affiliate__inner { flex-direction: column; align-items: flex-start; gap: var(--space-32); }

    /* Mega menu: hide feature image to fit */
    .mega { gap: var(--space-24); }
    .mega__feature { display: none; }

    .newsletter__panel { padding: var(--space-60) var(--space-40); }

    .footer__grid { flex-wrap: wrap; gap: var(--space-40); }
    .footer__col { flex: 0 0 calc(50% - var(--space-40)); }
    .footer__col--brand { flex: 0 0 100%; }
}

/* ---------- MOBILE ( <= 768px ) ---------- */
@media (max-width: 768px) {
    /* Lightbox: keep close + nav controls inside the viewport */
    .lightbox__img { max-width: 94vw; max-height: 80vh; }
    .lightbox__close { top: var(--space-12); right: var(--space-12); }
    .lightbox__nav--prev { left: var(--space-8); }
    .lightbox__nav--next { right: var(--space-8); }

    /* Cart drawer: panel fills the screen, so move the close button inside */
    .cart-drawer__panel { max-width: none; }
    .cart-drawer__close {
        left: auto;
        right: var(--space-16);
        top: var(--space-16);
        box-shadow: none;
    }
    .cart-drawer__body { padding-top: 90px; }

    :root {
        --fs-h1: 38px;
        --fs-h2: 28px;
        --fs-h3: 24px;
        --fs-h4: 21px;
        --fs-h5: 17px;
        --fs-h6: 14px;

        --section-pad: 44px;
        --gutter: 16px;
        --container-pad: 18px;
        --space-80: 48px;
        --space-60: 40px;
    }

    /* ---- Announcement bar: keep message, drop country/social/affiliate CTA ---- */
    .announcement-bar__inner { justify-content: center; gap: var(--space-12); }
    .announcement-bar__country,
    .announcement-bar__cta,
    .announcement-bar__meta .social-list { display: none; }
    .announcement-bar__message { font-size: var(--fs-12); }

    /* ---- Header: hamburger left, logo + icons on the bar, nav collapses below ---- */
    .header__hamburger { display: inline-flex; order: 0; }
    .header__bar { flex-wrap: wrap; gap: var(--space-12); }
    .header__logo { order: 1; width: 64px; height: 64px; }
    .header__logo img { height: 48px; }
    .header__right { order: 2; margin-left: auto; gap: var(--space-4); }

    /* ---- Mobile nav: wraps to a full-width column below the bar, toggled open ---- */
    .header__nav {
        order: 3;
        flex: 0 0 100%;
        display: none;
        justify-content: stretch;
        padding-left: 0;   /* drop the desktop centering offset */
    }
    .header__nav.is-open { display: flex; }
    .header__nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        width: 100%;
        font-size: var(--fs-16);
        padding-top: var(--space-12);
    }
    .header__nav-links > li > a:not(.btn) {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
        border-bottom: 1px solid var(--color-border);
    }
    .header__nav-links--right { padding-top: var(--space-8); }

    /* Mega menu inline (accordion-style, always visible when open) */
    .has-mega { position: relative; }
    .mega {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        flex-direction: column;
        gap: var(--space-16);
        padding: var(--space-12) 0 var(--space-16);
    }

    /* ---- Hero: image on top, content stacked below ---- */
    .hero__viewport { min-height: 0; border-radius: 14px; }
    .hero__slide {
        flex-direction: column;
        align-items: stretch;
        background-image: none;          /* image moves into ::before (above the content) */
    }
    .hero__slide.is-active { position: relative; }   /* active slide sets the stacked height */
    /* Second slide uses a dedicated mobile image */
    .hero__slide--bottom { --hero-img: url('images/Second.webp') !important; }
    .hero__slide::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 4 / 5;
        background-image: var(--hero-img);
        background-size: cover;
        background-position: center;
    }
    .hero__content {
        background: var(--color-text);   /* espresso panel below the image */
        padding: var(--space-32) var(--space-24) 60px;
        max-width: none;
    }
    .hero__sub { font-size: var(--fs-16); color: rgba(255, 255, 255, 0.9); opacity: 1; }
    .hero__actions { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: var(--space-12); }
    .hero__actions .btn { flex: 1; justify-content: center; padding-left: var(--space-12); padding-right: var(--space-12); white-space: nowrap; }
    /* Carousel dots/arrows sit at the bottom of the content panel */
    .hero__carousel { bottom: var(--space-16); }

    /* ---- Home feel banner: image on top, content stacked below ---- */
    .feel__banner {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        background-image: none;          /* image moves into ::before (above the content) */
        background-color: transparent;
        --feel-img: url('images/mobile-banner.webp') !important;   /* dedicated mobile image */
    }
    .feel__banner::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 4 / 5;
        background-image: var(--feel-img);
        background-size: cover;
        background-position: center;
        background-color: var(--color-card-bg);
    }
    /* container wrapper goes edge-to-edge so the espresso panel can be full-width */
    .feel__inner { padding: 0; max-width: none; }
    .feel__content {
        background: var(--color-text);   /* espresso panel below the image */
        padding: var(--space-32) var(--space-24) 40px;
        max-width: none;
    }
    .feel__sub { font-size: var(--fs-16); color: rgba(255, 255, 255, 0.9); opacity: 1; }
    .feel__actions { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: var(--space-12); }
    .feel__actions .btn { flex: 1; justify-content: center; padding-left: var(--space-12); padding-right: var(--space-12); white-space: nowrap; }

    /* ---- Section heads stack ---- */
    .section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-16);
    }

    /* ---- Grids ---- */
    .product-grid,
    .reviews__grid { grid-template-columns: repeat(2, 1fr); }
    .gallery__grid { grid-template-columns: repeat(2, 1fr); }
    /* Carousels: 2 cards in view */
    .product-grid--carousel > .product-card,
    .collection-grid > .collection-card { flex-basis: calc((100% - var(--gutter)) / 2); }
    /* Carousels become swipe-only — hide the progress bar + arrow controls */
    .slider-controls { display: none; }

    /* ---- Trust badges: centered 2×2 grid, icon stacked on top ---- */
    .trust__grid { flex-wrap: wrap; gap: var(--space-32) var(--gutter); }
    .trust__item {
        flex: 0 0 calc(50% - var(--gutter) / 2);
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-8);
        padding-left: 0;
        padding-right: 0;
    }
    .trust__item + .trust__item { border-top: none; padding-top: 0; }

    /* ---- Affiliate actions: keep both buttons on one line ---- */
    .affiliate__actions { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: var(--space-12); }
    .affiliate__actions .btn { flex: 1; justify-content: center; padding-left: var(--space-12); padding-right: var(--space-12); white-space: nowrap; }
    /* Perk cards stack on mobile */
    .affiliate__perks { flex-direction: column; }

    /* ---- Lifestyle split stacks (image on top) ---- */
    .lifestyle__split { flex-direction: column; min-height: 0; }
    .lifestyle__media { order: -1; min-height: 300px; flex-basis: auto; }
    .lifestyle__panel { padding: var(--space-40) var(--gutter); }

    /* ---- Newsletter stacks (image on top, content below) ---- */
    .newsletter__inner { flex-direction: column; }
    .newsletter__media { min-height: 280px; order: -1; }
    .newsletter__panel { padding: var(--space-40) var(--gutter); }

    /* ---- Forms stack ---- */
    .newsletter__form,
    .footer__form { flex-direction: column; align-items: stretch; }
    .newsletter__form .btn,
    .footer__form .btn { width: 100%; }

    /* ---- Footer ---- */
    .footer__col { flex: 0 0 100%; }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-16); }

    /* ---- Pop-up stacks (hide image) ---- */
    .popup { flex-direction: column; max-width: 420px; }
    .popup__media { display: none; }
    .popup__body { padding: var(--space-32) var(--space-24); }
}

/* ---------- SMALL MOBILE ( <= 480px ) ---------- */
@media (max-width: 480px) {
    .product-grid,
    .reviews__grid { grid-template-columns: 1fr; }
    .announcement-bar__message .countdown { display: none; }
    /* Carousels: one full-width card per view (swipe through) */
    .product-grid--carousel > .product-card,
    .collection-grid > .collection-card { flex-basis: 100%; }
}


/* =========================================================
   ABOUT / MEET OUR TEAM PAGE STYLES (merged from former about.css)
   ========================================================= */

/* ---------- PER-SECTION PADDING ----------
   Each about-page section has its own top + bottom padding class so the
   spacing can be tweaked section-by-section. Edit the values below freely. */
.abouthero-pt   { padding-top: 90px; }
.abouthero-pb   { padding-bottom: 80px; }
.patti-pt       { padding-top: 80px; }
.patti-pb       { padding-bottom: 00px; }
.ryan-pt        { padding-top: 00px; }
.ryan-pb        { padding-bottom: 80px; }
.contact-pt     { padding-top: var(--space-00); }
.contact-pb     { padding-bottom: var(--space-80); }
.aboutbanner-pt { padding-top: 0; }
.aboutbanner-pb { padding-bottom: 0; }
.team-pt        { padding-top: 80px; }
.team-pb        { padding-bottom: 80px; }

/* ---------- 1. HERO (centered, with faded wordmark) ---------- */
.about-hero {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: var(--color-cream);
}
.about-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-24);
}
.about-hero__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--color-text);
    white-space: nowrap;
}
.about-hero__title .hl-soft { color: var(--color-sage-dark); }
/* About page accent — sage (#5C766C) on eyebrows + role labels */
.about-hero .eyebrow,
.team .eyebrow { color: var(--color-sage-dark); }
.about-hero__sub {
    font-size: var(--fs-18);
    color: var(--color-muted);
    max-width: 600px;
}

/* ---------- 2. FEATURE ROW (image + text, alternating) ---------- */
.feature-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feature-row__inner {
    width: 100%;
    max-width: var(--container-width);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

/* Overlapping image stack — large, tilted, generously overlapping */
.feature-stack {
    position: relative;
    min-height: 640px;
}
.feature-stack__img {
    position: absolute;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    object-fit: cover;
}
/* Large primary image, anchored right and tilted clockwise */
.feature-stack__img--back {
    top: 0;
    right: 0;
    width: 72%;
    height: 92%;
    z-index: 1;
    transform: rotate(2.5deg);
}
/* Smaller image, vertically centered and overlapping toward the centre */
.feature-stack__img--front {
    top: 50%;
    left: 4%;
    width: 46%;
    height: 62%;
    z-index: 2;
    transform: translateY(-50%) rotate(-4deg);
}

/* Text block beside the stack */
.feature-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    max-width: 520px;
}
.feature-text__role { color: var(--color-sage-dark); }
.feature-text__name { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.feature-text__body { color: var(--color-muted); font-size: var(--fs-16); }
.feature-text__body + .feature-text__body { margin-top: 4px; }
.feature-text__cta { align-self: flex-start; margin-top: var(--space-12); }

/* Mirror variant: text first, image stack on the right (rotations flip too) */
.feature-row--mirror .feature-row__inner { direction: rtl; }
.feature-row--mirror .feature-text,
.feature-row--mirror .feature-stack { direction: ltr; }
.feature-row--mirror .feature-stack__img--back { right: auto; left: 0; transform: rotate(-2.5deg); }
.feature-row--mirror .feature-stack__img--front { left: auto; right: 4%; transform: translateY(-50%) rotate(4deg); }

/* ---------- 4. TEAM GRID ---------- */
.team {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.team__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-24);
    
}
.team-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.team-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.team-card:hover .team-card__media img { transform: scale(1.05); }
.team-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-24);
}
.team-card__role {
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: 1.5px;
    text-transform: var(--tt-upper);
    color: var(--color-sage-dark);
}
.team-card__name { font-size: var(--fs-h5); }
.team-card__bio {
    font-size: var(--fs-14);
    color: var(--color-muted);
    line-height: var(--lh-base);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .about-hero__title { font-size: 52px; }
    .feature-row__inner { gap: 48px; }
    .team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .about-hero__title { font-size: 44px; white-space: normal; }
    .feature-row__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
    .feature-row--mirror .feature-row__inner { direction: ltr; }
    .feature-stack { min-height: 420px; max-width: 460px; }
    .feature-text__name { font-size: 32px; }
    .panel-form__row { flex-direction: column; }
    /* Tighter per-section padding on mobile */
    .abouthero-pt, .patti-pt, .ryan-pt, .team-pt { padding-top: 48px; }
    .abouthero-pb, .patti-pb, .ryan-pb, .team-pb { padding-bottom: 48px; }
}
@media (max-width: 480px) {
    .team__grid { grid-template-columns: 1fr; }
    .feature-stack { min-height: 360px; }
}

/* =========================================================
   CONTENT PAGES — Privacy Policy, FAQ, Contact
   Shared header/footer come from index.html. These blocks
   style the page bodies only. Per-section padding via
   the same -pt / -pb pattern used elsewhere.
   ========================================================= */
.page-pt { padding-top: 70px; }
.page-pb { padding-bottom: 80px; }

/* ---------- Shared page intro (reuses .about-hero accent) ---------- */
.page-hero { background: var(--color-cream); }
.page-hero .eyebrow { color: var(--color-sage-dark); }
.page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--color-text); }
.page-hero__sub { font-size: var(--fs-18); color: var(--color-muted); max-width: 780px; }

/* ---------- 404 / ERROR PAGE ---------- */
/* margin-top/bottom leave a gap so the cream block doesn't touch the header/footer */
.error-page { text-align: center; padding-top: 120px; padding-bottom: 140px; margin-top: 40px; margin-bottom: 40px; }
.error-page__inner { display: flex; flex-direction: column; align-items: center; }
.error-page__code {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: clamp(96px, 22vw, 200px);
    line-height: 1;
    font-weight: 600;
    color: var(--color-sage-dark);
    letter-spacing: 2px;
}
.error-page .page-hero__title { margin-top: 8px; }
.error-page .page-hero__sub { margin-left: auto; margin-right: auto; }
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}
@media (max-width: 700px) {
    .error-page { padding-top: 72px; padding-bottom: 84px; margin-top: 24px; margin-bottom: 24px; }
}

/* ---------- LEGAL / PROSE (Privacy Policy) ---------- */
.legal { background: var(--color-page-bg); }
.legal__wrap {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}
.legal__updated {
    font-size: var(--fs-13);
    color: var(--color-muted);
    letter-spacing: 0.04em;
    text-transform: var(--tt-upper);
}
.legal__block { display: flex; flex-direction: column; gap: var(--space-12); }
.legal__block h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--color-text);
}
.legal__block h3 {
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}
.legal__block p,
.legal__block li { font-size: var(--fs-16); color: var(--color-muted); line-height: var(--lh-base); }
.legal__block a { color: var(--color-sage-dark); text-decoration: underline; }
.legal__block ul { display: flex; flex-direction: column; gap: var(--space-8); padding-left: 22px; }
.legal__block ul li { list-style: disc; }
.legal__divider { height: 1px; background: var(--color-border); border: 0; }

/* ---------- FAQ (accordion via native <details>) ---------- */
.faq { background: var(--color-page-bg); }
.faq__wrap {
    max-width: 792px; /* 760px card + 16px padding each side */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
}
.faq__group { display: flex; flex-direction: column; gap: var(--space-16); }
.faq__group-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    color: var(--color-text);
}
.faq__list { display: flex; flex-direction: column; gap: var(--space-12); }
.faq-item {
    width: 100%;
    max-width: 760px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
}
.faq-item[open] { border-color: var(--color-sage); }
.faq-item__q {
    list-style: none;
    cursor: pointer;
    width: 760px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: var(--space-24);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q i {
    flex: none;
    font-size: 20px;
    color: var(--color-sage-dark);
    transition: transform var(--transition);
}
.faq-item[open] .faq-item__q i { transform: rotate(45deg); }
.faq-item__a {
    padding: 0 var(--space-24) var(--space-24);
    font-size: var(--fs-16);
    color: var(--color-muted);
    line-height: var(--lh-base);
}
.faq-item__a a { color: var(--color-sage-dark); text-decoration: underline; }

/* ---------- CONTACT ---------- */
.contact { background: var(--color-page-bg); }
.contact__inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
}
.contact__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-16);
}
.contact__intro .eyebrow { color: var(--color-sage-dark); }
.contact__panel-title { font-size: var(--fs-h2); color: var(--color-text); line-height: var(--lh-snug); }
.contact__panel-sub { font-size: var(--fs-16); color: var(--color-muted); max-width: 540px; }
.contact__cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-16);
}

/* Simple static info items (icon + label + detail) */
.contact-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-16);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.contact-card__icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-sage-dark);
    font-size: 16px;
}
.contact-item__label {
    font-size: var(--fs-12);
    letter-spacing: 0.06em;
    text-transform: var(--tt-upper);
    color: var(--color-muted);
}
.contact-item__value {
    font-size: var(--fs-15);
    color: #2B221F;
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    white-space: nowrap;
}
.contact-item__value a { color: #2B221F; }
.contact__form-card {
    align-self: center;
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-40);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.contact__form-card .panel-form { max-width: 100%; gap: var(--space-16); }

@media (max-width: 1024px) {
    .page-hero__title { font-size: 52px; }
    .contact__inner { gap: var(--space-32); }
    .contact__cards { flex-wrap: wrap; }
    .contact__cards .contact-acc { flex: 1 1 45%; }
}
@media (max-width: 768px) {
    .page-hero__title { font-size: 40px; }
    .page-pt { padding-top: 48px; }
    .page-pb { padding-bottom: 48px; }
    .legal__wrap, .faq__wrap, .contact__inner {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
    .contact__cards { flex-direction: column; }
    .contact__cards .contact-acc { flex: 1 1 auto; }
    .contact__form-card { padding: var(--space-24); }
}

/* ============================================================
   PRODUCT DETAIL PAGE (PDP)
   ============================================================ */
/* Per-section vertical padding for the product page.
   Each section has its own top (-pt) and bottom (-pb) class so it can be
   adjusted independently of the matching sections on the homepage. */
.pdp-pt          { padding-top: var(--space-32); }   /* main product section */
.pdp-pb          { padding-bottom: var(--space-00); }
.prod-trust-pt   { padding-top: var(--space-80); }   /* trust badges row */
.prod-trust-pb   { padding-bottom: var(--space-80); }
.prod-related-pt { padding-top: var(--space-00); }   /* "You may also like" */
.prod-related-pb { padding-bottom: var(--space-80); }

.pdp__breadcrumb { margin-bottom: var(--space-24); }

.pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-60);
    align-items: start;
}

/* ---------- Gallery ---------- */
.pdp__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.pdp__main {
    position: relative;
    margin: 0;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.pdp__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition);
}
.pdp__main:hover img { transform: scale(1.03); }

.pdp__badges {
    position: absolute;
    top: var(--space-16);
    left: var(--space-16);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}

.pdp__wishlist {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    z-index: 2;
}

.pdp__zoom {
    position: absolute;
    bottom: var(--space-16);
    right: var(--space-16);
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background var(--transition), transform var(--transition);
}
.pdp__zoom:hover { background: #fff; transform: scale(1.05); }
.pdp__main.is-zoomed { cursor: zoom-out; }
.pdp__main.is-zoomed img { transform: scale(1.6); }

.pdp__thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.pdp__thumb {
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    cursor: pointer;
    padding: 0;
    transition: border-color var(--transition);
}
.pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}
.pdp__thumb:hover { border-color: var(--color-border-strong); }
.pdp__thumb:hover img { transform: scale(1.03); }
.pdp__thumb.is-active { border-color: var(--color-brand); }

/* ---------- Info column (sticky) ---------- */
.pdp__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    position: sticky;
    top: var(--space-24);
}

.pdp__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    margin: 0;
}
.pdp__vendor { font-size: var(--fs-14); color: var(--color-muted); margin: 0; }
.pdp__vendor a { color: var(--color-brand); text-decoration: underline; }

.pdp__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    list-style: none;
    padding: 0;
    margin: 0;
}
.pdp__tags li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}
.pdp__tags i { color: var(--color-stock); font-size: var(--fs-16); }

.pdp__rating { display: flex; align-items: center; gap: var(--space-8); }
.pdp__rating-count { font-size: var(--fs-13); color: var(--color-muted); }

.pdp__price {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: var(--space-4) 0 var(--space-8);
}
.pdp__price sup { font-size: 0.5em; top: -0.7em; }

.pdp__form { display: flex; flex-direction: column; gap: var(--space-16); margin: 0; }

.pdp__option { display: flex; flex-direction: column; gap: var(--space-8); }
.pdp__option-label { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.pdp__option-label span { font-weight: var(--fw-regular); color: var(--color-muted); }

.pdp__select { position: relative; }
.pdp__select select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-white);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 14px 44px 14px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-15, 15px);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition);
}
.pdp__select select:focus { outline: none; border-color: var(--color-brand); }
.pdp__select i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-muted);
}

.pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--color-stock);
    margin: var(--space-4) 0 0;
}
.pdp__stock-bar {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}
.pdp__stock-bar span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-stock);
}

.pdp__buy { display: flex; gap: var(--space-12); align-items: stretch; }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex: 0 0 auto;
}
/* Product buy row: squared-off stepper to match the Add to cart pill alongside it */
.pdp__buy .qty { border-radius: var(--radius-md); }
.qty__btn {
    width: 44px;
    height: 52px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.qty__btn:hover { background: var(--color-card-bg); }
.qty__input {
    width: 44px;
    height: 52px;
    border: none;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    background: transparent;
}
.qty__input:focus { outline: none; }

.btn--cart {
    flex: 1 1 auto;
    background: var(--color-cta-bg);
    color: var(--color-white);
    border-color: var(--color-cta-bg);
    border-radius: var(--radius-pill);
    font-size: var(--fs-16);
}
.btn--cart:hover { background: var(--color-brand); border-color: var(--color-brand); }

.btn--buynow {
    background: var(--color-card-bg);
    color: var(--color-text);
    border-color: var(--color-card-bg);
    border-radius: var(--radius-pill);
    width: 100%;
    font-size: var(--fs-16);
}
.btn--buynow:hover { background: var(--color-blush); border-color: var(--color-blush); }

/* ---------- Mini spec strip ---------- */
.pdp__specs-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--space-4);
}
.pdp__specs-mini-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-16) var(--space-8);
    text-align: center;
}
.pdp__specs-mini-item + .pdp__specs-mini-item { border-left: 1.5px solid var(--color-border); }
.pdp__specs-mini-label { font-size: var(--fs-12); color: var(--color-muted); }
.pdp__specs-mini-val { font-size: var(--fs-14); font-weight: var(--fw-semibold); }

/* ---------- Assurance row ---------- */
.pdp__assurance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    list-style: none;
    padding: var(--space-4) 0 0;
    margin: 0;
}
.pdp__assurance li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-13);
    color: var(--color-muted);
}
.pdp__assurance i { font-size: var(--fs-16); color: var(--color-brand); }

/* ---------- Accordions ---------- */
.pdp-acc {
    border-top: 1.5px solid var(--color-border);
    padding: var(--space-4) 0;
}
.pdp-acc:last-of-type { border-bottom: 1.5px solid var(--color-border); }
.pdp-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    padding: var(--space-16) 0;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}
.pdp-acc__head::-webkit-details-marker { display: none; }
.pdp-acc__head i { transition: transform var(--transition); color: var(--color-muted); }
.pdp-acc[open] .pdp-acc__head i { transform: rotate(180deg); }
.pdp-acc__body {
    padding: 0 0 var(--space-24);
    color: var(--color-muted);
    font-size: var(--fs-15, 15px);
    line-height: var(--lh-base);
}
.pdp-acc__body p { margin: 0 0 var(--space-12); }
.pdp-acc__body p:last-child { margin-bottom: 0; }
.pdp-acc__list { margin: 0 0 var(--space-12) var(--space-16); padding: 0; }
.pdp-acc__list li { margin-bottom: var(--space-8); }
.pdp-acc__body a { color: var(--color-brand); text-decoration: underline; }

.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table tr { border-bottom: 1px solid var(--color-border); }
.pdp-spec-table tr:last-child { border-bottom: none; }
.pdp-spec-table th,
.pdp-spec-table td { text-align: left; padding: 12px 0; font-size: var(--fs-14); vertical-align: top; }
.pdp-spec-table th { font-weight: var(--fw-semibold); color: var(--color-text); width: 42%; }
.pdp-spec-table td { color: var(--color-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .pdp__grid { gap: var(--space-32); }
}
@media (max-width: 768px) {
    .pdp__grid { grid-template-columns: 1fr; gap: var(--space-24); }
    .pdp__info { position: static; }
    .pdp__title { font-size: 32px; }
    .pdp-pb { padding-bottom: var(--space-60); }

    /* Gallery: large main image + horizontal strip of small square thumbs */
    .pdp__badges {
        left: auto;
        right: var(--space-16);
        align-items: flex-end;
    }
    .pdp__wishlist { display: none; }
    .pdp__thumbs {
        display: flex;
        gap: var(--space-12);
    }
    .pdp__thumb {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-md);
    }
}
@media (max-width: 480px) {
    /* Keep the quantity stepper and Add to cart side by side on one row */
    .pdp__buy { flex-wrap: nowrap; }
    .btn--cart { width: auto; flex-basis: auto; }
}