/**
 * PrintifySign — SaaS Shell (B1 · S2)
 *
 * File:    assets/inspiration/saas-shell.css
 * Phase:   B1 — Premium Mobile-First SaaS Chrome
 * Status:  NEW file. Additive REUSABLE shell layer. No page-specific redesign.
 *
 * ─── PURPOSE ─────────────────────────────────────────────────────────────
 * The shared, opt-in component shell that S3 (shell pages) and S4 (frozen
 * pages, additive) compose from. This file defines reusable CHROME only:
 * app-shell scaffold, glass/floating surfaces, sticky bottom action rail,
 * bottom-sheet, cards, chips, buttons, trust components, skeleton/spinner
 * loading states, and mobile-first spacing/type rhythm.
 *
 * It does NOT restyle any existing page. Every rule is namespaced under
 * .psd-s-* classes that no current markup uses. Nothing here activates
 * until S3/S4 opt individual surfaces in by adding these classes. Loading
 * this file alone changes nothing visible.
 *
 * ─── DEPENDENCIES ────────────────────────────────────────────────────────
 * Consumes tokens from:
 *   landing-tokens.css  (--psd-l-*)   — base system, frozen
 *   saas-tokens.css     (--psd-s-*)   — S1 additive layer
 * Every token reference includes a literal fallback, so the shell degrades
 * gracefully if either token file is absent during staged integration.
 *
 * ─── LOAD ORDER ──────────────────────────────────────────────────────────
 * Enqueue AFTER landing-tokens.css and saas-tokens.css:
 *   wp_enqueue_style( 'psd-saas-shell',
 *       PSD_PLUGIN_URL . 'assets/inspiration/saas-shell.css',
 *       array( 'psd-inspiration-landing-tokens', 'psd-saas-tokens' ),
 *       PSD_VERSION );
 *
 * ─── SCOPING CONTRACT ────────────────────────────────────────────────────
 * All selectors begin with .psd-s- (class) or [data-psd-s-*] (attribute).
 * No bare element selectors, no body/html targeting, no !important except
 * where noted for reduced-motion overrides. Existing --psd-l-* / --psd-d-* /
 * --psd-pf-* classes are never referenced or overridden.
 *
 * ─── ROLLBACK ────────────────────────────────────────────────────────────
 * Delete this file + its enqueue. Because nothing uses .psd-s- classes until
 * S3/S4, removing it before those phases is a pure no-op.
 *
 * ─── BREAKPOINTS (match existing system) ─────────────────────────────────
 *   mobile-first base   → up to 639px
 *   >= 640px            → small tablet
 *   >= 1025px           → desktop
 */

