/* ArtNest India storefront — built by bin/build-v2-site-css.sh. Do not edit. */
/* =============================================================================
   ArtNest storefront
   Editorial maker-supply shop. Mobile-first, no build step.

   Art direction: the earthy palette is the room; the logo's rainbow is what is
   in it. Chrome (header, type, footer, buttons) stays quiet and earthy so the
   shop reads as a real business. Colour arrives through the products — one
   accent per category, carried by the generated product marks.
   ============================================================================= */

/* ------------------------------------------------------------------ fonts */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/assets/fonts/dmsans-var.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: normal;
    font-style: normal;
    font-display: swap;
}

/* Metric-matched fallbacks. Line boxes are identical to the real fonts, so the
   swap changes letterforms without moving anything vertically. */
@font-face {
    font-family: 'Fraunces Fallback';
    src: local('Georgia'), local('Times New Roman'), local('Nimbus Roman'), local('serif');
    ascent-override: 97.8%;
    descent-override: 25.5%;
    line-gap-override: 0%;
    size-adjust: 100%;
}

@font-face {
    font-family: 'DM Sans Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans'), local('sans-serif');
    ascent-override: 99.2%;
    descent-override: 31%;
    line-gap-override: 0%;
    size-adjust: 104%;
}

/* ----------------------------------------------------------------- tokens */

:root {
    /* Ground */
    --paper: #FFFFFF;
    --paper-2: #FAFAF8;
    --paper-3: #F0EFEB;
    --rule: color-mix(in srgb, #191917 12%, transparent);
    --rule-strong: color-mix(in srgb, #191917 22%, transparent);

    /* Ink. All three clear 4.5:1 on --paper. */
    --ink: #191917;
    --ink-2: #66625C;
    --ink-3: #66625C;
    --ink-muted: var(--ink-3);

    /* Brand. `clay` is decorative; `clay-deep` is the text/interactive safe
       variant (4.96:1 on paper, 5.70:1 behind white). */
    --clay: #C8553D;
    --clay-deep: #B0432D;
    --clay-press: #93361F;
    --clay-tint: #F6E9E3;
    --sage: #5B7B6B;
    --sage-deep: #415C4E;
    --sage-tint: #E8EEEA;
    --gold: #D4A017;
    --gold-deep: #7C5A0C;
    --gold-tint: #F7EEDA;
    --indigo: #3D6187;
    --indigo-deep: #33526F;
    --indigo-tint: #E7EDF3;
    /* Logo wordmark rainbow — sampled from logo.png letter fills */
    --brand-a: #E04E3A;
    --brand-r: #F08A3A;
    --brand-t: #E8B030;
    --brand-n: #5B9B7A;
    --brand-e: #5BAFD4;
    --brand-s: #D47A6A;
    /* Darker than WhatsApp's own green so white button labels clear 4.5:1
       (the brand green only reaches 3.46:1). */
    --whatsapp: #157A3E;
    --whatsapp-press: #0F5C2E;
    --danger: #A3251C;

    /* Type */
    --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
    --font-body: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, sans-serif;

    /* Spacing rhythm, 4px base */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --s8: 4rem;
    --s9: 6rem;

    --r-sm: 6px;
    --r: 10px;
    --r-lg: 18px;
    --r-xl: 26px;

    /* Elevation is mostly hairlines; shadow is reserved for things that
       genuinely float above the page. */
    --lift-1: 0 1px 2px rgba(45, 41, 38, .05);
    --lift-2: 0 4px 18px -6px rgba(45, 41, 38, .16);
    --lift-3: 0 18px 48px -16px rgba(45, 41, 38, .28);

    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: 120ms;
    --t: 200ms;
    --t-slow: 320ms;

    --header-h: 58px;
    --wrap: 1380px;
    --gutter: 1.4rem;

    /* Per-page accent, overridden on category and product pages. */
    --accent: var(--clay);
    --accent-deep: var(--clay-deep);
    --accent-tint: var(--clay-tint);
}

@media (min-width: 900px) {
    :root {
        --header-h: 74px;
        --gutter: 2rem;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    font-variation-settings: 'opsz' 16, 'wght' 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

body.has-buybar {
    --buybar-height: 76px;
    padding-bottom: calc(var(--buybar-height) + env(safe-area-inset-bottom));
}

body.has-buybar.buybar-anchor-visible {
    padding-bottom: 0;
}

@media (min-width: 900px) {
    body.has-buybar,
    body.has-buybar.buybar-anchor-visible {
        padding-bottom: 0;
    }
}

body.is-locked {
    overflow: hidden;
}

img, svg {
    display: block;
    max-width: 100%;
}

/* Generated product marks fill their frame everywhere they appear. */
.art-svg {
    width: 100%;
    height: 100%;
}

img {
    height: auto;
}

a {
    color: var(--clay-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

button {
    font: inherit;
    color: inherit;
}

/* One focus treatment everywhere, visible on every ground we use. */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.on-dark :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--paper);
}

::selection {
    background: var(--clay);
    color: #fff;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--s4);
    z-index: 900;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 0 0 var(--r) var(--r);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

[x-cloak] {
    display: none !important;
}

/* ------------------------------------------------------------- typography */

.display-xl,
.display-l,
.display-m,
.display-s {
    font-family: var(--font-display);
    margin: 0;
    text-wrap: balance;
}

/* WONK and a high SOFT are what make Fraunces feel drawn rather than set;
   they are used only at display sizes where the detail is legible. */
.display-xl {
    font-size: clamp(3.1rem, 9vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    font-variation-settings: 'opsz' 144, 'wght' 420, 'SOFT' 8, 'WONK' 0;
}

.display-l {
    font-size: clamp(1.9rem, 6.4vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
    font-variation-settings: 'opsz' 96, 'wght' 450, 'SOFT' 8, 'WONK' 0;
}

.display-m {
    font-size: clamp(1.55rem, 5vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    font-variation-settings: 'opsz' 60, 'wght' 580, 'SOFT' 28, 'WONK' 1;
}

.display-s {
    font-size: 1.0625rem;
    line-height: 1.28;
    letter-spacing: -0.006em;
    font-variation-settings: 'opsz' 24, 'wght' 560, 'SOFT' 18, 'WONK' 0;
}

.display-xl em,
.display-l em {
    font-style: italic;
    color: inherit;
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 20, 'WONK' 0;
}

.eyebrow {
    font-size: 0.6875rem;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.eyebrow-accent {
    color: var(--accent-deep);
}

.lede {
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--ink-2);
    margin: 0;
    max-width: 46ch;
}

.meta {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-3);
    margin: 0;
}

.num {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- layout */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap-narrow {
    max-width: 820px;
}

.section {
    padding-block: clamp(2.75rem, 8vw, 5.5rem);
}

.section-tight {
    padding-block: clamp(1.75rem, 5vw, 3rem);
}

.section-rule {
    border-top: none;
    position: relative;
}

.section-rule-bleed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: var(--rule);
    pointer-events: none;
}

/* Section headings sit left and are paired with a link on the right — an
   editorial masthead rather than a centred marketing block. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s3) var(--s5);
    margin-bottom: var(--s5);
}

.section-head > div {
    max-width: 38ch;
}

.section-head .eyebrow {
    margin-bottom: 0.6rem;
}

.section-head p {
    margin: 0.6rem 0 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

@media (min-width: 1280px) {
    .section-head {
        flex-wrap: nowrap;
        align-items: flex-end;
    }

    .section-head > div {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .section-head .display-l {
        white-space: nowrap;
    }

    .section-head .text-link {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 600;
    color: var(--ink);
    text-decoration: none;
    padding: 0.6rem 0;
    border-bottom: 1.5px solid var(--rule-strong);
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease), gap var(--t) var(--ease);
}

.text-link:hover {
    color: var(--clay-deep);
    border-bottom-color: var(--clay);
    gap: 0.7rem;
}

.text-link svg {
    width: 15px;
    height: 15px;
}

/* --------------------------------------------------------------- buttons */

.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-bd: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1.5px solid var(--btn-bd);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
                color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.btn:hover {
    --btn-bg: #0f0f0d;
    --btn-bd: #0f0f0d;
    color: var(--paper);
}

.btn:active {
    transform: translateY(1px);
}

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--rule-strong);
}

.btn-ghost:hover {
    --btn-bg: var(--paper-2);
    --btn-bd: var(--ink);
    color: var(--ink);
}

.btn-ink {
    --btn-bg: var(--ink);
    --btn-bd: var(--ink);
}

.btn-ink:hover {
    --btn-bg: #16130F;
    --btn-bd: #16130F;
}

.btn-wa {
    --btn-bg: var(--whatsapp);
    --btn-bd: var(--whatsapp);
}

.btn-wa:hover {
    --btn-bg: var(--whatsapp-press);
    --btn-bd: var(--whatsapp-press);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-sm {
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
}

.btn[disabled],
.btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
}

.btn-row > .btn {
    flex: 1 1 auto;
}

@media (min-width: 560px) {
    .btn-row > .btn {
        flex: 0 0 auto;
    }
}

/* Small pill used for facts, not decoration. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 0.75rem;
    font-variation-settings: 'opsz' 12, 'wght' 550;
    color: var(--ink-2);
    white-space: nowrap;
}

.chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* -------------------------------------------------------- announcement */

.announce {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--ink) 92%, var(--clay) 8%);
    color: #F4EDE4;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-align: center;
    padding: 0.55rem var(--gutter);
    padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
}

.announce-text {
    flex: 1 1 auto;
    min-width: 0;
}

.announce-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.announce-dismiss:hover {
    background: rgba(255, 255, 255, .08);
    color: #EDE7DE;
}

.announce-dismiss svg {
    width: 14px;
    height: 14px;
}

/* -------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: color-mix(in srgb, var(--paper) 92%, #fff);
    border-bottom: none;
}

.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--rule);
    pointer-events: none;
}

@supports not (backdrop-filter: blur(1px)) {
    .site-header {
        background: var(--paper);
    }
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s2);
    height: var(--header-h);
}

.header-start {
    justify-self: start;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--ink);
    margin-right: 0;
    min-height: 44px;
    justify-self: center;
}

.site-header .brand picture {
    display: none;
}

.brand img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    gap: 0.15rem;
}

.brand-mark {
    display: flex;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 3.6vw, 1.7rem);
    font-weight: 800;
    font-variation-settings: 'opsz' 14, 'wght' 800;
    letter-spacing: 0.14em;
    line-height: 1;
}

.brand-mark span:nth-child(1) { color: var(--brand-a); }
.brand-mark span:nth-child(2) { color: var(--brand-r); }
.brand-mark span:nth-child(3) { color: var(--brand-t); }
.brand-mark span:nth-child(4) { color: var(--brand-n); }
.brand-mark span:nth-child(5) { color: var(--brand-e); }
.brand-mark span:nth-child(6) { color: var(--brand-s); }
.brand-mark span:nth-child(7) { color: var(--brand-a); }

.brand-tagline {
    font-size: 0.5625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variation-settings: 'opsz' 9, 'wght' 600;
}

@media (min-width: 760px) {
    .brand-tagline {
        display: none;
    }
}

.header-nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.nav-shop {
    position: relative;
}

.nav-shop > summary {
    list-style: none;
    position: relative;
    padding: 0.5rem 0.85rem 0.5rem 0.7rem;
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    user-select: none;
}

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

.nav-shop > summary::after {
    content: '';
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    margin-left: 0.35rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.1rem);
    opacity: 0.55;
    vertical-align: middle;
}

.nav-shop > summary::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.28rem;
    height: 1.5px;
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t) var(--ease);
}

.nav-shop:hover > summary::before,
.nav-shop[open] > summary::before,
.nav-shop > summary[aria-current='page']::before {
    transform: scaleX(1);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 220;
    min-width: 12.5rem;
    padding: 0.35rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--lift-2);
    display: none;
}

.nav-shop[open] .nav-dropdown {
    display: block;
}

@media (min-width: 900px) and (hover: hover) {
    .nav-shop:hover .nav-dropdown {
        display: block;
    }
}

.nav-dropdown a {
    display: block;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.nav-dropdown a:hover,
.nav-dropdown a[aria-current='page'] {
    background: var(--paper-3);
    border-left-color: var(--nav-accent, var(--clay));
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0.05rem;
}

.header-actions .account-btn {
    width: 44px;
    height: 44px;
}

.header-actions .account-btn .account-label {
    display: none;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--ink);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t) var(--ease);
}

.icon-btn:hover {
    background: var(--paper-3);
    color: var(--ink);
}

.icon-btn svg {
    width: 21px;
    height: 21px;
}

.icon-wishlist svg {
    fill: none;
}

/* Compact search button — icon only; opens command palette overlay. */
.search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 500;
    cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.search-trigger:hover {
    background: var(--paper-3);
    color: var(--ink);
}

.search-trigger svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

.kbd {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--rule-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-variation-settings: 'opsz' 11, 'wght' 600;
    color: var(--ink-3);
    line-height: 1;
}

.cart-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clay-deep);
    color: #fff;
    font-size: 0.6875rem;
    font-variation-settings: 'opsz' 11, 'wght' 700;
    border-radius: 999px;
    line-height: 1;
}

.cart-badge[data-count='0'] {
    display: none;
}

/* ------------------------------------------------------------ overlays */

.overlay-scrim {
    position: absolute;
    inset: 0;
    background: rgba(30, 26, 22, .46);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: 500;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

.drawer.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}

.drawer.is-open .overlay-scrim {
    opacity: 1;
}

.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    height: 100%;
    background: var(--paper);
    box-shadow: var(--lift-3);
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease);
}

.drawer.is-open .drawer-panel {
    transform: none;
}

/* The cart contents are swapped as one HTMX fragment, so this wrapper has to
   carry the panel's column layout or the footer floats up under the last line. */
#an-cart-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s3) var(--s3) var(--s5);
    border-bottom: 1px solid var(--rule);
}

.drawer-head h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-variation-settings: 'opsz' 24, 'wght' 580, 'SOFT' 20, 'WONK' 0;
    margin: 0;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s2) var(--s5);
}

.drawer-foot {
    padding: var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--clay-tint) 35%, var(--paper-2)) 0%, var(--paper-2) 2.5rem),
        var(--paper-2);
}

.drawer-sum-total {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 22, 'wght' 600, 'SOFT' 0, 'WONK' 0;
    margin-bottom: 0.15rem;
}

.drawer-foot-note {
    margin: 0 0 var(--s3);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.drawer-view-cart {
    display: block;
    width: 100%;
    margin-top: 0.65rem;
    text-align: center;
    min-height: 44px;
}

/* Mobile navigation ---------------------------------------------------- */

/* Scoped to the navigation rows themselves — an unscoped `.nav-panel a` also
   captured the WhatsApp button in the footer and forced its label to ink. */
.nav-panel > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: 56px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-variation-settings: 'opsz' 24, 'wght' 560, 'SOFT' 22, 'WONK' 0;
}

.nav-panel > a small {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-variation-settings: 'opsz' 12, 'wght' 500;
    color: var(--ink-3);
}

.nav-panel .nav-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--nav-accent, var(--rule-strong));
    flex-shrink: 0;
}

.nav-panel-foot {
    padding-top: var(--s5);
}

.drawer-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}

.drawer-lang-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    color: var(--ink-3);
}

.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 0.6875rem;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    letter-spacing: 0.06em;
}

.site-footer .lang-pill {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
}

.lang-pill-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 28px;
    padding: 0 0.2rem;
    color: var(--ink-3);
    text-decoration: none;
    border-radius: 999px;
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

.site-footer .lang-pill-link {
    color: #A69D91;
}

.lang-pill-link:hover {
    color: var(--ink);
}

.site-footer .lang-pill-link:hover {
    color: #fff;
}

.lang-pill-link.is-active {
    color: var(--ink);
    background: var(--paper-3);
}

.site-footer .lang-pill-link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.lang-pill-sep {
    color: var(--ink-3);
    opacity: 0.45;
    user-select: none;
}

.site-footer .lang-pill-sep {
    color: #A69D91;
}

/* -------------------------------------------------------- search overlay */

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

.search-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}

.search-dialog {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    transform: translateY(1.25rem);
    transition: transform var(--t-slow) var(--ease);
    max-height: 100dvh;
}

.search-overlay.is-open .search-dialog {
    transform: none;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: calc(env(safe-area-inset-top) + 0.6rem) var(--gutter) 0.6rem;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--rule);
    background: var(--paper);
    flex-shrink: 0;
}

.search-field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-field > svg {
    position: absolute;
    left: 0.95rem;
    width: 19px;
    height: 19px;
    color: var(--ink-3);
    pointer-events: none;
}

.search-input {
    width: 100%;
    height: 52px;
    padding: 0 2.6rem 0 2.9rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem; /* never below 16px: stops iOS zooming the viewport */
    font-variation-settings: 'opsz' 16, 'wght' 500;
}

/* The browser's own clear button would sit next to ours. */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.search-input::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

/* Give the empty state enough room to show “Search products” on 320px
   screens. Once the shopper types, the normal right inset returns to reserve
   space for the clear control. */
.search-input:placeholder-shown {
    padding-right: 0.85rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper-2);
}

.search-input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.search-clear {
    position: absolute;
    right: 0.35rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ink-3);
    border-radius: 50%;
    cursor: pointer;
}

.search-clear:hover {
    background: var(--paper-3);
    color: var(--ink);
}

.search-dismiss {
    flex-shrink: 0;
    height: 48px;
    padding: 0 0.9rem;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 600;
    border-radius: var(--r);
    cursor: pointer;
}

.search-dismiss:hover {
    background: var(--paper-3);
    color: var(--ink);
}

.search-results {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s4) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom));
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
    background: var(--rule-strong);
    border-radius: 999px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
}

.search-group + .search-group {
    margin-top: var(--s5);
}

.search-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding-bottom: 0.5rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--rule);
}

.search-group-head a {
    font-size: 0.75rem;
    color: var(--ink-3);
    text-decoration: none;
}

.search-group-head a:hover {
    color: var(--clay-deep);
    text-decoration: underline;
}

.search-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: var(--s3);
    min-height: 68px;
    padding: 0.6rem 0.7rem;
    margin-inline: -0.7rem;
    border-radius: var(--r);
    color: var(--ink);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease);
}

.search-row:hover,
.search-row[aria-selected='true'] {
    background: var(--paper-3);
}

.search-row[aria-selected='true'] {
    box-shadow: inset 3px 0 0 var(--row-accent, var(--clay));
}

.search-row-art {
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper-3);
    flex-shrink: 0;
}

.search-row-art picture,
.search-row-art img,
.search-row-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

.search-row-art picture img,
.search-row-art img,
.search-row-art svg {
    object-fit: cover;
}

.search-row-text {
    min-width: 0;
}

.search-row-text b {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-row-price {
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 650;
    color: var(--ink);
    white-space: nowrap;
    text-align: right;
}

.search-row-price.is-request {
    font-variation-settings: 'opsz' 12, 'wght' 550;
    font-size: 0.75rem;
    color: var(--ink-3);
    max-width: 6.5rem;
    white-space: normal;
    line-height: 1.25;
}

/* Narrow screens: let the marker stack over two lines so long product
   names keep the width they need. */
@media (max-width: 520px) {
    .search-row-price.is-request {
        max-width: 4.25rem;
    }
}

.search-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.search-shortcut {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--paper-2);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 13, 'wght' 550;
    line-height: 1.25;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.search-shortcut:hover {
    border-color: var(--row-accent, var(--clay));
    background: var(--paper);
    color: var(--ink);
}

.search-shortcut .swatch {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--row-accent, var(--clay));
    flex-shrink: 0;
    opacity: 0.85;
}

.search-foot {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}

.search-hints {
    display: none;
    flex-shrink: 0;
    gap: var(--s4);
    padding: 0.7rem var(--s5);
    box-shadow: inset 0 1px 0 var(--rule);
    background: var(--paper-2);
    font-size: 0.75rem;
    color: var(--ink-3);
}

.search-hints span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Skeletons: the shape of the answer, so nothing jumps when it lands. */
.search-skeleton {
    display: none;
}

.search-form.htmx-request .search-skeleton {
    display: block;
}

.search-form.htmx-request .search-results-inner {
    display: none;
}

.skel-row {
    display: grid;
    grid-template-columns: 52px 1fr 64px;
    align-items: center;
    gap: var(--s3);
    min-height: 68px;
    padding: 0.6rem 0;
}

.skel {
    background: linear-gradient(90deg, var(--paper-3) 0%, #F3EEE7 50%, var(--paper-3) 100%);
    background-size: 220% 100%;
    animation: shimmer 1.15s linear infinite;
    border-radius: var(--r-sm);
}

.skel-art {
    width: 52px;
    height: 52px;
}

.skel-line {
    height: 11px;
    border-radius: 999px;
}

@keyframes shimmer {
    to {
        background-position: -220% 0;
    }
}

/* --------------------------------------------------------- product cards */

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3) var(--s3);
    align-items: stretch;
}

@media (min-width: 640px) {
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s5) var(--s4);
    }
}

@media (min-width: 1000px) {
    .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.card {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    color: var(--ink);
    isolation: isolate;
}

.card-product {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--lift-1);
    transition: border-color var(--t) var(--ease), box-shadow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

@media (hover: hover) {
    .card-product:hover {
        border-color: color-mix(in srgb, var(--accent) 34%, var(--rule));
        box-shadow: var(--lift-2);
        transform: translateY(-3px);
    }
}

.card-media {
    position: relative;
}

.card-media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.card-art {
    position: relative;
    aspect-ratio: 1;
    min-height: 200px;
    overflow: hidden;
    background: var(--accent-tint);
}

.card-art > picture,
.card-art > img,
.card-art > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.card-art > picture img,
.card-art > img,
.card-art > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}

.card-art > svg {
    object-fit: contain;
}

@media (hover: hover) {
    .card-product:hover .card-art > picture img,
    .card-product:hover .card-art > img {
        transform: scale(1.05);
    }
}

.card-art.has-photo {
    background: var(--paper);
}

/* Small status flag on the media, top-left. Pairs with the wishlist button
   at top-right — never the same corner. */
.card-flag,
.card-product .stock-pill--compact {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 1;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 10, 'wght' 700;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(30, 26, 22, .14);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.card-flag--request {
    background: color-mix(in srgb, var(--sage-deep) 92%, #000 8%);
    color: #fff;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.2rem;
    padding: 0.8rem 0.85rem 0.85rem;
}

.card-cat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.625rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 10, 'wght' 650;
    color: var(--accent-deep);
    margin: 0 0 0.1rem;
}

.card-cat::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.card-title {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 600;
    line-height: 1.32;
    letter-spacing: -0.006em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.64em;
}

.card-title a {
    color: var(--ink);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--clay-deep);
}

.card-price {
    margin: 0.15rem 0 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-variation-settings: 'opsz' 24, 'wght' 580, 'SOFT' 20, 'WONK' 0;
    line-height: 1.1;
    color: var(--ink);
}

.card-price .card-price-from {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-variation-settings: 'opsz' 11, 'wght' 550;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    vertical-align: 0.12em;
    margin-right: 0.1rem;
}

.card-price.is-request {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 13, 'wght' 550;
    color: var(--ink-3);
}

.card-actions {
    margin-top: auto;
    padding-top: 0.7rem;
    min-height: 44px;
}

.card-cta {
    min-height: 44px;
}

.card-quick-add {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0;
    width: 100%;
    min-width: 0;
}

.card-quick-add .card-qty {
    flex: 0 0 auto;
}

.card-quick-add .card-cta-add {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 40px;
    padding-inline: 0.6rem;
    white-space: nowrap;
    justify-content: center;
    gap: 0.35rem;
}

.card-quick-add.is-unavailable .card-cta-add {
    flex: 1 1 100%;
    font-size: 0.75rem;
    padding-inline: 0.65rem;
}

.card-quick-add .card-cta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.card-quick-add .stepper-sm button {
    width: 26px;
    min-width: 26px;
    height: 40px;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1;
}

.card-quick-add .stepper-sm input {
    width: 28px;
    min-width: 28px;
    flex: 0 0 28px;
    height: 40px;
    padding: 0;
    font-size: 0.8125rem;
}

/* Narrow 2-up grids: stack a full-width stepper above a full-width Add button
   so the label stays visible and nothing gets crushed. */
@media (max-width: 560px) {
    .card-quick-add {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .card-quick-add .card-qty {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }

    .card-quick-add .stepper-sm button {
        width: 44px;
        min-width: 44px;
    }

    .card-quick-add .stepper-sm input {
        width: 44px;
        min-width: 44px;
        flex: 0 0 44px;
    }

    .card-quick-add .card-cta-add:not(.is-disabled) {
        flex: 1 1 100%;
        width: 100%;
    }
}

.card-product .wishlist-btn {
    top: 0.6rem;
    right: 0.6rem;
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.card-product .wishlist-btn svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 768px) {
    .card-art {
        min-height: 240px;
    }

    .card-body {
        padding: 0.9rem 0.95rem 0.95rem;
    }
}

/* -------------------------------------------------------- category tiles */

.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
}

@media (min-width: 620px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s4);
    }
}

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

/* Shelf list — an editorial index of how the shop is organised, deliberately
   plainer than the hero's tile-nav so it reads as orientation, not a repeat. */
.shelf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.shelf-item {
    border-bottom: 1px solid var(--rule);
}

.shelf-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: clamp(0.9rem, 3vw, 2.25rem);
    padding: clamp(1rem, 2.6vw, 1.6rem) 0.25rem;
    text-decoration: none;
    color: var(--ink);
    transition: padding-left var(--t) var(--ease), background var(--t) var(--ease);
}

@media (hover: hover) {
    .shelf-row:hover {
        padding-left: 0.9rem;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--accent-tint) 70%, transparent),
            transparent 70%);
    }
}

.shelf-num {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 12, 'wght' 600, 'WONK' 1;
    color: var(--accent-deep);
    padding-top: 0.15rem;
}

.shelf-main {
    min-width: 0;
}

.shelf-name {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    font-variation-settings: 'opsz' 48, 'wght' 580, 'SOFT' 30, 'WONK' 1;
    letter-spacing: -0.018em;
    line-height: 1.1;
}

.shelf-row:hover .shelf-name {
    color: var(--accent-deep);
}

.shelf-desc {
    display: block;
    margin-top: 0.35rem;
    max-width: 52ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.shelf-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    color: var(--ink-3);
}

.shelf-meta svg {
    width: 16px;
    height: 16px;
    color: var(--accent-deep);
    transition: transform var(--t) var(--ease);
}

.shelf-row:hover .shelf-meta svg {
    transform: translateX(4px);
}

@media (max-width: 560px) {
    .shelf-row {
        grid-template-columns: auto 1fr;
        gap: 0.9rem 1rem;
        row-gap: 0.5rem;
    }

    .shelf-meta {
        grid-column: 2;
        justify-content: flex-start;
    }
}

.cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1px var(--rule);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}

.cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--accent), var(--lift-2);
    color: var(--ink);
}

.cat-tile-art {
    aspect-ratio: 160 / 96;
    background: var(--accent-tint);
}

.cat-tile-art svg {
    width: 100%;
    height: 100%;
}

.cat-tile-body {
    padding: var(--s4);
}

.cat-tile-body h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-variation-settings: 'opsz' 28, 'wght' 580, 'SOFT' 26, 'WONK' 1;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 0.3rem;
}

.cat-tile-body p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-2);
}

.cat-tile-count {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    color: var(--accent-deep);
}

/* ----------------------------------------------------------------- hero */

.hero {
    position: relative;
    padding-block: clamp(2rem, 6vw, 4rem) clamp(2rem, 5vw, 3.25rem);
    overflow: hidden;
}

/* The hero already carries generous bottom padding; the first section
   should not stack another full band on top of it. */
.hero + .section {
    padding-top: clamp(2rem, 5vw, 3.25rem);
}

.hero-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }
}

.hero h1 {
    margin: 0.75rem 0 0;
}

.hero .lede {
    margin-top: var(--s4);
}

.hero .btn-row {
    margin-top: var(--s5);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: var(--s5) 0 0;
    padding: var(--s4) 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
}

.hero-facts li {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-3);
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.hero-facts b {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-variation-settings: 'opsz' 26, 'wght' 600, 'SOFT' 22, 'WONK' 1;
    color: var(--ink);
    line-height: 1;
}

@media (max-width: 420px) {
    .hero-facts {
        gap: 0.5rem 1rem;
    }
}

/* The four category marks as a bold 2x2 of tappable shelves — the brand's
   own art doing the introducing, and doubling as primary navigation. */
.hero-nest {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.6rem, 1.6vw, 0.9rem);
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
}

.hero-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    background: var(--tile-tint, var(--paper-2));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tile-accent, var(--clay)) 22%, var(--rule));
    transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}

@media (hover: hover) {
    .hero-tile:hover {
        transform: translateY(-3px);
        box-shadow:
            inset 0 0 0 1.5px var(--tile-accent, var(--clay)),
            var(--lift-2);
    }
}

.hero-tile-art {
    position: absolute;
    inset: 0;
    display: block;
}

