/**
 * PrintifySign — Display Products Category Styles
 *
 * File:    assets/display/display.css
 * Phase:   v2.0 Phase 4B-2 — Display Products Experience Prototype
 * Status:  NEW. Scoped to body.psd-display-active.
 *
 * ─── PURPOSE ─────────────────────────────────────────────────────────────
 *
 * Implements the Display Products category landing — same platform
 * identity as Signage (same tokens, same fonts, same motion), but
 * different interaction density:
 *   - Hero is shorter (~60vh) not cinematic 100vh
 *   - Product grid is denser (4-col vs Signage's 3-col)
 *   - Cards show spec + price (Signage cards show image only)
 *   - Faster pacing throughout
 *
 * The "same identity, different density" proof is verifiable: open
 * /display/ next to /. Same header. Same fonts. Same colors. Same
 * motion. But the content surface feels denser, more product-like.
 *
 * ─── ARCHITECTURE NOTES ──────────────────────────────────────────────────
 *
 * Scoped under body.psd-display-active. No cross-pollution with
 * body.psd-inspiration-active (Signage).
 *
 * Nav styles duplicated from landing.css. This is intentional for the
 * prototype — a future cycle can extract to a true shared layer. For
 * now, duplication is safer than coupling.
 *
 * Tokens loaded from assets/inspiration/landing-tokens.css (the
 * platform-wide token system established in Phase 2C).
 */


/* ════════════════════════════════════════════════════════════════════════
   1. PAGE FOUNDATION — body resets scoped to Display
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active {
    margin: 0;
    padding: 0;
    background: var(--psd-l-paper);
    color: var(--psd-l-text-primary);
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-body);
    line-height: var(--psd-l-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.psd-display-active * {
    box-sizing: border-box;
}

body.psd-display-active #psd-display-root {
    display: block;
    width: 100%;
    overflow-x: hidden;
}

/* Universal :focus-visible — matches Signage's Phase 2E pattern */
body.psd-display-active :focus-visible {
    outline: 2px solid var(--psd-l-gold);
    outline-offset: 3px;
}


/* ════════════════════════════════════════════════════════════════════════
   2. PLATFORM NAV — identical to Signage so platform identity holds
   
   These rules are intentionally parallel to body.psd-inspiration-active
   .psd-l-nav (landing.css lines 281-419). Same selectors, same property
   values, same transitions. The Display nav must look identical to the
   Signage nav so the customer recognizes "same platform" instantly when
   switching between / and /display/.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active .psd-l-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--psd-l-z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--psd-l-nav-height);
    padding: 0 var(--psd-l-section-gutter);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--psd-l-dur-medium) var(--psd-l-ease-standard),
                color var(--psd-l-dur-medium) var(--psd-l-ease-standard),
                border-color var(--psd-l-dur-medium) var(--psd-l-ease-standard),
                backdrop-filter var(--psd-l-dur-medium) var(--psd-l-ease-standard);
}

/* Display landing has a light paper background throughout — the nav
   over-hero state is over a LIGHT surface, not Signage's dark hero. So
   the over-hero state for Display starts in the "light" register
   directly. No scrolled-state transition needed — Display nav stays
   light always.
   
   That said, we preserve the data-state attribute and selectors for
   structural parity (so if landing.js fires on Display in the future,
   the selectors exist). */

body.psd-display-active .psd-l-nav[data-state="over-hero"] {
    background: transparent;
    color: var(--psd-l-text-primary);  /* dark text on light hero background */
}

body.psd-display-active .psd-l-nav[data-state="scrolled"] {
    background: rgba(245, 244, 240, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--psd-l-border-light);
    color: var(--psd-l-text-primary);
}

body.psd-display-active .psd-l-nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-deck);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: -0.2px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

body.psd-display-active .psd-l-nav-mark {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: var(--psd-l-gold);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--psd-l-gold-glow);
}

body.psd-display-active .psd-l-nav-name {
    display: inline-block;
}

body.psd-display-active .psd-l-nav-links {
    display: none;
    gap: var(--psd-l-space-6);
}

