/* ─────────────────────────────────────────────────────────────
   DaShop — Design system
   Style: Glassmorphism + Minimalism (shadcn-inspired)
   Tokens-driven; do not put raw hex into components.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ── Neutrals (stone) — DARK by default; values reversed from the old
       light scale so anything tagged --stone-50 = darkest bg / --stone-900
       = brightest text. ── */
    --stone-50:  #1a1815;
    --stone-100: #232019;
    --stone-150: #2c2924;
    --stone-200: #38342d;
    --stone-300: #4d4940;
    --stone-400: #6f6c5e;
    --stone-500: #8e8b7c;
    --stone-600: #a8a596;
    --stone-700: #c8c5b6;
    --stone-800: #e0ddcf;
    --stone-900: #f5f3ee;

    /* ── Accent (Punisher red) — slightly brighter than light-mode for
       legibility on dark surfaces. ── */
    --brand-50:  rgba(239, 68, 68, .14);
    --brand-100: rgba(239, 68, 68, .22);
    --brand-300: #fca5a5;
    --brand-500: #ef4444;
    --brand-600: #f87171;
    --brand-700: #fca5a5;

    /* ── Semantic ── */
    --bg:           #0f0e0c;
    --bg-tint-a:    rgba(239, 68, 68, .05);
    --bg-tint-b:    rgba(90, 124, 157, .05);
    --surface:      #1a1815;
    --surface-2:    #232019;
    --glass:        rgba(28, 26, 22, .55);
    --glass-strong: rgba(28, 26, 22, .80);
    --glass-border: rgba(255, 255, 255, .07);
    --hairline:     rgba(255, 255, 255, .07);
    --hairline-2:   rgba(255, 255, 255, .14);
    --ink:          #f5f3ee;
    --ink-soft:     #d6d2c5;
    --ink-muted:    #9a9685;
    --ink-faint:    #6a6759;
    --accent:       var(--brand-500);
    --accent-ink:   #1a0707;
    --accent-soft:  rgba(239, 68, 68, .16);
    --danger:       #ef6e62;
    --danger-soft:  rgba(239, 110, 98, .14);
    --success:      #6fd394;
    --success-soft: rgba(111, 211, 148, .14);

    /* ── Seasonal accents ── */
    --season-spring:  #6fae87;
    --season-summer:  #d99a3f;
    --season-autumn:  #b85a30;
    --season-winter:  #5a7c9d;
    --season-allyear: var(--stone-500);

    --season-spring-tint:  rgba(111, 174, 135, .14);
    --season-summer-tint:  rgba(217, 154, 63, .16);
    --season-autumn-tint:  rgba(184, 90, 48, .14);
    --season-winter-tint:  rgba(90, 124, 157, .14);
    --season-allyear-tint: rgba(111, 108, 94, .12);

    /* ── Radii ── */
    --r-1: 6px;
    --r-2: 10px;
    --r-3: 14px;
    --r-4: 18px;
    --r-5: 24px;
    --r-pill: 999px;

    /* ── Elevation — darker shadows so they read against dark surfaces. ── */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .25);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-4: 0 30px 60px rgba(0, 0, 0, .60), 0 8px 18px rgba(0, 0, 0, .40);
    --ring:     0 0 0 3px rgba(239, 68, 68, .38);

    /* ── Typography ── */
    --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* ── Motion ── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:   140ms;
    --t-base:   220ms;
    --t-slow:   320ms;

    /* Make UA-rendered controls (search box, scrollbars, autofill) follow the theme. */
    color-scheme: dark;

    /* ── Spacing scale (4pt) ── */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─────────── Base ─────────── */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--bg);
}
/* Swallow the half-pixel scrollbar overshoot from the hero's full-bleed
   `calc(50% - 50vw)` trick. `clip` (vs `hidden`) preserves sticky positioning
   on the nav. */
body { overflow-x: clip; }

/* EXPERIMENT: make body transparent so the fixed `body::before` photo
   (declared just below) is visible. The canvas colour stays on `html`,
   so the page still has a fallback fill if the image fails to load.
   TO REVERT: delete this `body { background: transparent; }` line. */
body { background: transparent; }

/* ─────────── EXPERIMENT · global streamer photo background ───────────
   The streamer photo sits behind the entire app — nav, content, footer.
   A dark gradient lives on top of the photo (same pseudo) so white
   surfaces (product cards, forms, modals) still pop. `position: fixed`
   keeps the photo planted while the page scrolls.

   TO REVERT, swap the `background` line back to the three aurora radial
   gradients that lived here previously (kept in git history) and re-set
   `inset: -10vmin;` + `filter: blur(40px) saturate(120%);`. Also remove
   the `.hero-streamer { background: transparent }` + photo-layer hide at
   the bottom of the Streamer Hero section. */
/* The site-wide background photo is now the .site-bg crossfading slideshow
   (rendered in MainLayout, rotated by shop.js). The old single-image body::before
   is retired. */

/* Fixed, full-viewport background slideshow shown behind every page. On the
   home page the opaque hero covers it; elsewhere it shows through, dimmed. */
.site-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.site-bg-slide {
    position: absolute;
    inset: 0;
    background-color: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.4s var(--ease-in-out);
}
.site-bg-slide.is-active { opacity: 1; }
.site-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .20) 60%, rgba(0, 0, 0, .35) 100%);
}

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease-in-out); }
a:hover { color: var(--brand-700); }

::selection { background: var(--brand-100); color: var(--brand-700); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.12;
    margin: 0 0 var(--s-3);
    color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); }
h3 { font-size: 1.125rem; font-weight: 600; font-family: var(--font-sans); letter-spacing: -0.005em; }

p { margin: 0 0 var(--s-3); color: var(--ink-soft); }

.muted        { color: var(--ink-muted); }
.small        { font-size: .875rem; }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.link         { color: var(--accent); font-weight: 500; }
.link:hover   { color: var(--brand-700); }
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-muted);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* ─────────── Buttons ─────────── */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink);
    --btn-bd: var(--hairline-2);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0 var(--s-5);
    height: 42px;
    min-width: 42px;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: var(--r-2);
    cursor: pointer;
    font-family: inherit;
    font-size: .94rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition:
        background var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out),
        box-shadow var(--t-fast) var(--ease-in-out),
        transform var(--t-fast) var(--ease-in-out);
    box-shadow: var(--shadow-1);
    user-select: none;
    white-space: nowrap;
}
.btn:hover    { background: var(--stone-100); border-color: var(--hairline-2); box-shadow: var(--shadow-2); }
.btn:active   { transform: scale(.98); box-shadow: var(--shadow-1); }
.btn:disabled,
.btn[disabled]{ opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-lg { height: 50px; padding: 0 var(--s-6); font-size: 1rem; border-radius: var(--r-3); }
.btn-sm { height: 34px; padding: 0 var(--s-4); font-size: .85rem; }

.btn-primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-ink);
    --btn-bd: var(--accent);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, var(--shadow-2);
}
.btn-primary:hover { --btn-bg: var(--brand-600); --btn-bd: var(--brand-600); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, var(--shadow-3); }
.btn-primary:active{ --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); }

.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn-danger:hover { --btn-bg: #95201a; --btn-bd: #95201a; }

.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--stone-100); }

.btn-link {
    background: transparent; border-color: transparent; color: var(--accent);
    box-shadow: none; padding: 0 var(--s-2);
}
.btn-link:hover { background: var(--accent-soft); color: var(--brand-700); box-shadow: none; }

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring), var(--shadow-2);
}

/* Icon-only buttons preserve a 44pt+ tap area via min-width:42px above. */
.icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

/* ─────────── Forms ─────────── */
.form-control {
    width: 100%;
    height: 42px;
    padding: 0 var(--s-4);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-2);
    background: var(--surface);
    font: inherit;
    color: var(--ink);
    transition: border-color var(--t-fast) var(--ease-in-out),
                box-shadow var(--t-fast) var(--ease-in-out);
}
.form-control::placeholder { color: var(--ink-faint); }
textarea.form-control { height: auto; padding: var(--s-3) var(--s-4); line-height: 1.5; }
.form-control:hover { border-color: var(--stone-300); }
.form-control:focus {
    /* The explicit color/background here overrides bootstrap.min.css's focus
       reset (which forces dark-on-white) so the field stays readable in dark mode. */
    outline: none;
    color: var(--ink);
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: var(--ring);
}
.form-control:disabled,
.form-control[disabled] {
    color: var(--ink-muted);
    background: var(--surface-2);
    cursor: not-allowed;
}
.form-control.invalid,
.form-control[aria-invalid="true"] { border-color: var(--danger); }
.form-label {
    display: block; font-weight: 500; margin-bottom: var(--s-2);
    font-size: .88rem; color: var(--ink-soft);
}
.form-help { font-size: .82rem; color: var(--ink-muted); margin-top: var(--s-1); }
.form-check { display: inline-flex; gap: var(--s-2); align-items: center; cursor: pointer; }
.validation-message { color: var(--danger); font-size: .85rem; margin-top: var(--s-1); }
.invalid { outline: 1px solid var(--danger); }

.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    margin-bottom: var(--s-4);
    border: 1px solid transparent;
    font-size: .92rem;
}
.alert-danger  { background: var(--danger-soft);  color: #7a1a14; border-color: rgba(179, 38, 30, .18); }
.alert-success { background: var(--success-soft); color: #114a26; border-color: rgba(29, 100, 55, .18); }
.alert-warning { background: rgba(217, 154, 63, .12); color: #6a4216; border-color: rgba(217, 154, 63, .35); }
.alert ul { margin: var(--s-2) 0 0; padding-left: 1.2rem; }
.alert ul li { margin-top: var(--s-1); }

/* ─────────── App shell ─────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.app-main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--s-10) var(--s-6) var(--s-16);
}
.app-footer {
    border-top: 1px solid var(--hairline);
    padding: var(--s-6);
    color: var(--ink-muted);
    font-size: .9rem;
    background: rgba(15, 14, 12, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.app-footer .container { max-width: 1200px; margin: 0 auto; }
.app-footer .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.app-footer .footer-links {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-size: .9rem;
}

/* ─────────── Glass panel utility ─────────── */
.glass {
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-2);
    border-radius: var(--r-4);
}

/* ─────────── Header / Nav ─────────── */
.primary-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-3) var(--s-6);
    background: var(--glass-strong);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--hairline);
}
.brand {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em;
    color: var(--ink);
    flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff; font-size: .9rem; font-weight: 700;
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Tabs */
.nav-links {
    display: flex; gap: var(--s-1);
    margin: 0 auto 0 var(--s-4);
    padding: 0;
    list-style: none;
}
.nav-links a {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--ink-soft);
    font-weight: 500; font-size: .94rem;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-2);
    transition: color var(--t-fast) var(--ease-in-out),
                background var(--t-fast) var(--ease-in-out);
    text-decoration: none;
}
.nav-links a:hover { color: var(--ink); background: var(--stone-100); }
.nav-links a.active {
    color: var(--ink);
    background: var(--stone-100);
    box-shadow: inset 0 0 0 1px var(--hairline-2);
}

/* Right cluster */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
}

/* Icon button (44pt tap target, square) */
.icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out),
        transform var(--t-fast) var(--ease-in-out);
}
.icon-btn:hover {
    background: var(--stone-100);
    color: var(--ink);
    border-color: var(--hairline);
}
.icon-btn:active { transform: scale(.96); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Cart icon button + badge */
.cart-btn { position: relative; }
.cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-pill);
    padding: 0 5px;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--glass-strong);
}

/* Account menu (native <details> dropdown) */
.account-menu {
    position: relative;
}
.account-menu > summary {
    list-style: none;
    cursor: pointer;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary {
    background: var(--stone-100);
    color: var(--ink);
    border-color: var(--hairline-2);
}

.account-menu-panel {
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    min-width: 260px;
    padding: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-3);
    z-index: 60;
    animation: pop-in var(--t-base) var(--ease-out);
}

.account-info {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
}
.account-info-anon { display: block; }
.account-avatar {
    width: 38px; height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.account-meta { min-width: 0; }
.account-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    line-height: 1.3;
}
.account-email {
    font-size: .82rem;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.menu-sep {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: var(--s-1) 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3);
    background: transparent;
    border: none;
    border-radius: var(--r-2);
    color: var(--ink-soft);
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-in-out),
                color var(--t-fast) var(--ease-in-out);
}
.menu-item:hover {
    background: var(--stone-100);
    color: var(--ink);
}
.menu-item:focus-visible {
    outline: none;
    background: var(--stone-100);
    box-shadow: var(--ring);
    color: var(--ink);
}
.menu-item-danger { color: var(--danger); }
.menu-item-danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu-item-primary {
    color: var(--accent);
    font-weight: 600;
}
.menu-item-primary:hover { background: var(--accent-soft); color: var(--accent); }

.logout-form { margin: 0; }

@media (max-width: 720px) {
    .primary-nav { gap: var(--s-2); padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
    .nav-links {
        order: 3;
        flex: 1 0 100%;
        margin: var(--s-2) 0 0 0;
        gap: 0;
        overflow-x: auto;
    }
    /* Don't reserve a wrapped row when there are no nav links (non-admins). */
    .nav-links:empty { display: none; margin: 0; }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-actions { margin-left: auto; }
    .account-menu-panel { right: 0; min-width: 240px; }
}

/* ── Header + footer: phone polish ── */
@media (max-width: 600px) {
    /* Keep the brand on one line with the cart/account actions. */
    .brand { font-size: 1.1rem; }
    .brand-text { white-space: nowrap; }

    /* The account dropdown shouldn't overflow the screen edge. */
    .account-menu-panel { min-width: 0; width: min(280px, calc(100vw - var(--s-6))); }

    /* Stack the footer instead of spreading items edge-to-edge. */
    .app-footer { padding: var(--s-5) var(--s-4); }
    .app-footer .footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-4);
    }
    .app-footer .footer-links { gap: var(--s-2) var(--s-4); }
}

/* ─────────── Hero ─────────── */
.hero {
    position: relative;
    border-radius: var(--r-5);
    padding: var(--s-12) var(--s-10);
    margin-bottom: var(--s-12);
    color: var(--ink);
    background: var(--glass-strong);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--season-allyear-tint);
    opacity: 1;
}
.hero::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(28vmax 22vmax at 85% 110%, var(--season-tint-strong, rgba(124, 184, 146, .35)), transparent 65%),
        radial-gradient(20vmax 16vmax at 10% -10%, rgba(255,255,255,.6), transparent 60%);
    filter: blur(20px);
    pointer-events: none;
}

.hero-spring  { --season-tint-strong: rgba(111, 174, 135, .42); }
.hero-spring::before  { background: linear-gradient(135deg, rgba(178, 222, 195, .55), rgba(111, 174, 135, .25)); }
.hero-summer  { --season-tint-strong: rgba(217, 154, 63, .45); }
.hero-summer::before  { background: linear-gradient(135deg, rgba(255, 217, 156, .55), rgba(217, 154, 63, .22)); }
.hero-autumn  { --season-tint-strong: rgba(184, 90, 48, .42); }
.hero-autumn::before  { background: linear-gradient(135deg, rgba(243, 184, 152, .55), rgba(184, 90, 48, .22)); }
.hero-winter  { --season-tint-strong: rgba(90, 124, 157, .42); }
.hero-winter::before  { background: linear-gradient(135deg, rgba(186, 210, 230, .55), rgba(90, 124, 157, .22)); }
.hero-allyear { --season-tint-strong: rgba(111, 108, 94, .35); }

.hero-inner { max-width: 640px; }
.hero h1 {
    font-size: clamp(2.5rem, 3.6vw + 1rem, 3.8rem);
    font-weight: 500;
    margin-bottom: var(--s-4);
}
.hero .lede {
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: var(--s-8);
    max-width: 52ch;
    line-height: 1.5;
}
.hero .eyebrow { background: rgba(255,255,255,.85); margin-bottom: var(--s-5); }
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

@media (max-width: 720px) {
    .hero { padding: var(--s-8) var(--s-6); border-radius: var(--r-4); }
}

/* ─────────── Streamer Hero (home page) ─────────────────────────────
   Industrial-broadcast brutalism: condensed display type + mono utility,
   hard edges, scanlines + grain over the streamer photo, a marquee ticker
   anchored to the bottom edge, and a Twitch live-status pill that flips
   based on the singleton TwitchLiveState. Page-scoped tokens stay local
   so this whole component can be lifted or skinned without touching the
   global design system. */

