/* =====================================================================
   NINK LIGHTING - app.css
   Visual foundation, DESIGN-SYSTEM.md v2. Navy (deep, cold-blue near-
   black) is the primary dark family; Brass remains the sole warm accent,
   reading as light against a cooler field. Paper stays the light family.
   ===================================================================== */

/* ---- 1. Design tokens ---- */
:root {
    /* ---- Canonical Nink Design Tokens (docs/Design System.md) ---- */
    --nink-bg:           #FBF7F0;
    --nink-surface:      #FFFDF9;
    --nink-surface-card: #FFFFFF;
    --nink-surface-hover:#F6EFE5;
    --nink-navy:         #071D3A;
    --nink-navy-soft:    #16304F;
    --nink-navy-deep:    #051429;
    --nink-orange:       #F35A16;
    --nink-orange-hover: #DE4C0B;
    --nink-orange-soft:  #FFE8DA;
    --nink-orange-glow:  rgba(243, 90, 22, 0.25);
    --nink-text:         #111827;
    --nink-muted:        #6F7782;
    --nink-muted-light:  #9CA3AF;
    --nink-border:       #E9E1D7;
    --nink-border-light: #F3EDE4;
    --nink-success:      #2F9E62;
    --nink-warning:      #D98A10;

    --radius-sm:         10px;
    --radius-md:         16px;
    --radius-lg:         24px;
    --radius-pill:       999px;

    --shadow-soft:       0 8px 24px rgba(7, 29, 58, 0.08);
    --shadow-card:       0 10px 30px rgba(7, 29, 58, 0.10);
    --shadow-float:      0 14px 40px rgba(7, 29, 58, 0.12);
    --shadow-neu-raised: 3px 3px 8px rgba(7, 29, 58, 0.06), -3px -3px 8px rgba(255, 255, 255, 0.9);
    --shadow-neu-pressed:inset 2px 2px 5px rgba(7, 29, 58, 0.10), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
    --shadow-neu-button: 0 4px 14px rgba(243, 90, 22, 0.3);

    /* Navy family (DESIGN-SYSTEM.md §1.1) - legacy compatibility */
    --navy:   #05070D;
    --navy-2: #0A101E;
    --navy-3: #101A2E;

    /* Brass accent (unchanged - DESIGN-SYSTEM.md §1.1) */
    --brass:        #C99A46;
    --brass-bright: #E7BE6A;
    --brass-deep:   #8A6329; /* darkened from #A67C34 - the lighter value read at ~3.6:1 on Paper, failing WCAG AA (4.5:1) for the small eyebrow/label/price text that uses it; this value holds the same brass hue at ~5:1 */

    /* Light reading surfaces (unchanged) */
    --paper:   #FBF8F2;
    --paper-2: #F1EADD;

    /* Text */
    --text:            #1B1710;
    --text-muted:      #6E6555;
    --text-invert:     #F4EEE2;
    --text-invert-mut: #B9AE97;

    /* Lines */
    --line:      #E4DBC9;
    --line-dark: rgba(231, 190, 106, 0.16);

    /* Supporting tokens (DESIGN-SYSTEM.md §1.2) - gaps for tactile UI */
    --glass-panel:  rgba(5, 7, 13, 0.7);
    --glass-border: rgba(231, 190, 106, 0.18);
    --track-recess: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    --glow-brass:   rgba(231, 190, 106, 0.5);
    --success-light:     #7FA66B;
    --attention-light:   #C97B46;
    --attention-deep:    #8C4A1A;
    --unavailable-light: #8A8275;

    /* Type families (DESIGN-SYSTEM.md §2.1) */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Type ramp (DESIGN-SYSTEM.md §2.2) - sizes only; each level's weight/
       line-height/family lives on its utility class in §1c below. */
    --fs-display-xl: clamp(2.75rem, 2vw + 2.25rem, 6rem);     /* ~44px → 96px */
    --fs-display-l:  clamp(2.1rem, 1.6vw + 1.7rem, 3.5rem);   /* ~34px → 56px */
    --fs-display-m:  clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);  /* ~28px → 40px */
    --fs-heading:    clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem); /* 20px → 24px */
    --fs-body:       1rem;      /* 16px */
    --fs-body-lg:    1.125rem;  /* 18px, desktop-only long-form variant */
    --fs-meta:       0.8125rem; /* ~13px */
    --fs-interface:  0.9375rem; /* ~15px */

    /* Spacing scale (DESIGN-SYSTEM.md §3.2) - 8px base unit */
    --sp-4:   0.25rem;
    --sp-8:   0.5rem;
    --sp-12:  0.75rem;
    --sp-16:  1rem;
    --sp-24:  1.5rem;
    --sp-32:  2rem;
    --sp-48:  3rem;
    --sp-64:  4rem;
    --sp-96:  6rem;
    --sp-128: 8rem;
    --sp-192: 12rem;

    /* Legacy spacing aliases (kept so existing layouts don't shift until
       each page is rebuilt) - all now resolve onto the §3.2 scale above.
       Only --space-4 nudges (40px → 48px) to land back on-scale. */
    --space-1: var(--sp-8);
    --space-2: var(--sp-16);
    --space-3: var(--sp-24);
    --space-4: var(--sp-48);
    --space-5: var(--sp-64);
    --space-6: var(--sp-96);
    --space-7: var(--sp-128);

    --radius:    14px;
    --radius-sm: 9px;
    --radius-lg: 26px;
    --maxw:      1140px;
    --maxw-wide: 1320px;

    --shadow: 0 18px 50px -24px rgba(5, 7, 13, 0.55);

    /* Tactile Layer - neumorphic surface tokens (DESIGN-SYSTEM.md §4.1).
       Genuine dual shadow-based neumorphism (the spec's preferred method
       where box-shadow is available, over the border-approximation
       fallback) - one raised/pressed pair per surface family (Paper-based
       light Tactile surfaces, Navy-based dark ones). */
    --neu-base:      var(--paper-2);
    --neu-base-dark: var(--navy-2);
    --neu-raised:        6px 6px 14px rgba(5, 7, 13, 0.10), -6px -6px 14px rgba(255, 255, 255, 0.65);
    --neu-raised-dark:   6px 6px 14px rgba(0, 0, 0, 0.4), -6px -6px 14px rgba(255, 255, 255, 0.03);
    --neu-pressed:       inset 3px 3px 8px rgba(5, 7, 13, 0.14), inset -3px -3px 8px rgba(255, 255, 255, 0.55);
    --neu-pressed-dark:  inset 3px 3px 8px rgba(0, 0, 0, 0.45), inset -3px -3px 8px rgba(255, 255, 255, 0.02);

    /* Kept as aliases - nothing referenced these yet, but avoid a second
       naming scheme for the same technique. */
    --shadow-tactile-out: var(--neu-raised);
    --shadow-tactile-in:  var(--neu-pressed);
    --shadow-tactile-out-dark: var(--neu-raised-dark);
    --shadow-tactile-in-dark:  var(--neu-pressed-dark);

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- 1b. Icons ---- */
.icon { width: 1.2em; height: 1.2em; flex: none; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }

/* ---- 2. Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Backstop, not a fix in itself - any element that genuinely
       overflows should still be found and corrected at the source. */
    overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-2); }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: var(--text-invert);
    padding: 0.6rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; border-radius: 6px; }

:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 2px;
}

/* ---- 3. Brand mark ---- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--text);
}
.brand__mark {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass-deep) 70%);
    box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.15), 0 0 14px 2px rgba(231, 190, 106, 0.4);
    flex: none;
}
.brand__word { font-weight: 600; }
.brand__word-thin { font-weight: 400; color: var(--text-muted); }
/* .brand--footer sits on the dark navy footer, where --text-muted (tuned
   for Paper backgrounds) fails contrast - use the footer's own light-on-dark
   muted token instead. */
.brand--footer .brand__word-thin { color: var(--text-invert-mut); }
/* Admin-uploaded full logo image (site_logo()) - replaces the mark+word
   pair entirely when set, same slot, same baseline. Larger on desktop
   (header is min-height:70px, plenty of headroom) - 28px read small
   against the header/footer's actual width once a real wordmark image
   replaced the compact mark+text fallback these sizes were tuned for. */
.brand__logo-img { display: block; height: 28px; width: auto; }
@media (min-width: 641px) {
    .brand__logo-img { height: 38px; }
}

/* ---- 4. Header / nav (DESIGN-SYSTEM.md §7) ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    border-bottom: 1px solid var(--line);
    isolation: isolate;
}
/* The blur lives on a pseudo-element, not .site-header itself, because
   backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants - which broke the full-screen menu overlay
   (it was sizing to the header's box instead of the viewport). */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 70px;
}

/* Float-then-solidify - hero pages only (header.php's $heroFloat flag).
   Starts fully transparent over the hero photo/video; a scroll listener
   (app.js) adds .is-solid once the user scrolls past the hero. */
.site-header--float {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent; border-bottom-color: transparent;
    transition: background 250ms var(--ease), border-color 250ms ease;
}
.site-header--float::before { content: none; }
.site-header--float .brand,
.site-header--float .brand__word-thin,
.site-header--float .menu-toggle { color: var(--text-invert); }
.site-header--float .brand__word-thin { opacity: 0.7; }
.site-header--float.is-solid { background: var(--navy); border-bottom-color: var(--glass-border); }

/* Nav bar cluster - glow pill + three-stroke icon read as one grouped
   control on the right side of the header (Fix 2). Gap kept tight on
   purpose so the two feel adjacent, not like separate nav rows. */
.nav-bar { display: flex; align-items: center; gap: 10px; }

/* Floating glow nav pill - a fixed dark surface regardless of float/
   solid header state, so it never needs its own float-mode colour flip. */
.glow-pill {
    position: relative; isolation: isolate;
    display: flex; align-items: center; gap: 2px;
    background: var(--navy-2); border-radius: 9999px; padding: 4px;
}
/* Ambient backlight the pill quietly gives off, not a spotlight onto the
   page below it - centered on the pill in both axes, sized close to the
   pill's own footprint (inset expands evenly on all four sides, so it
   scales with whatever the pill's actual rendered size is), and behind
   the pill's own surface in stacking order. */
.glow-pill__glow {
    position: absolute; z-index: -1;
    inset: -16px;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(231, 190, 106, 0.2), transparent 70%);
    pointer-events: none;
}
.glow-pill__item {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px; border-radius: 9999px;
    text-decoration: none; color: #8892A3;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease;
}
.glow-pill__item .icon { width: 1rem; height: 1rem; color: #8892A3; flex: none; transition: color 150ms ease; }
.glow-pill__item:not(.is-active):hover { color: var(--paper); }
.glow-pill__item:not(.is-active):hover .icon { color: var(--paper); }
.glow-pill__item.is-active { background: #111E24; }
.glow-pill__item.is-active .icon { color: var(--brass-bright); }
.glow-pill__item.is-active span { color: var(--paper); font-weight: 600; }

/* Menu icon inside the pill (VISUAL-DIRECTION.md §2 v5) - a thin divider
   then the icon, both sized/coloured to match the pill's own items
   rather than the standalone header-icon treatment .menu-toggle normally
   gets. Declared after .site-header--float .menu-toggle (§4 above) so it
   wins the cascade at equal specificity - the icon is always inside this
   constant-dark-background pill now, so it must never take on the
   float/solid header's colour-flip behaviour. */
.glow-pill__divider { width: 1px; align-self: stretch; margin-block: 8px; background: rgba(136, 146, 163, 0.3); flex: none; }
.glow-pill .menu-toggle {
    /* box-sizing:border-box is a global reset (§0) - these are the FULL
       button box including padding, not the bar-icon's own size, which
       collapsed to 0x0 (width:100% of a negative content box) when this
       first tried to set icon-only dimensions directly. 40x34 padding
       10px/12px works out to a 16x14 icon, matching the intended glyph
       size at the pill's own tap-target rhythm. */
    width: 40px; height: 34px; gap: 3px;
    padding: 10px 12px;
    color: #8892A3;
}
.glow-pill .menu-toggle:hover { color: var(--paper); }

/* Below phone width, the header is logo-only (§7 "v4, corrected: quick-
   access bottom bar") - the quick-nav pill moves out entirely, replaced
   by .nink-bottom-nav below (fixed to the viewport bottom, not fighting the
   logo for header width). .menu-toggle gets the same treatment further
   down, right after its own definition - it must come after that rule
   in source order or the later rule wins the cascade and silently
   un-hides it regardless of this media query. */
@media (max-width: 640px) {
    .glow-pill { display: none; }
}

@media (max-width: 420px) {
    .brand { font-size: 1.05rem; }
}

/* Fixed bottom nav body clearance (<768px where .nink-bottom-nav is displayed) */
@media (max-width: 767px) {
    body {
        padding-bottom: var(--bottom-nav-height, calc(64px + env(safe-area-inset-bottom, 10px)));
    }
    .nink-step-nav,
    #askNinkHomeForm button[type="submit"],
    #askNinkPageForm button[type="submit"] {
        scroll-margin-bottom: 90px;
    }
}

/* Three-stroke menu icon - the single menu affordance, desktop and
   mobile, dark and light surfaces (§7). Never morphs into an ×; the
   full-screen overlay it opens carries its own close control. */
.menu-toggle {
    display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 5px; width: 28px; height: 24px; padding: 0; border: none; background: none;
    color: var(--text); cursor: pointer;
    transition: color 120ms ease-out;
}
.menu-toggle:hover { color: var(--brass-bright); }
.menu-toggle__bar { display: block; width: 100%; height: 1.5px; background: currentColor; border-radius: 1px; }
@media (max-width: 640px) {
    .menu-toggle { display: none; }
}

/* Nav drawer - right-anchored, dark navy drawer language (Sections 1 & 3) */
.nav-drawer-scrim {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(2, 3, 7, 0.55);
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}
.nav-drawer-scrim.is-open { opacity: 1; visibility: visible; }

.nav-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1002;
    width: 78%; min-width: 280px; max-width: 400px;
    background: var(--navy-2); color: var(--text-invert);
    display: flex; flex-direction: column;
    padding: var(--sp-24) var(--sp-20) calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 16px));
    box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 280ms var(--ease), visibility 280ms var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.nav-drawer.is-open { transform: translateX(0); visibility: visible; }

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-bottom: var(--sp-12);
}

.nav-drawer__activity-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    background: #111E24;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill, 9999px);
    color: var(--text-invert);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    min-height: 44px;
    box-shadow: var(--neu-raised-dark);
}

.nav-drawer__activity-btn:hover {
    background: #182A33;
    border-color: rgba(235, 90, 30, 0.4);
    color: var(--text-invert);
}

.nav-drawer__activity-btn:focus-visible {
    outline: 2px solid var(--nink-orange);
    outline-offset: 2px;
}

.nav-drawer__activity-btn .nink-header__activity-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--nink-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(233, 225, 215, 0.9);
}

.nav-drawer__activity-btn .nink-header__activity-icon-wrap .icon {
    width: 17px;
    height: 17px;
}

.nav-drawer__activity-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nav-drawer__activity-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-invert);
    line-height: 1.2;
}

.nav-drawer__activity-sub {
    font-size: 0.72rem;
    color: #8892A3;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-drawer__close {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text-invert-mut); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nav-drawer__close:hover { color: var(--text-invert); background: var(--navy-3); }

.nav-drawer__body { display: flex; flex-direction: column; gap: var(--sp-12); flex: 1 0 auto; }
.nav-drawer__section { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer__section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    color: #5C6577; text-transform: uppercase; margin-bottom: 4px;
    padding-left: var(--sp-16);
}
.nav-drawer__divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: var(--sp-12) 0; }

.nav-drawer__links { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer__item {
    display: flex; align-items: center; gap: var(--sp-16);
    width: 100%; padding: 11px var(--sp-16); border-radius: 14px;
    text-decoration: none; color: #8892A3;
    transition: color 150ms ease, background 150ms ease;
}
.nav-drawer__item:hover { color: #B7BECB; }
.nav-drawer__item .icon { color: #5C6577; width: 1.15rem; height: 1.15rem; flex: none; transition: color 150ms ease; }
.nav-drawer__item:hover .icon { color: #7A8494; }
.nav-drawer__item span { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); }

.nav-drawer__item.is-active {
    background: #111E24;
    box-shadow: var(--neu-raised-dark);
}
.nav-drawer__item.is-active:hover { color: #8892A3; }
.nav-drawer__item.is-active .icon { color: var(--brass-bright); }
.nav-drawer__item.is-active span { color: var(--paper); font-weight: 600; }

.nav-drawer__footer { margin-top: auto; padding-top: var(--sp-20); }
.nav-drawer__cta { width: 100%; justify-content: center; }

/* Activity Panel Shell (Customer Continuity - Section 2) */
.nink-activity-scrim {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(5, 7, 13, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}
.nink-activity-scrim.is-open { opacity: 1; visibility: visible; }

.nink-activity-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1002;
    width: 86%; min-width: 290px; max-width: 400px;
    background: var(--paper-2); color: var(--text);
    display: flex; flex-direction: column;
    padding: 0 var(--sp-20) calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 16px));
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms var(--ease), visibility 260ms var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.nink-activity-panel.is-open { transform: translateX(0); visibility: visible; }

.nink-activity-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-12);
    height: 64px;
    min-height: 64px;
    margin-bottom: var(--sp-16);
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
}
.nink-activity-panel__title-wrap { display: flex; align-items: center; min-width: 0; }
.nink-activity-panel__title {
    margin: 0; font-family: var(--font-display, var(--font-serif)); font-size: 1.35rem;
    font-weight: 600; line-height: 1; letter-spacing: -0.02em;
    display: inline-flex; align-items: baseline; gap: 0.28em;
    white-space: nowrap;
}
.nink-activity-panel__title-brand {
    color: var(--nink-orange);
    font-weight: 700;
}
.nink-activity-panel__title-main {
    color: var(--nink-navy);
}
.nink-activity-panel__close {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper); box-shadow: var(--neu-raised); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 120ms ease;
}
.nink-activity-panel__close:active { box-shadow: var(--neu-pressed); }
.nink-activity-panel__close .icon { width: 1rem; height: 1rem; }

.nink-activity-panel__status {
    background: var(--paper); border: 1px dashed var(--line);
    border-radius: var(--radius-sm); padding: var(--sp-12);
    margin-bottom: var(--sp-16);
}
.nink-activity-panel__status-hint {
    margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;
}

.nink-activity-panel__actions { display: flex; flex-direction: column; gap: var(--sp-8); }
.nink-activity-panel__group { display: flex; flex-direction: column; gap: 6px; }
.nink-activity-panel__group[hidden] { display: none !important; }
.nink-activity-panel__group-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--text-muted); text-transform: uppercase;
    margin: var(--sp-4) 0 2px 4px;
}
.nink-activity-panel__action {
    display: flex; align-items: center; gap: var(--sp-12);
    padding: 10px var(--sp-12); border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text);
    background: var(--paper); box-shadow: var(--neu-raised);
    transition: box-shadow 120ms ease, transform 120ms ease;
}
.nink-activity-panel__action:active { box-shadow: var(--neu-pressed); transform: scale(0.99); }
.nink-activity-panel__action-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--paper-2); display: flex; align-items: center; justify-content: center;
    color: var(--nink-navy); flex-shrink: 0; box-shadow: var(--neu-raised);
}
.nink-activity-panel__action-icon .icon { width: 1rem; height: 1rem; }
.nink-activity-panel__action-icon--orange { color: var(--nink-orange); }
.nink-activity-panel__action-icon--brass { color: var(--brass-deep); }

.nink-activity-panel__action-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nink-activity-panel__action-content strong { font-size: 0.86rem; font-weight: 600; color: var(--nink-navy); }
.nink-activity-panel__action-content span { font-size: 0.72rem; color: var(--text-muted); }
.nink-activity-panel__action-arrow { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.nink-activity-panel__divider { height: 1px; background: var(--line); margin: var(--sp-10) 0; }

/* Body scroll locking */
body.menu-open,
body.activity-open,
body:has(.nav-drawer.is-open),
body:has(.nink-activity-panel.is-open) {
    overflow: hidden !important;
    touch-action: none;
}

/* ---- 5. Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn--brass {
    background: var(--brass);
    color: var(--navy);
    box-shadow: 0 10px 30px -12px rgba(201, 154, 70, 0.7);
}
.btn--brass:hover { background: var(--brass-bright); transform: translateY(-2px); }
.btn--ghost {
    background: transparent;
    color: var(--text-invert);
    border-color: var(--line-dark);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-bright); }
.btn--dark {
    background: var(--navy);
    color: var(--text-invert);
}
.btn--dark:hover { background: var(--navy-3); transform: translateY(-2px); }
.btn--outline {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}
.btn--outline:hover { border-color: var(--brass); color: var(--brass-deep); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.9rem; }

/* ---- 6. Home hero - Dwell-exact (VISUAL-DIRECTION.md §2 v4) ----
   Full-bleed; logo/nav are the global floating header (§4), not part of
   this markup. Navy/SVG-bloom is the fallback when no admin image has
   been uploaded (DESIGN-SYSTEM.md §13A). ---- */
/* ---- Home hero, v5 split-panel (VISUAL-DIRECTION.md §2 v5) ----
   Mobile-first base below is the pre-v5 full-bleed Navy treatment
   (safe fallback - the 34/16/50 split has no room to work on a phone-
   width viewport, and v5 only specifies the desktop composition). The
   split-panel/white-dominant/writing-mode-rail treatment is added
   entirely inside the >=901px override further down - nothing above
   that breakpoint changes from what already shipped and was tested. */
.dwell-hero__frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 78vh;
    background: var(--navy);
    color: var(--text-invert);
}
.dwell-hero__media {
    position: absolute; inset: 0;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}
.dwell-hero__media--fallback::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 55% at 28% 42%, rgba(231, 190, 106, 0.22), transparent 68%);
}
.dwell-hero__bleed { display: none; } /* desktop-only, see >=901px override */

.dwell-hero__inner {
    position: relative; z-index: 3;
    min-height: 78vh;
    padding: 110px 20px 90px;
    display: flex; flex-direction: column; justify-content: center;
}
/* display:flex + gap here is deliberate, not cosmetic: the shared
   .display-xl utility class carries `margin: 0` (a correct reset for its
   other uses) and, because it's declared later in the file, silently
   cancelled a margin-bottom set here previously - computed gap measured
   0px despite the rule existing. Flex `gap` can't be zeroed out by an
   unrelated class on a child the same way, so it's the robust fix, not
   just a different way to write the same thing. */
.dwell-hero__content {
    max-width: 620px; margin-top: var(--sp-16);
    display: flex; flex-direction: column; gap: 2rem;
}
.dwell-hero__headline { color: var(--text-invert); margin: 0; }
.dwell-hero__actions { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; }
.dwell-hero__explore { color: var(--text-invert); }

.dwell-hero__rail { display: none; } /* shown only at >=901px, see override */

.dwell-hero__strip {
    background: var(--paper); color: var(--text);
    display: flex; flex-direction: column; align-items: stretch;
}
.dwell-hero__teaser {
    flex: 1; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center;
    padding: var(--sp-32); text-decoration: none; color: inherit;
}
.dwell-hero__teaser-label { color: var(--text-muted); margin: 0; }
.dwell-hero__teaser-link { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface); }
.dwell-hero__teaser:hover .dwell-hero__teaser-link { color: var(--brass-deep); }
.dwell-hero__divider { width: auto; height: 1px; background: var(--line); }
.dwell-hero__arrows { display: none; }

@media (min-width: 901px) {
    .dwell-hero__frame { min-height: 86vh; background: var(--paper); color: var(--text); }

    /* Navy panel - left 34% (v5). overflow:hidden on .dwell-hero__media
       (base rule, unconditional) is the containment guarantee - nothing
       inside this panel can ever render past this box's own bounds. */
    .dwell-hero__media { width: 34%; }
    .dwell-hero__media--fallback::before {
        background: radial-gradient(ellipse 70% 60% at 45% 42%, rgba(231, 190, 106, 0.22), transparent 68%);
    }
    /* Shadow-bleed zone - Navy at ~85% opacity fading to fully transparent,
       extending the dark mood ~16% further right past the panel's hard
       edge. The remaining ~50% of the frame is clean Paper - that's just
       .dwell-hero__frame's own background showing through; no separate
       "white zone" element is needed. */
    .dwell-hero__bleed {
        display: block;
        position: absolute; top: 0; bottom: 0; left: 34%; width: 16%; z-index: 1;
        background: linear-gradient(to right, rgba(5, 7, 13, 0.85), transparent);
        pointer-events: none;
    }

    .dwell-hero__inner {
        min-height: 86vh;
        padding: 140px 40px 120px;
    }
    /* Headline starts ~39% from the left - just past the panel + bleed
       zone, since that original left-edge spot now sits inside the Navy
       panel. Dark text now that it sits on Paper, not Navy. */
    .dwell-hero__content { margin-top: 0; margin-left: 39%; }
    .dwell-hero__headline { color: var(--text); }
    .dwell-hero__explore { color: var(--text); }

    /* Wayfinding rail - writing-mode, not rotate() (see the HTML comment
       above this element in home.php for why). Flush to the hero FRAME's
       right edge - the frame spans the full hero width, so this is
       genuinely the outer edge, not the panel's edge. Sits over the white
       area now, so it needs the dark-on-light colour pair, not the
       light-on-dark one this rail used before v5. */
    .dwell-hero__rail {
        display: flex; align-items: center; gap: var(--sp-16);
        position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
        writing-mode: vertical-rl; text-orientation: mixed;
        font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
        letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
        z-index: 3;
    }
    .dwell-hero__rail a:hover { color: var(--brass-deep); }

    .dwell-hero__strip { flex-direction: row; }
    .dwell-hero__divider { width: 1px; height: auto; }
    .dwell-hero__arrows { display: flex; align-items: center; padding-inline: var(--sp-32); color: var(--text-muted); }
}

.dwell-hero__rail a { color: inherit; text-decoration: none; }
.dwell-hero__rail-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }

/* ---- 6b. Brand statement (About/Brand Intro) ---- */
.brand-statement { max-width: 900px; }
.brand-statement__lead { color: var(--text-muted); margin-top: var(--sp-24); max-width: 56ch; }

/* ---- 6c. Room link list ("Light Every Room") ---- */
.room-link-list { list-style: none; padding: 0; margin: var(--sp-24) 0 0; display: flex; flex-direction: column; gap: 0.65rem; }
.room-link-list .btn-t3 { color: var(--text); font-size: var(--fs-heading); font-family: var(--font-display); font-weight: 400; }

/* ---- 6d. Horizontal borderless carousel (fixture-type row) ---- */
.carousel {
    display: flex; gap: var(--sp-24); overflow-x: auto; padding-bottom: var(--sp-8);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* Without this, iOS Safari lets a swipe that reaches this strip's
       edge "chain" into scrolling the page itself sideways instead of
       stopping - the actual cause of the header appearing to drag
       along, not a real document-width overflow. */
    overscroll-behavior-x: contain;
}
.carousel__item { flex: 0 0 auto; width: 180px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.carousel__item .scene { margin-bottom: var(--sp-12); transition: transform 200ms var(--ease); }
.carousel__item:hover .scene { transform: translateY(-3px); }
.carousel__item:hover .carousel__label { color: var(--brass-deep); }
.carousel__label { display: block; color: var(--text); transition: color 150ms ease-out; }

/* ---- 6e. Featured Lighting Experience - dark quote-CTA band ---- */
.quote-band__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-32); }
.quote-band__quote { max-width: 20ch; color: var(--text-invert); font-style: italic; margin: 0; }

/* ---- 6f. Projects preview - dark asymmetric teaser grid ---- */
.project-teaser-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-3); }
.project-teaser-grid .project-teaser--lg { grid-row: span 1; }
.project-teaser { text-decoration: none; color: var(--text-invert); display: flex; flex-direction: column; gap: var(--sp-12); }
.project-teaser .scene { aspect-ratio: 4/3; }
.project-teaser--lg .scene { aspect-ratio: 16/11; }
.project-teaser__title { font-family: var(--font-display); font-size: var(--fs-heading); }
.project-teaser:hover .project-teaser__title { color: var(--brass-bright); }
@media (max-width: 900px) { .project-teaser-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .project-teaser-grid { grid-template-columns: 1fr; } }

/* ---- 6g. Stat row / callout (§6.3 - max once per page) ---- */
.stat-row { display: flex; align-items: center; gap: var(--sp-64); flex-wrap: wrap; }
.stat-callout { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }
.stat-callout__number { color: var(--brass-deep); }
.stat-callout__label { color: var(--text-muted); }
.stat-row__note { color: var(--text-muted); }
@media (max-width: 640px) { .stat-row { gap: var(--sp-24); } }

/* ---- 7. Generic section ---- */
.section { padding-block: clamp(3.5rem, 8vw, var(--space-6)); }
.section--paper2 { background: var(--paper-2); }
.section--dusk {
    background: var(--navy-2);
    color: var(--text-invert);
}
.section__head {
    max-width: 640px;
    margin-bottom: var(--space-4);
}
.section__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-deep);
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.section--dusk .section__eyebrow { color: var(--brass-bright); }
.section__title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section__intro { color: var(--text-muted); font-size: 1.08rem; }
.section--dusk .section__intro { color: var(--text-invert-mut); }

/* ---- 8. Steps (a real ordered process, so numbering earns its place) ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    counter-reset: step;
}
.step {
    background: var(--navy-3);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.step__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--brass-bright);
    display: block;
    margin-bottom: var(--space-1);
}
.step__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: var(--text-invert);
}
.step__body { color: var(--text-invert-mut); font-size: 0.96rem; margin: 0; }

/* ---- 9. Feature cards ---- */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 0.4rem;
}
.card__body { color: var(--text-muted); font-size: 0.98rem; margin: 0; }

/* ---- 10. Audience chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text);
}

/* ---- 11. Callout band ---- */
.callout {
    background: var(--navy);
    color: var(--text-invert);
    border-radius: var(--radius);
    padding: clamp(2rem, 5vw, var(--space-5));
    text-align: center;
}
.callout__title { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--text-invert); }
.callout__lead { color: var(--text-invert-mut); max-width: 560px; margin-inline: auto; margin-bottom: var(--space-3); }

/* ---- 12. Simple prose page ---- */
.page-head {
    background: var(--navy);
    color: var(--text-invert);
    padding-block: clamp(3rem, 8vw, 5rem);
}
.page-head__title { font-size: clamp(2rem, 5vw, 3rem); color: var(--text-invert); }
.page-head__lead { color: var(--text-invert-mut); max-width: 620px; }
.prose { max-width: 680px; }
.prose h2 { font-size: 1.5rem; margin-top: var(--space-4); }
.prose p { color: var(--text-muted); }
.prose ul { color: var(--text-muted); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* ---- 13. Contact cards ---- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.contact-card {
    display: block;
    text-decoration: none;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.contact-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.contact-card__label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.contact-card__value { font-family: var(--font-display); font-size: 1.25rem; margin-top: 0.3rem; }

/* ---- 14. Health / status ---- */
.status-list { list-style: none; padding: 0; max-width: 480px; }
.status-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    background: var(--paper);
}
.badge { font-weight: 700; font-size: 0.85rem; padding: 0.25rem 0.7rem; border-radius: 999px; }
.badge--ok   { background: #E7F3E4; color: #2C6B2C; }
.badge--fail { background: #F6E2DE; color: #9A3527; }

/* ---- 15. Admin (login + placeholder dashboard) ---- */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: var(--text-invert);
    padding: 1.25rem;
}
.auth__card {
    width: 100%;
    max-width: 400px;
    background: var(--navy-2);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.auth__brand { justify-content: center; margin-bottom: var(--space-3); color: var(--text-invert); }
.auth__title { text-align: center; font-size: 1.5rem; color: var(--text-invert); }
.field { margin-bottom: var(--space-2); }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-invert-mut); }
.field input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-dark);
    background: var(--navy-3);
    color: var(--text-invert);
    font: inherit;
}
.field input:focus-visible { outline-color: var(--brass); border-color: var(--brass); }
.auth__error {
    background: rgba(154, 53, 39, 0.22);
    border: 1px solid rgba(246, 226, 222, 0.25);
    color: #F3D8D2;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    margin-bottom: var(--space-2);
}
.btn--block { width: 100%; justify-content: center; }