body.psd-display-active .psd-l-nav-links a {
    color: inherit;
    text-decoration: none;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-nav);
    font-weight: var(--psd-l-weight-regular);
    opacity: 0.7;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-l-nav-links a:hover {
    opacity: 1;
}

body.psd-display-active .psd-l-nav-links a.is-active {
    opacity: 1;
    font-weight: var(--psd-l-weight-medium);
    box-shadow: inset 0 -2px 0 var(--psd-l-gold);
    padding-bottom: 2px;
}

body.psd-display-active .psd-l-nav-links a.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

body.psd-display-active .psd-l-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: var(--psd-l-radius-pill);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                border-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
    border: 1px solid var(--psd-l-ink);
    color: var(--psd-l-ink);
    background: transparent;
}

body.psd-display-active .psd-l-nav-cta:hover {
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
}


/* ════════════════════════════════════════════════════════════════════════
   3. HERO — lighter than Signage's cinematic 100vh
   
   Display Products hero is utility-oriented:
   - ~50vh on desktop (not 100vh) — Phase 4B-3 pacing harmony refinement
   - Light paper background (not the cinematic dark wall)
   - Subtler typography emphasis
   - Visible CTA scrolling to product grid
   
   This shorter hero is the SINGLE most important density differentiator
   between Display and Signage. Customers see products above the fold on
   tablets/desktops, not below.

   Phase 4B-3 pacing harmony note: hero compressed from 60vh→50vh
   (desktop), 55vh→48vh (tablet), 50vh→45vh (mobile). The reduction
   strengthens Display's utility register: faster, tighter, more
   product-forward than Signage's cinematic 100vh. The relationship
   between modes now reads as intentional cadence variation rather than
   "Display hero just happens to be shorter."
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active .psd-d-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--psd-l-nav-height) + var(--psd-l-section-vpad)) var(--psd-l-section-gutter) var(--psd-l-section-vpad);
    background: var(--psd-l-paper);
    overflow: hidden;
}

body.psd-display-active .psd-d-hero-inner {
    position: relative;
    width: 100%;
    max-width: 760px;
    text-align: center;
}

body.psd-display-active .psd-d-hero-eyebrow {
    display: inline-block;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-eyebrow);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--psd-l-text-secondary);
    margin-bottom: var(--psd-l-space-5);
}

body.psd-display-active .psd-d-hero-headline {
    font-family: var(--psd-l-font-display);
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1.05;
    letter-spacing: -1px;
    color: var(--psd-l-ink);
    margin: 0 0 var(--psd-l-space-5);
}

body.psd-display-active .psd-d-hero-headline em {
    font-family: var(--psd-l-font-editorial);
    font-style: italic;
    font-weight: var(--psd-l-weight-regular);
    color: var(--psd-l-gold-deep);
}

body.psd-display-active .psd-d-hero-deck {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-deck);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-secondary);
    margin: 0 auto var(--psd-l-space-7);
    max-width: var(--psd-l-text-max-w);
}

body.psd-display-active .psd-d-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--psd-l-radius-pill);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    text-decoration: none;
    color: var(--psd-l-ink);
    background: transparent;
    border: 1px solid var(--psd-l-ink);
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-d-hero-cta:hover {
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
}

body.psd-display-active .psd-d-hero-cta-arrow {
    font-size: 0.9em;
    opacity: 0.85;
}


/* ════════════════════════════════════════════════════════════════════════
   4. PRODUCT GRID SECTION — the main content
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active .psd-d-grid-section {
    padding: var(--psd-l-section-vpad) var(--psd-l-section-gutter);
    background: var(--psd-l-paper);
}

body.psd-display-active .psd-d-grid-inner {
    width: 100%;
    max-width: var(--psd-l-content-max-w);
    margin: 0 auto;
}

body.psd-display-active .psd-d-grid-header {
    text-align: center;
    margin-bottom: var(--psd-l-space-9);
}

body.psd-display-active .psd-d-grid-heading {
    font-family: var(--psd-l-font-display);
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--psd-l-ink);
    margin: 0 0 var(--psd-l-space-4);
}

body.psd-display-active .psd-d-grid-heading em {
    font-family: var(--psd-l-font-editorial);
    font-style: italic;
    font-weight: var(--psd-l-weight-regular);
    color: var(--psd-l-gold-deep);
}

body.psd-display-active .psd-d-grid-sub {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-body);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-secondary);
    margin: 0 auto;
    max-width: 540px;
}


/* ────────────────────────────────────────────────────────────────────────
   The grid itself — mobile-first, expands to multi-column on wider screens
   
   Mobile: 1 column
   Tablet (≥640px): 2 columns
   Desktop (≥1100px): 4 columns
   
   This is denser than Signage's 3-column feed. Display is utility-grade —
   customer wants to see the full catalog quickly.
   ──────────────────────────────────────────────────────────────────────── */