/* Home-page-only override: collapse .app-main's vertical padding and turn
   it into a flex column so the hero (its only child) can stretch to the
   actual remaining viewport between the nav and the footer. Scoped via
   :has() so every other page keeps the standard block layout + paddings. */
.app-main:has(.hero-streamer) {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.hero-streamer {
    /* Page-scoped palette + type. Living here (not :root) so the rest of
       the site keeps using the global Inter/Fraunces stack. */
    --hero-red:       #ef4444;
    --hero-red-deep:  #b91c1c;
    --hero-red-glow:  rgba(239, 68, 68, .42);
    --hero-ink:       #f6f4ef;
    --hero-ink-soft:  rgba(246, 244, 239, .80);
    --hero-ink-mute:  rgba(246, 244, 239, .55);
    --hero-bg:        #08080a;
    --hero-display:   'Big Shoulders Display', 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
    --hero-mono:      'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    /* `flex: 1` (paired with the .app-main override above) stretches the
       hero to fill the exact space left over after nav + footer — no
       computed-subtraction math needed, no gap to chase. The 460px floor
       keeps the hero readable on absurdly short viewports. */
    flex: 1;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    /* EXPERIMENT: transparent so the global body-photo shows through.
       Revert to `background: var(--hero-bg);` to take the hero back to
       its own dark surface. */
    background: transparent;
    color: var(--hero-ink);
    overflow: hidden;
    isolation: isolate;
    font-family: var(--font-sans);
}

/* Photo layer — a crossfading slideshow. Each slide is a stacked image that
   fades in/out (shop.js rotates the .is-active class); the readability veil
   that carves the left for type lives on ::after, above the slides. */
.hero-streamer-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-streamer-slide {
    position: absolute;
    inset: 0;
    background-color: var(--bg);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    filter: saturate(.85) contrast(1.05);
    opacity: 0;
    transition: opacity 1.4s var(--ease-in-out);
}
.hero-streamer-slide.is-active { opacity: 1; }

/* Partial zoom-out for portrait shots: pull back a touch so they read less
   cropped on the wide desktop hero; the dark margins (background-color above)
   fill the sides. Per-image knobs come in as inline custom properties:
     --fit-size : zoom level (e.g. 67%) — lower = more pulled back
     --fit-pos  : vertical anchor (top / center / bottom / a %) it frames from
   Mobile keeps cover — the tall hero frames portraits well. */
.hero-streamer-slide.hero-fit-out,
.site-bg-slide.hero-fit-out {
    background-size: var(--fit-size, 67%);
    background-position: center var(--fit-pos, top);
}
@media (max-width: 720px) {
    .hero-streamer-slide.hero-fit-out,
    .site-bg-slide.hero-fit-out { background-size: cover; }
}
.hero-streamer-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(140% 90% at 78% 50%, transparent 32%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%),
        linear-gradient(95deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.68) 28%, rgba(0,0,0,.18) 58%, rgba(0,0,0,0) 75%);
}

/* CRT-style horizontal scanlines. Cheap, evocative, mix-blend-mode keeps it
   subtle on both bright and dark areas of the photo. */
.hero-streamer-scan {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, .035) 0,
        rgba(255, 255, 255, .035) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    opacity: .55;
}

/* SVG-turbulence noise grain. Inline data URI so there's no extra request;
   slightly oversized + negative inset so the grain doesn't tile visibly. */
.hero-streamer-grain {
    position: absolute;
    inset: -10%;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    opacity: .32;
    mix-blend-mode: overlay;
}

/* Decorative red diagonal slash hovering near the photo seam.
   Hidden on mobile (set in the media query below) where the content
   spans the full width. */
.hero-streamer::before {
    content: "";
    position: absolute;
    top: -6%;
    bottom: -6%;
    right: 30%;
    width: 2px;
    background: var(--hero-red);
    transform: skewX(-14deg);
    z-index: 3;
    opacity: .9;
    box-shadow: 0 0 32px var(--hero-red-glow);
    pointer-events: none;
}

/* Inner panel — asymmetric, left-aligned, vertically anchored to the
   bottom-left of the photo so the streamer's face stays uncovered. */
.hero-streamer-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding:
        clamp(var(--s-12), 12vh, var(--s-20))
        clamp(var(--s-6), 6vw, var(--s-16))
        clamp(var(--s-20), 16vh, calc(var(--s-20) + var(--s-6)));
    /* Stretch within the (now flex-column) hero so content stays anchored
       to the bottom regardless of how tall the hero ends up. */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-4);
    text-align: left;
}

/* ── Eyebrow row: small badge + meta + chapter mark ── */
.hero-streamer-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--hero-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hero-ink-soft);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
    animation: hero-fade-up .9s var(--ease-out) both;
}
.hero-streamer-mark {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    object-fit: cover;
    /* Sharp corners + offset hard-shadow → broadcast deck tile. */
    box-shadow: 6px 6px 0 0 rgba(0, 0, 0, .45);
    transition: transform .2s var(--ease-out);
}
.hero-streamer:hover .hero-streamer-mark { transform: translate(-1px, -1px); }
.hero-streamer-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.hero-streamer-chapter {
    font-family: var(--hero-mono);
    font-weight: 700;
    color: var(--hero-red);
    letter-spacing: .18em;
}

/* ── Brand name: oversized condensed italic with displaced ghost. ── */
.hero-streamer-title {
    position: relative;
    margin: 0;
    font-family: var(--hero-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(3.75rem, 13vw + .5rem, 11rem);
    line-height: .82;
    letter-spacing: -.015em;
    color: var(--hero-ink);
    text-transform: uppercase;
    text-shadow: 0 4px 36px rgba(0, 0, 0, .55);
    animation: hero-title-in 1s var(--ease-out) .12s both;
}
.hero-streamer-title > span { position: relative; z-index: 1; display: inline-block; }
.hero-streamer-title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(239, 68, 68, .60);
    text-stroke: 1px rgba(239, 68, 68, .60);
    transform: translate(.16em, -.04em);
    z-index: 0;
    pointer-events: none;
    text-shadow: none;
}

/* ── Mono subtitle marker right under the wordmark ── */
.hero-streamer-edition {
    margin: 0;
    font-family: var(--hero-mono);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--hero-ink-mute);
    animation: hero-fade-up .9s var(--ease-out) .25s both;
}
.hero-streamer-edition::before {
    content: "// ";
    color: var(--hero-red);
}

/* ── Tagline ── */
.hero-streamer-tagline {
    margin: var(--s-3) 0 var(--s-6);
    font-family: var(--font-sans);
    font-size: clamp(1rem, .8vw + .85rem, 1.2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .9);
    max-width: 50ch;
    line-height: 1.55;
    animation: hero-fade-up .9s var(--ease-out) .35s both;
}
.hero-streamer-tagline strong {
    color: var(--hero-red);
    font-weight: 700;
}

/* ── CTA + status row ── */
.hero-streamer-row {
    display: flex;
    align-items: center;
    gap: var(--s-5) var(--s-6);
    flex-wrap: wrap;
    animation: hero-fade-up .9s var(--ease-out) .45s both;
}

/* Parallelogram CTA with offset block-shadow. clip-path keeps the slant
   purely visual so the hit area stays a clean rectangle. */
.hero-streamer-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) clamp(var(--s-7, 28px), 3vw, var(--s-10));
    font-family: var(--hero-display);
    font-weight: 800;
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--hero-red);
    text-decoration: none;
    border: 0;
    position: relative;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .55);
    transition:
        transform   .2s var(--ease-out),
        background  .2s var(--ease-out),
        color       .2s var(--ease-out),
        box-shadow  .2s var(--ease-out);
}
.hero-streamer-cta svg {
    width: 22px;
    height: 22px;
    transition: transform .2s var(--ease-out);
}
.hero-streamer-cta:hover,
.hero-streamer-cta:focus-visible {
    transform: translate(-3px, -3px);
    background: #fff;
    color: var(--hero-red-deep);
    box-shadow: 14px 14px 0 0 rgba(0, 0, 0, .6);
    outline: none;
}
.hero-streamer-cta:hover svg,
.hero-streamer-cta:focus-visible svg { transform: translateX(5px); }
.hero-streamer-cta:active { transform: translate(0, 0); box-shadow: 4px 4px 0 0 rgba(0,0,0,.55); }

/* ── Twitch live/offline indicator ── */
.hero-streamer-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    font-family: var(--hero-mono);
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hero-ink-soft);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero-streamer-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #6e6e6e;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(110, 110, 110, .22);
}
.hero-streamer.is-live .hero-streamer-status {
    border-color: rgba(239, 68, 68, .55);
    color: var(--hero-ink);
    background: rgba(239, 68, 68, .10);
}
.hero-streamer.is-live .hero-streamer-status-dot {
    background: var(--hero-red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .30);
    animation: hero-pulse 1.4s ease-in-out infinite;
}
.hero-streamer-status-label { font-weight: 700; }
.hero-streamer-status-handle {
    color: var(--hero-ink-mute);
    text-transform: lowercase;
    letter-spacing: .05em;
}

/* ── Social tiles — sharp squares with a red corner-tab that slides in on hover ── */
.hero-socials {
    list-style: none;
    padding: 0;
    margin: var(--s-6) 0 0;
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    animation: hero-fade-up .9s var(--ease-out) .55s both;
}
.hero-socials a {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--hero-ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .18);
    overflow: hidden;
    transition:
        background    .2s var(--ease-out),
        border-color  .2s var(--ease-out),
        color         .2s var(--ease-out),
        transform     .2s var(--ease-out);
}
.hero-socials a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--hero-red);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(100%, -100%);
    transition: transform .25s var(--ease-out);
}
.hero-socials a:hover,
.hero-socials a:focus-visible {
    background: rgba(239, 68, 68, .12);
    border-color: var(--hero-red);
    color: var(--hero-red);
    transform: translateY(-2px);
    outline: none;
}
.hero-socials a:hover::after,
.hero-socials a:focus-visible::after {
    transform: translate(0, 0);
}
.hero-socials svg {
    width: 22px;
    height: 22px;
    transition: transform .2s var(--ease-out);
}
.hero-socials a:hover svg { transform: scale(1.08); }

/* ── Marquee ticker pinned to the bottom edge of the hero ── */
.hero-streamer-ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    overflow: hidden;
    padding: var(--s-3) 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .8) 100%);
    display: flex;
    align-items: stretch;
}
/* Two independent marquee viewports: promo text (70%) + sponsors (30%). Each
   clips its own track and fades at its edges. */
.hero-streamer-ticker-seg {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hero-streamer-ticker-seg.main { flex: 0 0 70%; }
.hero-streamer-ticker-seg.sponsors {
    flex: 0 0 30%;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.hero-streamer-ticker-track {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--s-5);
    white-space: nowrap;
    padding-left: 100%;
    font-family: var(--hero-mono);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--hero-ink-soft);
    animation: hero-marquee 38s linear infinite;
}
.hero-streamer-ticker-sep {
    color: var(--hero-red);
    opacity: .9;
}
/* Sponsor marks riding inside the marquee. Monarch (gold) and Logitech (cyan)
   keep their colours; Overchilled is pre-recoloured white so it reads on the
   dark ticker. */
.hero-streamer-ticker-logo {
    height: 26px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    opacity: .95;
}
/* Sponsor strip (right 30%): logo + name pairs, on a slightly quicker loop. */
.sponsor-track { animation-duration: 24s; }
.sponsor-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sponsor-item .hero-streamer-ticker-logo { height: 20px; opacity: 1; }

/* ── Animations ── */
@keyframes hero-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes hero-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .55; transform: scale(.82); }
}
@keyframes hero-title-in {
    from { opacity: 0; transform: translateY(36px); letter-spacing: 0; }
    to   { opacity: 1; transform: translateY(0);    letter-spacing: -.015em; }
}
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tablet (721 – 1024px): keep the asymmetric layout but soften the
   diagonal slash position and tame the title scale a touch. ── */
@media (min-width: 721px) and (max-width: 1024px) {
    .hero-streamer::before { right: 22%; }
    .hero-streamer-inner {
        padding:
            clamp(var(--s-10), 11vh, var(--s-16))
            clamp(var(--s-6), 5vw, var(--s-12))
            calc(var(--s-16) + var(--s-2));
    }
    .hero-streamer-title { font-size: clamp(4rem, 11vw + .5rem, 8.5rem); }
    .hero-streamer-tagline { max-width: 44ch; }
}

/* ── Mobile (≤ 720px): photo recomposes top-down, type stacks vertically,
   diagonal slash hidden, ticker stays. ── */
@media (max-width: 720px) {
    .hero-streamer {
        /* flex: 1 already does the math via the .app-main flex column above.
           Just a smaller floor for very short phones. */
        min-height: 400px;
    }
    .hero-streamer-photo::after {
        background-image:
            radial-gradient(130% 80% at 50% 30%, transparent 22%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.92) 100%),
            linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.62) 65%, rgba(0,0,0,.92) 100%);
    }
    .hero-streamer-slide { background-position: center top; }
    .hero-streamer::before { display: none; }
    .hero-streamer-inner {
        padding:
            clamp(var(--s-10), 10vh, var(--s-12))
            var(--s-5)
            calc(var(--s-16) + var(--s-3));
        gap: var(--s-3);
    }
    .hero-streamer-eyebrow { font-size: .68rem; letter-spacing: .18em; }
    .hero-streamer-mark    { width: 34px; height: 34px; font-size: 1.2rem; box-shadow: 4px 4px 0 0 rgba(0,0,0,.45); }
    .hero-streamer-title   { font-size: clamp(3rem, 16vw, 6rem); }
    .hero-streamer-tagline { font-size: 1rem; max-width: 38ch; }
    .hero-streamer-cta     { font-size: 1rem; padding: var(--s-3) var(--s-5); box-shadow: 6px 6px 0 0 rgba(0,0,0,.55); }
    .hero-streamer-cta:hover,
    .hero-streamer-cta:focus-visible { box-shadow: 9px 9px 0 0 rgba(0,0,0,.6); }
    .hero-streamer-status  { padding: var(--s-2) var(--s-3); font-size: .68rem; letter-spacing: .14em; }
    .hero-socials          { margin-top: var(--s-5); gap: var(--s-2); }
    .hero-socials a        { width: 44px; height: 44px; }
    .hero-socials svg      { width: 19px; height: 19px; }
    .hero-streamer-ticker-track { font-size: .68rem; letter-spacing: .2em; gap: var(--s-4); }
}

/* ── Tiny phones (≤ 380px): squeeze type a hair more so it doesn't wrap awkwardly ── */
@media (max-width: 380px) {
    .hero-streamer-title   { font-size: 2.7rem; }
    .hero-streamer-tagline { font-size: .95rem; }
    .hero-socials a        { width: 40px; height: 40px; }
    .hero-socials svg      { width: 18px; height: 18px; }
}

/* ── Reduced motion: kill marquee + pulses + entrance reveals ── */
@media (prefers-reduced-motion: reduce) {
    .hero-streamer-ticker-track,
    .hero-streamer.is-live .hero-streamer-status-dot,
    .hero-streamer-title,
    .hero-streamer-eyebrow,
    .hero-streamer-edition,
    .hero-streamer-tagline,
    .hero-streamer-row,
    .hero-socials {
        animation: none;
    }
}

/* ─────────── Section ─────────── */
.section { margin-bottom: var(--s-12); }
.section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--s-6); gap: var(--s-4);
}
.section-head h2 { margin: 0; }