.admin-shell { min-height: 70vh; }
.admin-note {
    background: var(--paper-2);
    border: 1px dashed var(--brass);
    border-radius: var(--radius);
    padding: var(--space-3);
    color: var(--text-muted);
}

/* =====================================================================
   ---- 16. Global footer (DESIGN-SYSTEM.md §19-20) ----
   Full site-wide replacement, used identically on every page. Bands
   alternate Navy 2 (SEO block, Book-a-Meeting band) and near-black Navy
   (link grid, bottom bar) for subtle internal contrast (§19 Tokens).
   ===================================================================== */
.site-footer { margin-top: var(--space-5); color: var(--text-invert); }

/* 1. SEO content block - quiet, muted, present for crawlability. */
.footer-seo { background: var(--navy-2); padding-block: var(--sp-16); }
.footer-seo p { margin: 0; max-width: 70ch; font-size: var(--fs-meta); color: var(--text-invert-mut); }

/* 2. Four-column link grid */
.site-footer {
    background: var(--navy);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--space-4);
    padding-block: var(--space-4);
}
.brand--footer { color: var(--text-invert); margin-bottom: var(--space-2); }
.site-footer__line { color: var(--text-invert-mut); max-width: 46ch; font-size: 0.96rem; }
.site-footer__heading { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.02em; text-transform: uppercase; color: var(--brass-bright); margin-bottom: var(--space-2); }
.site-footer__col a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-size: var(--fs-interface); color: var(--text-invert-mut); padding: 0.28rem 0; }
.site-footer__col a:hover { color: var(--brass-bright); }

/* 3. Registration line - smallest type on the page, present for legal
   completeness, not meant to draw attention. */
.site-footer__reg-wrap { border-top: 1px solid var(--line-dark); }
.site-footer__reg { margin: 0; padding-block: var(--sp-12); font-size: 0.7rem; color: var(--text-invert-mut); opacity: 0.85; }
.site-footer__reg a { color: var(--text-invert-mut); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__reg a:hover { color: var(--brass-bright); }

/* 4. Book a Meeting/Appointment band */
.footer-meet { background: var(--navy-2); }
.footer-meet__inner { padding-block: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); text-align: center; }
.footer-meet__eyebrow { margin: 0; font-size: var(--fs-meta); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-invert-mut); }

.meeting-selector { display: flex; gap: var(--sp-16); margin-top: var(--sp-8); flex-wrap: wrap; justify-content: center; }
.meeting-selector[hidden] { display: none; }
.meeting-method {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    width: 200px; background: var(--paper-2); box-shadow: var(--neu-raised); border: none; cursor: pointer;
    border-radius: var(--radius-sm); padding: var(--sp-20) var(--sp-16);
    font-family: var(--font-body); color: var(--text); transition: box-shadow 150ms ease;
}
.meeting-method:hover { box-shadow: var(--neu-pressed); }
.meeting-method.is-selected { box-shadow: var(--neu-pressed); }
.meeting-method__icon { width: 1.6rem; height: 1.6rem; color: var(--brass-deep); }
.meeting-method__name { font-family: var(--font-display); font-size: 1.05rem; }
.meeting-method__tagline { font-size: 0.82rem; color: var(--text-muted); }

/* Booking request form (IMPLEMENTATION-INDEX.md §5.2) - reuses
   .qe-form-field/.qe-form-row as-is (the input's own light background
   already reads fine on the dark band), only the label colour needs a
   light-on-dark override here. */
.meeting-form { max-width: 440px; margin: var(--sp-20) auto 0; text-align: left; }
.meeting-form[hidden] { display: none; }
.meeting-form .qe-form-field label { color: var(--text-invert-mut); }
.meeting-form > button { width: 100%; margin-top: 0.25rem; }

/* 5. Bottom bar */
.site-footer__base {
    background: var(--navy);
    border-top: 1px solid var(--line-dark);
    padding-block: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-invert-mut);
    font-size: 0.86rem;
    flex-wrap: wrap;
}
.site-footer__base p { margin: 0; }
.site-footer__social { display: flex; align-items: center; gap: var(--sp-16); }
.site-footer__social a { color: var(--text-invert-mut); display: flex; }
.site-footer__social a:hover { color: var(--brass-bright); }

/* Acquisition-surface footer theme (Ask Nink Phase A.1 §6) - CSS-only
   colour modifier, applied via $footerTheme==='procurement' on home,
   /ask-nink and /how-it-works only. Structure/meaning identical to the
   base footer above (same "Online Store - Lagos, Nigeria" line, same
   "Prefer to talk it through?"/Book a Meeting band, same copyright and
   WhatsApp access) - only the navy shade and the gold/bronze accent
   colour change, to the same pf-* tokens the rest of the procurement UI
   already uses. Catalogue/product pages never receive this class. */
.site-footer--procurement,
.site-footer--procurement .site-footer__base { background: var(--pf-navy); }
.site-footer--procurement .footer-seo,
.site-footer--procurement .footer-meet { background: var(--pf-navy-2); }
.site-footer--procurement .site-footer__heading { color: var(--pf-orange); }
.site-footer--procurement .site-footer__col a:hover,
.site-footer--procurement .site-footer__reg a:hover,
.site-footer--procurement .site-footer__social a:hover { color: var(--pf-orange-bright); }
.site-footer--procurement .btn-t2--brass { background: var(--pf-orange); color: #fff; }
.site-footer--procurement .btn-t2--brass:hover { background: var(--pf-orange-bright); }

/* ---- 17. Utilities ---- */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.center { text-align: center; }

/* ---- 18. Responsive ---- */
@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
    .cards, .contact-grid { grid-template-columns: 1fr 1fr; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .steps, .cards, .contact-grid, .site-footer__grid { grid-template-columns: 1fr; }
    .meeting-selector { flex-direction: column; align-items: center; }
    .meeting-method { width: 100%; max-width: 280px; }
    .site-footer__base { flex-direction: column; align-items: flex-start; }
}

/* ---- 20. Section helpers added in catalogue phase ---- */
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.section__title--sm { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.page-head--slim { padding-block: clamp(2.2rem, 6vw, 3.6rem); }
.page-head__eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-bright); font-weight: 600; margin-bottom: 0.5rem; }
.visually-hidden, .product-card__cta.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- 21. Product grid + card (DESIGN-SYSTEM.md §6.1 - borderless) ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.product-card {
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--navy);
    overflow: hidden;
    border-radius: var(--radius-sm);
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__noimg, .product-gallery__noimg {
    display: block; width: 100%; height: 100%;
    background:
        radial-gradient(circle at 50% 38%, rgba(231,190,106,0.34), transparent 60%),
        var(--navy);
}
.product-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding-top: var(--sp-16); }
.product-card__name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-heading); line-height: 1.3; margin: 0; }
.product-card__name a { text-decoration: none; color: var(--text); }
.product-card__name a:hover { color: var(--brass-deep); }
.product-card__cat { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.product-card__price-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.product-card__price { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); color: var(--text); }
.product-card__price--quote { color: var(--brass-deep); }

/* Action set - always visible (not hover-revealed), real button chrome
   so "View" and "Add to Plan" read as actions at rest, not loose text. */
.product-card__actions { display: flex; gap: 0.6rem; margin-top: 0.65rem; }
.product-card__actions .btn-t3 {
    flex: 1; justify-content: center; text-align: center;
    padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
    font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid var(--line); transition: background 150ms ease, border-color 150ms ease;
}
.product-card__actions .btn-t3::after { content: none; }
.product-card__actions .btn-t3:first-child { color: var(--text); }
.product-card__actions .btn-t3:first-child:hover { background: var(--paper-2); border-color: var(--text-muted); }
.product-card__actions .btn-t3[data-add-to-plan] { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.product-card__actions .btn-t3[data-add-to-plan]:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
/* Toggled state - a second click removes it, so the button itself should
   read as "click to undo," not a second identical primary CTA. */
.product-card__actions .btn-t3[data-add-to-plan].is-added,
[data-add-to-plan].is-added.btn-t2--navy {
    background: transparent; border-color: var(--text-muted); color: var(--text-muted);
}
.product-card__actions .btn-t3[data-add-to-plan].is-added:hover,
[data-add-to-plan].is-added.btn-t2--navy:hover { border-color: #9A3527; color: #9A3527; background: rgba(154, 53, 39, 0.06); }

/* Availability - a 6px dot, never a badge/pill (§6.1) */
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.status-dot--ok    { background: var(--success-light); }
.status-dot--muted { background: var(--attention-light); }
.status-dot--off   { background: var(--unavailable-light); }

.price { font-family: var(--font-display); font-size: 1.12rem; color: var(--text); }
.price--lg { font-size: 1.7rem; }

/* Product detail's availability indicator - same status-dot component and
   colours as product cards (§6.1), just paired with a visible label since
   a detail page's single copy warrants more than a bare dot. */
.availability-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--text-muted); }

/* ---- 22. Catalogue toolbar + filters + pagination ---- */
.catalogue-toolbar { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--space-3); }
.catalogue-search { display: flex; gap: 0.5rem; flex: 1; min-width: 260px; }
.catalogue-search input {
    flex: 1; padding: 0.7rem 0.9rem; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--text);
}
.catalogue-search input:focus-visible { border-color: var(--brass); outline-color: var(--brass); }
.catalogue-sort select {
    padding: 0.7rem 0.9rem; font: inherit; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--paper); color: var(--text); cursor: pointer;
}
.catalogue-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--space-2); }
.catalogue-filters__label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-right: 0.3rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    text-decoration: none; font-size: 0.9rem; font-weight: 500;
    padding: 0.42rem 0.85rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--text-muted);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.filter-chip .icon { width: 1em; height: 1em; }
.filter-chip:hover { border-color: var(--brass); color: var(--text); }
.filter-chip.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }
.filter-chip__count { font-size: 0.76rem; opacity: 0.7; }
.catalogue-count { color: var(--text-muted); font-size: 0.94rem; margin-bottom: var(--space-2); }
/* Shop filter checkboxes apply in place (shop-filters.js) - a brief dim
   while the swap is in flight is the only feedback, never a layout
   shift or scroll. */
#shopResults.is-loading { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; }

.empty-state { text-align: center; padding: var(--space-5) var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state p { color: var(--text-muted); margin-bottom: var(--space-2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.pagination__link { text-decoration: none; font-weight: 600; color: var(--text); padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pagination__link:hover { border-color: var(--brass); color: var(--brass-deep); }
.pagination__status { color: var(--text-muted); font-size: 0.92rem; }

/* ---- 23. Breadcrumb ---- */
.breadcrumb { border-bottom: 1px solid var(--line); background: var(--paper); }
.breadcrumb .wrap { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding-block: 0.85rem; font-size: 0.9rem; color: var(--text-muted); }
.breadcrumb a { text-decoration: none; color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brass-deep); }

/* ---- 24. Product detail ---- */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: start; }
.product-gallery__main {
    aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
    background: var(--navy); border: 1px solid var(--line);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.product-gallery__thumb {
    width: 68px; height: 68px; padding: 0; cursor: pointer;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 2px solid var(--line); background: var(--navy);
    transition: border-color 120ms ease-out;
}
.product-gallery__thumb:hover { border-color: var(--brass-deep); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active { border-color: var(--brass); }

/* ---- 24b. Product Videos - Images/Videos mode toggle ---- */
.product-gallery__modes { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.product-gallery__mode {
    padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--paper); color: var(--text-muted); font-size: 0.85rem; cursor: pointer;
}
.product-gallery__mode.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }
.product-gallery__main--video { position: relative; }
.product-gallery__video-slot { width: 100%; height: 100%; }
.product-gallery__video-slot:empty { display: flex; align-items: center; justify-content: center; }
.product-gallery__video-frame, .product-gallery__video-el { width: 100%; height: 100%; border: 0; display: block; }
.product-gallery__video-thumb {
    position: relative; width: 68px; height: 68px; padding: 0; cursor: pointer;
    border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--line);
    background: var(--navy); transition: border-color 120ms ease-out;
}
.product-gallery__video-thumb:hover { border-color: var(--brass-deep); }
.product-gallery__video-thumb.is-active { border-color: var(--brass); }
.product-gallery__video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__play-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(0,0,0,0.25);
}
.product-gallery__play-icon .icon { width: 22px; height: 22px; }
.product-gallery__video-type {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.15rem 0.3rem;
    font-size: 0.6rem; text-align: center; background: rgba(0,0,0,0.55); color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.product-info__cat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.product-info__title { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0.4rem 0 var(--space-2); }
.product-info__meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: var(--space-2); flex-wrap: wrap; }
.product-info__lead { color: var(--text-muted); font-size: 1.05rem; }
.product-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: var(--space-2) 0; }
.product-note { color: var(--text-muted); font-size: 0.9rem; background: var(--paper-2); border-left: 3px solid var(--brass); padding: 0.75rem 0.9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.plan-feedback { min-height: 1.2em; font-size: 0.92rem; font-weight: 600; color: var(--brass-deep); }
.plan-feedback a { color: inherit; text-decoration: underline; }
.product-spaces { margin-top: var(--space-3); }
.product-spaces__label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 0.5rem; }
.chips--sm .chip { font-size: 0.86rem; padding: 0.35rem 0.75rem; }

.product-lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: start; }
.spec-list { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--text-muted); font-weight: 500; margin: 0; }
.spec-row dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- 25. Mobile navigation ----
   The three-stroke icon + full-screen .site-menu overlay (§4) is already
   the same mechanism on every viewport - no separate mobile-only nav
   pattern needed here. Only fine-tune spacing for small screens. */
@media (max-width: 480px) {
    .site-menu__links { gap: var(--sp-24); }
}

/* ---- 26. Responsive: catalogue + product ---- */
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-detail { grid-template-columns: 1fr; }
    .product-lower { grid-template-columns: 1fr; }
    .hero--split .hero-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .hero--split .hero__eyebrow, .hero--split .hero__title, .hero--split .hero__lead { text-align: center; margin-inline: auto; }
    .hero--split .hero__lead { max-width: 52ch; }
    .hero--split .hero__actions { justify-content: center; }
    .hero__scene { aspect-ratio: 4 / 3; max-width: 340px; margin-inline: auto; }
}
@media (max-width: 560px) {
    /* VISUAL-DIRECTION.md §7 "Mobile product grid: 2 columns, not 1" -
       stays at the 2-up grid from the 900px breakpoint above at every
       supported width, never collapses to a single column. */
    .product-grid { gap: var(--sp-12); }
    .catalogue-toolbar { flex-direction: column; align-items: stretch; }
    .catalogue-sort select { width: 100%; }
}

/* ---- 27. Motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- 28. Quotation builder ---- */
.qb { max-width: 720px; margin-inline: auto; }
.qb-error { background: #F6E2DE; color: #9A3527; padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.qb-notice { background: rgba(201,154,70,0.12); border: 1px solid var(--line); color: var(--text); padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-2); font-size: 0.94rem; }
.qb-notice strong { color: var(--brass-deep); }
.qb-progress { height: 4px; background: var(--line); border-radius: 4px; margin-bottom: 0.5rem; overflow: hidden; }
.qb-progress__bar { height: 100%; background: var(--brass); border-radius: 4px; transition: width 0.3s ease; }
.qb-steps-label { font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.qb-question { font-family: var(--font-display); font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-bottom: var(--space-2); }
.qb-hint { color: var(--text-muted); margin-bottom: var(--space-3); }
.qb-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.qb-optional { font-weight: 400; color: var(--text-muted); }
.required { color: #9A3527; }

.qb-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.qb-option {
    display: flex; flex-direction: column; gap: 0.25rem;
    text-align: left; padding: var(--space-2); border: 2px solid var(--line);
    border-radius: var(--radius); background: var(--paper); cursor: pointer;
    font: inherit; color: var(--text); transition: border-color 0.15s ease;
}
.qb-option:hover { border-color: var(--brass); }
.qb-option.is-active { border-color: var(--brass); background: rgba(201,154,70,0.06); }
.qb-option strong { font-size: 1.05rem; }
.qb-option span { font-size: 0.9rem; color: var(--text-muted); }

.qb-sub { margin-bottom: var(--space-3); }
.qb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qb-chip {
    padding: 0.48rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--text); font: inherit; font-size: 0.92rem;
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.qb-chip:hover { border-color: var(--brass); }
.qb-chip.is-active { border-color: var(--brass); background: var(--brass); color: var(--navy); font-weight: 600; }

.qb-next { margin-top: var(--space-2); }
.qb-next:disabled { opacity: 0.4; pointer-events: none; }
.qb-row { display: flex; gap: 0.8rem; margin-top: var(--space-3); flex-wrap: wrap; }

/* Spaces */
.qb-space-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.qb-space-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.65rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    margin-bottom: 0.5rem; background: var(--paper-2);
}
.qb-space-row__name { font-weight: 600; }
.qb-space-row__qty { color: var(--brass-deep); }
.qb-space-row__controls { display: flex; gap: 0.4rem; align-items: center; }
.qb-remove { background: none; border: none; color: #9A3527; font: inherit; font-size: 0.85rem; cursor: pointer; font-weight: 600; transition: color 120ms ease-out; }
.qb-remove:hover { color: #7A2A1D; text-decoration: underline; }

/* Space tabs */
.qb-space-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-3); }
.qb-tab {
    padding: 0.42rem 0.8rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); font: inherit; font-size: 0.85rem; cursor: pointer;
    transition: border-color 120ms ease-out;
}
.qb-tab:hover { border-color: var(--brass); }
.qb-tab.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }

/* Adder */
.qb-select, .qb-input {
    width: 100%; padding: 0.65rem 0.85rem; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text);
}
.qb-select:focus, .qb-input:focus { border-color: var(--brass); outline-color: var(--brass); }
.qb-adder > div { margin-bottom: var(--space-2); }
.qb-adder__qty { display: flex; align-items: flex-end; gap: 0.7rem; flex-wrap: wrap; }
.qb-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.qb-qty__btn {
    width: 40px; height: 40px; border: none; background: var(--paper-2);
    font: inherit; font-size: 1.2rem; cursor: pointer; color: var(--text);
}
.qb-qty__btn:hover { background: var(--line); }
.qb-qty__input { width: 52px; height: 40px; border: none; text-align: center; font: inherit; background: var(--paper); color: var(--text); }
.qb-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Product search results */
.qb-product-results { max-height: 240px; overflow-y: auto; }
.qb-product-result {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    width: 100%; text-align: left; padding: 0.6rem 0.8rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); font: inherit; cursor: pointer;
    margin-top: 0.4rem; transition: border-color 0.15s ease;
}
.qb-product-result:hover { border-color: var(--brass); }
.qb-product-result__price { color: var(--brass-deep); font-weight: 600; white-space: nowrap; }

/* Items list */
.qb-items-ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.qb-item-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line);
}
.qb-remove-item { background: none; border: none; color: #9A3527; font-size: 1.1rem; cursor: pointer; margin-left: 0.6rem; transition: color 120ms ease-out; }
.qb-remove-item:hover { color: #7A2A1D; }

/* Summary */
.qb-summary { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--paper-2); margin-bottom: var(--space-2); }
.qb-summary__project { margin-bottom: var(--space-2); }
.qb-summary__space { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: var(--space-2) 0 0.4rem; }
.qb-summary__space:first-child { margin-top: 0; }
.qb-summary__list { list-style: none; padding: 0; margin: 0; }
.qb-summary__list li { padding: 0.3rem 0; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.qb-summary__total { margin-top: var(--space-2); font-size: 1.15rem; font-family: var(--font-display); }
.qb-disclaimer {
    background: var(--paper-2); border-left: 3px solid var(--brass); padding: 0.75rem 0.9rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); font-size: 0.9rem;
    margin-bottom: var(--space-2);
}

/* Customer form */
.qb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.qb-form-grid .field label { color: var(--text-muted); }
.qb-form-grid .field input, .qb-form-grid .field textarea {
    width: 100%; padding: 0.65rem 0.85rem; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text);
}
.qb-form-grid .field input:focus, .qb-form-grid .field textarea:focus { border-color: var(--brass); outline-color: var(--brass); }
.qb-form-grid .field textarea { resize: vertical; }

/* Confirmation page */
.quote-ref {
    display: inline-block; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--brass-bright); background: var(--navy-3); padding: 0.6rem 1.4rem;
    border-radius: var(--radius-sm); margin-top: var(--space-2);
}
.confirm-box {
    background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-3); margin-bottom: var(--space-3);
}
.confirm-box p { margin: 0 0 0.4rem; }
.quote-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
.quote-table th, .quote-table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.quote-table th { font-weight: 600; background: var(--paper-2); }
.quote-table .right { text-align: right; }
.quote-table tfoot td { border-top: 2px solid var(--brass); font-size: 1.05rem; }
.text-muted { color: var(--text-muted); }
.confirm-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: var(--space-3); }

@media (max-width: 560px) {
    .qb-options { grid-template-columns: 1fr; }
    .qb-form-grid { grid-template-columns: 1fr; }
    .qb-adder__qty { flex-direction: column; align-items: stretch; }
    .quote-table th:nth-child(2), .quote-table td:nth-child(2) { display: none; }
}

/* ---- Room visualization (Lighting Plan Builder, step 3) ----
   Simplified, not photorealistic, per UI-REFERENCE.md §25 - a floor-plan
   style illustration that gains a badge per lighting item added to the
   active space. Priority is clarity and responsiveness, not realism. */
.qb-room {
    display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
    background: var(--navy-2); border-radius: var(--radius); padding: var(--space-2);
    margin-bottom: var(--space-3); color: var(--text-invert);
}
.qb-room__scene { position: relative; width: 130px; height: 92px; flex: none; color: var(--line-dark); }
.qb-room__floorplan { width: 100%; height: 100%; }
.qb-room__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brass-bright); }
.qb-room__icon .icon { width: 1.7rem; height: 1.7rem; }
.qb-room__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1; min-width: 160px; }
.qb-room__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy-3); border: 1px solid var(--line-dark); color: var(--brass-bright);
    animation: qbBadgeIn 0.2s var(--ease);
}
.qb-room__badge .icon { width: 1rem; height: 1rem; }
.qb-room__empty { color: var(--text-invert-mut); font-size: 0.88rem; }
@keyframes qbBadgeIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Persistent plan summary bar ---- */
.qb-plan-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--navy); color: var(--text-invert);
    padding: 0.85rem 1.25rem; padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px -16px rgba(0,0,0,0.5);
    font-size: 0.94rem; text-align: center;
}
.qb-plan-bar strong { color: var(--brass-bright); }
.qb-plan-bar[hidden] { display: none; }
body.has-plan-bar { padding-bottom: 60px; }

/* =====================================================================
   ---- 29. Editorial components ----
   No product photography exists yet (docs/CONTEXT.md - placeholder SVGs
   only), so imagery throughout the redesign is replaced by ".scene": a
   dark architectural panel carrying a single icon and the same light-bloom
   glow used in the hero. It reads as intentional illustration, not a
   missing photo, and keeps "lighting is part of the interface" (UI-REF §4.4)
   true even where a real photo will eventually go.
   ===================================================================== */
.scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy-2);
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scene::before {
    content: "";
    position: absolute;
    top: -20%; left: 50%;
    width: 140%; height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(231,190,106,0.28) 0%, rgba(201,154,70,0.1) 38%, transparent 68%);
    z-index: -1;
    pointer-events: none;
}
.scene__icon { width: 26%; height: 26%; color: var(--brass-bright); opacity: 0.92; }
.scene--tall { aspect-ratio: 3 / 4; }
.scene--square { aspect-ratio: 1 / 1; }
.scene--wide { aspect-ratio: 16 / 9; }
.scene__tag {
    position: absolute; left: var(--space-2); bottom: var(--space-2);
    font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-invert-mut); font-weight: 600;
}

/* Space photo variant (DESIGN-SYSTEM.md §5.7A) - the admin-uploaded dusk
   space photo (space_image(), §13A) replaces the icon+glow illustration
   once one exists for the active space. background-position is set
   inline per space (focal point). The amber glow swaps for a dark
   bottom-weighted scrim so marker dots/badges/category chips overlaid
   on top stay legible against a real photo the way they never needed to
   against the flat illustration. */
.scene--photo {
    background-size: cover;
    background-repeat: no-repeat;
}
.scene--photo::before {
    top: 0; left: 0; width: 100%; height: 100%; transform: none;
    background: linear-gradient(180deg, rgba(5,7,13,0.05) 0%, rgba(5,7,13,0.15) 55%, rgba(5,7,13,0.55) 100%);
}

/* Asymmetric editorial split (image/scene + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin-bottom: var(--space-1); }
.split__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.split__body { color: var(--text-muted); font-size: 1.05rem; }
.section--dusk .split__body { color: var(--text-invert-mut); }
.section--dusk .split__eyebrow { color: var(--brass-bright); }

/* Service cards */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.service-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6rem;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service-card__icon {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); background: var(--paper-2); color: var(--brass-deep);
}
.service-card__icon .icon { width: 1.4em; height: 1.4em; }
.service-card__name { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin: 0; }
.service-card__for { font-size: 0.86rem; color: var(--brass-deep); font-weight: 600; }
.service-card__summary { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.service-card__process {
    margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--line);
    color: var(--text-muted); font-size: 0.88rem;
}
.service-card__process strong { color: var(--text); display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }

/* Project cards */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.project-grid--feature .project-card:first-child .scene { aspect-ratio: 3 / 4; }
.project-card { text-decoration: none; color: inherit; display: block; }
.project-card__tag { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin: var(--space-2) 0 0.3rem; }
.project-card__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.25rem; transition: color 0.15s ease; }
.project-card:hover .project-card__title { color: var(--brass-deep); }
.project-card__space { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.project-note {
    display: inline-block; margin-top: var(--space-2); font-size: 0.82rem; color: var(--text-muted);
    background: var(--paper-2); border-radius: 999px; padding: 0.3rem 0.8rem;
}

/* Article cards */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.article-card { text-decoration: none; color: inherit; display: block; }
.article-card__cat { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin: var(--space-2) 0 0.3rem; }
.article-card__title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.4rem; transition: color 0.15s ease; }
.article-card:hover .article-card__title { color: var(--brass-deep); }
.article-card__excerpt { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* Trust list - real process facts, not invented stats (UI-REF §46) */
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.trust-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.trust-item .icon { color: var(--brass-bright); margin-top: 0.15rem; }
.trust-item__body { color: var(--text-invert-mut); font-size: 0.95rem; margin: 0; }
.trust-item__body strong { color: var(--text-invert); display: block; font-size: 1rem; margin-bottom: 0.15rem; font-weight: 600; }

/* Category discovery (editorial, staggered - not a uniform grid) */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.cat-tile {
    position: relative; text-decoration: none; color: var(--text-invert);
    border-radius: var(--radius); overflow: hidden; isolation: isolate;
    aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-2); background: var(--navy-2);
    transition: transform 0.18s var(--ease);
}
.cat-tile:nth-child(3n+2) { aspect-ratio: 1 / 1.35; }
.cat-tile::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(231,190,106,0.3), transparent 60%);
    z-index: -1;
}
.cat-tile:hover { transform: translateY(-3px); }
.cat-tile .icon { width: 2rem; height: 2rem; color: var(--brass-bright); margin-bottom: 0.6rem; }
.cat-tile__name { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; }
.cat-tile__count { font-size: 0.8rem; color: var(--text-invert-mut); }

/* Space discovery row (horizontal, tappable) */
.space-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.space-tile {
    text-decoration: none; color: var(--text); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: var(--space-2) 0.5rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); transition: border-color 0.15s ease, transform 0.15s var(--ease);
}
.space-tile:hover { border-color: var(--brass); transform: translateY(-2px); }
.space-tile .icon { width: 1.8rem; height: 1.8rem; color: var(--brass-deep); }
.space-tile__name { font-size: 0.88rem; font-weight: 600; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: var(--space-3); }
    .split--reverse .split__media { order: 0; }
    .service-grid, .project-grid, .article-grid { grid-template-columns: 1fr 1fr; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .space-grid { grid-template-columns: repeat(3, 1fr); }
    .trust-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .service-grid, .project-grid, .article-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .space-grid { grid-template-columns: repeat(2, 1fr); }
}

/* "Shop by" domain-entry cards (Catalogue Domains Phase 5B) - a light
   paper-surface pair, same tactile idiom as .space-tile, never the dark
   .cat-tile treatment (this section sits on the light Shop page). */
.domain-entry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.domain-entry-card {
    text-decoration: none; color: var(--text); display: block;
    padding: var(--sp-24); border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); transition: border-color 0.15s ease, transform 0.15s var(--ease);
}
.domain-entry-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.domain-entry-card__heading { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.4rem; }
.domain-entry-card__intro { display: block; font-size: 0.92rem; color: var(--text-muted); }
@media (max-width: 560px) {
    .domain-entry-grid { grid-template-columns: 1fr; }
}

/* Domain structural-empty state (Catalogue Domains Phase 5B) - truthful
   sourcing panel, no filter sidebar, no fake inventory. */
.domain-empty {
    text-align: center; max-width: 640px; margin: 0 auto;
    padding: var(--sp-48) var(--sp-24);
}
.domain-empty p { color: var(--text-muted); margin-bottom: var(--sp-24); }

/* =====================================================================
   ---- 30. DESIGN SYSTEM v2 - foundation (IMPLEMENTATION-INDEX Stage 1) ----
   Tokens only, applied here as reusable primitives: type ramp, button
   tiers 1–3, segmented control, icon-key controls, neumorphic surfaces
   (DESIGN-SYSTEM.md §1–§5). Page-specific components built from these
   primitives (hero slider §5.6, quotation popups §5.7–§5.8) are built in
   their own stages, not here.
   ===================================================================== */

/* ---- 30.1 Typography ramp (§2.2) - presentational classes, decoupled
   from heading level per §14's SEO rule: visual size and semantic <h1>–
   <h6> level are independent. Apply the class that matches the intended
   size to whichever tag is correct for document structure. ---- */
.display-xl {
    font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-xl);
    line-height: 1.05; letter-spacing: -0.01em; margin: 0;
}
.display-l {
    font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-l);
    line-height: 1.1; letter-spacing: -0.01em; margin: 0;
}
.display-m {
    font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m);
    line-height: 1.15; margin: 0;
}
.text-heading {
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-heading);
    line-height: 1.3; margin: 0;
}
.text-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.6; }
.text-body--lg { font-size: var(--fs-body-lg); }
.text-meta {
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
    line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase;
}
.text-interface { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); line-height: 1.3; }

/* Reading measure (§2.3) - cap body columns, never exceed ~70ch */
.measure { max-width: 640px; }

/* ---- 30.2 Buttons - Tier 1 (§5.1) ----
   Reserved for one true commitment moment per screen (§12's 4-moment
   sitewide budget). Two approved forms. ---- */

/* 1A - Dimmer/Toggle CTA */
.btn-t1-dimmer {
    display: inline-flex; align-items: center; gap: var(--sp-16);
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--text-invert);
}
.btn-t1-dimmer__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); }
.btn-t1-dimmer__track {
    position: relative; height: 56px; min-width: 200px; border-radius: 999px;
    background: var(--navy-2); box-shadow: var(--track-recess);
    display: flex; align-items: center; padding: 0 6px;
}
.btn-t1-dimmer__handle {
    width: 44px; height: 44px; border-radius: 50%; background: var(--brass);
    box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.12), 0 0 24px 4px var(--glow-brass);
    transition: transform 200ms var(--ease), background 200ms ease, box-shadow 300ms ease;
    margin-right: auto;
}
.btn-t1-dimmer:hover .btn-t1-dimmer__handle,
.btn-t1-dimmer:focus-visible .btn-t1-dimmer__handle {
    transform: translateX(calc(100% + 12px));
    background: var(--brass-bright);
    box-shadow: 0 0 0 4px rgba(231, 190, 106, 0.16), 0 0 40px 8px var(--glow-brass);
}

