/* =========================================================================
   REOL — storefront
   Depends on tokens.css. Ordered: reset → primitives → layout → components
   → pages. Every value comes from a token.
   ========================================================================= */

/* ---------------------------------------------------------------- reset -- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

/* Author `display` beats the UA stylesheet's [hidden], and the rule above is
   author CSS — so a hidden <img> would otherwise still render (as a broken
   image, before its src is set). */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 2px solid var(--wine);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--wine); color: var(--ivory); }

/* Skip link — visible only once tabbed to. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    background: var(--wine);
    color: var(--ivory);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/*
 * Shown to staff only, when the shutter is down and they are the only people
 * who can see the shop. Deliberately loud: the failure it prevents is a store
 * staying closed all day because it looked fine to the person who closed it.
 */
.staff-shutter {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--gold);
    color: var(--wine-900);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-align: center;
}
.staff-shutter a { color: inherit; text-decoration: underline; }

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

/* ----------------------------------------------------------- primitives -- */

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

.eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold-800);
}

.display-1 { font-size: clamp(2.75rem, 7vw, var(--text-5xl)); }
.display-2 { font-size: clamp(2.25rem, 5.5vw, var(--text-4xl)); }
.display-3 { font-size: clamp(1.75rem, 4vw, var(--text-3xl)); }
.display-4 { font-size: clamp(1.4rem, 3vw, var(--text-2xl)); }

.lede {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: var(--ink-70);
}

.muted   { color: var(--text-muted); }
.subtle  { color: var(--text-subtle); }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }

/* The hairline rule with a diamond at its centre — used between sections. */
.rule {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--sand);
}
.rule::before, .rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
}
.rule__mark {
    width: 6px; height: 6px;
    transform: rotate(45deg);
    background: var(--gold);
}

.section        { padding-block: clamp(var(--space-7), 8vw, var(--space-9)); }
.section--tight { padding-block: clamp(var(--space-6), 5vw, var(--space-7)); }
.section--sunken { background: var(--bg-sunken); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.section-head__text { max-width: 46ch; }
.section-head h2 { margin-top: var(--space-2); }
.section-head p  { margin-top: var(--space-3); color: var(--text-muted); }

/* ---------------------------------------------------------------- links -- */

.link {
    color: var(--wine);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--wine-100);
    transition: text-decoration-color var(--fast) var(--ease);
}
.link:hover { text-decoration-color: var(--wine); }

/* Text link with an animated rule under it — the "Discover" affordance. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--wine);
    padding-bottom: 3px;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    transition: background-size var(--normal) var(--ease);
}
.link-arrow:hover { background-size: 0 1px; }
.link-arrow svg { transition: transform var(--normal) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- button -- */

.btn {
    --btn-bg: var(--wine);
    --btn-fg: var(--ivory);
    --btn-border: var(--wine);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.9rem 1.9rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease),
                transform var(--fast) var(--ease);
}
.btn:hover { --btn-bg: var(--wine-800); --btn-border: var(--wine-800); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--wine); }
.btn--ghost:hover { --btn-bg: var(--wine); --btn-fg: var(--ivory); }

.btn--quiet   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--border); }
.btn--quiet:hover { --btn-bg: var(--ink-08); --btn-border: var(--ink-30); }

.btn--gold    { --btn-bg: var(--gold); --btn-fg: var(--wine-900); --btn-border: var(--gold); }
.btn--gold:hover { --btn-bg: var(--gold-400); --btn-border: var(--gold-400); }

.btn--light   { --btn-bg: var(--ivory); --btn-fg: var(--wine); --btn-border: var(--ivory); }
.btn--light:hover { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-border: var(--ivory); }

.btn--danger  { --btn-bg: transparent; --btn-fg: var(--danger); --btn-border: var(--danger); }
.btn--danger:hover { --btn-bg: var(--danger); --btn-fg: var(--white); }

.btn--sm  { padding: 0.6rem 1.15rem; font-size: var(--text-xs); }
.btn--lg  { padding: 1.05rem 2.4rem; font-size: var(--text-base); }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- forms -- */

.field { margin-bottom: var(--space-5); }
.field:last-child { margin-bottom: 0; }

.label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-70);
}
.label .req { color: var(--wine); }

.input, .select, .textarea {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text);
    font-size: var(--text-base);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--wine);
    box-shadow: var(--ring);
}
.textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }

.select {
    appearance: none;
    padding-right: 2.5rem;
    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='none' stroke='%237d716d' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.field--error .input,
.field--error .select,
.field--error .textarea { border-color: var(--danger); }

.field-error {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--danger);
}
.field-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.field-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.check input { margin-top: 0.2rem; accent-color: var(--wine); width: 1rem; height: 1rem; flex: none; }

/* --------------------------------------------------------------- badges -- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: var(--ink-08);
    color: var(--ink-70);
}
.badge--sale    { background: var(--wine); color: var(--ivory); }
.badge--new     { background: var(--gold-100); color: var(--gold-800); }
.badge--soldout { background: var(--ink-15); color: var(--ink-50); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg); color: var(--danger); }
.badge--info    { background: var(--info-bg); color: var(--info); }

/* ---------------------------------------------------------------- flash -- */

.flash-stack {
    position: fixed;
    top: calc(var(--header-h, 76px) + var(--space-4));
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: min(26rem, calc(100vw - 2rem));
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    border-left: 3px solid currentColor;
    background: var(--bg-raised);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    animation: flash-in var(--normal) var(--ease-out) both;
}
.flash__body { flex: 1; color: var(--ink); }
.flash__close { color: var(--ink-30); flex: none; line-height: 1; }
.flash__close:hover { color: var(--ink); }

.flash--success { color: var(--success); background: var(--success-bg); }
.flash--error   { color: var(--danger);  background: var(--danger-bg); }
.flash--info    { color: var(--info);    background: var(--info-bg); }
.flash--warning { color: var(--warning); background: var(--warning-bg); }

@keyframes flash-in {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: none; }
}

.notice {
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--wine);
    border-radius: var(--radius);
    background: var(--wine-100);
    color: var(--wine-900);
    font-size: var(--text-sm);
}
.notice--error   { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.notice--success { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.notice--info    { border-color: var(--info); background: var(--info-bg); color: var(--info); }

/* =========================================================================
   Header
   ========================================================================= */

.announce {
    background: var(--wine-900);
    color: var(--ivory-warm);
    text-align: center;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 0.6rem var(--gutter);
}
.announce strong { color: var(--gold-400); font-weight: 500; }

.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(251, 248, 243, 0.92);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
.header.is-stuck {
    border-bottom-color: var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
    min-height: 76px;
}

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    line-height: 1;
}
.logo__mark {
    font-family: var(--font-display);
    font-size: 1.9rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: var(--wine);
    font-weight: 500;
}
.logo__sub {
    margin-top: 3px;
    font-size: 0.5rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: var(--ink-30);
}

.nav { display: flex; align-items: center; gap: clamp(var(--space-3), 1.6vw, var(--space-5)); }
.nav--end { justify-content: flex-end; }

/* Only the off-canvas nav has a close button. Scoped under .nav so it beats
   .icon-btn's own display, which is declared later in this file. */
.nav .nav__close { display: none; }

.nav__link {
    position: relative;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    /* Letterspaced small caps wrap badly — "All Lehengas" breaking across two
       lines throws the whole header's baseline out. */
    white-space: nowrap;
    color: var(--ink-70);
    padding-block: var(--space-2);
    transition: color var(--fast) var(--ease);
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--wine);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--normal) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--wine); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* The one nav item with a mark beside it — the guided shop is a different way
   to use the site, not another collection, and it is worth one flourish. */
.nav__link--keeper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-800);
}
.nav__link--keeper::after { background: var(--gold); }

/* Lives in the burger drawer only — see views/partials/header.php. */
.nav__link--drawer-only { display: none; }
.nav__link--keeper:hover, .nav__link--keeper.is-active { color: var(--gold-800); }

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-full);
    color: var(--ink-70);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--ink-08); color: var(--wine); }

.icon-btn__count {
    position: absolute;
    top: 2px; right: 0;
    min-width: 1.05rem; height: 1.05rem;
    padding-inline: 0.22rem;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: var(--wine);
    color: var(--ivory);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
}
.icon-btn__count[data-count="0"] { display: none; }

.burger { display: none; }