/* ─────────── Product grid ─────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: var(--s-6);
}

.product-card {
    --card-bd: var(--hairline);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--card-bd);
    border-radius: var(--r-3);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--shadow-1);
    transition:
        transform var(--t-base) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
    isolation: isolate;
}
.product-card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    --card-bd: var(--hairline-2);
}
.product-card:has(.product-card-link:focus-visible) {
    box-shadow: var(--ring), var(--shadow-2);
}
.product-card-link:focus-visible { outline: none; }
.product-card .card-actions {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    z-index: 2;
    display: flex;
    gap: var(--s-1);
}
.product-card .thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--stone-100);
    overflow: hidden;
}
.product-card .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow) var(--ease-out);
}
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .body {
    padding: var(--s-4) var(--s-4) var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-1);
}
.product-card .name {
    font-size: 1rem; font-weight: 600;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.product-card .price {
    color: var(--ink-soft);
    font-weight: 500;
    font-feature-settings: "tnum" 1;
}
.product-card.is-out { opacity: .65; }
.product-card.is-out .name { color: var(--ink-muted); }

.image-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 180px;
    color: var(--ink-faint); font-size: .85rem; letter-spacing: .03em;
    background: linear-gradient(135deg, var(--stone-100), var(--stone-150));
}
.image-placeholder.large { min-height: 360px; }

/* ─────────── Shop grid — roomy 2-up layout ─────────── */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-10);
    max-width: 1140px;
    margin-inline: auto;
}
@media (max-width: 600px) {
    .shop-grid { grid-template-columns: 1fr; }
}

/* ─────────── Shop card — single-item buy widget ─────────── */
.shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out);
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--hairline-2); }
.shop-card.is-out { opacity: .7; }

.shop-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--stone-100);
    overflow: hidden;
}
.shop-card-imglink { display: block; width: 100%; height: 100%; }
.shop-card-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-out);
}
.shop-card-img.is-active { opacity: 1; }

.shop-card-flag {
    position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.shop-card-flag.sale { background: var(--accent); color: #fff; }
.shop-card-flag.out  { background: rgba(0, 0, 0, .7); color: #fff; }

.shop-card-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: none; border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .45); color: #fff;
    cursor: pointer; opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.shop-card-nav svg { width: 18px; height: 18px; }
.shop-card-nav.prev { left: var(--s-2); }
.shop-card-nav.next { right: var(--s-2); }
.shop-card-media:hover .shop-card-nav,
.shop-card-nav:focus-visible { opacity: 1; }
.shop-card-nav:hover { background: rgba(0, 0, 0, .7); }

.shop-card-dots {
    position: absolute; bottom: var(--s-2); left: 0; right: 0; z-index: 3;
    display: flex; justify-content: center; gap: 6px;
}
.shop-card-dot {
    width: 7px; height: 7px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.shop-card-dot.is-active { background: #fff; transform: scale(1.25); }

.shop-card-body {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-4) var(--s-4) var(--s-5);
}
/* Name + price share one row: name grows, price hugs the right. */
.shop-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}
.shop-card-name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.shop-card-name a { color: var(--ink); text-decoration: none; }
.shop-card-name a:hover { color: var(--accent); }

.shop-card-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--s-2); font-feature-settings: "tnum" 1; }
.shop-card-price .price-now { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.shop-card-price .price-was { font-size: .9rem; color: var(--ink-muted); text-decoration: line-through; }

/* Optional product description — clamped to keep cards even height. */
.shop-card-desc {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-card-sizes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.shop-size {
    min-width: 38px; height: 34px; padding: 0 var(--s-2);
    display: inline-grid; place-items: center;
    border: 1px solid var(--hairline-2); border-radius: var(--r-2);
    background: transparent; color: var(--ink-soft);
    font-size: .85rem; font-weight: 600; cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.shop-size:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.shop-size.is-selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.shop-size:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.shop-card-buy { display: flex; align-items: stretch; gap: var(--s-2); margin-top: var(--s-2); }
.shop-qty {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid var(--hairline-2); border-radius: var(--r-2); overflow: hidden;
}
.shop-qty button {
    width: 36px; height: 40px; border: none; background: transparent;
    color: var(--ink); font-size: 1.15rem; cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.shop-qty button:hover:not(:disabled) { background: var(--surface-2); }
.shop-qty button:disabled { opacity: .4; cursor: not-allowed; }
.shop-qty-val { min-width: 32px; text-align: center; font-weight: 600; font-feature-settings: "tnum" 1; }
.shop-card-add { flex: 1 1 auto; }
.shop-card-hint { margin: var(--s-1) 0 0; font-size: .8rem; color: var(--accent); }

/* Touch devices have no hover — keep the carousel arrows visible. */
@media (hover: none) {
    .shop-card-nav { opacity: 1; }
}

/* Pills (season + stock) */
.out-pill, .season-pill {
    position: absolute;
    top: var(--s-3);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1;
    box-shadow: var(--shadow-1);
}
.season-pill { left: var(--s-3); background: rgba(255, 255, 255, .82); color: var(--ink); border: 1px solid var(--glass-border); }
.season-pill.season-spring  { background: rgba(178, 222, 195, .92); color: #0f3a23; border-color: rgba(111, 174, 135, .35); }
.season-pill.season-summer  { background: rgba(255, 217, 156, .92); color: #4a2e00; border-color: rgba(217, 154, 63, .35); }
.season-pill.season-autumn  { background: rgba(243, 184, 152, .92); color: #4a1700; border-color: rgba(184, 90, 48, .35); }
.season-pill.season-winter  { background: rgba(186, 210, 230, .92); color: #112a44; border-color: rgba(90, 124, 157, .35); }
.season-pill.season-allyear { background: rgba(232, 230, 220, .92); color: var(--stone-700); border-color: var(--hairline-2); }
.out-pill { right: var(--s-3); background: rgba(20, 20, 18, .78); color: #fff; }

/* ─────────── Skeleton ─────────── */
.product-card.skeleton { pointer-events: none; }
.product-card.skeleton .thumb {
    background: linear-gradient(90deg, var(--stone-100), var(--stone-150), var(--stone-100));
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.product-card.skeleton .line {
    height: 12px; background: var(--stone-150); border-radius: var(--r-1);
    margin-bottom: var(--s-2);
}
.product-card.skeleton .line.w70 { width: 70%; }
.product-card.skeleton .line.w40 { width: 40%; }
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─────────── Legal pages (Privacy / Terms) ─────────── */
.legal-shell {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--s-6) var(--s-4) var(--s-10);
    color: var(--ink-soft);
    line-height: 1.65;
}
.legal-header { margin-bottom: var(--s-7); }
.legal-header h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    line-height: 1.15;
    margin: var(--s-2) 0;
    color: var(--ink);
}
.legal-shell .legal-lede {
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: var(--s-7);
}
.legal-shell h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    color: var(--ink);
    margin: var(--s-7) 0 var(--s-2);
}
.legal-shell ul { padding-left: 1.2rem; margin: var(--s-2) 0 var(--s-3); }
.legal-shell li { margin-top: var(--s-1); }
.legal-shell a { color: var(--accent); }
.legal-todo {
    background: rgba(217, 154, 63, .14);
    color: #6a4216;
    padding: 0 var(--s-1);
    border-radius: var(--r-1);
    font-size: .92em;
}

/* ─────────── Admin dashboard ─────────── */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}
.dash-grid.two-col {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-top: var(--s-2);
}
.dash-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-5);
}
.dash-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    color: var(--ink-muted);
    font-weight: 600;
}
.dash-figure {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    line-height: 1.1;
    margin: var(--s-2) 0 var(--s-1);
    color: var(--ink);
}
.dash-sub { display: block; }
.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-5);
}
.card-head { margin-bottom: var(--s-3); }
.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--hairline);
}
.dash-list li:last-child { border-bottom: 0; }
.dash-list-name {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}
.dash-list-name:hover { color: var(--accent); text-decoration: underline; }

/* ─────────── Wishlist heart ─────────── */
.wishlist-btn {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    cursor: pointer;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .12s ease, transform .12s ease, background .12s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.wishlist-btn:hover { color: #e2575b; transform: scale(1.05); }
.wishlist-btn.is-saved { color: #c33030; }
.wishlist-btn .icon { width: 1.05rem; height: 1.05rem; }
.product-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--s-3);
}
.product-title-row h1 { margin: 0; }

/* ─────────── AI suggestion box (admin) ─────────── */
.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}
.ai-suggestion {
    margin-top: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-2);
}
.ai-suggestion-text {
    margin: 0 0 var(--s-3);
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink);
}

/* ─────────── Bundles ─────────── */
.bundle-members {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bundle-members li {
    display: grid;
    grid-template-columns: 1fr 5rem auto;
    gap: var(--s-2);
    align-items: center;
    margin-bottom: var(--s-2);
}

/* ─────────── Returns / RMA ─────────── */
.lookup-returns { margin-top: var(--s-5); }
.return-history {
    list-style: none;
    margin: 0; padding: 0;
}
.return-history li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--hairline);
}
.return-history li:last-child { border-bottom: 0; }
.return-form-card {
    margin-top: var(--s-5);
    padding: var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
}
.return-pick-list {
    list-style: none;
    margin: var(--s-3) 0 var(--s-4);
    padding: 0;
}
.return-pick-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--hairline);
}
.return-pick-list li:last-child { border-bottom: 0; }
.admin-returns { margin-top: var(--s-7); }

/* ─────────── Twitch live banner ─────────── */
.live-banner {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: linear-gradient(90deg, #9146ff, #6441a5);
    color: #fff;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
}
.live-banner:hover { background: linear-gradient(90deg, #a35eff, #7553b8); }
.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ff4747;
    box-shadow: 0 0 0 0 rgba(255, 71, 71, .6);
    animation: live-pulse 1.5s ease-out infinite;
    flex-shrink: 0;
}
.live-label { letter-spacing: .14em; font-weight: 700; font-size: .8rem; }
.live-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-title { color: #fff; }
.live-viewers { color: rgba(255, 255, 255, .8); }
.live-cta { color: rgba(255, 255, 255, .9); white-space: nowrap; font-size: .85rem; }
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 71, 71, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 71, 71, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 71, 71, 0); }
}

/* ─────────── Faceted shop filters ─────────── */
.facet-block {
    margin: var(--s-3) 0 var(--s-5);
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    background: var(--surface);
}
.facet-summary {
    cursor: pointer;
    padding: var(--s-3) var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 500;
    list-style: none;
    user-select: none;
}
.facet-summary::-webkit-details-marker { display: none; }
.facet-summary::after { content: "+"; margin-left: auto; opacity: .6; }
.facet-block[open] .facet-summary::after { content: "−"; }
.facet-grid {
    padding: 0 var(--s-4) var(--s-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--s-4) var(--s-5);
    border-top: 1px solid var(--hairline);
    padding-top: var(--s-4);
}
.facet-h {
    margin: 0 0 var(--s-2);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-muted);
    font-weight: 600;
}
.facet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
}
.facet-price-row {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
}
.facet-price-input {
    width: 6.5rem;
}

/* ─────────── Search autocomplete dropdown ─────────── */
.autocomplete-panel {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    z-index: 80;
    max-height: 26rem;
    overflow-y: auto;
    display: none;
}
.autocomplete-panel.is-open { display: block; }
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--hairline);
    cursor: pointer;
}
.autocomplete-item:last-child { border-bottom: 0; }
.autocomplete-item.is-active,
.autocomplete-item:hover {
    background: var(--surface-2);
}
.autocomplete-thumb {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-1);
    overflow: hidden;
    background: var(--surface-2);
}
.autocomplete-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.autocomplete-name {
    flex: 1 1 auto;
    color: var(--ink);
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.autocomplete-price {
    color: var(--ink-soft);
    font-size: .9rem;
    font-feature-settings: "tnum" 1;
}
.autocomplete-empty {
    padding: var(--s-3) var(--s-4);
    color: var(--ink-muted);
    font-size: .9rem;
}

/* ─────────── Recently viewed strip ─────────── */
.recently-viewed {
    margin-top: var(--s-10);
    padding-top: var(--s-7);
    border-top: 1px solid var(--hairline);
}

/* ─────────── Lightbox overlay ─────────── */
body.lightbox-open { overflow: hidden; }
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: clamp(var(--s-3), 4vw, var(--s-6));
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lightbox-figure img {
    max-width: 100%;
    max-height: calc(100dvh - 6rem);
    object-fit: contain;
    border-radius: var(--r-2);
    cursor: zoom-in;
    touch-action: pinch-zoom;
    transition: transform .2s ease;
}
.lightbox-figure img.is-zoomed {
    transform: scale(2);
    cursor: zoom-out;
}
.lightbox-figure figcaption {
    color: rgba(255, 255, 255, .85);
    margin-top: var(--s-3);
    font-size: .9rem;
    text-align: center;
}
.lightbox-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 999px;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .18); }
.lightbox-close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
}
.lightbox-prev { margin-right: var(--s-3); }
.lightbox-next { margin-left: var(--s-3); }
.lightbox-trigger {
    cursor: zoom-in;
    border: 0;
    padding: 0;
    background: transparent;
    display: contents;
}

/* ─────────── Announce-on-create row ─────────── */
.announce-row {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
}
.announce-row p { margin: var(--s-1) 0 0; }

/* ─────────── Reviews trigger + modal ─────────── */
.reviews-trigger {
    margin-top: var(--s-7);
}
.reviews-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
}
.reviews-btn .icon { width: 1.1rem; height: 1.1rem; color: #f0c419; }
.reviews-btn-cta { color: var(--accent); }
.modal-card-wide {
    max-width: 640px;
    padding: var(--s-6) var(--s-6) var(--s-5);
    max-height: calc(100dvh - 2 * var(--s-4));
    display: flex;
    flex-direction: column;
}
.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    padding-right: var(--s-1);
}

/* ─────────── Reviews + ratings ─────────── */
.rating-stars {
    position: relative;
    display: inline-block;
    color: rgba(0, 0, 0, .15);
    font-size: 1rem;
    letter-spacing: .12em;
    line-height: 1;
    user-select: none;
}
.rating-stars.is-compact { font-size: .85rem; }
.rating-stars.is-large { font-size: 1.25rem; }
.rating-stars-track { color: inherit; }
.rating-stars-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #f0c419;
    white-space: nowrap;
    pointer-events: none;
}
.card-rating {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin: var(--s-1) 0 var(--s-2);
}
.reviews-section {
    margin-top: var(--s-10);
    padding-top: var(--s-7);
    border-top: 1px solid var(--hairline);
}
.review-form { margin: var(--s-5) 0; }
.rating-input {
    display: inline-flex;
    gap: var(--s-1);
    font-size: 2rem;
    line-height: 1;
}
.rating-input-star {
    background: none;
    border: 0;
    cursor: pointer;
    color: rgba(0,0,0,.18);
    transition: color .12s ease;
    padding: 0;
    line-height: 1;
}
.rating-input-star.is-on { color: #f0c419; }
.rating-input-star:hover { color: #d9a91f; }
.review-list {
    list-style: none;
    margin: var(--s-5) 0 0;
    padding: 0;
}
.review {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--hairline);
}
.review:last-child { border-bottom: 0; }
.review-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-bottom: var(--s-1);
}
.review-title { color: var(--ink); }
.review-meta { margin-bottom: var(--s-2); }
.review-body { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.review-body-snippet { white-space: pre-wrap; max-width: 32rem; }

/* ─────────── Cross-sell on product detail ─────────── */
.related-section {
    margin-top: var(--s-10);
    padding-top: var(--s-7);
    border-top: 1px solid var(--hairline);
}

/* ─────────── Drop badges + sale pricing ─────────── */
.drop-pill {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    background: rgba(31, 67, 52, .9);
    color: #fff;
    border-radius: 999px;
    padding: 3px var(--s-2);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.drop-banner {
    background: rgba(217, 154, 63, .15);
    color: #6a4216;
    border: 1px solid rgba(217, 154, 63, .35);
    border-radius: var(--r-2);
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-4);
    font-size: .92rem;
}
.drop-banner.is-ended {
    background: rgba(150, 150, 150, .12);
    color: var(--ink-muted);
    border-color: var(--hairline);
}
.price-was {
    text-decoration: line-through;
    color: var(--ink-muted);
    font-weight: 400;
    margin-right: var(--s-2);
    font-size: .9em;
}
.price-was-lg {
    text-decoration: line-through;
    color: var(--ink-muted);
    font-weight: 400;
    margin-right: var(--s-2);
    font-size: .65em;
}
.save-pill {
    background: rgba(179, 38, 30, .12);
    color: #7a1a14;
    border-radius: 999px;
    padding: 2px var(--s-2);
    font-size: .72rem;
    font-weight: 600;
    margin-left: var(--s-2);
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.form-row-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--s-3);
}