/* 1B - Glass Panel CTA */
.btn-t1-glass {
    display: inline-flex; align-items: center; gap: var(--sp-12);
    background: var(--glass-panel); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border); border-radius: 16px;
    padding: var(--sp-16) var(--sp-24); cursor: pointer;
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface);
    color: var(--paper); text-decoration: none;
    transition: transform 120ms var(--ease), box-shadow 120ms ease, border-color 120ms ease;
}
.btn-t1-glass__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--brass); box-shadow: 0 0 16px 4px var(--glow-brass);
}
.btn-t1-glass:hover { transform: translateY(-2px); border-color: rgba(231, 190, 106, 0.32); }
.btn-t1-glass:active { transform: scale(0.97); }

/* ---- 30.3 Buttons - Tier 2 (§5.2) - standard, catalogue/forms/secondary ---- */
.btn-t2 {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
    min-height: 44px; padding: var(--sp-12) var(--sp-24); border-radius: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface);
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}
.btn-t2--brass { background: var(--brass); color: var(--navy); }
.btn-t2--brass:hover { background: var(--brass-deep); }
.btn-t2:disabled { background: var(--paper-2); color: var(--text-muted); cursor: not-allowed; opacity: 0.7; }
.btn-t2:disabled:hover { background: var(--paper-2); }
.btn-t2--navy { background: var(--navy); color: var(--text-invert); }
.btn-t2--navy:hover { background: var(--navy-3); }
.btn-t2--outline { background: transparent; border-color: currentColor; }
.btn-t2--outline:hover { background: rgba(201, 154, 70, 0.08); }

/* ---- 30.4 Buttons - Tier 3 (§5.3) - text links, no container ---- */
.btn-t3 {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    color: currentColor; text-decoration: none; background: none; border: none;
    cursor: pointer; padding: 0; position: relative;
}
.btn-t3::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
    background: currentColor; transition: right 150ms ease;
}
.btn-t3:hover::after { right: 0; }

/* ---- 30.5 Segmented control / pills (§5.4) ---- */
.segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.segmented--dark { background: var(--navy-2); }
.segmented__item {
    border: none; background: transparent; cursor: pointer; font: inherit;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 8px;
    transition: color 120ms ease, background 120ms ease;
}
.segmented--dark .segmented__item { color: var(--text-invert-mut); }
.segmented__item:hover { color: var(--text); }
.segmented--dark .segmented__item:hover { color: var(--text-invert); }
.segmented__item.is-active { background: var(--navy); color: var(--text-invert); }
.segmented--dark .segmented__item.is-active { background: var(--paper); color: var(--text); }

/* ---- 30.6 Icon-key controls (§5.5) - tool panels, quantity steppers ---- */
.icon-keys { display: flex; flex-direction: column; gap: var(--sp-8); }
.icon-keys--row { flex-direction: row; }
.icon-key {
    width: 40px; height: 40px; border-radius: 8px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass-panel); color: var(--paper);
    transition: background 120ms ease-out, color 120ms ease-out;
}
.icon-key:hover { background: var(--navy-3); color: var(--brass-bright); }
.icon-key--light { background: var(--navy-3); }
.icon-key .icon { width: 1.1rem; height: 1.1rem; }

/* ---- 30.7 Neumorphic (Tactile Layer) surface utilities (§4.1) ----
   Applies only to Tactile Layer surfaces (pickers, popups, tool-belts,
   steppers) - never to catalogue grids, cards, or nav/footer chrome. ---- */
.neu-surface { background: var(--neu-base); border-radius: var(--radius); }
.neu-surface--dark { background: var(--neu-base-dark); }
.neu-raised { box-shadow: var(--neu-raised); }
.neu-raised--dark { box-shadow: var(--neu-raised-dark); }
.neu-pressed { box-shadow: var(--neu-pressed); }
.neu-pressed--dark { box-shadow: var(--neu-pressed-dark); }
.neu-recessed { box-shadow: var(--neu-pressed); } /* same technique, applied to containing tracks */
.neu-recessed--dark { box-shadow: var(--neu-pressed-dark); }

/* =====================================================================
   ---- 31. How It Works - space-slider hero, process row, why-grid ----
   DESIGN-SYSTEM.md §5.6, IMPLEMENTATION-INDEX.md §2.2.
   ===================================================================== */
.space-slider__viewport {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 58vh; background: var(--navy); color: var(--text-invert);
}
.space-slider__media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 450ms ease;
}
.space-slider__media.is-active { opacity: 1; }
.space-slider__media--fallback {
    background-image: radial-gradient(ellipse 60% 55% at 30% 40%, rgba(231, 190, 106, 0.22), transparent 68%) !important;
}
.space-slider__inner {
    position: relative; z-index: 1;
    max-width: var(--maxw-wide); margin-inline: auto;
    min-height: 58vh;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 120px 40px 80px;
}
.space-slider__headline { color: var(--text-invert); max-width: 480px; margin-bottom: var(--sp-24); }
.btn-t2--slider { min-height: 40px; height: 40px; padding: 0 var(--sp-24); }
.space-slider__dots {
    position: absolute; bottom: var(--sp-24); left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 1;
}
.space-slider__dot {
    width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: rgba(251, 248, 242, 0.4);
    transition: background 120ms ease-out;
}
.space-slider__dot:not(.is-active):hover { background: rgba(251, 248, 242, 0.7); }
.space-slider__dot.is-active { background: var(--brass); }

.space-slider__tabs { display: flex; background: var(--paper); }
.space-slider__tabs button {
    flex: 1; background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface);
    color: var(--brass-deep); padding: var(--sp-16) var(--sp-8);
    border-top: 2px solid transparent; transition: color 150ms ease, border-color 150ms ease;
}
.space-slider__tabs button:hover { color: var(--text); }
.space-slider__tabs button.is-active { color: var(--text); border-top-color: var(--brass); }

@media (max-width: 640px) {
    .space-slider__viewport, .space-slider__inner { min-height: 40vh; }
    .space-slider__inner { padding: 100px 20px 56px; }
    .space-slider__tabs { flex-wrap: wrap; }
    .space-slider__tabs button { flex: 0 0 50%; font-size: var(--fs-meta); }
}

/* Process row - 6 steps, numbered, exact order */
.process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.process-card { display: flex; flex-direction: column; gap: 0.5rem; }
.process-card__num { color: var(--brass-deep); }
.process-card__icon { display: block; width: 2rem; height: 2rem; color: var(--brass); margin: 0.25rem 0; }
.process-card__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); margin: 0; }
.process-card__body { color: var(--text-muted); margin: 0; }
@media (max-width: 900px) { .process-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-row { grid-template-columns: 1fr; } }

/* Why Choose Nink - 4 icons max */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.why-item { display: flex; flex-direction: column; gap: 0.5rem; }
.why-item__icon { display: block; width: 2rem; height: 2rem; color: var(--brass-bright); margin-bottom: 0.25rem; }
.why-item__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-heading); color: var(--text-invert); margin: 0; }
.why-item__body { color: var(--text-invert-mut); margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   ---- 32. Shop - overlap wordmark hero, filter sidebar, carousel ----
   IMPLEMENTATION-INDEX.md §2.3. ---- */
.shop-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 34vh; display: flex; align-items: center;
    background: var(--navy);
}
.shop-hero--fallback::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 60% at 60% 40%, rgba(231, 190, 106, 0.2), transparent 68%);
}
.shop-hero__bg {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%; object-fit: cover;
}
/* Autoplaying ambient loop - sits over the static image, which stays in
   the DOM underneath as the poster/reduced-motion fallback rather than
   being replaced by it. */
.shop-hero__video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    .shop-hero__video { display: none; }
}
/* Keeps the oversized wordmark legible over a moving video the same way
   it's legible over the static image - independent of how bright or
   busy any given uploaded frame is. */
.shop-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.32), rgba(5, 7, 13, 0.5));
}
.shop-hero__wordmark { color: var(--text-invert); margin: 0; font-size: clamp(4rem, 14vw, 10rem); }

.shop-layout { display: grid; grid-template-columns: 268px 1fr; gap: var(--space-4); align-items: start; }

/* Desktop: the results pane is its own bounded, independently-scrollable
   column, matching the filter sidebar's sticky/contained treatment
   exactly (same top/height) so the two form one fixed two-pane view.
   Scrolling the mouse over the grid scrolls THIS pane's own content
   first; only once its own content runs out does the page underneath
   (recommendations/CTA/footer) start scrolling. This also means
   checking a filter never changes the outer page's height/scroll -
   fewer or more results only affects content inside this pane, so nothing
   below ever shifts and "the whole screen" stays inert on every click. */
.shop-main {
    position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

/* ---- Filter sidebar - always-visible left column, sticky while the grid
   scrolls beside it. Cream/Paper, matching the page (not the dark Navy
   family used elsewhere on the site). ---- */
.shop-filters {
    position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    background: var(--paper);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.shop-filters__inner {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: var(--sp-16) var(--sp-8) var(--space-3);
    display: flex; flex-direction: column; gap: var(--sp-8);
}
.shop-filters__header { padding: 0 var(--sp-8) var(--sp-8); }
.shop-filters__title { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: #1B1710; margin: 0; }

.shop-filters__search {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 var(--sp-8);
    padding: 0.6rem 0.8rem;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--neu-pressed);
}
.shop-filters__search-icon { width: 1rem; height: 1rem; color: #6E6555; flex: none; }
.shop-filters__search input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    font-family: var(--font-body); font-size: var(--fs-interface); color: #1B1710;
}
.shop-filters__search input::placeholder { color: #6E6555; }

.shop-filters__label {
    margin: var(--sp-8) var(--sp-8) 0; font-size: var(--fs-meta); font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: #6E6555;
}

/* ---- Filter group - independent accordion, multiple may be expanded ---- */
.filter-group { border-radius: var(--radius-sm); }
.filter-group__row {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    background: none; border: none; cursor: pointer;
    padding: 0.65rem 0.8rem; border-radius: var(--radius-sm);
    font-family: var(--font-body); text-align: left;
    transition: background 160ms ease;
}
.filter-group__icon { width: 1.05rem; height: 1.05rem; color: #6E6555; flex: none; transition: color 160ms ease; }
.filter-group__label { flex: 1; font-size: var(--fs-interface); font-weight: 500; color: #1B1710; }
.filter-group__badge {
    font-size: var(--fs-meta); font-weight: 600; color: #6E6555;
    background: #EEE4D2; border-radius: 999px; padding: 0.1rem 0.5rem; flex: none;
}
.filter-group__chevron { width: 0.9rem; height: 0.9rem; color: #6E6555; flex: none; transition: color 160ms ease, transform 200ms ease; }

.filter-group.is-expanded .filter-group__row {
    background: #F0E6D2;
    box-shadow: var(--neu-raised);
}
.filter-group.is-expanded .filter-group__icon,
.filter-group.is-expanded .filter-group__chevron { color: var(--brass-deep); }
.filter-group.is-expanded .filter-group__label { font-weight: 600; }
.filter-group.is-expanded .filter-group__chevron { transform: rotate(90deg); }

/* Grid-row trick: animates height smoothly without measuring, no bounce. */
.filter-group__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease;
}
.filter-group.is-expanded .filter-group__panel { grid-template-rows: 1fr; }
.filter-group__panel-inner { overflow: hidden; opacity: 0; transition: opacity 200ms ease; }
.filter-group.is-expanded .filter-group__panel-inner { opacity: 1; }

.filter-group__options {
    list-style: none; margin: 0; padding: 0.4rem 0.8rem 0.4rem 2.4rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
/* .filter-group__options a - the category-switch links used only on a
   category page's own URL (single-select navigation between category
   pages, catalogue.php's isCategoryPage branch). Every other group is
   .filter-option buttons below (real multi-select, DESIGN-SYSTEM.md §18,
   applied in place by shop-filters.js - never a navigation). */
.filter-group__options a,
.filter-option {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    text-decoration: none; color: #6E6555; font-size: var(--fs-interface);
    padding: 0.2rem 0; transition: color 120ms ease;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--font-body);
}
.filter-group__options a:hover,
.filter-option:hover { color: #1B1710; }
.filter-group__options a.is-active,
.filter-option.is-active { color: var(--brass-deep); font-weight: 600; }
.filter-option--clear { color: #6E6555; font-style: italic; }
.filter-option--clear:hover { color: #1B1710; }
.filter-group__option-label { flex: 1; }
.filter-group__option-count { font-size: var(--fs-meta); color: #6E6555; font-weight: 400; }

/* DESIGN-SYSTEM.md §18 - explicit checkbox on every filter option so
   selection is never signalled by colour/weight alone. Real ARIA
   checkbox buttons (role="checkbox"/aria-checked), independent of the
   group's own expand/collapse header - checking one applies the filter
   in place without navigating or closing the panel. */
.filter-checkbox {
    width: 15px; height: 15px; flex: none; border-radius: 4px;
    border: 1.5px solid var(--paper-2); background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.filter-checkbox .icon { width: 11px; height: 11px; color: #FBF8F2; opacity: 0; transition: opacity 120ms ease; }
.filter-option.is-active .filter-checkbox {
    background: var(--brass); border-color: var(--brass);
}
.filter-option.is-active .filter-checkbox .icon { opacity: 1; }

.shop-filters__clear { margin: var(--sp-8) var(--sp-8) 0; align-self: flex-start; }

.product-carousel { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--sp-8); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.product-carousel__item { flex: 0 0 260px; scroll-snap-align: start; }

@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-filters {
        position: static; max-height: none;
        box-shadow: var(--neu-raised);
    }
    .shop-filters__inner { max-height: none; overflow-y: visible; }
    /* Mobile keeps one natural page scroll (filters stacked above the
       grid, VISUAL-DIRECTION.md §7) - the bounded two-pane split-scroll
       is a desktop-only refinement. */
    .shop-main { position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 560px) {
    .product-carousel__item { flex-basis: 220px; }
}

/* =====================================================================
   ---- 33. Our Services - exact Vipp copy (IMPLEMENTATION-INDEX §2.4) ----
   ===================================================================== */
.triptych { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 6px; height: 66vh; }
.triptych__panel { position: relative; display: block; overflow: hidden; height: 100%; }
.triptych__panel .scene { width: 100%; height: 100%; border-radius: 0; transition: transform 250ms var(--ease); }
.triptych__panel:hover .scene { transform: scale(1.03); }
.triptych__panel--narrow { display: flex; align-items: flex-end; justify-content: center; }
.triptych__overlay-btn { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); text-decoration: none; white-space: nowrap; }

/* display:grid already stretches every .service-tile to the row's tallest
   member by default (align-items:normal resolves to stretch for grid
   items) - the tile backgrounds were never actually uneven. What WAS
   uneven: the "View details" button's vertical position, since nothing
   pinned it to the bottom of the (already flex-column) tile - a longer,
   two-line title simply pushed everything below it down by that extra
   line's height. margin-top:auto on the button consumes the flex
   column's remaining free space above it instead, so the button always
   sits at the same baseline regardless of how many lines the title or
   summary take. */
.service-tiles { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.service-tile { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--sp-12); }
.service-tile--light { background: var(--paper-2); color: var(--text); }
.service-tile--dark { background: var(--navy); color: var(--text-invert); }
.service-tile__eyebrow { color: var(--brass-deep); }
.service-tile--dark .service-tile__eyebrow { color: var(--brass-bright); }
.service-tile__icon { display: block; width: 2.2rem; height: 2.2rem; color: var(--brass); margin: var(--sp-8) 0; }
.service-tile__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); margin: 0; }
/* Fraunces' automatic optical-size axis switches to a "display" cut at
   this font-size, whose ampersand is an ornate calligraphic swash -
   legible once you know to expect it, but reads as a broken/stray glyph
   at a glance. Scoped to just this one character (services.php wraps
   only the ampersand in this span) rather than the whole heading -
   disabling optical-sizing on the full title also narrows/widens the
   OTHER letterforms enough to change line-wrapping for titles that
   don't even contain an ampersand. */
.service-tile__amp { font-optical-sizing: none; }
/* "Commercial & Project Supply" (27 characters) wraps to 2 lines at the
   size "Lighting Consultation"/"Residential Lighting" (20-21 characters)
   hold on 1 line. Sized below the largest size that actually renders on
   one line at this tile's real column width (the threshold sits between
   27.76px/28.76px at a 1280px viewport - found by rendering and
   measuring directly at each step, not computed from character counts,
   since font metrics/kerning make a percentage-of-length estimate
   unreliable) with a deliberate safety margin, not the exact edge.
   Checked visually against the other two tiles at this size: it reads
   as a deliberate "long title, proportionally smaller" treatment, not a
   mismatched outlier - the alternative (full size, left to wrap two
   lines) was compared side-by-side and looked like the odd one out in
   the row instead. */
.service-tile__name--compact { font-size: clamp(1.225rem, 0.84vw + 0.98rem, 1.75rem); }
.service-tile__price { color: var(--brass-deep); }
.service-tile--dark .service-tile__price { color: var(--brass-bright); }
.service-tile__summary { color: var(--text-muted); margin: 0 0 var(--sp-8); }
.service-tile--dark .service-tile__summary { color: var(--text-invert-mut); }
.service-tile .btn-t2--outline { margin-top: auto; }
.service-tile--dark .btn-t2--outline { border-color: var(--line-dark); color: var(--text-invert); }
.service-tile--dark .btn-t2--outline:hover { background: rgba(231, 190, 106, 0.1); }

.deep-dive { display: grid; grid-template-columns: 0.85fr 1.15fr; min-height: 60vh; }
.deep-dive__media { position: relative; }
.deep-dive__media .scene { height: 100%; border-radius: 0; }
.deep-dive__content { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-24); padding: var(--space-4) var(--space-4); background: var(--paper-2); }
.deep-dive__content .text-body { max-width: 46ch; color: var(--text-muted); }
.deep-dive__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.project-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); }

@media (max-width: 900px) {
    .triptych { height: 50vh; }
    .service-tiles { grid-template-columns: 1fr; }
    .deep-dive { grid-template-columns: 1fr; }
    .deep-dive__media .scene { aspect-ratio: 16/10; height: auto; }
    .project-feed { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .triptych { grid-template-columns: 1fr; height: auto; }
    .triptych__panel { aspect-ratio: 4/3; }
}

/* =====================================================================
   ---- 34. Projects - dark split intro + editorial cards (§2.5) ----
   ===================================================================== */
.projects-intro { display: grid; grid-template-columns: 0.7fr 1fr; min-height: 74vh; background: var(--navy); }
/* Dark background, but doesn't carry .section--dusk - needs the same
   light-on-dark eyebrow color that class would have applied. */
.projects-intro .section__eyebrow { color: var(--brass-bright); }
.projects-intro__text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: 140px var(--space-4) var(--space-4); color: var(--text-invert); }
.projects-intro__text .display-l { color: var(--text-invert); }
.projects-intro__thumb { width: 150px; }
.projects-intro__thumb .scene { border-radius: var(--radius-sm); }
.projects-intro__media { position: relative; isolation: isolate; background-size: cover; background-position: center; }
.projects-intro__media--fallback::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 60% at 65% 40%, rgba(231, 190, 106, 0.2), transparent 68%);
}

.project-cards { display: flex; flex-direction: column; gap: var(--space-5); }
.editorial-card { display: flex; align-items: stretch; gap: var(--space-4); background: var(--paper-2); border-radius: var(--radius); overflow: hidden; }
.editorial-card--reverse { flex-direction: row-reverse; }
.editorial-card__media { flex: 0 0 42%; }
.editorial-card__media .scene { height: 100%; border-radius: 0; aspect-ratio: auto; }
.editorial-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--space-4); justify-content: center; }
.editorial-card__title { margin: 0; }
.editorial-card__subheading { font-family: var(--font-display); font-style: italic; font-size: var(--fs-heading); color: var(--brass-deep); margin: 0; }
.editorial-card__meta { display: flex; gap: var(--space-4); margin: var(--sp-8) 0; }
.editorial-card__meta dt { color: var(--text-muted); margin: 0 0 0.15rem; }
.editorial-card__meta dd { margin: 0; font-weight: 600; }
.editorial-card__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--sp-8); }
.btn-t2--pill { border-radius: 999px; }

@media (max-width: 900px) {
    .projects-intro { grid-template-columns: 1fr; min-height: auto; }
    .projects-intro__media { min-height: 40vh; }
    .projects-intro__text { padding-top: 110px; }
    .editorial-card, .editorial-card--reverse { flex-direction: column; }
    .editorial-card__media { flex-basis: auto; }
    .editorial-card__media .scene { aspect-ratio: 4/3; }
}

/* =====================================================================
   ---- 35. Request a Quote - entry screen (Stage A) ----
   IMPLEMENTATION-INDEX.md §2.6 / VISUAL-DIRECTION.md §8. 60-30-10:
   full-bleed photo (60%), Paper-white band (30%), Brass accents (10%).
   ===================================================================== */
.qe-hero__media {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 58vh; display: flex; align-items: flex-end;
    background: var(--navy); color: var(--text-invert);
}
.qe-hero__media--fallback::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 60% 55% at 30% 40%, rgba(231, 190, 106, 0.22), transparent 68%);
}
.qe-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
    .qe-hero__bg-video { display: none; }
}
.qe-hero__media::after {
    /* Keeps the overlapping headline legible regardless of the uploaded photo. */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(5, 7, 13, 0.55), transparent 55%);
}

.qe-hero__marker {
    position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 10px; z-index: 1;
}
.qe-hero__marker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-invert-mut); }
.qe-hero__marker-dot.is-active { background: var(--brass-bright); box-shadow: 0 0 8px 1px rgba(231, 190, 106, 0.6); }

.qe-hero__content {
    position: relative; z-index: 1;
    max-width: var(--maxw-wide); margin-inline: auto; width: 100%;
    padding: 140px 40px 64px;
}
.qe-hero__headline { color: var(--text-invert); margin: 0 0 0.6rem; }
.qe-hero__subcopy { color: var(--text-invert-mut); max-width: 46ch; margin: 0; font-size: 0.94rem; }

.qe-band { background: var(--paper); border-bottom: 1px solid var(--line); }
.qe-band__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: var(--space-3); padding-block: var(--space-3);
}
.qe-band__side { display: flex; flex-direction: column; gap: 0.6rem; }
.qe-band__side--video { align-items: flex-end; }
.qe-band__pagination { font-size: var(--fs-meta); color: var(--text-muted); letter-spacing: 0.08em; }
.qe-social { display: flex; gap: 0.7rem; }
.qe-social a { color: var(--brass-deep); display: inline-flex; transition: color 120ms ease; }
.qe-social a:hover { color: var(--brass); }

.qe-entry-paths { display: flex; gap: var(--space-3); width: 100%; max-width: 640px; }
.qe-entry-btn {
    flex: 1; display: flex; align-items: flex-start; gap: 0.7rem;
    border: none; border-radius: 8px; padding: 0.85rem 1.1rem; cursor: pointer;
    text-align: left; font-family: var(--font-body); transition: transform 150ms ease, filter 150ms ease;
}
.qe-entry-btn:hover { transform: translateY(-2px); }
.qe-entry-btn--navy { background: var(--navy); color: var(--text-invert); }
.qe-entry-btn--navy:hover { background: var(--navy-3); }
.qe-entry-btn--brass { background: var(--brass); color: var(--navy); }
.qe-entry-btn--brass:hover { background: var(--brass-deep); }
.qe-entry-btn__icon { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.15rem; }
.qe-entry-btn__text { display: flex; flex-direction: column; gap: 0.25rem; }
.qe-entry-btn__text strong { font-size: 0.98rem; font-weight: 600; }
.qe-entry-btn__text span { font-size: 0.8rem; opacity: 0.75; font-weight: 400; }

.qe-play {
    position: relative; width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--navy); cursor: pointer;
    overflow: hidden; flex: none; padding: 0;
}
.qe-play__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qe-play__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.qe-play.is-playing .qe-play__video { display: block; }
.qe-play.is-playing .qe-play__poster,
.qe-play.is-playing .qe-play__icon { opacity: 0; }
.qe-play__icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-invert); background: rgba(5, 7, 13, 0.28); transition: opacity 150ms ease;
}
.qe-play__icon .icon { width: 1rem; height: 1rem; }

@media (max-width: 900px) {
    .qe-band__inner { grid-template-columns: 1fr; gap: var(--space-2); }
    .qe-band__side { flex-direction: row; align-items: center; justify-content: space-between; }
    .qe-band__side--video { order: -1; justify-content: flex-end; }
    .qe-entry-paths { flex-direction: column; max-width: none; }
    .qe-hero__content { padding: 120px 20px 48px; }
}

/* =====================================================================
   ---- 36. Path A popup - property-type + which-spaces (Stage B) ----
   Paper-family neumorphic Tactile surface (DESIGN-SYSTEM.md §5.7).
   200ms fade only, no slide motion.
   ===================================================================== */
.qe-popup-scrim {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(5, 7, 13, 0.6);
    opacity: 0; transition: opacity 200ms ease;
}
.qe-popup-scrim.is-open { opacity: 1; }

.qe-popup-scrim[hidden],
.qe-popup[hidden] {
    display: none !important;
}

.qe-popup {
    position: fixed; z-index: 201;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 640px); max-height: 86vh; overflow-y: auto;
    background: var(--paper-2); border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(5, 7, 13, 0.35);
    opacity: 0; transition: opacity 200ms ease;
}
.qe-popup.is-open { opacity: 1; }

.qe-popup__header {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: var(--sp-16); position: sticky; top: 0; background: var(--paper-2); z-index: 1;
}
.qe-popup__nav-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised);
    display: flex; align-items: center; justify-content: center; color: var(--text);
    transition: box-shadow 120ms ease;
}
.qe-popup__nav-btn:active { box-shadow: var(--neu-pressed); }
.qe-popup__nav-btn .icon { width: 1rem; height: 1rem; }
.qe-popup__nav-btn[hidden] { visibility: hidden; }
#qePopupBack { justify-self: start; }
#qePopupClose { justify-self: end; }
.qe-popup__steps { display: flex; gap: 8px; justify-self: center; }
.qe-popup__step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.qe-popup__step-dot.is-active { background: var(--brass); }

.qe-popup__body { padding: 0 var(--sp-24) var(--sp-24); }
.qe-popup__panel { display: none; }
.qe-popup__panel.is-active { display: block; }
.qe-popup__title { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 var(--sp-8); }
.qe-popup__hint { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 var(--sp-16); }

.qe-popup__continue {
    width: 100%; margin-top: var(--sp-16); border: none; cursor: pointer;
    background: var(--brass); color: var(--navy); font-weight: 600;
    border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: var(--neu-raised);
    font-family: var(--font-body); font-size: var(--fs-interface);
    transition: background 120ms ease, opacity 120ms ease;
}
.qe-popup__continue:hover:not(:disabled) { background: var(--brass-deep); }
.qe-popup__continue:disabled { opacity: 0.45; cursor: not-allowed; }

.qe-popup__footer { display: flex; gap: var(--sp-12); align-items: center; margin-top: var(--sp-16); }
.qe-popup__back-btn {
    border: none; cursor: pointer; background: var(--paper-2); box-shadow: var(--neu-raised);
    color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-interface);
    border-radius: var(--radius-sm); padding: 0.85rem 1.2rem; flex: none;
}
.qe-popup__back-btn:active { box-shadow: var(--neu-pressed); }
.qe-popup__footer .qe-popup__continue { margin-top: 0; }

/* ---- Property-type step ---- */
.pt-scroll {
    display: flex; gap: var(--sp-12); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: var(--sp-12); border-radius: var(--radius-sm);
    background: var(--paper); box-shadow: var(--neu-pressed);
    overscroll-behavior-x: contain;
}
.pt-btn {
    flex: 0 0 auto; scroll-snap-align: start; min-width: 108px;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    border: none; cursor: pointer; background: var(--paper-2); box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-8);
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--text);
    transition: box-shadow 150ms ease, color 150ms ease;
}
.pt-btn__icon { width: 1.4rem; height: 1.4rem; color: var(--text-muted); }
.pt-btn.is-selected { box-shadow: var(--neu-pressed); color: var(--brass-deep); font-weight: 600; }
.pt-btn.is-selected .pt-btn__icon { color: var(--brass-deep); }

.pt-preview {
    display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16);
    background: var(--paper-2); box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm); padding: var(--sp-16); min-height: 76px;
}
.pt-preview__icon {
    flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--paper-2); box-shadow: var(--neu-raised);
    display: flex; align-items: center; justify-content: center; color: var(--brass-deep);
    transition: opacity 150ms ease;
}
.pt-preview__icon .icon { width: 1.1rem; height: 1.1rem; }
.pt-preview__desc { margin: 0; color: var(--text-muted); font-size: 0.9rem; transition: opacity 150ms ease; }
.pt-preview__icon.is-fading, .pt-preview__desc.is-fading { opacity: 0; }

.pt-subtype-wrap {
    margin-top: var(--sp-12);
    padding: var(--sp-12);
    background: var(--paper-2);
    box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm);
}
.pt-subtype-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nink-navy);
    margin-bottom: 6px;
}
.pt-subtype-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.88rem;
    color: var(--text);
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--neu-pressed);
}
.pt-subtype-select:focus {
    border-color: var(--nink-orange);
}

.qe-ask-handoff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: var(--sp-16) 0 var(--sp-8);
    padding: 10px 14px;
    background: rgba(230, 92, 0, 0.05);
    border: 1px dashed rgba(230, 92, 0, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
}
.qe-ask-handoff span {
    color: var(--text-muted);
}
.qe-ask-handoff__link {
    color: var(--nink-orange);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.qe-ask-handoff__link:hover {
    text-decoration: underline;
}

.ws-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: var(--sp-12);
}
.ws-filter-btn {
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: 1px solid var(--nink-border);
    background: var(--paper-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ws-filter-btn.is-active {
    background: var(--nink-navy);
    color: #FFFFFF;
    border-color: var(--nink-navy);
}

/* ---- Which-spaces step ---- */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-12); }
.ws-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    background: var(--paper-2); box-shadow: var(--neu-raised);
    border-radius: var(--radius-sm); padding: var(--sp-16) var(--sp-8);
    transition: box-shadow 150ms ease;
}
.ws-tile.is-added { box-shadow: var(--neu-pressed); }
.ws-tile__icon { width: 1.4rem; height: 1.4rem; color: var(--text-muted); }
.ws-tile.is-added .ws-tile__icon { color: var(--brass-deep); }
.ws-tile__label { font-size: 0.86rem; font-weight: 500; color: var(--text); text-align: center; }
.ws-tile__control { display: flex; align-items: center; justify-content: center; min-height: 34px; }
.ws-tile__add {
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); color: var(--brass-deep);
    display: flex; align-items: center; justify-content: center;
}
.ws-tile__add:active { box-shadow: var(--neu-pressed); }
.ws-tile__add .icon { width: 0.85rem; height: 0.85rem; }
.ws-tile__add[hidden] { display: none; }
.ws-tile__stepper { display: flex; align-items: center; gap: 0.5rem; }
.ws-tile__stepper[hidden] { display: none; }
.ws-tile__step-btn {
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); color: var(--text);
    display: flex; align-items: center; justify-content: center;
}
.ws-tile__step-btn:active { box-shadow: var(--neu-pressed); }
.ws-tile__step-btn .icon { width: 0.7rem; height: 0.7rem; }
.ws-tile__count { min-width: 1.2rem; text-align: center; font-weight: 600; font-size: 0.92rem; }