/* --- mobile nav -------------------------------------------------------
   Breakpoint measured, not guessed. The old 1080px was wrong: the bar needs
   about 1150px for the nav, the logo and the four icons, so between 1081px and
   1340px the row overflowed and the bag button was clipped off the right edge —
   on a 1280px laptop the bag simply was not there. Dropping "Track order" and
   one collection from the bar brought the real minimum down to ~1140px; this
   sits above it with room for a longer store name. */

@media (max-width: 1180px) {
    /*
     * backdrop-filter must go before .nav--primary becomes position:fixed.
     * A filtered element is a containing block for its fixed descendants, so
     * with it on, the whole burger menu was laid out inside the header's own
     * 64px box — a stub with a close button and every link scrolled out of it.
     * The background goes opaque to make up for the lost blur.
     */
    .header { backdrop-filter: none; background: var(--bg); }

    .header__inner { grid-template-columns: auto 1fr auto; min-height: 64px; }
    .logo { justify-self: start; }
    .logo__mark { font-size: 1.5rem; }
    .nav--primary {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(86vw, 22rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-8) var(--space-6) var(--space-6);
        background: var(--bg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--normal) var(--ease-out), visibility var(--normal);
        overflow-y: auto;
        z-index: var(--z-drawer);
    }
    .nav--primary.is-open { transform: none; visibility: visible; }
    .nav .nav__close { display: inline-flex; align-self: flex-end; margin-bottom: var(--space-4); }
    .nav--primary .nav__link {
        font-size: var(--text-base);
        letter-spacing: var(--tracking-wide);
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--border-soft);
    }
    .nav--primary .nav__link::after { display: none; }
    .burger { display: inline-flex; justify-self: start; }
    .nav--end { grid-column: 3; }
    .nav--end .nav__link { display: none; }
    .nav--primary .nav__link--drawer-only { display: block; }
}

/* On the narrowest phones the four header icons stop fitting beside the logo
   and the bag — the one that matters — is what gets clipped. Wishlist goes:
   it is one tap away inside the account menu. */
@media (max-width: 420px) {
    .nav--end .icon-btn[href$="/wishlist"],
    .nav--end .icon-btn[aria-label="Saved pieces"] { display: none; }
    .header__inner { gap: var(--space-2); }
    .logo__mark { font-size: 1.3rem; letter-spacing: 0.28em; text-indent: 0.28em; }
}

/* =========================================================================
   Search sheet
   -------------------------------------------------------------------------
   A top sheet rather than a field in the header: the header grid is already
   at its limit by 1080px and an input parked in it is the first thing to get
   crushed. Sits above the scrim, same as the bag drawer.
   ========================================================================= */

.search-sheet {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: var(--space-6) 0 var(--space-5);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--normal) var(--ease-out), visibility var(--normal);
    z-index: calc(var(--z-drawer) + 1);
}
.search-sheet.is-open { transform: none; visibility: visible; }

.search-sheet__form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.search-sheet__icon { color: var(--ink-50); flex: none; }

.search-sheet__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: var(--space-2) 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-lg), 3.4vw, var(--text-2xl));
    color: var(--ink);
}
.search-sheet__input::placeholder { color: var(--ink-30); }
.search-sheet__input:focus { outline: none; }
/* The whole row carries the focus ring, so the bare input does not need one. */
.search-sheet__form:focus-within { border-bottom-color: var(--wine); }

/* Chrome and Safari put their own clear button in a type=search; it lands on
   top of our close button and does something different. */
.search-sheet__input::-webkit-search-decoration,
.search-sheet__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-sheet__hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}
.search-sheet__hints a {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-70);
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-full);
}
.search-sheet__hints a:hover { color: var(--wine); border-color: var(--wine); }

@media (max-width: 560px) {
    .search-sheet { padding-top: var(--space-5); }
    /* On a phone the submit button costs the field the room it needs; the
       keyboard's own search key does the same job. */
    .search-sheet__form .btn { display: none; }
}