.hero-tile-art svg,
.hero-tile-art .art-hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    transform-origin: 50% 42%;
    transition: transform var(--t-slow) var(--ease);
}

@media (hover: hover) {
    .hero-tile:hover .hero-tile-art svg,
    .hero-tile:hover .hero-tile-art .art-hero {
        transform: scale(1.24);
    }
}

.hero-tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 1.4rem 0.85rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-variation-settings: 'opsz' 20, 'wght' 580, 'SOFT' 14, 'WONK' 0;
    letter-spacing: -0.01em;
    line-height: 1.12;
    text-wrap: balance;
    color: var(--ink);
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--paper-2) 78%, transparent) 38%,
        var(--paper-2) 78%);
}

.hero-tile-label small {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-variation-settings: 'opsz' 10, 'wght' 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tile-deep, var(--accent-deep));
}

@media (max-width: 360px) {
    .hero-tile-label {
        font-size: 0.85rem;
        padding: 0.55rem 0.7rem 0.65rem;
    }
}

/* ---------------------------------------------------------- info bands */

.band {
    background: var(--paper-2);
    border-block: none;
    position: relative;
    clear: both;
    isolation: isolate;
}

.band-bleed::before,
.band-bleed::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--rule);
    pointer-events: none;
}

.band-bleed::before {
    top: 0;
}

.band-bleed::after {
    bottom: 0;
}

/* Related products on PDP — sits close under the product, same page rhythm. */
.pdp-related {
    position: relative;
    margin-top: 0;
}

@media (min-width: 900px) {
    .pdp-related.section {
        padding-block: var(--s4) var(--s6);
    }

    .pdp-related .section-head {
        margin-bottom: var(--s3);
    }

    .pdp-related .section-head .display-l {
        font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    }

    .pdp-related .grid {
        gap: var(--s4) var(--s3);
    }

    .pdp-related .card-art {
        min-height: 0;
    }

    .pdp-related .card-body {
        padding: 0.75rem 0.85rem 0.85rem;
    }

    .pdp-related .card-actions {
        padding-top: 0.55rem;
    }
}

/* ---------------------------------------------------------------- stock pills */

.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    font-variation-settings: 'opsz' 11, 'wght' 650;
    line-height: 1.25;
    white-space: nowrap;
}

.stock-pill--in {
    background: color-mix(in srgb, var(--sage) 28%, var(--paper));
    color: color-mix(in srgb, var(--sage-deep) 88%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--sage) 45%, var(--rule));
}

.stock-pill--low {
    background: color-mix(in srgb, var(--clay) 22%, var(--paper));
    color: color-mix(in srgb, var(--clay-deep) 90%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--clay) 40%, var(--rule));
}

.stock-pill--out {
    background: color-mix(in srgb, var(--ink) 6%, var(--paper));
    color: color-mix(in srgb, var(--ink-muted) 92%, var(--ink));
    border: 1px solid var(--rule);
}

.stock-pill--pulse {
    animation: stock-pulse 2.4s ease-in-out infinite;
}

@keyframes stock-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

/* Positioning + type for the card-media stock pill lives with .card-flag
   (search "Small status flag on the media"). This keeps the state colours. */
.stock-pill--compact {
    z-index: 1;
}

.card-product .wishlist-btn {
    z-index: 2;
}

.pdp-stock {
    margin: 0.55rem 0 0;
}

.pdp-buy .pdp-stock .stock-pill {
    font-size: 0.75rem;
}

.card-cta.is-disabled {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

/* ----------------------------------------------------------- bundle sections */

.pdp-bundle {
    margin-top: 0;
}

.pdp-bundle .section-head {
    margin-bottom: var(--s3);
}

.bundle-kit-note {
    max-width: 18rem;
    text-align: right;
}

.bundle-panel {
    padding: var(--s3);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-1);
}

.bundle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}

.bundle-item {
    display: flex;
    flex: 1 1 12rem;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.bundle-check {
    display: flex;
    align-items: center;
    margin-top: 0.35rem;
    cursor: pointer;
}

.bundle-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bundle-check-ui {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 0.25rem;
    background: var(--paper);
}

.bundle-check-ui.is-checked,
.bundle-check input:checked + .bundle-check-ui {
    background: color-mix(in srgb, var(--accent, var(--clay)) 75%, var(--ink));
    border-color: color-mix(in srgb, var(--accent, var(--clay)) 75%, var(--ink));
    box-shadow: inset 0 0 0 2px var(--paper);
}

.bundle-check--locked .bundle-check-ui {
    opacity: 0.85;
}

.bundle-plus {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-muted);
    line-height: 1;
}

.bundle-thumb {
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
}

.bundle-art {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--accent-tint, var(--paper));
    border: 1px solid var(--rule);
}

.bundle-art > picture,
.bundle-art > img,
.bundle-art > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bundle-art > picture img,
.bundle-art > img,
.bundle-art > svg {
    object-fit: cover;
}

.bundle-copy {
    flex: 1;
    min-width: 0;
}

.bundle-name {
    display: block;
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 600;
    color: inherit;
    text-decoration: none;
    line-height: 1.3;
}

.bundle-name:hover {
    text-decoration: underline;
}

.bundle-price {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.bundle-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
}

.bundle-total {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.bundle-total .num {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink);
}

.bundle-add-all {
    flex: 1 1 12rem;
    max-width: 100%;
}

.bundle-scroll {
    display: flex;
    gap: var(--s2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
}

.bundle-scroll .card-product {
    flex: 0 0 min(72vw, 15rem);
    scroll-snap-align: start;
}

@media (min-width: 760px) {
    .bundle-scroll {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .bundle-scroll .card-product {
        flex: unset;
    }

    .bundle-kit-note {
        text-align: right;
    }
}

@media (max-width: 479px) {
    .bundle-row {
        flex-direction: column;
        align-items: stretch;
    }

    .bundle-plus {
        align-self: center;
        transform: rotate(90deg);
    }

    .bundle-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

.pincode-label-short {
    display: none;
}

.steps {
    display: grid;
    gap: var(--s5);
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 760px) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s6);
        position: relative;
        padding-top: var(--s4);
    }

    .steps::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--ink);
    }
}

.steps li {
    counter-increment: step;
    padding-top: var(--s4);
    border-top: 2px solid var(--ink);
}

@media (min-width: 760px) {
    .steps li {
        border-top: none;
        padding-top: 0;
    }
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 620, 'SOFT' 0, 'WONK' 0;
    letter-spacing: 0.08em;
    color: var(--clay-deep);
    margin-bottom: 0.5rem;
}

.steps h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-variation-settings: 'opsz' 30, 'wght' 580, 'SOFT' 26, 'WONK' 1;
    letter-spacing: -0.014em;
    margin: 0 0 0.4rem;
}

.steps p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
    line-height: 1.55;
}

.steps a {
    color: var(--clay-deep);
}

/* WhatsApp band ------------------------------------------------------- */

.wa-band {
    background: var(--sage-deep);
    color: #EDF2EE;
}

.wa-band .display-l {
    color: #fff;
}

.wa-band p {
    color: #D3E0D8;
    margin: var(--s3) 0 0;
    max-width: 44ch;
}

.wa-band .btn-wa {
    --btn-bg: rgba(255, 255, 255, .12);
    --btn-bd: rgba(255, 255, 255, .38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.wa-band .btn-wa:hover {
    --btn-bg: rgba(255, 255, 255, .2);
    --btn-bd: rgba(255, 255, 255, .5);
}

.wa-band-inner {
    display: grid;
    gap: var(--s5);
    align-items: center;
}

@media (min-width: 800px) {
    .wa-band-inner {
        grid-template-columns: 1fr auto;
        gap: var(--s7);
    }
}

.wa-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin: var(--s4) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: #C5D6CB;
}

.wa-numbers b {
    display: block;
    color: #fff;
    font-variation-settings: 'opsz' 14, 'wght' 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.wa-numbers a {
    color: #fff;
    text-decoration: none;
}

.wa-numbers a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ page head */

.page-head {
    padding-block: var(--s5) var(--s4);
}

.page-head .display-m {
    margin-top: 0.5rem;
}

.page-head .lede {
    margin-top: var(--s3);
}

/* Category page header — accent-tinted band with the shelf's own drawn mark. */
.cat-hero {
    position: relative;
    display: grid;
    gap: var(--s4);
    align-items: center;
    margin-top: var(--s4);
    padding: clamp(1.25rem, 4vw, 2.4rem);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--accent-tint) 82%, var(--paper)),
        color-mix(in srgb, var(--accent-tint) 40%, var(--paper)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, var(--rule));
}

.cat-hero-copy {
    position: relative;
    z-index: 1;
}

.cat-hero-copy .display-l {
    margin-top: 0.4rem;
}

.cat-hero-copy .lede {
    margin-top: var(--s3);
    color: var(--ink-2);
}

.cat-hero-art {
    position: absolute;
    right: -6%;
    top: 50%;
    width: min(42%, 320px);
    transform: translateY(-50%);
    opacity: 0.9;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.cat-hero-art svg {
    width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    .cat-hero-art {
        display: none;
    }
}

.cat-siblings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--s4);
}

.cat-siblings a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--rule-strong);
    background: var(--paper-2);
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 13, 'wght' 550;
    color: var(--ink-2);
    text-decoration: none;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}

.cat-siblings a:hover {
    border-color: color-mix(in srgb, var(--accent, var(--clay)) 55%, var(--rule-strong));
    color: var(--ink);
}

.cat-siblings a.is-current {
    border-color: transparent;
    background: color-mix(in srgb, var(--accent, var(--clay)) 90%, #000 10%);
    color: #fff;
    font-variation-settings: 'opsz' 13, 'wght' 620;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: var(--s4) 0 0;
    margin: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--ink-3);
}

.crumbs a {
    color: var(--ink-3);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--clay-deep);
    text-decoration: underline;
}

.crumbs li + li::before {
    content: '/';
    margin-right: 0.4rem;
    color: var(--rule-strong);
}

.crumbs li {
    display: flex;
    align-items: center;
}

.result-count {
    font-size: 0.8125rem;
    color: var(--ink-3);
    margin: 0 0 var(--s4);
}

/* ------------------------------------------------------------------ PDP */

.pdp-page {
    position: relative;
    /* Leftover aliases from earlier polish passes — keep reviews/stars working
       even if a rule still names the old tokens. */
    --line: var(--rule);
    --radius-sm: var(--r-sm);
}

.pdp-page .crumbs {
    margin-bottom: var(--s3);
}

.pdp {
    display: grid;
    gap: var(--s5);
    padding-bottom: var(--s6);
    position: relative;
    isolation: isolate;
}

.pdp-gallery,
.pdp-about,
.pdp-buy,
.pdp-reviews {
    min-width: 0;
}

/* Mobile: unwrap columns so order can be gallery → buy → about → reviews. */
.pdp-col-media,
.pdp-col-buy {
    display: contents;
}
.pdp-gallery { order: 1; }
.pdp-buy { order: 2; }
.pdp-about { order: 3; }
.pdp-reviews { order: 4; }

.pdp-buy {
    position: static;
}

.pdp-about .eyebrow,
.pdp-reviews .eyebrow {
    color: var(--accent-deep);
}

.pdp-about-body {
    margin-top: var(--s3);
    padding-left: var(--s4);
    border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--rule-strong));
}

.pdp-about .prose {
    font-size: 1.03125rem;
    line-height: 1.72;
}

@media (min-width: 900px) {
    .wrap.pdp-page {
        max-width: min(var(--wrap), 1280px);
        padding-bottom: 0;
    }

    .pdp-page .crumbs {
        margin-bottom: var(--s3);
    }

    /* Two independent columns: media (gallery → about) and buy (buy → reviews).
       Each flows at its own height, so the shorter gallery no longer leaves a
       tall gap under itself waiting for the buy column to end. The sticky
       gallery is released by initPdpGalleryStickyRelease() before it can reach
       About. */
    .pdp {
        --pdp-col-left: minmax(280px, 520px);
        --pdp-col-right: minmax(320px, 420px);
        /* Track mins keep the abs-positioned figure from collapsing. */
        grid-template-columns: var(--pdp-col-left) var(--pdp-col-right);
        row-gap: 0;
        justify-content: center;
        column-gap: var(--s6);
        align-items: start;
        padding-bottom: var(--s3);
    }

    .pdp-col-media,
    .pdp-col-buy {
        display: flex;
        flex-direction: column;
        gap: var(--s5);
        min-width: 0;
    }

    .pdp-gallery { order: unset; }
    .pdp-buy { order: unset; }
    .pdp-about { order: unset; }
    .pdp-reviews { order: unset; }

    .pdp-about,
    .pdp-reviews {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .pdp:has(.pdp-thumbs) {
        --pdp-col-left: minmax(320px, calc(520px + 68px + var(--s3)));
        grid-template-columns: var(--pdp-col-left) var(--pdp-col-right);
    }

    .pdp-gallery {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        grid-template-rows: auto;
        gap: var(--s3);
        align-items: start;
        width: 100%;
        flex-shrink: 0;
        position: sticky;
        top: calc(var(--header-h) + 5px);
    }

    .pdp-gallery.is-released {
        position: relative;
        top: auto;
    }

    .pdp-gallery:not(:has(.pdp-thumbs)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdp-figure {
        grid-column: 2;
        grid-row: 1;
        aspect-ratio: auto;
        width: 100%;
        max-width: 520px;
        max-height: none;
        height: auto;
        border-radius: calc(var(--r-xl) + 2px);
        box-shadow:
            inset 0 0 0 1px rgba(45, 41, 38, .06),
            var(--lift-1);
    }

    .pdp-gallery:not(:has(.pdp-thumbs)) .pdp-figure {
        grid-column: 1;
    }

    .pdp-thumbs {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        margin-top: 0;
        max-height: 520px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 0;
        scrollbar-width: thin;
    }

    .pdp-thumb {
        width: 64px;
        height: 64px;
    }

    .pdp-buy {
        align-self: start;
        width: 100%;
        max-width: 100%;
        position: static;
        padding: var(--s5);
        background: var(--paper-2);
        border: 1px solid var(--rule);
        border-radius: calc(var(--r-xl) + 2px);
        box-shadow: var(--lift-1);
    }

    .pdp-about {
        margin: 0;
        padding: var(--s5);
        background: var(--paper-2);
        border: 1px solid var(--rule);
        border-radius: calc(var(--r-xl) + 2px);
        box-shadow: var(--lift-1);
        overflow: hidden;
    }

    .pdp-reviews {
        width: 100%;
        max-width: 100%;
    }

    .pdp-about .eyebrow {
        margin-bottom: 0;
    }

    .pdp-about-body {
        margin-top: var(--s3);
        padding: 0.1rem 0 0 var(--s4);
        border-left-width: 2px;
    }

    .pdp-about .prose {
        font-size: 1.125rem;
        line-height: 1.78;
        max-width: none;
        color: var(--ink-2);
    }
}

.pdp-figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    width: 100%;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1px rgba(45, 41, 38, .07);
}

.pdp-figure > img,
.pdp-figure > picture {
    position: static;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.pdp-figure > picture > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(calc(100dvh - var(--header-h) - 8rem), 720px);
    object-fit: contain;
    object-position: center;
}

body.has-buybar .pdp-figure > picture > img {
    max-height: min(
        calc(100dvh - var(--header-h) - var(--buybar-height, 76px) - 9rem),
        720px
    );
}

.pdp-figure > svg,
.pdp-video-poster,
.pdp-video-poster > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pdp-figure > svg {
    object-fit: contain;
}

.pdp-figure:has(> svg),
.pdp-figure--video {
    aspect-ratio: 1;
}

.pdp-video-poster {
    display: grid;
    place-items: center;
    background: var(--accent-tint);
}

.pdp-video-poster > img {
    object-fit: cover;
}

.pdp-play-cue {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(24, 21, 18, 0.28);
    pointer-events: none;
}

.pdp-play-cue svg {
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 50%;
    background: rgba(251, 249, 246, 0.92);
    color: var(--ink);
    box-shadow: var(--lift-2);
}

.pdp-figure--video .pdp-zoom {
    cursor: pointer;
}

/* The zoom affordance is a transparent sheet over the frame rather than a
   wrapper around the image, so the `.pdp-figure > img|svg` sizing above — and
   the mobile height cap below it — keep working untouched. */
.pdp-zoom {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    cursor: zoom-in;
}

.pdp-zoom-cue {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(251, 249, 246, .93);
    color: var(--ink);
    box-shadow: var(--lift-2);
    opacity: 0;
    transform: scale(.88);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.pdp-figure:hover .pdp-zoom-cue,
.pdp-zoom:focus-visible .pdp-zoom-cue {
    opacity: 1;
    transform: none;
}

/* Touch has no hover to reveal the cue with, so it simply stays out. */
@media (hover: none) {
    .pdp-zoom {
        cursor: default;
    }

    .pdp-zoom-cue {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 899px) {
    .pdp-page .crumbs {
        padding-top: var(--s2);
        font-size: 0.6875rem;
    }

    .pdp {
        gap: var(--s3);
        padding-bottom: var(--s5);
    }

    .pdp-figure {
        aspect-ratio: auto;
        height: auto;
        max-height: none;
    }

    .pdp-figure > img,
    .pdp-figure > picture > img {
        object-fit: contain;
        max-height: min(
            calc(100dvh - var(--header-h) - var(--buybar-height, 76px) - 7.5rem),
            640px
        );
    }

    .art-note {
        left: var(--s2);
        bottom: var(--s2);
        padding: 0.2rem 0.45rem;
        font-size: 0.5625rem;
        letter-spacing: 0.06em;
    }

    .pdp-buy .display-m {
        font-size: clamp(1.2rem, 4.8vw, 1.45rem);
        line-height: 1.1;
        margin-top: 0.2rem;
    }

    .pdp-buy .display-m::after {
        width: 2.75rem;
        margin-top: 0.4rem;
    }

    .pdp-price {
        font-size: clamp(1.3rem, 4.2vw, 1.5rem);
    }

    .pdp-buy .field-variants {
        margin-top: var(--s3);
    }

    .pdp-buy .field-qty > .field-label {
        margin-bottom: 0.3rem;
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
    }

    .pdp-buy .field-qty .stepper button,
    .pdp-buy .field-qty .stepper input {
        width: 40px;
        height: 40px;
    }

    .pdp-buy .field-qty .stepper input {
        width: 44px;
        font-size: 0.8125rem;
    }

    .pdp-buy .buy-actions {
        margin-top: var(--s3);
        gap: var(--s2);
    }

    .pdp-buy .buy-actions .btn-block {
        min-height: 44px;
        padding: 0.5rem 0.65rem;
        font-size: 0.8125rem;
    }

    .pdp-buy .pdp-landed-band,
    .pdp-buy .pincode-check,
    .pdp-buy .assurances--compact {
        margin-top: var(--s3);
    }

    .pdp-buy .pdp-landed-band .pincode-check--landed,
    .pdp-buy .pincode-check {
        padding: var(--s3);
    }

    .pdp-buy .pincode-check > .field-label {
        margin-bottom: 0.5rem;
    }

    .pdp-buy .pickup-hint {
        margin-top: 0.65rem;
    }

    .pdp-about {
        padding-top: var(--s2);
    }

    .pdp-about-body {
        margin-top: var(--s3);
        padding-left: var(--s3);
    }

    .pdp-about .prose {
        font-size: 0.96875rem;
        line-height: 1.68;
    }

    .pdp-reviews {
        margin-top: var(--s4);
        padding: var(--s4);
    }

    .pdp-reviews-lede {
        font-size: 1.05rem;
        max-width: 28ch;
    }

    .review-form-kicker {
        margin-bottom: var(--s2);
    }
}

/* Says out loud that the artwork is generated, so a mark never reads as a
   broken image. */
.art-note {
    position: absolute;
    left: var(--s4);
    bottom: var(--s4);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-2) 90%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    color: var(--ink-2);
}

.pdp-thumbs {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s3);
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

.pdp-thumb {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    padding: 0;
    border: 1.5px solid var(--rule);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-2);
    cursor: pointer;
}

.pdp-thumb.is-active {
    border-color: var(--ink);
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-thumb--video {
    position: relative;
}

.pdp-thumb-video-label {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.pdp-thumb-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(24, 21, 18, 0.28);
    pointer-events: none;
}

/* ------------------------------------------------------- image lightbox */

/* Teleported to <body>, so it stacks over the sticky header (200) and the
   header overlays (500/600) instead of inside the PDP's own context. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 700;
    visibility: hidden;
    opacity: 0;
    background: rgba(24, 21, 18, .9);
    transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

.lightbox.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}

.lightbox-dialog {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + var(--s7)) var(--s5)
             calc(env(safe-area-inset-bottom) + var(--s7));
    transform: scale(.96);
    transition: transform var(--t-slow) var(--ease);
}

.lightbox.is-open .lightbox-dialog {
    transform: none;
}

.lightbox-stage {
    position: relative;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-out;
}

.lightbox-img {
    max-width: min(100%, 1100px);
    max-height: 100%;
    border-radius: var(--r-lg);
    /* Leaves the two-finger gesture to the browser so a photo pinches open. */
    touch-action: pinch-zoom;
}

.lightbox-stage--video {
    width: min(100%, 960px);
    cursor: default;
}

.lightbox-video {
    position: relative;
    width: min(100vw - 2rem, 960px);
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000;
}

.lightbox-video-el,
.lightbox-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.lightbox--video .lightbox-stage {
    cursor: default;
}

/* A generated mark is vector and has no native size to be limited by, so it
   simply takes the room the viewport offers. */
.lightbox-stage--art {
    width: min(80vmin, 820px);
    height: min(80vmin, 820px);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--accent-tint);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(251, 249, 246, .16);
    color: var(--paper);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(251, 249, 246, .3);
}

.lightbox-close {
    top: calc(env(safe-area-inset-top) + var(--s3));
    right: var(--s3);
}

.lightbox-nav {
    top: 50%;
    margin-top: -22px;
}

.lightbox-prev {
    left: var(--s3);
}

.lightbox-next {
    right: var(--s3);
}

.lightbox-prev svg {
    transform: rotate(180deg);
}

.lightbox-count {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + var(--s3));
    margin: 0;
    padding: 0.2rem 0.7rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(251, 249, 246, .16);
    color: var(--paper);
    font-size: 0.8125rem;
}

.lightbox :focus-visible {
    outline-color: var(--paper);
}

.pdp-price {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 20, 'WONK' 0;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: var(--s2) 0 0;
}

.pdp-buy .pdp-qty-price-row {
    margin-top: var(--s3);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--rule);
}

.pdp-quantity-pricing {
    margin-top: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: #fff;
}

.pdp-quantity-pricing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s2);
}

.pdp-quantity-pricing-head p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.pdp-quantity-pricing-head span {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eaf3ed;
    color: #2f6642;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pdp-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
}

.pdp-tier {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.75rem;
}

.pdp-tier strong {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 650;
}

.pdp-tier.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: rgba(255,255,255,.72);
}

.pdp-tier.is-active strong { color: #fff; }

.pdp-tier-status {
    min-height: 1.15em;
    margin: var(--s2) 0 0;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.cart-line-unit s { color: var(--muted); }

.cart-tier-applied {
    display: block;
    margin-top: 0.2rem;
    color: #2f6642;
    font-size: 0.72rem;
    font-weight: 650;
}

.mini-line-price small {
    display: block;
    margin-top: 0.12rem;
    color: #2f6642;
    font-size: 0.65rem;
    font-weight: 650;
}

@media (max-width: 360px) {
    .pdp-quantity-pricing { padding: var(--s2); }
    .pdp-tier-grid { grid-template-columns: 1fr; }
    .pdp-tier { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

.pdp-buy .pdp-qty-price-row .field-qty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    min-width: 0;
    width: 100%;
}

.pdp-buy .pdp-qty-price-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
}

.pdp-buy .pdp-qty-price-controls .pdp-price {
    margin: 0;
    line-height: 1;
    align-self: center;
    text-align: right;
}

.pdp-buy .pdp-qty-price-controls .stepper {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    margin-inline: 0;
}

.pdp-buy .field-qty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pdp-buy-anchor {
    min-width: 0;
    text-align: left;
}

.pdp-buy .pdp-price {
    margin-bottom: 0;
    text-align: left;
}

.pdp-buy .pdp-head {
    margin-bottom: var(--s1);
}

.pdp-title {
    min-width: 0;
}

.pdp-buy .display-m {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.pdp-buy .display-m::after {
    content: '';
    display: block;
    width: 3.25rem;
    height: 2px;
    margin-top: 0.5rem;
    background: color-mix(in srgb, var(--accent, var(--clay)) 72%, var(--rule-strong));
    border-radius: 1px;
}

.pdp-buy .field-variants {
    margin-top: var(--s3);
}

.pdp-buy .field-qty > .field-label {
    display: block;
    width: 100%;
    margin-bottom: 0.45rem;
    padding-inline: 0;
}

.pdp-buy .field-qty .stepper button,
.pdp-buy .field-qty .stepper input {
    width: 44px;
    height: 44px;
}

.pdp-buy .field-qty .stepper input {
    width: 48px;
    font-size: 0.875rem;
}

.pdp-buy .buy-actions {
    margin-top: var(--s2);
    margin-bottom: 0;
}

/* Two columns: Add to cart | Buy now side by side. */
.pdp-buy .buy-actions .btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    width: 100%;
}

.pdp-buy .buy-actions .buy-action-form {
    width: 100%;
}

.pdp-buy .buy-actions .btn-block {
    padding-inline: 0.85rem;
}

.pdp-buy .pdp-landed-band,
.pdp-buy .pincode-check,
.pdp-buy .assurances--compact {
    margin-top: var(--s3);
}

.pdp-price--por small {
    margin-top: 0.45rem;
    line-height: 1.4;
}

@media (min-width: 900px) {
    .pdp-buy .pdp-head {
        margin-bottom: 0;
    }

    .pdp-buy .pdp-title {
        margin-top: var(--s3);
    }

    .pdp-buy .pdp-title::before {
        content: '';
        display: block;
        width: clamp(3.5rem, 36%, 8rem);
        height: 2px;
        margin-bottom: 0.85rem;
        background: color-mix(in srgb, var(--accent, var(--clay)) 78%, var(--rule-strong));
        border-radius: 1px;
    }

    .pdp-buy .display-m {
        font-size: clamp(1.45rem, 2vw, 1.85rem);
        line-height: 1.14;
        margin-top: 0;
        font-variation-settings: 'opsz' 64, 'wght' 580, 'SOFT' 32, 'WONK' 1;
    }

    .pdp-buy .display-m::after {
        display: none;
    }

    .pdp-buy .pdp-price {
        font-size: clamp(1.55rem, 2.1vw, 1.85rem);
    }

    .pdp-buy .pdp-qty-price-row {
        padding-bottom: var(--s4);
    }

    .pdp-buy .field {
        margin-top: var(--s3);
    }

    .pdp-buy .field-variants,
    .pdp-buy .pdp-qty-price-row {
        margin-top: var(--s3);
    }

    .pdp-buy .field-qty > .field-label {
        margin-bottom: 0.4rem;
    }

    .pdp-buy .buy-actions {
        margin-top: var(--s2);
        gap: var(--s3);
    }

    .pdp-buy .buy-actions .btn {
        min-height: 48px;
        letter-spacing: 0.01em;
    }

    .pdp-buy .buy-actions .btn-block {
        min-height: 48px;
        padding-inline: 1rem;
    }

    .pdp-buy .buy-actions > .btn-ghost {
        background: var(--paper);
    }

    .pdp-buy .pdp-landed-band,
    .pdp-buy .pincode-check,
    .pdp-buy .assurances--compact {
        margin-top: var(--s3);
    }

    .pdp-buy .option,
    .pdp-buy .option-card {
        min-height: 44px;
        padding: 0.55rem 0.8rem;
        font-size: 0.8125rem;
    }

    .pdp-buy .option-card {
        min-height: 4rem;
    }

    .pdp-buy .options--cards {
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    }

    .pdp-buy .field-qty .stepper button,
    .pdp-buy .field-qty .stepper input {
        width: 42px;
        height: 42px;
    }

    .pdp-buy .field-qty .stepper input {
        width: 46px;
    }
}

.pdp-price small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-variation-settings: 'opsz' 12, 'wght' 500;
    letter-spacing: 0;
    color: var(--ink-3);
    margin-top: 0.5rem;
}

.field {
    margin-top: var(--s5);
}

.field > .field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 12, 'wght' 620;
    color: var(--ink-3);
    margin-bottom: 0.65rem;
}

.field-label .field-value {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    color: var(--ink);
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.options--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
    gap: var(--s2);
}

.option {
    min-height: 48px;
    padding: 0.6rem 1.05rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--r);
    background: var(--paper-2);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 550;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.2rem;
    min-height: 4.25rem;
    padding: 0.65rem 0.85rem;
    text-align: left;
}

.option-name {
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 620;
    line-height: 1.25;
    color: var(--ink);
}