.ws-summary { margin: var(--sp-16) 0 0; font-size: 0.88rem; color: var(--text-muted); font-weight: 500; }

@media (max-width: 767px) {
    /* Robust Mobile Flow Architecture (Section 4):
       - Viewport shell based on 100dvh
       - Independently scrolling content region
       - Sufficient bottom padding for persistent nav
       - Sticky action footer ABOVE the persistent bottom nav
       - Account for env(safe-area-inset-bottom) */
    .qe-popup {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        transform: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 1000;
        box-sizing: border-box;
        padding-bottom: var(--bottom-nav-height, calc(64px + env(safe-area-inset-bottom, 10px)));
    }

    .qe-popup__header {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 5;
        border-bottom: 1px solid var(--line);
    }

    .qe-popup__body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        padding: 0 var(--sp-16) var(--sp-16);
        min-height: 0;
    }

    .qe-popup__panel.is-active {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Shared Mobile Flow Footer Pattern */
    .qe-popup__footer,
    .mobile-flow-footer {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        background: var(--paper-2);
        padding: var(--sp-12) 0 var(--sp-8);
        margin-top: auto;
        z-index: 10;
        border-top: 1px solid var(--line);
        display: flex;
        gap: var(--sp-12);
        align-items: center;
        box-shadow: 0 -4px 12px rgba(5, 7, 13, 0.05);
    }

    .qe-popup__continue {
        margin-top: 0;
    }

    /* Selection flows clearance above persistent bottom nav */
    .qe-tiers,
    .qe-canvas,
    .qe-plan,
    .qe-submit {
        padding-bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 10px) + var(--sp-32));
    }
}

/* =====================================================================
   ---- 37. Choose your lighting approach - tier selector (Stage C) ----
   VISUAL-DIRECTION.md §11B. Flat/Showroom layer for the scene, neumorphic
   Tactile layer for the card row - same layer boundary as everywhere else.
   ===================================================================== */
/* Fixed floating header (heroFloat) overlaps whatever scrolls to the very
   top of the viewport - scroll-margin-top keeps scrollIntoView() targets
   clear of it, same 90px offset used for Shop's sticky filter sidebar. */
.qe-tiers, #qeSelectionSummary { scroll-margin-top: 90px; }

.qe-tiers__eyebrow {
    font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.1em;
    color: var(--text-muted); margin: 0 0 var(--sp-12);
}
.qe-tiers__scene { position: relative; margin-bottom: var(--space-3); }
.qe-tiers__scene-inner { aspect-ratio: 21 / 9; }
.qe-tiers__scene-badge {
    position: absolute; bottom: var(--sp-16); left: var(--sp-16);
    background: var(--glass-panel); border: 1px solid var(--glass-border); backdrop-filter: blur(8px);
    color: var(--text-invert); font-size: var(--fs-meta); font-weight: 600;
    padding: 0.4rem 0.8rem; border-radius: 999px;
}

.qe-tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16); }
.qe-tier-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
    background: var(--paper-2); box-shadow: var(--neu-raised); border: none; cursor: pointer;
    border-radius: var(--radius-sm); padding: var(--sp-16); text-align: left;
    font-family: var(--font-body); transition: box-shadow 150ms ease;
}
.qe-tier-card.is-selected { box-shadow: var(--neu-pressed); }
.qe-tier-card__badge {
    position: absolute; top: -10px; right: var(--sp-12);
    background: var(--brass); color: var(--navy); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 999px;
}
.qe-tier-card__radio {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none;
    position: relative;
}
.qe-tier-card.is-selected .qe-tier-card__radio { border-color: var(--brass-deep); }
.qe-tier-card.is-selected .qe-tier-card__radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brass-deep);
}
.qe-tier-card__name { font-family: var(--font-display); font-size: 1.15rem; }
.qe-tier-card__tagline { font-size: 0.84rem; color: var(--text-muted); }
.qe-tier-card__price { font-size: 0.8rem; color: var(--brass-deep); font-weight: 600; margin-top: 0.25rem; }

.qe-tiers__description { color: var(--text-muted); margin: var(--space-3) 0 var(--sp-8); font-size: 0.96rem; }
.qe-tiers__includes { margin: 0 0 var(--space-3); padding-left: 1.2rem; color: var(--text); }
.qe-tiers__includes li { margin-bottom: 0.3rem; }

@media (max-width: 720px) {
    .qe-tier-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   ---- 38. Path B - room selector + product browser (Stage D) ----
   VISUAL-DIRECTION.md §9A. Same popup shell/surface language as Path A.
   ===================================================================== */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-12); }
.room-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    background: var(--paper-2); box-shadow: var(--neu-raised); border: none; cursor: pointer;
    border-radius: var(--radius-sm); padding: var(--sp-24) var(--sp-8);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text);
    transition: box-shadow 150ms ease;
}
.room-tile:hover { box-shadow: var(--neu-pressed); }
.room-tile__icon { width: 1.6rem; height: 1.6rem; color: var(--brass-deep); }

.pb-scene { margin-bottom: var(--sp-16); }
.pb-scene-inner { aspect-ratio: 21 / 9; }

.pb-tabs {
    display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: var(--sp-8); margin-bottom: var(--sp-16);
    overscroll-behavior-x: contain;
}
.pb-tab {
    flex: none; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer;
    border-radius: 999px; padding: 0.45rem 1rem; font-family: var(--font-body); font-size: 0.84rem;
    font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: all 120ms ease;
}
.pb-tab:hover { border-color: var(--brass); }
/* Already has a line in the current space's plan (pre-filled or manually
   added) - distinct from .is-active, which marks whichever category is
   currently open in the picker below. Declared before .is-active so the
   "open" state visually wins when a chip is both. */
.pb-tab.is-added { border-color: var(--brass-deep); color: var(--brass-deep); font-weight: 600; }
.pb-tab.is-added::before { content: "✓ "; }
.pb-tab.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }

.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-16); margin-bottom: var(--sp-16); }
.pb-card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-sm); overflow: hidden; }
.pb-card__media { aspect-ratio: 1 / 1; background: var(--navy-2); }
.pb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-card__body { padding: var(--sp-8) 0.2rem; }
.pb-card__name { font-size: 0.86rem; font-weight: 500; margin: 0 0 0.3rem; line-height: 1.3; }
.pb-card__meta { display: flex; align-items: center; gap: 0.4rem; }
.pb-card__price { font-size: 0.82rem; color: var(--text-muted); }
.pb-card__actions { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem; }
.pb-add {
    border: none; cursor: pointer; background: var(--brass); color: var(--navy); font-weight: 600;
    font-size: 0.78rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); font-family: var(--font-body);
    transition: background 120ms ease;
}
.pb-add:hover { background: var(--brass-deep); }
.pb-add.is-added { background: var(--paper-2); color: var(--text-muted); box-shadow: var(--neu-pressed); }

.pb-selection { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-16); min-height: 1px; }
.pb-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.35rem 0.5rem 0.35rem 0.9rem; font-size: 0.84rem; color: var(--text);
}
.pb-chip button {
    border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1rem;
    line-height: 1; padding: 0 0.2rem;
}
.pb-chip button:hover { color: var(--danger, #9A3527); }

/* =====================================================================
   ---- 39. Add Lighting working canvas (Stage E) ----
   VISUAL-DIRECTION.md §11, DESIGN-SYSTEM.md §5.7A. All three visual
   layers at once: Architectural (tabs/grid), Showroom (scene), Tactile
   (the add-lighting panel) - the richest composite screen on the site.
   ===================================================================== */
.qe-canvas { scroll-margin-top: 90px; }
.qe-canvas__eyebrow {
    text-align: center; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.1em;
    color: var(--brass-deep); text-transform: uppercase; margin: 0 0 var(--sp-16);
}
.qe-canvas__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.qe-canvas__tabs { display: flex; gap: 0.6rem; overflow-x: auto; justify-content: center; overscroll-behavior-x: contain; }
.qe-canvas__tab {
    flex: none; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-muted); background: var(--paper-2); border: none; border-radius: 999px;
    padding: 0.4rem 0.9rem; cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.qe-canvas__tab:hover:not(.is-current) { background: var(--paper); color: var(--text); }
.qe-canvas__tab.is-current { background: var(--brass); color: var(--navy); cursor: default; }
.qe-canvas__tab.is-done { color: var(--brass-deep); }

.qe-canvas__prefill {
    background: rgba(201, 154, 70, 0.12); border: 1px solid var(--line); color: var(--text);
    padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: 0.86rem; margin-bottom: var(--sp-16);
}

.qe-canvas__scene { position: relative; }

/* Icon marker + warm glow overlay (DESIGN-SYSTEM.md §5.7A, VISUAL-
   DIRECTION.md §11 v3 "Markers are category icons, not plain dots") -
   full-bleed layer over the scene photo; each .qe-marker is placed at
   its own left/top % (set inline per marker, quote-entry.js's
   markerPosition()), not stacked in a bottom strip. Shared by the Add
   Lighting canvas (#qeCanvasMarkers) and the Live Lighting Plan's space
   switcher (#qePlanMarkers, §12 v2), which additionally makes each
   marker a clickable button that opens a price popover. */
.qe-canvas__markers { position: absolute; inset: 0; z-index: 2; }
.qe-marker {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 0.4rem;
    background: none; border: none; padding: 0; cursor: default; font-family: var(--font-body);
    opacity: 0; animation: qeMarkerIn 200ms ease forwards;
}
button.qe-marker { cursor: pointer; }
.qe-marker.is-leaving { animation: qeMarkerOut 180ms ease forwards; }
@keyframes qeMarkerIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes qeMarkerOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }

/* Soft radial warm glow behind each badge - multiple glows overlap and
   accumulate (mix-blend-mode: screen) as more fixtures are added, per
   the "perceived room brightening" effect §5.7A calls for, without
   touching the underlying photo. */
.qe-marker__glow {
    position: absolute; left: 50%; top: 50%; width: 84px; height: 84px;
    transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, var(--glow-brass) 0%, rgba(231, 190, 106, 0.18) 45%, transparent 72%);
    mix-blend-mode: screen;
}
.qe-marker__badge {
    position: relative; z-index: 1; flex: none;
    width: 22px; height: 22px; border-radius: 50%; background: var(--brass);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(5, 7, 13, 0.4);
}
.qe-marker__badge .icon { width: 13px; height: 13px; color: var(--navy); }
/* Switches & Sockets - rounded-square ti-plug badge at wall/socket
   height rather than the circular ceiling/task-height badge. */
.qe-marker--square .qe-marker__badge { width: 18px; height: 18px; border-radius: 5px; }
.qe-marker__label {
    position: relative; z-index: 1; white-space: nowrap;
    background: var(--glass-panel); border: 1px solid var(--glass-border); backdrop-filter: blur(8px);
    color: var(--text-invert); font-size: 0.72rem; font-weight: 600; line-height: 1.2;
    padding: 0.25rem 0.6rem; border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
    .qe-marker { animation: none; opacity: 1; }
    .qe-marker.is-leaving { animation: none; }
}

.qe-canvas__panel {
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius-sm);
    padding: var(--sp-24); margin-top: var(--sp-16);
}
.qe-canvas__panel-title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.2rem; }
.qe-canvas__panel-hint { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 var(--sp-16); }

.qe-canvas__product-picker { margin-top: var(--sp-16); }
.qe-canvas__product-row { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); overscroll-behavior-x: contain; }
.qe-canvas__product-thumb {
    flex: none; width: 84px; display: flex; flex-direction: column; gap: 0.4rem; border: none; cursor: pointer;
    background: var(--paper); border-radius: var(--radius-sm); padding: 0.4rem; text-align: center;
    box-shadow: var(--neu-raised); transition: box-shadow 120ms ease;
}
.qe-canvas__product-thumb.is-selected { box-shadow: var(--neu-pressed); }
.qe-canvas__product-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; background: var(--navy-2); }
.qe-canvas__product-thumb span { font-size: 0.7rem; color: var(--text); line-height: 1.25; }

.qe-canvas__add-row { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-16); }
.qe-canvas__stepper { background: var(--paper); border-radius: 999px; padding: 0.3rem 0.7rem; box-shadow: var(--neu-pressed); }
.qe-canvas__add-btn { padding: 0.55rem 1.2rem; }

.qe-canvas__summary-heading { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); margin: var(--sp-24) 0 var(--sp-8); }

@media (max-width: 720px) {
    /* Scoped to #qeCanvas specifically - its header has a 3rd "tabs" child
       that needs to wrap to its own row. #qePlan and #qeSubmit reuse this
       same header class but only have back/title/close (no tabs row), so
       they must keep the original 3-column grid or the 3rd child (close)
       wraps underneath the 1st (back) instead of sitting on the right. */
    #qeCanvas .qe-canvas__header { grid-template-columns: auto auto; }
    .qe-canvas__tabs { order: 3; grid-column: 1 / -1; justify-content: flex-start; }
}

/* =====================================================================
   ---- 40. Live Lighting Plan review (Stage F) ----
   VISUAL-DIRECTION.md §12. Both quotation paths converge here - one of
   the site's 4 budgeted Tier-1 tactile moments (Submit for expert review).
   ===================================================================== */
.qe-plan { scroll-margin-top: 90px; }
.qe-plan__switcher { justify-content: center; margin-bottom: var(--sp-16); }

.qe-plan__popover {
    position: relative; margin-top: -var(--sp-8); margin-bottom: var(--sp-16);
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius-sm);
    padding: var(--sp-16); display: flex; flex-direction: column; gap: 0.2rem;
}
.qe-plan__popover strong { font-family: var(--font-display); font-size: 1.05rem; }
.qe-plan__popover span { color: var(--text-muted); font-size: 0.86rem; }

.qe-plan__estimate {
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius-sm);
    padding: var(--sp-24); margin-top: var(--sp-16);
}
.qe-plan__estimate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-16); }
.qe-plan__estimate-head h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.qe-plan__tier-badge {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    background: var(--brass); color: var(--navy); padding: 0.25rem 0.7rem; border-radius: 999px;
}
.qe-plan__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.qe-plan__row { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--text-muted); }
.qe-plan__row.is-current { color: var(--text); font-weight: 600; }
.qe-plan__total {
    display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-16);
    padding-top: var(--sp-16); border-top: 1px solid var(--line);
    font-family: var(--font-display); font-size: 1.3rem; color: var(--brass-deep); font-weight: 600;
}

.qe-plan__trust { color: var(--text-muted); font-size: 0.86rem; text-align: center; margin: var(--sp-16) 0; }

/* On a Paper/light section (unlike .btn-t1-dimmer's usual dark-band
   placement) - the base component's --text-invert label would be
   near-white on a near-white page, so this variant overrides it. */
.btn-t1-dimmer--full { width: 100%; justify-content: space-between; color: var(--text); }
.btn-t1-dimmer--full .btn-t1-dimmer__track { flex: 1; }

/* =====================================================================
   ---- 41. Submit for Expert Review (Stage G) ----
   VISUAL-DIRECTION.md §12A, DESIGN-SYSTEM.md §5.7C. The one point in the
   flow that's genuinely a form, not a picker/canvas - recessed
   neumorphic fields (inverted from raised buttons), plan recap strip in
   dark Navy, real submission through the existing pipeline.
   ===================================================================== */
.qe-recap {
    background: var(--navy-2); color: var(--text-invert); border-radius: var(--radius-sm);
    padding: var(--sp-16) var(--sp-24); margin-bottom: var(--space-3);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; font-size: 0.9rem;
}
.qe-recap strong { color: var(--brass-bright); font-family: var(--font-display); font-size: 1.05rem; }

.qe-form-field { margin-bottom: var(--space-2); }
.qe-form-field label {
    display: block; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;
}
.qe-form-field input, .qe-form-field textarea {
    width: 100%; border: none; border-radius: var(--radius-sm); background: var(--paper-2);
    box-shadow: var(--neu-pressed); padding: 0.75rem 1rem; font-family: var(--font-body);
    font-size: var(--fs-interface); color: var(--text);
}
.qe-form-field input:focus-visible, .qe-form-field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.qe-form-field textarea { resize: vertical; }
.qe-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.qe-contact-method { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.qe-contact-method__option {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: 999px;
    padding: 0.6rem 1rem; font-size: 0.9rem; color: var(--text); transition: box-shadow 120ms ease;
}
.qe-contact-method__option .icon { width: 1rem; height: 1rem; color: var(--text-muted); }
.qe-contact-method__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.qe-contact-method__option:has(input:checked) { box-shadow: var(--neu-pressed); color: var(--brass-deep); font-weight: 600; }
.qe-contact-method__option:has(input:checked) .icon { color: var(--brass-deep); }
/* The radio itself is visually hidden at 0x0, so a keyboard focus ring on
   it would be invisible - apply it to the visible label wrapper instead. */
.qe-contact-method__option:has(input:focus-visible) { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

.qe-form-error {
    background: #F6E2DE; color: #9A3527; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.86rem; margin-bottom: var(--space-2);
}

@media (max-width: 560px) {
    .qe-form-row { grid-template-columns: 1fr; }
}

/* These sections are only ever focused programmatically (moving
   accessibility focus when a new step appears, VISUAL-DIRECTION.md's
   flow has no page navigations to do this automatically) - never a
   real Tab stop, so no visible ring is needed here. */
#qeTiers:focus-visible, #qeCanvas:focus-visible, #qePlan:focus-visible, #qeSubmit:focus-visible { outline: none; }

/* =====================================================================
   ---- 42. Admin shell + sidebar (DESIGN-SYSTEM.md §16) ----
   Phase 2 preview - dark neumorphic nav, reference pattern for admin
   UI generally once the full build starts. Same Navy/Brass tokens and
   neumorphic Tactile Layer technique as the customer-facing quote flow
   (mirrors .nav-drawer's active-pill/scrim/overlay mechanics directly).
   ===================================================================== */
/* clip avoids creating a second scroll container that disables sticky navigation. */
.admin-body { background: var(--paper); overflow-x: clip; overflow-y: visible; }
.admin-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.admin-sidebar-scrim {
    position: fixed; inset: 0; z-index: 89;
    background: rgba(2, 3, 7, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease;
}
.admin-sidebar-scrim.is-open { opacity: 1; visibility: visible; }

.admin-sidebar {
    flex: none; width: 264px; height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto;
    background: var(--navy-2); color: var(--text-invert);
    display: flex; flex-direction: column;
    padding: var(--sp-16) var(--sp-16) var(--sp-24);
    position: sticky; top: 0;
    transition: width 220ms var(--ease);
}

.admin-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-24); flex: none; }
.admin-sidebar__logo { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.04em; color: var(--text-invert); white-space: nowrap; overflow: hidden; }
.admin-sidebar__logo-img { display: block; height: 24px; width: auto; }
.admin-sidebar__collapse {
    width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none;
    background: none; border: none; color: var(--text-invert-mut); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease;
}
.admin-sidebar__collapse .icon { width: 1.1rem; height: 1.1rem; }
.admin-sidebar__collapse:hover { color: var(--text-invert); background: var(--navy-3); }

.admin-sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: none; margin-bottom: var(--sp-24); }
.admin-sidebar__item {
    display: flex; align-items: center; gap: var(--sp-16);
    width: 100%; padding: 11px 14px; border-radius: 14px;
    text-decoration: none; color: #8892a3;
    transition: color 150ms ease;
}
.admin-sidebar__item:hover { color: #b7bece; }
.admin-sidebar__item .icon { width: 1.15rem; height: 1.15rem; color: #5c6577; flex: none; transition: color 150ms ease; }
.admin-sidebar__item:hover .icon { color: #7a8494; }
.admin-sidebar__item-label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-interface); white-space: nowrap; overflow: hidden; flex: 1; }
.admin-sidebar__count { font-size: var(--fs-meta); color: #6b7484; font-weight: 500; flex: none; }

/* Only the active item gets the raised pill - dark-variant neumorphism,
   reserved for the active item only (§16.2). */
.admin-sidebar__item.is-active { background: #111E24; box-shadow: var(--neu-raised-dark); }
.admin-sidebar__item.is-active:hover { color: #8892a3; }
.admin-sidebar__item.is-active .icon { color: var(--brass-bright); }
.admin-sidebar__item.is-active .admin-sidebar__item-label { color: var(--paper); font-weight: 600; }

/* ---- Video showcase panel ---- */
.admin-sidebar__video { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.admin-video {
    position: relative; isolation: isolate; overflow: hidden;
    background: rgba(10, 16, 32, 0.7); border-radius: 14px;
    aspect-ratio: 16 / 9; width: 100%;
}
.admin-video__poster, .admin-video__el {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    .admin-video__el { display: none; }
}
.admin-video__dot {
    position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brass-bright); box-shadow: 0 0 6px 1px rgba(231, 190, 106, 0.7);
    animation: adminVideoPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .admin-video__dot { display: none; }
}
@keyframes adminVideoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}
.admin-video__badge {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    background: var(--brass); color: var(--navy); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.03em; padding: 0.25rem 0.6rem; border-radius: 999px;
}
.admin-video__caption { margin: var(--sp-12) 4px 0; font-size: 0.84rem; color: var(--text-invert-mut); }

/* ---- Collapsed (desktop icon-rail) state ---- */
.admin-sidebar.is-collapsed { width: 76px; }
.admin-sidebar.is-collapsed .admin-sidebar__logo,
.admin-sidebar.is-collapsed .admin-sidebar__logo-img,
.admin-sidebar.is-collapsed .admin-sidebar__item-label,
.admin-sidebar.is-collapsed .admin-sidebar__count,
.admin-sidebar.is-collapsed .admin-sidebar__video { display: none; }
.admin-sidebar.is-collapsed .admin-sidebar__head { justify-content: center; }
.admin-sidebar.is-collapsed .admin-sidebar__item { justify-content: center; padding: 11px; }

/* ---- Admin content + mobile topbar ---- */
.admin-content { flex: 1; min-width: 0; }
.admin-topbar { display: none; padding: var(--sp-12) var(--sp-16); border-bottom: 1px solid var(--line); }
.admin-topbar__menu {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--paper-2); border: none; color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.admin-topbar__menu .icon { width: 1.1rem; height: 1.1rem; }
.admin-main { min-height: 60vh; }

@media (max-width: 900px) {
    body:has(.admin-sidebar.is-open) { overflow: hidden; }
}

@media (max-width: 900px) {
    .admin-topbar { display: flex; position: sticky; top: 0; z-index: 88; background: var(--paper); }
    /* Mobile: the sidebar is never docked - always an off-canvas overlay,
       never covering the full screen (§16.3), max ~50% viewport width. */
    .admin-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
        width: 50%; min-width: 280px; max-width: 420px;
        box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.6);
        transform: translateX(-100%); visibility: hidden;
        transition: transform 280ms var(--ease), visibility 0s 280ms;
    }
    .admin-sidebar.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
    .admin-sidebar.is-collapsed { width: 50%; min-width: 280px; max-width: 420px; }
    .admin-sidebar.is-collapsed .admin-sidebar__logo,
    .admin-sidebar.is-collapsed .admin-sidebar__logo-img,
    .admin-sidebar.is-collapsed .admin-sidebar__item-label,
    .admin-sidebar.is-collapsed .admin-sidebar__count,
    .admin-sidebar.is-collapsed .admin-sidebar__video { display: block; }
    .admin-sidebar.is-collapsed .admin-sidebar__video { display: flex; flex-direction: column; }
    .admin-sidebar.is-collapsed .admin-sidebar__head { justify-content: space-between; }
    .admin-sidebar.is-collapsed .admin-sidebar__item { justify-content: flex-start; padding: 11px 14px; }
}

/* =====================================================================
   ---- 43. Resume-Quotation badge + "My Quotations" popover ----
   DESIGN-SYSTEM.md §17 / VISUAL-DIRECTION.md §14B. Browser-only, no
   login - see quote-sessions.js.
   ===================================================================== */
.quote-nav-badge {
    position: absolute; top: -4px; right: -4px; z-index: 2;
    min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px; background: var(--navy); border: 1.5px solid var(--brass);
    color: var(--brass); font-size: 0.62rem; font-weight: 700; font-family: var(--font-body);
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.quote-nav-badge[role="button"] { cursor: pointer; }
.quote-nav-badge[role="button"]:hover { background: var(--navy-3); }

.qsp-scrim { position: fixed; inset: 0; z-index: 199; background: transparent; }
.qsp {
    position: absolute; z-index: 200; width: min(92vw, 340px);
    background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius);
    padding: var(--sp-16); opacity: 0; animation: qspIn 150ms ease forwards;
}
@keyframes qspIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.qsp__heading { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 var(--sp-12); color: var(--text); }
.qsp__list { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.qsp__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
    background: var(--paper); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
}
.qsp__row-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.86rem; }
.qsp__row-text strong { font-weight: 600; color: var(--text); }
.qsp__row-text span { color: var(--text-muted); font-size: 0.78rem; }
.qsp__new { width: 100%; justify-content: center; text-align: center; }

/* ---- Resumed-session "start fresh" strip inside the quote flow ----
   /quote uses the float-then-solidify header ($heroFloat), which is
   position:fixed and transparent so it can sit over the dark hero. The
   strip renders before the hero, as opaque page content rather than a
   hero backdrop, so - unlike the hero - it needs its own clearance to
   avoid sitting underneath the fixed header. */
#qeResumeStripWrap:not([hidden]) { padding-top: calc(70px + var(--sp-16)); }
.qe-resume-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16);
    background: rgba(201, 154, 70, 0.12); border: 1px solid var(--line); color: var(--text);
    padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin: 0 0 var(--sp-16); font-size: 0.9rem;
}
.qe-resume-strip strong { color: var(--brass-deep); }

/* =====================================================================
   ---- 44. Admin product upload - Bulk Add, Group/Multi-Angle Add,
   Presets (DESIGN-SYSTEM.md §16A) ----
   Mobile-first by requirement: checkbox lists and pill tags sized for
   touch (44px min target), single-column stacking, no dense desktop
   forms. Reuses the Shop filter's .filter-checkbox glyph (§18) and the
   quotation canvas's .pb-tab pill (§11) rather than inventing new
   selection affordances.
   ===================================================================== */
.admin-page { padding-block: var(--space-4); }
.admin-page__head { margin-bottom: var(--space-3); }
.admin-page__title { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 0.35rem; }
.admin-page__lead { color: var(--text-muted); margin: 0; }
.admin-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-2); }

.admin-notice, .admin-error {
    padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: var(--space-3); font-size: 0.92rem;
}
.admin-notice { background: rgba(201,154,70,0.14); color: var(--text); border: 1px solid var(--line); }
.admin-error { background: #F6E2DE; color: #9A3527; }

/* Description Assistant (Phase 6B) - component-scoped only, no existing
   selector touched. */
.description-assistant { background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--space-2); }
.description-assistant__style-label { display: block; font-size: 0.85rem; font-weight: 600; margin: var(--space-2) 0 0.35rem; }
.description-assistant__warning { background: rgba(201,154,70,0.14); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 0.88rem; margin-top: var(--space-2); }
.description-assistant__error { background: #F6E2DE; color: #9A3527; border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 0.88rem; margin-top: var(--space-2); }
.description-assistant__facts { margin-top: var(--space-2); font-size: 0.85rem; }
.description-assistant__facts summary { cursor: pointer; font-weight: 600; }
.description-assistant__fact-row { margin: 0.2rem 0; color: var(--text-muted); }
.description-assistant__suggestions { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.description-assistant__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2); }
.description-assistant__card-text { white-space: pre-wrap; margin: 0 0 0.6rem; }
@media (max-width: 560px) {
    .description-assistant { padding: var(--space-1); }
}

/* Three-mode entry cards (Single / Bulk / Group) */
.admin-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.admin-mode-card {
    display: block; background: var(--paper-2); box-shadow: var(--neu-raised); border-radius: var(--radius);
    padding: var(--space-3); text-decoration: none; color: var(--text); transition: box-shadow 150ms ease;
}
.admin-mode-card:hover { box-shadow: var(--neu-pressed); }
.admin-mode-card.is-disabled { opacity: 0.55; pointer-events: none; }
.admin-mode-card__icon { width: 1.7rem; height: 1.7rem; color: var(--brass-deep); margin-bottom: var(--sp-12); }
.admin-mode-card__name { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.3rem; }
.admin-mode-card__body { font-size: 0.88rem; color: var(--text-muted); margin: 0; }
.admin-mode-card__badge {
    display: inline-block; margin-top: var(--sp-8); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.admin-presets-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-3); }