/* ─────────── Newsletter signup (footer popover) ─────────── */
.newsletter-pop {
    position: relative;
    display: inline-block;
}
.newsletter-pop-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.newsletter-pop-summary::-webkit-details-marker { display: none; }
.newsletter-pop[open] .newsletter-pop-summary {
    text-decoration: none;
}
.newsletter-pop-panel {
    position: absolute;
    bottom: calc(100% + var(--s-2));
    right: 0;
    width: min(22rem, 90vw);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    padding: var(--s-4);
    z-index: 60;
}
.newsletter-pop-lede { margin: 0 0 var(--s-3); }
.newsletter-pop-row {
    display: flex;
    gap: var(--s-2);
}
.newsletter-pop-row .form-control { flex: 1 1 auto; }
.newsletter-pop-fineprint { margin: var(--s-2) 0 0; }
.newsletter-pop-confirm {
    margin: 0;
    color: var(--accent-dark, var(--accent));
    font-weight: 500;
}
/* On phones the footer is left-aligned, so open the panel to the right (not
   left, which ran off the screen edge) and keep it within the viewport. */
@media (max-width: 600px) {
    .newsletter-pop-panel {
        left: 0;
        right: auto;
        width: min(22rem, calc(100vw - var(--s-8)));
    }
}

/* ─────────── Notify-when-back card (product detail) ─────────── */
.notify-card {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
}
.notify-card-head,
.notify-card-success {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    margin-bottom: var(--s-3);
}
.notify-card-success { margin-bottom: 0; color: var(--accent-dark, var(--accent)); }
.notify-card-head .icon,
.notify-card-success .icon {
    flex-shrink: 0;
    width: 1.4rem; height: 1.4rem;
    margin-top: 2px;
    color: var(--accent);
}
.notify-row {
    display: flex;
    gap: var(--s-2);
}
.notify-row .form-control { flex: 1 1 auto; }

/* ─────────── Discount form (checkout aside) ─────────── */
.discount-form {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
    font-size: .92rem;
}
.discount-form summary {
    cursor: pointer;
    color: var(--accent);
    list-style: none;
    user-select: none;
}
.discount-form summary::-webkit-details-marker { display: none; }
.discount-form summary::after { content: " +"; opacity: .65; }
.discount-form[open] summary::after { content: " ×"; }
.discount-input-row {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-2);
}
.discount-input-row .form-control { flex: 1 1 auto; }
.discount-error {
    color: #7a1a14;
    font-size: .88rem;
    margin-top: var(--s-2);
}
.summary-row.discount-row {
    color: var(--accent-dark, var(--accent));
}
.discount-tag {
    background: rgba(220, 38, 38, .12);
    border-radius: var(--r-1);
    padding: 1px var(--s-1);
    font-size: .85em;
    margin: 0 var(--s-1);
    letter-spacing: .03em;
}
.btn-link-inline {
    background: none;
    border: 0;
    color: var(--ink-muted);
    font-size: .82em;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.btn-link-inline:hover { color: var(--ink); }

/* ─────────── Cookie consent banner ─────────── */
.cookie-banner {
    position: fixed;
    inset: auto var(--s-4) var(--s-4);
    max-width: 28rem;
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    padding: var(--s-4) var(--s-5);
    z-index: 1000;
    display: none;
    color: var(--ink-soft);
    font-size: .92rem;
}
.cookie-banner.is-open { display: block; }
.cookie-banner h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    margin: 0 0 var(--s-2);
    color: var(--ink);
}
.cookie-banner p { margin: 0 0 var(--s-3); line-height: 1.5; }
.cookie-banner-actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.cookie-banner-actions .btn { flex: 1 1 auto; }

/* ─────────── Status pages (404 / Error) ─────────── */
.status-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 16rem);
    padding: var(--s-10) var(--s-4);
}
.status-inner {
    max-width: 36rem;
    text-align: center;
}
.status-inner .eyebrow { margin: 0 auto var(--s-4); }
.status-inner h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 var(--s-3);
    color: var(--ink);
}
.status-inner p { font-size: 1rem; line-height: 1.55; }
.status-inner code {
    font-size: .92em;
    background: var(--glass);
    padding: 0 var(--s-1);
    border-radius: var(--r-1);
    word-break: break-all;
}
.status-actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--s-6);
}
.status-foot { margin-top: var(--s-6); }
.status-ref { margin-top: var(--s-3); color: var(--ink-muted); font-size: .9rem; }

/* ─────────── Empty state ─────────── */
.empty-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px dashed var(--hairline-2);
    border-radius: var(--r-4);
    padding: var(--s-12) var(--s-6);
    text-align: center;
    color: var(--ink-soft);
}
.empty-card h3 { color: var(--ink); margin-bottom: var(--s-2); }
.empty-card p { margin-bottom: var(--s-5); }

/* ─────────── Shop / filters ─────────────────────────────
   The Shop page extends the broadcast brutalism set in the hero: same
   display + mono pair, same red accent, sharp edges. Page-scoped tokens
   so the legacy `.shop-header > div > h1` styles below stay available
   for any other consumer (none today, but defensive). */
.shop-shell {
    --shop-red:      #ef4444;
    --shop-red-deep: #b91c1c;
    --shop-display:  'Big Shoulders Display', 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
    --shop-mono:     'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* New broadcast-style header: vertical stack with mono eyebrow + giant
   italic wordmark + utility subline. */
.shop-shell .shop-header {
    display: block;
    margin-bottom: var(--s-7, 28px);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--hairline-2);
}
.shop-shell .shop-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--shop-mono);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.shop-shell .shop-chapter {
    color: var(--shop-red);
    font-weight: 700;
}
.shop-shell .shop-meta { flex: 1 1 auto; min-width: 0; }

/* Counter chip: monospace numeric block + small label, sharp edges, hard
   shadow. Mirrors the broadcast deck buttons in the hero. */
.shop-shell .shop-count-pill {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ink);
    box-shadow: 3px 3px 0 0 var(--shop-red);
    line-height: 1;
}
.shop-shell .shop-count-num {
    padding: 6px 10px;
    background: var(--ink);
    color: var(--surface);
    font-family: var(--shop-mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}
.shop-shell .shop-count-label {
    padding: 6px 10px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--shop-mono);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .18em;
}

.shop-shell .shop-header h1.shop-title {
    position: relative;
    margin: 0 0 var(--s-3);
    font-family: var(--shop-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.75rem, 8vw + .5rem, 6.5rem);
    line-height: .86;
    letter-spacing: -.015em;
    color: var(--ink);
    text-transform: uppercase;
}
.shop-shell .shop-title > span { position: relative; z-index: 1; display: inline-block; }
.shop-shell .shop-title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(239, 68, 68, .55);
    text-stroke: 1px rgba(239, 68, 68, .55);
    transform: translate(.14em, -.035em);
    z-index: 0;
    pointer-events: none;
}

.shop-shell .shop-subline {
    margin: 0;
    font-family: var(--shop-mono);
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.shop-shell .shop-filter-active {
    color: var(--shop-red);
    font-weight: 700;
    margin-right: var(--s-3);
}
.shop-shell .shop-filter-clear {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--shop-red);
    padding-bottom: 1px;
    font-weight: 700;
    transition: color var(--t-fast) var(--ease-out);
}
.shop-shell .shop-filter-clear:hover { color: var(--shop-red); }

/* Search input — sharper, taller, mono input feel */
.shop-shell .search-form .search-input {
    height: 52px;
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
    font-family: var(--shop-mono);
    letter-spacing: .04em;
    transition:
        border-color var(--t-fast) var(--ease-out),
        box-shadow   var(--t-fast) var(--ease-out);
}
.shop-shell .search-form .search-input:focus {
    border-color: var(--shop-red);
    outline: none;
    box-shadow: 4px 4px 0 0 rgba(239, 68, 68, .18);
}
.shop-shell .search-form .search-clear { border-radius: 0; }

/* Filter bar — kill the pill, sit flat */
.shop-shell .filter-bar {
    border-radius: 0;
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Chips inside the shop — sharp, mono labels, hard red active state.
   Scoped to .shop-shell so Admin/Orders chips keep their pill style. */
.shop-shell .chip {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
    color: var(--ink-soft);
    font-family: var(--shop-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 14px;
}
.shop-shell .chip:hover {
    background: var(--surface);
    color: var(--shop-red);
    border-color: var(--shop-red);
}
.shop-shell .chip.active {
    background: var(--shop-red);
    color: #fff;
    border-color: var(--shop-red);
    box-shadow: 3px 3px 0 0 rgba(20, 20, 18, .14);
}
.shop-shell .chip.active:hover {
    background: var(--shop-red-deep);
    border-color: var(--shop-red-deep);
}

/* Sort menu — sharper summary + panel */
.shop-shell .sort-menu > summary { border-radius: 0; }
.shop-shell .sort-menu[open] > summary {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.shop-shell .sort-menu-panel {
    border-radius: 0;
    border: 1px solid var(--ink);
    box-shadow: 6px 6px 0 0 rgba(20, 20, 18, .12);
}
.shop-shell .sort-menu-panel .menu-item { border-radius: 0; }
.shop-shell .sort-menu-panel .menu-item.is-current {
    background: var(--shop-red);
    color: #fff;
}

/* Facets — match the rest of the page */
.shop-shell .facet-block {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
}
.shop-shell .facet-summary {
    font-family: var(--shop-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
}
.shop-shell .facet-h {
    font-family: var(--shop-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.shop-shell .facet-price-input { border-radius: 0; font-family: var(--shop-mono); }

/* Empty state — broadcast tone */
.shop-shell .empty-card h3 {
    font-family: var(--shop-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: -.01em;
}

/* Mobile tuning */
@media (max-width: 720px) {
    .shop-shell .shop-header h1.shop-title { font-size: clamp(2.25rem, 13vw, 4.5rem); }
    .shop-shell .shop-eyebrow { font-size: .68rem; letter-spacing: .18em; }
    .shop-shell .shop-count-pill { margin-left: auto; }
}

/* Search form */
.search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.search-form .search-icon {
    position: absolute;
    left: var(--s-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    width: 18px; height: 18px;
    pointer-events: none;
}
.search-form .search-icon svg { width: 18px; height: 18px; }
.search-form .search-input {
    flex: 1;
    height: 48px;
    padding-left: calc(var(--s-4) + 28px);
    padding-right: 44px;
    font-size: 1rem;
    border-radius: var(--r-3);
    background: var(--surface);
}
.search-form .search-input::-webkit-search-cancel-button { display: none; }
.search-form .search-clear {
    position: absolute;
    right: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: grid; place-items: center;
    color: var(--ink-muted);
    border-radius: var(--r-1);
}
.search-form .search-clear:hover { background: var(--stone-100); color: var(--ink); }
.search-form .search-clear svg { width: 16px; height: 16px; }

/* Filter strip layout: season chips on the left, extras on the right */
.shop-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-8);
}
.shop-filters .filter-bar {
    /* Override the sticky/glass treatment so it sits inline with the row. */
    position: static;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}
.filter-extras {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.filter-extras .chip { padding: var(--s-2) var(--s-3); }
.filter-extras .chip .icon { width: .9rem; height: .9rem; }

.filter-types {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.filter-types .chip { padding: var(--s-2) var(--s-3); }

/* Sort dropdown (uses native <details>) */
.sort-menu { position: relative; }
.sort-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.sort-menu > summary::-webkit-details-marker { display: none; }
.sort-menu[open] > summary {
    background: var(--ink);
    color: var(--stone-50);
    border-color: var(--ink);
}
.sort-menu-panel {
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    min-width: 220px;
    padding: var(--s-1);
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-3);
    z-index: 60;
    animation: pop-in var(--t-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sort-menu-panel .menu-item {
    font-size: .9rem;
    padding: var(--s-2) var(--s-3);
}
.sort-menu-panel .menu-item.is-current {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.filter-bar {
    position: sticky;
    top: 70px;
    z-index: 20;
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-bottom: var(--s-8);
    padding: var(--s-3);
    border-radius: var(--r-pill);
    background: var(--glass-strong);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
}
.chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-soft);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-in-out),
                color var(--t-fast) var(--ease-in-out),
                border-color var(--t-fast) var(--ease-in-out);
}
.chip:hover { background: var(--stone-100); color: var(--ink); }
.chip.active {
    background: var(--ink);
    color: var(--stone-50);
    border-color: var(--ink);
}
.chip .dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--season-allyear);
    flex-shrink: 0;
}
.chip.season-spring  .dot { background: var(--season-spring); }
.chip.season-summer  .dot { background: var(--season-summer); }
.chip.season-autumn  .dot { background: var(--season-autumn); }
.chip.season-winter  .dot { background: var(--season-winter); }
.chip.season-allyear .dot { background: var(--season-allyear); }

/* ─────────── Product Detail — broadcast brutalism ─────────────────
   Same display + mono pair, same red accent, same hard edges as Home
   and Shop. All overrides are scoped to `.product-detail` / `.pd-back`
   so the back link, the body column, drop banner, variant pickers and
   purchase panel all share the language without leaking out to other
   pages that reuse `.btn-primary`, `.qty-stepper`, etc. */
.product-detail,
.pd-back {
    --pd-red:      #ef4444;
    --pd-red-deep: #b91c1c;
    --pd-display:  'Big Shoulders Display', 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
    --pd-mono:     'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* Sharp mono back link with red hover */
.pd-back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    padding: 2px 0 4px;
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color .18s var(--ease-out), gap .18s var(--ease-out), border-color .18s var(--ease-out);
}
.pd-back:hover { color: var(--pd-red); gap: var(--s-3); }
.pd-back svg   { width: 16px; height: 16px; }

/* Title */
.product-detail .product-detail-body h1 {
    margin: 0;
    font-family: var(--pd-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
    line-height: .95;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Drop banner — sharp red strip in mono */
.product-detail .drop-banner {
    border-radius: 0;
    background: rgba(239, 68, 68, .10);
    border: 1px solid var(--pd-red);
    color: var(--ink);
    font-family: var(--pd-mono);
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: var(--s-3) var(--s-4);
}
.product-detail .drop-banner strong {
    color: var(--pd-red);
    margin-right: var(--s-2);
    font-weight: 700;
}
.product-detail .drop-banner.is-ended {
    background: var(--surface-2);
    border-color: var(--hairline-2);
    color: var(--ink-muted);
}
.product-detail .drop-banner.is-ended strong { color: var(--ink-muted); }

/* Price — tabular mono with sharp save-pill */
.product-detail .price-lg {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin: var(--s-4) 0 var(--s-6);
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: 1.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    letter-spacing: -.01em;
}
.product-detail .price-was-lg {
    color: var(--ink-muted);
    text-decoration: line-through;
    font-size: 1.1rem;
    font-weight: 400;
}
.product-detail .save-pill {
    border-radius: 0;
    background: var(--pd-red);
    color: #fff;
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .18em;
    padding: 4px 8px;
    text-transform: uppercase;
}

/* Variant picker labels in mono */
.product-detail .variant-picker          { margin-bottom: var(--s-5); }
.product-detail .variant-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}
.product-detail .variant-picker-label {
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.product-detail .variant-picker-value {
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .12em;
    color: var(--ink);
    text-transform: uppercase;
}

/* Size chips — sharp, mono, red active */
.product-detail .size-chip {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    font-family: var(--pd-mono);
    font-weight: 700;
    letter-spacing: .08em;
    background: var(--surface);
    color: var(--ink);
    padding: 10px 14px;
    min-width: 48px;
}
.product-detail .size-chip:hover:not(.is-out):not(.is-selected) {
    border-color: var(--pd-red);
    color: var(--pd-red);
}
.product-detail .size-chip.is-selected {
    background: var(--pd-red);
    color: #fff;
    border-color: var(--pd-red);
    box-shadow: 3px 3px 0 0 rgba(20, 20, 18, .14);
}
/* Color chips — sharp box around the swatch */
.product-detail .color-chip {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
    padding: 6px 12px 6px 6px;
    gap: var(--s-2);
}
.product-detail .color-chip:hover:not(.is-out):not(.is-selected) {
    border-color: var(--pd-red);
}
.product-detail .color-chip.is-selected {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
    box-shadow: 3px 3px 0 0 var(--pd-red);
}
.product-detail .color-chip .color-swatch { border-radius: 0; }
.product-detail .color-chip .color-name {
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Stock line — mono utility */
.product-detail .stock-line {
    display: inline-block;
    margin-bottom: var(--s-3);
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
}
.product-detail .stock-line.low { color: var(--pd-red); }
.product-detail .stock-line.out { color: var(--ink-muted); }

/* Qty stepper — sharp */
.product-detail .qty-stepper {
    border-radius: 0;
    border: 1px solid var(--ink);
    overflow: hidden;
}
.product-detail .qty-stepper button {
    border-radius: 0;
    font-family: var(--pd-mono);
    font-weight: 700;
}
.product-detail .qty-stepper input {
    font-family: var(--pd-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Add-to-cart parallelogram CTA, same language as the hero */
.product-detail .purchase-panel .btn-primary {
    border-radius: 0;
    border: 0;
    background: var(--pd-red);
    color: #fff;
    font-family: var(--pd-display);
    font-style: italic;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: var(--s-3) clamp(var(--s-6), 3vw, var(--s-10));
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, .45);
    transition:
        transform   .2s var(--ease-out),
        background  .2s var(--ease-out),
        color       .2s var(--ease-out),
        box-shadow  .2s var(--ease-out);
}
.product-detail .purchase-panel .btn-primary:hover:not(:disabled),
.product-detail .purchase-panel .btn-primary:focus-visible:not(:disabled) {
    transform: translate(-3px, -3px);
    background: #fff;
    color: var(--pd-red-deep);
    box-shadow: 12px 12px 0 0 rgba(0, 0, 0, .5);
    outline: none;
}
.product-detail .purchase-panel .btn-primary:active:not(:disabled) {
    transform: translate(0, 0);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .45);
}
.product-detail .purchase-panel .btn-primary:disabled {
    background: var(--stone-300);
    color: var(--surface);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .15);
    cursor: not-allowed;
}

/* Notify-me card — sharp + mono */
.product-detail .notify-card {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
}
.product-detail .notify-card .form-control { border-radius: 0; }
.product-detail .notify-card .btn-primary {
    border-radius: 0;
    background: var(--pd-red);
    color: #fff;
    font-family: var(--pd-mono);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.product-detail .notify-card .btn-primary:hover:not(:disabled) {
    background: var(--pd-red-deep);
}

/* "Added to cart" toast — broadcast tone */
.product-detail .added-toast {
    font-family: var(--pd-mono);
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pd-red);
}

/* Full-width description block, moved out of the body column so the
   gallery + buy panel fit the viewport on first paint. */
.pd-description {
    --pd-red:      #ef4444;
    --pd-mono:     'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    margin: var(--s-10) 0 var(--s-12);
    max-width: 760px;
}
.pd-description-label {
    margin: 0 0 var(--s-3);
    font-family: var(--pd-mono);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pd-red);
}
.pd-description-body {
    margin: 0;
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
    white-space: pre-line;
}

/* Product gallery — sharper corner radii + height cap so the main
   2-col grid fits the viewport on first load. */
.product-detail .product-detail-image {
    border-radius: var(--r-2);
    aspect-ratio: 1 / 1;
    /* Never taller than the viewport minus nav + back link + small buffer. */
    max-height: calc(100svh - 200px);
}
.product-detail .product-detail-thumbs .thumb { border-radius: 0; }
.product-detail .product-detail-thumbs .thumb.is-active {
    border-color: var(--pd-red);
    box-shadow: 0 0 0 2px var(--pd-red);
}

/* Original .product-detail rules continue below */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-12);
    align-items: start;
}
@media (max-width: 880px) {
    .product-detail { grid-template-columns: 1fr; gap: var(--s-8); }
}
.product-detail-image {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-4);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-2);
}
.product-detail-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-detail-gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.product-detail-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--s-2);
}
.product-detail-thumbs .thumb {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    padding: 0;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.product-detail-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail-thumbs .thumb:hover { transform: translateY(-1px); border-color: var(--hairline-2); }
.product-detail-thumbs .thumb.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.product-detail-body { padding-top: var(--s-2); }
.product-detail-body .season-pill { position: static; display: inline-flex; margin-bottom: var(--s-3); }
.product-detail-body h1 { margin: 0 0 var(--s-3); font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem); }
.product-detail-body .price-lg {
    font-size: 1.6rem; font-weight: 600;
    margin: 0 0 var(--s-5);
    color: var(--ink);
    font-feature-settings: "tnum" 1;
}
.product-detail-body .description {
    white-space: pre-wrap;
    margin: 0 0 var(--s-8);
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 60ch;
    border-top: 1px solid var(--hairline);
    padding-top: var(--s-5);
}