/* ═════════════════════════════════════════════════════════════════════════
   0 · SHELL PRIMITIVES
   The app-like page scaffold. Opt in with .psd-s-shell on a wrapper.
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-shell{
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    min-height:100vh;                 /* fallback for no-dvh browsers */
    padding-top:var(--psd-s-safe-top, 0px);
    padding-left:var(--psd-s-safe-left, 0px);
    padding-right:var(--psd-s-safe-right, 0px);
    background:var(--psd-l-paper, #faf9f7);
    color:var(--psd-l-text-primary, #0a0a0a);
    font-family:var(--psd-l-font-body, system-ui, -apple-system, sans-serif);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.psd-s-shell *,
.psd-s-shell *::before,
.psd-s-shell *::after{
    box-sizing:border-box;
}

/* Main scroll region. When a sticky rail is present, add .psd-s-shell-main--railed
   so content clears the fixed rail. */
.psd-s-shell-main{
    flex:1 0 auto;
    width:100%;
    max-width:var(--psd-s-shell-max-w, 1440px);
    margin:0 auto;
    padding-left:var(--psd-s-shell-gutter, clamp(20px, 4vw, 48px));
    padding-right:var(--psd-s-shell-gutter, clamp(20px, 4vw, 48px));
}

.psd-s-shell-main--railed{
    padding-bottom:var(--psd-s-rail-reserve, 96px);
}

/* Section rhythm — mobile-first vertical spacing that scales up. */
.psd-s-section{
    padding-top:clamp(40px, 9vw, 96px);
    padding-bottom:clamp(40px, 9vw, 96px);
}
.psd-s-section--tight{
    padding-top:clamp(24px, 6vw, 56px);
    padding-bottom:clamp(24px, 6vw, 56px);
}
.psd-s-stack > * + *{ margin-top:var(--psd-l-space-4, 16px); }
.psd-s-stack--lg > * + *{ margin-top:var(--psd-l-space-6, 32px); }
.psd-s-stack--sm > * + *{ margin-top:var(--psd-l-space-2, 8px); }


/* ═════════════════════════════════════════════════════════════════════════
   1 · TYPOGRAPHY RHYTHM (reusable helpers, not page overrides)
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-eyebrow{
    font-family:var(--psd-l-font-body, system-ui, sans-serif);
    font-size:var(--psd-l-type-eyebrow, 11.5px);
    font-weight:var(--psd-l-weight-medium, 500);
    letter-spacing:var(--psd-l-tracking-wide, 3px);
    text-transform:uppercase;
    color:var(--psd-l-text-muted, #8a8579);
    margin:0;
}
.psd-s-title{
    font-family:var(--psd-l-font-display, system-ui, sans-serif);
    font-size:var(--psd-l-type-section, clamp(28px, 3.2vw, 44px));
    font-weight:var(--psd-l-weight-medium, 500);
    line-height:var(--psd-l-leading-snug, 1.2);
    letter-spacing:var(--psd-l-tracking-snug, -0.5px);
    color:var(--psd-l-text-primary, #0a0a0a);
    margin:0;
}
.psd-s-title em{
    font-family:var(--psd-l-font-editorial, Georgia, serif);
    font-style:italic;
    font-weight:var(--psd-l-weight-regular, 400);
}
.psd-s-deck{
    font-size:var(--psd-l-type-deck-sm, 16px);
    line-height:var(--psd-l-leading-relaxed, 1.6);
    color:var(--psd-l-text-secondary, #5c5950);
    max-width:var(--psd-l-text-max-w, 640px);
    margin:0;
}
.psd-s-meta{
    font-size:var(--psd-l-type-meta, 13px);
    line-height:var(--psd-l-leading-normal, 1.5);
    color:var(--psd-l-text-muted, #8a8579);
    margin:0;
}


/* ═════════════════════════════════════════════════════════════════════════
   2 · SURFACES — glass, floating, cards
   ═════════════════════════════════════════════════════════════════════════ */

/* Glass surface (light context). Progressive-enhanced: solid fallback first,
   blur applied only where backdrop-filter is supported. */
.psd-s-glass{
    background:var(--psd-l-paper, #faf9f7);
    border:1px solid var(--psd-s-glass-border-light, rgba(10,10,10,0.08));
    box-shadow:var(--psd-s-elev-2, 0 2px 6px rgba(10,10,10,0.07));
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .psd-s-glass{
        background:var(--psd-s-glass-light, rgba(250,249,247,0.72));
        -webkit-backdrop-filter:saturate(1.4) blur(var(--psd-s-blur-md, 16px));
        backdrop-filter:saturate(1.4) blur(var(--psd-s-blur-md, 16px));
    }
}
.psd-s-glass--dark{
    background:var(--psd-l-ink, #0a0a0a);
    border-color:var(--psd-s-glass-border-dark, rgba(255,255,255,0.12));
    color:var(--psd-l-text-inverse, #f5f4f0);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .psd-s-glass--dark{
        background:var(--psd-s-glass-dark, rgba(10,10,10,0.55));
    }
}

/* Floating surface — detached control cluster (e.g. zoom, undo, tools). */
.psd-s-floating{
    position:fixed;
    z-index:var(--psd-s-z-float, 55);
    border-radius:var(--psd-l-radius-pill, 999px);
    box-shadow:var(--psd-s-elev-float, 0 4px 12px rgba(10,10,10,0.10));
}
.psd-s-floating--br{
    right:var(--psd-s-float-offset, 16px);
    bottom:var(--psd-s-float-offset-bottom, 16px);
}
.psd-s-floating--bl{
    left:var(--psd-s-float-offset, 16px);
    bottom:var(--psd-s-float-offset-bottom, 16px);
}
.psd-s-floating--tr{
    right:var(--psd-s-float-offset, 16px);
    top:calc(var(--psd-s-float-offset, 16px) + var(--psd-s-safe-top, 0px));
}

/* Card shell — the reusable content card. */
.psd-s-card{
    background:#fff;
    border:1px solid var(--psd-l-border-light, rgba(10,10,10,0.06));
    border-radius:var(--psd-l-radius-lg, 18px);
    box-shadow:var(--psd-s-elev-1, 0 1px 2px rgba(10,10,10,0.05));
    overflow:hidden;
    transition:box-shadow var(--psd-l-dur-medium, 280ms) var(--psd-l-ease-cinematic, ease),
               transform var(--psd-l-dur-medium, 280ms) var(--psd-l-ease-cinematic, ease);
}
.psd-s-card--interactive{ cursor:pointer; }
@media (hover:hover){
    .psd-s-card--interactive:hover{
        box-shadow:var(--psd-s-elev-3, 0 6px 16px rgba(10,10,10,0.10));
        transform:translateY(-2px);
    }
}
.psd-s-card--interactive:active{
    transform:translateY(0) scale(0.995);
    transition-duration:var(--psd-s-dur-press, 90ms);
}
.psd-s-card-body{ padding:var(--psd-l-space-5, 24px); }
.psd-s-card-body--sm{ padding:var(--psd-l-space-4, 16px); }

/* Confidence card — trust-forward card variant for cart/checkout (S3). */
.psd-s-confidence{
    background:var(--psd-l-paper-cool, #f5f4f0);
    border:1px solid var(--psd-l-border-light-hover, rgba(10,10,10,0.12));
    border-radius:var(--psd-l-radius-lg, 18px);
    padding:var(--psd-l-space-5, 24px);
}


/* ═════════════════════════════════════════════════════════════════════════
   3 · BUTTONS (reusable shell — mobile thumb-friendly)
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-btn{
    -webkit-appearance:none;
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--psd-s-badge-gap, 6px);
    min-height:var(--psd-s-touch-comfort, 52px);
    padding:0 var(--psd-l-space-6, 32px);
    border:1px solid transparent;
    border-radius:var(--psd-l-radius-pill, 999px);
    font-family:var(--psd-l-font-body, system-ui, sans-serif);
    font-size:var(--psd-l-type-body, 14px);
    font-weight:var(--psd-l-weight-medium, 500);
    line-height:1;
    letter-spacing:var(--psd-l-tracking-normal, 0);
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:background var(--psd-s-dur-instant, 120ms) var(--psd-l-ease-standard, ease),
               box-shadow var(--psd-s-dur-instant, 120ms) var(--psd-l-ease-standard, ease),
               transform var(--psd-s-dur-press, 90ms) var(--psd-l-ease-standard, ease);
}
.psd-s-btn:active{ transform:scale(0.97); }
.psd-s-btn:focus-visible{
    outline:none;
    box-shadow:var(--psd-s-ring-focus, 0 0 0 3px rgba(77,212,255,0.45));
}

.psd-s-btn--primary{
    background:var(--psd-l-ink, #0a0a0a);
    color:var(--psd-l-text-inverse, #f5f4f0);
}
@media (hover:hover){
    .psd-s-btn--primary:hover{ background:var(--psd-l-ink-soft, #1a1a1a); }
}
.psd-s-btn--gold{
    background:var(--psd-l-gold, #d4a960);
    color:var(--psd-l-ink, #0a0a0a);
}
@media (hover:hover){
    .psd-s-btn--gold:hover{ background:var(--psd-l-gold-deep, #b88a3d); }
}
.psd-s-btn--ghost{
    background:transparent;
    border-color:var(--psd-l-border-light-firm, rgba(10,10,10,0.18));
    color:var(--psd-l-text-primary, #0a0a0a);
}
@media (hover:hover){
    .psd-s-btn--ghost:hover{ background:var(--psd-l-paper-cool, #f5f4f0); }
}
.psd-s-btn--block{ width:100%; }
.psd-s-btn--lg{ min-height:56px; font-size:var(--psd-l-type-deck-sm, 16px); }

/* Icon button — square touch target for floating controls. */
.psd-s-iconbtn{
    -webkit-appearance:none;
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--psd-s-touch-min, 44px);
    height:var(--psd-s-touch-min, 44px);
    padding:0;
    border:none;
    border-radius:50%;
    background:transparent;
    color:var(--psd-l-text-primary, #0a0a0a);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:background var(--psd-s-dur-instant, 120ms) var(--psd-l-ease-standard, ease),
               transform var(--psd-s-dur-press, 90ms) var(--psd-l-ease-standard, ease);
}
.psd-s-iconbtn:active{ transform:scale(0.92); }
@media (hover:hover){
    .psd-s-iconbtn:hover{ background:var(--psd-l-border-light, rgba(10,10,10,0.06)); }
}


/* ═════════════════════════════════════════════════════════════════════════
   4 · CHIPS (filter chips / swipe section — gallery chrome)
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-chiprow{
    display:flex;
    gap:var(--psd-s-chip-gap, 8px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding:var(--psd-l-space-2, 8px) var(--psd-s-swipe-pad-edge, 20px);
    margin-left:calc(-1 * var(--psd-s-shell-gutter, 20px));
    margin-right:calc(-1 * var(--psd-s-shell-gutter, 20px));
}
.psd-s-chiprow::-webkit-scrollbar{ display:none; }

.psd-s-chip{
    -webkit-appearance:none;
    appearance:none;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:var(--psd-s-badge-gap, 6px);
    height:var(--psd-s-chip-h, 44px);
    padding:0 var(--psd-s-chip-pad-x, 16px);
    border:1px solid var(--psd-s-chip-border, rgba(10,10,10,0.12));
    border-radius:var(--psd-s-chip-radius, 999px);
    background:var(--psd-s-chip-fill, #f5f4f0);
    color:var(--psd-s-chip-ink, #5c5950);
    font-family:var(--psd-l-font-body, system-ui, sans-serif);
    font-size:var(--psd-l-type-chip, 13.5px);
    font-weight:var(--psd-l-weight-medium, 500);
    white-space:nowrap;
    cursor:pointer;
    scroll-snap-align:start;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:background var(--psd-s-dur-instant, 120ms) var(--psd-l-ease-standard, ease),
               color var(--psd-s-dur-instant, 120ms) var(--psd-l-ease-standard, ease),
               border-color var(--psd-s-dur-instant, 120ms) var(--psd-l-ease-standard, ease);
}
.psd-s-chip[aria-pressed="true"],
.psd-s-chip.is-active{
    background:var(--psd-s-chip-fill-active, #0a0a0a);
    color:var(--psd-s-chip-ink-active, #f5f4f0);
    border-color:var(--psd-s-chip-fill-active, #0a0a0a);
}


/* ═════════════════════════════════════════════════════════════════════════
   5 · SWIPE / SCROLL-SNAP SECTIONS (horizontal card rails)
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-swipe{
    display:flex;
    gap:var(--psd-s-swipe-gap, 16px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--psd-s-swipe-pad-edge, 20px);
    padding:var(--psd-l-space-2, 8px) var(--psd-s-swipe-pad-edge, 20px);
    margin-left:calc(-1 * var(--psd-s-shell-gutter, 20px));
    margin-right:calc(-1 * var(--psd-s-shell-gutter, 20px));
}
.psd-s-swipe::-webkit-scrollbar{ display:none; }
.psd-s-swipe-item{
    flex:0 0 auto;
    width:calc(85% - var(--psd-s-swipe-peek, 12px));
    max-width:340px;
    scroll-snap-align:start;
}
@media (min-width:640px){
    .psd-s-swipe-item{ width:46%; }
}
@media (min-width:1025px){
    .psd-s-swipe-item{ width:31%; }
}


/* ═════════════════════════════════════════════════════════════════════════
   6 · STICKY BOTTOM ACTION RAIL
   Persistent thumb-zone action bar. Opt in with .psd-s-rail.
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-rail{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:var(--psd-s-z-rail, 60);
    display:flex;
    align-items:center;
    gap:var(--psd-s-rail-gap, 12px);
    padding:var(--psd-s-rail-pad-y, 12px) var(--psd-s-rail-pad-x, 16px);
    padding-bottom:calc(var(--psd-s-rail-pad-y, 12px) + var(--psd-s-safe-bottom, 0px));
    background:var(--psd-l-paper, #faf9f7);
    border-top:1px solid var(--psd-s-rail-border, rgba(10,10,10,0.06));
    box-shadow:var(--psd-s-rail-shadow, 0 -4px 16px rgba(10,10,10,0.08));
    transition:transform var(--psd-s-dur-rail, 240ms) var(--psd-s-ease-emphasis, ease),
               opacity var(--psd-s-dur-rail, 240ms) var(--psd-s-ease-emphasis, ease);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .psd-s-rail{
        background:var(--psd-s-rail-fill, rgba(250,249,247,0.88));
        -webkit-backdrop-filter:saturate(1.4) blur(var(--psd-s-blur-md, 16px));
        backdrop-filter:saturate(1.4) blur(var(--psd-s-blur-md, 16px));
    }
}
/* Hidden state — slide down out of view. */
.psd-s-rail[data-state="hidden"]{
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
}
.psd-s-rail-grow{ flex:1 1 auto; min-width:0; }
.psd-s-rail-price{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}
.psd-s-rail-price-label{
    font-size:var(--psd-l-type-eyebrow, 11.5px);
    color:var(--psd-l-text-muted, #8a8579);
}
.psd-s-rail-price-value{
    font-size:var(--psd-l-type-deck-sm, 16px);
    font-weight:var(--psd-l-weight-medium, 500);
    color:var(--psd-l-text-primary, #0a0a0a);
}

/* On desktop the rail can center within the shell width. */
@media (min-width:1025px){
    .psd-s-rail--contained{
        left:50%;
        right:auto;
        transform:translateX(-50%);
        width:min(var(--psd-s-shell-max-w, 1440px), calc(100% - 48px));
        border-radius:var(--psd-l-radius-lg, 18px);
        bottom:var(--psd-l-space-5, 24px);
        border:1px solid var(--psd-s-rail-border, rgba(10,10,10,0.06));
    }
    .psd-s-rail--contained[data-state="hidden"]{
        transform:translateX(-50%) translateY(160%);
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   7 · BOTTOM SHEET
   Mobile bottom-sheet. Markup contract:
     <div class="psd-s-sheet" data-state="closed" hidden>
       <div class="psd-s-sheet-scrim" data-psd-s-sheet-close></div>
       <div class="psd-s-sheet-panel" role="dialog" aria-modal="true">
         <button class="psd-s-sheet-handle" data-psd-s-sheet-close></button>
         <div class="psd-s-sheet-content"> … </div>
       </div>
     </div>
   Behavior driven by saas-shell.js (S2 helper).
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-sheet{
    position:fixed;
    inset:0;
    z-index:var(--psd-s-z-sheet-scrim, 70);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    pointer-events:none;
}
.psd-s-sheet[data-state="open"]{ pointer-events:auto; }

.psd-s-sheet-scrim{
    position:absolute;
    inset:0;
    background:var(--psd-s-scrim, rgba(10,10,10,0.42));
    opacity:0;
    transition:opacity var(--psd-s-dur-sheet, 360ms) var(--psd-s-ease-emphasis, ease);
    -webkit-tap-highlight-color:transparent;
}
.psd-s-sheet[data-state="open"] .psd-s-sheet-scrim{ opacity:1; }

.psd-s-sheet-panel{
    position:relative;
    z-index:var(--psd-s-z-sheet, 71);
    width:100%;
    max-width:640px;
    margin:0 auto;
    max-height:var(--psd-s-sheet-max-h, 88vh);
    min-height:var(--psd-s-sheet-min-h, 180px);
    background:var(--psd-s-sheet-fill, #faf9f7);
    border-radius:var(--psd-s-sheet-radius, 20px) var(--psd-s-sheet-radius, 20px) 0 0;
    box-shadow:var(--psd-s-sheet-shadow, 0 -8px 24px rgba(10,10,10,0.12));
    padding:var(--psd-s-sheet-pad, 24px);
    padding-bottom:calc(var(--psd-s-sheet-pad, 24px) + var(--psd-s-safe-bottom, 0px));
    transform:translateY(100%);
    transition:transform var(--psd-s-dur-sheet, 360ms) var(--psd-s-ease-spring, cubic-bezier(0.22,1,0.36,1));
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.psd-s-sheet[data-state="open"] .psd-s-sheet-panel{ transform:translateY(0); }

.psd-s-sheet-handle{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:var(--psd-s-sheet-handle-w, 36px);
    height:var(--psd-s-sheet-handle-h, 4px);
    margin:0 auto var(--psd-s-sheet-gap, 16px);
    padding:0;
    border:none;
    border-radius:999px;
    background:var(--psd-s-sheet-handle, rgba(10,10,10,0.18));
    cursor:pointer;
    flex:0 0 auto;
}
.psd-s-sheet-handle::before{
    /* enlarge touch target without changing visual size */
    content:"";
    position:absolute;
    top:0; left:50%;
    transform:translateX(-50%);
    width:120px;
    height:var(--psd-s-touch-min, 44px);
}
.psd-s-sheet-title{
    font-family:var(--psd-l-font-display, system-ui, sans-serif);
    font-size:var(--psd-l-type-deck, 17px);
    font-weight:var(--psd-l-weight-medium, 500);
    color:var(--psd-l-text-primary, #0a0a0a);
    margin:0 0 var(--psd-s-sheet-gap, 16px);
    flex:0 0 auto;
}
.psd-s-sheet-content{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}

/* Lock body scroll while a sheet is open (class toggled by JS helper). */
.psd-s-scroll-locked{ overflow:hidden !important; touch-action:none; }


/* ═════════════════════════════════════════════════════════════════════════
   8 · TRUST COMPONENTS
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--psd-s-badge-gap, 6px);
    padding:var(--psd-s-badge-pad-y, 6px) var(--psd-s-badge-pad-x, 12px);
    border-radius:var(--psd-s-badge-radius, 999px);
    background:var(--psd-s-trust-fill, #f5f4f0);
    border:1px solid var(--psd-s-trust-border, rgba(10,10,10,0.12));
    font-size:var(--psd-l-type-meta, 13px);
    font-weight:var(--psd-l-weight-medium, 500);
    color:var(--psd-s-trust-ink, #5c5950);
    white-space:nowrap;
}
.psd-s-badge::before{
    content:"";
    width:5px; height:5px;
    border-radius:50%;
    background:var(--psd-s-trust-dot, #d4a960);
    flex:0 0 auto;
}
.psd-s-badge--success{
    background:var(--psd-s-success-soft, rgba(46,158,107,0.12));
    border-color:transparent;
    color:var(--psd-s-success, #2e9e6b);
}
.psd-s-badge--success::before{ background:var(--psd-s-success, #2e9e6b); }
.psd-s-badge--info{
    background:var(--psd-s-info-soft, rgba(47,127,212,0.12));
    border-color:transparent;
    color:var(--psd-s-info, #2f7fd4);
}
.psd-s-badge--info::before{ background:var(--psd-s-info, #2f7fd4); }

/* Trust strip — horizontal row of assurances (landing/checkout). */
.psd-s-truststrip{
    display:flex;
    flex-wrap:wrap;
    gap:var(--psd-l-space-2, 8px) var(--psd-l-space-4, 16px);
    list-style:none;
    margin:0;
    padding:0;
}
.psd-s-truststrip li{
    display:flex;
    align-items:center;
    gap:var(--psd-s-badge-gap, 6px);
    font-size:var(--psd-l-type-meta, 13px);
    color:var(--psd-l-text-secondary, #5c5950);
}
.psd-s-truststrip li::before{
    content:"";
    width:5px; height:5px;
    border-radius:50%;
    background:var(--psd-s-trust-dot, #d4a960);
    flex:0 0 auto;
}


/* ═════════════════════════════════════════════════════════════════════════
   9 · LOADING STATES — skeleton + spinner
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-skeleton{
    position:relative;
    overflow:hidden;
    background:var(--psd-s-skeleton-base, rgba(10,10,10,0.06));
    border-radius:var(--psd-s-skeleton-radius, 12px);
}
.psd-s-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg,
        transparent 0,
        var(--psd-s-skeleton-sheen, rgba(10,10,10,0.11)) 50%,
        transparent 100%);
    animation:psd-s-shimmer var(--psd-s-skeleton-dur, 1400ms) infinite;
}
.psd-s-skeleton--text{ height:0.9em; margin:0.25em 0; border-radius:4px; }
.psd-s-skeleton--line-70{ width:70%; }
.psd-s-skeleton--line-40{ width:40%; }
.psd-s-skeleton--block{ width:100%; aspect-ratio:4 / 3; }

@keyframes psd-s-shimmer{
    100%{ transform:translateX(100%); }
}

.psd-s-spinner{
    display:inline-block;
    width:var(--psd-s-spinner-size, 22px);
    height:var(--psd-s-spinner-size, 22px);
    border:var(--psd-s-spinner-weight, 2.5px) solid var(--psd-s-spinner-track, rgba(10,10,10,0.10));
    border-top-color:var(--psd-s-spinner-head, #d4a960);
    border-radius:50%;
    animation:psd-s-spin var(--psd-s-spinner-dur, 720ms) linear infinite;
}
@keyframes psd-s-spin{
    100%{ transform:rotate(360deg); }
}


/* ═════════════════════════════════════════════════════════════════════════
   10 · ENTRANCE MOTION (opt-in, respects reduced-motion)
   ═════════════════════════════════════════════════════════════════════════ */

.psd-s-fade-up{
    opacity:0;
    transform:translateY(12px);
    transition:opacity var(--psd-l-dur-slow, 450ms) var(--psd-l-ease-cinematic, ease),
               transform var(--psd-l-dur-slow, 450ms) var(--psd-l-ease-cinematic, ease);
    will-change:opacity, transform;
}
.psd-s-fade-up.is-in{
    opacity:1;
    transform:translateY(0);
}


/* ═════════════════════════════════════════════════════════════════════════
   11 · ACCESSIBILITY — reduced motion
   Users who ask for less motion get none of the shell's decorative animation.
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
    .psd-s-card,
    .psd-s-btn,
    .psd-s-iconbtn,
    .psd-s-chip,
    .psd-s-rail,
    .psd-s-sheet-panel,
    .psd-s-sheet-scrim,
    .psd-s-fade-up{
        transition-duration:0.01ms !important;
    }
    .psd-s-skeleton::after,
    .psd-s-spinner{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
    }
    .psd-s-fade-up{ opacity:1; transform:none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   P1-B — IMMERSIVE DARK SHELL (scoped repaint)
   ---------------------------------------------------------------------------
   Selection-only. Repoints shell CHROME surfaces to the existing dark token
   family, but ONLY inside the .psd-immersive scope. No token edits, no
   geometry, no motion, no behavior. Base (unscoped) rules are untouched, so
   shared surfaces (.psd-s-card / .psd-s-chip / landing / gallery) and
   desktop/tablet remain exactly as before.

   Bible refs: Ch.3 (Color), Ch.4 (Glass), Ch.7 (Product Stage not darkened).
   Q1 ruling: cyan focus ring preserved for accessibility; gold stays CTA-only.
   Rollback: delete this entire block. No other rule references it.
   ═════════════════════════════════════════════════════════════════════════ */

/* Sheet panel — dark glass instead of light paper fill. */
.psd-immersive .psd-s-sheet-panel{
    background:var(--psd-s-glass-dark-firm, rgba(10,10,10,0.72));
    border:1px solid var(--psd-s-glass-border-dark, rgba(255,255,255,0.12));
    color:var(--psd-l-text-inverse, #f5f4f0);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .psd-immersive .psd-s-sheet-panel{
        background:var(--psd-s-glass-dark, rgba(10,10,10,0.55));
        -webkit-backdrop-filter:saturate(1.2) blur(var(--psd-s-blur-lg, 24px));
        backdrop-filter:saturate(1.2) blur(var(--psd-s-blur-lg, 24px));
    }
}

/* Sheet handle — inverse ink on dark. */
.psd-immersive .psd-s-sheet-handle{
    background:var(--psd-l-text-inverse-muted, rgba(163,158,147,0.55));
}

/* Sheet title + content ink — legible on dark chrome. */
.psd-immersive .psd-s-sheet-title{
    color:var(--psd-l-text-inverse, #f5f4f0);
}
.psd-immersive .psd-s-sheet-content{
    color:var(--psd-l-text-inverse-muted, #a39e93);
}

/* Rail — dark firm glass instead of light paper fill. */
.psd-immersive .psd-s-rail{
    background:var(--psd-l-ink, #0a0a0a);
    border-top:1px solid var(--psd-s-glass-border-dark, rgba(255,255,255,0.12));
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .psd-immersive .psd-s-rail{
        background:var(--psd-s-rail-fill-dark, rgba(10,10,10,0.72));
        -webkit-backdrop-filter:saturate(1.4) blur(var(--psd-s-blur-md, 16px));
        backdrop-filter:saturate(1.4) blur(var(--psd-s-blur-md, 16px));
    }
}

/* Rail text — inverse ink on dark. */
.psd-immersive .psd-s-rail-price-label{
    color:var(--psd-l-text-inverse-muted, #a39e93);
}
.psd-immersive .psd-s-rail-price-value{
    color:var(--psd-l-text-inverse, #f5f4f0);
}