/* Upload grid - thumbnails + "+" add tile */
.admin-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); margin-bottom: var(--space-3); align-items: start; }
.admin-thumb-cell { display: flex; flex-direction: column; gap: 6px; }
.admin-thumb {
    position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--paper-2); box-shadow: var(--neu-raised);
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-thumb__remove {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(5,7,13,0.72); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.admin-thumb__remove .icon { width: 0.85rem; height: 0.85rem; }
.admin-thumb__position {
    position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 5px;
    border-radius: 999px; background: var(--brass); color: var(--navy); font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.admin-thumb__move { position: absolute; bottom: 6px; display: flex; gap: 4px; left: 6px; right: 6px; justify-content: space-between; }
.admin-thumb__move button {
    width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(5,7,13,0.72); color: #fff; display: flex; align-items: center; justify-content: center;
}
.admin-thumb__move button .icon { width: 0.8rem; height: 0.8rem; }
.admin-thumb__move button:disabled { opacity: 0.35; cursor: default; }
.admin-thumb__title {
    width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px;
    padding: 0.3rem 0.5rem; font-size: 0.78rem; font-family: var(--font-body); background: var(--paper);
}
/* Same-batch duplicate-title flag (Phase 11 SEO audit §3) - advisory
   only, mirrors the .admin-error palette already used for real errors. */
.admin-thumb__title--duplicate { border-color: #9A3527; box-shadow: 0 0 0 1px #9A3527 inset; }

/* ---- Product Name Bank widget (migration 040) - one per Bulk Add
   thumbnail, a local-database suggestion list, no external API. ---- */
.admin-namebank { position: relative; margin-top: 6px; }
.admin-namebank__toggle {
    width: 100%; text-align: left; font-size: 0.72rem; padding: 0.3rem 0.5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-namebank__panel {
    position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: max(220px, 100%);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem;
}
/* The [hidden] attribute alone does nothing here: this rule's own
   `display: flex` above has higher specificity than the browser's
   default `[hidden] { display: none }`, so setting the DOM property
   `panel.hidden = true` silently failed to hide it - JS logic (title
   fill, "Using: ..." text) all ran correctly, only the panel's own
   visibility never actually changed. This is the fix. */
.admin-namebank__panel[hidden] { display: none; }
.admin-namebank__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.admin-namebank__panel-title { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-namebank__close {
    flex: none; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); color: var(--text); display: flex; align-items: center; justify-content: center;
}
.admin-namebank__close .icon { width: 0.7rem; height: 0.7rem; }
.admin-namebank__close:hover { background: var(--line); }
.admin-namebank__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
/* Same [hidden]-vs-`display` cascade issue as .admin-namebank__panel
   above, in a new spot (the More Filters group uses this same class) -
   fixed the same way. */
.admin-namebank__filters[hidden] { display: none; }
.admin-namebank__filters--more { margin-top: -0.1rem; }
.admin-namebank__more-toggle {
    align-self: flex-start; background: none; border: none; cursor: pointer; padding: 0.15rem 0;
    font-size: 0.7rem; font-weight: 600; color: var(--brass-deep); text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-namebank__more-toggle:hover { color: var(--brass); }
.admin-namebank__filter { font-size: 0.72rem; padding: 0.25rem 0.35rem; }
.admin-namebank__search { font-size: 0.78rem; padding: 0.3rem 0.5rem; }
.admin-namebank__results {
    max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem;
}
.admin-namebank__result {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
    text-align: left; background: var(--paper-2); border: 1px solid transparent; border-radius: 6px;
    padding: 0.35rem 0.5rem; font-size: 0.78rem; font-family: var(--font-body); cursor: pointer;
}
.admin-namebank__result:hover { border-color: var(--brass); }
.admin-namebank__result-meta { font-size: 0.68rem; color: var(--text-muted); }
.admin-namebank__status { font-size: 0.7rem; color: var(--text-muted); margin: 0; }
.admin-namebank__actions { display: flex; justify-content: space-between; gap: 0.4rem; }
.admin-namebank__actions .btn-t3 { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
/* .btn-t3's own `display: inline-flex` has the same [hidden]-losing
   problem as .admin-namebank__panel above - scoped fix here (not a
   global .btn-t3[hidden] rule, to avoid touching every other page's use
   of that class) for the Show More button's `.hidden` toggle. */
.admin-namebank .btn-t3[hidden] { display: none; }

/* Mobile (~390px, DESIGN-SYSTEM.md's own priority viewport): anchoring
   to the thumbnail's own narrow grid column risks horizontal overflow
   regardless of column count, so the panel switches to a fixed,
   viewport-edge-anchored sheet instead - never full-screen (a capped
   max-height leaves the page visible above it), never pushes page
   content around (position:fixed, so no scroll jump), and the close
   control stays at a constant, reachable position regardless of which
   thumbnail opened it. */
@media (max-width: 560px) {
    .admin-namebank__panel {
        position: fixed; z-index: 60;
        left: 12px; right: 12px; top: auto; bottom: 12px; width: auto;
        max-height: 70vh;
    }
    .admin-namebank__results { max-height: 40vh; }
}
.admin-upload-warning {
    font-size: 0.82rem; color: #9A3527; background: #F6E2DE; border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem; margin: 0 0 var(--space-3);
}
.admin-upload-add {
    aspect-ratio: 1; border-radius: var(--radius-sm); border: 1.5px dashed var(--line);
    background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.8rem; font-family: var(--font-body);
}
.admin-upload-add:hover { border-color: var(--brass); color: var(--brass-deep); }
.admin-upload-add .icon { width: 1.4rem; height: 1.4rem; }
.admin-upload-count { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 var(--space-2); }

/* Either/or: Use a preset vs Write new instead */
.admin-either-or { display: flex; gap: 0.5rem; margin-bottom: var(--space-3); }
.admin-either-or__btn {
    flex: 1; padding: 0.7rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--paper); color: var(--text-muted); font-family: var(--font-body); font-weight: 600;
    font-size: 0.88rem; cursor: pointer; min-height: 44px;
}
.admin-either-or__btn.is-active { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }

.admin-preset-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-3); }

/* Checkbox / radio rows (Category, Suitable Space, Light Type) - real
   inputs for a plain HTML form to submit correctly with no JS required;
   Category and Light Type use type=radio under the hood (single-select,
   products.category_id/light_type are single-value columns) but share
   the exact same square-checkbox visual per §16A's "same checkbox
   pattern" instruction - the input type is invisible either way. */
.admin-field { margin-bottom: var(--space-3); }
.admin-field__label {
    display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--sp-8);
}
.admin-check-list { display: flex; flex-direction: column; gap: 0.3rem; }
.admin-check {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm);
    min-height: 44px; cursor: pointer; font-size: 0.92rem;
}
.admin-check:hover { background: var(--paper-2); }
.admin-check input {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.admin-check:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.admin-check input:checked ~ .filter-checkbox { background: var(--brass); border-color: var(--brass); }
.admin-check input:checked ~ .filter-checkbox .icon { opacity: 1; }
.admin-check__count { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); }

/* Style pill tags - multi-select, same visual as the quotation canvas's
   category chips (.pb-tab) so "pill tag" reads as one consistent
   component across the whole system, not a second pattern. */
.admin-pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-pill { position: relative; }
.admin-pill input {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.admin-pill label {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper-2); font-size: 0.86rem; font-weight: 500;
    color: var(--text-muted); cursor: pointer; transition: all 120ms ease;
}
.admin-pill input:checked ~ label { background: var(--navy); color: var(--text-invert); border-color: var(--navy); }
.admin-pill input:focus-visible ~ label { outline: 2px solid var(--brass); outline-offset: 2px; }

.admin-text-input, .admin-textarea, .admin-select {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
    padding: 0.65rem 0.8rem; font-family: var(--font-body); font-size: 0.94rem; color: var(--text);
}
.admin-textarea { min-height: 90px; resize: vertical; }
.admin-form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--space-3); }

.admin-preset-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-12) var(--sp-16);
}
.admin-preset-row__name { font-weight: 600; }
.admin-preset-row__meta { font-size: 0.8rem; color: var(--text-muted); }
.admin-preset-row__actions { display: flex; gap: 0.5rem; flex: none; }

/* Catalogue quality - visual duplicate-family review (Phase 11 SEO audit,
   visual-review pass). "aq" = Audit / Quality, scoped to this one page. */
.aq-family { margin-bottom: var(--space-4); }
.aq-family__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.aq-family__title { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.aq-family__count { color: var(--text-muted); font-weight: 400; font-size: 0.9rem; }
.aq-warning {
    font-size: 0.85rem; color: #9A3527; background: #F6E2DE; border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem; margin: 0 0 var(--space-3);
}
/* Informational, not a warning - legacy numbered-slug groups (Phase 11
   SEO audit, audit-semantics pass). Deliberately calmer than .aq-warning's
   red/amber so it never reads as something needing action. */
.aq-info {
    font-size: 0.85rem; color: var(--text-muted); background: var(--paper-2); border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem; margin: 0 0 var(--space-3);
}
.aq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-16); }
.aq-card {
    background: var(--paper-2); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--neu-raised); display: flex; flex-direction: column;
}
/* object-fit: contain (not cover) so a fixture's real proportions stay
   intact - the whole point is comparing DESIGNS, a cropped image would
   hide exactly the difference a human needs to see. */
.aq-card__image {
    display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--paper);
    border: none; padding: 0; cursor: zoom-in; position: relative;
}
.aq-card__image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aq-card__image--empty {
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: default;
}
.aq-card__image--empty .icon { width: 2rem; height: 2rem; }
.aq-card__body { padding: var(--sp-12); display: flex; flex-direction: column; gap: 4px; }
.aq-card__title { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.aq-card__meta { font-size: 0.78rem; color: var(--text-muted); word-break: break-word; }
.aq-card__flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.aq-card__hint { font-size: 0.76rem; color: #9A3527; margin: 2px 0; }
.aq-card__body .btn-t3 { margin-top: 6px; align-self: flex-start; }

/* Lightbox - native <dialog>, no JS library. ::backdrop is the dialog's
   own dimming layer; clicking it (outside the padded content box) closes
   the dialog via the click handler in duplicates.php. */
.aq-lightbox {
    border: none; border-radius: var(--radius); padding: var(--space-3); max-width: min(90vw, 900px);
    max-height: 90vh; background: var(--paper); box-shadow: var(--neu-raised);
}
.aq-lightbox::backdrop { background: rgba(5,7,13,0.72); }
.aq-lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; object-fit: contain; }
.aq-lightbox__close {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(5,7,13,0.72); color: #fff; border: none; cursor: pointer; font-size: 1rem; line-height: 1;
}

/* Dashboard home stat cards. */
.admin-dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-12); margin-bottom: var(--space-3); }
.admin-stat-card {
    background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-16);
    display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
    box-shadow: var(--neu-raised); transition: box-shadow 120ms ease;
}
.admin-stat-card:hover { box-shadow: var(--neu-pressed); }
.admin-stat-card__number { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--navy); }
.admin-stat-card__label { font-size: 0.8rem; color: var(--text-muted); }

/* Quotation/Lead Management (IMPLEMENTATION-INDEX.md §5.2) - status pill
   reuses the same tone vocabulary as availability_tone()/.status-dot. */
.quote-status-pill {
    display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; vertical-align: middle; margin-left: 0.5rem;
}
.quote-status-pill--ok    { background: rgba(127,166,107,0.16); color: #4d6a3d; }
.quote-status-pill--warn  { background: rgba(220,150,30,0.18); color: #9A6600; }
.quote-status-pill--muted { background: rgba(201,123,70,0.16); color: #8a5730; }
.quote-status-pill--off   { background: rgba(138,130,117,0.18); color: #6b6459; }
.quote-status-pill--danger { background: #F6E2DE; color: #9A3527; }

/* Read-only annotated scene grid - reuses .scene/.qe-canvas__markers/
   .qe-marker as-is (see AdminQuoteController::buildScenes()). */
.quote-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-16); }
.quote-scene__label { font-size: 0.82rem; font-weight: 600; margin: 0 0 6px; }

/* Admin sub-navigation tabs - groups sidebar items that outgrew a single
   destination (Products: Add Products / Categories / Spaces / Tiers). */
.admin-subnav { display: flex; gap: 0.25rem; margin-bottom: var(--space-3); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.admin-subnav__item {
    padding: 0.55rem 0.9rem; font-size: 0.88rem; font-weight: 500; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-subnav__item:hover { color: var(--text); }
.admin-subnav__item.is-active { color: var(--navy); border-bottom-color: var(--brass); font-weight: 600; }

/* Reusable admin media-field widget - embeddable in any admin screen
   (IMPLEMENTATION-INDEX.md §5.1 "Media management"). */
.admin-media-list { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-media-field {
    background: var(--paper-2); border-radius: var(--radius-sm);
    padding: var(--sp-16); box-shadow: var(--neu-raised);
}
.admin-media-field__head { margin-bottom: var(--sp-12); }
.admin-media-field__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.2rem; }
.admin-media-field__help { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.admin-media-field__preview {
    position: relative; width: 100%; max-width: 320px; aspect-ratio: 16/9;
    border-radius: var(--radius-sm); overflow: hidden; background: var(--navy);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-12);
}
.admin-media-field__preview img,
.admin-media-field__preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-media-field__fallback .icon { width: 1.6rem; height: 1.6rem; color: var(--text-invert-mut); }
.admin-media-field__row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--space-2); }
.admin-media-field__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.admin-media-field__row .admin-field { margin-bottom: 0; flex: 1 1 220px; }
.admin-media-field__remove { flex: none; white-space: nowrap; padding-bottom: 0.6rem; }

/* A stacked (vertical) variant of .admin-media-field__row, for a group of
   fields that should each size to their own content rather than share row
   space - e.g. one Product Video's fields (Edit Product's video-add form,
   Single Add's per-slot fields). The base row's `flex: 1 1 220px` on
   .admin-field is tuned for a WRAPPING ROW (a sensible minimum column
   width before wrapping); reused in a column-direction context, that same
   220px becomes a forced minimum HEIGHT instead - this modifier's `flex:
   0 1 auto` corrects that without touching the row/split layouts used
   everywhere else in the admin area. */
.admin-media-field__row--stacked {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: var(--space-2);
}
.admin-media-field__row--stacked .admin-field { flex: 0 1 auto; }

/* One Product Video slot's own box chrome (border/spacing) - kept
   separate from --stacked above so the stacking behavior stays reusable
   without also forcing this specific bordered-box look on every caller. */
.admin-media-field__slot { border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; }

@media (max-width: 720px) {
    .admin-mode-grid { grid-template-columns: 1fr; }
    .admin-upload-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-media-field__row--split { grid-template-columns: 1fr; }
}

.admin-field__hint { font-weight: 400; color: var(--text-muted); font-size: 0.82em; }

/* SEO Template Bank selector (Single Add / Edit Product) - reuses .btn-t3
   for each selectable rendered candidate; status/count text reuses the
   same tone vocabulary as .quote-status-pill (ok/muted/danger). */
.seo-bank-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--space-2); }
.seo-bank-option { text-align: left; white-space: normal; max-width: 100%; }
.seo-bank-option--unavailable { opacity: 0.55; cursor: not-allowed; }
.seo-bank-count { display: block; color: var(--text-muted); font-size: 0.78rem; margin-top: 0.2rem; }
.seo-bank-status { display: block; font-size: 0.78rem; margin-top: 0.1rem; min-height: 1.1em; }
.seo-bank-status--ok { color: #4d6a3d; }
.seo-bank-status--warning { color: #8a5730; }
.seo-bank-status--error { color: #9A3527; }

/* Product Attribute Bank picker (Single Add / Edit Product) - single-
   select buttons reuse .btn-t3 as-is; the multi-select (material) variant
   additionally needs a persistent "selected" state, since a pill stays
   toggled on for as long as its value is present in the composed text. */
.attr-picker-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.attr-picker-option { font-size: 0.82rem; padding: 0.3rem 0.7rem; }
.attr-picker-option.is-active { background: var(--brass); color: var(--text-invert); border-color: var(--brass); }
.admin-attr-picker__status { display: block; font-size: 0.78rem; margin-top: 0.3rem; color: #9A3527; min-height: 1.1em; }

/* Admin Catalogue Context Selector & Progressive Form Sections */
.admin-catalogue-selector {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}
.admin-catalogue-selector__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
}
.admin-catalogue-selector__head .admin-field__label {
    margin-bottom: 0;
}
.admin-catalogue-selector__status {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.admin-catalogue-segmented {
    display: flex;
    gap: 4px;
    background: var(--paper);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}
.admin-catalogue-segmented__btn {
    flex: 1 1 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-body);
    text-align: center;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    user-select: none;
}
.admin-catalogue-segmented__btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.5);
}
.admin-catalogue-segmented__btn:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 1px;
}
.admin-catalogue-segmented__btn.is-active,
.admin-catalogue-segmented__btn[aria-selected="true"] {
    background: var(--navy);
    color: var(--text-invert);
    font-weight: 600;
    border-color: var(--navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

@media (max-width: 560px) {
    .admin-catalogue-segmented {
        flex-direction: column;
        gap: 6px;
    }
    .admin-catalogue-segmented__btn {
        width: 100%;
        min-height: 44px;
    }
}

[data-category-list].is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.admin-form-group {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.admin-form-group__head {
    margin-bottom: var(--space-2);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--line);
}
.admin-form-group__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 0.2rem;
    color: var(--ink);
}
.admin-form-group__desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

.admin-form-section {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: border-color 150ms ease;
}
.admin-form-section[open] {
    border-color: var(--line);
}
.admin-form-section__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    user-select: none;
    background: var(--paper-2);
    list-style: none;
}
.admin-form-section__summary::-webkit-details-marker {
    display: none;
}
.admin-form-section__summary:hover {
    background: rgba(201, 154, 70, 0.06);
}
.admin-form-section__summary:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: -2px;
}
.admin-form-section__summary-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.admin-form-section__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0;
    color: var(--ink);
}
.admin-form-section__meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.admin-form-section__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: transform 200ms ease;
}
.admin-form-section[open] .admin-form-section__indicator {
    transform: rotate(90deg);
}
.admin-form-section__body {
    padding: var(--space-3);
    border-top: 1px solid var(--line);
}


/* Public product configurator (product page, Product Configuration
   Foundation Phase 3B) - reuses the same button/pill language as the
   admin pickers above (.btn-t3) rather than introducing a new control
   style; kept deliberately plain, not a redesign of the product page. */
.product-configurator { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.product-configurator__group { display: flex; flex-direction: column; gap: 0.4rem; }
.product-configurator__label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.product-configurator__options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.product-configurator__option { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
.product-configurator__option.is-active { background: var(--brass); color: var(--text-invert); border-color: var(--brass); }
.product-configurator__option.is-disabled { opacity: 0.4; pointer-events: none; }
.product-configurator__select { max-width: 280px; }
.product-configurator__summary { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 0.9rem; }
.product-configurator__summary-text { color: var(--text-muted); }
.product-configurator__status { font-size: 0.85rem; color: #9A3527; min-height: 1.2em; margin: 0; }
.product-configurator__quantity { max-width: 160px; }

/* =====================================================================
   Campaign Landing Pages (DESIGN-SYSTEM.md §22) - the public-facing
   page. Deliberately its own component family: full-bleed video/image
   background (no separate solid-colour section), a scoped red-glass
   headline highlight (the one sanctioned exception to the site's
   single-accent Brass rule - must never be reused elsewhere), and
   Glass Panel form fields that let the background stay visible through
   them. Rendered by View::renderBare(), so this page has no shared
   header.php/footer.php nav at all - every rule needed lives here.
   ===================================================================== */
.campaign-page {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    overflow: hidden; background: var(--navy);
}

.campaign-bg { position: fixed; inset: 0; z-index: 0; background: var(--navy); }
.campaign-bg__media { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Bottom-up vignette layered over the media (not a separate flat-colour
   section) - keeps the form legible without a hard boundary line. */
.campaign-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(5,7,13,0.88) 0%, rgba(5,7,13,0.45) 40%, rgba(5,7,13,0.08) 70%, transparent 100%);
}

.campaign-topbar {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-3);
}
.campaign-topbar__logo { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.campaign-topbar__logo img { height: 28px; width: auto; display: block; }
.campaign-topbar__logo span { font-family: var(--font-display); font-weight: 600; color: var(--text-invert); font-size: 1rem; }
.campaign-close {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(5,7,13,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(251,248,242,0.22); color: var(--text-invert); cursor: pointer; flex: none;
}
.campaign-close .icon { width: 18px; height: 18px; }
.campaign-close:hover { background: rgba(5,7,13,0.6); }

.campaign-content {
    position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
    justify-content: flex-end; padding: var(--space-3);
    padding-bottom: var(--space-2);
}
.campaign-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--brass-bright); margin: 0 0 var(--space-2); text-align: center;
}
.campaign-headline-wrap { display: flex; justify-content: center; margin: 0 0 var(--space-2); }
.campaign-headline {
    display: inline-block; max-width: 92vw;
    font-family: var(--font-display); font-weight: 600; color: var(--text-invert);
    font-size: clamp(1.15rem, 6.2vw, 3.2rem); line-height: 1.15;
    white-space: nowrap; margin: 0; text-align: center;
}
.campaign-headline--highlighted {
    padding: 0.32em 0.75em; border-radius: 999px;
    background: color-mix(in srgb, var(--campaign-highlight, transparent) 7%, transparent);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(251,248,242,0.22);
}
.campaign-desc { max-width: 46ch; margin: 0 auto var(--space-2); text-align: center; color: var(--text-invert-mut); font-size: 0.95rem; }
.campaign-offer {
    display: block; text-align: center; margin: 0 auto var(--space-3);
    color: var(--brass-bright); font-weight: 600; font-size: 0.95rem;
}

.campaign-form { max-width: 420px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.campaign-field {
    width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-sm);
    background: rgba(5,7,13,0.38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(251,248,242,0.25); color: var(--text-invert);
    font-family: var(--font-body); font-size: 0.95rem;
}
.campaign-field::placeholder { color: rgba(244,238,226,0.6); }
.campaign-field:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.campaign-form .btn-t2 { width: 100%; text-align: center; justify-content: center; }
.campaign-error { color: #FFB4A8; background: rgba(154,53,39,0.25); border: 1px solid rgba(154,53,39,0.5); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.88rem; margin: 0 auto var(--space-2); max-width: 420px; text-align: center; }
.campaign-thankyou { max-width: 420px; margin: 0 auto; text-align: center; color: var(--text-invert); }
.campaign-thankyou h2 { font-family: var(--font-display); margin: 0 0 0.4rem; }
.campaign-thankyou p { color: var(--text-invert-mut); margin: 0; }

.campaign-preview-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 3; text-align: center;
    background: var(--brass); color: var(--navy); font-size: 0.8rem; font-weight: 600; padding: 0.4rem;
}

@media (max-width: 480px) {
    .campaign-content { padding: var(--space-2); }
    .campaign-headline { font-size: clamp(1.05rem, 7.8vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-bg__media[data-video] { display: none; }
}

/* =====================================================================
   Internal Website Analytics dashboard (DESIGN-SYSTEM.md §23). Same
   dark neumorphic Navy/Brass admin system as the rest of the panel -
   reuses .admin-stat-card/.admin-dashboard-stats as-is, adds a Brass
   emphasis modifier plus the ranked-list/device-bar components this
   screen specifically needs.
   ===================================================================== */
.admin-stat-card--brass {
    background: var(--navy); box-shadow: none; border: 1px solid var(--brass);
}
.admin-stat-card--brass .admin-stat-card__number { color: var(--brass-bright); }
.admin-stat-card--brass .admin-stat-card__label { color: var(--text-invert-mut); }

.analytics-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.analytics-range-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.analytics-range-form input[type="date"] { padding: 0.4rem 0.6rem; }
.analytics-campaign-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--navy); color: var(--text-invert); border-radius: var(--radius-sm);
    padding: var(--sp-12) var(--sp-16); margin-bottom: var(--space-3);
}
.analytics-campaign-banner strong { color: var(--brass-bright); }
.analytics-campaign-banner a { color: var(--text-invert-mut); }

.analytics-section { background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-16); box-shadow: var(--neu-raised); margin-bottom: var(--space-3); }
.analytics-section__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 var(--sp-12); }

.analytics-rank-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 6px; margin-bottom: 4px; overflow: hidden; }
.analytics-rank-row__fill { position: absolute; inset: 0; background: var(--paper); border-radius: 6px; z-index: 0; transform-origin: left; }
.analytics-rank-row__label, .analytics-rank-row__value { position: relative; z-index: 1; font-size: 0.88rem; }
.analytics-rank-row__label { color: var(--navy); font-weight: 500; }
.analytics-rank-row__value { color: var(--text-muted); white-space: nowrap; }
.analytics-empty { color: var(--text-muted); font-size: 0.88rem; }

.analytics-device-bar { display: flex; height: 28px; border-radius: 999px; overflow: hidden; margin-bottom: var(--sp-12); background: var(--paper); }
.analytics-device-bar__seg { height: 100%; }
.analytics-device-bar__seg--mobile  { background: var(--brass); }
.analytics-device-bar__seg--tablet  { background: var(--brass-deep); }
.analytics-device-bar__seg--desktop { background: var(--navy); }
.analytics-device-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); }
.analytics-device-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.analytics-device-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.analytics-device-legend .dot--mobile  { background: var(--brass); }
.analytics-device-legend .dot--tablet  { background: var(--brass-deep); }
.analytics-device-legend .dot--desktop { background: var(--navy); }

.analytics-conversion { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }
.analytics-conversion__rate { font-family: var(--font-display); font-size: 2.4rem; color: var(--brass-deep); font-weight: 600; }
.analytics-conversion__detail { color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 720px) {
    .analytics-grid-2 { grid-template-columns: 1fr !important; }
}

/* Sitewide loading state (public/assets/js/loading-bar.js) - injected
   into <html>, not templated, so it works identically on every page
   including the bare Campaign page. */
.loading-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
    background: linear-gradient(90deg, var(--brass-deep), var(--brass-bright));
    opacity: 0; pointer-events: none;
}
button.is-loading { opacity: 0.75; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
    .loading-bar { transition: none !important; }
}

/* Cookie consent banner (public/assets/js/cookie-consent.js) - fixed,
   unobtrusive, sits below the loading bar's z-index since the two never
   need to compete for the same visual space. */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: var(--cookie-bottom-offset, 0px); z-index: 500;
    background: var(--navy); color: var(--text-invert);
    box-shadow: 0 -4px 24px rgba(5, 7, 13, 0.25);
}
.cookie-banner {
    max-height: calc(100vh - var(--cookie-bottom-offset, 0px));
    max-height: calc(100dvh - var(--cookie-bottom-offset, 0px));
    overflow-y: auto;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    position: relative;
    max-width: 1100px; margin: 0 auto; padding: var(--sp-16) var(--space-2);
    padding-right: calc(var(--space-2) + 44px);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
}
.cookie-banner__text { margin: 0; font-size: 0.85rem; color: var(--text-invert-mut); max-width: 60ch; }
.cookie-banner__text a { color: var(--brass-bright); }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex: none; flex-wrap: wrap; }
.cookie-banner__actions button { min-height: 44px; }
.cookie-banner__close {
    position: absolute; right: 8px; top: 8px; width: 44px; height: 44px;
    display: grid; place-items: center; border: 0; background: transparent;
    color: var(--text-invert); cursor: pointer;
}
.cookie-banner__close:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: -4px; }
.cookie-banner .btn-t3 { color: var(--text-invert-mut); }
.cookie-banner .btn-t3:hover { color: var(--text-invert); }

@media (max-width: 560px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    .cookie-banner__actions { justify-content: flex-end; }
}

/* FAQ page - native <details>/<summary> accordion, no JS needed. */
.faq-groups { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; margin: 0 auto; }
.faq-group__title { margin: 0 0 var(--space-2); }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.faq-item { background: var(--paper-2); border-radius: var(--radius-sm); padding: 0 var(--sp-16); }
.faq-item__question {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
    padding: var(--sp-16) 0; cursor: pointer; font-weight: 500; list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__chevron { width: 1.1rem; height: 1.1rem; flex: none; color: var(--text-muted); transition: transform 180ms ease; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { margin: 0 0 var(--sp-16); color: var(--text-muted); }

/* Custom 404 page - a grid of helpful destinations instead of one bare
   "back to home" link. */
.error-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-12); }
.error-link {
    display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16);
    background: var(--paper-2); border-radius: var(--radius-sm); box-shadow: var(--neu-raised);
    text-decoration: none; color: inherit; transition: box-shadow 120ms ease;
}
.error-link:hover { box-shadow: var(--neu-pressed); }
.error-link .icon { width: 1.4rem; height: 1.4rem; color: var(--brass-deep); flex: none; margin-top: 0.15rem; }
.error-link span { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; color: var(--text-muted); }
.error-link strong { color: var(--text); font-weight: 600; font-size: 0.98rem; }

/* =====================================================================
   Ask Nink floating assistant (DESIGN-SYSTEM.md §24.1-§24.2). Adopts the
   existing Glass Panel / Brass glow language, not a separate identity.
   Positioned above the mobile bottom nav (z-index 90) via
   --bottom-nav-height, and below the quote-entry popup stack (z-index
   199-201) so the revenue-critical quote flow always wins the stacking
   context if both were ever open.
   ===================================================================== */
.ask-nink__fab {
    position: fixed; right: var(--sp-16); bottom: calc(var(--sp-16) + var(--bottom-nav-height, 0px));
    z-index: 140; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--glass-panel); border: 1px solid var(--glass-border); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center; color: var(--brass-bright);
    box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.10), 0 0 20px 4px var(--glow-brass);
    animation: askNinkPulse 3.2s ease-in-out infinite;
    transition: transform 150ms ease;
}
.ask-nink__fab:hover { transform: scale(1.06); }
.ask-nink__fab .icon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 641px) {
    .ask-nink__fab { right: var(--sp-24); bottom: var(--sp-24); }
}
@keyframes askNinkPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.10), 0 0 20px 4px var(--glow-brass); }
    50%      { box-shadow: 0 0 0 4px rgba(201, 154, 70, 0.16), 0 0 32px 8px var(--glow-brass); }
}

.ask-nink__scrim {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(2, 3, 7, 0.5);
    opacity: 0; visibility: hidden; transition: opacity 220ms ease;
}
.ask-nink__scrim.is-open { opacity: 1; visibility: visible; }

.ask-nink__drawer {
    position: fixed; inset: 0; z-index: 1002;
    height: 100vh; height: 100dvh; /* iOS Safari 100vh bug fix - same pattern as .qe-popup */
    display: flex; flex-direction: column;
    background: var(--paper-2); color: var(--text);
    padding-bottom: var(--bottom-nav-height, calc(64px + env(safe-area-inset-bottom, 10px)));
    box-sizing: border-box;
    transform: translateY(100%); transition: transform 220ms ease;
}
.ask-nink__drawer.is-open { transform: translateY(0); }
@media (min-width: 641px) {
    .ask-nink__drawer {
        inset: auto; right: var(--sp-24); bottom: calc(var(--sp-24) + 72px);
        top: auto; height: min(70vh, 640px); width: min(92vw, 380px);
        padding-bottom: 0;
        border-radius: var(--radius); box-shadow: 0 24px 60px rgba(5, 7, 13, 0.35);
        transform: translateY(16px) scale(0.98); opacity: 0; visibility: hidden;
        transition: transform 200ms ease, opacity 200ms ease, visibility 200ms;
    }
    .ask-nink__drawer.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
}

.ask-nink__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-16); position: sticky; top: 0; background: var(--paper-2);
    border-bottom: 1px solid var(--line); flex: none;
}
.ask-nink__title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; }
.ask-nink__close {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--paper-2); box-shadow: var(--neu-raised); color: var(--text);
    display: flex; align-items: center; justify-content: center;
}
.ask-nink__close:active { box-shadow: var(--neu-pressed); }
.ask-nink__close .icon { width: 1.1rem; height: 1.1rem; }

.ask-nink__messages {
    flex: 1; overflow-y: auto; padding: var(--sp-16);
    display: flex; flex-direction: column; gap: var(--sp-12);
}
.ask-nink__bubble {
    max-width: 82%; padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-sm);
    font-size: 0.94rem; line-height: 1.45;
}
.ask-nink__bubble--assistant { align-self: flex-start; background: var(--navy-2); color: var(--text-invert); border-bottom-left-radius: 4px; }
.ask-nink__bubble--user { align-self: flex-end; background: var(--brass); color: var(--navy); border-bottom-right-radius: 4px; }
.ask-nink__bubble--fallback { align-self: flex-start; background: var(--navy-2); color: var(--text-invert-mut); font-style: italic; border-bottom-left-radius: 4px; }

.ask-nink__result-row {
    display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
    color: inherit; font: inherit; padding: 4px 0; border-radius: 4px;
}
.ask-nink__result-row:hover, .ask-nink__result-row:focus-visible { color: var(--brass-bright); outline: none; }

.ask-nink__typing { display: flex; gap: 4px; align-self: flex-start; padding: var(--sp-12) var(--sp-16); }
.ask-nink__typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--brass-bright);
    animation: askNinkTypingDot 1.2s ease-in-out infinite;
}
.ask-nink__typing span:nth-child(2) { animation-delay: 0.15s; }
.ask-nink__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes askNinkTypingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

.ask-nink__input-row {
    display: flex; flex-direction: column; gap: var(--sp-8);
    padding: var(--sp-12) var(--sp-16); padding-bottom: max(var(--sp-12), env(safe-area-inset-bottom));
    position: sticky; bottom: 0; background: var(--paper-2); border-top: 1px solid var(--line); flex: none;
}
.ask-nink__input-line { display: flex; gap: var(--sp-8); align-items: center; }
.ask-nink__whatsapp-input {
    border: none; border-radius: var(--radius-sm); padding: var(--sp-8) var(--sp-12);
    background: var(--paper); box-shadow: var(--neu-pressed); font-size: 0.88rem; color: var(--text);
}
.ask-nink__input-row input[type="text"] {
    flex: 1; border: none; border-radius: var(--radius-sm); padding: var(--sp-12);
    background: var(--paper); box-shadow: var(--neu-pressed); font-size: 0.94rem; color: var(--text);
}
.ask-nink__input-row input[type="text"]:focus-visible,
.ask-nink__whatsapp-input:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }
.ask-nink__send {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; flex: none;
    background: var(--brass); color: var(--navy); display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease;
}
.ask-nink__send:hover { background: var(--brass-bright); }
.ask-nink__send .icon { width: 1.1rem; height: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    .ask-nink__fab { animation: none; }
    .ask-nink__typing span { animation: none; opacity: 0.7; }
}