/* =========================================================================
   Cart drawer
   ========================================================================= */

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(35, 26, 24, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--normal) var(--ease), visibility var(--normal);
    z-index: var(--z-drawer);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(94vw, 26rem);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    /* visibility, not just transform: a panel parked off-screen is still in the
       tab order, so without this a keyboard visitor tabs from the bag button
       into a form they cannot see. visibility flips to visible immediately on
       open and only back to hidden once the slide-out has finished. */
    visibility: hidden;
    transition: transform var(--normal) var(--ease-out), visibility var(--normal);
    z-index: calc(var(--z-drawer) + 1);
}
.drawer.is-open { transform: none; visibility: visible; }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.drawer__title { font-size: var(--text-lg); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.drawer__foot {
    padding: var(--space-5);
    border-top: 1px solid var(--border-soft);
    background: var(--bg-sunken);
}

.drawer-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.drawer-item:last-child { border-bottom: none; }
.drawer-item__img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--bg-sunken);
    border-radius: var(--radius-sm);
}
.drawer-item__title { font-family: var(--font-display); font-size: var(--text-md); }
.drawer-item__meta  { font-size: var(--text-sm); color: var(--text-muted); }

/* =========================================================================
   Product card
   ========================================================================= */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: clamp(var(--space-4), 2.5vw, var(--space-6)) clamp(var(--space-3), 2vw, var(--space-5));
}
.product-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }

/* A phone gets two across. The 15rem minimum drops to a single column below
   about 560px, which turns an eighteen-piece rail into eighteen screens of
   scrolling — every catalogue a customer compares this one against is 2-up. */
@media (max-width: 640px) {
    .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .card__meta { letter-spacing: 0; }
}

.card { position: relative; display: flex; flex-direction: column; }

.card__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-sunken);
    border-radius: var(--radius);
}
.card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--slow) var(--ease-out), opacity var(--normal) var(--ease);
}
/* Second photo revealed on hover — the standard fashion-catalogue behaviour. */
.card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.card:hover .card__img--hover { opacity: 1; }
.card:hover .card__img--main  { opacity: 0; }
.card:hover .card__img { transform: scale(1.04); }
/* With one photo there is nothing to cross-fade to, so just scale. */
.card:not(:has(.card__img--hover)):hover .card__img--main { opacity: 1; }

.card__flags {
    position: absolute;
    top: var(--space-3); left: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2);
    align-items: flex-start;
    pointer-events: none;
}

.card__wish {
    position: absolute;
    top: var(--space-3); right: var(--space-3);
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: rgba(251, 248, 243, 0.9);
    color: var(--ink-50);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease),
                color var(--fast) var(--ease);
}
.card:hover .card__wish, .card__wish.is-active, .card__wish:focus-visible {
    opacity: 1; transform: none;
}
.card__wish:hover, .card__wish.is-active { color: var(--wine); }
.card__wish.is-active svg { fill: currentColor; }

.card__quick {
    position: absolute;
    left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.card:hover .card__quick { opacity: 1; transform: none; }

/* A piece with no colour or fabric recorded has no meta line, which used to
   pull its price up and leave the row ragged. An equal-height body with the
   price pushed to its end keeps a grid of them on one baseline. */
.card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--space-3);
}
.card__title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
}
.card__meta {
    margin-top: 2px;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}
.card__price {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex; align-items: baseline; gap: var(--space-2);
    font-size: var(--text-base);
}
.card__price del { color: var(--text-subtle); font-size: var(--text-sm); }
.card__price .off { color: var(--wine); font-size: var(--text-sm); }

/* Touch devices never fire :hover, so reveal the affordances permanently. */
@media (hover: none) {
    .card__wish, .card__quick { opacity: 1; transform: none; }
    .card__img--hover { display: none; }
}

/* =========================================================================
   Home
   ========================================================================= */

.hero {
    position: relative;
    min-height: min(88vh, 46rem);
    display: grid;
    align-items: center;
    background: linear-gradient(160deg, var(--parchment), var(--ivory) 55%, var(--wine-100));
    overflow: hidden;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(var(--space-5), 5vw, var(--space-8));
    align-items: center;
    padding-block: var(--space-8);
}
/* An absolute measure, not ch: `ch` resolves against THIS element's font-size
   (body copy), not the display size of the h1 inside it, which made the
   headline column a third of its intended width. */