.option-price {
    font-size: 0.75rem;
    font-variation-settings: 'opsz' 12, 'wght' 520;
    letter-spacing: 0;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.field-hint {
    margin: -0.35rem 0 0.65rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.option:hover {
    border-color: var(--ink-3);
}

.option-card:hover .option-price {
    color: var(--ink-2);
}

.option[aria-pressed='true'],
.option.is-selected {
    border-color: var(--accent, var(--clay));
    background: color-mix(in srgb, var(--accent-tint, var(--paper-3)) 72%, var(--paper-2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--clay)) 55%, transparent);
    color: var(--ink);
}

.option[aria-pressed='true'] .option-name,
.option.is-selected .option-name {
    color: var(--ink);
}

.option[aria-pressed='true'] .option-price,
.option.is-selected .option-price {
    color: var(--ink-2);
}

.option[aria-pressed='true']:focus-visible,
.option.is-selected:focus-visible {
    outline: 2px solid var(--accent, var(--clay));
    outline-offset: 2px;
}

.stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--r);
    background: var(--paper-2);
    overflow: hidden;
}

.stepper button {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 1.15rem;
    color: var(--ink);
    cursor: pointer;
}

.stepper button:hover {
    background: var(--paper-3);
}

.stepper input,
.stepper .stepper-value {
    width: 52px;
    height: 48px;
    border: none;
    border-inline: 1.5px solid var(--rule);
    background: transparent;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 600;
    color: var(--ink);
    -moz-appearance: textfield;
    appearance: textfield;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.buy-actions {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s5);
}

@media (min-width: 900px) {
    .pdp-buy .buy-actions {
        max-width: 100%;
    }

    .pdp-buy .buy-actions .btn-block {
        width: 100%;
    }
}

.pdp-details {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.pdp-meta {
    margin-top: var(--s4);
}

.pdp-about .pdp-meta {
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
}

.pdp-about:not(:has(.pdp-about-body)) .pdp-meta {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pdp-meta .spec-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 0.35rem 0.5rem;
    margin: 0;
    max-width: none;
}

.pdp-meta .spec-list div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2.75rem;
    height: 100%;
    padding: 0.35rem 0.55rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0.65rem;
    border-bottom: none;
}

.pdp-meta .spec-list dt {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.2;
}

.pdp-meta .spec-list dt::after {
    content: none;
}

.pdp-meta .spec-list dd {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--ink-2);
    text-align: left;
    word-break: normal;
    font-variation-settings: normal;
}

.pdp-details div:first-child {
    padding-top: 0;
}

.pdp-details div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.assurances {
    display: grid;
    gap: 0.55rem;
    margin: var(--s3) 0 0;
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

@media (min-width: 900px) {
    .assurances--compact {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.35rem 0.75rem;
        padding-top: var(--s3);
        margin-top: var(--s3);
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-variation-settings: 'opsz' 11, 'wght' 600;
        color: var(--ink-3);
    }

    .assurances--compact li {
        flex: 1 1 auto;
        justify-content: center;
        gap: 0.35rem;
    }

    .assurances--compact svg {
        width: 14px;
        height: 14px;
        margin-top: 0;
    }
}

.assurances li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.assurances svg {
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    flex-shrink: 0;
    color: var(--sage-deep);
}

.prose {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 62ch;
}

.spec-list {
    display: grid;
    gap: 0;
    margin: var(--s4) 0 0;
    max-width: 62ch;
}

.spec-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.8125rem;
}

.spec-list dt {
    color: var(--ink-3);
}

.spec-list dd {
    margin: 0;
    text-align: right;
    font-variation-settings: 'opsz' 14, 'wght' 550;
}

/* Thumb-reachable buy bar on small screens. */
.buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}

.buybar--hidden {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.buybar-price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-variation-settings: 'opsz' 24, 'wght' 620, 'SOFT' 0, 'WONK' 0;
    line-height: 1.1;
    white-space: nowrap;
}

.buybar-price small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variation-settings: 'opsz' 10, 'wght' 600;
}

.buybar form {
    flex: 1;
    display: flex;
}

@media (min-width: 900px) {
    .buybar {
        display: none;
    }
}

/* ------------------------------------------------------------------ cart */

.cart-page {
    padding-bottom: var(--s5);
}

.cart-page-head {
    margin-bottom: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid color-mix(in srgb, var(--clay) 18%, var(--rule));
}

.cart-page-head .display-m {
    color: var(--ink);
}

.cart-lede {
    margin: var(--s2) 0 0;
    max-width: 38rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.cart-layout {
    display: grid;
    gap: var(--s4);
    padding-bottom: var(--s4);
}

@media (min-width: 900px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--s5);
        align-items: start;
    }

    .cart-summary {
        position: sticky;
        top: calc(var(--header-h) + var(--s5));
    }
}

.cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
}

.cart-line-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--s3) var(--s4);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-lg);
    background: var(--paper-2);
    box-shadow: var(--lift-1), inset 0 0 0 1px var(--rule);
    transition: box-shadow var(--t-fast) var(--ease);
}

.cart-line-card:hover {
    box-shadow: var(--lift-2), inset 0 0 0 1px color-mix(in srgb, var(--clay) 22%, var(--rule));
}

.cart-line-art {
    width: 88px;
    height: 88px;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-3);
    align-self: start;
}

.cart-line-art picture,
.cart-line-art img,
.cart-line-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cart-line-art picture img,
.cart-line-art img,
.cart-line-art svg {
    object-fit: cover;
}

.cart-line-cat {
    margin: 0 0 0.15rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 650;
}

.cart-line-cat a {
    color: var(--ink-3);
    text-decoration: none;
}

.cart-line-cat a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.cart-line-main h3 {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 600;
    line-height: 1.35;
    margin: 0 0 0.2rem;
}

.cart-line-main h3 a {
    color: var(--ink);
    text-decoration: none;
}

.cart-line-main h3 a:hover {
    text-decoration: underline;
}

.cart-line-unit {
    margin-top: 0.15rem;
}

.cart-line-controls {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s3);
    padding-top: var(--s2);
    border-top: 1px solid var(--rule);
}

.cart-qty-label {
    font-size: 0.75rem;
    color: var(--ink-3);
    font-variation-settings: 'opsz' 12, 'wght' 600;
    margin-right: 0.35rem;
}

@media (min-width: 560px) {
    .cart-line-card {
        grid-template-columns: 88px minmax(0, 1fr) auto;
        align-items: start;
    }

    .cart-line-controls {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-end;
        border-top: none;
        padding-top: 0;
        gap: var(--s2);
    }
}

.cart-line-price {
    font-size: 1rem;
    font-variation-settings: 'opsz' 15, 'wght' 650;
    white-space: nowrap;
}

.link-quiet {
    background: none;
    border: none;
    padding: 0.5rem 0;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.link-quiet:hover {
    color: var(--danger);
}

.cart-summary {
    padding: var(--s4);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--clay-tint) 42%, var(--paper-2)) 0%, var(--paper-2) 3.5rem),
        var(--paper-2);
    box-shadow: var(--lift-1), inset 0 0 0 1px var(--rule);
}

.cart-summary-title {
    margin-bottom: var(--s3);
    color: var(--clay);
}

.cart-promo {
    margin-bottom: var(--s3);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--rule);
}

.cart-promo-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 13, 'wght' 600;
    color: var(--ink-2);
}

.cart-promo-row {
    display: flex;
    gap: var(--s2);
}

.cart-promo-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--paper);
}

.cart-promo-input:focus {
    outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--gold);
}

.cart-promo-msg {
    margin: 0.45rem 0 0;
    font-size: 0.75rem;
}

.cart-promo-msg.is-error {
    color: var(--danger);
}

.cart-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--gold) 12%, var(--paper));
}

.cart-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 13, 'wght' 650;
    color: #5F4708;
}

.cart-promo-tag svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.cart-promo-tag-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.cart-promo-benefit {
    font-variation-settings: 'opsz' 12, 'wght' 550;
    opacity: 0.9;
}

.sum-row {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    font-size: 0.9375rem;
    padding: 0.35rem 0;
}

.sum-row.is-muted {
    color: var(--ink-3);
    font-size: 0.8125rem;
}

.sum-row.is-discount {
    color: #2D6A4F;
    font-size: 0.875rem;
}

.sum-row.is-discount small {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.sum-row.is-total {
    margin-top: var(--s2);
    padding-top: var(--s3);
    border-top: 1px solid color-mix(in srgb, var(--clay) 20%, var(--rule));
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-variation-settings: 'opsz' 30, 'wght' 600, 'SOFT' 0, 'WONK' 0;
}

.sum-total-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
}

.sum-ship-plus {
    font-family: var(--font-display);
    font-variation-settings: inherit;
    line-height: 1;
}

.sum-ship-hint {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    color: var(--ink-3);
}

.cart-assurances {
    margin: var(--s3) 0 var(--s3);
    padding-top: var(--s3);
}

.cart-note {
    margin: 0 0 var(--s3);
    padding: var(--s3);
    border-radius: var(--r);
    background: var(--gold-tint);
    font-size: 0.75rem;
    line-height: 1.5;
    color: #5F4708;
}

.cart-keep-shopping {
    margin-top: 0.5rem;
}

.cart-empty {
    margin-top: var(--s3);
    padding: clamp(2.75rem, 10vw, 4.75rem) var(--s4);
    border-radius: var(--r-lg);
    background:
        radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--clay-tint) 55%, transparent), transparent 72%),
        var(--paper-2);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.cart-notice {
    margin: 0 0 var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--danger) 8%, var(--paper-2));
    color: var(--danger);
    font-size: 0.875rem;
}

/* Cart recommendations */
.cart-recs {
    margin-top: var(--s4);
    padding-block: var(--s5) var(--s6);
}

.cart-recs-lede {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-2);
    max-width: 28rem;
}

.cart-recs-grid {
    margin-top: var(--s3);
}

@media (max-width: 399px) {
    .cart-page-head {
        margin-bottom: var(--s3);
    }

    .cart-lede {
        font-size: 0.875rem;
    }

    .cart-line-card {
        grid-template-columns: 72px minmax(0, 1fr);
        padding: var(--s3);
        gap: var(--s2) var(--s3);
    }

    .cart-line-art {
        width: 72px;
        height: 72px;
    }

    .cart-line-main h3 {
        font-size: 0.875rem;
    }

    .cart-summary {
        padding: var(--s3);
    }

    .cart-promo-row {
        flex-direction: column;
    }

    .cart-promo-row .btn {
        width: 100%;
    }

    .cart-recs .section-head {
        margin-bottom: var(--s3);
    }

    .cart-recs-lede {
        font-size: 0.8125rem;
    }

    .cart-recs-grid {
        gap: var(--s2);
    }
}

/* Cart drawer lines --------------------------------------------------- */

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

.mini-line {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: var(--s3);
    align-items: start;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
}

.mini-line-art {
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper-3);
}

.mini-line-art picture,
.mini-line-art img,
.mini-line-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mini-line-art picture img,
.mini-line-art img,
.mini-line-art svg {
    object-fit: cover;
}

.mini-line h4 {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 600;
    line-height: 1.3;
    margin: 0 0 0.15rem;
}

.mini-line h4 a {
    color: var(--ink);
    text-decoration: none;
}

.mini-line-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mini-line-qty .stepper {
    margin-top: 0.15rem;
}

.mini-line-qty .stepper button,
.mini-line-qty .stepper .stepper-value {
    width: 44px;
    height: 44px;
}

.mini-line-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.mini-line-price {
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 650;
    white-space: nowrap;
}

.mini-line-side .link-quiet {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ----------------------------------------------------------- empty state */

.empty {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--s4);
    padding: clamp(2.5rem, 9vw, 4.5rem) var(--s4);
    max-width: 44ch;
    margin-inline: auto;
}

.empty p {
    margin: 0;
    color: var(--ink-2);
}

.empty .btn-row {
    justify-content: center;
}

/* The same nest that carries the 404 pages, so an empty result never looks
   like a failure — it looks like part of the shop. */
.nest-mark {
    position: relative;
    width: 104px;
    height: 104px;
}

.nest-mark i {
    position: absolute;
    inset: 0;
    border: 2.5px solid var(--clay);
    border-radius: 50%;
    opacity: 0.32;
}

.nest-mark i:nth-child(2) {
    inset: 8%;
    border-color: var(--sage);
    transform: rotate(14deg);
}

.nest-mark i:nth-child(3) {
    inset: 16%;
    border-color: var(--gold);
    opacity: 0.5;
    transform: rotate(-9deg);
}

.nest-mark b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 41px;
    transform: translate(-50%, -55%);
    background: linear-gradient(145deg, #fff, var(--clay-tint));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: inset -2px -3px 6px rgba(200, 85, 61, .15);
}

.nest-mark.is-small {
    width: 72px;
    height: 72px;
}

.nest-mark.is-small b {
    width: 22px;
    height: 28px;
}

/* ----------------------------------------------------------- pagination */

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--s6);
    padding: 0;
    list-style: none;
}

.pager a,
.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 0.85rem;
    border-radius: var(--r);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 550;
    color: var(--ink);
    text-decoration: none;
}

.pager a:hover {
    background: var(--paper-3);
}

.pager [aria-current='page'] {
    background: var(--ink);
    color: var(--paper);
    font-variation-settings: 'opsz' 14, 'wght' 650;
}

.pager .is-gap {
    min-width: 24px;
    color: var(--ink-3);
}

/* ------------------------------------------------------------- no-JS bar */

.search-page-form {
    display: flex;
    gap: var(--s2);
    margin: var(--s4) 0 var(--s5);
    max-width: 560px;
}

.search-page-form input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 1.1rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper-2);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
}

.search-page-form input:focus {
    outline: none;
    border-color: var(--ink);
}

.search-page-form input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* --------------------------------------------------------------- toasts */

.toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    z-index: 700;
    transform: translateX(-50%);
    display: grid;
    gap: var(--s2);
    width: max-content;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1.2rem;
    border-radius: var(--r-lg);
    background: var(--paper-2);
    color: var(--ink);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 550;
    box-shadow: var(--lift-3), inset 0 0 0 1px var(--rule);
    animation: toast-in 260ms var(--ease);
    pointer-events: auto;
}

.toast.is-leaving {
    animation: toast-out 220ms var(--ease) forwards;
}

.toast.is-success {
    background: var(--sage-tint);
    color: var(--sage-deep);
    box-shadow: var(--lift-2), inset 0 0 0 1px color-mix(in srgb, var(--sage-deep) 18%, transparent);
}

.toast.is-error {
    background: #fdeeed;
    color: var(--danger);
    box-shadow: var(--lift-2), inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent);
}

.toast.is-info {
    background: var(--indigo-tint);
    color: var(--indigo-deep);
    box-shadow: var(--lift-2), inset 0 0 0 1px color-mix(in srgb, var(--indigo-deep) 18%, transparent);
}

.toast svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* --------------------------------------------------------------- footer */

.site-footer {
    margin-top: var(--s7);
    background: var(--ink);
    color: #D8D1C7;
    padding-block: var(--s7) var(--s5);
}

.footer-grid {
    display: grid;
    gap: var(--s5);
}

@media (min-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--s6) var(--s5);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 980px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--s5);
    }

    .footer-brand {
        grid-column: auto;
    }
}

.footer-brand img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin-bottom: var(--s3);
}

.footer-brand p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #A9A196;
    max-width: 34ch;
}

.footer-tagline {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 22, 'wght' 560, 'SOFT' 30, 'WONK' 1;
    color: var(--gold);
    letter-spacing: 0.02em;
}

.site-footer h2 {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    color: #A69D91;
    margin: 0 0 var(--s3);
}

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

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: #D8D1C7;
    font-size: 0.875rem;
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-contact {
    font-size: 0.875rem;
    line-height: 1.7;
    color: #A9A196;
}

.footer-contact a {
    color: #fff;
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-contact strong {
    display: block;
    color: #fff;
    font-variation-settings: 'opsz' 14, 'wght' 600;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s3);
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 0.75rem;
    color: #A69D91;
}

@media (max-width: 400px) {
    .site-footer {
        padding-block: var(--s6) var(--s4);
    }

    .footer-grid {
        gap: var(--s5);
    }

    .footer-links a {
        min-height: 44px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s2);
    }
}

/* Leftover WhatsApp FAB — human chat lives inside Meanits only. */
.wa-fab {
    display: none !important;
}

/* --------------------------------------------------------- login modal */

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

.login-modal.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}

.login-modal .overlay-scrim {
    position: absolute;
    inset: 0;
}

.login-modal.is-open .overlay-scrim {
    opacity: 1;
}

.login-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(92vh, 560px);
    background: var(--paper);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--lift-3);
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease);
}

.login-modal.is-open .login-dialog {
    transform: none;
}

.login-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4) var(--s3) var(--s3) var(--s5);
    border-bottom: 1px solid var(--rule);
}

.login-dialog-head h2 {
    margin: 0.15rem 0 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-variation-settings: 'opsz' 24, 'wght' 580, 'SOFT' 20, 'WONK' 0;
}

.login-dialog-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s5);
}

.auth-panels {
    position: relative;
}

.auth-panel {
    width: 100%;
}

.auth-panel-enter {
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.auth-panel-enter-start {
    opacity: 0;
    transform: translateY(10px);
}

.auth-panel-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.auth-panel-leave {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 280ms var(--ease), transform 280ms var(--ease);
    pointer-events: none;
}

.auth-panel-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.auth-panel-leave-end {
    opacity: 0;
    transform: translateY(-8px);
}

.signup-contact-toggle {
    display: flex;
    gap: 0;
    margin-bottom: var(--s4);
    padding: 3px;
    border-radius: var(--r);
    background: var(--paper-2);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.signup-contact-option {
    flex: 1;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: calc(var(--r) - 2px);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 12, 'wght' 620;
    color: var(--ink-3);
    cursor: pointer;
    transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.signup-contact-option.is-active {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 0 0 1px var(--rule);
}

.signup-contact-option:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 1px;
}

.req {
    color: var(--gold-deep);
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: var(--s4);
}

.login-field > span {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 12, 'wght' 620;
    color: var(--ink-3);
}

.login-field input {
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--r);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 1rem;
}

.login-field input:focus {
    outline: 2px solid var(--sage-deep);
    outline-offset: 1px;
    border-color: var(--sage-deep);
}

.login-fallback {
    margin: var(--s4) 0 0;
    text-align: center;
}

.login-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--s5);
    border-bottom: 1px solid var(--rule);
}

.login-tab {
    flex: 1;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 12, 'wght' 620;
    color: var(--ink-3);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: -1px;
}

.login-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--sage-deep);
}

.login-tabs-page {
    margin-bottom: var(--s5);
    padding: 0;
    max-width: 20rem;
}

.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sage-deep);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 640px) {
    .login-modal {
        align-items: center;
        padding: var(--s4);
    }

    .login-dialog {
        width: min(420px, calc(100vw - 2rem));
        max-height: min(85vh, 560px);
        border-radius: var(--r-xl);
        transform: translateY(1rem) scale(0.98);
    }

    .login-modal.is-open .login-dialog {
        transform: none;
    }
}

/* ----------------------------------------------------------- AI chat */

.ai-chat-fab {
    position: fixed;
    right: var(--s4);
    left: auto;
    bottom: calc(var(--s4) + env(safe-area-inset-bottom));
    z-index: 140;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0 1.05rem 0 0.45rem;
    border: none;
    border-radius: 999px;
    background: var(--clay-deep);
    color: #fff;
    box-shadow: var(--lift-2);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 620;
    cursor: pointer;
    transition: transform var(--t) var(--ease), bottom var(--t) var(--ease), background var(--t) var(--ease);
}

.ai-chat-fab-avatar,
.ai-chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 620, 'SOFT' 20;
    line-height: 1;
}

.ai-chat-fab-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, #fff 18%, transparent);
    font-size: 0.95rem;
}

.ai-chat-fab:hover {
    background: var(--clay-press);
    transform: scale(1.03);
}

.ai-chat-fab-label {
    display: none;
}

.ai-chat-sheet {
    position: fixed;
    inset: 0;
    z-index: 650;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

.ai-chat-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}

.ai-chat-sheet .overlay-scrim {
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.ai-chat-sheet.is-open .overlay-scrim {
    opacity: 1;
}

.ai-chat-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    height: min(88dvh, 720px);
    max-height: min(88dvh, 720px);
    background:
        linear-gradient(180deg, var(--clay-tint) 0, var(--paper) 7.5rem);
    border-radius: 1.35rem 1.35rem 0 0;
    box-shadow: var(--lift-3);
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease);
}

.ai-chat-sheet.is-open .ai-chat-panel {
    transform: none;
}

.ai-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: 0.85rem var(--gutter) 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--clay) 16%, var(--rule));
}

.ai-chat-head-id {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.ai-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clay-deep);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay-tint) 80%, #fff);
}

.ai-chat-head-copy {
    min-width: 0;
}

.ai-chat-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-variation-settings: 'opsz' 22, 'wght' 600, 'SOFT' 12;
    line-height: 1.15;
}

.ai-chat-head p {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-head-tools {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.ai-chat-head-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 36px;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 999px;
    background: var(--whatsapp);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-variation-settings: 'opsz' 12, 'wght' 620;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}

.ai-chat-head-wa svg {
    width: 15px;
    height: 15px;
}

.ai-chat-head-wa:hover {
    color: #fff;
    filter: brightness(1.06);
}

.ai-chat-close {
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.ai-chat-body {
    flex: 1;
    overflow: auto;
    padding: 0.95rem var(--gutter) 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-chat-turn {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 94%;
}

.ai-chat-turn-user {
    align-self: flex-end;
    align-items: flex-end;
}

.ai-chat-turn-bot {
    align-self: flex-start;
    align-items: flex-start;
}

.ai-chat-msg {
    max-width: 100%;
    padding: 0.75rem 0.95rem;
    border-radius: 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ai-chat-msg-bot {
    align-self: flex-start;
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-bottom-left-radius: 0.35rem;
    box-shadow: var(--lift-1);
}

.ai-chat-msg-user {
    align-self: flex-end;
    background: var(--clay-deep);
    color: #fff;
    border-bottom-right-radius: 0.35rem;
}

.ai-chat-time {
    font-size: 0.6875rem;
    color: var(--ink-3);
    padding: 0 0.25rem;
}

.ai-chat-typing,
.ai-chat-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.86;
    font-style: italic;
    color: var(--ink-2);
    animation: ai-chat-status-pulse 2.2s ease-in-out infinite;
}

.ai-chat-status-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.86;
    font-style: italic;
    color: var(--ink-2);
    animation: ai-chat-status-pulse 2.2s ease-in-out infinite;
}

.ai-chat-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--clay);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--clay) 18%, transparent);
    animation: ai-chat-status-pulse 1.6s ease-in-out infinite;
}

@keyframes ai-chat-status-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.ai-chat-bot-text {
    display: inline;
}

.ai-chat-type-cursor {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: currentColor;
    opacity: 0.5;
    animation: ai-chat-cursor-blink 1s step-end infinite;
}

@keyframes ai-chat-cursor-blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0; }
}

.ai-chat-dots::after {
    display: inline-block;
    width: 1.25em;
    text-align: left;
    animation: ai-chat-dots 1.4s steps(4, end) infinite;
    content: '';
}

@keyframes ai-chat-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75%, 100% { content: '...'; }
}

.ai-chat-msg-bot a {
    color: var(--clay-deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--clay) 45%, transparent);
    text-underline-offset: 2px;
}

.ai-chat-msg-bot a:hover {
    text-decoration-color: currentColor;
}

.ai-chat-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.05rem 0 0.2rem;
}

.ai-chat-greet-sub {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink-3);
}

.ai-chat-summary {
    margin: 0.45rem 0 0;
    padding: 0.7rem 0.8rem 0.65rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, var(--clay) 32%, var(--rule));
    border-radius: 12px;
    background: color-mix(in srgb, var(--clay-tint) 78%, var(--paper));
}

.ai-chat-turn-bot .ai-chat-summary {
    margin-right: auto;
}

.ai-chat-summary-label {
    margin: 0 0 0.45rem;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clay-deep);
    font-variation-settings: 'opsz' 12, 'wght' 620;
}

.ai-chat-summary dl {
    margin: 0;
}

.ai-chat-summary-row + .ai-chat-summary-row {
    margin-top: 0.4rem;
}

.ai-chat-summary dt {
    margin: 0;
    font-size: 0.68rem;
    color: var(--ink-3);
    font-variation-settings: 'opsz' 12, 'wght' 560;
}

.ai-chat-summary dd {
    margin: 0.1rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.ai-chat-actions .ai-chat-chip {
    white-space: normal;
}

.ai-chat-chip {
    padding: 0.4rem 0.8rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 14, 'wght' 520;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    max-width: 100%;
    text-align: left;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.ai-chat-chip:hover {
    background: var(--clay-tint);
    border-color: color-mix(in srgb, var(--clay) 35%, var(--rule-strong));
    color: var(--ink);
}

.ai-chat-chip-wa {
    border-color: color-mix(in srgb, var(--whatsapp) 35%, var(--rule-strong));
    color: var(--whatsapp-press);
}

.ai-chat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.1rem;
}

.ai-chat-action-btn {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-variation-settings: 'opsz' 14, 'wght' 520;
    line-height: 1.25;
    text-decoration: none;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.ai-chat-action-btn:hover {
    background: var(--clay-tint);
    border-color: color-mix(in srgb, var(--clay) 30%, var(--rule-strong));
    color: var(--ink);
}

.ai-chat-action-wa {
    background: var(--whatsapp);
    border-color: var(--whatsapp);
    color: #fff;
}

.ai-chat-action-wa:hover {
    background: var(--whatsapp-press);
    border-color: var(--whatsapp-press);
    color: #fff;
}

.ai-chat-foot {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.65rem var(--gutter) calc(0.8rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background: var(--paper);
}

.ai-chat-foot textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 108px;
    overflow-y: hidden;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 1.25rem;
    background: var(--paper-2);
    font: inherit;
    font-size: 1rem;
    line-height: 1.35;
    resize: none;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ai-chat-foot textarea:focus {
    outline: none;
    border-color: var(--clay);
    background: var(--paper);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 16%, transparent);
}

.ai-chat-foot textarea:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 2px;
}

.ai-chat-send {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--clay-deep);
    color: #fff;
    cursor: pointer;
    transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}

.ai-chat-send svg {
    width: 20px;
    height: 20px;
}

.ai-chat-send:hover:not(:disabled) {
    background: var(--clay-press);
}

.ai-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 399px) {
    .ai-chat-head {
        gap: 0.5rem;
        padding-left: 0.85rem;
        padding-right: 0.75rem;
    }

    .ai-chat-head p {
        display: none;
    }

    .ai-chat-head-wa {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .ai-chat-head-wa span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ai-chat-summary {
        padding: 0.6rem 0.7rem 0.55rem;
    }
}

@media (max-width: 899px) {
    body.has-buybar:not(.buybar-anchor-visible) .ai-chat-fab {
        bottom: calc(var(--buybar-height, 76px) + var(--s3) + env(safe-area-inset-bottom));
        right: var(--s4);
        left: auto;
    }

    body.page-checkout .ai-chat-fab {
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }

    body.page-checkout .ai-chat-panel {
        bottom: calc(4.75rem + env(safe-area-inset-bottom));
        height: min(calc(88dvh - 4.75rem), 720px);
        max-height: calc(88dvh - 4.75rem - env(safe-area-inset-bottom));
    }
}

@media (min-width: 560px) {
    .ai-chat-fab-label {
        display: inline;
    }
}

@media (min-width: 900px) {
    body.has-buybar .ai-chat-fab,
    body.page-checkout .ai-chat-fab {
        bottom: calc(var(--s4) + env(safe-area-inset-bottom));
    }

    .ai-chat-panel {
        right: var(--s4);
        left: auto;
        bottom: calc(var(--s4) + env(safe-area-inset-bottom));
        width: min(420px, calc(100vw - 2rem));
        height: min(78dvh, 680px);
        max-height: min(78dvh, 680px);
        border-radius: 1.25rem;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------- breakpoints */

@media (min-width: 560px) {
    .search-shortcuts {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 760px) {
    .brand-text {
        display: flex;
    }
}

@media (min-width: 900px) {
    .header-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Desktop search is a command palette, not a full-screen takeover. */
    .search-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(30, 26, 22, .4);
    }

    .search-dialog {
        inset: auto;
        top: 9vh;
        left: 50%;
        width: min(680px, calc(100vw - 3rem));
        max-height: min(68vh, 640px);
        transform: translate(-50%, 1rem);
        border-radius: var(--r-xl);
        border: 1px solid var(--rule);
        box-shadow: var(--lift-3);
        overflow: hidden;
    }

    .search-overlay.is-open .search-dialog {
        transform: translate(-50%, 0);
    }

    .search-bar {
        padding: 0.85rem 0.85rem 0.85rem 1.1rem;
        box-shadow: inset 0 -1px 0 var(--rule);
    }

    .search-results {
        padding: var(--s4) var(--s5) var(--s5);
    }

    .search-hints {
        display: flex;
    }

    .search-dismiss {
        display: none;
    }
}

/* ------------------------------------------------ wishlist / pincode / buybar */

.wishlist-btn {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    color: var(--ink-3);
    cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.wishlist-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
}

.wishlist-btn:hover {
    border-color: var(--clay);
    color: var(--clay-deep);
    background: var(--paper);
}

.wishlist-btn.is-active {
    border-color: color-mix(in srgb, var(--clay-deep) 35%, var(--rule-strong));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    color: var(--clay-deep);
}

.wishlist-btn.is-active svg {
    fill: currentColor;
}

.wishlist-btn-lg {
    position: static;
    flex-shrink: 0;
}

.pdp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}

.pdp-head .eyebrow {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pdp-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.95rem 0.4rem 0.75rem;
    border: 1.5px solid var(--clay-deep);
    border-radius: 999px;
    background: var(--clay-tint);
    color: var(--clay-deep);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 620;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
                color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.pdp-share-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pdp-share-btn:hover,
.pdp-share-btn:focus-visible {
    background: var(--clay);
    border-color: var(--clay);
    color: #fff;
}

.pdp-share-btn:active {
    transform: translateY(1px);
    background: var(--clay-press);
    border-color: var(--clay-press);
}

.pdp-share-btn[aria-busy='true'] {
    opacity: 0.7;
    cursor: wait;
}

.pdp-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 640;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}

.pdp-share-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t) var(--ease);
}