/* Recommendation cards inside the quote-entry canvas (§24.3). */
.ask-nink-suggestions { margin-top: var(--sp-16); }
.ask-nink-suggestions__label {
    font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin: 0 0 var(--sp-8);
}
.ask-nink-suggestions__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-12); }
.ask-nink-suggestions__tag {
    display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--brass-deep); background: rgba(201, 154, 70, 0.12); border-radius: 4px;
    padding: 2px 6px; margin-top: 4px;
}
.ask-nink-escalate-link {
    display: inline-flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-12);
    color: var(--brass-deep); font-size: 0.9rem; text-decoration: none; background: none; border: none; cursor: pointer;
}
.ask-nink-escalate-link:hover { color: var(--brass); }

/* =====================================================================
   HOME v2 - "NINKLIGHTING Luxury Homepage Redesign" (approved Stitch
   project). Composition/proportions/section-order follow that design;
   colour and type tokens stay the sitewide ink/brass/paper + Fraunces/
   Hanken Grotesk system (CLAUDE.md's UI Redesign Rule), not Stitch's
   own arbitrary palette. New component classes only - nothing here
   redefines .dwell-hero (still used by /how-it-works) or any class
   shared with another page.
   ===================================================================== */

/* ---- Hero: ~70% cinematic media / ~30% featured-product panel ---- */
.home-hero {
    display: flex;
    min-height: calc(100vh - 5rem);
    background: var(--navy);
    border-bottom: 1px solid var(--line-dark);
}
.home-hero__media {
    position: relative;
    width: 70%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: var(--sp-48) var(--sp-64);
}
.home-hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
}
.home-hero__bg--fallback {
    background: radial-gradient(ellipse at 30% 70%, rgba(231,190,106,0.22) 0%, rgba(201,154,70,0.08) 40%, transparent 70%), var(--navy-2);
}
.home-hero__bg-video { z-index: 1; }
.home-hero__scrim {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(0deg, rgba(5,7,13,0.88) 0%, rgba(5,7,13,0.35) 45%, rgba(5,7,13,0.2) 100%);
}
.home-hero__content { position: relative; z-index: 3; max-width: 42rem; }
.home-hero__headline {
    color: var(--text-invert);
    margin: 0 0 var(--sp-32);
}
.home-hero__actions { display: flex; align-items: center; gap: var(--sp-24); }
.home-hero__explore {
    display: inline-flex; align-items: center; gap: var(--sp-8);
    color: var(--text-invert); font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
    text-decoration: none; padding: var(--sp-8) 0; transition: color 0.2s var(--ease);
}
.home-hero__explore:hover { color: var(--brass-bright); }
.home-hero__explore span { transition: transform 0.25s var(--ease); }
.home-hero__explore:hover span { transform: translateX(3px); }

.home-hero__panel {
    position: relative;
    width: 30%;
    background: var(--paper);
    color: var(--text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Top clearance matches .dwell-hero__inner's 110px (same floating
       fixed header, same "content starts under it" requirement) - the
       site-header is position:fixed and out of flow, so without this the
       product name/price row visually reads as part of the header's own
       row instead of clearly below it. */
    padding: 110px var(--sp-32) var(--sp-32);
    border-left: 1px solid var(--line);
}
.home-hero__panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-16); }
.home-hero__product-name { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; margin: 0; }
.home-hero__price {
    flex: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
    color: var(--text); background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.3rem 0.85rem; white-space: nowrap;
}
.home-hero__product-media {
    display: flex; align-items: center; justify-content: center;
    margin: var(--sp-24) 0; min-height: 0; flex: 1;
}
.home-hero__product-media img { max-height: 320px; max-width: 100%; object-fit: contain; }
.home-hero__product-scene { width: 100%; max-width: 220px; }
.home-hero__panel-bottom { display: flex; flex-direction: column; gap: var(--sp-16); }
.home-hero__availability {
    display: flex; align-items: center; gap: var(--sp-8);
    font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
}
.home-hero__tagline { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.home-hero__shop-now { width: 100%; justify-content: center; }
.home-hero__panel-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-16); }

.home-hero__rail {
    display: none;
    position: absolute; right: var(--sp-16); top: 50%; transform: translateY(-50%);
    writing-mode: vertical-lr;
    align-items: center; gap: var(--sp-24);
    font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
    color: var(--text-muted);
}
.home-hero__rail a { color: var(--text-muted); text-decoration: none; }
.home-hero__rail a:hover { color: var(--brass-deep); }

@media (min-width: 1201px) {
    .home-hero__rail { display: flex; }
}
@media (max-width: 960px) {
    .home-hero { flex-direction: column; min-height: 0; }
    .home-hero__media, .home-hero__panel { width: 100%; }
    .home-hero__media { min-height: 60vh; padding: var(--sp-32) var(--sp-24); }
    /* Stacked below the media here, not sitting under the fixed header
       at y:0 like the desktop 30% column - back to normal padding. */
    .home-hero__panel { border-left: none; border-top: 1px solid var(--line); padding: var(--sp-32); }
}

/* ---- Explore By Room: 6-tile icon-scene grid ---- */
.home-room-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-16);
}
.home-room-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy-2);
    text-decoration: none;
    isolation: isolate;
}
.home-room-tile::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(231,190,106,0.24) 0%, transparent 65%),
                linear-gradient(180deg, transparent 45%, rgba(5,7,13,0.85) 100%);
    z-index: 1;
}
.home-room-tile__scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.home-room-tile__icon { width: 30%; height: 30%; color: var(--brass-bright); opacity: 0.9; }
.home-room-tile__row {
    position: absolute; left: var(--sp-16); right: var(--sp-16); bottom: var(--sp-16); z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
}
.home-room-tile__label { color: var(--text-invert); font-size: 0.92rem; font-weight: 500; }
.home-room-tile__arrow {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.14); color: var(--text-invert);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.home-room-tile:hover .home-room-tile__arrow { background: var(--brass); color: var(--navy); }

@media (max-width: 960px) { .home-room-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .home-room-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Lighting Collections: 6 bordered icon cards ---- */
.home-collections-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-16);
}
.home-collection-card {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--sp-24); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: inherit;
    transition: border-color 0.2s var(--ease);
}
.home-collection-card:hover { border-color: var(--brass); }
.home-collection-card__scene {
    height: 7rem; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-16);
}
.home-collection-card__icon { width: 40%; height: 40%; color: var(--brass-deep); }
.home-collection-card__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
    padding-top: var(--sp-16); border-top: 1px solid var(--line);
}
.home-collection-card__label { font-size: 0.85rem; font-weight: 600; }
.home-collection-card__arrow { color: var(--text-muted); transition: color 0.2s var(--ease); }
.home-collection-card:hover .home-collection-card__arrow { color: var(--brass); }

@media (max-width: 960px) { .home-collections-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .home-collections-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Selected Lighting: 4 editorial product cards ---- */
.home-selected__intro { max-width: 26rem; margin: var(--sp-16) 0 0; color: var(--text-muted); }
.home-selected-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-32);
}
.home-selected-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.home-selected-card__media {
    position: relative; aspect-ratio: 1 / 1.05; background: var(--paper-2);
    border: 1px solid var(--line); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    margin-bottom: var(--sp-16); padding: var(--sp-24);
}
.home-selected-card__media img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 0.4s var(--ease); }
.home-selected-card:hover .home-selected-card__media img { transform: scale(1.04); }
.home-selected-card__scene { width: 100%; height: 100%; }
.home-selected-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }
.home-selected-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.home-selected-card__price { font-size: 0.85rem; font-weight: 600; color: var(--brass-deep); white-space: nowrap; }
.home-selected-card__desc { color: var(--text-muted); font-size: 0.85rem; margin: var(--sp-8) 0 var(--sp-16); }
.home-selected-card__link {
    margin-top: auto; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text); transition: color 0.2s var(--ease);
}
.home-selected-card:hover .home-selected-card__link { color: var(--brass-deep); }

@media (max-width: 960px) { .home-selected-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-selected-grid { grid-template-columns: 1fr; } }

/* ---- Project Planning CTA ---- */
.home-planning {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: var(--sp-48);
    align-items: center;
}
.home-planning__statement > * + * { margin-top: var(--sp-16); }
.home-planning__statement .btn-t2 { margin-top: var(--sp-8); }
.home-planning__media { aspect-ratio: 3 / 4; }
.home-planning__types {
    display: flex; flex-direction: column; gap: var(--sp-24);
    border-left: 1px solid var(--line-dark); padding-left: var(--sp-32);
    font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    color: var(--text-invert-mut);
}

@media (max-width: 960px) {
    .home-planning { grid-template-columns: 1fr; }
    .home-planning__types { border-left: none; border-top: 1px solid var(--line-dark); padding-left: 0; padding-top: var(--sp-24); flex-direction: row; flex-wrap: wrap; gap: var(--sp-16) var(--sp-32); }
}

/* ---- How It Works: 4 minimal numbered steps ---- */
.home-how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-32);
}
.home-how-step { border-top: 1px solid var(--line); padding-top: var(--sp-16); }
.home-how-step__num { color: var(--brass-deep); display: block; margin-bottom: var(--sp-8); }
.home-how-step h3 { margin: 0 0 var(--sp-8); }
.home-how-step__body { color: var(--text-muted); margin: 0; }
.home-how-grid__foot { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--line); text-align: right; }

@media (max-width: 960px) { .home-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-how-grid { grid-template-columns: 1fr; } .home-how-grid__foot { text-align: left; } }

/* ---- Featured Projects: simple image-led cards ---- */
.home-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-32);
}
.home-project-card { display: block; text-decoration: none; color: inherit; }
.home-project-card__scene { aspect-ratio: 4 / 3; margin-bottom: var(--sp-16); }
.home-project-card__row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
    padding-bottom: var(--sp-12); border-bottom: 1px solid var(--line);
}
.home-project-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; }
.home-project-card__arrow { color: var(--text-muted); transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
.home-project-card:hover .home-project-card__arrow { color: var(--text); transform: translateX(3px); }
.home-project-card__meta {
    display: block; margin-top: var(--sp-8); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}

@media (max-width: 900px) { .home-projects-grid { grid-template-columns: 1fr; } }

/* ---- Inspiration: asymmetric editorial (1 lead + 2 stacked) ---- */
.home-inspiration { display: grid; grid-template-columns: 6fr 6fr; gap: var(--sp-32); align-items: start; }
.home-inspiration__lead, .home-inspiration__row { display: block; text-decoration: none; color: inherit; }
.home-inspiration__lead {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--sp-24);
}
.home-inspiration__scene { margin-bottom: var(--sp-24); }
.home-inspiration__cat {
    display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--sp-8);
}
.home-inspiration__title { margin: 0 0 var(--sp-8); }
.home-inspiration__link {
    display: inline-flex; margin-top: var(--sp-16); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text); transition: color 0.2s var(--ease);
}
.home-inspiration__lead:hover .home-inspiration__link,
.home-inspiration__row:hover .home-inspiration__link { color: var(--brass-deep); }
.home-inspiration__stack { display: flex; flex-direction: column; gap: var(--sp-32); height: 100%; }
.home-inspiration__row {
    flex: 1; display: flex; gap: var(--sp-24);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-24);
}
.home-inspiration__row-scene { width: 40%; flex: none; aspect-ratio: 1 / 1; }
.home-inspiration__row-body { display: flex; flex-direction: column; }
.home-inspiration__row-title { margin: 0 0 var(--sp-8); }

@media (max-width: 960px) {
    .home-inspiration { grid-template-columns: 1fr; }
    .home-inspiration__row { flex-direction: column; }
    .home-inspiration__row-scene { width: 100%; }
}

/* ---- Services: 3 divided columns ---- */
.home-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.home-services__col {
    padding: var(--sp-32);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.home-services__col:first-child { border-left: none; padding-left: 0; }
.home-services__col:last-child { padding-right: 0; }
.home-services__icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--paper); border: 1px solid var(--line); color: var(--brass-deep);
    margin-bottom: var(--sp-24);
}
.home-services__name { margin: 0 0 var(--sp-12); }
.home-services__summary { color: var(--text-muted); margin: 0 0 var(--sp-16); }
.home-services__price { color: var(--text-muted); font-weight: 600; }
.home-services__foot { margin-top: var(--sp-32); text-align: center; }

@media (max-width: 900px) {
    .home-services { grid-template-columns: 1fr; }
    .home-services__col { border-left: none; padding-left: 0; padding-right: 0; }
}

/* ---- Final CTA actions ---- */
.home-final-cta__actions {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-24);
    flex-wrap: wrap; margin-top: var(--sp-32);
}

/* =====================================================================
   ---- Ask Nink Phase A - procurement-first acquisition surfaces ----
   Scoped entirely to new selectors (pf-*, ask-*, focused-nav*) - no
   existing selector renamed or removed, matching the same "new
   homepage-only classes, nothing shared renamed" discipline the prior
   homepage redesign already established. --pf-navy/--pf-orange are new
   tokens alongside (never replacing) --navy/--brass - the existing
   brass/gold system stays exactly as-is for catalogue/product/admin
   pages, per CLAUDE.md's preserved-brand-identity rule; this new navy+
   orange system applies only to the pages listed in the Phase A report.
   ===================================================================== */
:root {
    --pf-navy: var(--navy);
    --pf-navy-2: var(--navy-2);
    --pf-orange: #E8672B;
    --pf-orange-bright: #FF8A4C;
    --pf-cream: #FBF3E7;
}

/* ---- Focused nav (header.php, $focusedNav) ---- */
.focused-nav { display: flex; align-items: center; gap: var(--sp-24); }
.focused-nav__item { color: var(--text); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.focused-nav__item:hover { color: var(--pf-orange); }
.focused-nav__divider { width: 1px; height: 20px; background: var(--line); }

/* ---- Hero ---- */
.pf-hero { padding: var(--sp-48) 0; background: var(--pf-cream); }
.pf-hero__inner { display: grid; grid-template-columns: 7fr 3fr; gap: var(--sp-48); align-items: center; }
.pf-hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
/* Ask Nink Phase A.1 §2 - curated hero photo layer, graceful fallback.
   Without an uploaded photo, .pf-hero__left stays the plain flex column
   above (unchanged) - the flywheel/subtext/CTA never move or break. */
.pf-hero__left--has-photo {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    padding: var(--sp-32); min-height: 420px; justify-content: flex-end;
}
.pf-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pf-hero__left--has-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(5,7,13,0.05) 0%, rgba(5,7,13,0.55) 100%);
}
.pf-hero__left--has-photo > * { position: relative; z-index: 2; }
.pf-hero__left--has-photo .pf-hero__subtext { color: var(--text-invert-mut); }
.pf-hero__left--has-photo .pf-hero__secondary { color: var(--text-invert); }
.pf-hero__left--has-photo .pf-value-mini { color: var(--text-invert-mut); }
.pf-flywheel { width: 180px; height: 180px; }
.pf-hero__subtext { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.pf-hero__actions { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.pf-btn-orange { background: var(--pf-orange); color: #fff; border-color: var(--pf-orange); }
.pf-btn-orange:hover { background: var(--pf-orange-bright); }
.pf-hero__secondary { color: var(--pf-navy); font-weight: 600; text-decoration: none; }
.pf-value-mini { display: flex; gap: var(--sp-16); flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); margin-top: var(--sp-8); }

/* ---- Featured product slider ---- */
.pf-featured { position: relative; background: var(--paper); border-radius: var(--radius); padding: var(--sp-24); box-shadow: var(--shadow); }
.pf-featured__slide { display: none; }
.pf-featured__slide.is-active { display: block; }
.pf-featured__eyebrow { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-orange); margin: 0 0 var(--sp-8); }
.pf-featured__media { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: var(--sp-8); }
.pf-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.pf-featured__name { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 var(--sp-4); }
.pf-featured__row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--sp-8); }
.pf-featured__desc { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 var(--sp-8); }
.pf-featured__price { display: block; font-weight: 700; color: var(--pf-navy); margin-bottom: var(--sp-12); }
.pf-featured__nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-12); }
.pf-featured__arrow { background: none; border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.pf-featured__count { font-size: 0.78rem; color: var(--text-muted); }

/* ---- Ask Nink request surface (shared partial) ---- */
.pf-request-section { background: var(--paper); }
.pf-request-heading { text-align: center; margin-bottom: var(--sp-24); }
.ask-request { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-16); }
.ask-request__textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-16); font-family: var(--font-body); font-size: 1rem; resize: vertical; }
.ask-request__attach-btn { background: none; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.ask-request__attach-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--sp-16); }
.ask-request__attach-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.ask-request__attach-field small { color: var(--text-muted); }
.ask-request__file-list { grid-column: 1 / -1; font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.ask-request__attach-contract { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-muted); margin: 0 0 var(--sp-8); }
.ask-request__mode-label { font-size: 0.85rem; font-weight: 600; margin-bottom: var(--sp-8); }
.ask-request__mode-options { display: flex; flex-direction: column; gap: 0.5rem; }
.ask-request__mode-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.ask-request__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.ask-request__field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.ask-request__field input { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; font-size: 0.95rem; }
.ask-request__submit { align-self: flex-start; }
.ask-request__disclaimer { font-size: 0.75rem; color: var(--text-muted); margin: 0; }

/* ---- Markets We Understand ---- */
.pf-markets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.pf-market-panel { display: block; text-decoration: none; color: var(--text-invert); background: var(--pf-navy); border-radius: var(--radius-lg); padding: var(--sp-48) var(--sp-32); min-height: 260px; }
.pf-market-panel p { color: var(--text-invert-mut); }
.pf-market-panel__scene { display: inline-flex; color: var(--pf-orange); margin-bottom: var(--sp-16); }

/* ---- Popular categories ---- */
.pf-categories { display: flex; gap: var(--sp-12); overflow-x: auto; padding-bottom: var(--sp-8); }
.pf-category-chip { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1rem; text-decoration: none; color: var(--text); font-size: 0.88rem; }
.pf-category-chip:hover { border-color: var(--pf-orange); }

/* ---- Value strip ---- */
.pf-value-strip { background: var(--paper-2); padding: var(--sp-16) 0; }
.pf-value-strip__row { display: flex; justify-content: center; gap: var(--sp-32); flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); }

/* ---- How Nink Works ---- */
.pf-how { display: flex; align-items: center; justify-content: center; gap: var(--sp-16); flex-wrap: wrap; }
.pf-how__step { font-family: var(--font-display); font-size: 1.1rem; color: var(--pf-navy); }
.pf-how__arrow { color: var(--pf-orange); }

/* ---- Final Ask Nink CTA ---- */
.pf-final-cta { background: var(--pf-cream); padding: var(--sp-64) 0; text-align: center; }

/* ---- Supplier network CTA ---- */
.pf-supplier-cta { background: var(--pf-navy); padding: var(--sp-48) 0; }
.pf-supplier-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap; color: var(--text-invert); }
.pf-supplier-cta__inner p { color: var(--text-invert-mut); margin: 0; }

/* ---- /ask-nink page: hero + confirmation + modes ---- */
.ask-hero { background: var(--pf-cream); padding: var(--sp-48) 0 0; }
.ask-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.ask-hero__sub { color: var(--text-muted); }
.ask-confirm { text-align: center; padding: var(--sp-64) 0; }
.ask-confirm__ref { font-size: 1.1rem; }
.ask-confirm__next { margin-top: var(--sp-24); }
.ask-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); }
.ask-modes__card { background: var(--paper); border-radius: var(--radius); padding: var(--sp-24); }
.ask-modes__card h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 var(--sp-8); }
.ask-modes__card p { font-size: 0.88rem; color: var(--text-muted); margin: 0; }

/* ---- /how-it-works page (Ask Nink Phase A.1 §5) - new pf-* visual
   system only (white/cream/navy/orange, restrained neumorphism via the
   existing --neu-raised token) - no bronze/gold, no black-heavy legacy
   band (replaces the old section--dusk "Why Choose Nink" treatment). ---- */
.pf-hiw-hero { background: var(--pf-cream); padding: var(--sp-64) 0 var(--sp-48); text-align: center; }
.pf-hiw-hero__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.pf-hiw-hero__sub { color: var(--text-muted); font-size: 1rem; margin: 0; }

.pf-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-16); }
.pf-step-card { background: var(--neu-base); border-radius: var(--radius); box-shadow: var(--neu-raised); padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-8); }
.pf-step-card__num { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--pf-orange); }
.pf-step-card__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0; color: var(--pf-navy); }
.pf-step-card__body { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.pf-principle { max-width: 720px; margin: 0 auto; text-align: center; background: var(--pf-navy); color: var(--text-invert); border-radius: var(--radius-lg); padding: var(--sp-48) var(--sp-32); }
.pf-principle h2 { margin: 0 0 var(--sp-16); }
.pf-principle p { color: var(--text-invert-mut); margin: 0; }

/* ---- Mobile (Ask Nink Phase A - mobile-first hard requirement) ---- */
@media (max-width: 900px) {
    .pf-hero__inner { grid-template-columns: 1fr; }
    .pf-markets, .ask-modes { grid-template-columns: 1fr; }
    .ask-request__row, .ask-request__attach-panel { grid-template-columns: 1fr; }
    .pf-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .pf-steps { grid-template-columns: 1fr; }
    .pf-principle { padding: var(--sp-32) var(--sp-24); }
}
@media (max-width: 560px) {
    .pf-flywheel { width: 140px; height: 140px; }
    .focused-nav { gap: var(--sp-12); }
    .focused-nav__item { font-size: 0.82rem; }
    .pf-supplier-cta__inner { flex-direction: column; text-align: center; }
}

/* ---- Ask Nink Phase C - customer sourcing-options portal. Mobile-first,
   minimal, one primary decision per screen - stacked cards, never a wide
   table (guardrail §13). ---- */
.ap-hero { background: var(--pf-cream); padding: var(--sp-48) 0 var(--sp-64); }
.ap-disclaimer { background: var(--paper); border-radius: var(--radius-sm); padding: var(--sp-16); margin-top: var(--sp-16); font-size: 0.88rem; color: var(--text-muted); }
.ap-disclaimer p { margin: 0; }

.ap-options { display: flex; flex-direction: column; gap: var(--sp-16); margin-top: var(--sp-24); }
.ap-option { background: var(--paper); border-radius: var(--radius); padding: var(--sp-24); }
.ap-option__type { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-orange); margin: 0 0 var(--sp-4); }
.ap-option__title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 var(--sp-8); }
.ap-option__body { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 var(--sp-8); }
.ap-option__facts { display: flex; flex-wrap: wrap; gap: var(--sp-16); font-size: 0.85rem; color: var(--text); margin: var(--sp-8) 0; }
.ap-option__select { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin-top: var(--sp-12); }

.ap-decision { background: var(--pf-navy); color: var(--text-invert); border-radius: var(--radius-lg); padding: var(--sp-24); margin-top: var(--sp-24); }
.ap-decision__label { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 var(--sp-12); }
.ap-decision__choice { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; color: var(--text-invert-mut); margin-bottom: var(--sp-12); }
.ap-decision__submit { margin-top: var(--sp-8); width: 100%; }

@media (max-width: 560px) {
    .ap-option { padding: var(--sp-16); }
    .ap-decision { padding: var(--sp-16); }
}

/* =====================================================================
   NINKLIGHTING - Strangler Architecture: New Component & Layout Layer
   Approved Visual Direction (Screen 1 - 11)
   ===================================================================== */

/* 1. Global Page Background & Shell */
body.nink-theme {
    background-color: var(--nink-bg);
    color: var(--nink-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* 2. Container */
.nink-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-16);
    padding-right: var(--sp-16);
}

@media (min-width: 768px) {
    .nink-container {
        padding-left: var(--sp-24);
        padding-right: var(--sp-24);
    }
}

/* 3. Typography Utilities */
.nink-serif {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nink-italic-orange {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--nink-orange);
    font-weight: 500;
}

.nink-section-dash {
    display: inline-block;
    width: 28px;
    height: 3px;
    background-color: var(--nink-orange);
    border-radius: 2px;
    margin-bottom: var(--sp-8);
}

.nink-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 600;
    color: var(--nink-navy);
    line-height: 1.25;
    margin: 0 0 var(--sp-4);
}

.nink-section-sub {
    font-size: 0.92rem;
    color: var(--nink-muted);
    margin: 0 0 var(--sp-24);
    line-height: 1.45;
}

/* 4. Button System */
.nink-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    min-height: 46px;
    padding: 0 var(--sp-24);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.nink-btn:focus-visible {
    outline: 2px solid var(--nink-orange);
    outline-offset: 2px;
}

/* Primary Orange Button */
.nink-btn--primary,
.nink-btn--orange {
    background-color: var(--nink-orange);
    color: #FFFFFF;
    box-shadow: var(--shadow-neu-button);
}

.nink-btn--primary:hover,
.nink-btn--orange:hover {
    background-color: var(--nink-orange-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(243, 90, 22, 0.38);
}

.nink-btn--primary:active,
.nink-btn--orange:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(243, 90, 22, 0.25);
}

.nink-btn--primary .nink-btn__arrow,
.nink-btn--orange .nink-btn__arrow {
    color: #FFFFFF;
    transition: transform 0.2s ease;
}

.nink-btn--primary:hover .nink-btn__arrow,
.nink-btn--orange:hover .nink-btn__arrow {
    transform: translateX(3px);
}

/* Secondary Cream Button */
.nink-btn--secondary {
    background-color: var(--nink-surface);
    color: var(--nink-navy);
    border-color: var(--nink-border);
    box-shadow: var(--shadow-soft);
}

.nink-btn--secondary:hover {
    background-color: #FFFFFF;
    border-color: #D8CEBE;
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.nink-btn--secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-soft);
}

.nink-btn--secondary .nink-btn__arrow {
    color: var(--nink-orange);
    transition: transform 0.2s ease;
}

.nink-btn--secondary:hover .nink-btn__arrow {
    transform: translateX(3px);
}

/* Navy Header CTA Pill Button */
.nink-btn--navy-pill {
    background-color: var(--nink-navy);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 38px;
    padding: 0 var(--sp-16);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px rgba(7, 29, 58, 0.15);
}

.nink-btn--navy-pill:hover {
    background-color: var(--nink-navy-soft);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.nink-btn--navy-pill .nink-btn__arrow {
    color: var(--nink-orange);
    transition: transform 0.2s ease;
}

.nink-btn--navy-pill:hover .nink-btn__arrow {
    transform: translateX(2px);
}

/* 5. Header Component */
.nink-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(251, 247, 240, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(233, 225, 215, 0.6);
    transition: background-color 0.2s ease;
}

.nink-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nink-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1;
}

.nink-brand__wordmark {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--nink-navy);
}

.nink-brand__icon-mark {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .nink-brand__wordmark {
        font-size: 1.3rem;
    }
    .nink-brand__icon-mark {
        width: 22px;
        height: 22px;
    }
    .nink-header .nink-btn--navy-pill {
        font-size: 0.78rem;
        padding: 0 10px;
        min-height: 32px;
    }
}

.nink-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nink-header__cta-desktop {
    display: none;
}

.nink-header__activity-placeholder {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.nink-header__activity-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(233, 225, 215, 0.9);
    background: var(--paper-2);
    box-shadow: 0 2px 8px rgba(15, 30, 54, 0.08), var(--neu-raised);
    color: var(--nink-navy);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: fixed;
    top: calc(13px + env(safe-area-inset-top, 0px));
    right: calc(var(--sp-16, 16px) + env(safe-area-inset-right, 0px));
    z-index: 102;
}

.nink-header__activity-btn--scrolled,
body.is-scrolled .nink-header__activity-btn {
    background: rgba(251, 248, 242, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(15, 30, 54, 0.14), 0 1px 3px rgba(15, 30, 54, 0.08);
    border-color: rgba(228, 219, 201, 0.95);
}

body.menu-open .nink-header__activity-btn,
body.activity-open .nink-header__activity-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.nink-header__activity-btn:hover {
    color: var(--nink-orange);
    box-shadow: 0 4px 12px rgba(15, 30, 54, 0.12);
}

.nink-header__activity-btn:active {
    transform: scale(0.96);
}

.nink-header__activity-btn:focus-visible {
    outline: 2px solid var(--nink-orange);
    outline-offset: 2px;
}

.nink-header__activity-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nink-header__activity-icon-wrap .icon {
    width: 19px;
    height: 19px;
}

.nink-header__activity-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    min-width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--nink-orange);
    border: 2px solid var(--paper-2);
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nink-header__activity-badge:not(:empty) {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    top: -6px;
    right: -7px;
}

.nink-header__activity-badge[hidden] {
    display: none !important;
}

@media (min-width: 768px) {
    .nink-header__cta-desktop {
        display: inline-flex;
    }
    .nink-header__activity-btn {
        display: none !important;
    }
    .nink-header__activity-placeholder {
        display: none !important;
    }
}

.nink-header__desktop-nav {
    display: none;
}

@media (min-width: 768px) {
    .nink-header__desktop-nav {
        display: flex;
        align-items: center;
        gap: var(--sp-24);
    }

    .nink-header__nav-link {
        font-size: 0.92rem;
        font-weight: 500;
        color: var(--nink-navy);
        text-decoration: none;
        transition: color 0.15s ease;
        padding: var(--sp-8) 0;
        position: relative;
    }

    .nink-header__nav-link:hover {
        color: var(--nink-orange);
    }

    .nink-header__nav-link.is-active {
        color: var(--nink-orange);
        font-weight: 600;
    }

    .nink-header__nav-link.is-active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--nink-orange);
        border-radius: 1px;
    }
}

/* 5b. Desktop Header Overflow Dropdown */
.nink-overflow {
    position: relative;
    display: none;
}

@media (min-width: 768px) {
    .nink-overflow {
        display: block;
    }
}

.nink-overflow__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--nink-border);
    background: #FFFFFF;
    color: var(--nink-navy);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.nink-overflow__btn:hover,
.nink-overflow__btn[aria-expanded="true"] {
    background: #F1F5F9;
    border-color: var(--nink-navy);
    color: var(--nink-orange);
}

.nink-overflow__btn:focus-visible {
    outline: 2px solid var(--nink-orange);
    outline-offset: 2px;
}

.nink-overflow__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background-color: var(--nink-navy);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(7, 29, 58, 0.35);
    padding: 6px;
    z-index: 1000;
}

.nink-overflow__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nink-overflow__dropdown[hidden] {
    display: none !important;
}

.nink-overflow__link {
    display: block;
    padding: 8px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #CBD5E1;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.12s ease, color 0.12s ease;
}

.nink-overflow__link:hover,
.nink-overflow__link:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    outline: none;
}

.nink-overflow__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 6px;
}

/* 6. Mobile Bottom Navigation (Locked) */
.nink-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: var(--nink-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 8px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    box-shadow: 0 -4px 20px rgba(7, 29, 58, 0.25);
}

@media (min-width: 768px) {
    .nink-bottom-nav {
        display: none !important;
    }
}

.nink-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    min-height: 44px;
    color: #8C99A8;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
    transition: color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nink-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

.nink-bottom-nav__item.is-active {
    color: var(--nink-orange);
}

.nink-bottom-nav__item:focus-visible {
    outline: 2px solid var(--nink-orange);
    border-radius: 8px;
}

/* 7. Screen 1: Hero Section */
.nink-hero {
    position: relative;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-20);
    overflow: hidden;
}

.nink-hero__grid {
    display: flex;
    flex-direction: column;
}

/* Unified Hero Stage Composition */
.nink-hero-stage {
    order: 1;
    position: relative;
    width: calc(100% + var(--sp-16) * 2);
    margin-left: calc(-1 * var(--sp-16));
    margin-right: calc(-1 * var(--sp-16));
    margin-bottom: var(--sp-8);
    display: flex;
    justify-content: flex-end;
}

.nink-hero-stage__art {
    display: block;
    width: 100%;
}

.nink-hero-stage__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.nink-hero__content {
    order: 2;
    text-align: left;
    max-width: 400px;
    margin: 0;
    padding: 0 var(--sp-4);
}

.nink-hero__headline {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 5.5vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--nink-navy);
    letter-spacing: -0.025em;
    margin: 0 0 var(--sp-16);
}