.hero__text { max-width: 34rem; }
.hero__text .lede { max-width: 42ch; }
.hero h1 {
    margin-block: var(--space-4) var(--space-5);
    /* Keeps a long word like "remembered" from being stranded on its own line. */
    text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.hero__art {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* Concentric gold rings behind the hero art — the only decorative motif. */
.hero::before {
    content: '';
    position: absolute;
    top: 50%; right: -14vw;
    width: 46vw; aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: 0.22;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    top: 50%; right: -8vw;
    width: 32vw; aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: 0.16;
    pointer-events: none;
}

@media (max-width: 860px) {
    .hero { min-height: 0; }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__art { order: -1; aspect-ratio: 3 / 2; }
    .hero::before, .hero::after { display: none; }
}

/* Collection tiles */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--space-4);
}
.collection-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--parchment);
    color: var(--ivory);
}
.collection-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--slow) var(--ease-out);
}
.collection-tile:hover img { transform: scale(1.05); }
.collection-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(35, 26, 24, 0.78) 0%, rgba(35, 26, 24, 0.05) 55%);
}
.collection-tile__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--space-5);
    z-index: 1;
}
.collection-tile__body h3 { font-size: var(--text-xl); }
.collection-tile__body span { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.82; }

/* Value props */
.promise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-6);
    text-align: center;
}
.promise__icon {
    display: grid; place-items: center;
    width: 3rem; height: 3rem;
    margin: 0 auto var(--space-4);
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-800);
}
.promise h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.promise p  { font-size: var(--text-sm); color: var(--text-muted); }

/* Editorial split band */
.editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(var(--space-5), 5vw, var(--space-8));
}
.editorial__art { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.editorial__art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .editorial { grid-template-columns: 1fr; } }

/* Newsletter */
.newsletter {
    background: var(--wine-900);
    color: var(--ivory-warm);
    text-align: center;
}
.newsletter h2 { color: var(--ivory); }
.newsletter p  { color: rgba(245, 239, 228, 0.72); }
.newsletter__form {
    display: flex;
    gap: var(--space-2);
    max-width: 30rem;
    margin: var(--space-6) auto 0;
}
.newsletter__form .input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(245, 239, 228, 0.28);
    color: var(--ivory);
}
.newsletter__form .input::placeholder { color: rgba(245, 239, 228, 0.5); }
.newsletter__form .input:focus { border-color: var(--gold); box-shadow: none; }
@media (max-width: 520px) { .newsletter__form { flex-direction: column; } }

/* =========================================================================
   Catalog
   ========================================================================= */

.page-head {
    padding-block: var(--space-7) var(--space-6);
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-sunken);
}
.page-head h1 { margin-block: var(--space-2); }
.page-head p  { max-width: 56ch; color: var(--text-muted); margin: 0; }

.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}
.breadcrumbs a:hover { color: var(--wine); }

.catalog {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: start;
    padding-block: var(--space-7);
}

.filters { position: sticky; top: 6.5rem; }
.filters__group { border-bottom: 1px solid var(--border-soft); padding-block: var(--space-4); }
.filters__group:first-child { padding-top: 0; }
.filters__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink);
}
.filters__toggle svg { transition: transform var(--fast) var(--ease); color: var(--ink-30); }
.filters__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.filters__list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.filters__toggle[aria-expanded="false"] + .filters__list { display: none; }

.filter-check {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-70);
    cursor: pointer;
}
.filter-check input { accent-color: var(--wine); width: 0.95rem; height: 0.95rem; }
.filter-check:hover { color: var(--wine); }
.filter-check .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-subtle); }

.filter-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:hover { border-color: var(--ink-30); }
.swatch:has(input:checked) { border-color: var(--wine); background: var(--wine-100); color: var(--wine-900); }
.swatch__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

/* The listing toolbar. This had markup and no rule, so the sort control
   inherited width:100% from .input and spanned the whole results column. */
.catalog__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
/* The count takes the slack so the sort stays hard right and the mobile
   filters button stays hard left. */
.catalog__count { flex: 1; font-size: var(--text-sm); color: var(--text-muted); }
.catalog__sort { display: flex; align-items: center; gap: var(--space-3); }
.catalog__sort .select { width: auto; padding-block: 0.5rem; font-size: var(--text-sm); min-width: 12rem; }

@media (max-width: 560px) {
    .catalog__sort { flex: 1; }
    .catalog__sort .select { flex: 1; min-width: 0; }
}

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.3rem 0.5rem 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--ink-08);
    font-size: var(--text-xs);
}
.chip a { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; color: var(--ink-50); }
.chip a:hover { background: var(--wine); color: var(--ivory); }

.filters-toggle-mobile { display: none; }