.pdp-share-sheet .overlay-scrim {
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.pdp-share-sheet.is-open .overlay-scrim {
    opacity: 1;
}

.pdp-share-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-height: min(88dvh, 520px);
    padding: 1.1rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, var(--clay-tint) 0, var(--paper) 5.5rem);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: var(--lift-3);
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease);
}

.pdp-share-sheet.is-open .pdp-share-panel {
    transform: none;
}

.pdp-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}

.pdp-share-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-variation-settings: 'opsz' 24, 'wght' 580, 'SOFT' 20, 'WONK' 0;
    color: var(--ink);
}

.pdp-share-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    color: var(--ink-2);
    cursor: pointer;
}

.pdp-share-close:hover,
.pdp-share-close:focus-visible {
    border-color: var(--clay);
    color: var(--clay-deep);
}

.pdp-share-lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.9rem;
}

.pdp-share-url {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-radius: 0.7rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-size: 0.8125rem;
    word-break: break-all;
}

.pdp-share-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pdp-share-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: 0.9rem;
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}

.pdp-share-action:hover,
.pdp-share-action:focus-visible {
    border-color: var(--clay);
    background: color-mix(in srgb, var(--clay-tint) 55%, var(--paper));
}

.pdp-share-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clay-tint);
    color: var(--clay-deep);
    flex-shrink: 0;
}

.pdp-share-action-icon--wa {
    background: color-mix(in srgb, var(--whatsapp) 16%, var(--paper));
    color: var(--whatsapp);
}

.pdp-share-action-icon--ig {
    background: #f6e6ee;
    color: #b43d6b;
}

.pdp-share-action-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pdp-share-action-copy strong {
    font-size: 0.9375rem;
    font-variation-settings: 'opsz' 15, 'wght' 620;
    color: var(--ink);
}

.pdp-share-action-copy small {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.pdp-share-hint {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-radius: 0.7rem;
    background: var(--clay-tint);
    color: var(--clay-deep);
    font-size: 0.8125rem;
}

@media (min-width: 560px) {
    .pdp-share-panel {
        right: auto;
        left: 50%;
        bottom: 1.25rem;
        width: min(400px, calc(100vw - 2rem));
        border-radius: 1.25rem;
        transform: translate(-50%, 24px);
    }

    .pdp-share-sheet.is-open .pdp-share-panel {
        transform: translate(-50%, 0);
    }
}

@media (max-width: 374px) {
    .pdp-share-btn {
        padding-inline: 0.7rem 0.8rem;
        font-size: 0.8125rem;
    }
}

.icon-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sage-deep);
    color: #fff;
    font-size: 0.6875rem;
    font-variation-settings: 'opsz' 11, 'wght' 700;
    border-radius: 999px;
    line-height: 1;
}

.icon-badge.is-empty {
    display: none;
}

/* PDP landed cost (item + shipping + platform fee) -------------------- */

.pdp-landed-band {
    padding: var(--s3);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--clay-tint) 42%, var(--paper-2)) 0%, var(--paper-2) 3.5rem),
        var(--paper-2);
    box-shadow: var(--lift-1), inset 0 0 0 1px var(--rule);
}

.pdp-landed-headline {
    margin: 0 0 var(--s2);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-variation-settings: 'opsz' 24, 'wght' 600, 'SOFT' 0, 'WONK' 0;
    line-height: 1.35;
    color: var(--clay-deep);
}

.pdp-landed-headline--loading {
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 500;
}

.pdp-landed-band .pincode-check--landed {
    padding: 0;
    margin: 0 0 var(--s2);
    background: transparent;
    box-shadow: none;
}

.pdp-landed-breakdown {
    margin: 0;
    padding: var(--s2) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--clay) 14%, var(--rule));
}

.pdp-landed-breakdown .sum-row {
    padding: 0.3rem 0;
}

.pdp-landed-breakdown .sum-row dt,
.pdp-landed-breakdown .sum-row dd {
    margin: 0;
}

.pdp-landed-breakdown .sum-row.is-total {
    margin-top: 0.35rem;
    padding-top: var(--s2);
    font-size: 1.15rem;
}

.pdp-landed-note {
    margin: var(--s2) 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ink-3);
}

.pdp-landed-band .pickup-hint {
    margin-top: var(--s2);
}

@media (max-width: 479px) {
    .pdp-landed-band {
        padding: var(--s2) var(--s3);
        border-radius: var(--r);
    }

    .pdp-landed-headline {
        font-size: 0.9375rem;
    }

    .pdp-landed-breakdown .sum-row {
        font-size: 0.875rem;
    }

    .pdp-landed-breakdown .sum-row.is-total {
        font-size: 1.05rem;
    }

    .pdp-landed-band .pincode-row input {
        min-height: 44px;
        font-size: 1rem;
    }

    .pdp-landed-band .pincode-row .btn-sm {
        min-height: 44px;
        padding-inline: 0.75rem;
    }
}

.pincode-check {
    padding: var(--s3);
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: inset 0 0 0 1px var(--rule);
}

.pincode-check > .field-label {
    margin-bottom: 0.55rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

@media (min-width: 900px) {
    .pdp-buy .pincode-check {
        padding: var(--s3);
        border-radius: var(--r);
        background: color-mix(in srgb, var(--paper) 70%, var(--paper-3));
        box-shadow: inset 0 0 0 1px var(--rule);
    }

    .pincode-label-long {
        display: none;
    }

    .pincode-label-short {
        display: inline;
    }

    .pincode-check > .field-label {
        margin-bottom: 0.55rem;
    }

    .pickup-hint {
        margin: 0.65rem 0 0;
        font-size: 0.75rem;
    }

    .pickup-hint > summary {
        pointer-events: none;
        cursor: default;
    }

    .pickup-hint > summary::after {
        content: none;
    }

    .pickup-hint .meta {
        display: none;
    }

    .pincode-row input {
        min-height: 40px;
        font-size: 0.875rem;
    }

    .pincode-row .btn-sm {
        min-height: 40px;
        padding-inline: 0.85rem;
    }

    .buy-actions--por {
        margin-top: var(--s4);
    }

    .buy-actions--por .btn-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s2);
    }

    .buy-actions--por .btn {
        min-height: 44px;
        padding: 0.55rem 0.75rem;
        font-size: 0.8125rem;
    }
}

.pincode-row {
    display: flex;
    gap: var(--s2);
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.pincode-row input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--r);
    background: var(--paper-2);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
}

.pincode-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pincode-row input:focus {
    outline: 2px solid var(--sage-deep);
    outline-offset: 1px;
    border-color: var(--sage-deep);
}

.pincode-result {
    margin: 0.65rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-2);
}

.pincode-result.is-ok {
    color: var(--sage-deep);
}

.pincode-result.is-error {
    color: var(--clay-deep);
}

.field-error {
    display: block;
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--clay-deep);
}

.account-field.has-error input,
.account-field.has-error textarea,
.login-field.has-error input,
.checkout-field.has-error input,
.checkout-field.has-error select {
    border-color: var(--clay-deep);
}

.pincode-lookup {
    display: block;
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--ink-3);
    font-variation-settings: 'opsz' 12, 'wght' 500;
}

/* ----------------------------------------------------------- reviews / pickup */

.pdp-reviews {
    margin-top: var(--s5);
    padding: var(--s5);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-xl);
    box-shadow: var(--lift-1);
}

.pdp-reviews-body {
    display: block;
}

.pdp-reviews-lede {
    margin: 0.55rem 0 0;
    max-width: 28ch;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.015em;
    font-variation-settings: 'opsz' 32, 'wght' 520, 'SOFT' 28, 'WONK' 0;
    color: var(--ink);
}

.review-form-kicker {
    margin: 0 0 var(--s3);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 11, 'wght' 620;
    color: var(--ink-3);
}

@media (min-width: 900px) {
    .pdp-reviews {
        margin-top: 0;
        border-radius: calc(var(--r-xl) + 2px);
    }

    .pdp-reviews-head {
        margin-bottom: var(--s3);
        flex-shrink: 0;
    }

    .pdp-reviews-lede {
        font-size: 1.05rem;
        line-height: 1.38;
        max-width: 22ch;
        margin-bottom: var(--s2);
    }

    /* Sister-card stretch: body fills card; form pins to bottom. */
    .pdp:has(.pdp-about) .pdp-reviews-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--s3);
        min-height: 0;
    }

    .pdp:has(.pdp-about) .pdp-reviews-main {
        flex: 1 1 auto;
        min-height: 0;
    }

    .pdp:has(.pdp-about) .review-form-wrap {
        margin-top: auto;
        padding-top: var(--s3);
        border-top: 1px solid var(--rule);
    }

    .pdp:not(:has(.pdp-about)) .pdp-reviews .pdp-reviews-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        gap: var(--s4);
        align-items: start;
    }

    .pdp-reviews-main:empty {
        display: none;
    }

    .pdp-reviews-main:empty + .review-form-wrap {
        max-width: none;
    }

    .pdp-reviews.is-empty {
        padding: var(--s5);
    }

    .pdp-reviews.is-empty .pdp-reviews-head {
        margin-bottom: var(--s2);
    }

    .pdp-reviews.is-empty .pdp-reviews-lede {
        max-width: none;
        margin: 0.55rem 0 0;
    }

    .review-list {
        gap: var(--s3);
        margin-bottom: 0;
    }

    .review-item {
        padding: var(--s3) 0;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--rule);
        border-radius: 0;
    }

    .review-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .review-form-wrap {
        max-width: none;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .review-form-kicker {
        margin-bottom: var(--s3);
    }

    .review-verify-note {
        margin-bottom: var(--s3);
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .review-form .field-label,
    .review-verify .field-label {
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        margin-bottom: var(--s2);
    }

    .review-stars-input {
        margin-bottom: var(--s3);
    }

    .review-star-btn {
        font-size: 1.35rem;
    }

    .review-textarea {
        min-height: 5.5rem;
        margin-bottom: var(--s3);
        padding: 0.8rem 0.9rem;
        font-size: 0.9375rem;
        background: var(--paper);
        border: 1.5px solid var(--rule-strong);
        border-radius: var(--r);
    }

    .review-form .btn-sm,
    .review-verify .btn-sm {
        min-height: 42px;
    }
}

.pdp-reviews-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.pdp-reviews-summary {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.pdp-stars {
    display: inline-flex;
    gap: 0.1rem;
    color: var(--rule-strong);
    letter-spacing: -0.05em;
}

.pdp-stars .is-on,
.review-star-btn.is-on {
    color: var(--clay);
}

.pdp-stars--sm {
    font-size: 0.8125rem;
}

.review-list {
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
    display: grid;
    gap: var(--s3);
}

.review-item {
    padding: var(--s3);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

.review-item-head {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: 0.45rem;
}

.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sage-deep);
}

.review-body {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink);
}

.review-date {
    margin: 0;
    font-size: 0.75rem;
}

.review-form-wrap {
    max-width: 36rem;
}

.review-form-wrap .field-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variation-settings: 'opsz' 12, 'wght' 620;
    color: var(--ink-3);
    margin: 0 0 var(--s2);
}

.review-verify-note {
    margin: 0 0 var(--s3);
}

.review-form .field-label {
    margin-bottom: var(--s2);
}

.review-stars-input {
    display: flex;
    gap: 0.15rem;
    margin-bottom: var(--s3);
}

.review-star-btn {
    border: 0;
    background: none;
    padding: 0.15rem;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--rule-strong);
    cursor: pointer;
}

.review-star-btn:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

.review-textarea {
    display: block;
    width: 100%;
    margin-bottom: var(--s3);
    padding: 0.75rem 0.85rem;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--r);
    resize: vertical;
    min-height: 4.5rem;
}

.review-textarea:focus {
    outline: none;
    border-color: var(--sage-deep);
}

.review-textarea:focus-visible {
    outline: 2px solid var(--sage-deep);
    outline-offset: 3px;
}

.dev-otp {
    margin-top: 0.5rem;
    color: var(--clay-deep);
}

.pickup-hint {
    margin: 0.65rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.pickup-hint > summary {
    cursor: pointer;
    list-style: none;
    color: var(--sage-deep);
    font-weight: 500;
}

.pickup-hint > summary::-webkit-details-marker {
    display: none;
}

.pickup-hint > summary::after {
    content: ' ›';
    opacity: 0.6;
}

.pickup-hint[open] > summary::after {
    content: '';
}

.pickup-hint .meta {
    margin: 0.45rem 0 0;
    line-height: 1.45;
}

.pickup-hint .pickup-address {
    white-space: pre-line;
}

.cart-pickup-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink-2);
}

.buy-actions .btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}

.buy-action-form {
    margin: 0;
    min-width: 0;
}

.buybar-actions {
    flex: 1;
    display: flex;
    gap: var(--s2);
    min-width: 0;
}

.buybar-form {
    flex: 1;
    margin: 0;
    min-width: 0;
}

.buybar-form .btn {
    width: 100%;
    padding-inline: 0.85rem;
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .card-product:hover,
    .cat-tile:hover,
    .hero-tile:hover {
        transform: none;
    }

    .drawer-panel,
    .search-dialog,
    .login-dialog,
    .lightbox-dialog {
        transform: none !important;
    }

    .pdp-zoom-cue {
        transform: none;
    }
}

.cart-notice {
  margin: 0 0 var(--s5);
  padding: .75rem 1rem;
  border: 1px solid rgba(158, 74, 58, .3);
  border-left: 3px solid #9E4A3A;
  border-radius: var(--r-sm);
  background: rgba(158, 74, 58, .07);
  color: #7C3A2D;
  font-size: 0.875rem;
}

/* ----------------------------------------------------------- shop catalogue */

/* Intro band (crumbs, title, toolbar) spans the full row above sidebar + grid. */
.shop-intro {
    width: 100%;
}

.shop-page .page-head {
    padding-bottom: var(--s3);
}

.shop-page .page-head .lede {
    max-width: none;
}

.shop-shelves {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 var(--s4);
    padding: 0.25rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    width: fit-content;
    max-width: 100%;
}

.shop-shelf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: calc(var(--r-lg) - 2px);
    font-size: 0.875rem;
    color: var(--ink-2);
    text-decoration: none;
}

.shop-shelf small {
    color: var(--ink-3);
    font-size: 0.75rem;
}

.shop-shelf:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.shop-shelf.is-active {
    background: var(--paper);
    color: var(--ink);
    font-variation-settings: 'wght' 600;
    box-shadow: var(--lift-1);
}

.shop-quote-shelf {
    margin-top: var(--s6);
    padding-top: var(--s5);
    border-top: 1px solid var(--rule);
}

.shop-quote-shelf .section-head {
    margin-bottom: var(--s4);
}

.pdp-product-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.45rem;
    margin: var(--s3) 0 0;
    max-width: none;
}

.pdp-product-specs div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.65rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0.65rem;
}

.pdp-product-specs dt {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.pdp-product-specs dd {
    margin: 0;
    text-align: left;
    font-size: 0.875rem;
    font-variation-settings: 'opsz' 14, 'wght' 550;
}

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s4);
}

.shop-result-count {
    margin: 0;
    flex: 1 1 auto;
}

.shop-filtered-note {
    color: var(--ink-3);
}

.shop-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    width: 100%;
}

@media (min-width: 640px) {
    .shop-toolbar-actions {
        width: auto;
        justify-content: flex-end;
    }
}

.shop-filters-toggle {
    position: relative;
    min-height: 44px;
}

.shop-filter-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--clay);
}

.shop-sort {
    flex: 1;
    min-width: 0;
}

@media (min-width: 640px) {
    .shop-sort {
        flex: 0 1 auto;
        min-width: 11rem;
    }
}

.shop-sort select {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 2rem 0.55rem 0.75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C534A' d='M1.2 1.2 6 6l4.8-4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
}

.shop-layout {
    display: block;
}

.shop-sidebar {
    display: none;
}

.shop-main {
    min-width: 0;
}

@media (min-width: 900px) {
    .shop-page {
        display: grid;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        column-gap: var(--s6);
        row-gap: var(--s4);
        align-items: start;
    }

    .shop-intro,
    .shop-filters-drawer {
        grid-column: 1 / -1;
    }

    .shop-layout {
        display: contents;
    }

    .shop-sidebar {
        display: block;
        position: sticky;
        top: calc(var(--header-h, 4rem) + var(--s3));
    }

    .shop-filters-toggle {
        display: none;
    }
}

.shop-filters-panel {
    padding: var(--s4);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-1);
}

.shop-filters-drawer .shop-filters-panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.shop-filters-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 24, 'wght' 580, 'SOFT' 20, 'WONK' 0;
    margin: 0 0 var(--s4);
}

.shop-filters-drawer .shop-filters-title {
    display: none;
}

.shop-filter-group {
    border: none;
    margin: 0 0 var(--s4);
    padding: 0;
}

.shop-filter-group legend {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s2);
    padding: 0;
}

.shop-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.shop-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-size: 0.875rem;
    cursor: pointer;
}

.shop-check input {
    margin-top: 0.15rem;
    accent-color: var(--clay);
}

.shop-check span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.shop-check small {
    color: var(--ink-3);
    font-size: 0.75rem;
}

.shop-price-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s2);
}

.shop-price-range input {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    font: inherit;
    font-size: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--paper);
}

.shop-filter-hint {
    margin: var(--s2) 0 0;
    font-size: 0.75rem;
}

.shop-filter-actions {
    display: grid;
    gap: var(--s2);
    margin-top: var(--s4);
}

.shop-filters-drawer .shop-filter-actions {
    position: sticky;
    bottom: 0;
    margin: 0 calc(-1 * var(--s5));
    padding: 0.85rem var(--s5) calc(0.85rem + env(safe-area-inset-bottom));
    background: var(--paper);
    box-shadow: 0 -1px 0 var(--rule);
}

/* ----------------------------------------------------------- legal pages */

.legal-page {
    padding-bottom: var(--s7);
    overflow-wrap: break-word;
}

.legal-updated {
    margin: 0.45rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.legal-article,
.legal-article.prose {
    max-width: none;
}

.legal-article--sitemap {
    max-width: none;
}

.legal-article h2 {
    margin: var(--s5) 0 var(--s3);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-variation-settings: 'opsz' 22, 'wght' 620;
    color: var(--clay-deep);
}

.legal-article h3 {
    margin: var(--s4) 0 var(--s2);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 18, 'wght' 600;
    color: var(--ink);
}

.legal-article ul {
    margin: 0 0 var(--s4);
    padding-left: 1.15rem;
}

.legal-article li {
    margin: 0.35rem 0;
}

.legal-article a {
    color: var(--clay-deep);
}

.legal-seller-card {
    margin: 0 0 var(--s5);
    padding: var(--s4) var(--s4) var(--s3);
    background: linear-gradient(160deg, rgba(91, 123, 107, 0.1) 0%, #fff 55%);
    border: 1px solid rgba(91, 123, 107, 0.28);
    border-radius: var(--r-md);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.legal-seller-card__eyebrow {
    margin: 0 0 var(--s3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sage);
}

.legal-seller-card__dl {
    margin-bottom: 0;
}

.footer-legal-name {
    display: block;
    font-size: 0.78rem;
    color: var(--ink-3);
}

.footer-nav-group-policies .compliance-policy-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.88rem;
}

.footer-nav-group-policies .compliance-policy-links a {
    color: var(--ink-2);
    text-decoration: none;
}

.footer-nav-group-policies .compliance-policy-links a:hover {
    color: var(--clay-deep);
    text-decoration: underline;
}

.compliance-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin: 0 0 var(--s4);
    padding: 0.75rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 0.84rem;
}

.compliance-policy-links a {
    font-weight: 600;
    color: var(--clay-deep);
}

.legal-use-case {
    margin: var(--s4) 0;
    padding: var(--s4);
    background: #faf9f7;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule);
}

.legal-use-case h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.legal-callout {
    margin: var(--s4) 0;
    padding: var(--s4);
    background: var(--clay-tint);
    border-left: 3px solid var(--clay-deep);
    border-radius: var(--r-sm);
}

.legal-callout p {
    margin: 0;
}

.legal-dl {
    display: grid;
    gap: 0;
    margin: 0 0 var(--s4);
}

.legal-dl div {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--s3);
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.875rem;
}

.legal-dl dt {
    color: var(--ink-3);
}

.legal-dl dd {
    margin: 0;
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: var(--s6) 0 0;
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
}

.legal-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--ink-2);
    text-decoration: none;
}

.legal-nav a:hover {
    color: var(--clay-deep);
    text-decoration: underline;
}

.legal-nav a[aria-current="page"] {
    color: var(--clay-deep);
    font-variation-settings: 'opsz' 14, 'wght' 620;
}

.legal-sitemap {
    display: grid;
    gap: var(--s5);
}

.legal-sitemap-group h3 {
    margin: 0 0 var(--s2);
}

.legal-sitemap-list {
    margin: 0 0 var(--s4);
    padding-left: 1.15rem;
}

.legal-sitemap-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-3);
}

@media (min-width: 720px) {
    .legal-sitemap {
        grid-template-columns: 1fr 1fr;
        gap: var(--s5) var(--s6);
    }
}

@media (max-width: 400px) {
    .legal-article h2 {
        font-size: 1.125rem;
    }

    .legal-callout {
        padding: var(--s3);
    }

    .legal-dl div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .legal-nav {
        gap: 0.15rem 0.75rem;
    }

    .legal-nav a {
        min-height: 44px;
    }
}

/* ------------------------------------------------ Phase 6 mobile-best (375px) */

@media (max-width: 899px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
    }

    .shop-filters-drawer .drawer-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: min(88dvh, 720px);
        border-radius: 1.25rem 1.25rem 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .shop-filters-drawer.is-open .drawer-panel {
        transform: none;
    }

    .hero-grid,
    .cat-grid,
    .grid,
    .footer-grid {
        min-width: 0;
    }

    .hero h1,
    .display-xl {
        overflow-wrap: anywhere;
    }

    .site-header,
    .announce {
        padding-left: max(var(--gutter), env(safe-area-inset-left));
        padding-right: max(var(--gutter), env(safe-area-inset-right));
    }

    .wrap {
        padding-left: max(var(--gutter), env(safe-area-inset-left));
        padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
}

@media (max-width: 400px) {
    .shop-toolbar-actions {
        width: 100%;
    }

    .shop-filters-toggle,
    .shop-sort {
        flex: 1 1 calc(50% - 0.35rem);
    }

    .hero-facts {
        gap: 0.65rem;
    }

    .btn-row {
        flex-wrap: wrap;
    }

    .btn-row .btn {
        min-height: 44px;
    }
}

/* Phase 2: bundle components, review title */
.bundle-component-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
}
.bundle-component-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
}
.bundle-component-item:last-child { border-bottom: 0; }
.bundle-component-name { font-weight: 600; }
.review-title-input {
    width: 100%;
    margin-block: var(--s2) var(--s3);
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font: inherit;
}

/* ---------------------------------------------------- homepage storefront 2
   Product-led, mobile-first merchandising. Kept under page-home-v2 so the
   mature shop, PDP and checkout surfaces retain their established behaviour. */

.page-home-v2 .brand-text {
    display: flex;
}

.page-home-v2 .brand-tagline {
    display: none;
}

.page-home-v2 .brand-mark {
    font-size: 0.9rem;
    letter-spacing: 0.045em;
}

/* The homepage has its own contextual Meanits entry near the primary CTA.
   Removing the fixed duplicate keeps it from covering mobile shop controls. */
.page-home-v2 .ai-chat-fab {
    display: none;
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 0 0 var(--s5);
    background:
        radial-gradient(circle at 8% 12%, rgba(200, 85, 61, .14), transparent 28%),
        radial-gradient(circle at 92% 20%, rgba(212, 160, 23, .15), transparent 26%),
        var(--paper);
}

.home-hero-grid {
    display: grid;
    gap: 0;
}

.home-hero-showcase {
    order: -1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, .9fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    height: clamp(310px, 88vw, 370px);
    margin-inline: calc(var(--gutter) * -1);
    padding: .55rem var(--gutter) 1.75rem;
    background: linear-gradient(135deg, var(--clay-tint), var(--gold-tint) 48%, var(--sage-tint));
}

.home-showcase-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1rem;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(75, 51, 44, .12);
}

.home-showcase-card--1 {
    grid-row: 1 / 3;
}

.home-showcase-image,
.home-showcase-image picture,
.home-showcase-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-showcase-image img {
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}

.home-showcase-card--1 .home-showcase-image img {
    object-position: 56% center;
}

.home-showcase-card--story .home-showcase-info {
    background: color-mix(in srgb, var(--paper-2) 92%, transparent);
}

.home-showcase-card--story .home-showcase-info b {
    color: var(--sage-deep);
}

.home-showcase-info {
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .6rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: .72rem;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .64rem;
    font-variation-settings: 'opsz' 10, 'wght' 650;
    line-height: 1.2;
}

.home-showcase-info > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.home-showcase-info b {
    flex: 0 0 auto;
    color: var(--clay-deep);
    font-size: .72rem;
}

.home-showcase-card:not(.home-showcase-card--1) .home-showcase-info > span {
    display: none;
}

.home-showcase-stamp {
    position: absolute;
    left: 50%;
    bottom: .35rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-size: .66rem;
    font-variation-settings: 'opsz' 14, 'wght' 650, 'SOFT' 20;
    line-height: .95;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%) rotate(-7deg);
    box-shadow: 0 6px 18px rgba(30, 26, 22, .22);
}

.home-hero-copy {
    position: relative;
    z-index: 4;
    margin-top: -1.2rem;
    padding: 1.5rem 1rem 0;
    border-radius: 1.35rem 1.35rem 0 0;
    background: var(--paper);
}

.home-kicker {
    margin: 0;
    color: var(--ink-3);
    font-size: .67rem;
    font-variation-settings: 'opsz' 10, 'wght' 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.home-kicker span {
    color: var(--clay-deep);
}

.home-hero h1 {
    max-width: 12ch;
    margin: .65rem 0 0;
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: .91;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.home-hero h1 em {
    color: var(--clay-deep);
}

.home-hero .lede {
    max-width: 34rem;
    margin: 1rem 0 0;
    font-size: .98rem;
    line-height: 1.58;
}

.home-hero-actions {
    display: grid;
    gap: .55rem;
    margin-top: 1.2rem;
}

.home-hero-actions .btn {
    width: 100%;
    min-height: 50px;
}

.home-help-link {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 58px;
    margin-top: .7rem;
    padding: .6rem .2rem;
    border: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: .75rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.home-help-link b {
    display: block;
    color: var(--ink);
    font-size: .8rem;
}

.home-help-link > svg {
    width: 18px;
    height: 18px;
}

.home-help-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--clay);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
}

.home-trust {
    overflow: hidden;
    border-block: 1px solid color-mix(in srgb, var(--sage) 35%, var(--rule));
    background: color-mix(in srgb, var(--sage-tint) 70%, var(--paper));
}

.home-trust-list {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    padding-block: .8rem;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.home-trust-list::-webkit-scrollbar,
.home-product-rail::-webkit-scrollbar {
    display: none;
}

.home-trust-list > span,
.home-trust-list > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .42rem;
    min-height: 30px;
    color: var(--ink-2);
    font-size: .69rem;
    font-variation-settings: 'opsz' 10, 'wght' 610;
    text-decoration: none;
    scroll-snap-align: start;
}

.home-trust-list svg {
    width: 17px;
    height: 17px;
    color: var(--sage-deep);
}

.home-section-head {
    align-items: end;
}

.home-section-head .display-l {
    margin-bottom: 0;
}

.home-section-intro {
    max-width: 40rem;
    margin: .7rem 0 0;
    color: var(--ink-3);
    font-size: .9rem;
}

.home-products-section {
    overflow: hidden;
    padding-bottom: clamp(2.5rem, 8vw, 5rem);
}

.home-product-rail {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) .9rem;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.home-product-rail > .card-product {
    flex: 0 0 min(72vw, 275px);
    scroll-snap-align: start;
}

.home-product-rail .card-art {
    min-height: 0;
}

.home-swipe-hint {
    margin: .25rem 0 0;
    color: var(--ink-3);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.home-swipe-hint span {
    color: var(--clay-deep);
    font-size: 1rem;
}

.home-categories-section {
    background: color-mix(in srgb, var(--paper-2) 82%, #fff);
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.home-category-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--rule));
    border-radius: 1rem;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--lift-1);
}