.nink-hero__headline em {
    font-style: italic;
    color: var(--nink-orange);
    font-weight: 500;
}

.nink-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    align-items: center;
}

@media (max-width: 480px) {
    .nink-hero__ctas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }
    .nink-hero__ctas .nink-btn {
        padding: 0 10px;
        font-size: 0.82rem;
        min-height: 42px;
        white-space: nowrap;
    }
}

/* Desktop expansion for Hero (Mobile Hero is Locked: <768px untouched) */
@media (min-width: 768px) {
    .nink-hero {
        padding-top: var(--sp-24);
        padding-bottom: 0;
        overflow: hidden;
    }
    .nink-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: end;
        gap: var(--sp-32);
    }
    .nink-hero__content {
        order: 1;
        max-width: 520px;
        margin: 0;
        padding: 0 0 var(--sp-32);
        align-self: center;
    }
    .nink-hero-stage {
        order: 2;
        min-width: 0;
        width: calc(100% + max(0px, (100vw - 1200px) / 2) + var(--sp-24) + 24px);
        max-width: none;
        margin: 0;
        margin-right: calc(-1 * (max(0px, (100vw - 1200px) / 2) + var(--sp-24) + 24px));
        align-self: end;
        display: flex;
        justify-content: flex-end;
        position: relative;
        height: 390px;
    }
    .nink-hero-stage__art {
        display: block;
        height: 100%;
        width: auto;
        position: relative;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 64px, #000 100%),
                            linear-gradient(to bottom, transparent 0%, #000 36px, #000 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent 0%, #000 64px, #000 100%),
                    linear-gradient(to bottom, transparent 0%, #000 36px, #000 100%);
        mask-composite: intersect;
    }
    .nink-hero-stage__img {
        height: 100%;
        width: auto;
        max-width: none;
        display: block;
        object-fit: contain;
        object-position: right bottom;
    }
    .nink-hero__headline {
        font-size: clamp(2.4rem, 3.8vw, 3.4rem);
        margin-bottom: var(--sp-24);
    }
    .nink-hero__ctas {
        display: flex;
        gap: var(--sp-12);
    }
    .nink-hero__ctas .nink-btn {
        padding: 0 var(--sp-24);
        font-size: 0.95rem;
        min-height: 48px;
    }
}

@media (min-width: 1024px) {
    .nink-hero-stage {
        height: 520px;
    }
}

@media (min-width: 1280px) {
    .nink-hero__grid {
        gap: var(--sp-48);
    }
    .nink-hero-stage {
        height: 615px;
    }
}

@media (min-width: 1440px) {
    .nink-hero-stage {
        height: 628px;
    }
}

@media (min-width: 1600px) {
    .nink-hero-stage {
        height: 635px;
    }
}

@media (min-width: 1728px) {
    .nink-hero-stage {
        height: 645px;
    }
}

/* 8. Screen 2: Sourcing Input Box ("What are you looking to source?") */
.nink-source-box {
    background-color: var(--nink-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--nink-border);
    padding: var(--sp-24);
    margin-bottom: var(--sp-48);
}

.nink-source-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid var(--nink-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-neu-pressed);
    padding: 6px 6px 6px var(--sp-16);
    margin-bottom: var(--sp-16);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nink-source-input-wrap:focus-within {
    border-color: var(--nink-orange);
    box-shadow: 0 0 0 3px var(--nink-orange-glow);
}

.nink-source-input-wrap__icon {
    width: 20px;
    height: 20px;
    color: var(--nink-muted);
    flex-shrink: 0;
    margin-right: var(--sp-8);
}

.nink-source-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--nink-text);
    outline: none;
    min-width: 0;
}

.nink-source-input::placeholder {
    color: var(--nink-muted-light);
}

.nink-source-input-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--nink-orange);
    color: #FFFFFF;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.nink-source-input-btn:hover {
    background-color: var(--nink-orange-hover);
    transform: scale(1.05);
}

/* Quick Media Attachment Pills */
.nink-attach-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

.nink-attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: var(--nink-surface-card);
    border: 1px solid var(--nink-border);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--nink-navy);
    cursor: pointer;
    transition: all 0.15s ease;
}

.nink-attach-pill:hover {
    border-color: var(--nink-orange);
    color: var(--nink-orange);
    background-color: #FFFFFF;
}

.nink-attach-pill svg {
    width: 15px;
    height: 15px;
}

.nink-source-box .ask-request__attach-panel {
    max-width: 100%;
    overflow: hidden;
}

.nink-source-box .ask-request__attach-panel[hidden],
.ask-request__attach-panel[hidden] {
    display: none !important;
}

.nink-source-box input[type="text"],
.nink-source-box input[type="url"],
.nink-source-box input[type="tel"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    border: 1px solid var(--nink-border);
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: #FFFFFF;
}

.nink-source-box input[type="file"] {
    max-width: 100%;
    font-size: 0.82rem;
}

@media (max-width: 480px) {
    .nink-source-box div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Accent bar */
.nink-accent-bar {
    display: block;
    width: 32px;
    height: 3px;
    background-color: var(--nink-orange);
    border-radius: 2px;
    margin-bottom: var(--sp-8);
}

/* 9. Screen 2: Markets We Understand (2 Markets Only) */
.nink-markets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-12);
    margin-bottom: var(--sp-48);
}

@media (min-width: 600px) {
    .nink-markets-grid {
        gap: var(--sp-24);
    }
}

.nink-market-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--nink-surface-card);
    border: 1px solid var(--nink-border);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nink-market-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.nink-market-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #E2D7C8;
}

.nink-market-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.nink-market-card:hover .nink-market-card__img {
    transform: scale(1.03);
}

.nink-market-card__body {
    padding: var(--sp-12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
}

.nink-market-card__title {
    font-family: var(--font-display);
    font-size: clamp(0.78rem, 2.5vw, 1.1rem);
    font-weight: 600;
    color: var(--nink-navy);
    margin: 0;
}

.nink-market-card__arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--nink-orange);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.nink-market-card:hover .nink-market-card__arrow {
    transform: translateX(2px);
}

/* 10. Screen 2: Browse Popular Categories (6-card 2-col Grid) */
.nink-categories-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-16);
}

.nink-view-all-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--nink-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease;
}

.nink-view-all-link:hover {
    transform: translateX(2px);
}

.nink-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-12);
    margin-bottom: var(--sp-48);
}

@media (min-width: 768px) {
    .nink-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-16);
    }
}

@media (min-width: 1024px) {
    .nink-categories-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.nink-cat-card {
    background-color: var(--nink-surface-card);
    border: 1px solid var(--nink-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.nink-cat-card:hover {
    border-color: #D8CEBE;
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

.nink-cat-card__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: transparent;
    object-fit: contain;
    flex-shrink: 0;
}

.nink-cat-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--nink-navy);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nink-cat-card__arrow {
    color: var(--nink-orange);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.nink-cat-card:hover .nink-cat-card__arrow {
    transform: translateX(2px);
}

/* 11. Screen 2: Value Strip (4 Trust Icons) */
.nink-value-strip {
    background-color: var(--nink-surface-card);
    border: 1px solid var(--nink-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--sp-16) var(--sp-8);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8);
    margin-bottom: var(--sp-48);
}

@media (min-width: 768px) {
    .nink-value-strip {
        grid-template-columns: repeat(4, 1fr);
        padding: var(--sp-24) var(--sp-32);
        gap: var(--sp-24);
    }
}

.nink-value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.nink-value-item__icon {
    width: 24px;
    height: 24px;
    color: var(--nink-orange);
}

.nink-value-item__label {
    font-size: clamp(0.66rem, 1.8vw, 0.85rem);
    font-weight: 600;
    color: var(--nink-navy);
    line-height: 1.2;
}

/* 12. Screen 2: How Nink Works (5 Steps) */
.nink-how-section {
    margin-bottom: var(--sp-48);
}

.nink-how-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sp-16) 0;
    gap: 4px;
}

.nink-how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

.nink-how-step__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid rgba(235, 90, 30, 0.25);
    box-shadow: 0 2px 8px rgba(11, 27, 43, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nink-orange);
    transition: transform 0.2s ease;
}

.nink-how-step__icon-wrap svg {
    width: 18px;
    height: 18px;
}

.nink-how-step__num-title {
    font-size: clamp(0.65rem, 1.8vw, 0.78rem);
    font-weight: 700;
    color: var(--nink-navy);
    margin: 4px 0 0;
    white-space: nowrap;
}

.nink-how-step__desc {
    font-size: clamp(0.56rem, 1.5vw, 0.7rem);
    color: var(--nink-muted);
    margin: 2px 0 0;
    line-height: 1.15;
    display: block;
}

.nink-how-arrow {
    color: var(--nink-orange);
    flex-shrink: 0;
    opacity: 0.5;
    font-size: 0.85rem;
    margin-top: 10px;
}

/* 13. Screen 2: Final Ask Nink CTA Card */
.nink-cta-card {
    background: linear-gradient(135deg, rgba(255, 248, 238, 0.95) 0%, rgba(255, 238, 218, 0.75) 100%);
    border: 1px solid rgba(235, 90, 30, 0.16);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-20);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    margin-bottom: var(--sp-24);
}

.nink-cta-card__title {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 2.8vw, 1.25rem);
    font-weight: 600;
    color: var(--nink-navy);
    margin: 0 0 var(--sp-4);
}

.nink-cta-card__sub {
    font-size: clamp(0.75rem, 2.2vw, 0.88rem);
    color: var(--nink-muted);
    margin: 0;
}

/* 14. Screen 2: Join Our Supplier Network (Minimalist CTA block) */
.nink-supplier-card {
    background-color: var(--nink-surface-card);
    border: 1px solid var(--nink-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--sp-24);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-16);
    margin-bottom: var(--sp-48);
}

@media (min-width: 640px) {
    .nink-supplier-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-24);
        padding: var(--sp-24) var(--sp-32);
    }
}

.nink-supplier-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nink-supplier-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.12rem, 3vw, 1.35rem);
    font-weight: 600;
    color: var(--nink-navy);
    margin: 0;
    letter-spacing: -0.01em;
}

.nink-supplier-card__sub {
    font-size: 0.88rem;
    color: var(--nink-muted);
    margin: 0;
    line-height: 1.4;
}

.nink-supplier-card__btn {
    flex-shrink: 0;
}

/* 15. Safe-area padding for main container */
main.nink-main {
    padding-bottom: 0;
}

/* ===================================================================
   16. Modern Web-App Footer (Clean, minimal, warm-cream)
   =================================================================== */
.nink-app-footer {
    background-color: var(--nink-cream);
    color: var(--nink-navy);
    padding-top: var(--sp-24);
    padding-bottom: calc(var(--sp-24) + 68px); /* ample clearance for mobile bottom nav */
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    .nink-app-footer {
        padding-top: var(--sp-32);
        padding-bottom: var(--sp-40);
    }
}

.nink-app-footer__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 27, 43, 0.08) 20%, rgba(11, 27, 43, 0.08) 80%, transparent);
    margin-bottom: var(--sp-32);
}

.nink-app-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-20);
}

@media (min-width: 768px) {
    .nink-app-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        flex-wrap: wrap;
        gap: var(--sp-24);
    }
}

/* Brand row */
.nink-app-footer__brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

@media (min-width: 768px) {
    .nink-app-footer__brand-block {
        align-items: flex-start;
    }
}

.nink-app-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--nink-navy);
}

.nink-app-footer__brand-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--nink-navy);
}

.nink-app-footer__brand-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.nink-app-footer__tagline {
    font-size: 0.8rem;
    color: var(--nink-muted);
    letter-spacing: -0.01em;
    margin: 0;
}

/* Essential links (4 to 6 links max) */
.nink-app-footer__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-8) var(--sp-20);
}

.nink-app-footer__link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--nink-navy);
    text-decoration: none;
    padding: 4px 6px;
    transition: color 0.15s ease;
}

.nink-app-footer__link:hover,
.nink-app-footer__link:focus-visible {
    color: var(--nink-orange);
    text-decoration: none;
}

/* Bottom copyright */
.nink-app-footer__bottom {
    width: 100%;
    padding-top: var(--sp-16);
    border-top: 1px solid rgba(11, 27, 43, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .nink-app-footer__bottom {
        justify-content: space-between;
    }
}

.nink-app-footer__copy {
    margin: 0;
    font-size: 0.76rem;
    color: var(--nink-muted);
}

/* =====================================================================
   Screen 3: Ask Nink Sourcing Screen & Screen 11: Confirmation Styles
   ===================================================================== */

/* Sourcing description card (Screen 3) */
.nink-source-card {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 18px;
    padding: var(--sp-16);
    box-shadow: 0 4px 20px rgba(11, 27, 43, 0.03);
}

.nink-source-card__textarea {
    width: 100%;
    min-height: 90px;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.96rem;
    color: var(--nink-navy);
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
}

.nink-source-card__textarea::placeholder {
    color: #94A3B8;
}

.nink-source-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    padding: var(--sp-8) 0;
    border-top: 1px solid rgba(11, 27, 43, 0.04);
}

.nink-source-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #64748B;
}

.nink-source-card__hint svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.6;
}

.nink-source-card__counter {
    font-size: 0.75rem;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}

/* 4 Quick attachment buttons (Screen 3) */
.nink-attach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8);
    margin-top: var(--sp-12);
}

.nink-attach-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    background: #FAF7F2;
    border: 1px solid rgba(11, 27, 43, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.nink-attach-btn:hover,
.nink-attach-btn:focus-visible {
    background: #ffffff;
    border-color: rgba(11, 27, 43, 0.15);
    box-shadow: 0 2px 8px rgba(11, 27, 43, 0.04);
}

.nink-attach-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.nink-attach-btn__icon svg {
    width: 20px;
    height: 20px;
}

.nink-attach-btn__icon--orange { color: #EB5A1E; }
.nink-attach-btn__icon--red { color: #DC2626; }
.nink-attach-btn__icon--navy { color: #0B1B2B; }

.nink-attach-btn__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--nink-navy);
}

/* Service Modes (Screen 3) */
.nink-service-modes-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

.nink-service-modes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

.nink-mode-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.nink-mode-card:hover {
    border-color: rgba(235, 90, 30, 0.4);
    box-shadow: 0 2px 10px rgba(11, 27, 43, 0.03);
}

.nink-mode-card.is-selected {
    border-color: #EB5A1E;
    background: rgba(235, 90, 30, 0.02);
}

.nink-mode-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nink-mode-card__indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    pointer-events: none;
}

.nink-mode-card.is-selected .nink-mode-card__indicator {
    border-color: #EB5A1E;
}

.nink-mode-card.is-selected .nink-mode-card__indicator::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #EB5A1E;
}

.nink-mode-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #0B1B2B;
    flex-shrink: 0;
}

.nink-mode-card__icon svg {
    width: 22px;
    height: 22px;
}

.nink-mode-card__icon--orange {
    color: #EB5A1E;
}

.nink-mode-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nink-mode-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nink-navy);
}

.nink-mode-card__desc {
    font-size: 0.82rem;
    color: var(--nink-muted);
    line-height: 1.35;
}

/* Preferred Contact Method Selection (Screen 3 & /ask-nink) */
.nink-contact-method-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}

.nink-contact-method-legend {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--nink-navy);
    margin-bottom: var(--sp-8);
    display: block;
    padding: 0;
}

.nink-contact-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.nink-contact-method-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    min-height: 48px; /* >= 44px touch target */
    background: #ffffff;
    border: 1.5px solid rgba(11, 27, 43, 0.1);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.nink-contact-method-card:hover {
    border-color: rgba(235, 90, 30, 0.4);
    box-shadow: 0 2px 8px rgba(11, 27, 43, 0.03);
}

.nink-contact-method-card.is-selected {
    border-color: #EB5A1E;
    background: rgba(235, 90, 30, 0.04);
}

.nink-contact-method-card:focus-within {
    border-color: #EB5A1E;
    box-shadow: 0 0 0 3px rgba(235, 90, 30, 0.18);
}

.nink-contact-method-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.nink-contact-method-card__indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    pointer-events: none;
}

.nink-contact-method-card.is-selected .nink-contact-method-card__indicator {
    border-color: #EB5A1E;
}

.nink-contact-method-card.is-selected .nink-contact-method-card__indicator::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EB5A1E;
}

.nink-contact-method-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #0B1B2B;
    flex-shrink: 0;
    pointer-events: none;
}

.nink-contact-method-card__icon svg {
    width: 16px;
    height: 16px;
}

.nink-contact-method-card__icon--whatsapp {
    color: #25D366;
}

.nink-contact-method-card__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nink-navy);
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 480px) {
    .nink-contact-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .nink-contact-method-card {
        padding: 8px 4px;
        gap: 4px;
        min-height: 48px;
    }
    .nink-contact-method-card__indicator {
        display: none;
    }
    .nink-contact-method-card__label {
        font-size: 0.78rem;
    }
}

/* Contact Input Groups (Screen 3 & Screen 10) */
.nink-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 12px;
    padding: 4px 16px;
    min-height: 48px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nink-input-group:focus-within {
    border-color: #EB5A1E;
    box-shadow: 0 0 0 3px rgba(235, 90, 30, 0.1);
}

.nink-input-group.is-required-method {
    border-color: rgba(235, 90, 30, 0.45);
}

.nink-input-group__badge {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    background: #F1F5F9;
    color: #64748B;
    transition: all 0.15s ease;
}

.nink-input-group.is-required-method .nink-input-group__badge {
    background: rgba(235, 90, 30, 0.1);
    color: #EB5A1E;
}

.nink-input-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #94A3B8;
    flex-shrink: 0;
}

.nink-input-group__icon svg {
    width: 18px;
    height: 18px;
}

.nink-input-field {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--nink-navy);
    padding: 8px 0;
}

.nink-input-field::placeholder {
    color: #94A3B8;
}

/* Restrained submit spinner */
.nink-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: nink-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes nink-spin {
    to { transform: rotate(360deg); }
}

/* Collapsible optional details */
.nink-optional-details {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.nink-optional-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--nink-navy);
    cursor: pointer;
    list-style: none;
}

.nink-optional-details__summary::-webkit-details-marker {
    display: none;
}

.nink-optional-details__summary svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.nink-optional-details[open] .nink-optional-details__summary svg {
    transform: rotate(180deg);
}

.nink-optional-details__content {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

/* =====================================================================
   Inline Attachment Previews & Review Stage (Screen 3 & Composer)
   ===================================================================== */

.nink-ref-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    margin-top: var(--sp-12);
}

.nink-ref-list:empty {
    display: none;
}

.nink-ref-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #FAF7F2;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nink-ref-card-item:hover {
    background: #F5EFEB;
    border-color: rgba(11, 27, 43, 0.14);
}

.nink-ref-card-item__media {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nink-ref-card-item__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nink-ref-card-item__video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0B1B2B;
}

.nink-ref-card-item__play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 27, 43, 0.35);
    color: #ffffff;
    pointer-events: none;
}

.nink-ref-card-item__play-badge svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.nink-ref-card-item__media--pdf {
    background: rgba(220, 38, 38, 0.08);
    color: #DC2626;
    flex-direction: column;
    gap: 2px;
}

.nink-ref-card-item__media--pdf svg {
    width: 22px;
    height: 22px;
}

.nink-ref-card-item__badge-pdf {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #DC2626;
}

.nink-ref-card-item__media--link {
    background: rgba(11, 27, 43, 0.06);
    color: var(--nink-navy);
}

.nink-ref-card-item__media--link svg {
    width: 22px;
    height: 22px;
}

.nink-ref-card-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nink-ref-card-item__name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--nink-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.nink-ref-card-item__hostname {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--nink-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.nink-ref-card-item__url {
    font-size: 0.76rem;
    color: var(--nink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.nink-ref-card-item__meta {
    font-size: 0.76rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nink-ref-card-item__tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(11, 27, 43, 0.06);
    color: var(--nink-navy);
}

.nink-ref-card-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nink-ref-card-item__remove,
.nink-ref-card-item__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #94A3B8;
    transition: all 0.15s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.nink-ref-card-item__remove:hover,
.nink-ref-card-item__remove:focus-visible {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.08);
}

.nink-ref-card-item__edit:hover,
.nink-ref-card-item__edit:focus-visible {
    color: #EB5A1E;
    background: rgba(235, 90, 30, 0.08);
}

.nink-ref-card-item__remove svg,
.nink-ref-card-item__edit svg {
    width: 18px;
    height: 18px;
}

/* Progressive Composer Steps */
.ask-request__step {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ask-request__step[hidden] {
    display: none !important;
}

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

.ask-request__step:not([hidden]) {
    animation: ninkStepFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nink-step-nav {
    display: flex;
    gap: var(--sp-12);
    align-items: center;
    margin-top: var(--sp-20);
}

.nink-step-nav__btn {
    height: 50px;
    min-height: 44px;
    border-radius: 12px;
    font-size: 0.96rem;
    font-weight: 600;
}

/* Review Stage Card */
.nink-review-card {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.1);
    border-radius: 16px;
    padding: var(--sp-20);
    margin-top: var(--sp-16);
    box-shadow: 0 2px 12px rgba(11, 27, 43, 0.03);
}

.nink-review-card__header {
    margin-bottom: var(--sp-16);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}

.nink-review-card__title {
    font-size: 1.15rem;
    color: var(--nink-navy);
    margin: 0 0 4px;
}

.nink-review-card__subtitle {
    font-size: 0.85rem;
    color: var(--nink-muted);
    margin: 0;
}

.nink-review-section {
    padding: var(--sp-14) 0;
    border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}

.nink-review-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.nink-review-section__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-8);
}

.nink-review-section__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--nink-muted);
}

.nink-review-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #EB5A1E;
    background: rgba(235, 90, 30, 0.06);
    border: 1px solid rgba(235, 90, 30, 0.2);
    border-radius: 20px;
    padding: 3px 12px;
    min-height: 36px;
    min-width: 44px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nink-review-edit-btn:hover,
.nink-review-edit-btn:focus-visible {
    background: rgba(235, 90, 30, 0.12);
    border-color: #EB5A1E;
}

.nink-review-section__content {
    font-size: 0.92rem;
    color: var(--nink-navy);
    line-height: 1.45;
}

.nink-review-section__content p {
    margin: 0;
}

/* Ask Nink Project Context Controls (Optional Collapsed Disclosure) */
.nink-project-disclosure {
    background: #FAF8F5;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 14px;
    margin-top: var(--sp-12);
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.nink-project-disclosure[open] {
    border-color: rgba(11, 27, 43, 0.15);
    background: #FAF8F5;
}

.nink-project-disclosure__summary {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    padding: var(--sp-12) var(--sp-14);
    cursor: pointer;
    user-select: none;
    list-style: none;
    min-height: 48px;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

.nink-project-disclosure__summary::-webkit-details-marker {
    display: none;
}

.nink-project-disclosure__summary:hover {
    background: rgba(11, 27, 43, 0.02);
}

.nink-project-disclosure__summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--nink-orange);
}

.nink-project-disclosure__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(11, 27, 43, 0.05);
    color: var(--nink-navy);
    flex-shrink: 0;
}

.nink-project-disclosure__icon svg {
    width: 16px;
    height: 16px;
}

.nink-project-disclosure__content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--sp-8);
    flex: 1;
    min-width: 0;
}

.nink-project-disclosure__title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--nink-navy);
    line-height: 1.35;
}

.nink-optional-badge {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--nink-muted);
    background: rgba(11, 27, 43, 0.06);
    padding: 2px 7px;
    border-radius: 6px;
    line-height: 1.2;
    display: inline-block;
}

.nink-project-disclosure__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nink-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.nink-project-disclosure__arrow svg {
    width: 16px;
    height: 16px;
}

.nink-project-disclosure[open] .nink-project-disclosure__arrow {
    transform: rotate(180deg);
}

.nink-project-disclosure__body {
    padding: 0 var(--sp-14) var(--sp-14);
    border-top: 1px solid rgba(11, 27, 43, 0.06);
    margin-top: 2px;
    padding-top: var(--sp-14);
}

.nink-project-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    margin-bottom: var(--sp-14);
}

@media (min-width: 640px) {
    .nink-project-fields {
        grid-template-columns: 1fr 1fr;
    }
}

.nink-project-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nink-field-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nink-navy);
    margin: 0;
}

.nink-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nink-select-field {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border: 1px solid rgba(11, 27, 43, 0.15);
    border-radius: 10px;
    background: #ffffff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--nink-navy);
    padding: 0 36px 0 12px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nink-select-field:focus {
    outline: none;
    border-color: var(--nink-orange);
    box-shadow: 0 0 0 3px rgba(235, 90, 30, 0.15);
}

.nink-select-wrap svg {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--nink-muted);
}

.nink-project-spaces-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Selected spaces chips list */
.nink-selected-spaces {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.nink-selected-spaces:empty {
    display: none;
    margin-bottom: 0;
}

.nink-selected-space-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    min-height: 32px;
    background: #ffffff;
    border: 1px solid var(--nink-orange);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(11, 27, 43, 0.04);
    box-sizing: border-box;
}

.nink-selected-space-chip__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nink-navy);
}

.nink-selected-space-chip__controls {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.nink-selected-space-chip__btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(11, 27, 43, 0.15);
    background: #ffffff;
    color: var(--nink-navy);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.nink-selected-space-chip__btn:hover {
    border-color: var(--nink-orange);
    color: var(--nink-orange);
    background: #FFFBF9;
}

.nink-selected-space-chip__btn--remove {
    font-size: 1rem;
    color: var(--nink-muted);
}

.nink-selected-space-chip__btn--remove:hover {
    color: #d93829;
    border-color: #d93829;
    background: #fff5f5;
}

.nink-selected-space-chip__qty {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nink-navy);
    min-width: 14px;
    text-align: center;
}

.nink-add-space-wrap {
    max-width: 100%;
}

.nink-space-chips-pool {
    display: none;
}

/* Confirmation Card (Screen 11) */
.nink-confirm-card {
    text-align: center;
}

.nink-confirm-badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(235, 90, 30, 0.12);
    color: #EB5A1E;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-16);
}

.nink-confirm-badge svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.2;
}

.nink-ref-card {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 16px;
    padding: var(--sp-20);
    text-align: left;
    margin: var(--sp-24) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
}

@media (min-width: 540px) {
    .nink-ref-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.nink-ref-card__info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.nink-ref-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FAF7F2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nink-navy);
    flex-shrink: 0;
}

.nink-ref-card__icon svg {
    width: 20px;
    height: 20px;
}

.nink-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}

.nink-status-pill--review {
    background: #FEF3C7;
    color: #B45309;
}

.nink-status-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Timeline 4-step progress (Screen 11) */
.nink-timeline {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 16px;
    padding: var(--sp-20);
    text-align: left;
}

.nink-timeline__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8);
    position: relative;
    margin-top: var(--sp-12);
}

.nink-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.nink-timeline__node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FAF7F2;
    border: 1.5px solid rgba(11, 27, 43, 0.1);
    color: var(--nink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    z-index: 1;
}

.nink-timeline__node svg {
    width: 18px;
    height: 18px;
}

.nink-timeline__step.is-active .nink-timeline__node {
    background: #EB5A1E;
    border-color: #EB5A1E;
    color: #ffffff;
}

.nink-timeline__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nink-navy);
    line-height: 1.2;
}

.nink-timeline__sub {
    font-size: 0.68rem;
    color: var(--nink-muted);
    margin-top: 2px;
}

/* Confirmation Details & Items Summary (Screen 11) */
.nink-confirm-card__badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-16);
}

.nink-confirm-card__badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(235, 90, 30, 0.1);
    color: #EB5A1E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nink-confirm-card__check-icon {
    width: 32px;
    height: 32px;
}

.nink-confirm-card__title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--nink-navy);
    margin: 0 0 var(--sp-8);
}

.nink-confirm-card__lead {
    font-size: 0.95rem;
    color: var(--nink-muted);
    margin: 0 0 var(--sp-20);
    line-height: 1.45;
}

.nink-ref-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nink-ref-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--nink-muted);
}

.nink-ref-card__status {
    font-size: 0.78rem;
    font-weight: 600;
    color: #B45309;
    background: #FEF3C7;
    border-radius: 9999px;
    padding: 3px 10px;
}

.nink-ref-card__code {
    font-family: var(--font-mono, monospace);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--nink-navy);
    letter-spacing: 0.05em;
}

.nink-ref-card__email {
    font-size: 0.82rem;
    color: var(--nink-muted);
    margin: 0;
}

.nink-confirm-items {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 16px;
    padding: var(--sp-20);
    margin: var(--sp-20) 0;
    text-align: left;
}

.nink-confirm-items__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--nink-navy);
    margin: 0 0 var(--sp-12);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}

.nink-confirm-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 27, 43, 0.05);
    font-size: 0.88rem;
}

.nink-confirm-item-row:last-child {
    border-bottom: none;
}

.nink-confirm-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nink-confirm-item-info strong {
    color: var(--nink-navy);
}

.nink-confirm-item-space {
    font-size: 0.78rem;
    color: var(--nink-muted);
}

.nink-confirm-item-configs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--nink-muted);
}

.nink-confirm-item-price {
    font-weight: 600;
    color: var(--nink-navy);
    white-space: nowrap;
}

.nink-confirm-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-12);
    margin-top: var(--sp-8);
    border-top: 1.5px solid rgba(11, 27, 43, 0.08);
    font-size: 1.05rem;
}

.nink-confirm-total-row span {
    font-weight: 600;
    color: var(--nink-navy);
}

.nink-confirm-total-row strong {
    font-size: 1.3rem;
    color: var(--nink-navy);
}

.nink-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--sp-20);
}

/* =====================================================================
   Screen 4, 5, 7, 9: Browse, Market Switcher, Category Hero & Sheets
   ===================================================================== */

/* Market Switcher Pills (Screen 4) */
.nink-market-pills {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    overflow-x: auto;
    padding: var(--sp-16) 0 var(--sp-8);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nink-market-pills::-webkit-scrollbar {
    display: none;
}

.nink-market-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--nink-navy);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nink-market-pill:hover {
    border-color: rgba(235, 90, 30, 0.3);
    color: #EB5A1E;
}

.nink-market-pill.is-active {
    border-color: #EB5A1E;
    background: rgba(235, 90, 30, 0.04);
    color: #EB5A1E;
    font-weight: 600;
}

.nink-market-pill__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.nink-market-pill__icon svg {
    width: 16px;
    height: 16px;
}

/* Category Hero Banner (Screen 5) */
.nink-category-hero {
    background: #FAF7F2;
    padding: var(--sp-20) 0;
    margin-bottom: var(--sp-16);
    border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}

.nink-category-hero__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-16);
}

.nink-category-hero__content {
    flex: 1;
}

.nink-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--nink-muted);
    margin-bottom: var(--sp-8);
}

.nink-breadcrumb a {
    color: var(--nink-muted);
    text-decoration: none;
}

.nink-breadcrumb a:hover {
    color: var(--nink-navy);
}

.nink-breadcrumb__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    font-size: 0.9rem;
    color: var(--nink-navy);
}

.nink-category-hero__title {
    font-size: clamp(1.6rem, 3.8vw, 2.2rem);
    color: var(--nink-navy);
    line-height: 1.15;
    margin: 0 0 var(--sp-6);
}

.nink-category-hero__desc {
    font-size: 0.88rem;
    color: var(--nink-muted);
    margin: 0;
    line-height: 1.45;
    max-width: 540px;
}

.nink-category-hero__image-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 16px rgba(11, 27, 43, 0.08);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .nink-category-hero__image-wrap {
        width: 120px;
        height: 120px;
    }
}

.nink-category-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modern Product Card Overrides (Screen 5) */
.product-card__media-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #FAF7F2;
    aspect-ratio: 1 / 1;
}

.product-card__media-wrap .product-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
}