@media (max-width: 900px) {
    .catalog { grid-template-columns: 1fr; }
    .filters {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, 21rem);
        padding: var(--space-6);
        background: var(--bg);
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--normal) var(--ease-out), visibility var(--normal);
        z-index: var(--z-drawer);
        box-shadow: var(--shadow-lg);
    }
    .filters.is-open { transform: none; visibility: visible; }
    .filters-toggle-mobile { display: inline-flex; }
}

/* Pagination */
.pagination {
    display: flex; justify-content: center; align-items: center; gap: var(--space-2);
    margin-top: var(--space-8);
}
.pagination a, .pagination span {
    min-width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    padding-inline: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--ink-70);
}
.pagination a:hover { border-color: var(--border); color: var(--wine); }
.pagination .is-current { background: var(--wine); border-color: var(--wine); color: var(--ivory); }
.pagination .is-disabled { color: var(--text-subtle); pointer-events: none; }

/* Empty state */
.empty {
    padding: var(--space-9) var(--space-5);
    text-align: center;
    color: var(--text-muted);
}
.empty__mark {
    width: 3.5rem; height: 3.5rem;
    margin: 0 auto var(--space-5);
    display: grid; place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-800);
}
.empty h3 { font-size: var(--text-xl); color: var(--ink); margin-bottom: var(--space-3); }

/* =========================================================================
   Product detail
   ========================================================================= */

.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(var(--space-5), 4vw, var(--space-8)); padding-block: var(--space-6) var(--space-8); align-items: start; }

.gallery { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-3); }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--space-2); }
.gallery__thumb {
    aspect-ratio: 3 / 4;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-sunken);
    transition: border-color var(--fast) var(--ease), opacity var(--fast) var(--ease);
    opacity: 0.72;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--wine); opacity: 1; }

.gallery__main {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-sunken);
    cursor: zoom-in;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .product { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .gallery__thumbs { flex-direction: row; overflow-x: auto; padding-bottom: var(--space-2); }
    .gallery__thumb { flex: 0 0 4.5rem; }
}

.product__info { position: sticky; top: 6.5rem; }
@media (max-width: 900px) { .product__info { position: static; } }

.product__title { margin-block: var(--space-2) var(--space-3); }
.product__price { display: flex; align-items: baseline; gap: var(--space-3); margin-block: var(--space-4); }
.product__price .now { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--wine); }
.product__price del  { color: var(--text-subtle); }

.product__section { padding-block: var(--space-5); border-top: 1px solid var(--border-soft); }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.qty button {
    width: 2.6rem; height: 2.9rem;
    display: grid; place-items: center;
    color: var(--ink-70);
    transition: background var(--fast) var(--ease);
}
.qty button:hover { background: var(--ink-08); color: var(--wine); }
.qty input {
    width: 3rem; height: 2.9rem;
    border: none; border-inline: 1px solid var(--border);
    text-align: center;
    background: transparent;
    -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product__buy { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.product__buy .btn { flex: 1; min-width: 12rem; }

.spec-list { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.spec-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); }
.spec-list dt { color: var(--text-muted); }
.spec-list dd { margin: 0; }

.accordion__item { border-bottom: 1px solid var(--border-soft); }
.accordion__head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding-block: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: left;
}
.accordion__head svg { color: var(--ink-30); transition: transform var(--fast) var(--ease); }
.accordion__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__panel { padding-bottom: var(--space-5); font-size: var(--text-sm); color: var(--ink-70); line-height: var(--leading-loose); }
.accordion__head[aria-expanded="false"] + .accordion__panel { display: none; }

.trust-row {
    display: grid;
    /* Fixed 2x2, widening to one row. auto-fit gave three across and left
       "Made to order" orphaned on a line of its own at most column widths. */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    margin-top: var(--space-5);
    background: var(--bg-sunken);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    text-align: center;
    color: var(--ink-70);
}
.trust-row svg { margin: 0 auto var(--space-2); color: var(--gold-800); }

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