/* ─────────── Variant pickers (size + color on /shop/{slug}) ─────────── */
.variant-picker { margin: 0 0 var(--s-5); }
.variant-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}
.variant-picker-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-muted);
}
.variant-picker-value {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: "tnum" 1;
}

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* Square size chips — fashion-site convention so an "L" reads as a size letter */
.size-chip {
    min-width: 48px;
    height: 48px;
    padding: 0 var(--s-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-2);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-in-out),
                background var(--t-fast) var(--ease-in-out),
                color var(--t-fast) var(--ease-in-out),
                transform var(--t-fast) var(--ease-in-out);
}
.size-chip:hover:not(.is-out):not(.is-selected) {
    border-color: var(--ink);
    transform: translateY(-1px);
}
.size-chip.is-selected {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.size-chip.is-out {
    color: var(--ink-muted);
    border-color: var(--hairline);
    background: var(--stone-100);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
/* Pill-shaped color chips with a colored swatch dot */
.color-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-pill);
    font: inherit;
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-in-out),
                transform var(--t-fast) var(--ease-in-out),
                box-shadow var(--t-fast) var(--ease-in-out);
}
.color-chip:hover:not(.is-out):not(.is-selected) {
    border-color: var(--ink);
    transform: translateY(-1px);
}
.color-chip.is-selected {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink);
}
.color-chip.is-out {
    color: var(--ink-muted);
    border-color: var(--hairline);
    text-decoration: line-through;
    opacity: .65;
}
.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    flex-shrink: 0;
    display: inline-block;
}
.color-name { white-space: nowrap; }

.purchase-panel {
    display: flex; flex-direction: column; gap: var(--s-4);
    padding: var(--s-5);
    background: var(--glass);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
}
.qty-row {
    display: flex; gap: var(--s-3);
    align-items: stretch; flex-wrap: wrap;
}
.qty-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-2);
    background: var(--surface);
    height: 50px;
    overflow: hidden;
}
.qty-stepper button {
    width: 44px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-in-out);
}
.qty-stepper button:hover:not(:disabled) { background: var(--stone-100); }
.qty-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.qty-stepper input {
    width: 56px;
    border: none;
    background: transparent;
    text-align: center;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; }
/* Static-SSR stepper shows the quantity as a <span> (the +/- are submit buttons),
   so it needs the same sizing/centering the old <input> had. */
.qty-stepper .qty-value {
    min-width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--ink);
    -webkit-user-select: none;
    user-select: none;
}
.qty-row .btn-primary { flex: 1; min-width: 200px; }

/* ---- Shop-card add-to-cart form (static SSR: radio-based size chips) ---- */
/* The size picker is a <label class="size-chip"> wrapping a hidden radio, so the
   whole chip is clickable and the native radio control never shows. Selection is
   driven by :has(input:checked) — no circuit, no JS. */
.size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.size-chip { position: relative; }
.size-chip input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.size-chip:has(input:checked) {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.size-chip:has(input:focus-visible) {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.size-chip.is-soldout {
    color: var(--ink-muted);
    border-color: var(--hairline);
    background: var(--stone-100);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    cursor: not-allowed;
}
.size-chip.is-soldout input[type="radio"] { cursor: not-allowed; }

.card-add-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
.qty-add-row {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
}
.qty-add-row .add-btn { flex: 1; }

.qty-input {
    width: 64px;
    height: 44px;
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--ink);
    text-align: center;
    font: inherit;
    font-weight: 600;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; border-color: var(--ink); }

.stock-line {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: .88rem; color: var(--ink-muted);
}
.stock-line::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: var(--success);
}
.stock-line.low::before { background: var(--season-summer); }
.stock-line.out { color: var(--danger); }
.stock-line.out::before { background: var(--danger); }

.added-toast {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--success);
    font-size: .9rem; font-weight: 500;
    animation: rise var(--t-base) var(--ease-out);
}
@keyframes rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────── "Added to cart" toast ─────────────────
   Floating confirmation injected by daShop.cartToast (shop.js), shown
   whenever an item is added so the buyer gets clear feedback regardless of
   which page they're on. */
.cart-toast-stack {
    position: fixed;
    z-index: 1080;
    right: clamp(12px, 4vw, 28px);
    /* Clear the sticky nav bar so the toast doesn't cover the cart/account icons. */
    top: clamp(74px, 8vw, 92px);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    pointer-events: none;
    max-width: min(360px, calc(100vw - 24px));
}
.cart-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--hairline-2);
    border-left: 3px solid var(--success);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-3);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
    cursor: pointer;
}
.cart-toast.is-in  { opacity: 1; transform: translateY(0); }
.cart-toast.is-out { opacity: 0; transform: translateY(-12px); }
.cart-toast-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 22px; height: 22px;
    color: var(--success);
}
.cart-toast-icon svg { width: 100%; height: 100%; }
.cart-toast-body { display: flex; flex-direction: column; min-width: 0; }
.cart-toast-body strong { font-size: .92rem; }
.cart-toast-item {
    font-size: .82rem;
    color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-toast-link {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
}
.cart-toast-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .cart-toast,
    .cart-toast.is-in,
    .cart-toast.is-out { transition: opacity var(--t-fast) ease; transform: none; }
}

/* ─────────── Cart — broadcast brutalism ─────────────────
   Scoped overrides on .cart-shell so the same .btn-primary / .qty-stepper
   classes on other pages keep their existing styles. */
.cart-shell {
    --cart-red:      #ef4444;
    --cart-red-deep: #b91c1c;
    --cart-display:  'Big Shoulders Display', 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
    --cart-mono:     'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    max-width: 960px;
    margin: 0 auto;
}
.cart-shell h1 { margin-bottom: var(--s-6); }

/* Header */
.cart-shell .cart-header {
    margin-bottom: var(--s-7, 28px);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--hairline-2);
}
.cart-shell .cart-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--cart-mono);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.cart-shell .cart-chapter { color: var(--cart-red); font-weight: 700; }
.cart-shell .cart-meta { flex: 1 1 auto; min-width: 0; }
.cart-shell .cart-count-pill {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ink);
    box-shadow: 3px 3px 0 0 var(--cart-red);
    line-height: 1;
}
.cart-shell .cart-count-num {
    padding: 6px 10px;
    background: var(--ink);
    color: var(--surface);
    font-family: var(--cart-mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}
.cart-shell .cart-count-label {
    padding: 6px 10px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--cart-mono);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .18em;
}
.cart-shell h1.cart-title {
    position: relative;
    margin: 0;
    font-family: var(--cart-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.5rem, 7vw + .5rem, 5.5rem);
    line-height: .86;
    letter-spacing: -.015em;
    color: var(--ink);
    text-transform: uppercase;
}
.cart-shell .cart-title > span { position: relative; z-index: 1; display: inline-block; }
.cart-shell .cart-title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(239, 68, 68, .55);
    text-stroke: 1px rgba(239, 68, 68, .55);
    transform: translate(.14em, -.035em);
    z-index: 0;
    pointer-events: none;
}

/* Sharper cart rows */
.cart-shell .cart-table { margin-top: var(--s-5); }
.cart-shell .cart-row {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    box-shadow: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.cart-shell .cart-row:hover {
    border-color: var(--cart-red);
    box-shadow: 4px 4px 0 0 rgba(239, 68, 68, .15);
}
.cart-shell .cart-thumb { border-radius: 0; }
.cart-shell .cart-name {
    font-family: var(--cart-display);
    font-style: italic;
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: -.005em;
}
.cart-shell .cart-name:hover { color: var(--cart-red); }
/* Variant label ("BLACK · L"): mono caps with tracking — looks great on
   short strings of letters. */
.cart-shell .cart-info .muted.small {
    font-family: var(--cart-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* Unit price line: mono tabular nums, no caps / no tracking — currency +
   numbers + "/ τεμάχιο" need to read like a real price tag, not a label. */
.cart-shell .cart-unit {
    margin-top: 2px;
    font-family: var(--cart-mono);
    font-size: .78rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.cart-shell .cart-unit-sep {
    color: var(--cart-red);
    margin: 0 var(--s-1);
    font-weight: 700;
}
.cart-shell .cart-line-total {
    font-family: var(--cart-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* Qty stepper — sharp like product detail */
.cart-shell .qty-stepper {
    border-radius: 0;
    border: 1px solid var(--ink);
    overflow: hidden;
}
.cart-shell .qty-stepper button {
    border-radius: 0;
    font-family: var(--cart-mono);
    font-weight: 700;
}
.cart-shell .qty-stepper input,
.cart-shell .qty-stepper .qty-value {
    font-family: var(--cart-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Remove button — small icon with red hover */
.cart-shell .cart-row .btn-link {
    color: var(--ink-muted);
    transition: color .15s var(--ease-out);
}
.cart-shell .cart-row .btn-link:hover { color: var(--cart-red); }

/* Summary — black slab with mono labels.
   Background/text use literal dark/light values (not --ink / --surface)
   because those tokens flip with theme; we want this block to stay an
   absolute dark slab no matter what. */
.cart-shell .cart-summary {
    border-radius: 0;
    background: #0a0a0b;
    color: #f5f3ee;
    border: 0;
    box-shadow: 6px 6px 0 0 var(--cart-red);
    padding: var(--s-5) var(--s-6);
}
.cart-shell .cart-summary .muted,
.cart-shell .cart-summary .muted.small {
    color: rgba(255, 255, 255, .65);
    font-family: var(--cart-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.cart-shell .cart-total {
    font-family: var(--cart-mono);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0;
    color: #f5f3ee;
    font-variant-numeric: tabular-nums;
}

/* Empty state heading */
.cart-shell .empty-card h3 {
    font-family: var(--cart-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    text-transform: uppercase;
    letter-spacing: -.01em;
}

/* Cart actions row: "Keep shopping" stays subtle, "Checkout" gets the
   parallelogram red CTA from the hero. */
.cart-shell .cart-actions .btn:not(.btn-primary) {
    border-radius: 0;
    font-family: var(--cart-mono);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .82rem;
    border-color: var(--ink);
    color: var(--ink);
}
.cart-shell .cart-actions .btn:not(.btn-primary):hover {
    background: var(--ink);
    color: var(--surface);
}
.cart-shell .cart-actions .btn-primary {
    border-radius: 0;
    background: var(--cart-red);
    color: #fff;
    border: 0;
    font-family: var(--cart-display);
    font-style: italic;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: var(--s-4) clamp(var(--s-6), 3vw, var(--s-10));
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, .55);
    transition:
        transform   .2s var(--ease-out),
        background  .2s var(--ease-out),
        color       .2s var(--ease-out),
        box-shadow  .2s var(--ease-out);
}
.cart-shell .cart-actions .btn-primary:hover,
.cart-shell .cart-actions .btn-primary:focus-visible {
    transform: translate(-3px, -3px);
    background: #fff;
    color: var(--cart-red-deep);
    box-shadow: 12px 12px 0 0 rgba(0, 0, 0, .6);
    outline: none;
}
.cart-shell .cart-actions .btn-primary:active {
    transform: translate(0, 0);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .55);
}

/* Stock-changed alert — sharper, mono caps label */
.cart-shell .alert.alert-warning {
    border-radius: 0;
    border: 1px solid var(--cart-red);
    background: rgba(239, 68, 68, .08);
}
.cart-shell .alert.alert-warning strong {
    font-family: var(--cart-mono);
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cart-red);
}

@media (max-width: 720px) {
    .cart-shell h1.cart-title { font-size: clamp(2rem, 11vw, 3.5rem); }
    .cart-shell .cart-eyebrow { font-size: .68rem; letter-spacing: .18em; }
    .cart-shell .cart-count-pill { margin-left: auto; }
}

.cart-table {
    display: flex; flex-direction: column; gap: var(--s-3);
    margin: var(--s-6) 0 var(--s-8);
}
.cart-row {
    display: grid;
    grid-template-columns: 88px 1fr auto auto auto;
    gap: var(--s-5);
    align-items: center;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cart-row:hover { border-color: var(--hairline-2); box-shadow: var(--shadow-2); }
.cart-thumb {
    width: 88px; height: 88px;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--stone-100);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cart-name {
    font-weight: 600; color: var(--ink);
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.cart-name:hover { color: var(--accent); }
.cart-line-total {
    font-weight: 600; min-width: 90px; text-align: right;
    color: var(--ink); font-feature-settings: "tnum" 1;
}

.cart-summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--s-5) var(--s-5);
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
    font-size: 1.05rem;
    box-shadow: var(--shadow-2);
}
.cart-total {
    font-weight: 600; font-size: 1.4rem;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-feature-settings: "tnum" 1;
}
.cart-actions {
    display: flex; justify-content: space-between; gap: var(--s-3);
    margin-top: var(--s-6);
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .cart-row {
        grid-template-columns: 72px 1fr auto;
        grid-template-areas:
            "thumb info remove"
            "thumb qty  total";
        gap: var(--s-3) var(--s-4);
    }
    .cart-thumb { grid-area: thumb; width: 72px; height: 72px; }
    .cart-info { grid-area: info; }
    .cart-qty { grid-area: qty; justify-self: start; }
    .cart-line-total { grid-area: total; text-align: right; }
    .cart-row .btn-link { grid-area: remove; justify-self: end; }
}

/* ─────────── Admin (kept compatible, refined) ─────────── */
.admin-shell { max-width: 1100px; margin: 0 auto; }
.admin-shell.narrow { max-width: 720px; }
.admin-header {
    display: flex; justify-content: space-between; align-items: end;
    gap: var(--s-4);
    margin-bottom: var(--s-8);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--hairline);
}
.admin-header h1 { font-size: 1.8rem; margin: 0; }
.admin-header p { margin: var(--s-1) 0 0; color: var(--ink-muted); }

.table-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.admin-table th, .admin-table td {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}
.admin-table th {
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--stone-50);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background var(--t-fast); }
.admin-table tbody tr:hover { background: var(--stone-50); }
.thumb-cell { width: 60px; }
.thumb-cell img {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: var(--r-1);
}
.thumb-placeholder {
    width: 48px; height: 48px;
    background: var(--stone-100);
    border-radius: var(--r-1);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint); font-size: .75rem;
}
.actions { white-space: nowrap; vertical-align: middle; }
.actions .btn { vertical-align: middle; }
.actions > * + * { margin-left: var(--s-2); }
.badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 600;
}
.badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
}
.badge-active   { background: var(--success-soft); color: var(--success); }
.badge-inactive { background: var(--stone-100);    color: var(--ink-muted); }
.badge-warn     { background: rgba(217, 154, 63, .15); color: #8a5a14; }
.badge-danger   { background: var(--danger-soft); color: var(--danger); }
.badge-role {
    background: var(--accent-soft);
    color: var(--accent);
    margin-right: var(--s-1);
}
.badge-role::before { background: var(--accent); }

/* ─────────── Admin tabs ─────────── */
.admin-tabs {
    display: flex;
    gap: var(--s-1);
    margin: 0 0 var(--s-6);
    padding: var(--s-1);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    overflow-x: auto;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-2);
    color: var(--ink-muted);
    font-weight: 500;
    font-size: .94rem;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition:
        background var(--t-fast) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out),
        border-color var(--t-fast) var(--ease-in-out);
}
.admin-tab:hover {
    color: var(--ink);
    background: var(--surface);
}
.admin-tab.is-active {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--hairline-2);
    box-shadow: var(--shadow-1);
}
.admin-tab .icon { width: 1rem; height: 1rem; }
.admin-tab-badge {
    margin-left: var(--s-1);
    padding: 0 var(--s-2);
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

/* Admin stat block (top right of admin-header) */
.admin-header-actions {
    display: flex;
    align-items: end;
    gap: var(--s-4);
}
.admin-stat {
    text-align: right;
}
.admin-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-feature-settings: "tnum" 1;
}

/* User avatar in users table */
.user-avatar {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* Numeric column alignment */
.admin-table th.num,
.admin-table td.num { text-align: right; font-feature-settings: "tnum" 1; }

/* Per-row "..." menu (used in Admin Users) */
.actions-cell { width: 56px; }
.row-menu { position: relative; }
.row-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 32px; height: 32px;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary {
    background: var(--stone-100);
    color: var(--ink);
}
.row-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    padding: var(--s-1);
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-3);
    z-index: 60;
    animation: pop-in var(--t-base) var(--ease-out);
}
.row-menu-panel .menu-item { font-size: .88rem; padding: var(--s-2) var(--s-3); }
.row-menu-panel .menu-item .icon { width: .95rem; height: .95rem; }