.home-category-art {
    display: block;
    aspect-ratio: 1.16 / 1;
    overflow: hidden;
    background: var(--accent-tint);
}

.home-category-art picture,
.home-category-art img,
.home-category-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

.home-category-art img {
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
}

.home-category-art svg {
    transform: scale(1.08);
}

.home-category-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 16px;
    align-items: center;
    gap: .5rem;
    min-height: 74px;
    padding: .65rem;
}

.home-category-number {
    align-self: start;
    color: var(--accent-deep);
    font-size: .58rem;
    font-variation-settings: 'opsz' 9, 'wght' 700;
    letter-spacing: .08em;
}

.home-category-copy b,
.home-category-copy small {
    display: block;
}

.home-category-copy b {
    font-family: var(--font-display);
    font-size: .92rem;
    font-variation-settings: 'opsz' 18, 'wght' 620, 'SOFT' 14;
    line-height: 1.05;
}

.home-category-copy small {
    margin-top: .25rem;
    color: var(--ink-3);
    font-size: .56rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-category-copy svg {
    width: 16px;
    height: 16px;
    color: var(--accent-deep);
}

.home-maker-section {
    padding-block: 0;
    background: var(--ink);
    color: #fff;
}

.home-maker-grid {
    display: grid;
    padding-inline: 0;
}

.home-maker-art {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    background: var(--clay-tint);
}

.home-maker-art picture,
.home-maker-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-maker-art img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center 58%;
}

.home-maker-caption {
    position: absolute;
    left: var(--gutter);
    bottom: var(--gutter);
    padding: .65rem .8rem;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--paper-2) 90%, transparent);
    color: var(--ink-2);
    font-size: .72rem;
    box-shadow: var(--lift-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-maker-caption b {
    color: var(--clay-deep);
}

.home-maker-copy {
    padding: 2.25rem var(--gutter) 2.6rem;
}

.home-maker-copy .eyebrow {
    color: var(--sage-tint);
}

.home-maker-copy h2 {
    color: #fff;
}

.home-maker-copy p:not(.eyebrow) {
    max-width: 34rem;
    color: #CFC6BE;
    font-size: .95rem;
    line-height: 1.65;
}

.home-maker-copy .btn {
    margin-top: 1.1rem;
}

.home-ordering-section {
    background: var(--paper);
}

.home-steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.home-steps li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
}

.home-steps li > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper-3);
    color: var(--clay-deep);
    font-family: var(--font-display);
    font-size: 1rem;
}

.home-steps h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.home-steps p {
    margin: .35rem 0 0;
    color: var(--ink-3);
    font-size: .84rem;
    line-height: 1.55;
}

.home-final-cta {
    overflow: hidden;
    padding-block: 2.75rem;
    background:
        radial-gradient(circle at 90% 0, var(--sage-tint), transparent 29%),
        linear-gradient(135deg, var(--clay-tint), var(--gold-tint) 60%, var(--sage-tint));
}

.home-final-cta-inner {
    display: grid;
    gap: 1.5rem;
}

.home-final-cta h2 {
    max-width: 14ch;
    margin-bottom: 0;
}

.home-final-actions {
    display: grid;
    gap: .55rem;
}

.home-final-actions .btn {
    width: 100%;
}

@media (max-width: 420px) {
    .page-home-v2 .icon-wishlist {
        display: none;
    }

    .page-home-v2 .header-actions {
        gap: 0;
    }

    .page-home-v2 .header-actions .icon-btn,
    .page-home-v2 .search-trigger {
        width: 42px;
    }
}

@media (max-width: 340px) {
    .page-home-v2 .brand picture {
        display: none;
    }

    .page-home-v2 .brand {
        gap: 0;
    }
}

@media (min-width: 560px) {
    .home-hero-actions,
    .home-final-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .home-hero-actions .btn,
    .home-final-actions .btn {
        width: auto;
    }

    .home-category-grid {
        gap: 1rem;
    }

    .home-category-copy b {
        font-size: 1.08rem;
    }
}

@media (min-width: 760px) {
    .page-home-v2 .brand-mark {
        font-size: 1.125rem;
    }

    .home-hero {
        padding-block: clamp(2.2rem, 5vw, 4.8rem);
    }

    .home-hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
        align-items: center;
        gap: clamp(2.4rem, 5vw, 5.5rem);
    }

    .home-hero-copy {
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .home-hero-showcase {
        order: 0;
        height: clamp(440px, 42vw, 580px);
        margin: 0;
        padding: 0;
        border-radius: 1.8rem;
        background: transparent;
    }

    .home-showcase-stamp {
        left: -1.7rem;
        bottom: 2rem;
        width: 88px;
        height: 88px;
        font-size: .78rem;
    }

    .home-hero h1 {
        font-size: clamp(4rem, 6.3vw, 6.4rem);
    }

    .home-help-link {
        max-width: 31rem;
    }

    .home-trust-list {
        justify-content: space-between;
        overflow: visible;
    }

    .home-product-rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s4);
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .home-product-rail > .card-product {
        min-width: 0;
    }

    .home-swipe-hint {
        display: none;
    }

    .home-category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s4);
    }

    .home-maker-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 500px;
    }

    .home-maker-art {
        min-height: 500px;
    }

    .home-maker-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(3rem, 6vw, 6rem);
    }

    .home-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-steps li {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 1.5rem;
        border-right: 1px solid var(--rule);
    }

    .home-steps li:first-child {
        padding-left: 0;
    }

    .home-steps li:last-child {
        border-right: 0;
    }

    .home-final-cta-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

@media (hover: hover) {
    .home-showcase-card:hover .home-showcase-image img,
    .home-category-card:hover .home-category-art img {
        transform: scale(1.045);
    }

    .home-category-card:hover {
        border-color: var(--accent);
        box-shadow: var(--lift-2);
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-showcase-image img,
    .home-category-art img,
    .home-category-card {
        transition: none;
    }
}

/* ---------------------------------------------------- studio storefront
   Clean shop chrome with ArtNest warmth: rainbow wordmark, clay/sage
   notes, Fraunces campaign, no copied ticker or coupon tickets. */

.brand-tagline,
.page-home-v2 .brand-tagline {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.16em;
}

.page-home-v2 .brand-mark {
    font-size: clamp(1.15rem, 3.4vw, 1.65rem);
    letter-spacing: 0.12em;
}

.studio-bar {
    padding: 0.85rem var(--gutter) 1rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    text-align: center;
}

.studio-bar-tag {
    display: none;
}

.studio-bar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1rem;
    margin: 0.45rem 0 0;
    color: var(--ink-2);
    font-size: 0.78rem;
    font-variation-settings: 'opsz' 12, 'wght' 550;
}

.studio-bar-meta a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    color: var(--sage-deep);
    font-variation-settings: 'opsz' 12, 'wght' 650;
    text-decoration: none;
}

.studio-bar-meta svg {
    width: 15px;
    height: 15px;
    color: var(--whatsapp);
}

body.page-checkout .studio-bar,
body.page-pay .studio-bar {
    display: none;
}

.footer-hours,
.footer-contact p {
    margin: 0 0 0.75rem;
    color: #D8D1C7;
    font-size: 0.9rem;
}

.footer-contact a {
    color: #fff;
}

.footer-social {
    margin-top: 0.5rem;
}

.footer-social svg {
    width: 16px;
    height: 16px;
}

.home-campaign {
    margin: 0;
}

.home-campaign-link {
    position: relative;
    display: block;
    min-height: clamp(360px, 82vw, 640px);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #3A2A24;
}

.home-campaign-media {
    position: absolute;
    inset: 0;
}

.home-campaign-media picture,
.home-campaign-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.home-campaign-media img {
    object-fit: cover;
    object-position: center 18%;
}

.home-campaign-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 5.5rem 1.4rem 2.1rem;
    background: linear-gradient(to top, rgba(42, 36, 31, .72), rgba(42, 36, 31, .18) 52%, transparent 80%);
    text-align: center;
}

.home-campaign-kicker {
    color: #F6E9E3;
    font-size: 0.72rem;
    font-variation-settings: 'opsz' 11, 'wght' 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-campaign-copy h1 {
    max-width: 16ch;
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(2.15rem, 7.4vw, 4.1rem);
    font-variation-settings: 'opsz' 56, 'wght' 650, 'SOFT' 36;
    letter-spacing: -0.04em;
    line-height: 0.94;
}

.home-campaign-copy h1 em {
    color: #F3C4B4;
    font-style: italic;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 1.3rem;
    border-radius: 999px;
    background: var(--clay);
    color: #fff;
    font-size: 0.92rem;
    font-variation-settings: 'opsz' 14, 'wght' 700;
    text-decoration: none;
}

.home-offers {
    padding: 1.85rem 0 0.4rem;
    background: var(--paper);
}

.home-offer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.home-note {
    display: flex;
    flex-direction: column;
    min-height: 198px;
    padding: 1.35rem 1.2rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
    border-radius: 1.15rem;
    background: var(--paper-2);
}

.home-note--0 { background: var(--gold-tint); }
.home-note--1 { background: var(--clay-tint); }
.home-note--2 { background: var(--sage-tint); }
.home-note--3 { background: var(--indigo-tint); }

.home-note-kicker {
    margin: 0 0 0.5rem;
    color: var(--ink-3);
    font-size: 0.68rem;
    font-variation-settings: 'opsz' 10, 'wght' 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-note h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.6vw, 1.7rem);
    font-variation-settings: 'opsz' 28, 'wght' 620, 'SOFT' 20;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.home-note h2 span {
    display: block;
    margin-top: 0.45rem;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-variation-settings: 'opsz' 14, 'wght' 450;
    letter-spacing: 0;
    line-height: 1.5;
}

.home-note-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 42px;
    margin-top: auto;
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-variation-settings: 'opsz' 13, 'wght' 650;
    text-decoration: none;
    cursor: pointer;
}

.home-note-action.is-copied {
    color: var(--sage-deep);
}

.page-home-studio .home-products-section,
.page-home-studio .home-categories-section,
.page-home-studio .home-ordering-section,
.page-home-studio .home-reviews-section {
    background: var(--paper);
}

.page-home-studio .card-actions,
.page-home-studio .card-cat,
.page-home-studio .card-flag,
.page-home-studio .stock-pill {
    display: none;
}

.page-home-studio .card-product {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.page-home-studio .card-media,
.page-home-studio .card-art {
    border-radius: 1rem;
    background: var(--paper-2);
}

.page-home-studio .card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 20, 'wght' 600, 'SOFT' 16;
}

.page-home-studio .card-price {
    color: var(--clay-deep);
}

.page-home-studio .home-category-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--rule));
    border-radius: 1.2rem;
    box-shadow: none;
    background: var(--accent-tint);
}

.page-home-studio .home-category-art {
    aspect-ratio: 1 / 1;
    background: var(--accent-tint);
}

.page-home-studio .home-category-copy {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-height: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--paper-2) 92%, transparent);
    color: var(--ink);
    box-shadow: var(--lift-1);
}

.page-home-studio .home-category-copy b,
.page-home-studio .home-category-copy small {
    color: inherit;
}

.page-home-studio .home-category-copy b {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-variation-settings: 'opsz' 22, 'wght' 620, 'SOFT' 18;
}

.page-home-studio .home-category-copy small {
    color: var(--ink-3);
    letter-spacing: 0.06em;
}

.home-reviews-banner {
    display: grid;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.home-reviews-banner p:not(.eyebrow) {
    max-width: 36rem;
    color: var(--ink-3);
}

.home-review-grid {
    display: grid;
    gap: 1rem;
}

.home-review-card {
    padding: 1.2rem 1.15rem;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: var(--paper-2);
}

.home-review-stars {
    margin: 0 0 0.4rem;
    color: var(--gold-deep);
    letter-spacing: 0.08em;
}

.home-review-card h3 {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.home-review-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.92rem;
}

.home-review-card a {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--clay-deep);
    font-size: 0.8rem;
}

@media (min-width: 700px) {
    .home-offer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .home-review-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-reviews-banner {
        grid-template-columns: 1fr auto;
    }

}

@media (hover: hover) {
    .home-campaign-link:hover .home-campaign-media img {
        transform: scale(1.03);
        transition: transform 600ms var(--ease);
    }

    .home-note-action:hover {
        color: var(--clay-deep);
    }
}

/* ---------------------------------------------------- editorial homepage
   Replaces the poster hero. Type and product photo stay separate. */

.home-campaign {
    display: none;
}

.home-stage {
    padding: 1.6rem 0 2rem;
    background: var(--paper);
}

.home-stage-grid {
    display: grid;
    gap: 1.5rem;
}

.home-stage-copy .home-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.home-stage-copy .home-kicker::before {
    content: "";
    flex: 0 0 2.1rem;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand-a), var(--brand-t), var(--brand-n), var(--brand-e));
}

.home-stage-copy h1 {
    max-width: 16ch;
    margin-top: 0.7rem;
}

.home-stage-copy .lede {
    max-width: 34rem;
    margin-top: 0.85rem;
}

.home-stage-actions {
    display: grid;
    gap: 0.55rem;
    margin-top: 1.2rem;
}

.home-stage-actions .btn {
    width: 100%;
    min-height: 50px;
}

.home-stage-art {
    margin: 0;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--paper-3);
}

.home-stage-art picture,
.home-stage-art img {
    display: block;
    width: 100%;
    height: auto;
}

.home-codes {
    padding: 0.75rem 0;
    background: var(--gold-tint);
    border-block: 1px solid color-mix(in srgb, var(--gold) 28%, var(--rule));
}

.home-codes-row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
}

.home-code {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border: 1px dashed color-mix(in srgb, var(--gold-deep) 35%, var(--rule));
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.home-code b {
    color: var(--clay-deep);
}

.home-spotlight-section {
    padding-top: clamp(2rem, 6vw, 3.5rem);
}

.home-spotlight-grid {
    display: grid;
    gap: 1rem;
}

.home-spotlight {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 1.4rem;
    background: var(--paper-2);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--lift-1);
}

.home-spotlight-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 1rem;
    background: #fff;
}

.home-spotlight-media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

.home-spotlight-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.25rem 1.2rem 1.4rem;
}

.home-spotlight-copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-variation-settings: 'opsz' 36, 'wght' 620, 'SOFT' 18;
}

.home-spotlight-copy p:not(.eyebrow) {
    margin: 0 0 0.6rem;
    color: var(--clay-deep);
}

.home-shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.home-shelf-foot {
    margin-top: 1.1rem;
}

.home-mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.home-mosaic-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 220px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--rule));
    border-radius: 1.25rem;
    background: var(--accent-tint);
    color: inherit;
    text-decoration: none;
}

.home-mosaic-art,
.home-mosaic-art picture,
.home-mosaic-art img,
.home-mosaic-art svg {
    display: block;
    width: 100%;
    height: 220px;
}

.home-mosaic-art img,
.home-mosaic-art svg {
    object-fit: contain;
    background: color-mix(in srgb, #fff 55%, var(--accent-tint));
}

.home-mosaic-card.is-lead .home-mosaic-art,
.home-mosaic-card.is-lead .home-mosaic-art img,
.home-mosaic-card.is-lead .home-mosaic-art svg {
    height: 280px;
}

.home-mosaic-copy {
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--paper-2) 94%, transparent);
}

.home-mosaic-copy small {
    color: var(--accent-deep);
    font-size: 0.62rem;
    font-variation-settings: 'opsz' 10, 'wght' 700;
    letter-spacing: 0.1em;
}

.home-mosaic-copy b {
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.home-mosaic-copy em {
    color: var(--ink-3);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (min-width: 700px) {
    .home-stage {
        padding-block: clamp(1.75rem, 4vw, 3.25rem);
    }

    .home-stage-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(240px, 1fr);
        align-items: start;
        gap: clamp(1.5rem, 4vw, 3rem);
    }

    .home-stage-actions,
    .home-final-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .home-stage-actions .btn {
        width: auto;
    }

    .home-spotlight-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .home-spotlight {
        min-height: 100%;
    }

    .home-spotlight-media {
        min-height: 280px;
    }

    .home-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-mosaic-card.is-lead {
        grid-column: 1 / -1;
    }

    .home-mosaic-card.is-lead .home-mosaic-art,
    .home-mosaic-card.is-lead .home-mosaic-art img,
    .home-mosaic-card.is-lead .home-mosaic-art svg {
        height: 340px;
    }
}

@media (min-width: 960px) {

    .home-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .home-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-mosaic-card.is-lead {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .home-mosaic-card.is-lead .home-mosaic-art,
    .home-mosaic-card.is-lead .home-mosaic-art img,
    .home-mosaic-card.is-lead .home-mosaic-art svg {
        height: 100%;
        min-height: 460px;
    }
}

@media (hover: hover) {
    .home-spotlight:hover,
    .home-mosaic-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--lift-2);
    }
}

/* ---------------------------------------------------- mobile-first shop home
   Decohold structure: products first. ArtNest colour, type, catalogue. */

body.page-home .studio-bar {
    display: none;
}

body.page-home .site-header::after {
    height: 3px;
    background: linear-gradient(90deg, var(--brand-a), var(--brand-r), var(--brand-t), var(--brand-n), var(--brand-e), var(--brand-s));
}

.page-home-shop .card-product {
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

.page-home-shop .card-art {
    min-height: 0;
    border-radius: 0.85rem;
    background: #fff;
}

.page-home-shop .card-art > picture img,
.page-home-shop .card-art > img {
    object-fit: contain;
}

.page-home-shop .card-actions,
.page-home-shop .wishlist-btn,
.page-home-shop .card-flag,
.page-home-shop .card-product .stock-pill {
    display: none;
}

.page-home-shop .card-body {
    padding: 0.7rem 0.15rem 0.35rem;
}

.page-home-shop .card-title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-variation-settings: 'opsz' 18, 'wght' 580, 'SOFT' 14;
    letter-spacing: -0.015em;
}

.page-home-shop .card-price {
    color: var(--clay-deep);
    font-size: 0.8rem;
}

.page-home-shop .home-trust {
    border-block-color: var(--rule);
    background: transparent;
}

@media (hover: hover) {
    .page-home-shop .card-product:hover {
        transform: none;
        box-shadow: none;
        border-color: transparent;
    }

    .page-home-shop .card-product:hover .card-art > picture img,
    .page-home-shop .card-product:hover .card-art > img {
        transform: none;
    }
}

.page-home-shop .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 0.7rem;
}

.home-shop-products,
.home-shop-shelves,
.home-shop-reviews {
    padding: 1.15rem 0 1.5rem;
}

.home-shop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.home-shop-head h2 {
    margin: 0;
    color: var(--ink-3);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-variation-settings: 'opsz' 11, 'wght' 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-shelf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.7rem;
}

.home-shelf-tile {
    display: block;
    color: inherit;
    text-decoration: none;
}

.home-shelf-art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.85rem;
    background: #fff;
}

.home-shelf-art picture,
.home-shelf-art img,
.home-shelf-art svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-shelf-tile b {
    display: block;
    margin-top: 0.55rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-variation-settings: 'opsz' 18, 'wght' 600, 'SOFT' 14;
}