body.psd-display-active .psd-d-product-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--psd-l-space-6);
}


/* ════════════════════════════════════════════════════════════════════════
   5. PRODUCT CARD
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active .psd-d-product-card {
    background: var(--psd-l-paper-deep);
    border: 1px solid var(--psd-l-border-light);
    border-radius: var(--psd-l-radius-lg);
    overflow: hidden;
    transition: transform var(--psd-l-dur-slow) var(--psd-l-ease-cinematic),
                box-shadow var(--psd-l-dur-slow) var(--psd-l-ease-cinematic),
                border-color var(--psd-l-dur-slow) var(--psd-l-ease-cinematic);
}

body.psd-display-active .psd-d-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(10, 10, 10, 0.08);
    border-color: var(--psd-l-border-dark);
}

body.psd-display-active .psd-d-product-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}


/* ────────────────────────────────────────────────────────────────────────
   Product visual — CSS-rendered placeholder
   
   Per blueprint §5: prototype uses CSS-rendered silhouettes instead of
   real product photography. Each silhouette is built from simple
   geometric shapes (rectangles, lines) suggesting the product type.
   Recognizable but obviously stylized — sets expectation that real
   photography is a future workstream.
   ──────────────────────────────────────────────────────────────────────── */

body.psd-display-active .psd-d-product-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(ellipse 60% 50% at 50% 35%, rgba(255, 245, 224, 0.12), transparent 70%),
        linear-gradient(160deg, #1a1a18 0%, #0d0d0c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.psd-display-active .psd-d-visual-label {
    /* Phase 4B-3 subtractive calibration (light pass): the gold
       top-left label inside the product visual duplicated information
       already carried by the larger product name displayed directly
       below the visual. It did not earn its place — removing the
       decorative repetition tightens the card and lets the silhouette
       carry the visual identity alone.

       The element is hidden via display:none rather than removed from
       the PHP template so this calibration is one-line reversible if
       real product photography arrives and the label proves useful
       again as metadata. */
    display: none;
    position: absolute;
    top: 12px;
    left: 14px;
    font-family: var(--psd-l-font-display);
    font-size: 10px;
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: 1.5px;
    color: var(--psd-l-gold);
    opacity: 0.7;
}

body.psd-display-active .psd-d-visual-silhouette {
    display: block;
    background: var(--psd-l-warm-white);
    opacity: 0.85;
    box-shadow: 0 0 24px rgba(255, 245, 224, 0.18);
}

/* Per-product silhouette shapes (built from box dimensions + radius) */

/* Roll-up: tall narrow rectangle with rounded top, like a banner pulled up */
body.psd-display-active .psd-d-visual--roll-up .psd-d-visual-silhouette {
    width: 28%;
    height: 70%;
    border-radius: 4px 4px 2px 2px;
}

/* X-banner: wider, less tall, has tilted cross feel (simulated via subtle skew) */
body.psd-display-active .psd-d-visual--x-banner .psd-d-visual-silhouette {
    width: 40%;
    height: 56%;
    border-radius: 2px;
    transform: skewY(-2deg);
}