/* Order rows are clickable */
.order-row { cursor: pointer; }
.order-row code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88rem;
    background: var(--stone-100);
    padding: 2px 6px;
    border-radius: var(--r-1);
}

/* Payment method tags (small inline badges) */
.payment-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--s-2);
    border-radius: var(--r-1);
    font-size: .75rem;
    font-weight: 600;
    background: var(--stone-100);
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0;
}
.payment-tag-card      { background: rgba(220, 38, 38, .12);  color: var(--brand-500); }
.payment-tag-paypal    { background: rgba(0, 64, 153, .12);   color: #0040A0; }
.payment-tag-applepay  { background: rgba(20, 20, 18, .08);   color: var(--ink); }
.payment-tag-googlepay { background: rgba(66, 133, 244, .14); color: #1a73e8; }

/* Status pills (covers all OrderStatus values) */
.status-pill {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    font-size: .76rem; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.status-pill::before {
    content: "";
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
}
.status-pill.s-pending   { background: var(--stone-100);                   color: var(--ink-muted); }
.status-pill.s-paid      { background: var(--accent-soft);                 color: var(--accent); }
.status-pill.s-shipped   { background: rgba(90, 124, 157, .14);            color: #2c4f74; }
.status-pill.s-delivered { background: var(--success-soft);                color: var(--success); }
.status-pill.s-cancelled { background: var(--stone-100);                   color: var(--ink-soft); }
.status-pill.s-refunded  { background: var(--danger-soft);                 color: var(--danger); }

/* Tab strip used on /admin/orders for status filter */
.status-tabs {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin: 0 0 var(--s-5);
}
.status-tabs .chip {
    border: 1px solid var(--hairline-2);
}

/* ─────────── Order detail (admin) ─────────── */
.order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
    margin-top: var(--s-6);
}
@media (max-width: 880px) {
    .order-detail-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

.order-detail-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
}
.order-detail-card h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 var(--s-2);
}
.order-detail-card .section-h4 { margin-top: var(--s-5); }
.order-detail-card .section-h4:first-child { margin-top: 0; }

/* Vertical timeline */
.timeline {
    list-style: none;
    margin: var(--s-3) 0 0;
    padding: 0 0 0 var(--s-5);
    border-left: 2px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.timeline li {
    position: relative;
    color: var(--ink-soft);
}
.timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--s-5) - 8px);
    top: 4px;
    width: 14px; height: 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--hairline-2);
}
.timeline li.is-done {
    color: var(--ink);
}
.timeline li.is-done::before {
    background: var(--accent);
    border-color: var(--accent);
}
.timeline li.is-current::before {
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.timeline li.is-error::before {
    background: var(--danger);
    border-color: var(--danger);
}
.timeline-label {
    font-weight: 600;
    color: var(--ink);
    font-size: .92rem;
}
.timeline-meta {
    color: var(--ink-muted);
    font-size: .82rem;
    font-feature-settings: "tnum" 1;
}
.timeline li.is-pending .timeline-label { color: var(--ink-muted); font-weight: 500; }

/* Action panel inside order detail */
.action-panel {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-top: var(--s-4);
}
.action-panel-card {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-4);
}
.action-panel-card h4 {
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin: 0 0 var(--s-2);
}
.action-panel-card p {
    margin: 0 0 var(--s-3);
    color: var(--ink-soft);
    font-size: .9rem;
}
.action-panel-card .form-actions {
    margin-top: var(--s-3);
    justify-content: flex-end;
}

/* Reuse: subtle bordered text/textarea for admin notes */
.admin-textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
}

/* ─────────── Order detail modal ─────────── */
.order-modal {
    max-width: 760px;
    padding: var(--s-6);
}
.order-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--hairline);
}
.order-modal-head h2 { margin: var(--s-1) 0; font-size: 1.2rem; font-family: var(--font-sans); }
.order-modal-head h2 code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--stone-100);
    padding: 2px 8px;
    border-radius: var(--r-1);
}

.order-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--s-6);
}
@media (max-width: 640px) {
    .order-modal-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

.order-section-title {
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin: 0 0 var(--s-3);
}

.order-items-list {
    list-style: none;
    margin: 0 0 var(--s-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.order-items-list li {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: var(--s-3);
    align-items: center;
}
.order-item-thumb {
    width: 48px; height: 48px;
    background: var(--stone-100);
    border-radius: var(--r-1);
    overflow: hidden;
}
.order-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-item-name { font-weight: 500; color: var(--ink); }
.order-item-total {
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: "tnum" 1;
}

.order-totals {
    margin: var(--s-5) 0 0;
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--hairline);
}
.order-totals > div {
    display: flex;
    justify-content: space-between;
    padding: var(--s-1) 0;
    color: var(--ink-soft);
    font-feature-settings: "tnum" 1;
}
.order-totals > div.total-row {
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
    color: var(--ink);
    font-weight: 600;
    font-size: 1.1rem;
}
.order-totals dt, .order-totals dd { margin: 0; }

.order-address {
    font-style: normal;
    line-height: 1.55;
    color: var(--ink-soft);
    background: var(--surface-2);
    padding: var(--s-4);
    border-radius: var(--r-2);
    border: 1px solid var(--hairline);
    margin-bottom: var(--s-2);
}
.order-address strong { color: var(--ink); display: inline-block; margin-bottom: var(--s-1); }

.order-payment {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-2);
}
.order-payment code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--stone-100);
    padding: 2px 6px;
    border-radius: var(--r-1);
}

/* Form layout */
.form-grid {
    display: flex; flex-direction: column; gap: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
}
.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .form-row.two-col { grid-template-columns: 1fr; } }
.visibility-toggle { display: flex; align-items: end; padding-bottom: var(--s-2); }
.image-uploader { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 600px) { .image-uploader { grid-template-columns: 1fr; } }

/* Admin gallery editor */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}
.gallery-grid.pending { opacity: .85; }
.gallery-tile {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    padding: var(--s-3);
}
.gallery-tile.is-removed { opacity: .45; outline: 1px dashed var(--danger); }
.gallery-thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-1);
    overflow: hidden;
    background: var(--stone-100);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-alt { font-size: .85rem; }
.gallery-tile-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gallery-tile-actions .btn { padding: var(--s-1) var(--s-2); }
.gallery-tile .badge {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--r-pill);
    padding: 0 var(--s-2);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.image-preview {
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--stone-100);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-2); padding: var(--s-2);
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-1); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--s-3); }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 20, 18, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-4);
    z-index: 100;
    animation: fade-in var(--t-base) var(--ease-out);
}
.modal-card {
    background: var(--surface);
    border-radius: var(--r-4);
    padding: var(--s-8);
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-4);
    animation: pop-in var(--t-base) var(--ease-out);
    border: 1px solid var(--hairline);
}
.modal-actions { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-6); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─────────── Checkout — broadcast brutalism ─────────────────
   Scoped to .checkout-shell so the same .btn-primary / form controls on
   other pages keep their existing styles. Note the original .checkout-*
   rules below still apply where they're not overridden — colour, summary
   layout, step divider, etc. The overrides below repaint surfaces and
   typography to match the rest of the funnel. */
.checkout-shell {
    --co-red:      #ef4444;
    --co-red-deep: #b91c1c;
    --co-display:  'Big Shoulders Display', 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
    --co-mono:     'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.checkout-head {
    margin-bottom: var(--s-7, 28px);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--hairline-2);
}
.checkout-shell .checkout-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--co-mono);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.checkout-shell .checkout-chapter { color: var(--co-red); font-weight: 700; }
.checkout-shell .checkout-meta { flex: 1 1 auto; min-width: 0; }

.checkout-shell h1.checkout-title {
    position: relative;
    margin: 0;
    font-family: var(--co-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.5rem, 7vw + .5rem, 5.5rem);
    line-height: .86;
    letter-spacing: -.015em;
    color: var(--ink);
    text-transform: uppercase;
}
.checkout-shell .checkout-title > span { position: relative; z-index: 1; display: inline-block; }
.checkout-shell .checkout-title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(239, 68, 68, .55);
    text-stroke: 1px rgba(239, 68, 68, .55);
    transform: translate(.14em, -.035em);
    z-index: 0;
    pointer-events: none;
}