.home-shop-review-rail {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.home-shop-review-rail::-webkit-scrollbar {
    display: none;
}

.home-shop-review-rail .home-review-card {
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: start;
    border: 0;
    background: var(--paper-2);
}

@media (min-width: 700px) {
    .home-shop-review-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .home-shop-review-rail .home-review-card {
        flex: none;
    }
}

@media (min-width: 1000px) {
    .page-home-shop .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.6rem 1.1rem;
    }

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

    .home-shop-products,
    .home-shop-shelves {
        padding-block: 1.75rem 2rem;
    }

    .home-shop-review-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ================================================================ atelier
   Monochrome catalogue system. Products keep their own colour. */

@media (min-width: 900px) {
    :root {
        --gutter: 3.25rem;
    }
}

.atelier {
    --accent: var(--ink);
    --accent-deep: var(--ink);
    --accent-tint: var(--paper-3);
    --header-h: 72px;
}

.atelier .announce {
    display: flex;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem var(--gutter);
    background: var(--ink);
    color: var(--paper);
    border: 0;
}

.atelier .announce-text {
    font-size: 0.62rem;
    font-variation-settings: 'opsz' 10, 'wght' 550;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.atelier .announce-dismiss {
    display: none;
}

.atelier .site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.atelier .site-header::after {
    display: none;
}

.atelier .header-inner {
    min-height: var(--header-h);
    height: auto;
    padding-block: 0.85rem;
}

.atelier .header-start {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.atelier .header-nav {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

.atelier .header-nav a {
    color: var(--ink);
    font-size: 0.78rem;
    font-variation-settings: 'opsz' 12, 'wght' 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.atelier .brand {
    gap: 0;
}

.atelier .brand picture,
.atelier .brand img {
    display: none;
}

.atelier .brand-mark,
.atelier .brand-mark span {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-variation-settings: 'opsz' 36, 'wght' 450, 'SOFT' 0, 'WONK' 0;
    letter-spacing: 0.06em;
}

.atelier .brand-tagline {
    display: block;
    margin-top: 0.28rem;
    color: var(--ink-2);
    font-size: 0.58rem;
    font-variation-settings: 'opsz' 10, 'wght' 550;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.atelier .header-actions {
    gap: 0.35rem;
}

.atelier .search-trigger,
.atelier .icon-btn {
    min-height: 44px;
    border-radius: 0;
    box-shadow: none;
}

.atelier .search-label,
.atelier .bag-label {
    display: none;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.atelier .icon-bag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.atelier .icon-bag svg {
    width: 20px;
    height: 20px;
}

.atelier .studio-bar,
.atelier .icon-wishlist,
.atelier .account-btn {
    display: none !important;
}

.atelier .nav-panel a {
    min-height: 56px;
    border-color: var(--rule);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-variation-settings: 'opsz' 28, 'wght' 450, 'SOFT' 4;
}

.atelier .card-product {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.atelier .card-art {
    border-radius: 0;
    background: var(--paper-2);
    min-height: 0;
}

.atelier .card-art.has-photo {
    background: #fff;
}

.atelier .card-art > picture img,
.atelier .card-art > img {
    object-fit: contain;
}

.atelier .card-body {
    padding: 0.85rem 0 0;
}

.atelier .card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-variation-settings: 'opsz' 20, 'wght' 450, 'SOFT' 4;
}

.atelier .card-price {
    color: var(--ink-2);
    font-size: 0.82rem;
}

.atelier .card-cat {
    color: var(--ink-3);
    letter-spacing: 0.12em;
}

.atelier .card-product .stock-pill,
.atelier .page-home .card-actions,
.atelier .page-home .wishlist-btn,
.atelier .page-home .card-flag,
.atelier .atelier-edit .card-actions,
.atelier .atelier-edit .wishlist-btn {
    display: none !important;
}

.atelier a.btn,
.atelier button.btn,
.atelier .btn {
    border-radius: 2px !important;
}

@media (hover: hover) {
    .atelier .card-product:hover {
        transform: none;
        box-shadow: none;
    }
}

.atelier-eyebrow {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.68rem;
    font-variation-settings: 'opsz' 11, 'wght' 550;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.atelier-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: var(--ink);
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.atelier-text-link svg {
    width: 14px;
    height: 14px;
}

.atelier-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem 0 2.5rem;
    background: var(--paper);
}

.atelier-contour {
    position: absolute;
    inset: auto 0 0 0;
    width: 55%;
    height: 70%;
    pointer-events: none;
    stroke: color-mix(in srgb, var(--ink) 16%, transparent);
    stroke-width: 0.7;
    fill: none;
}

.atelier-hero-grid {
    position: relative;
    display: grid;
    gap: 1.75rem;
}

.atelier-hero-copy h1 {
    max-width: 11ch;
    margin: 0.7rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(3.15rem, 11vw, 6.4rem);
    font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 4, 'WONK' 0;
    letter-spacing: -0.04em;
    line-height: 0.92;
}

.atelier-hero-copy h1 em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 360, 'SOFT' 18, 'WONK' 0;
}

.atelier-lede {
    max-width: 28rem;
    margin: 1.1rem 0 0;
    color: var(--ink-2);
    font-size: 1.02rem;
    line-height: 1.6;
}

.atelier-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.4rem;
    margin-top: 1.6rem;
}

.atelier-hero-photo {
    margin: 0;
    background: var(--paper-3);
}

.atelier-hero-photo a {
    display: block;
}

.atelier-hero-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
}

.atelier-hero-photo figcaption {
    padding: 0.8rem 1rem 0.9rem;
    color: var(--ink-3);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.atelier-edit,
.atelier-shelves,
.atelier-begin,
.atelier-quotes {
    padding: 3rem 0;
    background: var(--paper);
}

.atelier-quotes {
    background: var(--sand, #f6f1ea);
    border-block: 1px solid var(--line);
}

.atelier-quotes-lede {
    margin: 0.65rem 0 0;
    max-width: 36rem;
    color: var(--ink-3);
    font-size: 0.92rem;
    line-height: 1.55;
}

.atelier-quotes-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.atelier-quote-card {
    padding: 1.1rem 1.15rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.atelier-quote-stars {
    margin: 0 0 0.55rem;
    color: var(--line);
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.atelier-quote-stars .is-on {
    color: #9a7b2f;
}

.atelier-quote-card blockquote {
    margin: 0;
}

.atelier-quote-card blockquote p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink);
}

.atelier-quote-meta {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-3);
}

.atelier-quote-meta strong {
    color: var(--ink);
}

.atelier-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.atelier-section-head h2,
.atelier-begin h2 {
    margin: 0.45rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-variation-settings: 'opsz' 72, 'wght' 430, 'SOFT' 6;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.atelier-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.85rem;
}

.atelier-shelf-list {
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.atelier-shelf-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
}

.atelier-shelf-list li:last-child a {
    border-bottom: 1px solid var(--rule);
}

.atelier-shelf-list b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-variation-settings: 'opsz' 32, 'wght' 450, 'SOFT' 6;
}

.atelier-shelf-list small {
    display: block;
    margin-top: 0.2rem;
    color: var(--ink-3);
    font-size: 0.75rem;
}

.atelier-shelf-list svg {
    width: 16px;
    height: 16px;
}

.atelier-begin {
    background: var(--paper-2);
}

.atelier-begin-steps {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.atelier-begin-steps a {
    display: block;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
}

.atelier-begin-steps li:last-child a {
    border-bottom: 1px solid var(--rule);
}

.atelier-begin-steps b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.atelier-begin-steps span {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

.atelier-close {
    padding: 4rem 0 4.5rem;
    background: var(--ink);
    color: var(--paper);
}

.atelier-close h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    font-variation-settings: 'opsz' 96, 'wght' 400, 'SOFT' 8;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.atelier-close-links {
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

.atelier-close-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    color: var(--paper);
    font-size: 1rem;
    text-decoration: none;
}

.atelier-close-links li:last-child a {
    grid-template-columns: 1fr auto;
}

.atelier-close-links li:last-child a {
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}

.atelier-close-links svg {
    width: 15px;
    height: 15px;
}

.atelier .site-footer {
    background: var(--paper);
    color: var(--ink);
    border-top: 1px solid var(--rule);
}

.atelier .footer-studio {
    max-width: 36rem;
    margin: 0 0 2.2rem;
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-variation-settings: 'opsz' 28, 'wght' 420, 'SOFT' 8;
    line-height: 1.4;
}

.atelier .site-footer h2 {
    color: var(--ink);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.atelier .ai-chat-fab {
    min-height: 44px;
    padding: 0 0.95rem;
    border-radius: 2px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
}

.atelier .ai-chat-fab-avatar {
    display: none;
}

.atelier .ai-chat-fab-label {
    display: inline;
}

.atelier .pdp-figure {
    background: #fff;
    border-radius: 0;
}

.atelier .cat-hero {
    margin-top: 0.35rem;
    padding: 0 0 0.85rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.atelier .cat-hero-art {
    display: none;
}

.atelier .drawer-panel {
    background: var(--paper);
}

@media (min-width: 760px) {
    .atelier-edit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 1.4rem;
    }

    .atelier-begin-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 3rem;
        align-items: start;
    }

    .atelier-begin-steps {
        margin-top: 0;
    }
}

@media (min-width: 900px) {
    .atelier .header-nav {
        display: flex;
    }

    .atelier .nav-toggle {
        display: none;
    }

    .atelier .search-label,
    .atelier .bag-label {
        display: inline;
    }

    .atelier-hero {
        padding: 3.5rem 0 4rem;
    }

    .atelier-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 4rem;
    }

    .atelier-edit,
    .atelier-shelves,
    .atelier-begin {
        padding: 4.5rem 0;
    }

    .atelier-close {
        padding: 6rem 0 5.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atelier .btn,
    .atelier .card-product,
    .atelier-text-link {
        transition: none;
    }
}

/* ------------------------------------------------ journey continuity */

.atelier {
    --r-sm: 2px;
    --r: 2px;
    --r-lg: 2px;
    --r-xl: 2px;
    --lift-1: none;
    --lift-2: none;
    --lift-3: none;
}

.atelier .icon-bag {
    position: relative;
}

.atelier .cart-badge {
    top: 2px;
    right: 2px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 2px;
}

.atelier :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.atelier .crumbs {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.atelier .crumbs a {
    color: var(--ink-2);
    text-decoration: none;
}

.atelier .crumbs a:hover {
    color: var(--ink);
}

.atelier .eyebrow,
.atelier .eyebrow-accent {
    color: var(--ink-2);
}

.atelier .display-l,
.atelier .display-m,
.atelier .display-s {
    font-variation-settings: 'opsz' 72, 'wght' 430, 'SOFT' 4, 'WONK' 0;
    letter-spacing: -0.03em;
}

.atelier .stepper,
.atelier .pincode-row input,
.atelier .option,
.atelier .option-card,
.atelier .chip,
.atelier .pdp-share-btn,
.atelier .wishlist-btn,
.atelier .pdp-thumb,
.atelier .search-input,
.atelier .search-field,
.atelier select,
.atelier input[type="text"],
.atelier input[type="search"],
.atelier input[type="number"],
.atelier input[type="tel"],
.atelier textarea {
    border-radius: 2px;
}

.atelier .stock-pill,
.atelier .stock-pill--in,
.atelier .stock-pill--low,
.atelier .stock-pill--out {
    border-radius: 2px;
    background: var(--paper-3);
    color: var(--ink-2);
    border: 1px solid var(--rule);
}

.atelier .pdp-buy .display-m::after {
    background: var(--ink);
}

.atelier .pdp-landed-band {
    background: var(--paper-2);
    box-shadow: none;
    border: 1px solid var(--rule);
    border-radius: 0;
}

.atelier .pdp-landed-headline {
    color: var(--ink);
}

.atelier .pdp-landed-breakdown {
    border-top-color: var(--rule);
}

.atelier .pdp-share-btn,
.atelier .wishlist-btn-lg {
    border-radius: 2px;
    border-color: var(--rule-strong);
    background: transparent;
}

.atelier .pdp-figure {
    border: 1px solid var(--rule);
}

.atelier .pdp-figure img {
    object-fit: contain;
    background: #fff;
}

.atelier .pdp-related,
.atelier .pdp-also-buy,
.atelier .band {
    background: var(--paper);
}

.atelier .pdp-related .display-l {
    font-size: clamp(2rem, 5vw, 3.2rem);
}

.atelier .text-link:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.atelier .cat-siblings {
    gap: 0;
    border-top: 1px solid var(--rule);
}

.atelier .cat-siblings a {
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    padding: 0.75rem 0.9rem 0.75rem 0;
    color: var(--ink-2);
}

.atelier .cat-siblings a:hover {
    color: var(--ink);
    background: transparent;
    border-color: transparent;
}

.atelier .cat-siblings a.is-current {
    background: transparent;
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.atelier .cat-filter-link {
    margin-top: 0.4rem;
}

.atelier .cat-hero-copy .display-l {
    margin: 0.4rem 0 0.55rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.atelier .cat-hero-copy .lede {
    max-width: 36rem;
    color: var(--ink-2);
}

.atelier .shop-shelf {
    border-radius: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.atelier .shop-shelf.is-active {
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--ink);
    color: var(--ink);
}

.atelier .shop-filters-panel.card,
.atelier .card:not(.card-product) {
    background: var(--paper);
    box-shadow: none;
    border: 1px solid var(--rule);
    border-radius: 0;
}

.atelier .shop-toolbar select {
    min-height: 44px;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
}

.atelier .drawer-panel {
    box-shadow: none;
    border-left: 1px solid var(--rule);
}

.atelier .drawer-foot {
    background: var(--paper);
}

.atelier .mini-line {
    align-items: flex-start;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
}

.atelier .mini-line-art,
.atelier .cart-line-art {
    border-radius: 0;
    background: #fff;
    border: 1px solid var(--rule);
}

.atelier .cart-page-head {
    border-bottom-color: var(--rule);
}

.atelier .cart-line-card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--rule);
    background: var(--paper);
}

.atelier .buybar {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.atelier .ai-chat-fab {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
}

.atelier.has-buybar:not(.buybar-anchor-visible) .ai-chat-fab {
    bottom: calc(var(--buybar-height, 76px) + 0.85rem + env(safe-area-inset-bottom));
}

.atelier .search-overlay .search-dialog,
.atelier .search-bar,
.atelier .search-results {
    background: var(--paper);
}

.atelier .search-field {
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
}

.atelier .btn-wa {
    --btn-bg: var(--ink);
    --btn-bd: var(--ink);
    --btn-fg: var(--paper);
}

.atelier .btn-wa:hover {
    --btn-bg: #0f0f0d;
    --btn-bd: #0f0f0d;
}

.atelier .empty .nest-mark {
    display: none;
}

.atelier .pdp-reviews {
    border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
    .atelier.has-buybar .ai-chat-fab {
        bottom: 1.25rem;
    }
}

/* ------------------------------------------------ ArtNest editorial refinement */

.atelier .header-actions {
    gap: 1rem;
}

.atelier .search-trigger,
.atelier .icon-bag {
    width: auto;
    min-width: 44px;
    padding-inline: 0.45rem;
    gap: 0.45rem;
    white-space: nowrap;
}

.atelier .icon-bag .cart-badge {
    right: -0.15rem;
}

.atelier-hero-photo {
    background: #d9d0c5;
}

.atelier-hero-photo img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    background: #d9d0c5;
}

.atelier-close-grid {
    display: grid;
    gap: 3rem;
}

.atelier-close .atelier-eyebrow {
    color: rgba(245, 243, 238, 0.6);
}

.atelier-close h2 em {
    font-style: italic;
    font-variation-settings: 'opsz' 96, 'wght' 350, 'SOFT' 18;
}

.atelier-close-note {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    color: rgba(245, 243, 238, 0.78);
    font-size: 0.86rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 243, 238, 0.35);
}

.atelier-close-note svg {
    width: 14px;
    height: 14px;
}

.atelier-close-links {
    margin-top: 0;
}

.atelier-close-links a {
    display: grid;
    grid-template-columns: 2.2rem 1fr auto;
    gap: 0.8rem;
}

.atelier-close-links .num {
    color: rgba(245, 243, 238, 0.42);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

/* Search is a quiet utility, not another catalogue page. */
.atelier .search-overlay {
    background: rgba(24, 23, 21, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.atelier .search-dialog {
    background: var(--paper);
}

.atelier .search-bar {
    padding: 0.7rem var(--gutter);
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
}

.atelier .search-field {
    border: 0;
    border-bottom: 1px solid var(--ink);
    background: transparent;
}

.atelier .search-input {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 26, 'wght' 430;
}

.atelier .search-results {
    padding: 0.5rem var(--gutter) 2rem;
}

.search-idle,
.search-empty {
    padding: 3rem 0 1.5rem;
}

.search-idle p,
.search-empty p {
    margin: 0 0 0.8rem;
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-variation-settings: 'opsz' 32, 'wght' 410;
}

.atelier .search-row {
    margin-inline: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
}

.atelier .search-row:hover,
.atelier .search-row[aria-selected='true'] {
    background: transparent;
}

.atelier .search-row[aria-selected='true'] {
    box-shadow: none;
}

.atelier .search-foot {
    margin-top: 1rem;
}

/* Keep decisions above delivery arithmetic on product pages. */
.atelier .pdp-buy-anchor {
    display: flex;
    flex-direction: column;
}

.atelier .pdp-buy-anchor > .field {
    order: 1;
}

.atelier .pdp-buy-anchor > .pdp-qty-price-row {
    order: 2;
}

.atelier .pdp-buy-anchor > .buy-actions {
    order: 3;
}

.atelier .pdp-buy-anchor > .pdp-landed-band {
    order: 4;
}

.atelier .pdp-buy-anchor > .stock-note,
.atelier .pdp-buy-anchor > .pdp-contact-note {
    order: 5;
}

.atelier .pdp-landed-band {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
}

.atelier .pdp-landed-headline:empty,
.atelier .pdp-landed-headline[style*="display: none"] {
    display: none !important;
}

.atelier .buy-actions {
    margin-top: 1.35rem;
}

.atelier .pdp-about {
    border: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0;
}

.atelier .pdp-about > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    cursor: pointer;
    list-style: none;
    font-size: 0.78rem;
    font-variation-settings: 'opsz' 13, 'wght' 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.atelier .pdp-about > summary::-webkit-details-marker {
    display: none;
}

.atelier .pdp-about > summary svg {
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
    transition: transform var(--t) var(--ease);
}

.atelier .pdp-about[open] > summary svg {
    transform: rotate(-90deg);
}

.atelier .review-form-wrap {
    border-top: 1px solid var(--rule);
}

.atelier .review-form-wrap > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    cursor: pointer;
    list-style: none;
    font-size: 0.72rem;
    font-variation-settings: 'opsz' 12, 'wght' 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.atelier .review-form-wrap > summary::-webkit-details-marker {
    display: none;
}

.atelier .review-form-wrap > summary svg {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
    transition: transform var(--t) var(--ease);
}

.atelier .review-form-wrap[open] > summary svg {
    transform: rotate(-90deg);
}

.atelier .review-form-wrap[open] {
    padding-bottom: 1rem;
}

.atelier .pdp-about[open] {
    padding-bottom: 1.25rem;
}

.atelier .pdp-about .pdp-meta {
    margin-top: 1rem;
}

.atelier .pdp-related .quick-add,
.atelier .pdp-related .card-actions,
.atelier .pdp-also-buy .quick-add,
.atelier .pdp-also-buy .card-actions {
    display: none;
}

/* Footer contrast and hierarchy. */
.atelier .site-footer {
    margin-top: 0;
    padding: 4.5rem 0 1.5rem;
    background: #181816;
    color: #f5f3ee;
    border-top: 0;
}

.atelier .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
}

.atelier .footer-intro {
    grid-column: 1 / -1;
}

.atelier .footer-wordmark {
    color: #f5f3ee;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    font-variation-settings: 'opsz' 96, 'wght' 410;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.atelier .footer-intro p {
    margin: 1rem 0 1.4rem;
    color: rgba(245, 243, 238, 0.7);
    line-height: 1.55;
}

.atelier .footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #f5f3ee;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 243, 238, 0.45);
}

.atelier .footer-whatsapp svg {
    width: 16px;
    height: 16px;
}

.atelier .site-footer h2 {
    margin-bottom: 1.15rem;
    color: rgba(245, 243, 238, 0.52);
}

.atelier .site-footer .footer-links a {
    color: rgba(245, 243, 238, 0.86);
}

.atelier .site-footer .footer-links a:hover,
.atelier .footer-bottom a:hover {
    color: #fff;
}

.atelier .footer-links {
    gap: 0.72rem;
}

.atelier .footer-bottom {
    align-items: center;
    margin-top: 4rem;
    padding-top: 1.2rem;
    border-top-color: rgba(245, 243, 238, 0.18);
    color: rgba(245, 243, 238, 0.58);
}

.atelier .footer-bottom nav {
    display: flex;
    gap: 1rem;
}

.atelier .footer-bottom a {
    color: rgba(245, 243, 238, 0.7);
    text-decoration: none;
}

.atelier .shop-intro .page-head {
    margin-bottom: 1.4rem;
}

@media (max-width: 899px) {
    .atelier .header-actions {
        gap: 0.15rem;
    }

    .atelier.has-buybar .ai-chat-fab {
        display: none;
    }

    .atelier .search-trigger,
    .atelier .icon-bag {
        width: 44px;
        padding-inline: 0;
    }
}

@media (min-width: 760px) {
    .atelier-close-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr);
        align-items: start;
        gap: 5rem;
    }

    .atelier .footer-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(9rem, 0.5fr) minmax(9rem, 0.5fr);
        gap: 3rem;
    }

    .atelier .footer-intro {
        grid-column: auto;
    }
}

@media (min-width: 720px) {
    .atelier .search-dialog {
        inset: 7vh auto auto 50%;
        width: min(720px, calc(100vw - 3rem));
        max-height: min(780px, 86vh);
        border: 1px solid rgba(24, 23, 21, 0.18);
        transform: translate(-50%, -0.75rem);
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
    }

    .atelier .search-overlay.is-open .search-dialog {
        transform: translate(-50%, 0);
    }

    .atelier .search-bar {
        padding: 1rem 1.25rem;
    }

    .atelier .search-results {
        min-height: 12rem;
        padding: 0.5rem 1.25rem 1.5rem;
    }
}

@media (min-width: 900px) {
    .atelier-hero-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        align-items: center;
        min-height: min(760px, calc(100vh - 120px));
    }

    .atelier-hero-photo img {
        max-height: 700px;
    }

    .atelier .pdp-buy {
        padding: 2rem;
    }
}

/* Product details: keep the information editorial, breathable and resilient. */
.atelier .pdp-about > summary {
    padding-inline: 1rem;
}

.atelier .pdp-about[open] {
    padding-bottom: 1.4rem;
}

.atelier .pdp-product-specs {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0;
    margin: 0.1rem 1rem 1.2rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.atelier .pdp-product-specs div {
    min-height: 0;
    padding: 0.85rem 0.2rem;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.atelier .pdp-product-specs dt,
.atelier .pdp-product-specs dd {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.atelier .pdp-about-body {
    margin: 0 1rem;
    padding: 0;
    border-left: 0;
}

.atelier .pdp-about .prose {
    max-width: 52ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.68;
    overflow-wrap: anywhere;
    word-break: normal;
}

.atelier .pdp-about .pdp-meta {
    margin-inline: 1rem;
}

/* Share is a quiet utility, aligned with the adjacent wishlist control. */
.atelier .pdp-share-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
}

.atelier .pdp-share-btn svg {
    width: 17px;
    height: 17px;
}

.atelier .pdp-share-btn:hover,
.atelier .pdp-share-btn:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Conversation UI: long names and labels should reflow, never collide or clip. */
.atelier .ai-chat-head-id {
    flex: 1;
    min-width: 0;
}

.atelier .ai-chat-head-copy h2 {
    white-space: nowrap;
}

.atelier .ai-chat-head-copy p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.atelier .ai-chat-msg,
.atelier .ai-chat-greet-sub,
.atelier .ai-chat-action-btn,
.atelier .ai-chat-chip {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 560px) {
    .atelier .ai-chat-head {
        gap: 0.45rem;
        padding-inline: 1rem;
    }

    .atelier .ai-chat-avatar {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        font-size: 1rem;
    }

    .atelier .ai-chat-head-id {
        gap: 0.55rem;
    }

    .atelier .ai-chat-head h2 {
        font-size: 1.05rem;
    }

    .atelier .ai-chat-head-wa {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        justify-content: center;
    }

    .atelier .ai-chat-head-wa span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .atelier .ai-chat-close {
        width: 38px;
        height: 38px;
    }
}

/* Mobile storefront clarity: preserve the complete lockup and make every
   product image unmistakably tappable without adding visual noise. */
@media (max-width: 899px) {
    .atelier .header-inner {
        grid-template-columns: minmax(0, 1fr) 88px 44px;
        column-gap: 0.15rem;
    }

    .atelier .brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .atelier .header-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .atelier .header-start {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .atelier .brand,
    .atelier .brand-text {
        min-width: 0;
    }

    .atelier .brand-tagline {
        max-width: none;
        font-size: 0.48rem;
        letter-spacing: 0.12em;
        line-height: 1.15;
        white-space: nowrap;
        overflow: visible;
    }

    .atelier .card-title,
    .atelier .card-title a,
    .atelier .card-price {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

@media (max-width: 340px) {
    .atelier .brand-mark,
    .atelier .brand-mark span {
        font-size: 1.2rem;
        letter-spacing: 0.045em;
    }

    .atelier .brand-tagline {
        font-size: 0.42rem;
        letter-spacing: 0.075em;
    }
}

.atelier .card-media-link {
    position: relative;
    cursor: pointer;
}

.atelier-edit-footer {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

/* Drawer utilities are compact actions, not another set of primary CTAs. */
.atelier .nav-panel-foot {
    padding-top: 1.25rem;
}

.atelier .nav-panel-foot .btn,
.atelier .nav-panel-foot a.btn,
.atelier .nav-panel-foot button.btn {
    justify-content: flex-start;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-variation-settings: 'opsz' 13, 'wght' 560;
    line-height: 1.2;
}

.atelier .nav-panel-foot .btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 759px) {
    .atelier-edit-grid > .card-product:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 0.85rem;
    }

    .atelier-edit-grid > .card-product:last-child:nth-child(odd) .card-media,
    .atelier-edit-grid > .card-product:last-child:nth-child(odd) .card-body {
        min-width: 0;
    }

    .atelier-edit-grid > .card-product:last-child:nth-child(odd) .card-body {
        padding: 0 0 0.15rem;
    }
}

.atelier .card-media-link::after {
    content: '\2192';
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid rgba(24, 23, 21, 0.18);
    border-radius: 50%;
    background: rgba(247, 245, 240, 0.94);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-variation-settings: 'opsz' 16, 'wght' 500;
    letter-spacing: 0;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--t) var(--ease), color var(--t) var(--ease),
                border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.atelier .card-cat::before {
    display: none;
}

.atelier .card-cat {
    gap: 0;
    margin-bottom: 0.2rem;
}

.atelier .card-art {
    border: 1px solid var(--rule);
    transition: border-color var(--t) var(--ease);
}

.atelier .card-body {
    gap: 0.3rem;
    padding: 0.9rem 0.1rem 0;
}

.atelier .card-title {
    min-height: 2.56em;
    line-height: 1.28;
}

.atelier .card-price {
    margin-top: 0.25rem;
}

@media (hover: hover) {
    .atelier .card-product:hover .card-art {
        border-color: var(--ink-3);
    }

    .atelier .card-media-link:hover::after {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--paper);
        transform: translateX(2px);
    }
}

@media (max-width: 759px) {
    .atelier .card-media-link::after {
        content: 'View  \2192';
        width: auto;
        height: 30px;
        min-height: 30px;
        padding: 0.35rem 0.62rem;
        border-radius: 999px;
        font-size: 0.58rem;
        font-variation-settings: 'opsz' 10, 'wght' 620;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

/* ----------------------------------------------------------- legal pages: layout (sidebar + readable article) */

.legal-page {
    padding-bottom: calc(var(--s7) + 3.5rem); /* clear the floating "Need help?" button */
}

.legal-layout {
    display: grid;
    gap: var(--s4);
    align-items: start;
}

.legal-side {
    min-width: 0;
}

.legal-article,
.legal-article.prose {
    max-width: 70ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
}

.legal-article p {
    margin: 0 0 var(--s3);
}

.legal-article h2 {
    margin: var(--s6) 0 var(--s3);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
    scroll-margin-top: 5rem;
}

.legal-article h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-article--sitemap {
    max-width: none;
}

/* policy navigation: scrollable chips on mobile, vertical list on desktop */
.legal-nav {
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0 0 0.25rem;
    border: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.legal-nav::-webkit-scrollbar {
    display: none;
}

.legal-nav a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.84rem;
    white-space: nowrap;
    background: #fff;
}

.legal-nav a:hover {
    text-decoration: none;
    border-color: var(--clay-deep);
}

.legal-nav a[aria-current="page"] {
    background: var(--clay-deep);
    border-color: var(--clay-deep);
    color: #fff;
}

/* seller identity: collapsed on mobile, compact card on desktop */
.legal-seller {
    margin-top: var(--s3);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: #fff;
}

.legal-seller > summary {
    padding: 0.7rem 1rem;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-2);
}

.legal-seller .legal-seller-card {
    margin: 0;
    padding: 0 1rem 0.5rem;
    background: none;
    border: 0;
    box-shadow: none;
}

.legal-seller .legal-seller-card__eyebrow {
    display: none;
}

.legal-seller .legal-dl div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.5rem 0;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.legal-seller .legal-dl div:last-child {
    border-bottom: 0;
}

@media (min-width: 960px) {
    .legal-layout {
        grid-template-columns: 17rem minmax(0, 1fr);
        gap: var(--s7);
    }

    .legal-side {
        position: sticky;
        top: 5.5rem;
    }

    .legal-nav {
        flex-direction: column;
        gap: 0.1rem;
        overflow: visible;
    }

    .legal-nav a {
        min-height: 36px;
        padding: 0 0.75rem;
        border: 0;
        border-radius: var(--r-sm);
        background: none;
        white-space: normal;
    }

    .legal-nav a:hover {
        background: var(--clay-tint);
    }

    .legal-nav a[aria-current="page"] {
        background: var(--clay-tint);
        color: var(--clay-deep);
        font-weight: 700;
    }

    .legal-seller > summary {
        cursor: default;
        pointer-events: none;
        list-style: none;
    }

    .legal-seller > summary::-webkit-details-marker {
        display: none;
    }
}

@media (max-width: 959px) {
    .legal-side {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .legal-seller {
        margin-inline: 0;
    }
}

/* contact + sitemap carry their own multi-column content: single wide column, horizontal policy nav */
.legal-layout--wide .legal-article,
.legal-layout--wide .legal-article.prose {
    max-width: none;
}

@media (min-width: 960px) {
    .legal-layout--wide {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s5);
    }

    .legal-layout--wide .legal-side {
        position: static;
    }

    .legal-layout--wide .legal-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .legal-layout--wide .legal-nav a {
        border: 1px solid var(--rule);
        border-radius: 999px;
        padding: 0 0.9rem;
    }

    .legal-layout--wide .legal-nav a[aria-current="page"] {
        background: var(--clay-deep);
        border-color: var(--clay-deep);
        color: #fff;
    }
}

/* ArtNest India storefront — blush, sage & cream (body.v2). Bundled in site.css with shared UI.
   Tokens: /assets/shared/artnest-tokens.css */
body.v2 {
    --v2-sage: var(--brand-sage);
    --v2-sage-deep: var(--brand-sage-deep);
    --v2-sage-soft: var(--brand-sage-soft);
    --v2-rose: var(--brand-rose);
    --v2-rose-deep: var(--brand-rose-deep);
    --v2-blush: var(--brand-blush);
    --v2-blush-soft: var(--brand-blush-soft);
    --v2-cream: var(--brand-cream);
    --v2-sand: var(--brand-sand);
    --v2-ink: var(--brand-ink);
    --v2-muted: var(--brand-muted);
    --v2-line: var(--brand-line);
    --v2-serif: var(--brand-serif);
    --v2-sans: var(--brand-sans);
    --v2-radius: var(--brand-radius);
    --v2-shadow: var(--brand-shadow);
    --v2-header-h: var(--brand-header-h);
    background: #fff;
    color: var(--v2-ink);
    font-family: var(--v2-sans);
}

body.v2 [id] {
    scroll-margin-top: calc(var(--v2-header-h) + 12px);
}
body.v2 main { background: #fff; }
.v2-wrap { width: min(100% - 2 * var(--brand-gutter, 1rem), var(--brand-container, 1240px)); margin-inline: auto; padding-inline: 0; }
.v2 svg { width: 1em; height: 1em; flex: none; }
.v2-hide-sm { display: none !important; }

/* ------------------------------------------------------------ buttons */
.v2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .7rem 1.35rem; border-radius: 8px; border: 1px solid transparent;
    font: 600 .82rem/1 var(--v2-sans); letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.v2-btn svg { width: 1.05em; height: 1.05em; }
.v2-btn:hover { transform: translateY(-1px); }
.v2-btn-rose, body.v2 .btn.v2-btn-rose { background: var(--v2-rose); color: #fff; border-color: var(--v2-rose); }
.v2-btn-rose:hover, body.v2 .btn.v2-btn-rose:hover { background: var(--v2-rose-deep); border-color: var(--v2-rose-deep); color: #fff; }
.v2-btn-sage { background: var(--v2-sage); color: #fff; }
.v2-btn-sage:hover { background: var(--v2-sage-deep); color: #fff; }
.v2-btn-ghost { background: #fff; color: var(--v2-ink); border-color: var(--v2-line); }
.v2-btn-ghost:hover { border-color: var(--v2-rose); color: var(--v2-rose-deep); }
.v2-btn-muted { background: var(--v2-sand); color: var(--v2-muted); cursor: default; }
.v2-btn-muted:hover { transform: none; }
.v2-btn-lg { min-height: 50px; padding: .9rem 1.7rem; font-size: .86rem; }
.v2-btn-sm { min-height: 38px; padding: .55rem 1rem; font-size: .74rem; }
.v2-btn-block { width: 100%; }

/* ------------------------------------------------------------ top bar */
.v2-topbar { background: var(--v2-sage); color: #fff; font-size: .78rem; letter-spacing: .02em; }
.v2-topbar-inner { display: flex; justify-content: center; gap: 2.5rem; padding-block: .5rem; }
.v2-topbar-item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.v2-topbar-item svg { width: 1.05rem; height: 1.05rem; opacity: .95; }

/* ------------------------------------------------------------ header */
.v2-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--v2-line); }
.v2-header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; min-height: 64px; }
.v2-brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; color: var(--v2-ink); text-decoration: none; }
.v2-header .v2-brand { justify-self: center; }
.v2-brand-mark { font-family: var(--v2-serif); font-size: 1.65rem; font-weight: 560; letter-spacing: -.01em; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; }
/* INDIA starts under the A in ArtNest (not optically centred under the full word). */
.v2-brand-sub { margin-top: .22rem; font-size: .58rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; padding-left: .06em; color: var(--v2-ink); }
.v2-brand-sm .v2-brand-mark { font-size: 1.35rem; }
.v2-brand-light, .v2-brand-light .v2-brand-sub { color: #fff; }
.v2-nav { display: none; }
.v2-actions { display: flex; align-items: center; gap: .15rem; justify-self: end; }
.v2-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--v2-ink); cursor: pointer; text-decoration: none; }
.v2-icon svg { display: block; width: 22px; height: 22px; flex: none; }
.v2-icon:hover { background: var(--v2-blush-soft); color: var(--v2-rose-deep); }
/* Badge lives in #an-cart-count; keep it out of the flex flow so the cart SVG lines up with search/account. */
.v2-cart #an-cart-count { position: absolute; inset: 0; pointer-events: none; }
.v2-cart .cart-badge:not(:empty) {
    position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    display: grid; place-items: center; background: var(--v2-rose); color: #fff; font: 700 .64rem/1 var(--v2-sans);
}
.v2-cart .cart-badge:empty { display: none; }

/* ------------------------------------------------------------ mobile nav */
.v2-drawer .drawer-panel { left: 0; right: auto; transform: translateX(-100%); }
.v2-drawer.is-open .drawer-panel { transform: none; }
.v2-mnav { display: flex; flex-direction: column; }
.v2-mnav > a { padding: .85rem 0; border-bottom: 1px solid var(--v2-line); color: var(--v2-ink); text-decoration: none; font-family: var(--v2-serif); font-size: 1.15rem; }
.v2-mnav > a.is-current { color: var(--v2-rose-deep); font-weight: 600; }
.v2-mnav > a.v2-mnav-sub { font-family: var(--v2-sans); font-size: .92rem; color: var(--v2-muted); padding: .6rem 0 .6rem 1rem; }
.v2-mnav-foot { display: grid; gap: .55rem; margin-top: 1.25rem; }

/* ------------------------------------------------------------ section heads */
.v2-section { padding-block: 2.75rem; }
.v2-section-tight { padding-block: 2.25rem; }
.v2-head { text-align: center; margin-bottom: 1.5rem; }
.v2-head p { margin: .45rem 0 0; color: var(--v2-muted); font-size: .9rem; }
.v2-title { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0; font-family: var(--v2-serif); font-weight: 600; font-size: 1.12rem; letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; color: var(--v2-ink); }
.v2-title::before, .v2-title::after { content: ""; flex: 0 1 40px; height: 1px; background: var(--v2-rose); opacity: .55; }

/* ------------------------------------------------------------ hero */
.v2-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--v2-cream) 0%, var(--v2-blush-soft) 100%); }
.v2-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.25rem 2.5rem; align-items: center; }
.v2-display { margin: 0; font-family: var(--v2-serif); font-weight: 600; font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--v2-ink); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
.v2-display span { display: block; }
.v2-hero-sub { margin: 1rem 0 .4rem; font-family: var(--v2-serif); font-size: clamp(1.15rem, 4.4vw, 1.5rem); font-weight: 500; line-height: 1.25; color: var(--v2-ink); max-width: 26ch; }
.v2-hero-text { margin: 0 0 1.4rem; color: var(--v2-muted); font-size: .98rem; line-height: 1.6; max-width: 44ch; }
.v2-hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin: 1.6rem 0 0; padding: 0; }
.v2-hero-badges li { display: inline-flex; align-items: center; gap: .55rem; max-width: 8.5rem; font-size: .8rem; font-weight: 500; line-height: 1.25; color: var(--v2-ink); }
.v2-hero-badges svg { width: 1.7rem; height: 1.7rem; color: var(--v2-ink); }
.v2-hero-media { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--v2-shadow); }
.v2-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-hero-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1; width: min(100%, 560px); margin-inline: auto; padding: 12px; }
.v2-collage-tile { position: relative; display: block; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--v2-shadow); border: 6px solid #fff; min-width: 0; min-height: 0; }
.v2-collage-tile picture, .v2-collage-tile img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #fff; }
.v2-collage-1 { transform: rotate(-1.4deg); }
.v2-collage-2 { transform: rotate(1.5deg); }
.v2-collage-3 { transform: rotate(-1.1deg); }
.v2-collage-4 { transform: rotate(1.3deg); }
.v2-collage-heart { position: absolute; color: var(--v2-rose); font-size: 1.6rem; opacity: .7; z-index: 2; pointer-events: none; }
.v2-collage-heart-1 { top: 46%; left: 46%; }
.v2-collage-heart-2 { top: 41%; left: 55%; font-size: 1.15rem; }

/* ------------------------------------------------------------ categories */
.v2-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.v2-cat-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--v2-radius); background: var(--v2-cream); border: 1px solid var(--v2-line); color: var(--v2-ink); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.v2-cat-card:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); }
.v2-cat-media { display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.v2-cat-media picture, .v2-cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.v2-cat-card:hover .v2-cat-media img { transform: scale(1.04); }
.v2-cat-body { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .6rem 1rem; text-align: center; flex: 1; }
.v2-cat-title { font-family: var(--v2-serif); font-weight: 600; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; }
.v2-cat-tag { font-size: .74rem; color: var(--v2-muted); line-height: 1.35; min-height: 2em; }
.v2-pill { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding: .45rem 1rem; border-radius: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.v2-pill svg { width: .95em; height: .95em; }
.v2-pill-rose { background: var(--v2-rose); }
.v2-pill-sage { background: var(--v2-sage); }

/* ------------------------------------------------------------ carousel */
.v2-carousel { position: relative; }
.v2-track { display: grid; grid-auto-flow: column; grid-auto-columns: 47%; gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.v2-track::-webkit-scrollbar { display: none; }
.v2-track > * { scroll-snap-align: start; }
.v2-carousel-btn { display: none; position: absolute; top: 38%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-ink); box-shadow: var(--v2-shadow); cursor: pointer; place-items: center; }
.v2-carousel-btn svg { width: 18px; height: 18px; }
.v2-carousel-btn:hover { color: var(--v2-rose-deep); border-color: var(--v2-rose); }
.v2-carousel-btn[disabled] { opacity: .35; cursor: default; }
/* hang 20px outside the track on wide screens, but never past the viewport edge (caused sideways scroll at 960–1270px) */
.v2-prev { left: max(-20px, calc((100% - 100vw) / 2 + 12px)); }
.v2-next { right: max(-20px, calc((100% - 100vw) / 2 + 12px)); }

.v2-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.v2-card:hover { box-shadow: var(--v2-shadow); transform: translateY(-2px); }
.v2-card-media { position: relative; display: block; aspect-ratio: 1; background: var(--v2-cream); overflow: hidden; }
.v2-card-media picture, .v2-card-media img, .v2-card-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-badge { position: absolute; top: .55rem; left: .55rem; padding: .28rem .6rem; border-radius: 5px; font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.v2-badge-rose { background: var(--v2-rose); }
.v2-badge-sage { background: var(--v2-sage); }
.v2-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .65rem .65rem .75rem; flex: 1; }
.v2-card-title { margin: 0; font: 500 .84rem/1.35 var(--v2-sans); min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-card-title a { color: var(--v2-ink); text-decoration: none; }
.v2-card-title a:hover { color: var(--v2-rose-deep); }
.v2-card-price { margin: 0 0 .35rem; font-weight: 700; font-size: 1rem; color: var(--v2-ink); }
.v2-card-price small { font-weight: 500; color: var(--v2-muted); font-size: .72rem; }
.v2-card .v2-btn { min-height: 44px; text-transform: none; letter-spacing: .01em; font-size: .82rem; }
.v2-card-foot { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.v2-card-add { margin-top: auto; }
.v2-card-foot > .v2-card-cta { margin-top: auto; }
.v2-card-cta { width: 100%; }
.v2-card-cta-short { display: none; }
.v2-card-por { font-size: .86rem; font-weight: 600; color: var(--v2-muted); }

/* ------------------------------------------------------------ trust */
.v2-trust { background: var(--v2-sand); border-block: 1px solid var(--v2-line); }
.v2-trust-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .9rem; padding: 1.4rem 0; margin-block: 0; } /* padding-inline 0: kills the UA ul indent (40px) that pushed the grid right */
.v2-trust-grid li { display: flex; align-items: center; gap: .7rem; }
.v2-trust-grid svg { width: 2rem; height: 2rem; color: var(--v2-ink); }
.v2-trust-grid strong { display: block; font-size: .8rem; font-weight: 600; line-height: 1.3; }
.v2-trust-grid small { display: block; font-size: .72rem; color: var(--v2-muted); line-height: 1.35; margin-top: .1rem; }

/* ------------------------------------------------------------ story */
.v2-story { background: var(--v2-cream); }
.v2-story-grid { display: grid; }
.v2-story-copy { padding: 2.5rem 1rem 2rem; width: min(100%, 560px); margin-inline: auto; }
.v2-story-title { margin: 0 0 1rem; font-family: var(--v2-serif); font-weight: 600; line-height: 1.05; color: var(--v2-ink); }
.v2-story-title span { display: block; font-size: clamp(2rem, 8vw, 2.6rem); }
.v2-story-title .v2-story-kicker { font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 500; margin-bottom: .2rem; }
.v2-story-copy p { color: var(--v2-muted); line-height: 1.7; font-size: .95rem; margin: 0 0 1.4rem; }
.v2-story-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.v2-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }

/* ------------------------------------------------------------ customer reviews */
.v2-reviews { background: var(--v2-cream); border-block: 1px solid var(--v2-line); }
.v2-reviews-track { grid-auto-columns: min(88vw, 340px); gap: 1rem; }
.v2-review-card {
    display: flex; flex-direction: column; gap: .75rem; height: 100%; min-height: 100%;
    padding: 1.1rem 1.15rem 1.15rem; border-radius: var(--v2-radius); background: #fff;
    border: 1px solid var(--v2-line); box-shadow: var(--v2-shadow);
}
.v2-review-stars { display: flex; gap: .12rem; line-height: 1; color: var(--v2-line); font-size: .95rem; }
.v2-review-star.is-on { color: #c9a227; }
.v2-review-quote { margin: 0; flex: 1; }
.v2-review-quote p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--v2-ink); }
.v2-review-meta { display: grid; gap: .2rem; font-size: .78rem; color: var(--v2-muted); }
.v2-review-meta strong { font-size: .84rem; color: var(--v2-ink); }
.v2-review-topic { color: var(--v2-rose-deep); font-weight: 500; }
.v2-review-source { font-size: .72rem; letter-spacing: .02em; }

/* ------------------------------------------------------------ instagram */
.v2-ig-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .9rem; margin-bottom: 1.1rem; }
.v2-ig-title { margin: 0; font-family: var(--v2-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; }
.v2-ig-head p { margin: .3rem 0 0; color: var(--v2-muted); font-size: .88rem; }
.v2-ig-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 0; padding: 0; }
.v2-ig-grid li { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--v2-cream); }
.v2-ig-grid a, .v2-ig-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-ig-grid li:nth-child(n+7) { display: none; }
.v2-ig-empty p { margin: .9rem 0 0; text-align: center; color: var(--v2-muted); font-size: .86rem; }