/* Tent: trapezoidal-ish wider top, simulated via clip-path */
body.psd-display-active .psd-d-visual--tent .psd-d-visual-silhouette {
    width: 60%;
    height: 50%;
    border-radius: 4px 4px 0 0;
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

/* LED Board: wide horizontal rectangle */
body.psd-display-active .psd-d-visual--led-board .psd-d-visual-silhouette {
    width: 68%;
    height: 38%;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 245, 224, 0.95), rgba(255, 245, 224, 0.7));
}


/* ────────────────────────────────────────────────────────────────────────
   Card body — name, spec, price, CTA
   ──────────────────────────────────────────────────────────────────────── */

body.psd-display-active .psd-d-product-body {
    padding: var(--psd-l-space-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.psd-display-active .psd-d-product-name {
    font-family: var(--psd-l-font-display);
    font-size: 16px;
    font-weight: var(--psd-l-weight-medium);
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--psd-l-ink);
    margin: 0 0 6px;
}

body.psd-display-active .psd-d-product-spec {
    font-family: var(--psd-l-font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--psd-l-text-secondary);
    margin: 0 0 var(--psd-l-space-4);
}

body.psd-display-active .psd-d-product-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--psd-l-space-3);
}

body.psd-display-active .psd-d-product-price {
    font-family: var(--psd-l-font-body);
    font-size: 13px;
    color: var(--psd-l-text-secondary);
    line-height: 1;
}

body.psd-display-active .psd-d-product-price strong {
    font-family: var(--psd-l-font-display);
    font-size: 15px;
    font-weight: var(--psd-l-weight-medium);
    color: var(--psd-l-gold-deep);
}

body.psd-display-active .psd-d-product-cta {
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    color: var(--psd-l-ink);
    line-height: 1;
    transition: color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-d-product-card:hover .psd-d-product-cta {
    color: var(--psd-l-gold-deep);
}


/* ════════════════════════════════════════════════════════════════════════
   6. GRID NOTE — small line below the grid
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active .psd-d-grid-note {
    text-align: center;
    margin-top: var(--psd-l-space-9);
    font-family: var(--psd-l-font-body);
    font-size: 13px;
    color: var(--psd-l-text-secondary);
}

body.psd-display-active .psd-d-grid-note a {
    color: var(--psd-l-gold-deep);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-d-grid-note a:hover {
    opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE — Two breakpoints layered on mobile-first base
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet (≥ 640px) — 2-column grid, show nav links */
@media (min-width: 640px) {
    body.psd-display-active .psd-l-nav-links {
        display: inline-flex;
    }

    body.psd-display-active .psd-d-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--psd-l-space-6);
    }

    body.psd-display-active .psd-d-hero {
        min-height: 48vh;
    }
}