.product-card__arrow-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(235, 90, 30, 0.08);
    color: #EB5A1E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.product-card__arrow-btn:hover {
    background: #EB5A1E;
    color: #ffffff;
    transform: scale(1.05);
}

/* Bottom Sheet Modal System (Screen 7 & 9) */
.nink-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 27, 43, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.nink-sheet-backdrop[hidden] {
    display: none !important;
}

.nink-sheet {
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    overflow-y: auto;
    background: #FAF7F2;
    border-radius: 24px 24px 0 0;
    padding: var(--sp-24);
    position: relative;
    box-shadow: 0 -8px 32px rgba(11, 27, 43, 0.15);
    animation: ninkSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ninkSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.nink-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #CBD5E1;
    margin: 0 auto var(--sp-16);
}

.nink-sheet__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nink-navy);
    cursor: pointer;
}

.nink-sheet__header {
    margin-bottom: var(--sp-20);
}

.nink-sheet__title {
    font-size: 1.5rem;
    color: var(--nink-navy);
    margin: 0 0 4px;
}

.nink-sheet__subtitle {
    font-size: 0.88rem;
    color: var(--nink-muted);
    margin: 0;
}

.nink-sheet-market-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: #ffffff;
    border: 1.5px solid rgba(11, 27, 43, 0.08);
    border-radius: 16px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}

.nink-sheet-market-card:hover {
    border-color: rgba(235, 90, 30, 0.4);
}

.nink-sheet-market-card.is-selected {
    border-color: #EB5A1E;
    background: rgba(235, 90, 30, 0.02);
}

.nink-sheet-market-card__img-wrap {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.nink-sheet-market-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nink-sheet-market-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nink-sheet-market-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nink-sheet-market-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nink-navy);
}

.nink-sheet-market-card__radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: inline-block;
    transition: all 0.15s ease;
}

.nink-sheet-market-card.is-selected .nink-sheet-market-card__radio {
    border-color: #EB5A1E;
    background: #EB5A1E;
    box-shadow: inset 0 0 0 3px #ffffff;
}

.nink-sheet-market-card__desc {
    font-size: 0.8rem;
    color: var(--nink-muted);
    margin: 4px 0 6px;
    line-height: 1.35;
}

.nink-sheet-market-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.nink-sheet-market-card__tags span {
    font-size: 0.72rem;
    background: #FAF7F2;
    border: 1px solid rgba(11, 27, 43, 0.06);
    border-radius: 12px;
    padding: 2px 8px;
    color: var(--nink-muted);
}

/* Category Filter Pills Bar (Screen 5) */
.nink-category-filterbar {
    margin-bottom: var(--sp-16);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.nink-category-filterbar__pills {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.nink-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.12);
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--nink-navy);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.nink-pill-btn:hover {
    border-color: #EB5A1E;
    color: #EB5A1E;
}

.nink-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EB5A1E;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
}

.nink-pill-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nink-pill-select {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.12);
    border-radius: 9999px;
    padding: 8px 28px 8px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--nink-navy);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.nink-pill-select:hover,
.nink-pill-select:focus {
    border-color: #EB5A1E;
    outline: none;
}

.nink-pill-arrow {
    position: absolute;
    right: 10px;
    pointer-events: none;
    font-size: 0.65rem;
    color: var(--nink-muted);
}

/* Screen 9: Filter Bottom Sheet Modal Content */
.nink-sheet-filter-section {
    margin-bottom: var(--sp-16);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}

.nink-sheet-filter-heading {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--nink-navy);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nink-sheet-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nink-sheet-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.1);
    border-radius: 9999px;
    font-size: 0.82rem;
    color: var(--nink-navy);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.nink-sheet-chip:hover {
    border-color: rgba(235, 90, 30, 0.4);
}

.nink-sheet-chip.is-selected {
    background: #0B1B2B;
    border-color: #0B1B2B;
    color: #ffffff;
}

.nink-sheet-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-top: var(--sp-20);
    padding-top: var(--sp-12);
}

.nink-sheet-actions .nink-btn--orange {
    flex: 1;
}

/* Category Layout Mobile Refinement (Screen 5) */
@media (max-width: 900px) {
    .shop-layout--category .shop-filters {
        display: none !important;
    }
    .catalogue-toolbar--category {
        display: none !important;
    }
    .shop-layout--category .shop-main {
        width: 100%;
    }
}

/* =====================================================================
   Screen 8: Modern Product Detail Page Refinements
   ===================================================================== */
.nink-breadcrumb-bar {
    background: #FAF7F2;
    padding: var(--sp-12) 0;
    border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}

.product-gallery__main {
    border-radius: 20px;
    background: #FAF7F2;
    border: 1px solid rgba(11, 27, 43, 0.08);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(11, 27, 43, 0.04);
}

.product-gallery__thumbs {
    margin-top: var(--sp-12);
    gap: var(--sp-8);
}

.product-gallery__thumb {
    border-radius: 12px;
    border: 1.5px solid rgba(11, 27, 43, 0.08);
    background: #FAF7F2;
    transition: all 0.15s ease;
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
    border-color: #EB5A1E;
}

.product-info__cat {
    color: var(--nink-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.product-info__title {
    font-family: var(--nink-font-serif);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--nink-navy);
    line-height: 1.2;
    margin: var(--sp-6) 0 var(--sp-12);
}

.product-info__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    margin-bottom: var(--sp-16);
    flex-wrap: wrap;
}

.product-info__meta .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nink-navy);
}

.availability-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
}

.nink-product-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: var(--sp-20) 0 var(--sp-16);
}

.nink-btn--full {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1rem;
    border-radius: 14px;
}

.nink-btn--whatsapp {
    background: #25D366;
    color: #ffffff;
    border: none;
    font-weight: 600;
    transition: all 0.15s ease;
}

.nink-btn--whatsapp:hover {
    background: #20BA5A;
    color: #ffffff;
    transform: translateY(-1px);
}

.nink-product-ask-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--nink-muted);
    text-decoration: none;
    padding: var(--sp-6) 0;
    transition: color 0.15s ease;
}

.nink-product-ask-link:hover {
    color: #EB5A1E;
}

/* Trust Value Strip (Screen 8) */
.nink-product-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: #FAF7F2;
    border: 1px solid rgba(11, 27, 43, 0.06);
    border-radius: 14px;
    padding: 12px 14px;
    margin: var(--sp-16) 0 var(--sp-20);
    text-align: center;
}

.nink-product-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--nink-navy);
}

.nink-product-trust__icon {
    width: 18px;
    height: 18px;
    color: #EB5A1E;
}

/* Modern Accordion System (Screen 8) */
.nink-product-accordions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--sp-16);
}

.nink-accordion {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.nink-accordion[open] {
    box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
}

.nink-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--nink-navy);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.nink-accordion__summary::-webkit-details-marker {
    display: none;
}

.nink-accordion__chevron {
    font-size: 0.75rem;
    color: var(--nink-muted);
    transition: transform 0.2s ease;
}

.nink-accordion[open] .nink-accordion__chevron {
    transform: rotate(180deg);
    color: #EB5A1E;
}

.nink-accordion__body {
    padding: 0 18px 18px;
    font-size: 0.88rem;
    color: var(--nink-muted);
    line-height: 1.5;
}

.nink-accordion__text {
    margin: 0;
}

.nink-spec-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.nink-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(11, 27, 43, 0.05);
    font-size: 0.85rem;
}

.nink-spec-row:last-child {
    border-bottom: none;
}

.nink-spec-row dt {
    color: var(--nink-muted);
}

.nink-spec-row dd {
    font-weight: 500;
    color: var(--nink-navy);
    margin: 0;
    text-align: right;
}

.nink-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nink-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #FAF7F2;
    border: 1px solid rgba(11, 27, 43, 0.06);
    border-radius: 9999px;
    font-size: 0.78rem;
    color: var(--nink-navy);
}

/* Configurator Button Pill Styling */
.product-configurator__group {
    margin-bottom: var(--sp-12);
}

.product-configurator__label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--nink-navy);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-configurator__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-configurator__button {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 9999px;
    background: #FAF7F2;
    border: 1.5px solid rgba(11, 27, 43, 0.08);
    font-size: 0.85rem;
    color: var(--nink-navy);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.product-configurator__button:hover {
    border-color: rgba(235, 90, 30, 0.4);
}

.product-configurator__button.is-active {
    background: #0B1B2B;
    border-color: #0B1B2B;
    color: #ffffff;
    font-weight: 600;
}

/* =====================================================================
   Screen 6, 6b, 10: Modern Quote Experience Overrides
   ===================================================================== */
.qe-plan {
    background: #FAF7F2;
    padding-top: var(--sp-20);
}

.qe-plan__estimate {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    box-shadow: 0 4px 20px rgba(11, 27, 43, 0.04);
    border-radius: 16px;
    padding: var(--sp-20);
}

.qe-plan__total {
    border-top: 1.5px solid rgba(11, 27, 43, 0.08);
    color: var(--nink-navy);
    font-weight: 700;
}

.qe-submit {
    background: #FAF7F2;
    padding-top: var(--sp-20);
}

.qe-recap {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.08);
    border-radius: 16px;
    color: var(--nink-navy);
    box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
    padding: var(--sp-16) var(--sp-20);
}

.qe-recap strong {
    color: var(--nink-navy);
}

.qe-form-field input,
.qe-form-field textarea {
    background: #ffffff;
    border: 1px solid rgba(11, 27, 43, 0.12);
    border-radius: 12px;
    box-shadow: none;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--nink-navy);
    transition: border-color 0.15s ease;
}

.qe-form-field input:focus,
.qe-form-field textarea:focus {
    border-color: #EB5A1E;
    outline: none;
    box-shadow: 0 0 0 3px rgba(235, 90, 30, 0.12);
}

.qe-form-field label {
    color: var(--nink-navy);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    text-transform: none;
}

.btn-t1-dimmer--full,
#qePlanSubmit,
#qeRequestQuoteBtn {
    background: #EB5A1E;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(235, 90, 30, 0.25);
    transition: all 0.15s ease;
}

.btn-t1-dimmer--full:hover,
#qePlanSubmit:hover,
#qeRequestQuoteBtn:hover {
    background: #D94F17;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(235, 90, 30, 0.32);
}

.btn-t1-dimmer--full .btn-t1-dimmer__track,
#qePlanSubmit .btn-t1-dimmer__track,
#qeRequestQuoteBtn .btn-t1-dimmer__track {
    display: none;
}

/* =====================================================================
   Your Selection (NINK-SEL-003/005/008 / NINK-UI Polish)
   Curated project selection - editorial procurement presentation.
   ===================================================================== */
.selection-page {
    background-color: var(--paper, #FBF8F2);
    min-height: calc(100vh - 200px);
    padding-top: var(--sp-32, 2rem);
    padding-bottom: var(--sp-64, 4rem);
}

@media (max-width: 767px) {
    .selection-page {
        padding-top: var(--sp-20, 1.25rem);
        /* Clearance so scrolling past the last item and sticky action area never collides with fixed bottom nav */
        padding-bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 10px) + var(--sp-64, 4rem));
    }
}

.selection-page__wrap {
    max-width: 780px;
    margin-inline: auto;
    padding-inline: var(--sp-16, 1rem);
}

@media (min-width: 640px) {
    .selection-page__wrap {
        padding-inline: var(--sp-24, 1.5rem);
    }
}

/* Page Header */
.selection-page__header {
    margin-bottom: var(--sp-32, 2rem);
}

.selection-page__eyebrow {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-deep, #8A6329);
    margin-bottom: var(--sp-8, 0.5rem);
}

.selection-page__title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-navy, #0F1E36);
    margin: 0 0 var(--sp-12, 0.75rem);
    letter-spacing: -0.02em;
}

.selection-page__lead {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-muted, #6E6555);
    margin: 0;
    max-width: 580px;
}

.selection-page__notice {
    margin: 0 0 var(--sp-16, 1rem);
    font-size: 0.9375rem;
    color: var(--brass-deep, #8A6329);
    font-weight: 500;
}

.selection-page__loading {
    font-size: 1rem;
    color: var(--text-muted, #6E6555);
    font-style: italic;
    margin: var(--sp-32, 2rem) 0;
}

/* Empty State */
.selection-empty {
    margin: var(--sp-32, 2rem) 0;
    padding: var(--sp-48, 3rem) var(--sp-24, 1.5rem);
    background: #FFFFFF;
    border: 1px solid var(--line, #E4DBC9);
    border-radius: var(--radius-md, 16px);
    text-align: center;
    box-shadow: 0 4px 20px rgba(15, 30, 54, 0.03);
}

.selection-empty__icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-16, 1rem);
    border-radius: 50%;
    background: var(--paper-2, #F1EADD);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brass-deep, #8A6329);
}

.selection-empty__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--c-navy, #0F1E36);
    margin: 0 0 var(--sp-8, 0.5rem);
}

.selection-empty__text {
    font-size: 1rem;
    color: var(--text-muted, #6E6555);
    margin: 0 auto var(--sp-24, 1.5rem);
    max-width: 420px;
    line-height: 1.5;
}

.selection-empty__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-12, 0.75rem);
    flex-wrap: wrap;
}

.selection-empty__btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--sp-20, 1.25rem);
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--line, #E4DBC9);
    background: transparent;
    color: var(--c-navy, #0F1E36);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.selection-empty__btn-secondary:hover {
    background: var(--paper-2, #F1EADD);
    border-color: var(--brass-deep, #8A6329);
}

/* Selection List */
.selection-list {
    list-style: none;
    margin: 0 0 var(--sp-32, 2rem);
    padding: 0;
    display: grid;
    gap: var(--sp-16, 1rem);
}

/* Selection Line Card */
.selection-line {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: var(--sp-20, 1.25rem);
    padding: var(--sp-20, 1.25rem);
    background: #FFFFFF;
    border: 1px solid rgba(15, 30, 54, 0.08);
    border-radius: var(--radius-md, 16px);
    box-shadow: 0 2px 8px rgba(15, 30, 54, 0.02), 0 1px 2px rgba(15, 30, 54, 0.02);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    align-items: stretch;
}

.selection-line:hover {
    box-shadow: 0 6px 18px rgba(15, 30, 54, 0.05);
}

.selection-line__media {
    width: 104px;
    height: 104px;
    border-radius: var(--radius-sm, 10px);
    background: var(--paper-2, #F1EADD);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selection-line__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.selection-line__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: flex-start;
}

.selection-line__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-navy, #0F1E36);
    text-decoration: none;
    line-height: 1.35;
    margin-bottom: 4px;
    display: inline-block;
    transition: color 0.15s ease;
}

a.selection-line__name:hover {
    color: var(--c-orange, #F25A2A);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.selection-line__config {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.selection-line__config li {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted, #6E6555);
    background: rgba(15, 30, 54, 0.04);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.01em;
}

.selection-line__status {
    margin: 0 0 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted, #6E6555);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.selection-line__status--available {
    color: #1E6B3A;
}

.selection-line__status--available::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #2E8540;
    flex-shrink: 0;
}

.selection-line__status--notice {
    color: var(--brass-deep, #8A6329);
}

.selection-line__status--notice::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--brass-deep, #8A6329);
    flex-shrink: 0;
}

.selection-line__status--warning {
    color: var(--attention-deep, #8C4A1A);
}

.selection-line__status--warning::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--attention-light, #C97B46);
    flex-shrink: 0;
}

/* Stale / Invalid Lines - calm warning treatment */
.selection-line--unavailable,
.selection-line--needs_options,
.selection-line--unit_changed {
    background: #FFFDF8;
    border-color: rgba(201, 123, 70, 0.35);
    border-left: 4px solid var(--attention-light, #C97B46);
    opacity: 1; /* keep line visible, never suggest silent removal */
}

.selection-line--unavailable .selection-line__status,
.selection-line--needs_options .selection-line__status,
.selection-line--unit_changed .selection-line__status {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--attention-deep, #8C4A1A);
    background: rgba(201, 123, 70, 0.09);
    border: 1px solid rgba(201, 123, 70, 0.22);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 4px 0 10px;
}

.selection-line--unavailable .selection-line__status::before,
.selection-line--needs_options .selection-line__status::before,
.selection-line--unit_changed .selection-line__status::before {
    display: none;
}

/* Price States */
.selection-line__price {
    margin: 0 0 12px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-navy, #0F1E36);
    letter-spacing: -0.01em;
}

.selection-line__price--contact {
    color: var(--brass-deep, #8A6329);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
}

.selection-line__price--indicative {
    color: var(--text-muted, #6E6555);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Lower Controls / Actions */
.selection-line__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12, 0.75rem);
    margin-top: auto;
    padding-top: var(--sp-12, 0.75rem);
    border-top: 1px solid rgba(15, 30, 54, 0.05);
    flex-wrap: wrap;
}

/* Stepper */
.selection-line__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(15, 30, 54, 0.16);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 30, 54, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
}

.selection-line__qty:focus-within {
    border-color: var(--c-navy, #0F1E36);
    box-shadow: 0 0 0 2px rgba(15, 30, 54, 0.16);
}

.selection-line__step {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--c-navy, #0F1E36);
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 0;
    position: relative;
}

.selection-line__step:first-of-type {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.selection-line__step:hover:not(:disabled) {
    background: rgba(15, 30, 54, 0.06);
}

.selection-line__step:active:not(:disabled) {
    background: rgba(15, 30, 54, 0.12);
}

.selection-line__step:focus-visible,
.selection-line__step:focus {
    outline: 2px solid var(--c-orange, #F25A2A);
    outline-offset: -2px;
    z-index: 2;
}

.selection-line__step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.selection-line__qty-input {
    width: 52px;
    min-height: 44px;
    text-align: center;
    border: none;
    border-left: 1px solid rgba(15, 30, 54, 0.12);
    border-right: 1px solid rgba(15, 30, 54, 0.12);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-navy, #0F1E36);
    background: #FFFFFF;
    padding: 0;
    -moz-appearance: textfield;
    position: relative;
}

.selection-line__qty-input:focus-visible,
.selection-line__qty-input:focus {
    outline: 2px solid var(--c-orange, #F25A2A);
    outline-offset: -2px;
    z-index: 2;
}

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

.selection-line__unit {
    padding: 6px 10px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-muted, #6E6555);
    font-weight: 500;
    background: rgba(15, 30, 54, 0.03);
    border-left: 1px solid rgba(15, 30, 54, 0.12);
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    min-height: 44px;
    height: auto;
    display: inline-flex;
    align-items: center;
    user-select: none;
    white-space: normal;
    word-break: break-word;
    flex: 1 1 auto;
}

.selection-line__unit:empty {
    display: none;
}

.selection-line__step--last,
.selection-line__qty--no-unit .selection-line__step:last-of-type,
.selection-line__qty > .selection-line__step:last-child {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.selection-line__remove {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-muted, #6E6555);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(15, 30, 54, 0.2);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.selection-line__remove:hover:not(:disabled) {
    color: #DC2626;
    text-decoration-color: #DC2626;
}

.selection-line__remove:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.selection-line__msg {
    margin: 6px 0 0;
    font-size: 0.825rem;
    color: #B91C1C;
    font-weight: 500;
}

/* Action Area (Desktop & Mobile) */
.selection-intent {
    margin: var(--sp-32, 2rem) 0 var(--sp-48, 3rem);
}

.selection-intent__card {
    background: #FFFFFF;
    border: 1px solid var(--line, #E4DBC9);
    border-radius: var(--radius-md, 16px);
    padding: var(--sp-24, 1.5rem);
    box-shadow: 0 4px 16px rgba(15, 30, 54, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-24, 1.5rem);
}

.selection-intent__info {
    flex: 1 1 auto;
    min-width: 0;
}

.selection-intent__summary {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--c-navy, #0F1E36);
    margin: 0 0 4px;
    line-height: 1.4;
}

.selection-intent__hint {
    font-size: 0.85rem;
    color: var(--text-muted, #6E6555);
    margin: 0;
    line-height: 1.45;
}

.selection-intent__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-16, 1rem);
    flex-shrink: 0;
}

.selection-intent__buy-btn {
    white-space: nowrap;
    min-height: 48px;
    padding: 0 var(--sp-24, 1.5rem);
    font-weight: 600;
    font-size: 0.95rem;
}

.selection-intent__browse-btn {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted, #6E6555);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    padding: 8px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.selection-intent__browse-btn:hover {
    color: var(--c-navy, #0F1E36);
}

/* Action Area on Mobile (Normal Document Flow) */
@media (max-width: 767px) {
    .selection-intent {
        position: static;
        margin: var(--sp-24, 1.5rem) 0 var(--sp-32, 2rem);
    }
    .selection-intent__card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-12, 0.75rem);
        padding: var(--sp-16, 1rem);
        border-radius: var(--radius-md, 16px);
        background: #FFFFFF;
        box-shadow: 0 1px 3px rgba(15, 30, 54, 0.06);
        border: 1px solid var(--line, #E4DBC9);
    }
    .selection-intent__actions {
        flex-direction: column;
        width: 100%;
        gap: var(--sp-8, 0.5rem);
    }
    .selection-intent__buy-btn {
        width: 100%;
        min-height: 48px;
    }
    .selection-intent__browse-btn {
        text-align: center;
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Buy Form Section */
.selection-buy {
    margin: var(--sp-32, 2rem) 0;
}

.selection-buy__card {
    background: #FFFFFF;
    border: 1px solid var(--line, #E4DBC9);
    border-radius: var(--radius-md, 16px);
    padding: var(--sp-32, 2rem);
    box-shadow: 0 4px 20px rgba(15, 30, 54, 0.04);
}

.selection-buy__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--c-navy, #0F1E36);
    margin: 0 0 var(--sp-8, 0.5rem);
}

.selection-buy__lead {
    font-size: 0.95rem;
    color: var(--text-muted, #6E6555);
    margin: 0 0 var(--sp-24, 1.5rem);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .selection-buy__card {
        padding: var(--sp-20, 1.25rem);
    }
}

/* Submitted Follow-up Panel (Confirmation Page) */
.selection-submitted { margin: var(--sp-6, 24px) 0; }
.selection-submitted__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.selection-intent[hidden],
.selection-buy[hidden],
.selection-empty[hidden] {
    display: none !important;
}

/* Partial total note styling */
.nink-confirm-total-note,
.selection-partial-note {
    font-size: 0.85rem;
    color: var(--text-muted, #6E6555);
    margin-top: 4px;
    line-height: 1.4;
    word-break: break-word;
}

/* Responsive adjustments for line cards */
@media (max-width: 640px) {
    .selection-line {
        grid-template-columns: 80px 1fr;
        gap: 14px;
        padding: 14px;
        border-radius: 12px;
    }
    .selection-line__media {
        width: 80px;
        height: 80px;
    }
    .selection-line__name {
        font-size: 1rem;
    }
}

@media (max-width: 390px) {
    .selection-line {
        grid-template-columns: 72px 1fr;
        gap: 12px;
        padding: 12px;
    }
    .selection-line__media {
        width: 72px;
        height: 72px;
    }
    .selection-line__actions {
        gap: 8px;
    }
    .selection-line__qty {
        width: auto;
        max-width: 100%;
    }
    .selection-line__unit {
        max-width: 140px;
    }
}

/* CAT-019.3: contained reusable pickers, inside the established admin cards. */
.admin-contained-picker { border: 1px solid var(--border, #ddd4c2); border-radius: var(--radius-sm); margin-top: .5rem; }
.admin-contained-picker__summary { padding: .75rem; cursor: pointer; font-size: .875rem; overflow-wrap: anywhere; }
.admin-contained-picker__summary:focus-visible { outline: 2px solid var(--brass, #b58b40); outline-offset: 2px; }
.admin-contained-picker__body { padding: .75rem; display: grid; gap: .75rem; }
.admin-contained-picker__body .admin-check-list,
.admin-contained-picker__body .admin-pill-group,
.admin-contained-picker__body .attr-picker-options { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.admin-contained-picker [hidden] { display: none !important; }
.admin-product-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-product-field-grid .admin-field { margin-bottom: 0; min-width: 0; }
.admin-product-field--wide { grid-column: 1 / -1; }
@media (max-width: 767px) { .admin-product-field-grid { grid-template-columns: minmax(0, 1fr); } }

.admin-contained-picker .attr-option-btn { min-height: 44px; }

[data-catalogue-family][hidden], [data-catalogue-family-specs][hidden] { display: none !important; }

/* Hidden option acknowledgements follow the selected known concept. */
[data-option-contradiction][hidden] { display: none !important; }

.admin-contained-picker__body .admin-preset-list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }

/* NINK-CAT-015: managed SKU picker and held-SKU display (calm ink/brass/paper). */
.admin-sku-picker__note { margin: 0; font-size: .8125rem; color: var(--text-muted); }
.admin-sku-picker__choose { display: grid; gap: .5rem; }
.admin-sku-picker__choose[hidden] { display: none !important; }
.admin-sku-picker__status { margin: 0; min-height: 1.25em; font-size: .8125rem; color: var(--text-muted); }
.admin-sku-picker__options { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 100%; max-height: 240px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.admin-sku-picker__options[hidden] { display: none !important; }
.admin-sku-picker__option {
    appearance: none; min-height: 44px; max-width: 100%; padding: .5rem .75rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text); font: inherit; font-size: .8125rem;
    line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.admin-sku-picker__option:hover { background: var(--paper-2); border-color: var(--brass-deep); }
.admin-sku-picker__option:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: -3px; }
.admin-sku-picker__option.is-selected { background: var(--paper-2); border-color: var(--brass-deep); box-shadow: inset 0 0 0 1px var(--brass-deep); }
.admin-sku-picker__option.is-active { outline: 2px solid var(--brass-deep); outline-offset: -3px; }
.admin-sku-picker .admin-text-input { max-width: 100%; box-sizing: border-box; }
.admin-sku-held__value { margin: .25rem 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* NINK-REQ-021: Your draft brief (customer). Paper surfaces, ink text,
   brass for state; existing nink-btn controls; no fixed widths so a 390px
   viewport never scrolls sideways. */
.nink-brief__wrap { max-width: 720px; }
.nink-brief__progress { margin-bottom: var(--sp-24); }
.nink-brief__panel { text-align: left; outline: none; }
.nink-brief__title { color: var(--nink-navy); font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0 0 var(--sp-8); }
.nink-brief__meta { margin: 0 0 var(--sp-8); color: var(--brass-deep); font-weight: 600; font-size: .875rem; letter-spacing: .02em; }
.nink-brief__lede { margin: 0 0 var(--sp-16); color: var(--text); line-height: 1.5; }
.nink-brief__notice, .nink-brief__flash {
    margin: 0 0 var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-sm);
    background: var(--paper-2); border-left: 3px solid var(--brass); color: var(--text); line-height: 1.45;
}
.nink-brief__flash--error { border-left-color: var(--attention-deep); background: #FBEFE6; }
.nink-brief__flash p { margin: 0; }
.nink-brief__flash p + p { margin-top: var(--sp-8); }
.nink-brief__inline-form { margin: 0 0 var(--sp-16); }
.nink-brief__small { font-size: .8125rem; color: var(--text-muted); line-height: 1.45; margin: var(--sp-8) 0; }
.nink-brief__original { margin: 0 0 var(--sp-16); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.nink-brief__original summary, .nink-need__alts summary, .nink-need__edit summary {
    cursor: pointer; padding: var(--sp-12); min-height: 44px; box-sizing: border-box; font-weight: 600; color: var(--nink-navy);
}
.nink-brief__original summary:focus-visible, .nink-need__alts summary:focus-visible, .nink-need__edit summary:focus-visible {
    outline: 2px solid var(--brass-deep); outline-offset: 2px;
}
.nink-brief__original-text { margin: 0; padding: 0 var(--sp-12) var(--sp-12); overflow-wrap: anywhere; white-space: normal; }
.nink-brief__needs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-16); }
.nink-need {
    background: var(--nink-surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--sp-16); min-width: 0; overflow-wrap: anywhere;
}
.nink-need:target { box-shadow: 0 0 0 2px var(--brass); }
.nink-need__head { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: baseline; justify-content: space-between; }
.nink-need__title { margin: 0; font-size: 1.125rem; color: var(--nink-navy); min-width: 0; }
.nink-need__badge {
    font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill);
    background: var(--paper-2); color: var(--brass-deep); white-space: nowrap;
}
.nink-need__badge--ok { background: #E8F3EC; color: #1F6B43; }
.nink-need__facts { margin: var(--sp-8) 0 0; font-size: .9rem; color: var(--text); }
.nink-need__raw { margin: var(--sp-8) 0 0; font-size: .8125rem; color: var(--text-muted); }
.nink-need__question { margin: var(--sp-8) 0 0; font-size: .875rem; color: var(--attention-deep); }
.nink-need__actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-12); }
.nink-need__actions form { margin: 0; }
.nink-need__alts, .nink-need__edit { margin-top: var(--sp-12); border-top: 1px solid var(--line); }
.nink-need__alt-list { list-style: none; margin: 0; padding: 0 0 var(--sp-8); display: grid; gap: var(--sp-8); }
.nink-need__form { display: grid; gap: var(--sp-8); padding: 0 0 var(--sp-12); }
.nink-need__form label { font-size: .875rem; font-weight: 600; color: var(--nink-navy); }
.nink-need__form input, .nink-cand__option select {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: var(--sp-8) var(--sp-12);
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font: inherit; color: var(--text);
}
.nink-need__form input:focus-visible, .nink-cand__option select:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 1px; }
.nink-need__hint { font-weight: 400; color: var(--text-muted); font-size: .8125rem; }
.nink-need__remove { padding: 0 0 var(--sp-8); }
.nink-cand { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: flex-start; padding: var(--sp-12); border-radius: var(--radius-sm); background: var(--paper); min-width: 0; }
.nink-cand--selected { margin-top: var(--sp-12); border: 1px solid var(--brass); }
.nink-cand__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--paper-2); }
.nink-cand__body { flex: 1 1 180px; min-width: 0; }
.nink-cand__name { display: block; font-weight: 600; color: var(--nink-navy); margin: 0; }
.nink-cand__price { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.nink-cand__label { margin: 4px 0 0; font-size: .8125rem; color: var(--brass-deep); font-weight: 600; }
.nink-cand__why { margin: 4px 0 0; font-size: .8125rem; color: var(--text-muted); }
.nink-cand form { margin: 0; }
.nink-cand__options fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-12); margin: var(--sp-12) 0 0; display: grid; gap: var(--sp-8); min-width: 0; }
.nink-cand__options legend { font-weight: 600; color: var(--nink-navy); padding: 0 4px; }
.nink-cand__option { display: grid; gap: 4px; font-size: .875rem; }
.nink-btn--compact { min-height: 44px; padding: 0 var(--sp-16); font-size: .875rem; white-space: normal; text-align: center; line-height: 1.2; }
.nink-brief__context { margin-top: var(--sp-24); }
.nink-brief__context ul, .nink-brief__exclusions { margin: 0 0 var(--sp-12); padding-left: 1.2rem; }
.nink-brief__subtitle { font-size: .95rem; margin: var(--sp-12) 0 var(--sp-8); color: var(--nink-navy); }
.nink-brief__summary {
    margin-top: var(--sp-24); padding: var(--sp-16); border-radius: var(--radius-md);
    background: var(--nink-navy); color: var(--text-invert);
}
.nink-brief__summary h3, .nink-brief__summary .nink-brief__subtitle { color: var(--brass-bright); margin-top: 0; }
.nink-brief__summary .nink-brief__small { color: var(--text-invert-mut); }
.nink-brief__coverage { margin: 0; font-weight: 600; }
.nink-brief__total { margin: var(--sp-8) 0 0; font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 1.8rem); color: #FFFFFF; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nink-brief__submit { margin-top: var(--sp-24); display: grid; gap: var(--sp-8); }
.nink-brief__submit .nink-btn { white-space: normal; line-height: 1.2; }