/* Lightbox */
.lightbox {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    padding: var(--space-5);
    background: rgba(35, 26, 24, 0.92);
    z-index: var(--z-modal);
    opacity: 0; visibility: hidden;
    transition: opacity var(--normal) var(--ease), visibility var(--normal);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(92vw, 60rem); max-height: 90vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__close { position: absolute; top: var(--space-5); right: var(--space-5); color: var(--ivory); }

/* =========================================================================
   Cart / checkout
   ========================================================================= */

.split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: start;
    padding-block: var(--space-7);
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.panel {
    background: var(--bg-raised);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: clamp(var(--space-5), 3vw, var(--space-6));
}
.panel + .panel { margin-top: var(--space-5); }
.panel__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.summary { position: sticky; top: 6.5rem; }
@media (max-width: 900px) { .summary { position: static; } }

.summary__line {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding-block: var(--space-3);
    font-size: var(--text-sm);
}
.summary__line + .summary__line { border-top: 1px solid var(--border-soft); }
.summary__line--total {
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--wine);
}
.summary__line .free { color: var(--success); }
.summary__line .off  { color: var(--wine); }

.progress {
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--ink-08);
    overflow: hidden;
    margin-top: var(--space-2);
}
.progress__bar { height: 100%; background: var(--gold); transition: width var(--slow) var(--ease-out); }

.cart-line {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    align-items: start;
}
.cart-line:first-child { padding-top: 0; }
.cart-line:last-child  { border-bottom: none; padding-bottom: 0; }
.cart-line__img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-sunken); }
.cart-line__title { font-family: var(--font-display); font-size: var(--text-md); }
.cart-line__meta  { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); margin-top: 2px; }
.cart-line__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.cart-line__price { text-align: right; font-size: var(--text-md); white-space: nowrap; }
.cart-line.is-unavailable { opacity: 0.6; }

@media (max-width: 560px) {
    .cart-line { grid-template-columns: 4.5rem 1fr; }
    .cart-line__price { grid-column: 2; text-align: left; }
}

.coupon-row { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.coupon-row .input { flex: 1; }

/* Steps */
.steps { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); }
.step__num {
    width: 1.6rem; height: 1.6rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.7rem;
}
.step.is-current { color: var(--wine); }
.step.is-current .step__num { background: var(--wine); border-color: var(--wine); color: var(--ivory); }
.step.is-done { color: var(--success); }
.steps__sep { flex: 0 0 1.5rem; height: 1px; background: var(--border); }

/* Payment method picker */
.pay-option {
    display: block;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pay-option + .pay-option { margin-top: var(--space-3); }
.pay-option:hover { border-color: var(--ink-30); }
.pay-option:has(input:checked) { border-color: var(--wine); background: var(--wine-100); }
.pay-option__head { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
.pay-option input { accent-color: var(--wine); width: 1.05rem; height: 1.05rem; }
.pay-option__desc { margin-top: var(--space-2); margin-left: 1.8rem; font-size: var(--text-sm); color: var(--text-muted); }

/* UPI payment block */
.upi {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: center;
}
@media (max-width: 640px) { .upi { grid-template-columns: 1fr; } }

.upi__qr {
    width: 13rem; height: 13rem;
    display: grid; place-items: center;
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.upi__qr img, .upi__qr canvas, .upi__qr svg { width: 100%; height: 100%; }

.copy-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-sunken);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.copy-row span { flex: 1; overflow-wrap: anywhere; }
.copy-row button { color: var(--wine); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; }

.dropzone {
    display: grid; place-items: center;
    padding: var(--space-7) var(--space-5);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-sunken);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.dropzone:hover, .dropzone.is-dragging { border-color: var(--wine); background: var(--wine-100); }
.dropzone svg { color: var(--gold-800); margin-bottom: var(--space-3); }
.dropzone__preview { max-height: 14rem; border-radius: var(--radius); }

/* Order status timeline */
.timeline { display: grid; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--space-4); position: relative; padding-bottom: var(--space-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
    content: '';
    position: absolute;
    left: 0.75rem; top: 1.6rem; bottom: 0;
    width: 1px;
    background: var(--border);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
    width: 1.6rem; height: 1.6rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-subtle);
    z-index: 1;
}
.timeline__item.is-done .timeline__dot { border-color: var(--success); background: var(--success); color: var(--white); }
.timeline__item.is-current .timeline__dot { border-color: var(--wine); background: var(--wine); color: var(--ivory); }
.timeline__label { font-size: var(--text-sm); font-weight: 500; }
.timeline__time  { font-size: var(--text-xs); color: var(--text-subtle); }

/* =========================================================================
   Account
   ========================================================================= */

.account { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(var(--space-5), 4vw, var(--space-7)); padding-block: var(--space-7); align-items: start; }
@media (max-width: 800px) { .account { grid-template-columns: 1fr; } }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--ink-70);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.side-nav a:hover { background: var(--ink-08); }
.side-nav a.is-active { background: var(--wine); color: var(--ivory); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); }
.stat {
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
}
.stat__label { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-subtle); }
.stat__value { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-2); }