/* ------------------------------------------------------------ placeholders */
.v2-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; background: linear-gradient(135deg, var(--v2-blush) 0%, var(--v2-cream) 100%); color: var(--v2-rose); }
.v2-ph-1 { background: linear-gradient(135deg, var(--v2-sage-soft) 0%, var(--v2-cream) 100%); color: var(--v2-sage); }
.v2-ph-2 { background: linear-gradient(135deg, var(--v2-sand) 0%, var(--v2-blush-soft) 100%); }
.v2-ph svg { width: 26%; height: 26%; opacity: .55; }

/* ------------------------------------------------------------ CTA band */
.v2-cta { position: relative; overflow: hidden; background: var(--v2-sage-deep); color: #fff; }
.v2-cta-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.1rem; padding-block: 2.4rem; text-align: center; }
.v2-cta h2 { margin: 0; font-family: var(--v2-serif); font-weight: 500; font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.2; color: #fff; }
.v2-cta p { margin: .5rem 0 0; color: rgba(255,255,255,.85); font-size: .92rem; }
.v2-cta-leaf { position: absolute; width: 130px; height: 130px; color: rgba(255,255,255,.28); }
.v2-cta-leaf-l { left: -18px; bottom: -22px; }
.v2-cta-leaf-r { right: -18px; top: -26px; }

/* ------------------------------------------------------------ footer */
.v2-footer { background: #3f4e3b; color: rgba(255,255,255,.82); font-size: .86rem; }
.v2-footer-grid { display: grid; gap: 1.8rem; padding-block: 2.6rem 1.8rem; }
.v2-footer h2 { margin: 0 0 .7rem; font: 600 .74rem/1 var(--v2-sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.v2-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.v2-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.v2-footer a:hover { color: #fff; }
.v2-footer-intro p { margin: .9rem 0; max-width: 30ch; }
.v2-footer-wa { display: inline-flex; align-items: center; gap: .45rem; margin-right: 1rem; font-weight: 600; }
.v2-footer-policies a { display: block; padding: .18rem 0; }
.v2-footer-bottom { display: grid; gap: .3rem; padding-block: 1.1rem 1.6rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .74rem; color: rgba(255,255,255,.62); }

/* Shared partials restyled for v2 */
body.v2 .drawer-panel .btn:not(.btn-ghost):not(.link-quiet) { background: var(--v2-rose); border-color: var(--v2-rose); color: #fff; }
/* Toasts (shared storefront.js markup). The old override set a sage background but kept the theme's
   sage text colour, so "Added to cart" rendered as an empty green pill. */
body.v2 .toast { pointer-events: none; border-radius: 999px; padding: .7rem 1.15rem; font-family: var(--v2-sans); font-size: .84rem; font-weight: 600; line-height: 1.3; box-shadow: 0 8px 24px rgba(44,42,39,.18); }
body.v2 .toast svg { color: currentColor; }
body.v2 .toast.is-success { background: var(--v2-sage-deep); color: #fff; }
body.v2 .toast.is-error, body.v2 .toast.toast-error { background: #fff; color: #a3251c; box-shadow: 0 8px 24px rgba(44,42,39,.18), inset 0 0 0 1px rgba(163,37,28,.35); }
body.v2 .toast.is-info { background: #fff; color: var(--v2-ink); box-shadow: 0 8px 24px rgba(44,42,39,.18), inset 0 0 0 1px var(--v2-line); }
/* With the cart drawer open the drawer itself confirms adds/quantity changes, so success/info toasts are kept
   only for screen readers (still announced via the live region); errors sit centred over the drawer just above its
   checkout footer (offsets set in v2.js), clear of the header/first line item, and never block taps. */
body.v2:has(.drawer.is-open) .toast-stack .toast:not(.is-error):not(.toast-error) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; animation: none; }
body.v2:has(.drawer.is-open) .toast-stack { top: auto; bottom: var(--v2-toast-bottom, calc(1rem + env(safe-area-inset-bottom))); left: var(--v2-toast-left, 50%); }

/* ------------------------------------------------------------ mobile-only pieces (hidden by default) */
.v2-hero-copy, .v2-hero-desk { min-width: 0; }
.v2-display .v2-hero-h-short, .v2-hero-mobile, .v2-cat-chips, .v2-bnav, .v2-readmore, .v2-header-account { display: none; }
.v2-header .v2-brand, .v2-footer .v2-brand { min-height: 44px; justify-content: center; }
.v2-card { position: relative; }
.v2-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.v2-card-foot .v2-card-cta, .v2-card-add, .v2-card .wishlist-btn { position: relative; z-index: 2; }
.v2-viewall { margin: 1.4rem 0 0; text-align: center; }
.v2-ig-grid li { position: relative; }
.v2-ig-badge { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); pointer-events: none; }
.v2-ig-badge svg { width: 100%; height: 100%; }
.v2-ig-grid a { transition: opacity .2s; }
.v2-ig-grid a:hover { opacity: .88; }
.v2-facc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
.v2-facc > summary::-webkit-details-marker { display: none; }
.v2-facc > summary svg { display: none; }

/* ------------------------------------------------------------ phones ≤ 768px */
@media (max-width: 768px) {
    body.v2 { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    body.v2.has-buybar { padding-bottom: 0; }
    body.v2 .toast-stack { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }

    /* slim sticky header: menu + logo (search and cart live in the bottom nav) */
    .v2-topbar { font-size: .72rem; }
    .v2-topbar-inner { padding-block: .38rem; }
    .v2-header-inner { grid-template-columns: 44px 1fr 44px; min-height: 56px; gap: .25rem; }
    .v2-header .v2-actions { display: none; }
    .v2-header-account { display: inline-flex; justify-self: end; grid-column: 3; grid-row: 1; }
    .v2-brand-mark { font-size: 1.45rem; }
    .v2-brand-sub { font-size: .52rem; margin-top: .16rem; }

    /* compact hero */
    .v2-hero-grid { gap: 0; padding-block: 1.1rem 1.25rem; }
    .v2-hero-desk, .v2-hero-text { display: none; }
    /* The full heading stays the accessible H1 text on phones; the short line is aria-hidden. */
    .v2-display .v2-hero-h-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .v2-display .v2-hero-h-short { display: block; }
    .v2-display { font-size: clamp(1.85rem, 8.4vw, 2.25rem); line-height: 1.08; }
    .v2-hero-sub { margin: .45rem 0 .9rem; font-size: 1rem; max-width: none; }
    .v2-hero-mobile { display: block; margin: 0 0 .9rem; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; background: #fff; box-shadow: var(--v2-shadow); }
    .v2-hero-mobile img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .v2-hero-cta { width: 100%; }
    .v2-hero-badges { flex-wrap: nowrap; gap: .5rem; margin: .9rem -1rem 0; padding: 0 1rem 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
    .v2-hero-badges::-webkit-scrollbar { display: none; }
    .v2-hero-badges li { flex: none; max-width: none; white-space: nowrap; scroll-snap-align: start; padding: .5rem .8rem; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--v2-line); font-size: .76rem; }
    .v2-hero-badges svg { width: 1.15rem; height: 1.15rem; color: var(--v2-sage-deep); }

    /* section rhythm */
    .v2-section { padding-block: 1.75rem; }
    .v2-section-tight { padding-block: 1.6rem; }
    .v2-head { margin-bottom: 1rem; }
    .v2-head p { font-size: .82rem; }
    .v2-title { font-size: 1rem; }

    /* categories: circular chips */
    .v2-cat-grid { display: none; }
    .v2-cat-chips { list-style: none; display: flex; gap: .55rem; margin: 0 -1rem; padding: 2px 1rem 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
    .v2-cat-chips::-webkit-scrollbar { display: none; }
    .v2-cat-chips li { flex: none; scroll-snap-align: start; }
    .v2-chip { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 78px; padding: 2px 0; color: var(--v2-ink); text-decoration: none; }
    .v2-chip-img { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: var(--v2-cream); border: 2px solid var(--v2-blush); box-shadow: 0 0 0 2px #fff inset; }
    .v2-chip-img picture, .v2-chip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .v2-chip-all .v2-chip-img { background: var(--v2-sage-soft); border-color: var(--v2-sage-soft); color: var(--v2-sage-deep); }
    .v2-chip-all .v2-chip-img svg { width: 24px; height: 24px; }
    .v2-chip-label { font-size: .72rem; font-weight: 500; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
    .v2-chip:active .v2-chip-img { border-color: var(--v2-rose); }

    /* bestsellers: 2-column grid of compact cards */
    .v2-track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: .65rem; overflow: visible; scroll-snap-type: none; padding: 0; }
    .v2-carousel:not(.v2-reviews-carousel) .v2-track > :nth-child(n+7) { display: none; }
    /* Reviews: horizontal cards (not the 2-col product grid above). */
    .v2-reviews-carousel .v2-track {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: min(88vw, 320px);
        gap: .85rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 2px 2px 10px;
    }
    .v2-reviews-carousel .v2-track > * { display: flex; }
    .v2-viewall { margin-top: 1rem; }
    .v2-viewall .v2-btn { width: 100%; }

    .v2-card { border-radius: 12px; }
    .v2-card:hover { transform: none; }
    .v2-badge { top: .4rem; left: .4rem; font-size: .6rem; padding: .22rem .45rem; }
    .v2-card-body { padding: .5rem .55rem .55rem; gap: .2rem; }
    .v2-card-title { font-size: .78rem; }
    .v2-card-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: .35rem; flex: 1; }
    .v2-card-price { margin: 0; font-size: .9rem; line-height: 1.15; align-self: flex-end; padding-bottom: .55rem; }
    .v2-card-price small { display: block; font-size: .64rem; }
    .v2-card-por { font-size: .74rem; }
    .v2-card-add, .v2-card-foot > .v2-card-cta { margin-top: auto; flex: none; }
    .v2-card .v2-card-cta { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; gap: 0; }
    .v2-card .v2-card-cta svg { width: 20px; height: 20px; }
    .v2-card-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .v2-card .v2-card-cta-muted { width: auto; height: auto; min-height: 28px; padding: .3rem .55rem; border-radius: 6px; font-size: .68rem; }
    .v2-card-cta-muted .v2-card-cta-short { display: inline; }

    /* trust strip: compact 2 × 2 */
    .v2-trust-grid { gap: .55rem; padding-block: .9rem; }
    .v2-trust-grid li { gap: .5rem; padding: .6rem .65rem; border-radius: 10px; background: rgba(255,255,255,.7); min-height: 56px; }
    .v2-trust-grid svg { width: 1.45rem; height: 1.45rem; color: var(--v2-sage-deep); }
    .v2-trust-grid strong { font-size: .72rem; line-height: 1.25; }
    .v2-trust-grid small { display: none; }

    /* story: short banner + read more */
    .v2-story-media { order: -1; aspect-ratio: auto; height: 150px; }
    .v2-story-media img { object-position: center 42%; }
    .v2-story-copy { padding: 1.3rem 1rem 1.5rem; }
    .v2-story-title { margin-bottom: .6rem; }
    .v2-story-title span { font-size: 1.55rem; }
    .v2-story-title .v2-story-kicker { font-size: 1rem; }
    .v2-story-copy p { font-size: .9rem; line-height: 1.6; margin-bottom: .25rem; }
    .v2-story-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .v2-readmore { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--v2-rose-deep); font: 600 .84rem/1 var(--v2-sans); cursor: pointer; }
    .v2-readmore svg { width: 1rem; height: 1rem; transition: transform .2s; }
    .v2-story-cta { display: flex; width: 100%; margin-top: .35rem; }

    /* instagram */
    .v2-ig-head { flex-direction: column; align-items: stretch; gap: .7rem; }
    .v2-ig-title { font-size: 1.05rem; }
    .v2-ig-head p { font-size: .8rem; }
    .v2-ig-head .v2-btn { width: 100%; min-height: 44px; }
    .v2-ig-grid { gap: .4rem; }
    .v2-ig-grid li { border-radius: 8px; }
    .v2-ig-badge { width: 1.25rem; height: 1.25rem; top: .3rem; right: .3rem; }

    /* closing CTA, shrunk */
    .v2-cta-inner { gap: .8rem; padding-block: 1.5rem; }
    .v2-cta h2 { font-size: 1.2rem; }
    .v2-cta p { display: none; }
    .v2-cta .v2-btn-lg { min-height: 44px; padding: .7rem 1.3rem; font-size: .8rem; }
    .v2-cta-leaf { width: 80px; height: 80px; }

    /* footer accordions */
    .v2-footer-grid { gap: 0; padding-block: 1.8rem .6rem; }
    .v2-footer-intro { padding-bottom: 1rem; }
    .v2-footer-wa { min-height: 44px; }
    .v2-facc { border-top: 1px solid rgba(255,255,255,.14); }
    .v2-facc > summary { min-height: 50px; cursor: pointer; }
    .v2-facc > summary h2 { margin: 0; }
    .v2-facc > summary svg { display: block; width: 1.1rem; height: 1.1rem; color: rgba(255,255,255,.7); transition: transform .2s; }
    .v2-facc[open] > summary svg { transform: rotate(180deg); }
    .v2-facc ul, .v2-facc.v2-footer-policies > :not(summary) { padding-bottom: .9rem; }
    .v2-facc li a, .v2-footer-policies a { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .v2-footer-bottom { font-size: .7rem; }

    /* sticky bottom nav */
    .v2-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--v2-line); box-shadow: 0 -4px 18px rgba(44,42,39,.06); }
    body.has-buybar .v2-bnav { display: none; }
    .v2-bnav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 60px; color: var(--v2-muted); text-decoration: none; font-size: .68rem; font-weight: 600; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; }
    .v2-bnav-item svg { width: 23px; height: 23px; }
    .v2-bnav-item.is-current, .v2-bnav-item:active { color: var(--v2-rose-deep); }
    .v2-bnav-item.is-current::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--v2-rose); }
    .v2-bnav .v2-cart .cart-badge:not(:empty) { top: 6px; right: auto; left: calc(50% + 4px); }

    .v2-shop-sheet { position: fixed; inset: 0 0 calc(60px + env(safe-area-inset-bottom)) 0; z-index: -1; display: flex; align-items: flex-end; background: rgba(44,42,39,.38); }
    .v2-shop-sheet-panel { width: 100%; max-height: 72vh; overflow-y: auto; padding: .4rem 1rem 1rem; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(44,42,39,.12); }
    .v2-shop-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-family: var(--v2-serif); font-size: 1.1rem; }
    .v2-shop-sheet-all { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 .9rem; margin-bottom: .4rem; border-radius: 10px; background: var(--v2-blush-soft); color: var(--v2-rose-deep); font-weight: 600; text-decoration: none; }
    .v2-shop-sheet ul { list-style: none; margin: 0; padding: 0; }
    .v2-shop-sheet li a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 .2rem; border-bottom: 1px solid var(--v2-line); color: var(--v2-ink); text-decoration: none; font-size: .95rem; }
    .v2-shop-sheet li small { min-width: 2rem; padding: .15rem .45rem; border-radius: 999px; background: var(--v2-sand); color: var(--v2-muted); font-size: .7rem; text-align: center; }
}

/* desktop: details always open, summary is just a heading */
@media (min-width: 769px) {
    .v2-facc > summary { pointer-events: none; }
}

/* ============================================================ inner pages */
/* Shared partials (login, search, drawers, PDP pieces) read the original theme
   variables, so re-pointing them gives every page the v2 palette and radii. */
body.atelier.v2 {
    --clay: var(--v2-rose); --clay-deep: var(--v2-rose-deep); --clay-press: #9c4f59; --clay-tint: var(--v2-blush);
    --sage: var(--v2-sage); --sage-deep: var(--v2-sage-deep); --sage-tint: var(--v2-sage-soft);
    --accent: var(--v2-rose-deep); --accent-deep: var(--v2-rose-deep); --accent-tint: var(--v2-blush-soft);
    --paper-2: var(--v2-cream); --paper-3: var(--v2-blush-soft);
    --ink: #2c2a27; --ink-2: #6f6a63; --ink-3: #6f6a63;
    --rule: var(--v2-line); --rule-strong: #ddd2c4;
    --r-sm: 8px; --r: 10px; --r-lg: 16px; --r-xl: 22px;
    --lift-1: 0 1px 2px rgba(44,42,39,.05); --lift-2: 0 8px 24px -8px rgba(44,42,39,.16); --lift-3: 0 18px 48px -16px rgba(44,42,39,.28);
    --header-h: 56px;
}
body.v2 .btn { --btn-bg: var(--v2-rose); --btn-fg: #fff; --btn-bd: var(--v2-rose); border-radius: 8px !important; min-height: 46px; }
body.v2 .btn:hover { --btn-bg: var(--v2-rose-deep); --btn-bd: var(--v2-rose-deep); color: #fff; }
body.v2 .btn-ghost { --btn-bg: #fff; --btn-fg: var(--v2-ink); --btn-bd: var(--rule-strong); }
body.v2 .btn-ghost:hover { --btn-bg: var(--v2-blush-soft); --btn-bd: var(--v2-rose); color: var(--v2-rose-deep); }
body.v2 .btn-wa { --btn-bg: var(--v2-sage-deep); --btn-bd: var(--v2-sage-deep); }
body.v2 .btn-wa:hover { --btn-bg: #4b5f46; --btn-bd: #4b5f46; }
body.v2 .btn[disabled], body.v2 .btn:disabled { opacity: .55; }
body.v2 .stepper { border-radius: 10px; border-color: var(--rule-strong); background: #fff; }
body.v2 .stepper button { width: 44px; height: 44px; }
body.v2 .stepper input, body.v2 .stepper .stepper-value { height: 44px; width: 46px; }
body.v2 input[type=text], body.v2 input[type=number], body.v2 input[type=search], body.v2 input[type=email], body.v2 input[type=tel], body.v2 input[type=password], body.v2 select { border-radius: 10px; }
body.v2 .pager a, body.v2 .pager span { min-width: 44px; height: 44px; border-radius: 50%; padding: 0 .7rem; }
body.v2 .pager a:not(.num), body.v2 .pager span:not(.num):not(.is-gap) { border-radius: 999px; border: 1px solid var(--v2-line); }
body.v2 .pager [aria-current='page'] { background: var(--v2-rose); color: #fff; }
body.v2 .stock-pill { border-radius: 999px; }

/* crumbs + page hero */
.v2-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; padding: 0; font-size: .74rem; color: var(--v2-muted); }
.v2-crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .5; }
.v2-crumbs a { color: var(--v2-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.v2-crumbs a:hover { color: var(--v2-rose-deep); }
body.v2 .crumbs.v2-crumbs { margin: 0 0 .9rem; }
.v2-page-hero { background: linear-gradient(180deg, var(--v2-cream) 0%, var(--v2-blush-soft) 100%); border-bottom: 1px solid var(--v2-line); padding-block: 1.1rem 1.3rem; }
.v2-page-title { margin: 0; font-family: var(--v2-serif); font-weight: 600; font-size: clamp(1.6rem, 6.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; color: var(--v2-ink); }
.v2-page-sub { margin: .4rem 0 0; color: var(--v2-muted); font-size: .9rem; line-height: 1.5; max-width: 52ch; }
.v2-h2 { margin: 0; font-family: var(--v2-serif); font-weight: 600; font-size: 1.25rem; color: var(--v2-ink); }
.v2-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.v2-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; color: var(--v2-rose-deep); font-weight: 600; font-size: .86rem; text-decoration: none; }
.v2-link svg { width: 1rem; height: 1rem; }

/* category quick links */
.v2-quickcats { display: flex; gap: .5rem; margin: 1rem -1rem 0; padding: 0 1rem 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.v2-quickcats::-webkit-scrollbar { display: none; }
.v2-qc { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-ink); font-size: .84rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.v2-qc:hover { border-color: var(--v2-rose); color: var(--v2-rose-deep); }
.v2-qc.is-active { background: var(--v2-sage); border-color: var(--v2-sage); color: #fff; }

/* shop bar / toolbar */
.v2-shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; }
.v2-shelves { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--v2-sand); }
.v2-shelf { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .95rem; border-radius: 999px; color: var(--v2-muted); font-size: .8rem; font-weight: 600; text-decoration: none; }
.v2-shelf small { font-size: .7rem; opacity: .8; }
.v2-shelf.is-active { background: #fff; color: var(--v2-ink); box-shadow: 0 1px 3px rgba(44,42,39,.12); }
.v2-result-count { margin: 0; color: var(--v2-muted); font-size: .84rem; }
.v2-result-count strong { color: var(--v2-ink); }
.v2-filtered { margin-left: .3rem; }
.v2-filtered a { color: var(--v2-rose-deep); }
.v2-shop-toolbar { position: sticky; top: 56px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .8rem -1rem 1rem; padding: .55rem 1rem; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--v2-line); }
.v2-filters-btn { min-height: 44px; padding: .55rem 1rem; text-transform: none; letter-spacing: .01em; font-size: .86rem; position: relative; }
.v2-filters-btn svg { width: 1.15rem; height: 1.15rem; }
.v2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-rose); }
.v2-sort { display: flex; align-items: center; gap: .45rem; margin: 0; }
.v2-sort label { font-size: .8rem; color: var(--v2-muted); }
.v2-sort select { min-height: 44px; max-width: 58vw; padding: 0 2.1rem 0 .85rem; border: 1px solid var(--v2-line); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a27' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / 16px; -webkit-appearance: none; appearance: none; color: var(--v2-ink); font: 500 .86rem var(--v2-sans); }

.v2-shop-layout { display: block; }
.v2-shop-sidebar { display: none; }
.v2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.v2-card-cat { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-sage-deep); }
.v2-card-stock { position: absolute; left: .45rem; bottom: .45rem; }
.v2-card-stock .stock-pill { font-size: .62rem; }
.v2 .v2-wish { position: absolute; top: .35rem; right: .35rem; z-index: 3; width: 44px; height: 44px; border: 0; background: transparent; color: var(--v2-ink); }
.v2 .v2-wish::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(44,42,39,.12); }
.v2 .v2-wish svg { position: relative; width: 17px; height: 17px; }
.v2 .v2-wish.is-active { color: var(--v2-rose); }
.v2 .v2-wish.is-active svg { fill: currentColor; }

/* filter panel (sidebar + drawer) */
.v2-filters-panel .shop-filter-group { border: 0; margin: 0 0 1.1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--v2-line); }
.v2-filters-panel legend { margin-bottom: .5rem; font: 600 .72rem/1 var(--v2-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--v2-ink); }
.v2-filters-panel .shop-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.v2-filters-panel .shop-check input { width: 20px; height: 20px; accent-color: var(--v2-rose); }
.v2-filters-panel .shop-check span { display: flex; justify-content: space-between; flex: 1; font-size: .9rem; }
.v2-filters-panel .shop-check small { color: var(--v2-muted); }
.v2-filters-panel .shop-price-range input { min-height: 44px; }
.v2-filters-title { margin: 0 0 1rem; font-family: var(--v2-serif); font-size: 1.15rem; }
.v2-filters-drawer .drawer-head h2 { font-family: var(--v2-serif); }

.v2-empty { margin: 1.5rem 0 2.5rem; padding: 1.6rem 1.2rem; border-radius: var(--v2-radius); background: var(--v2-cream); border: 1px solid var(--v2-line); text-align: center; }
.v2-empty-title { margin: 0 0 .4rem; font-family: var(--v2-serif); font-size: 1.2rem; font-weight: 600; }
.v2-empty p { color: var(--v2-muted); font-size: .9rem; }
.v2-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.v2-shop .pager, .v2-cat-page .pager, .v2-search-page .pager { margin-block: 1.6rem 2.4rem; }

/* category hero */
.v2-cat-hero { background: linear-gradient(120deg, var(--v2-cream) 0%, var(--v2-blush-soft) 60%, var(--v2-blush) 100%); border-bottom: 1px solid var(--v2-line); }
.v2-cat-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: 1.1rem 1.3rem; }
.v2-cat-hero-media { margin: 0; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: var(--v2-shadow); background: #fff; }
.v2-cat-hero-media picture, .v2-cat-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-cat-count { margin: .55rem 0 0; font-size: .8rem; color: var(--v2-muted); }
.v2-cat-count strong { color: var(--v2-ink); }
.v2-cat-page .v2-shop-toolbar { margin-top: .8rem; }
.v2-cat-page .v2-grid { margin-bottom: .5rem; }

/* search page */
.v2-search-form { position: relative; display: flex; gap: .5rem; margin-top: .9rem; max-width: 640px; }
.v2-search-form > svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--v2-muted); pointer-events: none; }
.v2-search-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 .9rem 0 2.6rem; border: 1px solid var(--rule-strong); border-radius: 12px; background: #fff; font: 400 1rem var(--v2-sans); }
.v2-search-form input:focus { outline: 2px solid var(--v2-rose); outline-offset: 1px; }
.v2-search-form .v2-btn { min-height: 48px; }
.v2-search-body { padding-block: 1.2rem 2.5rem; }
.v2-search-body > .v2-result-count { margin-bottom: .9rem; }
.v2-search-h2 { margin: 1.4rem 0 .9rem; font-size: 1.1rem; }
.v2-cat-chips.v2-cat-chips-always { display: flex; }

/* search overlay + suggestions */
body.v2 .search-dialog { border-radius: 0 0 18px 18px; }
body.v2 .search-field { border-radius: 12px; min-height: 48px; }
body.v2 .search-row { border-radius: 10px; min-height: 60px; }
body.v2 .search-row:hover, body.v2 .search-row[aria-selected='true'] { background: var(--v2-blush-soft); }
body.v2 .search-row-art { border-radius: 8px; overflow: hidden; }
body.v2 .search-row-price { color: var(--v2-rose-deep); font-weight: 600; }
body.v2 .search-dismiss { min-height: 44px; color: var(--v2-rose-deep); font-weight: 600; }

/* login popup */
body.v2 .login-dialog { border-radius: 18px; overflow: hidden; }
body.v2 .login-dialog-head { background: linear-gradient(180deg, var(--v2-cream), #fff); }
body.v2 .login-dialog-head h2, body.v2 .login-dialog h2 { font-family: var(--v2-serif); font-weight: 600; }
body.v2 .login-tabs { padding: 3px; border-radius: 999px; background: var(--v2-sand); border: 0; gap: 0; }
body.v2 .login-tab { min-height: 42px; border-radius: 999px; border: 0; color: var(--v2-muted); font-weight: 600; }
body.v2 .login-tab.is-active { background: #fff; color: var(--v2-ink); box-shadow: 0 1px 3px rgba(44,42,39,.12); }
body.v2 .login-field input { min-height: 46px; border-radius: 10px; }
body.v2 .login-field input:focus { outline: 2px solid var(--v2-rose); outline-offset: 1px; border-color: transparent; }
body.v2 .signup-contact-toggle button, body.v2 .auth-method-toggle button { border-radius: 999px; min-height: 40px; }
body.v2 .signup-contact-toggle .is-active, body.v2 .auth-method-toggle .is-active { background: var(--v2-sage); border-color: var(--v2-sage); color: #fff; }
body.v2 .login-dialog .btn-link { color: var(--v2-rose-deep); }

/* cart drawer */
body.v2 .drawer-panel { border-radius: 0; }
body.v2 #an-cart-panel .drawer-head h2 { font-family: var(--v2-serif); font-weight: 600; font-size: 1.3rem; }
body.v2 .mini-line { border-radius: 12px; }
body.v2 .mini-line-art { border-radius: 10px; overflow: hidden; background: var(--v2-cream); }
body.v2 .mini-line-price { color: var(--v2-ink); font-weight: 700; }
body.v2 .drawer-foot { background: var(--v2-cream); border-top: 1px solid var(--v2-line); }
body.v2 .drawer-view-cart { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; color: var(--v2-rose-deep); font-weight: 600; }
body.v2 .link-quiet { min-height: 36px; }

/* product page */
.v2-pdp { padding-top: .8rem; }
body.v2 .v2-pdp .crumbs { display: flex; flex-wrap: nowrap; overflow: hidden; }
body.v2 .v2-pdp .crumbs li { white-space: nowrap; }
.v2-pdp .v2-crumb-current { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--v2-ink); }
body.v2 .v2-pdp .pdp-figure { border-radius: 16px; overflow: hidden; border: 1px solid var(--v2-line); background: #fff; }
body.v2 .v2-pdp .pdp-thumb { border-radius: 10px; overflow: hidden; min-width: 56px; min-height: 56px; }
body.v2 .v2-pdp .pdp-thumb.is-active { outline: 2px solid var(--v2-rose); outline-offset: 1px; }
body.v2 .v2-pdp .pdp-zoom-cue { border-radius: 50%; }
.v2-pdp .eyebrow-accent { color: var(--v2-sage-deep); letter-spacing: .1em; }
.v2-pdp .v2-pdp-title { font-family: var(--v2-serif); font-weight: 600; font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; }
body.v2 .v2-pdp .pdp-buy .display-m::after { background: var(--v2-rose); }
body.v2 .v2-pdp .pdp-price { color: var(--v2-rose-deep); font-family: var(--v2-sans); font-weight: 700; }
body.v2 .v2-pdp .option-card { border-radius: 12px; border: 1.5px solid var(--v2-line); background: #fff; min-height: 56px; }
body.v2 .v2-pdp .option-card.is-selected { border-color: var(--v2-rose); background: var(--v2-blush-soft); box-shadow: inset 0 0 0 1px var(--v2-rose); }
body.v2 .v2-pdp .option-card.is-selected .option-price { color: var(--v2-rose-deep); }
body.v2 .v2-pdp .pdp-landed-band { border-radius: 14px; background: var(--v2-cream); border-color: var(--v2-line); }
body.v2 .v2-pdp .pdp-share-btn, body.v2 .v2-pdp .wishlist-btn-lg { border-radius: 50%; width: 44px; height: 44px; }
body.v2 .v2-pdp .wishlist-btn-lg.is-active { color: var(--v2-rose); border-color: var(--v2-rose); }
body.v2 .v2-pdp .pdp-about { border-radius: 14px; }
body.v2 .v2-pdp .buy-actions .btn { min-height: 50px; font-size: .95rem; }
.v2-pdp-trust { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1.1rem 0 0; padding: 0; }
.v2-pdp-trust li { display: flex; align-items: center; gap: .55rem; min-height: 56px; padding: .55rem .65rem; border-radius: 12px; background: var(--v2-cream); border: 1px solid var(--v2-line); }
.v2-pdp-trust li > a { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px; color: inherit; text-decoration: none; }
.v2-pdp-trust svg { width: 1.45rem; height: 1.45rem; color: var(--v2-sage-deep); }
.v2-pdp-trust strong { display: block; font-size: .76rem; font-weight: 600; line-height: 1.25; }
.v2-pdp-trust small { display: block; font-size: .68rem; color: var(--v2-muted); line-height: 1.3; }
.v2-pdp-trust-link small { color: var(--v2-rose-deep); font-weight: 600; }
body.v2 .buybar { border-top: 1px solid var(--v2-line); box-shadow: 0 -4px 18px rgba(44,42,39,.08); }
body.v2 .buybar-price { color: var(--v2-rose-deep); font-weight: 700; }
.v2-related { background: var(--v2-cream); border-top: 1px solid var(--v2-line); }

body.v2 .pickup-hint > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
body.v2 .pdp-details dd a { display: inline-flex; align-items: center; min-height: 44px; }

/* cart page */
.v2-cart-page { padding-top: 1rem; }
body.v2 .v2-cart-page .cart-line-card { border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; }
body.v2 .v2-cart-page .cart-line-art { border-radius: 10px; overflow: hidden; background: var(--v2-cream); }
body.v2 .v2-cart-page .cart-line-price { color: var(--v2-ink); font-weight: 700; }
body.v2 .v2-cart-page .cart-summary { border-radius: 16px; background: var(--v2-cream); border: 1px solid var(--v2-line); }
.v2-cart-promo-note { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .65rem .8rem; border-radius: 10px; background: #fff; border: 1px dashed var(--v2-rose); color: var(--v2-ink); font-size: .84rem; }
.v2-cart-promo-note svg { width: 1.2rem; height: 1.2rem; color: var(--v2-rose); }
.v2-cart-secure { margin: .45rem 0 .6rem; text-align: center; font-size: .74rem; color: var(--v2-muted); }
.v2-cart-recs { background: var(--v2-cream); border-top: 1px solid var(--v2-line); margin-top: 2rem; }

/* ------------------------------------------------------------ ≥ 640px */
@media (min-width: 640px) {
    .v2-track { grid-auto-columns: 31%; }
    .v2-title { font-size: 1.35rem; }
    .v2-ig-grid { grid-template-columns: repeat(4, 1fr); }
    .v2-ig-grid li:nth-child(n+7) { display: block; }
    .v2-ig-grid li:nth-child(n+9) { display: none; }
    .v2-trust-grid svg { width: 2.2rem; height: 2.2rem; }
}

/* ------------------------------------------------------------ ≥ 960px */
@media (min-width: 960px) {
    .v2-hide-sm { display: inline-flex !important; }
    .v2-topbar-inner { justify-content: space-between; padding-inline: 4%; }
    .v2-menu-btn { display: none; }
    .v2-header-inner { grid-template-columns: auto 1fr auto; min-height: 84px; gap: 2rem; }
    .v2-header .v2-brand { justify-self: start; }
    .v2-brand-mark { font-size: 2.15rem; }
    .v2-brand-sub { font-size: .66rem; }
    .v2-nav { display: flex; justify-content: center; align-items: center; gap: 1.6rem; }
    .v2-nav-link { position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: .5rem 0; color: var(--v2-ink); text-decoration: none; font-size: .86rem; font-weight: 500; white-space: nowrap; }
    .v2-nav-link svg { width: .85rem; height: .85rem; }
    .v2-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--v2-rose); transform: scaleX(0); transition: transform .2s; }
    .v2-nav-link:hover, .v2-nav-link.is-current { color: var(--v2-rose-deep); }
    .v2-nav-link:hover::after, .v2-nav-link.is-current::after { transform: scaleX(1); }
    .v2-nav-drop { position: relative; }
    .v2-nav-menu { position: absolute; top: 100%; left: -1rem; min-width: 230px; padding: .5rem; border-radius: 12px; background: #fff; border: 1px solid var(--v2-line); box-shadow: var(--v2-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; }
    .v2-nav-drop:hover .v2-nav-menu, .v2-nav-drop:focus-within .v2-nav-menu { opacity: 1; visibility: visible; transform: none; }
    .v2-nav-menu a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--v2-ink); text-decoration: none; font-size: .86rem; }
    .v2-nav-menu a:hover { background: var(--v2-blush-soft); color: var(--v2-rose-deep); }

    .v2-hero-grid { grid-template-columns: 1fr 1.08fr; gap: 3rem; padding-block: 3.5rem; min-height: 520px; }
    .v2-hero-collage { width: 100%; }
    .v2-hero-media { aspect-ratio: 5 / 4; }
    .v2-section { padding-block: 3.75rem; }
    .v2-section-tight { padding-block: 3rem; }
    .v2-title { font-size: 1.6rem; letter-spacing: .06em; gap: 1rem; }
    .v2-title::before, .v2-title::after { flex-basis: 64px; }
    .v2-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
    .v2-cat-title { font-size: 1.02rem; }
    .v2-cat-tag { font-size: .8rem; }
    .v2-track { grid-auto-columns: calc((100% - 5 * 1rem) / 6); gap: 1rem; }
    .v2-carousel-btn { display: grid; }
    .v2-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 1.6rem; }
    .v2-trust-grid strong { font-size: .88rem; }
    .v2-trust-grid small { font-size: .78rem; }
    .v2-reviews-track { grid-auto-columns: calc((100% - 2 * 1rem) / 3); }
    .v2-review-quote p { font-size: .92rem; }
    .v2-story-grid { grid-template-columns: 1fr 1.15fr; align-items: stretch; }
    .v2-story-copy { padding: 4rem 3rem 4rem max(1rem, calc((100vw - 1240px) / 2)); width: auto; margin: 0; align-self: center; }
    .v2-story-media { aspect-ratio: auto; height: 460px; }
    .v2-ig-grid { grid-template-columns: repeat(7, 1fr); gap: .75rem; }
    .v2-ig-grid li:nth-child(n+7) { display: block; }
    .v2-ig-grid li:nth-child(n+8) { display: none; }
    .v2-cta-inner { grid-template-columns: 1fr auto; text-align: left; justify-items: start; padding-block: 2.6rem; gap: 2rem; align-items: center; }
    .v2-cta-leaf { width: 190px; height: 190px; }
    .v2-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .v2-footer-bottom { grid-template-columns: auto 1fr auto; gap: 1.5rem; }
}

/* 960–1199px: the full nav (nowrap links) is ~700px wide and pushed the header past the viewport
   (horizontal scroll on small laptops / landscape tablets). Tighten spacing in that band. */
@media (min-width: 960px) and (max-width: 1199px) {
    .v2-header-inner { gap: 1rem; }
    .v2-brand-mark { font-size: 1.9rem; }
    .v2-nav { gap: .9rem; }
    .v2-nav-link { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .v2 *, .v2 *::before, .v2 *::after {
        transition: none !important;
        scroll-behavior: auto !important;
        animation: none !important;
    }
    .v2 .v2-btn:hover,
    .v2 .v2-card:hover { transform: none !important; }
}

/* inner pages: phones */
@media (max-width: 768px) {
    .v2-shop-bar { flex-direction: column; align-items: flex-start; }
    .v2-related .v2-carousel-scroll .v2-track { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; margin: 0 -1rem; padding: 2px 1rem 8px; }
    .v2-related .v2-carousel-scroll .v2-track > * { display: flex; }
    body.v2 .v2-pdp .pdp-col-buy { padding-bottom: .5rem; }
    .v2-cart-page .cart-recs-grid > :nth-child(n+5) { display: none; }
}
@media (min-width: 640px) {
    .v2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
}
@media (min-width: 769px) {
    .v2-shop-toolbar { position: static; margin-inline: 0; padding-inline: 0; border-bottom: 0; background: none; }
    .v2-cat-hero-media { width: 200px; height: 200px; }
    .v2-cat-hero-inner { padding-block: 2rem 2.2rem; gap: 2rem; }
    .v2-page-hero { padding-block: 1.8rem 2rem; }
    .v2-quickcats { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
    .v2-cat-chips.v2-cat-chips-always { flex-wrap: wrap; gap: 1rem; }
    .v2-cat-chips-always .v2-chip { width: 110px; }
    .v2-cat-chips-always .v2-chip-img { width: 96px; height: 96px; }
}
@media (min-width: 960px) {
    .v2-shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
    .v2-shop-sidebar { display: block; position: sticky; top: 100px; padding: 1.2rem; border-radius: var(--v2-radius); border: 1px solid var(--v2-line); background: var(--v2-cream); }
    .v2-shop .v2-filters-btn { display: none; }
    .v2-shop .v2-shop-toolbar { justify-content: flex-end; margin-top: -3.2rem; margin-bottom: 1.2rem; pointer-events: none; }
    .v2-shop .v2-shop-toolbar > * { pointer-events: auto; }
    .v2-grid { gap: 1.1rem; }
    .v2-grid-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .v2-cat-page .v2-filters-btn { display: inline-flex; }
}

@media (min-width: 960px) {
    .v2-shop .v2-shop-bar { justify-content: flex-start; gap: 1.2rem; }
    .v2-filters-panel .shop-check span { gap: .5rem; }
}

/* v2 fix batch: unpaid-order banner on the empty cart; "N on request" hint on an empty shop shelf */
.v2-cart-page .v2-cart-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid #f0d5d8; border-radius: 16px; background: var(--v2-blush-soft); }
.v2-cart-page .v2-cart-pending-title { margin: 0 0 .2rem; font-weight: 700; color: var(--v2-ink); }
.v2-cart-page .v2-cart-pending .meta { margin: 0; font-size: .84rem; color: var(--v2-muted); max-width: 60ch; }
.v2-cart-page .v2-cart-pending .btn { flex: none; }
.v2-empty-hint { margin: .5rem 0 0; }
.v2-empty-hint a { display: inline-flex; align-items: center; gap: .35rem; color: var(--v2-rose-deep); font-weight: 700; text-decoration: none; }
.v2-empty-hint a svg { width: 14px; height: 14px; }

/* Category intro + FAQ (admin-editable; hidden when empty) */
.v2-cat-about { max-width: 760px; margin: 2.5rem 0 1rem; padding: 1.5rem; border: 1px solid var(--v2-line); border-radius: 18px; background: #fff; }
.v2-cat-about .v2-h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.v2-cat-intro { margin: 0; color: var(--v2-muted); line-height: 1.65; }
.v2-cat-faq { margin-top: 1.25rem; }
.v2-cat-faq-title { font-size: 1.05rem; margin: 0 0 .5rem; }
.v2-faq-item { border-top: 1px solid var(--v2-line); padding: .75rem 0; }
.v2-faq-item summary { cursor: pointer; font-weight: 600; min-height: 24px; list-style-position: outside; }
.v2-faq-item p { margin: .5rem 0 0; color: var(--v2-muted); line-height: 1.6; }
/* Product spec table (optional, admin-editable) */
.v2-spec-table { width: 100%; border-collapse: collapse; margin: .75rem 0 1rem; font-size: .95rem; }
.v2-spec-table caption { text-align: left; font-weight: 600; padding-bottom: .4rem; }
.v2-spec-table th, .v2-spec-table td { text-align: left; padding: .55rem .6rem; border-top: 1px solid var(--v2-line); vertical-align: top; }
.v2-spec-table th { width: 40%; font-weight: 500; color: var(--v2-muted); }

/* ---- Accessibility pass (v2 only) ---------------------------------------------------------- */
/* Legacy breadcrumbs on legal / track pages: give links a 28px tap target like .v2-crumbs. */
body.v2 .crumbs a { display: inline-flex; align-items: center; min-height: 28px; }
/* "Sort" label: tapping it focuses the select, so make it a full-height target. */
.v2-sort label { display: inline-flex; align-items: center; min-height: 44px; }
/* The hero badge strip scrolls sideways on mobile; it is focusable so keyboard users can scroll it. */
.v2-hero-badges:focus-visible { outline: 2px solid var(--v2-rose-deep); outline-offset: 2px; border-radius: 12px; }

/* Mobile: nothing below 12px. */
@media (max-width: 768px) {
    html body.v2 .v2-topbar-item,
    html body.v2 .v2-brand-sub,
    html body.v2 .v2-chip-label,
    html body.v2 .v2-badge,
    html body.v2 .v2-trust-grid strong,
    html body.v2 .v2-btn-sm,
    html body.v2 .v2-facc summary h2,
    html body.v2 .v2-footer-bottom span,
    html body.v2 .v2-bnav-item span,
    html body.v2 .v2-crumbs,
    html body.v2 .v2-crumbs a,
    html body.v2 .crumbs,
    html body.v2 .crumbs a,
    html body.v2 .v2-card-cat,
    html body.v2 .v2-pdp-trust small,
    html body.v2 .atelier-eyebrow,
    html body.v2 .v2-shelf .num,
    html body.v2 .legal-seller-card__eyebrow,
    html body.v2 .review-form-wrap > summary,
    html body.v2 .pincode-label-long,
    html body.v2 .eyebrow,
    html body.v2 .track-eyebrow,
    html body.v2 .spec-list dt,
    html body.v2 .spec-list dd,
    html body.v2 .spec-list dd a,
    html body.v2 .spec-list dd span,
    html body.v2 .cart-line-cat,
    html body.v2 .cart-line-cat a,
    html body.v2 .field-label label { font-size: 12px; }
    html body.v2 .v2-cart .cart-badge:not(:empty) { font-size: 12px; min-width: 20px; height: 20px; border-radius: 10px; }
}

/* ---- Shop Silicone Moulds (home, right under the hero) -------------------------------------- */
.v2-moulds { position: relative; padding-block: 2.4rem 2.6rem; background:
    radial-gradient(120% 80% at 100% 0%, rgba(168, 86, 96, .10) 0%, rgba(168, 86, 96, 0) 60%),
    linear-gradient(180deg, var(--v2-blush-soft) 0%, var(--v2-cream) 100%);
    border-block: 1px solid var(--v2-line); }
.v2-moulds-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.v2-moulds-eyebrow { margin: 0 0 .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--v2-rose-deep); }
.v2-moulds-title { margin: 0; font-family: var(--v2-serif); font-weight: 600; font-size: clamp(1.7rem, 6.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; color: var(--v2-ink); }
.v2-moulds-lede { margin: .55rem 0 0; max-width: 52ch; color: var(--v2-muted); font-size: .95rem; line-height: 1.5; }
.v2-moulds-all { white-space: nowrap; }
.v2-moulds-all svg { width: 1em; height: 1em; }
.v2-mould-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.5rem; padding: 0; }
.v2-mould-tile { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .55rem .9rem .55rem .55rem; border-radius: 16px; background: #fff; border: 1px solid #efd9d6; color: var(--v2-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(44, 42, 39, .04); transition: border-color .2s, box-shadow .2s, transform .2s; }
.v2-mould-tile:hover { border-color: var(--v2-rose); box-shadow: var(--v2-shadow); transform: translateY(-2px); }
.v2-mould-tile:focus-visible { outline: 2px solid var(--v2-rose-deep); outline-offset: 2px; }
.v2-mould-tile-img { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--v2-blush); }
.v2-mould-tile-img picture, .v2-mould-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-mould-tile-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.v2-mould-tile-title { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.v2-mould-tile-count { font-size: .8rem; color: var(--v2-muted); }
.v2-moulds .v2-card { border-color: #efd9d6; }
.v2-moulds-all-bottom { display: none; }
/* Mould accent on product cards (shop / search): category label in rose. */
.v2-card-cat.is-mould { color: var(--v2-rose-deep); font-weight: 600; }

@media (max-width: 768px) {
    .v2-moulds { padding-block: 1.8rem 2rem; }
    .v2-moulds-head { display: block; margin-bottom: 1.1rem; }
    .v2-moulds-all-top { display: none; }
    .v2-moulds-all-bottom { display: block; margin-top: 1.1rem; }
    .v2-moulds-all-bottom .v2-btn { width: 100%; justify-content: center; min-height: 48px; }
    .v2-moulds-lede { font-size: .9rem; }
    .v2-mould-tiles { gap: .5rem; margin-bottom: 1.1rem; }
    .v2-mould-tile { flex-direction: column; align-items: stretch; gap: .45rem; padding: .45rem .45rem .6rem; text-align: center; }
    .v2-mould-tile-img { width: 100%; height: auto; aspect-ratio: 1; }
    .v2-mould-tile-title { font-size: 12.5px; }
    .v2-mould-tile-count { font-size: 12px; }
    /* Products scroll sideways on mobile (the bestseller grid below stays a grid). */
    .v2-moulds-carousel .v2-track { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; margin: 0 -1rem; padding: 2px 1rem 8px; }
    .v2-moulds-carousel .v2-track > :nth-child(n+7) { display: flex; }
}

/* Home hero: H1 names the range, slogan as a tagline under it. */
.v2-display.v2-hero-h1 { font-size: clamp(2.1rem, 8.6vw, 4rem); line-height: 1.05; max-width: 14ch; }
.v2-hero-tagline { margin: .6rem 0 0; font-family: var(--v2-serif); font-style: italic; font-weight: 500; font-size: clamp(1.1rem, 4.2vw, 1.45rem); letter-spacing: .01em; color: var(--v2-rose-deep); }
@media (max-width: 768px) {
    .v2-display.v2-hero-h1 { max-width: none; }
    .v2-hero-tagline { margin-top: .35rem; }
}

/* Footer "Policies" column matches the other columns (no legacy rules/borders, one link per line). */
.v2-footer-policies .compliance-policy-links { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; font-size: inherit; }
.v2-footer-policies .compliance-policy-links a { font-weight: 400; color: rgba(255,255,255,.82); }
.v2-footer-policies .compliance-policy-links a:hover { color: #fff; }
@media (max-width: 768px) {
    .v2-footer-policies .compliance-policy-links { gap: 0; padding-bottom: .9rem; }
}

/* PDP pincode band: the field lines up with the rest of the band, and the input reads as a field. */
body.v2 .pdp-landed-band .pincode-check { padding: 0; }
body.v2 .pdp-landed-band .pincode-check .field-label { margin-top: 0; }
body.v2 .pdp-landed-band .pincode-row input { background: #fff; }
.v2-carousel.is-static .v2-carousel-btn { display: none !important; }

/* ------------------------------------------------------------------ focus + fields
   The legacy theme drew a dark 2px outline 3px OUTSIDE every focused field, on top of each field's own
   border/ring, which read as a doubled border. One treatment instead: buttons and links keep a clear
   rose outline; text fields show focus on themselves (rose border + soft ring) with no detached outline. */
body.v2 :focus-visible { outline: 2px solid var(--v2-rose-deep); outline-offset: 2px; }

body.v2 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden]):focus-visible,
body.v2 textarea:focus-visible,
body.v2 select:focus-visible {
    outline: none;
    border-color: var(--v2-rose);
    box-shadow: 0 0 0 3px rgba(168, 86, 96, .16);
}

/* Legacy rules squared textareas and url/email fields to 2px; match the rounded fields. */
body.v2 textarea { border-radius: 12px; }
body.v2 input[type=email], body.v2 input[type=url], body.v2 input[type=password] { border-radius: 10px; }

/* Fields that sit inside a wrapper which draws its own focus ring must not add a second one. */
body.v2 .v2-search-form input:focus-visible,
body.v2 .search-field input:focus-visible,
body.v2 .login-field input:focus-visible,
body.v2 .mx-composer textarea:focus-visible { outline: none; box-shadow: none; border-color: transparent; }

body.v2 .mx-composer textarea,
body.v2 .mx-composer textarea:focus,
body.v2 .mx-composer textarea:focus-visible {
    outline: none; box-shadow: none; border: 0; border-radius: 0; border-color: transparent; background: transparent;
}