/* Step indicator — sharp pill-free row, mono labels, red current step */
.checkout-shell .checkout-steps {
    border-radius: 0;
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    box-shadow: none;
    padding: var(--s-3) var(--s-5);
    font-family: var(--co-mono);
}
.checkout-shell .checkout-steps .step {
    font-family: var(--co-mono);
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.checkout-shell .checkout-steps .step-num {
    border-radius: 0;
    width: 26px;
    height: 26px;
    font-family: var(--co-mono);
    font-weight: 700;
    font-size: .85rem;
}
.checkout-shell .checkout-steps .step.is-current { color: var(--ink); }
.checkout-shell .checkout-steps .step.is-current .step-num {
    background: var(--co-red);
    color: #fff;
    border: 0;
    box-shadow: 3px 3px 0 0 rgba(20, 20, 18, .14);
}
.checkout-shell .checkout-steps .step.is-done { color: var(--co-red); }
.checkout-shell .checkout-steps .step.is-done .step-num {
    background: var(--ink);
    color: var(--surface);
    border: 0;
}

/* Form card surfaces — sharp */
.checkout-shell .checkout-card {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    box-shadow: none;
    background: var(--surface);
}
.checkout-shell .checkout-card h2 {
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(1.4rem, 2vw + .8rem, 1.9rem);
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0 0 var(--s-2);
}
.checkout-shell .checkout-card > p.muted {
    font-family: var(--co-mono);
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.checkout-shell .checkout-card .form-label {
    font-family: var(--co-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-muted);
}
.checkout-shell .checkout-card .form-control {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.checkout-shell .checkout-card .form-control:focus {
    border-color: var(--co-red);
    outline: none;
    box-shadow: 4px 4px 0 0 rgba(239, 68, 68, .18);
}

/* Address review card */
.checkout-shell .address-card {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
}
.checkout-shell .address-card-head {
    border-bottom: 1px solid var(--hairline-2);
}
.checkout-shell .address-card-head strong {
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

/* Order summary aside — sharp + broadcast type */
.checkout-shell .checkout-summary {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    box-shadow: 6px 6px 0 0 var(--co-red);
    background: var(--surface);
    padding: var(--s-5) var(--s-5);
}
.checkout-shell .summary-title {
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: -.005em;
    margin: 0 0 var(--s-4);
}
.checkout-shell .summary-row {
    font-family: var(--co-mono);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.checkout-shell .summary-row.discount-row { color: var(--co-red); }
.checkout-shell .summary-row.total-row {
    border-top: 1px solid var(--ink);
    padding-top: var(--s-3);
    margin-top: var(--s-2);
}
.checkout-shell .summary-row.total-row .cart-total {
    font-family: var(--co-mono);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink);
}
.checkout-shell .summary-row.tax-row { color: var(--ink-muted); }
.checkout-shell .summary-items .summary-name {
    font-family: var(--co-display);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    font-size: .98rem;
    letter-spacing: -.005em;
}
.checkout-shell .summary-items .summary-unit,
.checkout-shell .summary-items .summary-line-total {
    font-family: var(--co-mono);
    font-variant-numeric: tabular-nums;
}
.checkout-shell .summary-qty {
    border-radius: 0;
    background: var(--co-red);
    color: #fff;
    font-family: var(--co-mono);
    font-weight: 700;
}
.checkout-shell .summary-thumb img { border-radius: 0; }

/* Discount-code reveal */
.checkout-shell .discount-form summary {
    font-family: var(--co-mono);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--co-red);
    cursor: pointer;
}
.checkout-shell .discount-input-row .form-control {
    border-radius: 0;
    font-family: var(--co-mono);
}
.checkout-shell .discount-tag {
    border-radius: 0;
    background: rgba(239, 68, 68, .14);
    color: var(--co-red);
    font-family: var(--co-mono);
    font-weight: 700;
}

/* Payment tiles — sharp boxes, red border + red corner-tab on selection */
.checkout-shell .payment-tile {
    position: relative;
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    overflow: hidden;
    transition:
        border-color  .2s var(--ease-out),
        background    .2s var(--ease-out),
        transform     .2s var(--ease-out);
}
.checkout-shell .payment-tile::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--co-red);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(100%, -100%);
    transition: transform .25s var(--ease-out);
    pointer-events: none;
}
.checkout-shell .payment-tile:hover { border-color: var(--co-red); }
.checkout-shell .payment-tile:hover::after { transform: translate(0, 0); }
.checkout-shell .payment-tile.is-selected {
    border-color: var(--co-red);
    background: rgba(239, 68, 68, .06);
    box-shadow: 4px 4px 0 0 rgba(239, 68, 68, .18);
}
.checkout-shell .payment-tile.is-selected::after { transform: translate(0, 0); }
.checkout-shell .payment-title {
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.005em;
}
.checkout-shell .payment-sub {
    font-family: var(--co-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Continue / Pay buttons — parallelogram red CTA throughout checkout */
.checkout-shell .form-actions .btn-primary,
.checkout-shell .form-actions .btn-primary.btn-lg {
    border-radius: 0;
    background: var(--co-red);
    color: #fff;
    border: 0;
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: var(--s-3) clamp(var(--s-6), 3vw, var(--s-10));
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, .45);
    transition:
        transform   .2s var(--ease-out),
        background  .2s var(--ease-out),
        color       .2s var(--ease-out),
        box-shadow  .2s var(--ease-out);
}
.checkout-shell .form-actions .btn-primary:hover:not(:disabled),
.checkout-shell .form-actions .btn-primary.btn-lg:hover:not(:disabled),
.checkout-shell .form-actions .btn-primary:focus-visible:not(:disabled),
.checkout-shell .form-actions .btn-primary.btn-lg:focus-visible:not(:disabled) {
    transform: translate(-3px, -3px);
    background: #fff;
    color: var(--co-red-deep);
    box-shadow: 12px 12px 0 0 rgba(0, 0, 0, .5);
    outline: none;
}
.checkout-shell .form-actions .btn-primary:disabled {
    background: var(--stone-300);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .15);
    cursor: not-allowed;
}
/* The "← back" / "← edit address" secondary buttons get mono treatment */
.checkout-shell .form-actions .btn:not(.btn-primary) {
    border-radius: 0;
    font-family: var(--co-mono);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .82rem;
    border-color: var(--ink);
    color: var(--ink);
}
.checkout-shell .form-actions .btn:not(.btn-primary):hover {
    background: var(--ink);
    color: var(--surface);
}

/* Done card — celebrate with the same broadcast voice */
.checkout-shell .done-card {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
    box-shadow: 10px 10px 0 0 var(--co-red);
}
.checkout-shell .done-icon {
    border-radius: 0;
    background: var(--co-red);
}
.checkout-shell .done-card h2 {
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw + .5rem, 3rem);
    letter-spacing: -.01em;
}
.checkout-shell .done-meta dt {
    font-family: var(--co-mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.checkout-shell .done-meta dd {
    font-family: var(--co-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.checkout-shell .done-actions .btn-primary {
    border-radius: 0;
    background: var(--co-red);
    color: #fff;
    border: 0;
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, .45);
    padding: var(--s-3) var(--s-8);
    transition: transform .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.checkout-shell .done-actions .btn-primary:hover {
    transform: translate(-3px, -3px);
    background: #fff;
    color: var(--co-red-deep);
    box-shadow: 12px 12px 0 0 rgba(0, 0, 0, .5);
}

/* Stock-changed warning — sharp red */
.checkout-shell .alert.alert-warning {
    border-radius: 0;
    border: 1px solid var(--co-red);
    background: rgba(239, 68, 68, .08);
}
.checkout-shell .alert.alert-warning strong {
    font-family: var(--co-mono);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Empty cart prompt */
.checkout-shell .empty-card h3 {
    font-family: var(--co-display);
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -.01em;
}

@media (max-width: 720px) {
    .checkout-shell h1.checkout-title { font-size: clamp(2rem, 11vw, 3.5rem); }
    .checkout-shell .checkout-eyebrow { font-size: .68rem; letter-spacing: .18em; }
}

/* Step indicator */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    list-style: none;
    margin: 0 0 var(--s-8);
    padding: var(--s-3) var(--s-5);
    background: var(--glass);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-1);
    overflow-x: auto;
}
.checkout-steps .step {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-muted);
    font-size: .9rem;
    white-space: nowrap;
}
.checkout-steps .step-num {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--stone-100);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: .82rem;
    transition: background var(--t-base), color var(--t-base);
}
.checkout-steps .step.is-current { color: var(--ink); font-weight: 600; }
.checkout-steps .step.is-current .step-num {
    background: var(--ink);
    color: var(--bg);
}
.checkout-steps .step.is-done { color: var(--accent); }
.checkout-steps .step.is-done .step-num {
    background: var(--accent);
    color: var(--accent-ink);
}
.checkout-steps .step-divider {
    flex: 0 0 24px;
    height: 1px;
    background: var(--hairline-2);
}

/* Two-column layout: form + summary */
.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
}
@media (max-width: 880px) {
    .checkout-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Compact "Βήμα N / 4 · Label" indicator, phones only (the full dotted stepper
   is too wide on a narrow screen). Hidden on desktop. */
.checkout-step-mobile { display: none; }

/* ── Checkout: mobile polish ── */
@media (max-width: 600px) {
    /* Give phones more usable width by trimming the page side padding. */
    .app-main { padding-left: var(--s-4); padding-right: var(--s-4); }

    /* Title + its offset "ghost" stroke: shrink to the text width and tame the
       offset so the decorative layer no longer pokes past the screen edge
       (which the overflow guard was clipping). */
    .checkout-shell h1.checkout-title {
        display: inline-block;
        max-width: 100%;
        font-size: clamp(1.85rem, 9vw, 2.6rem);
    }
    .checkout-shell .checkout-title::before { transform: translate(3px, -2px); }

    /* Force a true full-width single column — stop anything constraining the
       checkout to a narrow strip with the background showing beside it. */
    .checkout-shell .checkout-grid { grid-template-columns: 1fr; }
    .checkout-shell .checkout-main,
    .checkout-shell .checkout-summary,
    .checkout-shell .checkout-card { width: 100%; max-width: 100%; min-width: 0; }

    /* Make the summary fit rather than overflow: drop sticky, replace the
       right-offset hard shadow (which pokes past the screen edge) with a flat
       one, and let long product names/labels wrap instead of pushing wide. */
    .checkout-shell .checkout-summary { position: static; top: auto; box-shadow: var(--shadow-1); }
    .checkout-shell .summary-name,
    .checkout-shell .summary-row,
    .checkout-shell .summary-item { overflow-wrap: anywhere; min-width: 0; }

    /* Soften the parallelogram CTA's big offset shadow so it doesn't extend
       past a full-width button on a narrow screen. */
    .checkout-shell .form-actions .btn-primary,
    .checkout-shell .form-actions .btn-primary.btn-lg { box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .4); }

    /* Swap the 4-circle stepper for the compact one-line caption. */
    .checkout-shell .checkout-steps { display: none; }
    .checkout-shell .checkout-step-mobile {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: var(--s-1) var(--s-3);
        margin: 0 0 var(--s-5);
        padding: var(--s-3) var(--s-4);
        background: var(--surface);
        border: 1px solid var(--hairline-2);
    }
    .checkout-step-mobile-num {
        font-family: var(--co-mono);
        font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
        font-weight: 700; color: var(--co-red);
    }
    .checkout-step-mobile-label {
        font-family: var(--co-display); font-style: italic; font-weight: 800;
        text-transform: uppercase; font-size: 1.15rem; line-height: 1; color: var(--ink);
    }

    /* Trim the heavy card padding to claw back content width. */
    .checkout-shell .checkout-card { padding: var(--s-5); }

    /* Stack the action buttons full-width, primary action on top. */
    .checkout-shell .checkout-card .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .checkout-shell .checkout-card .form-actions .btn,
    .checkout-shell .checkout-card .form-actions .btn-primary { width: 100%; }
}

.checkout-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-8);
    box-shadow: var(--shadow-1);
}
.checkout-card h2 { margin-bottom: var(--s-2); }
.checkout-card > p.muted { margin-bottom: var(--s-6); }

.field { margin-bottom: var(--s-4); min-width: 0; }
.field-row {
    display: grid;
    /* minmax(0, …) lets the columns shrink below the inputs' intrinsic width —
       without it, two form controls force the row wider than a phone screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}
.field-row .field { margin-bottom: 0; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Inputs/selects must never push past their column on a narrow screen. */
.checkout-shell .checkout-card .form-control { min-width: 0; max-width: 100%; }

.checkout-card .form-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-6);
    flex-wrap: wrap;
}

/* Address review card */
.address-card {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-5);
    margin: var(--s-4) 0 var(--s-6);
}
.address-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-3);
}
.address-card-head strong { font-size: 1.05rem; color: var(--ink); }
.address-card-body {
    color: var(--ink-soft);
    line-height: 1.6;
}
.address-card-body > div { word-break: break-word; }

/* Payment tiles */
.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    margin: var(--s-4) 0 var(--s-6);
}
@media (max-width: 600px) { .payment-grid { grid-template-columns: 1fr; } }

.payment-tile {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1.5px solid var(--hairline-2);
    border-radius: var(--r-3);
    cursor: pointer;
    text-align: left;
    transition:
        border-color var(--t-fast) var(--ease-in-out),
        background var(--t-fast) var(--ease-in-out),
        transform var(--t-fast) var(--ease-in-out),
        box-shadow var(--t-fast) var(--ease-in-out);
    font: inherit;
    color: inherit;
    position: relative;
}
.payment-tile:hover {
    border-color: var(--stone-300);
    background: var(--stone-50);
}
.payment-tile:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-color: var(--accent);
}
.payment-tile.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.payment-icon {
    display: grid; place-items: center;
    width: 44px; height: 32px;
    border-radius: var(--r-1);
    background: var(--stone-100);
    color: var(--ink);
    flex-shrink: 0;
}
.payment-icon svg { width: 24px; height: 24px; }
.payment-tile.is-selected .payment-icon {
    background: var(--surface);
}

.payment-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.payment-title { font-weight: 600; color: var(--ink); }
.payment-sub   { font-size: .82rem; color: var(--ink-muted); }

.payment-check {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
    flex-shrink: 0;
}
.payment-check svg { width: 13px; height: 13px; }
.payment-tile.is-selected .payment-check {
    opacity: 1;
    transform: scale(1);
}

.payment-details {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
    animation: rise var(--t-base) var(--ease-out);
}
.payment-details .field:last-child { margin-bottom: 0; }
.payment-redirect p { margin: 0 0 var(--s-2); color: var(--ink-soft); }
.payment-redirect p:last-child { margin: 0; }

/* PayPal Smart Buttons host */
.payment-paypal { padding: var(--s-4); }
.paypal-buttons-host {
    min-height: 56px;
    margin-top: var(--s-3);
}
.paypal-buttons-host[data-loading="true"]::before {
    content: "Loading PayPal…";
    display: block;
    color: var(--ink-muted);
    font-size: .88rem;
    text-align: center;
    padding: var(--s-3);
}
/* PayPal dressed up as the red Πληρωμή CTA. The styled "face" span is the visible
   button; the real PayPal button is overlaid transparently on top to take the
   click (opacity:0 keeps it clickable, unlike display/visibility:hidden). */
.checkout-shell .form-actions .paypal-cta {
    position: relative;
    display: inline-block;
    width: clamp(220px, 55%, 300px);
    align-self: center;
}
.checkout-shell .form-actions .paypal-cta-face {
    width: 100%;
    pointer-events: none; /* purely visual — the overlay receives the click */
}
.checkout-shell .form-actions .paypal-cta-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    opacity: 0;
    z-index: 2;
}
@media (max-width: 600px) {
    .checkout-shell .form-actions .paypal-cta { display: block; width: 100%; }
}

/* Google Pay button host */
.payment-googlepay { padding: var(--s-4); }
.googlepay-button-host {
    min-height: 48px;
    margin-top: var(--s-3);
    display: block;
}
.googlepay-button-host > .gpay-card-info-container,
.googlepay-button-host > div {
    width: 100% !important;
    max-width: 100%;
}

.demo-note {
    color: var(--ink-muted);
    margin: var(--s-3) 0 0;
    padding: var(--s-2) var(--s-3);
    background: var(--stone-100);
    border-radius: var(--r-2);
    border-left: 3px solid var(--season-summer);
}
.demo-note strong { color: var(--ink-soft); }

/* Order summary */
.checkout-summary {
    position: sticky;
    top: 88px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
}
.summary-title {
    margin: 0 0 var(--s-4);
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
}
.summary-items {
    list-style: none;
    margin: 0 0 var(--s-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.summary-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--s-3);
    align-items: center;
}
.summary-thumb {
    position: relative;
    width: 56px; height: 56px;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--stone-100);
}
.summary-thumb img { width: 100%; height: 100%; object-fit: cover; }
.summary-qty {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-pill);
    font-size: .72rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.summary-info { min-width: 0; }
.summary-name {
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.summary-line-total {
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: "tnum" 1;
}
.summary-sep {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: var(--s-4) 0;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s-1) 0;
    color: var(--ink-soft);
    font-feature-settings: "tnum" 1;
}
.summary-row.total-row {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline-2);
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
}

/* Done step */
.checkout-done {
    margin-top: var(--s-8);
}
.done-card {
    text-align: center;
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-4);
    padding: var(--s-12) var(--s-8);
    box-shadow: var(--shadow-3);
}
.done-icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 999px;
    margin: 0 auto var(--s-5);
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-2);
    animation: pop-in var(--t-slow) var(--ease-out);
}
.done-icon svg { width: 30px; height: 30px; }
.done-card h2 { margin-bottom: var(--s-2); }
.done-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    max-width: 600px;
    margin: var(--s-6) auto var(--s-6);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    text-align: left;
}
@media (max-width: 600px) {
    .done-meta { grid-template-columns: 1fr; gap: var(--s-3); }
}
.done-meta dt {
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-muted);
    margin-bottom: var(--s-1);
}
.done-meta dd {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    font-feature-settings: "tnum" 1;
}
.done-meta code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .92rem;
    background: var(--stone-100);
    padding: 2px 6px;
    border-radius: var(--r-1);
}
.done-actions { margin-top: var(--s-5); }

.validation-message { display: block; }

/* ─────────── Auth (Login / Register) ─────────── */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-12);
    align-items: center;
    min-height: calc(100dvh - 220px);
    margin: var(--s-6) 0;
}
@media (max-width: 880px) {
    .auth-shell {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}

.auth-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: var(--s-10) var(--s-8);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-3);
}
@media (max-width: 600px) {
    .auth-card {
        padding: var(--s-8) var(--s-5);
    }
}
.auth-card .eyebrow { margin-bottom: var(--s-3); }
.auth-card h1 {
    font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
    margin: 0 0 var(--s-2);
}
.auth-card .auth-sub {
    color: var(--ink-muted);
    margin: 0 0 var(--s-6);
}

.auth-form .field { margin-bottom: var(--s-4); }
.auth-form .field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.auth-form .form-check { gap: var(--s-2); cursor: pointer; }
.auth-form .form-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}
.auth-form .forgot-link {
    font-size: .88rem;
    color: var(--ink-muted);
}
.auth-form .forgot-link:hover { color: var(--accent); }