.order-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.order-row + .order-row { margin-top: var(--space-3); }
.order-row:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.order-row__img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-sunken); }
.order-row__num { font-family: var(--font-mono); font-size: var(--text-sm); }
@media (max-width: 620px) { .order-row { grid-template-columns: 4rem 1fr; } }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--space-4); }
.address-card {
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-raised);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.address-card.is-default { border-color: var(--wine); }
.address-card__actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.address-card__actions button { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-50); }
.address-card__actions button:hover { color: var(--wine); }

/* =========================================================================
   Static pages
   ========================================================================= */

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--text-2xl); margin-block: var(--space-7) var(--space-4); }
.prose h3 { font-size: var(--text-lg); margin-block: var(--space-5) var(--space-3); }
.prose p, .prose li { color: var(--ink-70); line-height: var(--leading-loose); }
.prose ul { list-style: none; margin-bottom: var(--space-4); }
.prose ul li { position: relative; padding-left: var(--space-5); margin-bottom: var(--space-2); }
.prose ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.7em;
    width: 5px; height: 5px;
    transform: rotate(45deg);
    background: var(--gold);
}
/* The reset strips list markers from every ol, so an ordered list in prose had
   no numbers at all — three steps ran together as one paragraph. Counters put
   them back in the palette rather than as browser-default digits. */
.prose ol {
    counter-reset: step;
    list-style: none;
    margin-bottom: var(--space-4);
}
.prose ol li {
    counter-increment: step;
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}
.prose ol li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 0.15em;
    display: grid;
    place-items: center;
    width: 1.5rem; height: 1.5rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--gold-800);
}

.prose a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }

.data-table { font-size: var(--text-sm); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-soft); }
.data-table th {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-sunken);
}
.data-table tbody tr:hover { background: var(--bg-sunken); }
/* A two-column reference table reads badly when the label column is sized by
   its longest entry and the prose column gets what is left. */
.data-table th:first-child, .data-table td:first-child { width: 34%; white-space: nowrap; }
.data-table td { color: var(--ink-70); line-height: var(--leading-normal); }

@media (max-width: 560px) {
    .data-table th:first-child, .data-table td:first-child { white-space: normal; }
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================================
   Auth pages
   ========================================================================= */

.auth-wrap { display: grid; place-items: center; padding-block: var(--space-8); min-height: 70vh; }
.auth-card { width: min(26rem, 100%); }
.auth-card__head { text-align: center; margin-bottom: var(--space-6); }
.auth-card__head h1 { font-size: var(--text-2xl); margin-block: var(--space-2) var(--space-2); }
.auth-alt { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
    background: var(--wine-900);
    color: rgba(245, 239, 228, 0.7);
    padding-block: var(--space-8) var(--space-5);
    font-size: var(--text-sm);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-7);
    border-bottom: 1px solid rgba(245, 239, 228, 0.12);
}
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h4 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}
.footer a { transition: color var(--fast) var(--ease); }
.footer a:hover { color: var(--ivory); }
.footer li { margin-bottom: var(--space-2); }
.footer .logo__mark { color: var(--ivory); }
.footer .logo__sub  { color: rgba(245, 239, 228, 0.4); }

.footer__bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
    font-size: var(--text-xs);
    flex-wrap: wrap;
}

.social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.social a {
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border: 1px solid rgba(245, 239, 228, 0.22);
    border-radius: 50%;
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--wine-900); }

/* ------------------------------------------------------------- utilities -- */

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); } .stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); } .stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }

.row { display: flex; align-items: center; }
.row-2 { gap: var(--space-2); } .row-3 { gap: var(--space-3); }
.row-4 { gap: var(--space-4); } .row-5 { gap: var(--space-5); }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.push { margin-left: auto; }
.grow { flex: 1; }

.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); }
.serif { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); }

@media print {
    .header, .footer, .announce, .flash-stack, .drawer, .scrim, .no-print { display: none !important; }
    body { background: #fff; }
    .panel { border: 1px solid #ddd; }
}