/* Desktop (≥ 1100px) — 4-column grid */
@media (min-width: 1100px) {
    body.psd-display-active .psd-d-product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--psd-l-space-7);
    }

    body.psd-display-active .psd-d-hero {
        min-height: 50vh;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   8. MOBILE OVERRIDES — match Signage Cycle 2 Refinement V pattern
   
   Section padding floor reduced on mobile (<640px) so 1-column stacked
   sections don't feel endlessly tall. Same approach as Signage landing.css
   section 13.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    body.psd-display-active {
        --psd-l-section-vpad: clamp(64px, 12vw, 96px);
    }

    body.psd-display-active .psd-d-hero {
        min-height: 45vh;
    }

    body.psd-display-active .psd-d-hero-headline {
        font-size: clamp(28px, 7vw, 44px);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body.psd-display-active .psd-d-product-card {
        transition: none;
    }
    body.psd-display-active .psd-d-product-card:hover {
        transform: none;
    }
    body.psd-display-active .psd-l-nav {
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   10. PHASE 4B-3 — PLATFORM MOBILE NAV (minimal dropdown drawer)

       Parallel to landing.css §14, scoped to body.psd-display-active.
       Both modes share the same hamburger pattern — same look, same
       motion, same drawer behavior — because the nav itself is shared
       platform identity (Rule 2). The duplication mirrors the existing
       Phase 4B-2 nav-style duplication; both blocks should be kept in
       lockstep until Gap 2 is closed by a future cycle.

       Design constraints (architect's Phase 4B-3 brief):
         - Minimal dropdown panel — NOT full overlay, NOT off-canvas
         - Preserve calmness and shell simplicity
         - No new tokens, no new motion primitives

       See landing.css §14 for full design rationale.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active .psd-l-nav-soon {
    font-size: 0.82em;
    font-weight: var(--psd-l-weight-regular);
    letter-spacing: 0;
    opacity: 0.7;
    margin-left: 1px;
}

body.psd-display-active .psd-l-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: inherit;
    border-radius: var(--psd-l-radius-sm);
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-l-nav-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.psd-display-active .psd-l-nav-toggle-bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--psd-l-dur-medium) var(--psd-l-ease-cinematic),
                opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-l-nav-toggle[aria-expanded="true"] .psd-l-nav-toggle-bar:nth-child(1) {
    transform: translateY(3.25px) rotate(45deg);
}

body.psd-display-active .psd-l-nav-toggle[aria-expanded="true"] .psd-l-nav-toggle-bar:nth-child(2) {
    transform: translateY(-3.25px) rotate(-45deg);
}

body.psd-display-active .psd-l-nav-drawer {
    position: fixed;
    top: var(--psd-l-nav-height);
    left: 0;
    right: 0;
    z-index: calc(var(--psd-l-z-nav) - 1);
    background: rgba(245, 244, 240, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--psd-l-border-light);
    color: var(--psd-l-text-primary);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--psd-l-dur-medium) var(--psd-l-ease-cinematic),
                opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                visibility 0s linear var(--psd-l-dur-medium);
}

body.psd-display-active .psd-l-nav-drawer[data-state="open"] {
    max-height: 360px;
    opacity: 1;
    visibility: visible;
    transition: max-height var(--psd-l-dur-medium) var(--psd-l-ease-cinematic),
                opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                visibility 0s linear 0s;
}

body.psd-display-active .psd-l-nav-drawer-links {
    display: flex;
    flex-direction: column;
    padding: var(--psd-l-space-5) var(--psd-l-section-gutter) var(--psd-l-space-4);
    gap: var(--psd-l-space-4);
}

body.psd-display-active .psd-l-nav-drawer-links a {
    color: var(--psd-l-text-primary);
    text-decoration: none;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-deck);
    font-weight: var(--psd-l-weight-regular);
    line-height: 1.2;
    opacity: 0.85;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-l-nav-drawer-links a:hover {
    opacity: 1;
}

body.psd-display-active .psd-l-nav-drawer-links a.is-active {
    opacity: 1;
    font-weight: var(--psd-l-weight-medium);
    box-shadow: inset 0 -2px 0 var(--psd-l-gold);
    padding-bottom: 2px;
    align-self: flex-start;
}

body.psd-display-active .psd-l-nav-drawer-links a.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

body.psd-display-active .psd-l-nav-drawer-cta {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 var(--psd-l-section-gutter) var(--psd-l-space-5);
    padding: 10px 18px;
    border-radius: var(--psd-l-radius-pill);
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active .psd-l-nav-drawer-cta:hover {
    background: var(--psd-l-gold-deep);
}

/* Display shows the desktop nav links cluster from ≥640px (tablet up),
   so the hamburger is needed only below 640px (mobile). This differs
   from Signage (where desktop links appear at ≥1100px so the hamburger
   is needed below 1100px). The asymmetry mirrors each mode's existing
   desktop-nav threshold — both modes show the hamburger exactly where
   their desktop links cluster is hidden. */
@media (max-width: 639px) {
    body.psd-display-active .psd-l-nav-toggle {
        display: inline-flex;
    }

    body.psd-display-active .psd-l-nav-cta {
        display: none;
    }
}

@media (min-width: 640px) {
    body.psd-display-active .psd-l-nav-toggle,
    body.psd-display-active .psd-l-nav-drawer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.psd-display-active .psd-l-nav-drawer,
    body.psd-display-active .psd-l-nav-toggle-bar {
        transition: none;
    }
}