.auth-form .btn-primary {
    width: 100%;
    margin-top: var(--s-2);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-6) 0;
    color: var(--ink-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.auth-secondary {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.auth-secondary .btn { width: 100%; }

.auth-footer {
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--hairline);
    text-align: center;
    color: var(--ink-muted);
    font-size: .9rem;
}
.auth-footer a {
    color: var(--accent);
    font-weight: 500;
}
.auth-footer a:hover { color: var(--brand-700); }

/* Password input + show/hide toggle */
.password-field { position: relative; }
.password-field .form-control { padding-right: 44px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: var(--r-1);
    cursor: pointer;
    color: var(--ink-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.password-toggle:hover {
    background: var(--stone-100);
    color: var(--ink);
}
.password-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}
.password-toggle svg { width: 18px; height: 18px; }

/* Password requirements list — items animate to "met" as the user types */
.password-rules {
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2) var(--s-3);
    font-size: .82rem;
    color: var(--ink-muted);
}
@media (max-width: 460px) {
    .password-rules { grid-template-columns: 1fr; }
}
.password-rules li {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    transition: opacity var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
}
.password-rules li::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--hairline-2);
    transition: background var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
}
.password-rules li.is-met {
    color: var(--success);
    opacity: .55;
}
.password-rules li.is-met::before {
    background-color: var(--success);
    border-color: var(--success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.04);
}
.password-rules.is-all-met {
    /* Quiet success state when every rule is met. */
    opacity: .85;
}

/* Brand panel (right side on desktop) */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--s-12) var(--s-10);
    border-radius: var(--r-5);
    background: var(--glass-strong);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    isolation: isolate;
    min-height: 480px;
}
.auth-brand::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(28vmax 22vmax at 80% 100%, rgba(111, 174, 135, .35), transparent 65%),
        radial-gradient(20vmax 16vmax at 10% 0%,  rgba(217, 154, 63, .25), transparent 60%);
    filter: blur(24px);
    pointer-events: none;
}
.auth-brand .brand {
    margin-bottom: var(--s-8);
    font-size: 1.4rem;
}
.auth-brand .brand-logo {
    width: 40px; height: 40px;
}
.auth-brand h2 {
    font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem);
    margin: 0 0 var(--s-4);
    letter-spacing: -0.012em;
}
.auth-brand p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 42ch;
    margin-bottom: var(--s-6);
}
.auth-brand .feature-list {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.auth-brand .feature-list li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ink-soft);
    font-size: .94rem;
}
.auth-brand .feature-icon {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.auth-brand .feature-icon svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
    .auth-brand { display: none; }
}

/* Validation message styling tweak for auth */
.auth-form .validation-message {
    margin-top: var(--s-1);
    font-size: .82rem;
}

/* ─────────── Manage account — broadcast brutalism ─────────────────
   Same display + mono pair, same red accent, same hard edges as Home,
   Shop, ProductDetail, Cart, Checkout. Scoped to `.manage-shell` so
   nothing leaks. */
.manage-shell {
    --mg-red:      #ef4444;
    --mg-red-deep: #b91c1c;
    --mg-display:  'Big Shoulders Display', 'Anton', 'Bebas Neue', 'Oswald', sans-serif;
    --mg-mono:     'Space Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.manage-head {
    margin-bottom: var(--s-8);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--hairline-2);
}
.manage-shell .manage-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-family: var(--mg-mono);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.manage-shell .manage-chapter { color: var(--mg-red); font-weight: 700; }
.manage-shell .manage-meta { flex: 1 1 auto; min-width: 0; }

.manage-shell h1.manage-title {
    position: relative;
    margin: 0 0 var(--s-3);
    font-family: var(--mg-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.5rem, 7vw + .5rem, 5rem);
    line-height: .86;
    letter-spacing: -.015em;
    color: var(--ink);
    text-transform: uppercase;
}
.manage-shell .manage-title > span { position: relative; z-index: 1; display: inline-block; }
.manage-shell .manage-title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(239, 68, 68, .55);
    text-stroke: 1px rgba(239, 68, 68, .55);
    transform: translate(.14em, -.035em);
    z-index: 0;
    pointer-events: none;
}
.manage-shell .manage-subline {
    margin: 0;
    font-family: var(--mg-mono);
    font-size: .78rem;
    letter-spacing: .14em;
    color: var(--ink-muted);
    text-transform: none;
    max-width: 64ch;
    line-height: 1.55;
}

/* Two-column layout */
.manage-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
}
@media (max-width: 880px) {
    .manage-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Sidebar — sharp, mono labels */
.manage-side {
    position: sticky;
    top: 88px;
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    border-radius: 0;
    padding: var(--s-2);
    box-shadow: 4px 4px 0 0 rgba(20, 20, 18, .08);
}
@media (max-width: 880px) {
    .manage-side {
        position: static;
        padding: var(--s-1);
        overflow-x: auto;
    }
    .manage-side ul { flex-direction: row !important; }
    .manage-side li { flex-shrink: 0; }
}
.manage-side ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.manage-tab {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: 0;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--mg-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition:
        background  var(--t-fast) var(--ease-out),
        color       var(--t-fast) var(--ease-out),
        border-left var(--t-fast) var(--ease-out);
    white-space: nowrap;
    border-left: 3px solid transparent;
}
.manage-tab:hover {
    background: rgba(239, 68, 68, .06);
    color: var(--mg-red);
}
.manage-tab.active {
    background: var(--ink);
    color: var(--surface);
    border-left-color: var(--mg-red);
    box-shadow: none;
}
.manage-tab .icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Content card */
.manage-card {
    background: var(--surface);
    border: 1px solid var(--hairline-2);
    border-radius: 0;
    padding: var(--s-8);
    box-shadow: 6px 6px 0 0 rgba(20, 20, 18, .08);
}
@media (max-width: 600px) {
    .manage-card { padding: var(--s-5); }
}
.manage-card h2 {
    font-family: var(--mg-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
    font-size: clamp(1.4rem, 2vw + .8rem, 1.9rem);
    margin: 0 0 var(--s-2);
    color: var(--ink);
}
.manage-card .section-sub {
    font-family: var(--mg-mono);
    color: var(--ink-muted);
    margin: 0 0 var(--s-6);
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.manage-card .section-h4 {
    font-family: var(--mg-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.005em;
    font-size: 1.2rem;
    margin: 0 0 var(--s-4);
}

/* Form labels + controls inside the manage card */
.manage-card .form-label {
    font-family: var(--mg-mono);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.manage-card .form-control {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.manage-card .form-control:focus {
    border-color: var(--mg-red);
    outline: none;
    box-shadow: 4px 4px 0 0 rgba(239, 68, 68, .18);
}
.manage-card .form-control:disabled {
    background: var(--surface-2);
    color: var(--ink-muted);
}

/* Email-verified inline pill — mono caps */
.manage-card .input-group { gap: 0; }
.manage-card .input-group-suffix {
    border-radius: 0;
    background: var(--ink);
    color: var(--surface);
    border: 1px solid var(--ink);
    padding: var(--s-2) var(--s-3);
    font-family: var(--mg-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Primary CTA in manage forms → parallelogram red */
.manage-card .form-actions .btn-primary,
.manage-card .form-actions .btn-primary.btn-lg {
    border-radius: 0;
    background: var(--mg-red);
    color: #fff;
    border: 0;
    font-family: var(--mg-display);
    font-style: italic;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: var(--s-3) clamp(var(--s-6), 3vw, var(--s-9));
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    box-shadow: 6px 6px 0 0 rgba(20, 20, 18, .12);
    transition:
        transform   .2s var(--ease-out),
        background  .2s var(--ease-out),
        color       .2s var(--ease-out),
        box-shadow  .2s var(--ease-out);
}
.manage-card .form-actions .btn-primary:hover:not(:disabled),
.manage-card .form-actions .btn-primary:focus-visible:not(:disabled) {
    transform: translate(-2px, -2px);
    background: var(--mg-red-deep);
    box-shadow: 9px 9px 0 0 rgba(20, 20, 18, .14);
    outline: none;
}

/* Secondary buttons + danger */
.manage-card .btn:not(.btn-primary):not(.btn-danger) {
    border-radius: 0;
    font-family: var(--mg-mono);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .76rem;
}
.manage-card .btn.btn-danger {
    border-radius: 0;
    background: var(--ink);
    color: var(--surface);
    border: 0;
    font-family: var(--mg-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: var(--s-3) var(--s-6);
    box-shadow: 6px 6px 0 0 var(--mg-red);
    transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.manage-card .btn.btn-danger:hover {
    transform: translate(-2px, -2px);
    background: var(--mg-red);
    box-shadow: 9px 9px 0 0 rgba(20, 20, 18, .2);
}

/* Action-list rows (used for 2FA, externals, passkeys panels) */
.manage-card .action-list {
    border-radius: 0;
}
.manage-card .action-row {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    background: var(--surface);
}
.manage-card .action-row .row-title {
    font-family: var(--mg-display);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.005em;
    font-size: 1rem;
    color: var(--ink);
}
.manage-card .action-row .row-desc {
    font-family: var(--mg-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Section divider */
.manage-card .section-divider {
    border: 0;
    border-top: 1px solid var(--hairline-2);
    margin: var(--s-8) 0;
}

/* Callouts inside the manage card */
.manage-card .callout {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
}
.manage-card .callout-warning {
    border-color: var(--mg-red);
    background: rgba(239, 68, 68, .08);
}
.manage-card .callout-warning .callout-icon { background: var(--mg-red); color: #fff; border-radius: 0; }
.manage-card .callout-danger {
    border-color: var(--mg-red);
    background: rgba(239, 68, 68, .12);
}
.manage-card .callout-danger .callout-icon { background: var(--mg-red); color: #fff; border-radius: 0; }
.manage-card .callout-info {
    border-color: var(--ink);
    background: var(--surface-2);
}
.manage-card .callout-info .callout-icon { background: var(--ink); color: var(--surface); border-radius: 0; }
.manage-card .callout strong {
    font-family: var(--mg-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Password rules list — mono utility look */
.manage-card .password-rules {
    list-style: none;
    padding: 0;
    margin: var(--s-2) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s-1) var(--s-3);
}
.manage-card .password-rules li {
    font-family: var(--mg-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-left: var(--s-3);
    position: relative;
}
.manage-card .password-rules li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--mg-red);
    font-weight: 700;
}

/* Recovery codes grid */
.manage-card .recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--s-2);
    margin: var(--s-4) 0;
}
.manage-card .recovery-code {
    border-radius: 0;
    border: 1px solid var(--ink);
    background: var(--surface);
    padding: var(--s-3);
    font-family: var(--mg-mono);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .15em;
    text-align: center;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Account-Orders details cards */
.manage-shell .user-order {
    border-radius: 0;
    border: 1px solid var(--hairline-2);
    box-shadow: none;
}
.manage-shell .user-order summary code,
.manage-shell .user-order .col-total {
    font-family: var(--mg-mono);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .manage-shell h1.manage-title { font-size: clamp(2rem, 11vw, 3.4rem); }
    .manage-shell .manage-eyebrow { font-size: .68rem; letter-spacing: .18em; }
}

/* User-side order history list */
.user-orders {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.user-order {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.user-order[open] { border-color: var(--hairline-2); box-shadow: var(--shadow-2); }
.user-order > summary {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-4) var(--s-5);
    cursor: pointer;
    list-style: none;
}
.user-order > summary::-webkit-details-marker { display: none; }
.user-order > summary:hover { background: var(--stone-50); }
@media (max-width: 700px) {
    .user-order > summary {
        grid-template-columns: 1fr auto;
        gap: var(--s-2) var(--s-3);
    }
    .user-order .col-payment { display: none; }
}
.user-order .col-ref code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9rem;
    background: var(--stone-100);
    padding: 2px 8px;
    border-radius: var(--r-1);
}
.user-order .col-ref .small { display: block; margin-top: 2px; color: var(--ink-muted); }
.user-order .col-total {
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: "tnum" 1;
    text-align: right;
}
.user-order .chevron {
    width: 18px; height: 18px;
    color: var(--ink-muted);
    transition: transform var(--t-base) var(--ease-out);
}
.user-order[open] .chevron { transform: rotate(180deg); }

.user-order-body {
    padding: var(--s-5);
    border-top: 1px solid var(--hairline);
    background: var(--surface-2);
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-6);
}
@media (max-width: 700px) {
    .user-order-body { grid-template-columns: 1fr; gap: var(--s-5); }
}
.user-order-body section h4 {
    font-family: var(--font-sans);
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin: 0 0 var(--s-3);
}

.empty-orders {
    background: var(--glass);
    border: 1px dashed var(--hairline-2);
    border-radius: var(--r-4);
    padding: var(--s-12) var(--s-5);
    text-align: center;
    color: var(--ink-soft);
}
.empty-orders h3 { color: var(--ink); margin: 0 0 var(--s-2); }
.empty-orders p { margin: 0 0 var(--s-5); }

/* ─────────── Manage subpages — shared bits ─────────── */

/* Vertical "rows of actions" used on TwoFactor / Personal Data / Passkeys */
.action-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: var(--s-2) 0 0;
}
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    flex-wrap: wrap;
}
.action-row .row-info { flex: 1; min-width: 240px; }
.action-row .row-info .row-title {
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--s-1);
}
.action-row .row-info .row-desc {
    color: var(--ink-muted);
    font-size: .9rem;
    margin: 0;
    max-width: 56ch;
}
.action-row .row-controls {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Section divider between groups inside a manage card */
.section-divider {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: var(--s-8) 0 var(--s-6);
}
.section-h4 {
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin: 0 0 var(--s-3);
}

/* Compact alert with icon column */
.callout {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-3);
    margin-bottom: var(--s-5);
    font-size: .92rem;
    line-height: 1.55;
}
.callout-icon {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 999px;
    flex-shrink: 0;
}
.callout-icon svg { width: 16px; height: 16px; }
.callout-info    { background: var(--accent-soft); color: var(--brand-700); }
.callout-info    .callout-icon { background: var(--accent); color: var(--accent-ink); }
.callout-warning { background: rgba(217, 154, 63, .12); color: #6e4310; }
.callout-warning .callout-icon { background: var(--season-summer); color: #2a1c00; }
.callout-danger  { background: var(--danger-soft); color: #7a1a14; }
.callout-danger  .callout-icon { background: var(--danger); color: #fff; }
.callout p { margin: 0 0 var(--s-1); color: inherit; }
.callout p:last-child { margin: 0; }
.callout strong { color: inherit; }
.callout a { color: inherit; text-decoration: underline; }

/* Email confirmation pill rendered inline with the disabled email input */
.input-group {
    position: relative;
}
.input-group .form-control { padding-right: 100px; }
.input-group-suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 4px var(--s-2);
    background: var(--success-soft);
    color: var(--success);
    font-size: .75rem;
    font-weight: 600;
    border-radius: var(--r-pill);
}
.input-group-suffix svg { width: 12px; height: 12px; }

/* Auth code key (the shared TOTP secret) */
.code-key {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .95rem;
    background: var(--stone-100);
    color: var(--ink);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--hairline-2);
    letter-spacing: .04em;
    word-break: break-all;
}

/* Recovery codes grid */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
    margin: var(--s-4) 0;
}
@media (max-width: 480px) {
    .recovery-codes { grid-template-columns: 1fr; }
}
.recovery-code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .92rem;
    background: var(--stone-100);
    color: var(--ink);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--hairline);
    text-align: center;
    user-select: all;
}

/* Blazor error UI */
.blazor-error-boundary {
    background: var(--danger);
    padding: var(--s-4);
    color: #fff;
    border-radius: var(--r-2);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ─────────── Public order lookup (/orders/lookup) ─────────── */
.lookup-shell { padding-block: var(--s-6); }
.lookup-header { margin-bottom: var(--s-6); }
.lookup-header h1 { margin: var(--s-2) 0 var(--s-3); }
.lookup-header code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--stone-100);
    padding: 1px 6px;
    border-radius: var(--r-1);
    font-size: .85em;
}

.lookup-form { margin-top: var(--s-4); }

.lookup-result {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
}
.lookup-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
    flex-wrap: wrap;
}
.lookup-result-head .ref {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 600;
}
.lookup-result h2 {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.05rem;
    margin: var(--s-6) 0 var(--s-3);
    color: var(--ink);
}
.lookup-result .form-actions { margin-top: var(--s-5); justify-content: flex-start; }

.tracking-card {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--r-2);
    color: var(--ink);
}
.tracking-card .tracking-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: var(--s-1);
}
.tracking-card code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--surface);
    padding: 2px 6px;
    border-radius: var(--r-1);
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: var(--shadow-3);
    display: none;
    left: 0;
    padding: var(--s-3) var(--s-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--s-4); top: var(--s-2); }