/*
 * THE PACK VAULT — PRIVATE ARCHIVE
 *
 * This is the canonical visual-system entrypoint. A compact shared legacy
 * bundle and one generated route bundle keep specialist mechanics intact;
 * the authored layers below own hierarchy and responsive behaviour. New
 * product styling belongs here, not in another "finish" sheet.
 *
 * Shell contract:
 *   data-visual-mode="showroom|catalogue|ledger"
 *   data-route="home|vending|packs|pack-detail|marketplace|item|vault|..."
 */

@import url("/private-archive-core.css?v=archive-20260823b") layer(legacy);

@layer legacy, pv.tokens, pv.base, pv.components, pv.modes, pv.routes, pv.responsive, pv.authored, pv.a11y;

@layer pv.tokens {
  @font-face {
    font-family: "PV Archive";
    src: url("/assets/fonts/SpaceGrotesk-VariableFont_wght.1ooefgiz2d1n8.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 300 700;
  }

  :root {
    color-scheme: dark;

    --bg: #090a08;
    --panel: #10120f;
    --panel2: #161914;
    --line: #2b2e27;
    --line2: #45483e;
    --text: #f3f0e7;
    --muted: #92958c;
    --gold: #d4b75f;
    --gold2: #e2ca7b;
    --green: #67c99a;
    --red: #e37c82;

    --pv-canvas: #090a08;
    --pv-surface-1: #10120f;
    --pv-surface-2: #161914;
    --pv-surface-3: #1c201a;
    --pv-surface-glass: rgba(16, 18, 15, .92);
    --pv-text-strong: #f3f0e7;
    --pv-text: #c9c6bc;
    --pv-text-muted: #92958c;
    --pv-text-dim: #6f736a;
    --pv-line: #2b2e27;
    --pv-line-strong: #45483e;
    --pv-brass: #d4b75f;
    --pv-brass-hover: #e2ca7b;
    --pv-brass-ink: #17160f;
    --pv-success: #67c99a;
    --pv-danger: #e37c82;
    --pv-info: #7ba9d9;

    --pv-space-1: 4px;
    --pv-space-2: 8px;
    --pv-space-3: 12px;
    --pv-space-4: 16px;
    --pv-space-5: 24px;
    --pv-space-6: 32px;
    --pv-space-7: 48px;
    --pv-space-8: 64px;
    --pv-space-9: 96px;

    --pv-radius-control: 10px;
    --pv-radius-card: 12px;
    --pv-radius-media: 18px;
    --pv-shadow-1: 0 16px 36px rgba(0, 0, 0, .22);
    --pv-shadow-2: 0 30px 80px rgba(0, 0, 0, .36);
    --pv-ring: 0 0 0 3px rgba(212, 183, 95, .2);
    --pv-slab-aspect: .605;

    --pv-font: "PV Archive", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pv-display: "PV Archive", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pv-ui: "PV Archive", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --top: 72px;
    --nav-radius: 8px;
  }
}

/* Live Legendary pull receipt. This is deliberately one compact, queued
   announcement below the fixed navigation—not a permanent promo strip. */
@layer pv.components {
  .legendary-pull-stack {
    position: fixed;
    z-index: 92;
    top: calc(var(--top, 72px) + max(10px, env(safe-area-inset-top)));
    left: 50%;
    width: min(680px, calc(100vw - 32px));
    pointer-events: none;
    transform: translateX(-50%);
  }

  .legendary-pull-banner {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    overflow: hidden;
    border: 1px solid rgba(226, 202, 123, .46);
    border-radius: 14px;
    background:
      linear-gradient(100deg, rgba(212, 183, 95, .12), transparent 38%),
      rgba(13, 14, 12, .97);
    padding: 10px 10px 10px 14px;
    color: var(--pv-text, #f3f0e7);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .035);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-10px) scale(.985);
    transition: opacity 180ms ease, transform 230ms cubic-bezier(.22, .72, .24, 1);
  }

  .legendary-pull-banner.is-visible { opacity: 1; transform: none; }
  .legendary-pull-banner.is-leaving { opacity: 0; transform: translateY(-8px) scale(.99); }

  .legendary-pull-mark {
    display: grid;
    place-items: center;
    width: 38px;
    aspect-ratio: 1;
    border: 1px solid rgba(226, 202, 123, .44);
    border-radius: 50%;
    background: rgba(212, 183, 95, .08);
    color: var(--gold2, #e2ca7b);
    font-family: var(--pv-ui, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
  }

  .legendary-pull-copy { min-width: 0; }

  .legendary-pull-copy small {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    color: var(--gold2, #e2ca7b);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .legendary-pull-copy small i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #67c99a;
    box-shadow: 0 0 10px rgba(103, 201, 154, .72);
  }

  .legendary-pull-copy p {
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .legendary-pull-copy p a {
    color: var(--gold2, #e2ca7b);
    font-weight: 700;
    text-decoration: none;
  }

  .legendary-pull-copy p a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .legendary-pull-copy p strong { color: #fffdf5; font-weight: 650; }

  .legendary-pull-copy > span {
    display: block;
    margin-top: 2px;
    color: var(--pv-text-muted, #92958c);
    font-size: 11px;
    line-height: 1.25;
  }

  .legendary-pull-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #aaa99f;
    font: 400 22px/1 var(--pv-ui, sans-serif);
    cursor: pointer;
  }

  .legendary-pull-close:hover { background: rgba(255, 255, 255, .055); color: #fff; }
  .legendary-pull-close:focus-visible,
  .legendary-pull-copy p a:focus-visible { outline: 2px solid var(--gold2, #e2ca7b); outline-offset: 2px; }

  @media (max-width: 600px) {
    .legendary-pull-stack {
      top: calc(var(--top, 64px) + 8px);
      width: calc(100vw - 16px);
    }

    .legendary-pull-banner {
      grid-template-columns: 32px minmax(0, 1fr) 44px;
      gap: 9px;
      min-height: 70px;
      border-radius: 12px;
      padding-left: 10px;
    }

    .legendary-pull-mark { width: 32px; font-size: 9px; }
    .legendary-pull-copy p { font-size: 12.5px; white-space: normal; }
    .legendary-pull-copy > span { font-size: 10px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .legendary-pull-banner { transition: none; transform: none; }
  }
}

/* A$100 value clarity: guide value and sell-back are intentionally separate
   measures. Keep this a quiet ledger rather than another bordered card. */
@layer pv.authored {
  .pack-value-clarity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--pv-space-4) 0;
    padding-block: var(--pv-space-3);
    border-block: 1px solid color-mix(in srgb, var(--pv-line) 84%, transparent);
  }

  .pack-value-clarity > div {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding-inline: var(--pv-space-4);
  }

  .pack-value-clarity > div:first-child { padding-left: 0; }
  .pack-value-clarity > div:nth-child(2) {
    padding-right: 0;
    border-left: 1px solid color-mix(in srgb, var(--pv-line) 84%, transparent);
  }

  .pack-value-clarity span,
  .reveal-value-ledger dt,
  .machine-outcome-values dt,
  .rip-value-ledger dt {
    color: var(--pv-text-muted);
    font-size: 11px;
    font-weight: 620;
    line-height: 1.35;
    letter-spacing: .025em;
  }

  .pack-value-clarity strong {
    color: var(--pv-text-strong);
    font-size: clamp(24px, 3vw, 34px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .pack-value-clarity > div:first-child strong { color: var(--pv-brass-hover); }
  .pack-value-clarity small {
    color: var(--pv-text-dim);
    font-size: 10px;
    line-height: 1.4;
  }

  .pack-value-clarity > p {
    grid-column: 1 / -1;
    margin: var(--pv-space-3) 0 0;
    padding-top: var(--pv-space-3);
    border-top: 1px solid color-mix(in srgb, var(--pv-line) 66%, transparent);
    color: var(--pv-text-muted);
    font-size: 11px;
    line-height: 1.55;
  }

  .pack-value-clarity > p b {
    color: var(--pv-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .pack-value-clarity--compact {
    margin-block: 12px;
    padding-block: 10px;
  }

  .pack-value-clarity--compact strong { font-size: 25px; }

  .checkout-fairness-lock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-space-4);
    margin: 2px 0 var(--pv-space-3);
    padding: 11px 0;
    border-block: 1px solid color-mix(in srgb, var(--pv-success) 25%, var(--pv-line));
  }

  .checkout-fairness-lock > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .checkout-fairness-lock > div > span {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    place-items: center;
    background: color-mix(in srgb, var(--pv-success) 14%, transparent);
    color: var(--pv-success);
    font-size: 12px;
    font-weight: 800;
  }

  .checkout-fairness-lock p {
    display: grid;
    gap: 2px;
    margin: 0;
  }

  .checkout-fairness-lock strong {
    color: var(--pv-text-strong);
    font-size: 12px;
    line-height: 1.3;
  }

  .checkout-fairness-lock small {
    color: var(--pv-text-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  .checkout-fairness-lock code {
    flex: 0 0 auto;
    color: var(--pv-success);
    font: 600 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .015em;
  }

  .fairness-verification {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: var(--pv-space-3) 0;
    padding: 10px 0;
    border-block: 1px solid color-mix(in srgb, var(--pv-line) 80%, transparent);
    text-align: left;
  }

  .fairness-verification__mark {
    display: grid;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    place-items: center;
    background: color-mix(in srgb, var(--pv-text-muted) 12%, transparent);
    color: var(--pv-text-muted);
    font-weight: 800;
  }

  .fairness-verification.is-verified .fairness-verification__mark {
    background: color-mix(in srgb, var(--pv-success) 14%, transparent);
    color: var(--pv-success);
  }

  .fairness-verification.is-failed .fairness-verification__mark {
    background: color-mix(in srgb, var(--pv-danger) 14%, transparent);
    color: var(--pv-danger);
  }

  .fairness-verification p {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
  }

  .fairness-verification strong { color: var(--pv-text-strong); font-size: 12px; }
  .fairness-verification small { color: var(--pv-text-muted); font-size: 10px; line-height: 1.4; }
  .fairness-verification > a {
    color: var(--pv-brass-hover);
    font-size: 10px;
    font-weight: 650;
    text-decoration: none;
  }

  .fairness-verification > details { grid-column: 2 / -1; }
  .fairness-verification > details summary {
    color: var(--pv-text-muted);
    cursor: pointer;
    font-size: 10px;
  }

  .fairness-verification ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  .fairness-verification li {
    display: flex;
    gap: 5px;
    color: var(--pv-text-muted);
    font-size: 9px;
    line-height: 1.3;
  }

  .fairness-verification li.is-pass span { color: var(--pv-success); }
  .fairness-verification li.is-fail span { color: var(--pv-danger); }

  .machine-outcome-deck .fairness-verification {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    margin: 5px 0 7px;
    padding: 6px 0;
  }

  .machine-outcome-deck .fairness-verification__mark { width: 22px; height: 22px; font-size: 10px; }
  .machine-outcome-deck .fairness-verification strong { font-size: 9px; }
  .machine-outcome-deck .fairness-verification small { font-size: 8px; }
  .machine-outcome-deck .fairness-verification > a,
  .machine-outcome-deck .fairness-verification > details { display: none; }

  .reveal-value-ledger,
  .machine-outcome-values,
  .rip-value-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: var(--pv-space-3) 0;
    padding: 0;
  }

  .reveal-value-ledger > div,
  .machine-outcome-values > div,
  .rip-value-ledger > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding-right: var(--pv-space-3);
  }

  .reveal-value-ledger > div + div,
  .machine-outcome-values > div + div,
  .rip-value-ledger > div + div {
    padding-right: 0;
    padding-left: var(--pv-space-3);
    border-left: 1px solid color-mix(in srgb, var(--pv-line) 78%, transparent);
  }

  .reveal-value-ledger dd,
  .machine-outcome-values dd,
  .rip-value-ledger dd {
    margin: 0;
    color: var(--pv-text-strong);
    font-size: 16px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
  }

  :where(.reveal-value-ledger, .machine-outcome-values, .rip-value-ledger) > .is-hit dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
  }

  .pull-value-hit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pv-success);
    font-size: 9px;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .pull-value-hit::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px color-mix(in srgb, var(--pv-success) 58%, transparent);
    content: "";
  }

  :where(.reveal-value-ledger, .machine-outcome-values, .rip-value-ledger) > .is-hit dd {
    color: var(--pv-success);
  }

  .pull-value-delta {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: color-mix(in srgb, var(--pv-success) 78%, var(--pv-text-muted));
    font-size: 10px;
    font-weight: 620;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .machine-outcome-values .pull-value-hit { font-size: 7px; }
  .machine-outcome-values .pull-value-delta { font-size: 8px; }

  .pull-value-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 8px;
    max-width: 100%;
    margin: 5px auto 0;
    text-align: center;
  }

  .pull-value-callout .pull-value-delta { display: inline; }

  .machine-outcome-values { margin-block: 9px 4px; }
  .machine-outcome-values dt { color: rgba(235, 230, 212, .55); font-size: 9px; }
  .machine-outcome-values dd { color: #f2ead2; font-size: 13px; }
  .machine-outcome-exit { white-space: normal; }

  .card-details-disclosure {
    width: 100%;
    min-width: 0;
    margin: 9px 0 4px;
    border-block: 1px solid color-mix(in srgb, var(--pv-line) 74%, transparent);
  }

  .card-details-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--pv-text);
    cursor: pointer;
    list-style: none;
  }

  .card-details-disclosure > summary::-webkit-details-marker { display: none; }
  .card-details-disclosure > summary > span {
    font-size: 11px;
    font-weight: 680;
    letter-spacing: .02em;
  }
  .card-details-disclosure > summary > small {
    color: var(--pv-text-muted);
    font-size: 9px;
    white-space: nowrap;
  }
  .card-details-disclosure > summary::after {
    color: var(--pv-brass-hover);
    content: "+";
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
  }
  .card-details-disclosure[open] > summary::after { content: "−"; }

  .card-details-disclosure > dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    margin: 0;
    border-top: 1px solid color-mix(in srgb, var(--pv-line) 58%, transparent);
    padding: 3px 0 9px;
  }
  .card-details-disclosure > dl > div {
    min-width: 0;
    padding: 8px 10px 5px 0;
  }
  .card-details-disclosure dt {
    color: var(--pv-text-muted);
    font-size: 9px;
    letter-spacing: .055em;
    text-transform: uppercase;
  }
  .card-details-disclosure dd {
    margin: 3px 0 0;
    color: var(--pv-text);
    font-size: 11px;
    font-weight: 620;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .card-details-disclosure--machine { margin-block: 3px 0; }
  .card-details-disclosure--machine > summary > span { font-size: 9px; }
  .card-details-disclosure--machine > summary > small { font-size: 8px; }
  .card-details-disclosure--machine > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-details-disclosure--machine > dl > div { padding-block: 6px 3px; }
  .card-details-disclosure--machine dt { font-size: 8px; }
  .card-details-disclosure--machine dd { font-size: 10px; }

  .rip-value-ledger {
    max-width: 520px;
    margin-inline: auto;
  }

  .rip-value-ledger dt { color: rgba(235, 230, 212, .58); }
  .rip-value-ledger dd { color: #f3f0e7; }
}

@layer pv.authored {
  @media (max-width: 520px) {
    .pack-value-clarity {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .pack-value-clarity > div { padding: 0 0 10px; }
    .pack-value-clarity > div:nth-child(2) {
      padding: 10px 0 0;
      border-top: 1px solid color-mix(in srgb, var(--pv-line) 66%, transparent);
      border-left: 0;
    }

    .pack-value-clarity > p { margin-top: 10px; }
    .checkout-fairness-lock {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
    }
    .fairness-verification { grid-template-columns: 28px minmax(0, 1fr); }
    .fairness-verification > a,
    .fairness-verification > details { grid-column: 2; }
    .fairness-verification ul { grid-template-columns: 1fr; }
    .reveal-value-ledger,
    .rip-value-ledger { grid-template-columns: 1fr; }
    .reveal-value-ledger > div,
    .rip-value-ledger > div { padding: 0 0 8px; }
    .reveal-value-ledger > div + div,
    .rip-value-ledger > div + div {
      padding: 8px 0 0;
      border-top: 1px solid color-mix(in srgb, var(--pv-line) 66%, transparent);
      border-left: 0;
    }
  }
}

/* Multi-pack checkout -----------------------------------------------------
   A single tactile stepper keeps quantity selection compact and intentional.
   It preserves the full 1–10 range without turning the review into a grid of
   competing preset buttons. */
@layer pv.authored {
  .checkout-review--simple .checkout-quantity {
    display: grid;
    gap: 9px;
    min-width: 0;
    margin: 16px 0 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .085);
  }

  .checkout-review--simple .checkout-quantity legend {
    float: left;
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
    color: #eeebe2;
    font-size: 13px;
    font-weight: 660;
    letter-spacing: -.01em;
  }

  .checkout-review--simple .checkout-quantity > .checkout-quantity-stepper {
    display: grid;
    grid-template-columns: 48px minmax(104px, 1fr) 48px;
    gap: 0;
    width: min(100%, 236px);
    min-height: 48px;
    overflow: hidden;
    border: 1px solid rgba(222, 195, 109, .28);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(24, 25, 21, .98), rgba(11, 12, 10, .98));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 10px 24px rgba(0, 0, 0, .18);
  }

  .checkout-review--simple .checkout-quantity-direct {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8e8f88;
    font-size: 10px;
    line-height: 1.2;
  }

  .checkout-review--simple .checkout-quantity-direct label {
    color: #a7a79e;
    letter-spacing: .02em;
  }

  .checkout-review--simple .checkout-quantity-direct input {
    width: 74px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid rgba(222, 195, 109, .3);
    border-radius: 8px;
    background: rgba(7, 8, 7, .62);
    color: #f3dda0;
    font: 650 14px/1 inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .checkout-review--simple .checkout-quantity-direct input:focus-visible {
    outline: 2px solid #efd373;
    outline-offset: 2px;
    border-color: #efd373;
  }

  .checkout-review--simple.is-processing .checkout-quantity-direct input { opacity: .55; }

  .checkout-review--simple .checkout-quantity-stepper > button {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .018);
    padding: 0;
    color: #d9c57d;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }

  .checkout-review--simple .checkout-quantity-stepper > button:first-child {
    border-right: 1px solid rgba(255, 255, 255, .075);
  }

  .checkout-review--simple .checkout-quantity-stepper > button:last-child {
    border-left: 1px solid rgba(255, 255, 255, .075);
  }

  .checkout-review--simple .checkout-quantity-stepper > button span {
    color: inherit;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
  }

  .checkout-review--simple .checkout-quantity-stepper > output {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: #f0ead7;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .checkout-review--simple .checkout-quantity-stepper > output strong {
    color: #f3dda0;
    font-size: 22px;
    font-weight: 710;
    letter-spacing: -.02em;
    line-height: 1;
  }

  .checkout-review--simple .checkout-quantity-stepper > output span {
    color: #8e8f88;
    font-size: 9px;
    font-weight: 690;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
  }

  .checkout-review--simple .checkout-quantity-stepper > button:hover:not(:disabled) {
    background: rgba(212, 183, 95, .09);
    color: #f5dfa0;
  }

  .checkout-review--simple .checkout-quantity-stepper > button:active:not(:disabled) {
    background: rgba(212, 183, 95, .15);
  }

  .checkout-review--simple .checkout-quantity-stepper > button:disabled {
    color: #555750;
    cursor: not-allowed;
    opacity: .68;
  }

  .checkout-review--simple .checkout-quantity-stepper > button:focus-visible {
    outline: 2px solid #efd373;
    outline-offset: -3px;
  }

  .checkout-review--simple .checkout-quantity > p,
  .checkout-review--simple .checkout-quantity > small {
    margin: 0;
    line-height: 1.4;
  }

  .checkout-review--simple .checkout-quantity > p {
    color: #ded7c3;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .checkout-review--simple .checkout-quantity > small {
    color: #7f827b;
    font-size: 9px;
  }

  .checkout-review--simple .checkout-reveal-mode {
    display: grid;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .085);
  }

  .checkout-review--simple .checkout-reveal-mode[hidden] { display: none; }

  .checkout-review--simple .checkout-reveal-mode legend {
    float: left;
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
    color: #eeebe2;
    font-size: 13px;
    font-weight: 660;
    letter-spacing: -.01em;
  }

  .checkout-review--simple .checkout-reveal-mode > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .checkout-review--simple .checkout-reveal-mode label {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 58px;
    cursor: pointer;
  }

  .checkout-review--simple .checkout-reveal-mode input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .checkout-review--simple .checkout-reveal-mode label > span {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .095);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
    color: #9fa19b;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  }

  .checkout-review--simple .checkout-reveal-mode strong {
    color: inherit;
    font-size: 12px;
    font-weight: 680;
    line-height: 1.2;
  }

  .checkout-review--simple .checkout-reveal-mode small {
    overflow-wrap: anywhere;
    color: #777a74;
    font-size: 9px;
    line-height: 1.3;
  }

  .checkout-review--simple .checkout-reveal-mode > p {
    margin: 0;
    color: #7f827b;
    font-size: 9px;
    line-height: 1.4;
  }

  .checkout-review--simple .checkout-reveal-mode label:hover > span {
    border-color: rgba(226, 202, 123, .34);
    background: rgba(212, 183, 95, .07);
    color: #e8ddba;
  }

  .checkout-review--simple .checkout-reveal-mode input:checked + span {
    border-color: #d4b75f;
    background: linear-gradient(145deg, rgba(212, 183, 95, .17), rgba(212, 183, 95, .06));
    color: #f1dda0;
  }

  .checkout-review--simple .checkout-reveal-mode input:checked + span small { color: #b7aa84; }

  .checkout-review--simple .checkout-reveal-mode input:focus-visible + span {
    outline: 2px solid #efd373;
    outline-offset: 2px;
  }

  .checkout-review--simple.is-processing .checkout-quantity {
    opacity: .58;
  }

  .checkout-review--simple.is-processing .checkout-reveal-mode { opacity: .58; }

  .machine-outcome-queue {
    display: grid;
    gap: 6px;
    padding: 2px 0 4px;
  }

  .machine-outcome-queue > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(235, 230, 212, .58);
    font-size: 9px;
    font-weight: 660;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .machine-outcome-queue strong {
    overflow: hidden;
    color: #d6c57e;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .machine-outcome-queue > i {
    position: relative;
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .075);
  }

  .machine-outcome-queue > i > b {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--batch-progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #a97b28, #edd67f);
    box-shadow: 0 0 12px rgba(226, 202, 123, .3);
    transition: width .3s cubic-bezier(.2, .75, .35, 1);
  }

  .machine-outcome-queue > small,
  .machine-batch-manage-note,
  .reveal-actions--batch > p {
    margin: 0;
    color: rgba(235, 230, 212, .5);
    font-size: 9px;
    line-height: 1.4;
  }

  .machine-batch-manage-note { padding-top: 1px; }

  .reveal-batch-progress {
    margin: 0 0 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
  }

  .reveal-actions--batch > p { grid-column: 1 / -1; }

  @media (max-width: 520px) {
    .checkout-review--simple .checkout-quantity {
      margin-top: 13px;
      padding-bottom: 13px;
    }

    .checkout-review--simple .checkout-quantity > .checkout-quantity-stepper {
      grid-template-columns: 50px minmax(0, 1fr) 50px;
      width: 100%;
      min-height: 50px;
    }

    .checkout-review--simple .checkout-quantity-stepper > button,
    .checkout-review--simple .checkout-quantity-stepper > output { min-height: 50px; }

    .checkout-review--simple .checkout-quantity-direct { min-height: 34px; }

    .checkout-review--simple .checkout-reveal-mode {
      padding-bottom: 13px;
    }

    .checkout-review--simple .checkout-reveal-mode label,
    .checkout-review--simple .checkout-reveal-mode label > span {
      min-height: 56px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .checkout-review--simple .checkout-quantity-stepper > button,
    .checkout-review--simple .checkout-reveal-mode label > span,
    .machine-outcome-queue > i > b {
      transition: none;
    }

    .checkout-review--simple .checkout-quantity-stepper > button:hover { transform: none; }
  }
}

/* Shared slab media contract ------------------------------------------------
   Reference cards are exact neutral card art, not photographs of physical
   inventory. The authored holder makes grade data legible without imitating a
   grading-company label. Verified intake photos pass through unchanged. */
@layer pv.components {
  .pv-graded-slab {
    position: relative;
    display: grid;
    width: min(100%, 280px);
    aspect-ratio: var(--pv-slab-aspect, .605);
    margin: 0;
    container-type: inline-size;
    place-items: center;
    color: #f2ead2;
    isolation: isolate;
  }

  .pv-graded-slab__case {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(244, 238, 218, .28);
    border-radius: 4.4cqw;
    background:
      linear-gradient(112deg, rgba(255, 255, 255, .11), transparent 13% 84%, rgba(247, 229, 170, .045)),
      linear-gradient(180deg, rgba(29, 32, 29, .78), rgba(6, 8, 7, .91));
    padding: 2cqw;
    clip-path: none;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .09),
      inset 0 0 0 1.15cqw rgba(193, 158, 61, .012),
      0 20px 38px rgba(0, 0, 0, .54);
  }

  .pv-graded-slab__case::before {
    position: absolute;
    z-index: 3;
    inset: 1.15cqw;
    border: 1px solid rgba(206, 171, 73, .19);
    border-radius: 3.35cqw;
    content: "";
    pointer-events: none;
  }

  .pv-graded-slab__case::after {
    position: absolute;
    z-index: 6;
    inset: -16% 64% -16% 10%;
    width: 10%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
    content: "";
    opacity: .2;
    pointer-events: none;
    transform: rotate(11deg);
  }

  .pv-graded-slab__frame {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: 14.8% minmax(0, 1fr) 3.6%;
    overflow: hidden;
    border: 1px solid rgba(7, 8, 7, .96);
    border-radius: 2.8cqw;
    background:
      linear-gradient(180deg, rgba(216, 181, 81, .055), transparent 17%),
      #0b0d0b;
    padding: 1.65cqw;
    box-shadow:
      inset 0 0 0 1px rgba(235, 212, 145, .12),
      inset 0 0 1.8cqw rgba(0, 0, 0, .76);
  }

  .pv-graded-slab__label {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    grid-template: minmax(0, 1fr) / 24cqw minmax(0, 1fr) 22cqw;
    grid-template-areas: "brand identity grade";
    align-items: center;
    column-gap: 1.1cqw;
    overflow: hidden;
    border: 1px solid rgba(221, 191, 100, .4);
    border-radius: 1.4cqw 1.4cqw .75cqw .75cqw;
    background:
      radial-gradient(circle at 8% 5%, rgba(236, 205, 113, .16), transparent 38%),
      linear-gradient(108deg, rgba(197, 153, 40, .12), transparent 37% 73%, rgba(103, 78, 17, .09)),
      #0d100e;
    padding: .5cqw 1.1cqw;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .04),
      inset 0 -1px rgba(0, 0, 0, .8),
      0 .6cqw 1.35cqw rgba(0, 0, 0, .26);
  }

  .pv-graded-slab__brand {
    display: grid;
    min-width: 0;
    grid-area: brand;
    grid-template-columns: 6.4cqw minmax(0, 1fr);
    align-items: center;
    gap: .6cqw;
    justify-content: start;
    overflow: hidden;
  }

  .pv-graded-slab__brand b {
    display: grid;
    width: 6.4cqw;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 1px solid rgba(234, 204, 113, .5);
    border-radius: .8cqw;
    color: #ecd78f;
    font-size: 3.45cqw;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.08em;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .72), inset 0 0 0 .65cqw rgba(205, 164, 49, .055);
  }

  .pv-graded-slab__brand > span {
    display: grid;
    min-width: 0;
    width: auto;
    align-content: center;
  }

  .pv-graded-slab__brand strong {
    display: block;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    color: #f2e7c6;
    font-size: clamp(7px, 2.5cqw, 9px);
    font-weight: 720;
    line-height: .92;
    letter-spacing: -.08em;
    text-align: left;
    text-overflow: clip;
    text-transform: uppercase;
    white-space: normal;
  }

  .pv-graded-slab__brand strong > span {
    display: block;
    min-width: 0;
  }

  .pv-graded-slab__brand small {
    display: none;
    overflow: hidden;
    color: rgba(230, 202, 117, .66);
    font-size: 1.55cqw;
    font-weight: 690;
    line-height: 1;
    letter-spacing: .13em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pv-graded-slab__identity {
    display: grid;
    min-width: 0;
    grid-area: identity;
    align-self: center;
    gap: .3cqw;
    padding: 0;
  }

  .pv-graded-slab__identity strong {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(249, 246, 236, .9);
    font-size: 3.15cqw;
    font-weight: 630;
    line-height: 1.15;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pv-graded-slab__identity small {
    overflow: hidden;
    color: rgba(238, 232, 211, .48);
    font-size: 1.9cqw;
    font-weight: 610;
    line-height: 1;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pv-graded-slab__grade {
    display: grid;
    min-width: 0;
    height: auto;
    grid-area: grade;
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
    align-items: baseline;
    justify-content: center;
    justify-items: center;
    gap: .15cqw .55cqw;
    overflow: hidden;
    border-left: 1px solid rgba(217, 182, 79, .22);
    padding-left: 1.15cqw;
    text-align: center;
  }

  .pv-graded-slab__grade small {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    overflow: visible;
    max-width: none;
    align-items: baseline;
    justify-content: center;
    gap: .45cqw;
    color: rgba(238, 221, 166, .66);
    font-size: clamp(7px, 2.45cqw, 9px);
    font-weight: 710;
    line-height: 1;
    letter-spacing: .075em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pv-graded-slab__grade small b {
    overflow: visible;
    max-width: none;
    color: #ead185;
    font-size: inherit;
    font-weight: 780;
    text-overflow: clip;
  }

  .pv-graded-slab__grade strong {
    grid-column: 2;
    grid-row: 1;
    overflow: visible;
    max-width: none;
    color: #f5dea0;
    font-size: clamp(14px, 7.4cqw, 26px);
    font-weight: 580;
    line-height: 1.1;
    letter-spacing: -.06em;
    text-shadow: 0 0 2.5cqw rgba(211, 169, 50, .15);
    white-space: nowrap;
  }

  .pv-graded-slab__grade em {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    color: rgba(241, 234, 210, .36);
    font-size: max(5px, 1.25cqw);
    font-style: normal;
    font-weight: 720;
    line-height: 1;
    letter-spacing: .12em;
    text-overflow: clip;
    white-space: nowrap;
  }

  .pv-graded-slab__security {
    position: relative;
    display: none;
    min-width: 0;
    grid-area: security;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.4cqw;
    overflow: hidden;
    border-top: 1px solid rgba(216, 183, 86, .19);
    background:
      linear-gradient(90deg, rgba(179, 111, 228, .05), rgba(75, 179, 208, .08), rgba(234, 190, 67, .08), rgba(186, 86, 154, .05));
    padding: .35cqw 0 0;
  }

  .pv-graded-slab__microline {
    overflow: hidden;
    color: rgba(229, 203, 126, .35);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.32cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    text-overflow: clip;
    white-space: nowrap;
  }

  .pv-graded-slab__record {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: .8cqw;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1;
    white-space: nowrap;
  }

  .pv-graded-slab__record small {
    color: rgba(241, 235, 213, .32);
    font-size: 1.25cqw;
    font-weight: 650;
    letter-spacing: .08em;
  }

  .pv-graded-slab__record b {
    overflow: hidden;
    color: rgba(246, 230, 181, .64);
    font-size: 1.6cqw;
    font-weight: 650;
    letter-spacing: .05em;
    text-overflow: ellipsis;
  }

  .pv-graded-slab__art {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 0;
    width: 91%;
    height: auto;
    max-width: 91%;
    max-height: calc(100% - 2.6cqw);
    aspect-ratio: 5 / 7;
    align-self: center;
    justify-self: center;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(210, 173, 69, .26);
    border-radius: 1.45cqw;
    background:
      linear-gradient(135deg, rgba(217, 177, 63, .045), transparent 25% 75%, rgba(255, 255, 255, .025)),
      #050605;
    box-shadow:
      0 0 0 .9cqw #090b09,
      0 0 0 calc(.9cqw + 1px) rgba(232, 205, 124, .13),
      0 2.3cqw 4.2cqw rgba(0, 0, 0, .52);
    place-items: center;
  }

  .pv-graded-slab__art::after {
    position: absolute;
    z-index: 2;
    inset: 1.1cqw;
    border: 1px solid rgba(235, 211, 145, .12);
    border-radius: .9cqw;
    content: "";
    pointer-events: none;
  }

  .pv-graded-slab__art > img {
    position: absolute;
    inset: 3.8cqw 2.6cqw;
    display: block;
    /* Route bundles still contain legacy `.item-art img` rules. These two
       important dimensions keep those generic card-grid declarations from
       stretching the nested reference art beyond its physical aperture. */
    width: calc(100% - 5.2cqw) !important;
    height: calc(100% - 7.6cqw) !important;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: 50% 50%;
    padding: 0 !important;
    filter: none !important;
    transform: none !important;
  }

  .pv-graded-slab__footer {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.25cqw;
    border-top: 1px solid rgba(210, 174, 68, .22);
    padding: .65cqw 1.25cqw 0;
  }

  .pv-graded-slab__footer > strong {
    color: rgba(231, 204, 121, .7);
    font-size: 1.75cqw;
    font-weight: 760;
    line-height: 1;
    letter-spacing: .13em;
    white-space: nowrap;
  }

  .pv-graded-slab__photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
  }

  .pv-graded-slab__test-label {
    position: relative;
    z-index: 2;
    overflow: hidden;
    color: rgba(239, 224, 173, .52);
    font-size: 1.65cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .09em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Medium cards keep the product identity and outcome, but shed security
     microcopy before it drops below a credible printed-label size. */
  @container (max-width: 239px) {
    .pv-graded-slab__frame { grid-template-rows: 14.8% minmax(0, 1fr) 3.6%; }
    .pv-graded-slab__label {
      grid-template: 1fr / 24cqw minmax(0, 1fr) 25cqw;
      grid-template-areas: "brand identity grade";
    }
    .pv-graded-slab__microline,
    .pv-graded-slab__record,
    .pv-graded-slab__security { display: none; }
    .pv-graded-slab__identity strong {
      font-size: max(7px, 3.15cqw);
      -webkit-line-clamp: 2;
    }
    .pv-graded-slab__brand strong {
      font-size: 8px;
      line-height: 1;
      letter-spacing: -.06em;
    }
    .pv-graded-slab__grade em { letter-spacing: .06em; }
    .pv-graded-slab__identity small {
      display: -webkit-box;
      font-size: max(5.5px, 1.9cqw);
      line-height: 1.08;
      letter-spacing: .025em;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .pv-graded-slab__footer > strong { display: none; }
    .pv-graded-slab__footer { display: flex; justify-content: center; padding-inline: .5cqw; }
    .pv-graded-slab__test-label {
      font-size: max(6px, 1.9cqw);
      letter-spacing: .04em;
      text-align: center;
    }
  }

  /* History, review and share thumbnails may shed identity and footer copy,
     but the Pack Vault lockup and grade keep the same geometry as every other
     synthetic reference slab. The figure aria-label retains the complete card
     identity and reference disclosure. */
  @container (max-width: 149px) {
    .pv-graded-slab__frame { grid-template-rows: 14.8% minmax(0, 1fr); }
    .pv-graded-slab__label {
      grid-template: 1fr / minmax(0, 1fr) auto;
      grid-template-areas: "brand grade";
      column-gap: 1cqw;
      padding-inline: 2cqw;
    }
    .pv-graded-slab__brand {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .pv-graded-slab__brand b {
      width: clamp(9px, 11cqw, 16px);
      font-size: clamp(5px, 5.7cqw, 8px);
    }
    .pv-graded-slab__brand > span,
    .pv-graded-slab__identity,
    .pv-graded-slab__footer { display: none; }
    .pv-graded-slab__grade {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      justify-items: end;
      padding-left: 2cqw;
    }
    .pv-graded-slab__grade small,
    .pv-graded-slab__grade em,
    .pv-graded-slab__security { display: none; }
    .pv-graded-slab__grade strong {
      grid-column: 1;
      grid-row: 1;
      font-size: clamp(10px, 11cqw, 16px);
    }
  }

  .pv-graded-slab--photo {
    overflow: hidden;
    border-radius: 4.6%;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .56));
  }

  .pv-graded-slab--pending {
    align-content: center;
    gap: 3cqw;
    overflow: hidden;
    border: 1px solid rgba(212, 183, 95, .2);
    border-radius: 5.6cqw;
    background:
      radial-gradient(circle at 50% 34%, rgba(212, 183, 95, .11), transparent 42%),
      #0d100d;
    padding: 12%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 18px 34px rgba(0, 0, 0, .42);
    text-align: center;
  }

  .pv-graded-slab--pending .pv-graded-slab__pending-mark {
    display: grid;
    width: 31%;
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid rgba(212, 183, 95, .5);
    border-radius: 50%;
    color: #dec36f;
    font-size: 12cqw;
    place-items: center;
  }

  .pv-graded-slab--pending strong { font-size: 6cqw; line-height: 1.08; }
  .pv-graded-slab--pending small { color: var(--pv-text-muted); font-size: 3.4cqw; }

  .collection-grid .item-art .pv-graded-slab {
    width: auto;
    height: min(100%, 340px);
    max-width: 100%;
  }
  .seller-card__art .pv-graded-slab { width: min(100%, 180px); }
  .detail-art .pv-graded-slab { width: min(82%, 360px); }
  @media (max-width: 760px) {
    html .item-detail-page .item-detail-art {
      height: min(390px, calc(100vw - 12px)) !important;
      max-height: min(390px, calc(100vw - 12px)) !important;
    }
    html .item-detail-page .detail-art .pv-graded-slab {
      width: min(82%, 360px);
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
  .purchase-review-card .pv-graded-slab,
  .listing-review__card .pv-graded-slab { width: 70px; }
  .marketplace-history-art .pv-graded-slab { width: min(100%, 56px); }
  .collateral-art .pv-graded-slab { width: auto; height: 100%; max-width: 100%; }
  html .purchase-review-card .pv-graded-slab > .pv-graded-slab__photo,
  html .listing-review__card .pv-graded-slab > .pv-graded-slab__photo,
  html .marketplace-history-art .pv-graded-slab > .pv-graded-slab__photo,
  html .collateral-art .pv-graded-slab > .pv-graded-slab__photo {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
  }
  .reveal-art .pv-graded-slab { width: min(100%, 348px); max-height: min(56vh, 500px); }
  .reveal-art .pv-graded-slab > .pv-graded-slab__photo { width: 100%; height: 100%; animation: none; }

  .rip-card-front > .pv-graded-slab,
  .rip-card-capsule > .pv-graded-slab {
    width: 96.5%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

  .rip-card-front > .pv-graded-slab,
  .rip-card-capsule > .pv-graded-slab { position: absolute; inset: 0; }

  .machine-slab-target > .pv-graded-slab {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    opacity: 0;
    transform: scale(.86);
    transition: opacity .2s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
  }

  .machine-stage.is-slab-delivery .machine-slab-target.is-delivered > .pv-graded-slab {
    opacity: 1;
    transform: scale(1);
  }
}

/* Non-destructive card inspector -----------------------------------------
   This overlay deliberately does not share the transactional modal close
   lifecycle. It may sit above a live opening or the retained fallback modal
   without acknowledging or tearing down either surface. */
@layer pv.components {
  html.card-inspector-open,
  html.card-inspector-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .card-inspector-trigger {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
  }

  .card-inspector-trigger:not(:disabled) { cursor: zoom-in; }
  .card-inspector-trigger:focus-visible {
    outline: 2px solid var(--pv-brass-hover);
    outline-offset: 4px;
  }

  .reveal-art.card-inspector-trigger { width: 100%; }

  .card-inspector-backdrop {
    position: fixed;
    z-index: 260;
    inset: 0;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: stretch;
    background:
      radial-gradient(circle at 50% 44%, rgba(212, 183, 95, .085), transparent 48%),
      rgba(2, 3, 2, .965);
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .card-inspector {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(226, 202, 123, .16);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(17, 20, 16, .98), rgba(3, 5, 4, .995));
    box-shadow: 0 36px 120px rgba(0, 0, 0, .78), inset 0 1px rgba(255, 255, 255, .035);
    padding: clamp(10px, 2vw, 20px);
  }

  .card-inspector:focus { outline: none; }

  .card-inspector-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
  }

  .card-inspector-head > div { min-width: 0; }
  .card-inspector-head span {
    display: block;
    color: var(--pv-brass);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .card-inspector-head h2 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--pv-text-strong);
    font-size: clamp(17px, 2.4vw, 28px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-inspector-close {
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .055);
    padding: 0;
    color: var(--pv-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .card-inspector-close:hover,
  .card-inspector-close:focus-visible {
    border-color: rgba(239, 211, 115, .46);
    color: var(--pv-text-strong);
    outline: 2px solid rgba(239, 211, 115, .72);
    outline-offset: 2px;
  }

  .card-inspector-stage {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    container-type: size;
  }

  .card-inspector-panel {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    place-items: center;
  }

  .card-inspector-panel[hidden] { display: none; }

  .card-inspector-panel > .pv-graded-slab,
  .card-inspector-panel > img {
    width: min(94cqw, calc(94cqh * var(--pv-slab-aspect, .605)), 560px);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .62));
  }

  .card-inspector-side-label,
  .card-inspector-sides {
    justify-self: center;
    margin: 0;
  }

  .card-inspector-side-label {
    color: var(--pv-text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .card-inspector-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(88px, 1fr));
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(0, 0, 0, .28);
    padding: 3px;
  }

  .card-inspector-sides button {
    min-height: 44px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 8px 18px;
    color: var(--pv-text-muted);
    cursor: pointer;
  }

  .card-inspector-sides button[aria-selected="true"] {
    background: rgba(212, 183, 95, .13);
    color: var(--pv-text-strong);
  }

  .card-inspector-sides button:focus-visible {
    outline: 2px solid var(--pv-brass-hover);
    outline-offset: 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .reveal-art.card-inspector-trigger:not(:disabled):hover {
      transform: translateY(-3px) scale(1.025);
    }
  }

  @media (max-width: 600px) {
    .card-inspector-backdrop {
      padding:
        max(6px, env(safe-area-inset-top))
        max(6px, env(safe-area-inset-right))
        max(6px, env(safe-area-inset-bottom))
        max(6px, env(safe-area-inset-left));
    }
    .card-inspector { gap: 5px; border-radius: 13px; padding: 9px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal-art.card-inspector-trigger:not(:disabled):hover { transform: none; }
  }
}

@layer pv.components {
  .pull-share-dialog {
    width: min(560px, calc(100vw - 28px));
    max-width: 560px;
    max-height: min(760px, calc(100dvh - 28px));
    margin: auto;
    border: 1px solid rgba(226, 202, 123, .2);
    border-radius: 18px;
    background: #10120f;
    padding: 0;
    color: var(--pv-text-strong);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .025) inset;
    overflow: auto;
  }

  .pull-share-dialog::backdrop {
    background: rgba(3, 4, 3, .78);
    backdrop-filter: blur(9px);
  }

  .pull-share-dialog.is-fallback {
    position: fixed;
    z-index: 500;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }

  .pull-share-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 22px 24px 17px;
  }

  .pull-share-head span {
    display: block;
    margin-bottom: 5px;
    color: var(--pv-brass);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .pull-share-head h2 {
    max-width: 24ch;
    font-size: clamp(22px, 4vw, 30px);
    line-height: 1.06;
  }

  .pull-share-head button {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .055);
    color: var(--pv-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
  }

  .pull-share-head button:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--pv-text-strong);
    transform: rotate(3deg);
  }

  .pull-share-body {
    display: grid;
    gap: 18px;
    padding: 0 24px 24px;
  }

  .pull-share-body > p {
    margin: 0;
    color: var(--pv-text-muted);
    font-size: 14px;
  }

  .pull-share-receipt {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 86px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(212, 183, 95, .12), rgba(255, 255, 255, .025) 58%);
    padding: 16px;
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .13);
  }

  .pull-share-receipt:has(.pv-graded-slab) {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .pull-share-receipt .pv-graded-slab { width: 76px; }

  .pull-share-mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #e6ce7b, #ae8128);
    color: #17140a;
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -.04em;
  }

  .pull-share-receipt > div { display: grid; gap: 3px; min-width: 0; }
  .pull-share-receipt small {
    color: #c9b76f;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .pull-share-receipt strong {
    overflow: hidden;
    color: var(--pv-text-strong);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pull-share-receipt > div > span { color: var(--pv-text-muted); font-size: 11px; }

  .pull-share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pull-share-actions :is(a, button) {
    display: inline-flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .055);
    padding: 11px 13px;
    color: var(--pv-text);
    font-size: 12px;
    font-weight: 620;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
  }

  .pull-share-actions :is(a, button):hover {
    background: rgba(255, 255, 255, .09);
    color: var(--pv-text-strong);
    transform: translateY(-1px);
  }

  .pull-share-actions :is(a, button) > span {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .07);
    color: var(--pv-brass-hover);
    font-size: 11px;
    font-weight: 760;
  }

  .pull-share-actions .pull-share-native {
    grid-column: 1 / -1;
    justify-content: center;
    background: linear-gradient(135deg, var(--pv-brass-hover), #b8892d);
    color: var(--pv-brass-ink);
    box-shadow: 0 12px 28px rgba(184, 137, 45, .16);
  }

  .pull-share-actions .pull-share-native:hover {
    background: linear-gradient(135deg, #f0dc91, #c49432);
    color: #17140a;
  }

  .pull-share-note { color: var(--pv-text-dim); font-size: 10px; line-height: 1.45; }

  @media (max-width: 520px) {
    .pull-share-dialog {
      width: calc(100vw - 16px);
      max-height: calc(100dvh - 16px);
      border-radius: 16px;
    }
    .pull-share-head { padding: 19px 18px 15px; }
    .pull-share-body { gap: 15px; padding: 0 18px 18px; }
    .pull-share-actions { grid-template-columns: minmax(0, 1fr); }
    .pull-share-actions .pull-share-native { grid-column: auto; }
    .pull-share-receipt:has(.pv-graded-slab) { grid-template-columns: 62px minmax(0, 1fr); padding: 12px; }
    .pull-share-receipt .pv-graded-slab { width: 62px; }
  }
}

@layer pv.base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    min-width: 320px;
    background: var(--pv-canvas);
    color: var(--pv-text-strong);
    scroll-behavior: smooth;
    scrollbar-color: var(--pv-line-strong) var(--pv-canvas);
  }

  body {
    min-width: 320px;
    margin: 0;
    overflow-x: clip;
    background: var(--pv-canvas);
    color: var(--pv-text);
    font: 400 15px/1.55 var(--pv-font);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body, button, input, select, textarea,
  p, li, td, th, label, span, a,
  h1, h2, h3, h4, .brand-name, .price,
  .metric-value, .rank, .machine-head strong,
  .machine-live, .item-body :is(h2, h3) {
    font-family: var(--pv-font);
  }

  h1, h2, h3, h4 {
    margin: 0;
    color: var(--pv-text-strong);
    font-family: var(--pv-display);
    font-weight: 610;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(38px, 4.35vw, 64px); line-height: .98; }
  h2 { font-size: clamp(26px, 2.7vw, 40px); line-height: 1.05; }
  h3 { font-size: 18px; line-height: 1.18; }
  p { color: var(--pv-text); }
  strong, b { font-weight: 620; }
  small { color: var(--pv-text-muted); }
  a { color: inherit; }
  img { max-width: 100%; }

  ::selection { background: rgba(212, 183, 95, .3); color: #fff; }
  ::placeholder { color: #74786f; opacity: 1; }

  :where(button, input, select, textarea, summary) { font: inherit; }
  :where(button, summary, [role="button"]) { -webkit-tap-highlight-color: transparent; }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--pv-brass-hover);
    outline-offset: 3px;
    box-shadow: var(--pv-ring);
  }

  :where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: .48;
  }

  .shell {
    position: relative;
    min-height: 100svh;
    isolation: isolate;
    --pv-art-opacity: .08;
    --pv-art-saturation: .66;
    --pv-page-max: 1420px;
  }

  .shell::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background-image: var(--vault-world-image);
    background-position: var(--vault-world-position);
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(var(--pv-art-saturation)) contrast(1.03);
    opacity: var(--pv-art-opacity);
    transform: translateZ(0);
  }

  .shell::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(90% 80% at 50% 12%, transparent 0 36%, rgba(9, 10, 8, .38) 78%),
      linear-gradient(180deg, rgba(9, 10, 8, .08), rgba(9, 10, 8, .74) 78%, var(--pv-canvas));
  }

  .content {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    padding: calc(var(--top) + 30px) clamp(18px, 3.35vw, 52px) var(--pv-space-8);
  }

  .page { width: 100%; max-width: var(--pv-page-max); margin-inline: auto; }

  .page-sub {
    max-width: 68ch;
    margin: 10px 0 0;
    color: var(--pv-text-muted);
    font-size: 15px;
    line-height: 1.62;
  }

  .eyebrow, .storefront-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: #bca55f;
    font-size: 10px;
    font-weight: 620;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .eyebrow::before { width: 16px; background: currentColor; opacity: .7; }

  .section { margin-top: var(--pv-space-8); }
  .section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--pv-space-5);
    margin-bottom: var(--pv-space-5);
  }

  .section-head :where(h1, h2, h3, p) { margin-bottom: 0; }

  .card {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-glass);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .035),
      0 0 0 1px rgba(255, 255, 255, .065),
      var(--pv-shadow-1);
  }
}

@layer pv.components {
  /* Navigation --------------------------------------------------------- */
  .topbar {
    position: fixed;
    z-index: 80;
    inset: 0 0 auto;
    height: var(--top);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 clamp(14px, 2.15vw, 34px);
    background: linear-gradient(180deg, rgba(8, 9, 7, .96), rgba(8, 9, 7, .78) 72%, rgba(8, 9, 7, 0));
    box-shadow: none;
    backdrop-filter: none;
    transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
  }

  .shell.is-scrolled .topbar {
    background: rgba(9, 10, 8, .93);
    box-shadow: 0 1px rgba(255, 255, 255, .055), 0 18px 50px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px) saturate(1.05);
  }

  .brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    margin: 0;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(212, 183, 95, .52);
    border-radius: 9px;
    background: rgba(8, 9, 7, .7);
    color: var(--pv-brass-hover);
    font-size: 11px;
    font-weight: 650;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .72);
  }

  .brand-name {
    color: #ded1a7;
    font-size: 13px;
    font-weight: 610;
    letter-spacing: .045em;
  }

  .topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin-left: clamp(6px, 1.25vw, 20px);
  }

  .topnav .nav-link,
  .topnav-more > summary {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    padding: 0 clamp(8px, .72vw, 12px);
    background: transparent;
    color: #abaea6;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
  }

  .topnav .nav-link::after {
    content: "";
    position: absolute;
    right: 25%;
    bottom: 3px;
    left: 25%;
    height: 2px;
    border-radius: 999px;
    background: var(--pv-brass);
    opacity: 0;
    transform: scaleX(.3);
    transition: opacity .16s ease, transform .16s ease;
  }

  .topnav .nav-link:hover,
  .topnav-more > summary:hover { background: rgba(255, 255, 255, .045); color: var(--pv-text-strong); }
  .topnav .nav-link.is-active { background: rgba(212, 183, 95, .09); color: var(--pv-brass-hover); }
  .topnav .nav-link.is-active::after { opacity: 1; transform: scaleX(1); }

  .nav-badge, .nav-preview-badge {
    display: inline-flex;
    min-height: 18px;
    align-items: center;
    border: 1px solid rgba(212, 183, 95, .18);
    border-radius: 4px;
    background: rgba(212, 183, 95, .08);
    padding: 2px 5px;
    color: #d2bc77;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .08em;
    line-height: 1;
  }

  .topnav .nav-badge::before { background: var(--pv-success); animation: none; }

  .topnav-more { position: relative; }
  .topnav-more > summary { list-style: none; cursor: pointer; }
  .topnav-more > summary::-webkit-details-marker { display: none; }

  .topnav-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    width: min(288px, calc(100vw - 24px));
    gap: 2px;
    overflow: hidden auto;
    max-height: min(620px, calc(100svh - 92px));
    border: 0;
    border-radius: var(--pv-radius-card);
    background: rgba(16, 18, 15, .98);
    padding: 8px;
    box-shadow: 0 0 0 1px var(--pv-line), 0 24px 70px rgba(0, 0, 0, .55);
    backdrop-filter: blur(20px);
  }

  .topnav-menu-group {
    display: grid;
    gap: 2px;
    padding: 4px 0 7px;
  }

  .topnav-menu-group + .topnav-menu-group { border-top: 1px solid var(--pv-line); padding-top: 9px; }

  .topnav-menu .nav-label {
    margin: 0;
    padding: 4px 10px 5px;
    color: var(--pv-text-dim);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .topnav-menu .nav-link {
    min-height: 42px;
    justify-content: flex-start;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13px;
  }

  .topnav-menu .nav-link::after { display: none; }
  .topnav-menu .nav-link.is-active { box-shadow: inset 2px 0 var(--pv-brass); }

  .top-signin, .balance-pill {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 0 12px;
    color: #c5c3ba;
    font-size: 13px;
    font-weight: 530;
  }

  .balance-pill {
    border: 1px solid var(--pv-line);
    background: rgba(16, 18, 15, .82);
    color: #ded2a7;
    font-variant-numeric: tabular-nums;
  }

  .avatar-button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #2a2a20;
    color: #e3d596;
    font-size: 11px;
    font-weight: 650;
    box-shadow: none;
  }

  .topbar > .gold-button {
    min-height: 44px;
    border: 1px solid rgba(212, 183, 95, .38);
    background: rgba(212, 183, 95, .09);
    color: #e8d594;
    box-shadow: none;
  }

  .background-picker--topbar > summary {
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--pv-text-muted);
  }

  .background-menu {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: rgba(16, 18, 15, .98);
    box-shadow: 0 0 0 1px var(--pv-line), 0 24px 70px rgba(0, 0, 0, .55);
  }

  /* Buttons ------------------------------------------------------------ */
  :where(.gold-button, .outline-button, .ghost-button, .danger-button,
         .commerce-button, .button-text) {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--pv-radius-control);
    padding: 0 16px;
    font-size: 13px;
    font-weight: 610;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: transform .15s ease, border-color .15s ease,
                background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }

  .gold-button {
    border: 1px solid var(--pv-brass);
    background: var(--pv-brass);
    color: var(--pv-brass-ink);
  }

  .gold-button:hover:not(:disabled) {
    border-color: var(--pv-brass-hover);
    background: var(--pv-brass-hover);
    color: #11120e;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(212, 183, 95, .14);
  }

  .gold-button:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

  .outline-button {
    border: 1px solid var(--pv-line-strong);
    background: rgba(16, 18, 15, .75);
    color: var(--pv-text-strong);
  }

  .outline-button:hover:not(:disabled) {
    border-color: #5a5f54;
    background: var(--pv-surface-2);
    transform: translateY(-1px);
  }

  .ghost-button, .button-text {
    border: 1px solid transparent;
    background: transparent;
    color: var(--pv-text);
  }

  .ghost-button:hover, .button-text:hover { background: rgba(255, 255, 255, .045); color: var(--pv-text-strong); }

  .danger-button {
    border: 1px solid rgba(227, 124, 130, .3);
    background: rgba(227, 124, 130, .07);
    color: #f0a3a8;
  }

  /* Inputs ------------------------------------------------------------- */
  .field, :where(input, select, textarea).field {
    min-height: 48px;
    border: 1px solid var(--pv-line);
    border-radius: var(--pv-radius-control);
    background: var(--pv-surface-2);
    color: var(--pv-text-strong);
    padding: 11px 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .02);
  }

  .field:hover { border-color: var(--pv-line-strong); }
  .field:focus { border-color: var(--pv-brass); outline: none; box-shadow: var(--pv-ring); }
  select.field { color-scheme: dark; cursor: pointer; }

  /* Page headings / states -------------------------------------------- */
  .page-head, .storefront-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--pv-space-5);
    margin: 0 0 var(--pv-space-7);
    padding: 10px 0 0;
  }

  .storefront-page-head > div { max-width: 760px; }
  .storefront-page-head h1 { font-size: clamp(42px, 4.7vw, 64px); line-height: .96; }
  .storefront-page-head p { max-width: 62ch; margin: 12px 0 0; color: var(--pv-text-muted); font-size: 15px; }

  .storefront-loading > span {
    border-radius: var(--pv-radius-card);
    background: linear-gradient(100deg, var(--pv-surface-1) 20%, var(--pv-surface-2) 40%, var(--pv-surface-1) 60%);
  }

  .storefront-empty, .empty {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    padding: clamp(32px, 6vw, 72px) clamp(20px, 4vw, 48px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  }

  .page.route-pending {
    min-height: calc(100svh - var(--top) - 100px);
    display: grid;
    grid-template-columns: 52px minmax(0, 320px);
    place-content: center;
    align-items: center;
    gap: 16px;
    color: var(--pv-text-muted);
  }

  .route-pending-mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(212, 183, 95, .34);
    border-radius: 12px;
    color: var(--pv-brass-hover);
    font-size: 13px;
    font-weight: 650;
    animation: pv-route-pending 1.1s ease-in-out infinite alternate;
  }

  .page.route-pending strong { display: block; color: var(--pv-text-strong); font-size: 15px; }
  .page.route-pending small { display: block; margin-top: 3px; line-height: 1.45; }

  @keyframes pv-route-pending { to { border-color: rgba(212, 183, 95, .62); opacity: .64; } }

  /* Product cards ------------------------------------------------------ */
  .pack-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.7vw, 24px);
  }

  .pack-card {
    position: relative;
    min-width: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  }

  .pack-card:hover {
    border-color: transparent;
    background: transparent;
    transform: translateY(-3px);
    box-shadow: none;
  }

  .pack-art {
    position: relative;
    height: clamp(270px, 28vw, 380px);
    display: grid;
    overflow: visible;
    place-items: center;
    border: 0;
    background: transparent;
    padding: clamp(20px, 3vw, 34px);
  }

  .pack-art::after {
    content: "";
    position: absolute;
    right: 10%;
    bottom: 7%;
    left: 10%;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    filter: blur(10px);
  }

  .pack-art img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .52));
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
  }

  .pack-card:hover .pack-art img { transform: translateY(-3px) scale(1.018); }

  .pack-body { padding: 18px 19px 20px; }
  .pack-card h3 { margin: 7px 0 5px; font-size: 19px; }
  .pack-copy { min-height: 0; margin: 0; color: var(--pv-text-muted); font-size: 13px; line-height: 1.48; }
  .pack-meta { margin-top: 16px; border-top: 1px solid var(--pv-line); padding-top: 14px; }
  .pack-series { color: #bba35c; font-size: 9px; font-weight: 600; letter-spacing: .1em; }
  .price { color: #e6d491; font-size: 17px; font-variant-numeric: tabular-nums; }
  .stock { color: var(--pv-text-muted); }

  .pack-card.is-unavailable {
    cursor: default;
    box-shadow: none;
  }

  .pack-card.is-unavailable:hover { background: transparent; transform: none; box-shadow: none; }
  .pack-card.is-unavailable .pack-art--future { filter: saturate(.45); opacity: .62; }
  .pack-card.is-unavailable .pack-art img { filter: grayscale(.35) drop-shadow(0 18px 20px rgba(0, 0, 0, .42)); }
  .pack-card.is-unavailable :where(.gold-button, .commerce-button) { pointer-events: none; }

  .pack-art--future {
    isolation: isolate;
    background: transparent;
  }

  .future-pack-mark {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(58%, 190px);
    aspect-ratio: 2 / 3;
    place-items: center;
    border: 1px solid rgba(212, 183, 95, .2);
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(212, 183, 95, .06), rgba(255, 255, 255, .012));
    color: rgba(226, 202, 123, .5);
    font-size: 22px;
    font-weight: 580;
    letter-spacing: .08em;
    box-shadow: 0 22px 34px rgba(0, 0, 0, .28);
  }

  /* Each tier's full material is baked into its pouch pixels. Ambient light,
     interface chrome and result-rarity lighting remain Pack Vault gold so no
     runtime overlay can flatten or tint the photographed foil geometry. */
  [data-pack-tier] {
    --pv-tier-accent: #e2ac57;
    --pv-tier-highlight: #e2ca7b;
    --pv-tier-deep: #725a23;
    --pv-tier-label-accent: #b77a3f;
    --pv-tier-label-highlight: #e0ae74;
    --pv-tier-label-deep: #68411f;
    --pv-tier-glow-mix: 2.5%;
    --pv-tier-blur: 10px;
  }

  [data-pack-tier="2"] {
    --pv-tier-accent: #e2ac57;
    --pv-tier-highlight: #e2ca7b;
    --pv-tier-deep: #725a23;
    --pv-tier-label-accent: #a8b2b8;
    --pv-tier-label-highlight: #e8eef1;
    --pv-tier-label-deep: #5c666c;
    --pv-tier-glow-mix: 5%;
    --pv-tier-blur: 13px;
  }

  [data-pack-tier="3"] {
    --pv-tier-accent: #e2ac57;
    --pv-tier-highlight: #e2ca7b;
    --pv-tier-deep: #725a23;
    --pv-tier-label-accent: #c2c9d2;
    --pv-tier-label-highlight: #f2f5f7;
    --pv-tier-label-deep: #6d7480;
    --pv-tier-glow-mix: 7.5%;
    --pv-tier-blur: 16px;
  }

  [data-pack-tier="4"] {
    --pv-tier-accent: #e2ac57;
    --pv-tier-highlight: #e2ca7b;
    --pv-tier-deep: #725a23;
    --pv-tier-label-accent: #34966f;
    --pv-tier-label-highlight: #80d2ad;
    --pv-tier-label-deep: #14513a;
    --pv-tier-glow-mix: 10.5%;
    --pv-tier-blur: 20px;
  }

  [data-pack-tier="5"] {
    --pv-tier-accent: #e2ac57;
    --pv-tier-highlight: #e2ca7b;
    --pv-tier-deep: #725a23;
    --pv-tier-label-accent: #93c6dd;
    --pv-tier-label-highlight: #e5f7ff;
    --pv-tier-label-deep: #416c83;
    --pv-tier-glow-mix: 14.5%;
    --pv-tier-blur: 25px;
  }

  [data-pack-tier="6"] {
    --pv-tier-accent: #e2ac57;
    --pv-tier-highlight: #e2ca7b;
    --pv-tier-deep: #725a23;
    --pv-tier-label-accent: #d2aa3f;
    --pv-tier-label-highlight: #f3da7d;
    --pv-tier-label-deep: #775615;
    --pv-tier-glow-mix: 19%;
    --pv-tier-blur: 31px;
  }

  .pack-art,
  .pack-detail-art,
  .checkout-pack-art,
  .pvh-live-art,
  .pv-hero-lead,
  .pv-pack-card,
  .pv-selected-pouch,
  .pvs-pack,
  .rip-pack-inner,
  .practice-pack-visual,
  .rip-lab-pack-art {
    isolation: isolate;
    position: relative;
  }

  .pv-pack-foil {
    display: none;
  }

  .practice-pack-visual,
  .rip-lab-pack-art {
    display: grid;
    place-items: center;
  }

  .practice-pack-visual > img,
  .rip-lab-pack-art > img,
  .practice-pack-visual > .pv-pack-foil,
  .rip-lab-pack-art > .pv-pack-foil {
    grid-area: 1 / 1;
  }

  .rip[data-phase="torn"] .pv-pack-foil,
  .rip[data-phase="tearing"] .pv-pack-foil,
  .rip[data-phase="peel-ready"] .pv-pack-foil,
  .rip[data-phase="docked"] .pv-pack-foil,
  .rip[data-phase="awaiting-extract"] .pv-pack-foil,
  .rip[data-phase="extracting"] .pv-pack-foil,
  .rip[data-phase="scanning"] .pv-pack-foil,
  .rip[data-phase="grade"] .pv-pack-foil,
  .rip[data-phase="rarity"] .pv-pack-foil,
  .rip[data-phase="card-back"] .pv-pack-foil,
  .rip[data-phase="card-flip"] .pv-pack-foil,
  .rip[data-phase="turn-ready"] .pv-pack-foil,
  .rip[data-phase="revealing"] .pv-pack-foil,
  .rip[data-phase="assaying"] .pv-pack-foil,
  .rip[data-phase="revealed"] .pv-pack-foil,
  .rip[data-phase="resolved"] .pv-pack-foil {
    opacity: 0;
  }

  .pack-card[data-pack-tier] .pack-art::before,
  .pack-detail-art[data-pack-tier]::before,
  .chamber-product[data-pack-tier] .chamber-aperture::before {
    background: radial-gradient(
      ellipse,
      color-mix(in srgb, var(--pv-tier-accent) var(--pv-tier-glow-mix), transparent),
      transparent 69%
    );
    filter: blur(var(--pv-tier-blur));
    transform: none;
  }

  .pack-card[data-pack-tier] .pack-art > img,
  .pack-detail-art[data-pack-tier] > img,
  .chamber-product[data-pack-tier] .chamber-aperture > img {
    filter:
      drop-shadow(0 24px 24px rgba(0, 0, 0, .54))
      drop-shadow(
        0 0 var(--pv-tier-blur)
        color-mix(in srgb, var(--pv-tier-accent) var(--pv-tier-glow-mix), transparent)
      );
  }

  .checkout-pack[data-pack-tier] .checkout-pack-art {
    position: relative;
    isolation: isolate;
  }

  .checkout-pack[data-pack-tier] .checkout-pack-art::before {
    position: absolute;
    z-index: 0;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(
      ellipse,
      color-mix(in srgb, var(--pv-tier-accent) var(--pv-tier-glow-mix), transparent),
      transparent 72%
    );
    filter: blur(var(--pv-tier-blur));
    content: "";
    pointer-events: none;
  }

  .checkout-pack[data-pack-tier] .checkout-pack-art > img {
    position: relative;
    z-index: 1;
    filter:
      drop-shadow(0 9px 12px rgba(0, 0, 0, .5))
      drop-shadow(
        0 0 var(--pv-tier-blur)
        color-mix(in srgb, var(--pv-tier-accent) var(--pv-tier-glow-mix), transparent)
      );
  }

  .checkout-pack-art {
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  /* Marketplace / item cards ----------------------------------------- */
  .market-grid, .vault-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
  }

  .market-card, .vault-card, .listing-card {
    overflow: hidden;
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055), var(--pv-shadow-1);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .market-card:hover, .vault-card:hover, .listing-card:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .19), 0 20px 44px rgba(0, 0, 0, .26);
  }

  .item-art {
    height: clamp(300px, 30vw, 430px);
    background: radial-gradient(circle, rgba(212, 183, 95, .06), transparent 58%), #0c0e0b;
    padding: 24px;
  }

  .item-body { padding: 17px 18px 19px; }
  .item-body :is(h2, h3) { margin: 7px 0 4px; color: var(--pv-text-strong); font-size: 15px; line-height: 1.35; }

  /* Tables and ledger surfaces --------------------------------------- */
  .metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: var(--pv-radius-card);
    background: var(--pv-line);
    box-shadow: 0 0 0 1px var(--pv-line);
  }

  .metric {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: var(--pv-surface-1);
    padding: 20px;
    box-shadow: none;
  }

  .metric-label { color: var(--pv-text-muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
  .metric-value { margin-top: 8px; color: var(--pv-text-strong); font-size: 24px; font-weight: 610; }

  .ledger, .leaderboard {
    overflow: hidden;
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .ledger-row, .leader-row {
    border: 0;
    border-bottom: 1px solid var(--pv-line);
    background: transparent;
  }

  .ledger-row:last-child, .leader-row:last-child { border-bottom: 0; }
  .leader-row.is-top { background: rgba(212, 183, 95, .045); }

  /* Modal ------------------------------------------------------------- */
  .modal-backdrop {
    background: rgba(2, 3, 2, .84);
    backdrop-filter: blur(10px);
  }

  .modal {
    border: 0;
    border-radius: 16px;
    background: var(--pv-surface-2);
    box-shadow: 0 0 0 1px var(--pv-line), 0 36px 100px rgba(0, 0, 0, .72);
  }

  .close-button {
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 0;
    border-radius: var(--pv-radius-control);
    background: rgba(255, 255, 255, .045);
    color: var(--pv-text-muted);
    cursor: pointer;
  }

  .toast {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-3);
    box-shadow: 0 0 0 1px var(--pv-line), 0 20px 60px rgba(0, 0, 0, .5);
  }
}

@layer pv.modes {
  /* Showroom: theme art is allowed to breathe, with product-safe scrims. */
  .shell[data-visual-mode="showroom"],
  .shell--home,
  .shell--vending {
    --pv-art-opacity: .58;
    --pv-art-saturation: .88;
  }

  .shell[data-visual-mode="showroom"]::after,
  .shell--home::after,
  .shell--vending::after {
    background:
      linear-gradient(90deg, rgba(7, 9, 7, .9) 0%, rgba(7, 9, 7, .62) 35%, rgba(7, 9, 7, .18) 68%, rgba(7, 9, 7, .48) 100%),
      linear-gradient(180deg, rgba(7, 9, 7, .16) 0%, rgba(7, 9, 7, .04) 46%, rgba(7, 9, 7, .9) 100%);
  }

  .shell--vending { --pv-art-opacity: .46; }

  .shell--vending::after {
    background:
      linear-gradient(90deg, rgba(7, 9, 7, .94) 0%, rgba(7, 9, 7, .72) 34%, rgba(7, 9, 7, .36) 59%, rgba(7, 9, 7, .78) 100%),
      linear-gradient(180deg, rgba(7, 9, 7, .18) 0%, rgba(7, 9, 7, .06) 46%, rgba(7, 9, 7, .92) 100%);
  }

  /* Catalogue: artwork is an intro crop, product grids remain calm. */
  .shell[data-visual-mode="catalogue"] {
    --pv-art-opacity: .17;
    --pv-art-saturation: .62;
  }

  .shell[data-visual-mode="catalogue"]::before {
    position: absolute;
    height: min(660px, 72svh);
    -webkit-mask-image: linear-gradient(#000 0 44%, transparent 100%);
    mask-image: linear-gradient(#000 0 44%, transparent 100%);
  }

  .shell[data-visual-mode="catalogue"]::after {
    background:
      linear-gradient(90deg, rgba(9, 10, 8, .92), rgba(9, 10, 8, .55) 54%, rgba(9, 10, 8, .72)),
      linear-gradient(180deg, rgba(9, 10, 8, .2), var(--pv-canvas) 620px);
  }

  /* Ledger: information comes first; theme becomes a faint watermark. */
  .shell[data-visual-mode="ledger"] {
    --pv-art-opacity: .055;
    --pv-art-saturation: .22;
  }

  .shell[data-visual-mode="ledger"]::before { filter: grayscale(.45) saturate(var(--pv-art-saturation)) contrast(1.05); }
  .shell[data-visual-mode="ledger"]::after {
    background: linear-gradient(110deg, rgba(9, 10, 8, .94), rgba(9, 10, 8, .85) 60%, rgba(9, 10, 8, .9));
  }

  .shell[data-visual-mode="ledger"] :where(.card, .protocol-card, .lending-quote-builder,
    .lending-market-command, .lending-market-summary, .lending-market-filters,
    .lending-opportunity-card, .lending-position-card, .wallet-account-hub) {
    background-color: rgba(16, 18, 15, .97);
    backdrop-filter: none;
  }
}

@layer pv.routes {
  /* Home showroom ----------------------------------------------------- */
  .shell--home .content { padding: 0; }
  .shell--home .page.home-page { max-width: none; }

  .shell--home .pack-chamber {
    min-height: 100svh;
    max-width: 1520px;
    margin-inline: auto;
    padding: calc(var(--top) + clamp(28px, 4vw, 58px)) clamp(20px, 4vw, 64px) 28px;
  }

  .shell--home .chamber-copy h1 {
    max-width: 16ch;
    color: var(--pv-text-strong);
    font-size: clamp(50px, 5.25vw, 78px);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: .91;
  }

  .shell--home .chamber-copy h1 span { color: #e6c757; }
  .shell--home .chamber-copy > p { max-width: 48ch; color: #b7b8b0; font-size: 15px; }

  .shell--home .chamber-console {
    border: 0;
    border-radius: 16px;
    background: rgba(13, 16, 13, .94);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .075), 0 34px 90px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
  }

  .shell--home .chamber-console::before { display: none; }
  .shell--home .chamber-console-head { border-bottom-color: var(--pv-line); }
  .shell--home .chamber-value-stock { background: rgba(255, 255, 255, .025); }

  .shell--home .chamber-aperture {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .shell--home .chamber-aperture > img { max-height: min(58svh, 590px); }
  .shell--home .chamber-plinth { border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); }

  .shell--home .chamber-pulls {
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-bottom: 0;
  }

  /* Pack catalogue --------------------------------------------------- */
  .packs-page { padding-bottom: var(--pv-space-8); }
  .packs-page .storefront-page-head { max-width: 860px; }

  .packs-page .pack-grid { align-items: stretch; }
  .packs-page .pack-card { min-height: 100%; }

  .pack-showroom .page-head { margin-bottom: 14px; }
  .pack-showroom .tier-assurance { margin-bottom: 15px; }
  .pack-showroom .tier-assurance span { padding-block: 9px; }
  .pack-showroom .pack-catalog-section { margin-top: 14px; }
  .pack-showroom .pack-catalog-section > .section-head {
    align-items: end;
    margin-bottom: 14px;
    padding-top: 0;
  }

  .pack-showroom .pack-catalog-section:not(.pack-catalog-section--planned) .pack-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }

  .pack-showroom .pack-catalog-grid .pack-art {
    height: clamp(260px, 19vw, 268px);
    padding: 10px 14px 7px;
  }

  .pack-showroom .pack-catalog-grid .pack-body {
    min-height: 148px;
    padding: 13px 18px;
  }

  .pack-showroom .pack-tier-stamp {
    min-width: 0;
    border: 0;
    border-left: 2px solid rgba(224, 189, 86, .34);
    border-radius: 0;
    background: transparent;
    padding: 4px 0 4px 9px;
    box-shadow: none;
  }

  .pack-showroom .pack-catalog-grid .pack-meta { margin-top: 11px; padding-top: 10px; }
  .pack-showroom .pack-catalog-grid .pack-link-label { margin-top: 8px; }

  /* Product detail: image + decision above the fold. */
  .pack-detail-page .detail-back { margin-bottom: 28px; }

  .detail-layout--product {
    display: grid;
    grid-template-columns: minmax(330px, .7fr) minmax(0, 1.3fr);
    grid-template-areas: "art copy";
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }

  .detail-layout--product > .detail-art { grid-area: art; }
  .detail-layout--product > .detail-copy { grid-area: copy; }

  .detail-copy { padding: clamp(12px, 2.5vw, 30px) 0 0; }
  .detail-copy h1 { max-width: 18ch; font-size: clamp(42px, 4.3vw, 62px); }

  .pack-detail-art {
    position: sticky;
    top: calc(var(--top) + 24px);
    min-height: min(640px, calc(100svh - var(--top) - 76px));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px;
  }

  .pack-detail-art > img { width: 100%; max-height: calc(100svh - var(--top) - 150px); object-fit: contain; }

  .pack-band-line {
    margin: 21px 0;
    border-top: 1px solid var(--pv-line);
    border-bottom: 1px solid var(--pv-line);
    padding: 15px 0;
  }

  .pack-snapshot, .pack-opening-panel, .pack-distribution {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .pack-snapshot { overflow: hidden; }
  .pack-opening-panel { margin-top: 16px; }
  .pack-detail-page .gold-button { min-height: 50px; }

  .open-box--primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: center;
    margin: 0 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 18px 0 8px;
  }

  .open-box--primary > div:first-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 3px 9px;
  }

  .open-box--primary > div:first-child > .metric-label { grid-column: 1 / -1; }
  .open-box--primary > div:first-child > strong {
    color: var(--pv-text-strong);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
  }
  .open-box--primary > div:first-child > small { color: var(--pv-text-muted); font-size: 11px; }
  .open-box--primary > .opening-details { grid-column: 1 / -1; }
  .opening-details > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 2px;
    cursor: pointer;
  }

  /* Marketplace ------------------------------------------------------ */
  .marketplace-page .storefront-page-head { margin-bottom: 20px; }

  .marketplace-command {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: rgba(16, 18, 15, .96);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .marketplace-command--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 0;
    margin-bottom: 16px;
    padding: 14px 16px;
  }

  .marketplace-command--compact .marketplace-command__copy {
    grid-template-columns: minmax(220px, .74fr) minmax(330px, 1.26fr);
    align-items: start;
    column-gap: 20px;
    row-gap: 4px;
    max-width: 850px;
  }

  .marketplace-command--compact .marketplace-command__copy > span { grid-column: 1 / -1; }
  .marketplace-command--compact .marketplace-command__copy > strong { font-size: 17px; line-height: 1.24; }
  .marketplace-command--compact .marketplace-command__copy > p {
    max-width: none;
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
  }
  .marketplace-command--compact .marketplace-mode-tabs { align-self: center; }

  .marketplace-trust-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
  }

  .marketplace-trust-points li {
    position: relative;
    min-height: 42px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--pv-line);
    padding: 10px 8px 0 18px;
    color: var(--pv-text);
    font-size: 12px;
    line-height: 1.35;
  }

  .marketplace-trust-points li::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pv-success);
    box-shadow: 0 0 0 3px rgba(103, 201, 154, .1);
  }

  .marketplace-mode-tabs { background: #0b0d0a; box-shadow: inset 0 0 0 1px var(--pv-line); }
  .marketplace-mode-tabs :is(button, a).is-active { background: var(--pv-surface-3); color: var(--pv-brass-hover); }

  .marketplace-filters, .filters {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: rgba(16, 18, 15, .96);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .marketplace-page .marketplace-filters {
    margin-bottom: 16px;
    padding: 8px 10px;
  }

  .marketplace-page .marketplace-filters .field,
  .marketplace-page .marketplace-filters .gold-button { min-height: 44px; height: 44px; }

  .marketplace-page .marketplace-results-head {
    min-height: 38px;
    margin-bottom: 12px;
    padding-bottom: 9px;
  }

  .marketplace-page .marketplace-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 16px;
  }

  .marketplace-page .marketplace-grid .market-card {
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  /* Decision-dense desktop listings: a buyer can assess the slab, the
     provenance line, the ask and the purchase action in one viewport. */
  .marketplace-page .marketplace-grid .item-art {
    height: clamp(184px, 12.8vw, 192px);
    aspect-ratio: auto;
    padding: 10px;
  }

  .marketplace-page .marketplace-grid .item-body { padding: 11px 2px 0; }
  .marketplace-page .marketplace-grid .item-body :is(h2, h3) {
    display: -webkit-box;
    overflow: hidden;
    margin: 5px 0 3px;
    font-size: 14px;
    font-weight: 690;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .marketplace-page .marketplace-grid .market-action {
    min-height: 59px;
    margin-top: 8px;
    padding-top: 0;
  }

  .pool-category-list { display: grid; gap: 10px; }

  .pool-category {
    overflow: clip;
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .pool-category > summary {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 17px;
    color: var(--pv-text);
    cursor: pointer;
    list-style: none;
  }

  .pool-category > summary::-webkit-details-marker { display: none; }
  .pool-category > summary:hover { background: rgba(255, 255, 255, .025); }
  .pool-category > summary > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .pool-category > summary > span:last-child { flex: 0 0 auto; color: var(--pv-text-muted); font-size: 11px; }
  .pool-category > summary i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s ease;
  }
  .pool-category[open] > summary { border-bottom: 1px solid var(--pv-line); }
  .pool-category[open] > summary i { transform: translateY(2px) rotate(225deg); }
  .pool-category > .pool-card-grid { padding: 16px; }
  .pool-category > p { margin: 0; padding: 20px; color: var(--pv-text-muted); }

  /* Vending showroom ------------------------------------------------- */
  .shell--vending .content { padding-inline: clamp(18px, 3.4vw, 52px); }
  .shell--vending .machine-room { max-width: 1500px; margin-inline: auto; }

  .shell--vending .vending-hero .hero-copy h1 {
    max-width: 10ch;
    font-size: clamp(42px, 3.8vw, 55px);
    line-height: .91;
  }

  .shell--vending .vending-hero .hero-actions > .gold-button { display: none; }
  .shell--vending .vending-hero .hero-actions { margin-top: 17px; }

  .shell--vending .machine-control-deck {
    border: 0;
    border-radius: 14px;
    background: rgba(13, 16, 13, .97);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 78px rgba(0, 0, 0, .46);
  }

  .shell--vending .machine-control-deck::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: -13px;
    width: 13px;
    border-top: 1px solid rgba(212, 183, 95, .18);
    border-bottom: 1px solid rgba(212, 183, 95, .12);
    background: linear-gradient(90deg, rgba(7, 8, 7, .96), rgba(32, 31, 25, .98));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 14px 30px rgba(0, 0, 0, .32);
    pointer-events: none;
  }

  .machine-price-viewport, .machine-digital-product dl { background: rgba(255, 255, 255, .025); }
  .machine-price-carousel-button { min-width: 44px; min-height: 44px; }

  .shell--vending .machine-control-deck :where(
    .machine-digital-head,
    .machine-digital-head strong,
    .machine-digital-readout span,
    .machine-digital-product dt,
    .machine-digital-product dd,
    .machine-price-slide > span,
    .machine-price-slide > small,
    .machine-price-slide > i,
    .machine-price-meta,
    .machine-console-progress,
    .machine-digital-note
  ) { font-size: 10px; }

  .shell--vending .machine-control-deck .machine-digital-head { min-height: 31px; }
  .shell--vending .machine-control-deck .machine-digital-readout { min-height: 46px; }
  .shell--vending .machine-control-deck .machine-digital-readout strong { font-size: 30px; }
  .shell--vending .machine-control-deck .machine-digital-product :is(h2, h3) { font-size: 19px; }
  .shell--vending .machine-control-deck .machine-digital-product dl { padding-block: 8px; }
  .shell--vending .machine-control-deck .machine-price-slide { min-height: 98px; }
  .shell--vending .machine-control-deck .machine-price-slide > b { font-size: 28px; }
  .shell--vending .machine-control-deck .machine-digital-vend { min-height: 50px; font-size: 12px; }
  .shell--vending .machine-control-deck .machine-console-progress { line-height: 1.2; }

  .shell--vending .machine-control-deck .machine-price-slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
  }

  .shell--vending .machine-control-deck .machine-price-slide > :is(span, b, small, i) {
    grid-column: 1 / -1;
  }

  .shell--vending .machine-control-deck .machine-price-slide > small {
    justify-self: start;
    text-align: left;
  }

  @media (min-width: 1181px) and (min-height: 501px) {
    .shell--vending .vending-hero .machine-wrap {
      grid-template-columns: minmax(470px, 1fr) minmax(300px, 320px);
      gap: 0;
    }

    .shell--vending .machine-control-deck {
      width: calc(100% + 8px);
      margin-left: -8px;
      border-radius: 0 14px 14px 0;
      padding: 16px;
    }
  }

  /* Signed-out account gates: explain first, authenticate second. */
  .account-gate-page { max-width: 1180px; }
  .account-gate-intro { max-width: 980px; }
  .account-gate-intro h1 { max-width: 19ch; font-size: clamp(44px, 4.8vw, 66px); }
  .account-gate-intro .page-sub { max-width: 66ch; }

  .account-gate-page--lending > :is(.demo-notice, .protocol-stop--gate) {
    max-width: 980px;
    margin-top: 0;
    padding-block: 10px 13px;
  }

  .gate-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 18px 0 16px;
    border-radius: var(--pv-radius-card);
    background: var(--pv-line);
    box-shadow: 0 0 0 1px var(--pv-line);
  }

  .gate-steps > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 4px 12px;
    min-width: 0;
    min-height: 132px;
    border: 0;
    background: var(--pv-surface-1);
    padding: 18px 19px;
  }

  .gate-steps > div > span {
    grid-row: 1 / -1;
    color: var(--pv-brass);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
  }

  .gate-steps > div > strong { color: var(--pv-text-strong); font-size: 16px; line-height: 1.2; }
  .gate-steps > div > p { margin: 0; color: var(--pv-text-muted); font-size: 12px; line-height: 1.5; }

  .gate-panel--compact {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    gap: 18px;
    min-height: 106px;
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    padding: 17px 20px;
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .gate-panel--compact .boot-mark { width: 54px; height: 54px; margin: 0; font-size: 17px; }
  .gate-panel--compact h2 { font-size: clamp(22px, 2.2vw, 30px); }
  .gate-panel--compact p { max-width: 62ch; margin: 4px 0 0; color: var(--pv-text-muted); font-size: 13px; }
  .gate-panel--compact .gate-actions { margin: 0; }
  .gate-panel--compact .gold-button { min-width: 190px; }
  .gate-panel--vault { max-width: 940px; }

  /* Ledger routes ---------------------------------------------------- */
  .lending-lab, .leaderboard-page, .profile-page, .rewards-page,
  .wallets-page, .activity-page, .vault-page {
    max-width: 1360px;
  }

  /* Profile / free-rip progression ---------------------------------- */
  .profile-page .profile-practice {
    overflow: hidden;
    margin-top: 24px;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055), var(--pv-shadow-1);
  }

  .profile-page .profile-practice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
  }

  .profile-page .profile-practice-head > div {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .profile-page .profile-practice-head span,
  .profile-page .profile-practice-overview span {
    color: var(--pv-text-dim);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .profile-page .profile-practice-head h2 {
    margin: 0;
    color: var(--pv-text-strong);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.025em;
  }

  .profile-page .profile-practice-head p {
    max-width: 72ch;
    margin: 0;
    color: var(--pv-text-muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .profile-page .profile-practice-head .outline-button {
    min-height: 40px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .profile-page .profile-practice-overview {
    display: grid;
    grid-template-columns: minmax(150px, .48fr) minmax(300px, 1.5fr) minmax(160px, .55fr);
    border-top: 1px solid var(--pv-line);
    border-bottom: 1px solid var(--pv-line);
  }

  .profile-page .profile-practice-overview > div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 6px;
    min-height: 106px;
    padding: 18px 22px;
  }

  .profile-page .profile-practice-overview > div + div { border-left: 1px solid var(--pv-line); }

  .profile-page .profile-practice-total strong,
  .profile-page .profile-practice-tickets strong {
    color: var(--pv-text-strong);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -.035em;
  }

  .profile-page .profile-practice-tickets strong { color: var(--pv-brass-hover); }

  .profile-page .profile-practice-next > div:first-child {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
  }

  .profile-page .profile-practice-next strong {
    overflow: hidden;
    color: var(--pv-text-strong);
    font-size: 14px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-page .profile-practice-next small,
  .profile-page .profile-practice-tickets small {
    grid-column: 1 / -1;
    color: var(--pv-text-muted);
    font-size: 10.5px;
    line-height: 1.4;
  }

  .profile-page .profile-practice-track {
    height: 4px;
    overflow: hidden;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .075);
  }

  .profile-page .profile-practice-track > span {
    display: block;
    width: var(--practice-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--pv-brass);
  }

  .profile-page .profile-practice-achievements {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .profile-page .profile-practice-achievements > li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 82px;
    padding: 14px 16px;
  }

  .profile-page .profile-practice-achievements > li + li { border-left: 1px solid var(--pv-line); }

  .profile-page .profile-achievement-mark {
    display: grid;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .045);
    color: var(--pv-text-muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 690;
    place-items: center;
  }

  .profile-page .profile-practice-achievements li > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .profile-page .profile-practice-achievements strong {
    overflow: hidden;
    color: var(--pv-text);
    font-size: 11px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-page .profile-practice-achievements small {
    overflow: hidden;
    color: var(--pv-text-dim);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-page .profile-practice-status {
    color: var(--pv-text-dim);
    font-size: 9px;
    font-weight: 670;
  }

  .profile-page .profile-practice-achievements .is-claimable .profile-achievement-mark {
    background: rgba(212, 183, 95, .12);
    color: var(--pv-brass-hover);
  }

  .profile-page .profile-practice-achievements .is-claimed .profile-achievement-mark {
    background: rgba(103, 201, 154, .1);
    color: var(--pv-success);
  }

  .profile-page .profile-practice-status.is-claimed { color: var(--pv-success); }

  .profile-page .profile-practice-claim {
    min-height: 44px;
    padding-inline: 10px;
    color: var(--pv-brass-hover);
    font-size: 9px;
    white-space: nowrap;
  }

  /* Public collector achievements ---------------------------------- */
  .collector-profile-page { max-width: 1360px; }

  .collector-achievements { margin-top: 28px; }

  .collector-badge-list,
  .collector-compare-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .collector-badge-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .collector-badge-list > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 16px 18px;
  }

  .collector-badge-list > li + li { border-left: 1px solid var(--pv-line); }

  .collector-badge-list > li > span {
    display: grid;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(212, 183, 95, .11);
    color: var(--pv-brass-hover);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    font-weight: 680;
    place-items: center;
  }

  .collector-badge-list > li > div { display: grid; min-width: 0; gap: 4px; }
  .collector-badge-list strong { color: var(--pv-text-strong); font-size: 12px; font-weight: 650; }
  .collector-badge-list small { color: var(--pv-text-muted); font-size: 10px; line-height: 1.4; }
  .collector-badge-list .is-empty { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }

  .collector-compare-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border-radius: var(--pv-radius-card) var(--pv-radius-card) 0 0;
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .collector-compare-summary article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 16px;
    min-width: 0;
    padding: 20px 22px;
  }

  .collector-compare-summary article > span {
    color: var(--pv-text-dim);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .collector-compare-summary article > strong {
    overflow: hidden;
    color: var(--pv-text-strong);
    font-size: 16px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collector-compare-summary article > b {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--pv-brass-hover);
    font-size: clamp(24px, 3vw, 34px);
    font-variant-numeric: tabular-nums;
    font-weight: 590;
    letter-spacing: -.04em;
  }

  .collector-compare-summary article > small { grid-column: 2; color: var(--pv-text-dim); font-size: 9px; }
  .collector-compare-summary > i { color: var(--pv-text-dim); font-size: 10px; font-style: normal; text-align: center; text-transform: uppercase; }

  .collector-compare-head,
  .collector-compare-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(76px, .28fr) minmax(76px, .28fr);
    align-items: center;
  }

  .collector-compare-head {
    border-top: 1px solid var(--pv-line);
    border-bottom: 1px solid var(--pv-line);
    background: rgba(255, 255, 255, .025);
    color: var(--pv-text-dim);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .collector-compare-head > span,
  .collector-compare-list > li > span { padding: 10px 14px; text-align: center; }
  .collector-compare-head > span:first-child { padding-left: 20px; text-align: left; }

  .collector-compare-list {
    overflow: hidden;
    border-radius: 0 0 var(--pv-radius-card) var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 -1px rgba(255, 255, 255, .055), inset 1px 0 rgba(255, 255, 255, .055), inset -1px 0 rgba(255, 255, 255, .055);
  }

  .collector-compare-list > li { min-height: 66px; }
  .collector-compare-list > li + li { border-top: 1px solid var(--pv-line); }

  .collector-compare-milestone {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 20px;
  }

  .collector-compare-milestone > span {
    color: var(--pv-brass);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 680;
  }

  .collector-compare-milestone > div { display: grid; min-width: 0; gap: 2px; }
  .collector-compare-milestone strong { overflow: hidden; color: var(--pv-text); font-size: 11px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
  .collector-compare-milestone small { color: var(--pv-text-dim); font-size: 9px; }

  .collector-compare-status {
    color: var(--pv-text-dim);
    font-size: 10px;
    font-weight: 620;
  }

  .collector-compare-status.is-earned { color: var(--pv-success); }

  .profile-settings-form .listing-actions { margin-top: 4px; }
  .profile-settings-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--pv-radius-control);
    background: rgba(255, 255, 255, .035);
    padding: 12px;
  }

  .profile-settings-preview > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(212, 183, 95, .12);
    color: var(--pv-brass-hover);
    font-size: 12px;
    font-weight: 680;
    place-items: center;
  }

  .profile-settings-preview > div { display: grid; min-width: 0; gap: 2px; }
  .profile-settings-preview small { color: var(--pv-text-dim); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
  .profile-settings-preview strong { overflow: hidden; color: var(--pv-text-strong); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

  .lending-lab .lending-hero { padding-top: 26px; }
  .lending-lab .lending-hero h1 { max-width: 10ch; font-size: clamp(44px, 5vw, 68px); }
  .lending-lab .lending-lock { border-color: var(--pv-line); }

  /* The route bundle keeps the detailed lending finish, but its extracted
     payload omits these structural base rules. Keep them in the authored
     layer so labels and steps cannot collapse into run-on text. */
  .lending-lab .lending-pane-head {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--loan-line, var(--pv-line));
  }

  .lending-lab .lending-pane-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .lending-lab .lending-network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .lending-lab .lending-network-option {
    position: relative;
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    padding: 11px 12px;
    color: var(--pv-text);
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }

  .lending-lab .lending-network-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .lending-lab .lending-network-option :is(span, small) {
    overflow: hidden;
    color: var(--pv-text-muted);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lending-lab .lending-network-option strong {
    overflow: hidden;
    color: var(--pv-text-strong);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lending-lab .lending-network-option:has(input:checked) {
    background: rgba(212, 183, 95, .09);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .44);
  }

  .lending-lab .lending-network-option:has(input:checked) strong { color: var(--pv-brass-hover); }

  .lending-lab .lending-disclosure > summary > span {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .lending-mode-tabs {
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  }

  .lending-mode-tabs > a {
    min-height: 64px;
    border-radius: 8px;
  }

  .lending-mode-tabs > a[aria-current="page"] {
    background: rgba(212, 183, 95, .1);
    color: var(--pv-brass-hover);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .2);
  }

  .lending-market-command, .lending-market-summary, .lending-market-filters,
  .lending-opportunity-card, .lending-position-card,
  .lending-quote-builder, .wallet-account-hub {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  .leaderboard-spotlight, .leaderboard-panel,
  .rewards-passport, .profile-summary {
    border: 0;
    border-radius: var(--pv-radius-card);
    background: var(--pv-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  }

  /* Chat stays available but no longer competes with a transaction. */
  .pv-chat-tab {
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pv-line);
    border-radius: 12px;
    background: rgba(16, 18, 15, .94);
    padding: 0;
    color: var(--pv-text);
    box-shadow: var(--pv-shadow-1);
    transform: none;
  }

  .pv-chat-tab::before {
    content: "";
    width: 16px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
    box-shadow: 4px 5px 0 -4px currentColor;
  }

  .pv-chat-tab:hover, .pv-chat-tab:focus-visible { transform: translateY(-2px); }
  .pv-chat-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pv-chat-tab-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; }
  .pv-chat-tab-unread { top: -7px; right: -7px; }

  .pv-chat-panel {
    border: 0;
    border-radius: var(--pv-radius-media);
    background: var(--pv-surface-1);
    box-shadow: 0 0 0 1px var(--pv-line), 0 36px 100px rgba(0, 0, 0, .6);
  }

  /* Marketplace item detail: keep the price decision adjacent to the title,
     with only server-owned listing and vault facts used as reassurance. */
  .item-detail-page .detail-layout--product {
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  }

  .item-detail-page .item-detail-art {
    max-height: min(580px, calc(100svh - var(--top) - 112px));
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  .item-detail-page .item-detail-art img {
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .48));
  }

  .item-detail-page .detail-copy { padding-top: 6px; }
  .item-detail-page .detail-copy h1 { font-size: clamp(38px, 3.7vw, 56px); }

  .item-detail-page .market-action--detail {
    align-items: center;
    margin-top: 20px;
    border-color: var(--pv-line);
    padding-top: 16px;
  }

  .item-detail-page .market-action--detail .commerce-button {
    min-width: 154px;
    min-height: 48px;
  }

  .market-trust-context {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, .72fr));
    margin: 0;
    border-bottom: 1px solid var(--pv-line);
  }

  .market-trust-context > div { min-width: 0; padding: 12px 14px 13px 0; }
  .market-trust-context > div + div { border-left: 1px solid var(--pv-line); padding-left: 14px; }
  .market-trust-context dt { color: var(--pv-text-dim); font-size: 10px; }
  .market-trust-context dd {
    margin: 4px 0 0;
    color: var(--pv-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .item-detail-page .item-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: 20px;
  }

  .item-detail-page .item-facts > div + div {
    border-left: 1px solid var(--pv-line);
    padding-left: 14px;
  }

  .item-detail-page .item-facts dd { overflow-wrap: anywhere; }

  .sidebar-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }

  body:has(#modal-root:not(:empty)) .pv-chat-tab,
  body:has(.rip) .pv-chat-tab {
    opacity: 0;
    pointer-events: none;
  }
}

@layer pv.responsive {
  @media (max-width: 1180px) {
    :root { --top: 68px; }
    .pack-grid, .market-grid, .vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-page .profile-practice-overview { grid-template-columns: minmax(130px, .45fr) minmax(260px, 1.35fr) minmax(140px, .5fr); }
    .profile-page .profile-practice-achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-page .profile-practice-achievements > li:nth-child(odd) { border-left: 0; }
    .profile-page .profile-practice-achievements > li:nth-child(n + 3) { border-top: 1px solid var(--pv-line); }
    .collector-badge-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .collector-badge-list > li:nth-child(odd) { border-left: 0; }
    .collector-badge-list > li:nth-child(n + 3) { border-top: 1px solid var(--pv-line); }
    .topnav .nav-link { padding-inline: 8px; font-size: 12.5px; }
    .brand-name { display: none; }
    .shell--vending .vending-hero .machine-wrap,
    .shell--vending .vending-hero .machine-visual,
    .shell--vending .vending-hero .machine-stage { min-width: 0; max-width: 100%; }
    .shell--vending .vending-hero .machine-visual { overflow: clip; }
  }

  @media (min-width: 700px) and (max-width: 1180px) and (min-height: 501px) {
    /* The legacy route used fixed 260px + 500px tracks here. Keep the
       introduction useful while allowing the theatre to consume the exact
       remaining inline space on tablet widths. */
    .shell--vending .vending-hero {
      grid-template-columns: minmax(180px, 190px) minmax(0, 1fr);
      column-gap: 12px;
    }

    .shell--vending .vending-hero .machine-wrap {
      grid-template-columns: minmax(0, 1.25fr) minmax(276px, .75fr);
      grid-template-rows: 1fr;
      align-items: center;
      gap: 0;
      width: 100%;
      height: min(78svh, 680px);
      overflow: clip;
    }

    .shell--vending .vending-hero .machine-visual,
    .shell--vending .vending-hero .machine-stage { width: 100%; height: 100%; }
    .shell--vending .machine-control-deck {
      width: calc(100% + 6px);
      margin-left: -6px;
      border-radius: 0 13px 13px 0;
      padding: 13px;
    }

    /* At the narrow end of the tablet range the carousel's secondary pack
       label competes with the price. The product name immediately above is
       the stronger label, so keep the transactional price unambiguous. */
    @media (max-width: 860px) {
      .shell--vending .machine-price-slide > b { grid-column: 1 / -1; }
      .shell--vending .machine-price-slide > small { display: none; }
    }
  }

  @media (max-width: 1024px) {
    :root { --top: 64px; }

    .topbar { padding-inline: 12px; background: rgba(9, 10, 8, .92); backdrop-filter: blur(14px); }
    .mobile-menu { display: grid; flex: 0 0 44px; place-items: center; }
    .topbar .brand { min-width: 44px; }
    .topnav, .background-picker--topbar { display: none; }
    .brand-name { display: inline; }

    .nav-drawer {
      position: fixed;
      z-index: 1001;
      inset: 0 auto 0 0;
      display: flex;
      width: min(330px, 90vw);
      flex-direction: column;
      overflow-y: auto;
      background: #0d0f0c;
      padding: 18px 14px 28px;
      box-shadow: 26px 0 80px rgba(0, 0, 0, .52);
      transform: translate3d(-102%, 0, 0);
      transition: transform .24s cubic-bezier(.2, .8, .2, 1);
    }

    /* WebKit keeps an off-canvas element's shadow in the viewport even when
       the drawer itself is fully translated away. Only paint the elevation
       once the drawer is actually open. */
    .shell:not(.menu-open) .nav-drawer { box-shadow: none; }
    .shell.menu-open .nav-drawer { box-shadow: 26px 0 80px rgba(0, 0, 0, .52); }

    #primary-sidebar { z-index: 1001; }
    .mobile-overlay { z-index: 1000; }

    .shell.menu-open .nav-drawer { transform: translate3d(0, 0, 0); }
    .nav-drawer .nav-label { margin: 18px 10px 7px; color: var(--pv-text-dim); font-size: 10px; letter-spacing: .09em; }
    .nav-drawer .nav-link { min-height: 48px; border-radius: 9px; padding: 0 12px; color: var(--pv-text); font-size: 15px; font-weight: 500; }
    .nav-drawer .nav-link.is-active { background: rgba(212, 183, 95, .1); color: var(--pv-brass-hover); box-shadow: inset 2px 0 var(--pv-brass); }
    .nav-drawer .background-picker--sidebar { display: block; }

    .shell--home .chamber-odds-head a,
    .shell--home .chamber-info-link,
    .marketplace-page .market-card .item-title-link,
    .pool-card .item-title-link {
      display: flex;
      align-items: center;
      min-height: 44px;
    }

    .content { padding: calc(var(--top) + 24px) 20px var(--pv-space-8); }
    .detail-layout--product { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 28px; }
    .pack-detail-art { min-height: 560px; }
  }

  @media (max-width: 850px) {
    .marketplace-command--compact {
      grid-template-columns: 1fr;
      gap: 13px;
      padding: 14px;
    }

    .marketplace-command--compact .marketplace-command__copy {
      grid-template-columns: 1fr;
      gap: 5px;
      max-width: none;
    }

    .marketplace-command--compact .marketplace-command__copy > span { grid-column: auto; }
    .marketplace-command--compact .marketplace-mode-tabs { justify-self: stretch; }

    .marketplace-page .marketplace-filters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketplace-page .market-filter--search { grid-column: 1 / -1; }
    .marketplace-page .market-filter-actions { grid-column: 1 / -1; }
  }

  @media (max-width: 560px) {
    .marketplace-page .marketplace-filters { grid-template-columns: minmax(0, 1fr); }
    .marketplace-page .market-filter--search,
    .marketplace-page .market-filter-actions { grid-column: auto; }
    .marketplace-page .market-filter-actions { display: grid; }
    .marketplace-page .market-filter-actions .gold-button { width: 100%; }
    .marketplace-page .marketplace-grid { grid-template-columns: minmax(0, 1fr); }
    .marketplace-page .marketplace-grid :where(.market-card, .item-body, .market-action, .listing-price) {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .shell--vending .vending-hero .machine-wrap {
      width: 100%;
      max-width: 100%;
      gap: 0;
      margin: 0;
      overflow: clip;
    }

    .shell--vending .vending-hero .machine-visual,
    .shell--vending .vending-hero .machine-stage {
      width: 100%;
      height: min(42svh, 350px);
      min-height: 0;
    }

    .shell--vending .machine-control-deck {
      width: 100%;
      max-width: 100%;
      margin-top: -14px;
      overflow: hidden;
      border-radius: 11px;
    }

    .shell--vending .machine-control-deck::after { display: none; }
  }

  @media (min-width: 561px) and (max-width: 699px) {
    .shell--vending .vending-hero { grid-template-columns: minmax(0, 1fr); overflow: clip; }
    .shell--vending .vending-hero .machine-wrap {
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      max-width: 100%;
      min-height: 0;
      overflow: clip;
    }
    .shell--vending .vending-hero .machine-visual,
    .shell--vending .vending-hero .machine-stage { width: 100%; max-width: 100%; }
    .shell--vending .machine-control-deck {
      width: 100%;
      max-width: 100%;
      margin: -10px 0 0;
      overflow: hidden;
    }
    .shell--vending .machine-control-deck::after { display: none; }
  }

  @media (max-width: 760px) {
    .topbar { gap: 6px; }
    .topbar .brand { gap: 8px; }
    .topbar .brand-name { display: none; }
    .top-signin { padding-inline: 8px; }
    .topbar > .gold-button { padding-inline: 12px; }
    .balance-pill { padding-inline: 11px; }

    .content { padding: calc(var(--top) + 20px) 12px 52px; }
    .lending-lab .lending-network-grid { grid-template-columns: minmax(0, 1fr); }
    .section { margin-top: var(--pv-space-7); }
    .section-head, .page-head, .storefront-page-head { align-items: start; flex-direction: column; gap: 16px; margin-bottom: 24px; }
    .storefront-page-head h1 { font-size: clamp(38px, 12vw, 54px); }
    .page-sub, .storefront-page-head p { font-size: 14px; line-height: 1.55; }

    .pack-grid, .market-grid, .vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pack-art { height: clamp(230px, 66vw, 330px); padding: 15px 10px; }
    .pack-body { padding: 14px 13px 16px; }
    .pack-card h3 { font-size: 16px; }
    .pack-copy { display: none; }
    .pack-meta { align-items: start; flex-direction: column; gap: 4px; margin-top: 11px; padding-top: 11px; }

    .item-art { height: clamp(250px, 78vw, 360px); padding: 13px; }
    .item-body { padding: 13px; }
    .item-body :is(h2, h3) { font-size: 13px; }

    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric { padding: 16px 14px; }
    .metric-value { font-size: 20px; }

    .profile-page .profile-practice { margin-top: 18px; }
    .profile-page .profile-practice-head { align-items: stretch; flex-direction: column; gap: 14px; padding: 18px; }
    .profile-page .profile-practice-head .outline-button { align-self: start; }
    .profile-page .profile-practice-overview {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "total tickets" "next next";
    }
    .profile-page .profile-practice-total { grid-area: total; }
    .profile-page .profile-practice-next { grid-area: next; border-top: 1px solid var(--pv-line); border-left: 0 !important; }
    .profile-page .profile-practice-tickets { grid-area: tickets; }
    .profile-page .profile-practice-overview > div { min-height: 92px; padding: 15px 18px; }
    .profile-page .profile-practice-achievements { grid-template-columns: minmax(0, 1fr); }
    .profile-page .profile-practice-achievements > li + li { border-top: 1px solid var(--pv-line); border-left: 0; }
    .profile-page .profile-practice-achievements > li { min-height: 70px; padding: 12px 16px; }

    .collector-badge-list { grid-template-columns: minmax(0, 1fr); }
    .collector-badge-list > li + li { border-top: 1px solid var(--pv-line); border-left: 0; }
    .collector-badge-list > li { min-height: 74px; padding: 13px 16px; }

    .collector-compare-summary { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); }
    .collector-compare-summary article {
      grid-template-columns: minmax(0, 1fr);
      gap: 3px;
      padding: 16px;
    }
    .collector-compare-summary article > b { grid-column: 1; grid-row: auto; margin-top: 7px; font-size: 26px; }
    .collector-compare-summary article > small { grid-column: 1; }
    .collector-compare-head,
    .collector-compare-list > li { grid-template-columns: minmax(0, 1fr) 64px 64px; }
    .collector-compare-head > span,
    .collector-compare-list > li > span { padding-inline: 6px; }
    .collector-compare-head > span:first-child { padding-left: 14px; }
    .collector-compare-milestone { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding-inline: 14px 8px; }
    .collector-compare-status { font-size: 9px; }

    .detail-layout--product {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "art" "copy";
      gap: 24px;
    }

    .detail-copy { padding-top: 0; }
    .detail-copy h1 { font-size: clamp(36px, 11vw, 50px); }

    .item-detail-page .detail-layout--product { gap: 18px; }
    .item-detail-page .item-detail-art {
      width: min(100%, 320px);
      height: 300px;
      max-height: 300px;
      aspect-ratio: auto;
      margin-inline: auto;
    }
    .item-detail-page .detail-copy h1 {
      max-width: 20ch;
      font-size: clamp(32px, 9.5vw, 43px);
      line-height: .98;
    }
    .item-detail-page .item-facts { grid-template-columns: 1fr; }
    .item-detail-page .item-facts > div + div {
      border-left: 0;
      border-top: 1px solid var(--pv-line);
      padding-left: 0;
    }
    .item-detail-page--buyer { padding-bottom: 102px; }
    .item-detail-page--buyer .market-action--detail {
      position: fixed;
      z-index: 90;
      right: 10px;
      bottom: max(10px, env(safe-area-inset-bottom));
      left: 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      margin: 0;
      border: 1px solid rgba(212, 183, 95, .24);
      border-radius: 12px;
      background: rgba(13, 15, 12, .97);
      padding: 10px;
      box-shadow: 0 18px 52px rgba(0, 0, 0, .68);
      backdrop-filter: blur(16px);
    }
    .item-detail-page--buyer .market-action--detail .listing-price { min-width: 0; }
    .item-detail-page--buyer .market-action--detail .listing-price span,
    .item-detail-page--buyer .market-action--detail .listing-price small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item-detail-page--buyer .market-action--detail .commerce-button {
      min-width: 138px;
      min-height: 50px;
    }
    .item-detail-page--buyer .market-trust-context {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 14px;
      border-top: 1px solid var(--pv-line);
    }
    .item-detail-page--buyer .market-trust-context > div:first-child { grid-column: 1 / -1; }
    .item-detail-page--buyer .market-trust-context > div:nth-child(2) {
      border-left: 0;
      padding-left: 0;
    }
    body:has(.item-detail-page--buyer) .pv-chat-tab { display: none; }
    body:has(.pack-detail-page) .pv-chat-tab { display: none; }
    .pack-detail-art {
      position: relative;
      top: auto;
      min-height: 300px;
      padding: 20px;
    }

    .pack-detail-art > img { max-height: 272px; }

    .open-box--primary {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding-top: 15px;
    }

    .open-box--primary .gold-button { min-height: 48px; padding-inline: 14px; }

    .shell--home .pack-chamber {
      min-height: auto;
      padding: calc(var(--top) + 18px) 12px 28px;
    }

    .shell--home .chamber-copy h1 { max-width: 16ch; font-size: clamp(40px, 11.2vw, 48px); line-height: .92; }
    .shell--home .chamber-copy > p { font-size: 14px; }
    .shell--home .chamber-console { border-radius: 14px; }
    .shell--home .chamber-product,
    .shell--home .chamber-aperture { height: 220px; min-height: 220px; }
    .shell--home .chamber-aperture > img { height: 202px; max-height: 202px; }

    .shell[data-visual-mode="showroom"]::before,
    .shell--home::before,
    .shell--vending::before {
      background-image: var(--vault-world-image-mobile);
      background-position: var(--vault-world-position-mobile);
      opacity: .53;
    }

    .shell[data-visual-mode="catalogue"]::before {
      height: 500px;
      background-image: var(--vault-world-image-mobile);
      background-position: var(--vault-world-position-mobile);
      opacity: .14;
    }

    .lending-mode-tabs { gap: 3px; padding: 4px; }
    .lending-mode-tabs > a { min-height: 58px; padding: 8px 9px; }
    .lending-mode-tabs > a > span { font-size: 13px; }
    .lending-mode-tabs > a > small { font-size: 10px; }

    .marketplace-command { padding: 17px; }
    .marketplace-command--compact {
      grid-template-columns: 1fr;
      gap: 13px;
      padding: 14px;
    }
    .marketplace-command--compact .marketplace-command__copy {
      grid-template-columns: 1fr;
      gap: 5px;
      max-width: none;
    }
    .marketplace-command--compact .marketplace-command__copy > span { grid-column: auto; }
    .marketplace-command--compact .marketplace-mode-tabs { justify-self: stretch; }
    .marketplace-mode-tabs { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketplace-trust-points { grid-template-columns: 1fr; gap: 0; }
    .marketplace-trust-points li { min-height: 38px; }
    .pool-category > summary { min-height: 58px; padding: 11px 13px; }
    .pool-category > summary > span:last-child { font-size: 10px; }
    .pool-category > .pool-card-grid { padding: 10px; }

    .account-gate-intro h1 { font-size: clamp(38px, 11vw, 48px); }
    .gate-steps { grid-template-columns: 1fr; margin-block: 15px; }
    .gate-steps > div { min-height: 0; padding: 15px; }
    .gate-panel--compact {
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 13px;
      min-height: 0;
      padding: 16px;
    }
    .gate-panel--compact .boot-mark { width: 46px; height: 46px; }
    .gate-panel--compact .gate-actions { grid-column: 1 / -1; width: 100%; }
    .gate-panel--compact .gold-button { width: 100%; min-width: 0; }

    .demo-badge {
      position: fixed;
      z-index: 35;
      top: calc(var(--top) + 7px);
      right: 10px;
      display: inline-flex;
      min-height: 20px;
      align-items: center;
      border-color: rgba(212, 183, 95, .18);
      background: rgba(12, 14, 11, .82);
      padding: 3px 6px;
      color: #a59a75;
      font-size: 7px;
      pointer-events: none;
      backdrop-filter: blur(8px);
    }

    .modal-backdrop { align-items: end; padding: 10px; }
    .modal { width: 100%; max-height: calc(100dvh - 20px); border-radius: 16px; }

    .toast-stack { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  }

  @media (max-width: 390px) {
    .topbar .balance-pill {
      flex: 0 0 auto;
      min-height: 44px;
      padding-inline: 8px;
      font-size: 11px;
      white-space: nowrap;
    }
  }

  @media (max-width: 430px) {
    .topbar > .gold-button { min-width: 0; font-size: 12px; }
    .top-signin { font-size: 12px; }
    .pack-art { height: 245px; }
    .pack-series { font-size: 8px; }
    .price { font-size: 15px; }
    .storefront-page-head h1 { font-size: 42px; }
    .pack-detail-art { min-height: 286px; }
    .pack-detail-art > img { max-height: 256px; }
    .shell--home .pack-chamber {
      grid-template:
        "copy" auto
        "product" 214px
        "console" auto
        "pulls" auto /
        minmax(0, 1fr);
    }
    .shell--home .pack-chamber .chamber-pull-ledger {
      grid-area: pulls;
      grid-row: pulls;
      grid-column: pulls;
    }
    .shell--home .chamber-product,
    .shell--home .chamber-aperture { height: 214px; min-height: 214px; }
    .shell--home .chamber-aperture > img { height: 196px; max-height: 196px; }
  }

  @media (min-width: 761px) and (max-height: 760px) {
    /* On short desktop canvases the six-tier ladder repeats the card data and
       delays the live products. Let the real pouches and prices lead. */
    .pack-showroom .tier-assurance { display: none; }
    .pack-showroom .pack-catalog-section { margin-top: 4px; }
    .pack-showroom .pack-catalog-grid .pack-art { height: 196px; }
  }

  @media (max-width: 360px) and (max-height: 650px) {
    /* Short phones still get the product theatre, but the next action must be
       discoverable without an exploratory scroll. */
    .shell--vending .vending-hero .machine-visual,
    .shell--vending .vending-hero .machine-stage { height: min(31.5svh, 205px); }

    /* The entrance animation's retained transform otherwise becomes the
       containing block for the compact fixed action. */
    .shell--home .chamber-console {
      animation: none !important;
      backdrop-filter: none;
    }

    .shell--home .chamber-product,
    .shell--home .chamber-aperture {
      height: 166px;
      min-height: 166px;
    }

    .shell--home .chamber-aperture > img {
      height: 152px;
      max-height: 152px;
    }

    .shell--home .chamber-actions {
      position: fixed;
      z-index: 40;
      right: 12px;
      bottom: max(10px, env(safe-area-inset-bottom));
      left: 12px;
      margin: 0;
      padding: 0;
      pointer-events: none;
    }

    .shell--home .chamber-actions .gold-button {
      width: 100%;
      pointer-events: auto;
      box-shadow: 0 12px 38px rgba(0, 0, 0, .68), 0 0 0 1px rgba(8, 9, 7, .72);
    }

    .shell--home .chamber-info-link { display: none; }

    body:has(.shell--home) .pv-chat-tab { display: none; }
    body:has(.shell--vending) .pv-chat-tab { display: none; }
  }

  @media (max-width: 360px) {
    .top-signin { display: none; }
    .topbar > .gold-button { padding-inline: 10px; }
    .pack-grid, .market-grid, .vault-grid { grid-template-columns: 1fr; }
    .pack-art { height: 320px; }
    .metrics { grid-template-columns: 1fr; }
  }
}

@layer pv.authored {
  html[data-pv-route-style="landing"] .shell::before {
    content: none;
    background-image: none;
  }

  /* Authored restraint pass -------------------------------------------
   * Keep the real product and themed art, but remove the familiar
   * glass-dashboard stack. Mechanics stay untouched; hierarchy does not.
   */
  :root {
    --pv-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --pv-display: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --pv-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --pv-radius-control: 8px;
    --pv-radius-card: 10px;
    --pv-radius-media: 12px;
  }

  body { font-size: 15px; letter-spacing: 0; }

  h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -.02em;
  }

  h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1; }
  h2 { font-size: clamp(25px, 2.3vw, 35px); line-height: 1.08; }

  .eyebrow,
  .storefront-eyebrow {
    margin-bottom: 9px;
    color: var(--pv-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: none;
  }

  .eyebrow::before,
  .storefront-eyebrow::before { display: none; }

  .gold-button {
    border-radius: var(--pv-radius-control);
    background: #d2b458;
    /* pv.components styles .topbar > .gold-button as a ghost chip — pale gold
       ink on a 9%-alpha fill. This layer later repaints the fill solid and used
       to leave that pale ink behind, so "Create account" shipped at 1.38:1.
       Setting the ink here keeps both gold buttons on the same treatment. */
    color: var(--pv-brass-ink);
    box-shadow: none;
    transition: background-color .16s ease, transform .16s ease;
  }

  .gold-button:hover {
    background: #ddc36c;
    box-shadow: none;
    transform: translateY(-1px);
  }

  /* Global chrome: product names, not prototype telemetry. */
  .topnav .nav-link,
  .topnav-more > summary { font-size: 13px; font-weight: 500; }

  .side-status {
    border: 0;
    border-top: 1px solid var(--pv-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .status-line { font-size: 11px; }
  .status-copy { font-size: 11px; }

  /* Home: a collector's counter, not a miniature analytics dashboard. */
  .shell--home {
    --pv-art-opacity: .46;
    --pv-art-saturation: .72;
  }

  .shell--home::before {
    opacity: var(--pv-art-opacity);
    filter: saturate(var(--pv-art-saturation)) contrast(.94) brightness(.84);
  }

  .shell--home::after {
    background:
      linear-gradient(90deg, rgba(7, 8, 6, .82) 0%, rgba(7, 8, 6, .52) 29%, rgba(7, 8, 6, .18) 51%, rgba(7, 8, 6, .7) 79%, rgba(7, 8, 6, .9) 100%),
      linear-gradient(180deg, rgba(7, 8, 6, .08) 0%, rgba(7, 8, 6, .22) 62%, var(--pv-canvas) 100%);
  }

  .shell--home .pack-chamber {
    grid-template:
      "copy product" minmax(500px, calc(100svh - var(--top) - 52px))
      "pulls pulls" auto /
      minmax(320px, .78fr) minmax(440px, 1.22fr);
    gap: 22px clamp(34px, 6vw, 92px);
    min-height: 100svh;
    max-width: 1480px;
    padding: calc(var(--top) + 26px) clamp(24px, 4vw, 64px) 28px;
  }

  .shell--home .pack-chamber::before { display: none; }

  .shell--home .chamber-copy {
    grid-area: copy;
    align-self: center;
    padding: 0;
    animation: none !important;
  }

  .shell--home .chamber-copy h1 {
    max-width: 10ch;
    color: #e1bd52;
    font-size: clamp(50px, 4.5vw, 68px);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .95;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .38);
  }

  .shell--home .chamber-copy h1 span {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
  }

  .shell--home .chamber-copy > p {
    max-width: 34ch;
    margin-top: 20px;
    color: #c4c1b8;
    font-size: 16px;
    line-height: 1.55;
  }

  .shell--home .chamber-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 24px;
  }

  .shell--home .chamber-hero-actions .gold-button {
    min-width: 152px;
    min-height: 50px;
    border-radius: 6px;
    box-shadow: none;
  }

  .shell--home .chamber-hero-actions .button-text {
    min-height: 44px;
    color: #d7c57f;
  }

  .shell--home .chamber-product {
    grid-area: product;
    align-self: stretch;
  }

  .shell--home .chamber-aperture {
    width: 100%;
    max-width: 500px;
    height: 100%;
    min-height: 420px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none !important;
  }

  .shell--home .chamber-aperture::before { display: none; }

  .shell--home .chamber-aperture::after {
    right: 16%;
    bottom: 38px;
    left: 16%;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .78);
    filter: blur(15px);
  }

  .shell--home .chamber-aperture > img {
    width: min(82%, 420px);
    height: min(92%, 530px);
    max-height: 530px;
    margin-top: 0;
    filter: drop-shadow(0 28px 25px rgba(0, 0, 0, .64));
    animation: pv-pack-enter .42s cubic-bezier(.2, .78, .24, 1) both;
    transition: transform .22s ease, filter .22s ease;
    will-change: auto;
  }

  .shell--home .chamber-console {
    grid-area: console;
    align-self: center;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: #11130f;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .32);
    backdrop-filter: none;
    animation: none !important;
  }

  .shell--home .chamber-console::before { display: none; }

  .shell--home .chamber-console > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    min-height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 20px 20px 17px;
  }

  .shell--home .chamber-product-heading > span {
    display: block;
    margin-bottom: 5px;
    color: #8f9189;
    font-size: 11px;
  }

  .shell--home .chamber-console header h2 {
    color: #f0ede5;
    font-size: 21px;
    letter-spacing: -.015em;
  }

  .shell--home .chamber-console header > strong {
    color: #d7ba60;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.02em;
  }

  .shell--home .chamber-tier-rail--console {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .shell--home .chamber-tier-rail--console .chamber-tier {
    display: flex;
    flex-direction: row;
    min-width: 0;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    padding: 10px 4px 8px;
    box-shadow: none;
  }

  .shell--home .chamber-tier-rail--console .chamber-tier + .chamber-tier { margin-left: 15px; }
  .shell--home .chamber-tier-rail--console .chamber-tier::before { display: none; }

  .shell--home .chamber-tier-rail--console .chamber-tier strong {
    color: #b5b4ad;
    font-size: 13px;
    font-weight: 500;
  }

  .shell--home .chamber-tier-rail--console .chamber-tier span {
    color: #8f9189;
    font-size: 12px;
  }

  .shell--home .chamber-tier-rail--console .chamber-tier.is-selected {
    border-bottom-color: #d2b458;
    background: transparent;
    box-shadow: none;
  }

  .shell--home .chamber-tier-rail--console .chamber-tier.is-selected strong,
  .shell--home .chamber-tier-rail--console .chamber-tier.is-selected span { color: #f0ede5; }

  .shell--home .chamber-selection-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 15px 20px 5px;
    color: #a6a79f;
    font-size: 12px;
  }

  .shell--home .chamber-selection-meta span + span::before {
    content: "·";
    margin-right: 18px;
    color: #565951;
  }

  .shell--home .chamber-actions { padding: 13px 20px 16px; }

  .shell--home .chamber-actions .gold-button {
    position: static;
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    padding: 0 16px;
    box-shadow: none;
  }

  .shell--home .chamber-actions .gold-button > span,
  .shell--home .chamber-actions .gold-button > strong {
    color: #17150e;
    font-size: 13px;
    font-weight: 650;
  }

  .shell--home .chamber-console-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 8px 20px;
  }

  .shell--home .chamber-console-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: #b6b5ae;
    font-size: 12px;
    text-decoration: none;
  }

  .shell--home .chamber-console-links a:first-child { color: #d8c57e; }

  .shell--home .pack-chamber .chamber-pull-ledger {
    grid-area: pulls;
    margin-top: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    animation: none !important;
  }

  .shell--home .pack-chamber .vault-pulse-head { padding-inline: 0; }
  .shell--home .pack-chamber .vault-pulse-marker { display: none; }

  .shell--home .pack-chamber .vault-pulse-item {
    min-height: 102px;
    border-radius: 4px;
    background: transparent;
    transition: background-color .16s ease;
  }

  .shell--home .pack-chamber .vault-pulse-item img { width: 58px; height: 76px; }
  .shell--home .pack-chamber .vault-pulse-copy small,
  .shell--home .pack-chamber .vault-pulse-copy > span { font-size: 11px; }
  .shell--home .pack-chamber .vault-pulse-copy strong { font-size: 12px; }

  .shell--home .home-page > .demo-notice {
    width: calc(100% - clamp(48px, 8vw, 128px));
    max-width: 1352px;
    margin: 0 auto 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 14px 0;
    box-shadow: none;
  }

  .shell--home .home-page > .demo-notice strong,
  .shell--home .home-page > .demo-notice span { font-size: 11px; }

  body:has(.shell--home) .pv-chat-tab { display: none; }

  @keyframes pv-pack-enter {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @media (hover: hover) and (pointer: fine) {
    .shell--home .chamber-aperture:hover > img {
      filter: drop-shadow(0 31px 26px rgba(0, 0, 0, .68));
      transform: translateY(-3px);
    }

    .shell--home .chamber-tier-rail--console .chamber-tier:hover {
      background: transparent;
      box-shadow: none;
      transform: none;
    }

    .shell--home .pack-chamber .vault-pulse-item:hover {
      background: rgba(255, 255, 255, .035);
      transform: none;
    }
  }

  /* App pages use compact product headers; cinematic type stays on Home. */
  .storefront-page-head h1,
  .lending-hero h1,
  .page-head h1 { font-size: clamp(38px, 4vw, 54px); letter-spacing: -.025em; }

  .storefront-page-head p,
  .lending-hero p,
  .page-head p { max-width: 62ch; font-size: 15px; }

  .marketplace-command--authored {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 12px 0 18px;
    border: 0;
    border-bottom: 1px solid var(--pv-line);
    border-radius: 0;
    background: transparent;
    padding: 0 0 14px;
    box-shadow: none;
  }

  .marketplace-command--authored > p {
    margin: 0;
    color: var(--pv-text-muted);
    font-size: 12px;
  }

  .marketplace-command--authored > p strong {
    color: var(--pv-text);
    font-weight: 600;
  }

  .marketplace-command--authored .marketplace-mode-tabs {
    flex: 0 0 auto;
    width: auto;
  }

  .marketplace-fee-note {
    margin: 8px 0 18px;
    border-bottom: 1px solid var(--pv-line);
    padding: 0 0 14px;
    color: var(--pv-text-muted);
    font-size: 13px;
  }

  .marketplace-fee-note strong { color: var(--pv-text); }

  :is(.marketplace-grid, .collection-grid) .item-art {
    height: auto;
    aspect-ratio: 4 / 4.8;
    grid-template-rows: minmax(0, 1fr);
  }

  :is(.marketplace-grid, .collection-grid) .item-art > img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Listing art must contain the complete slab. The earlier compact desktop
     card height was shorter than the slab itself, which cropped both ends and
     made marketplace cards look half-mounted. */
  .marketplace-page .marketplace-grid .item-art {
    height: clamp(260px, 21vw, 310px);
    aspect-ratio: auto;
  }

  .marketplace-page .marketplace-grid .item-art .pv-graded-slab {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  @media (max-width: 560px) {
    .marketplace-page .marketplace-grid .item-art {
      height: clamp(330px, 105vw, 430px);
    }
  }

  .shell--vending .machine-control-deck .machine-price-track { gap: 0; }

  .lending-hero {
    align-items: end;
    margin-bottom: 12px;
    padding-bottom: 0;
  }

  .lending-hero > div { max-width: 720px; }
  .lending-hero h1 { margin-bottom: 8px; }
  .lending-hero p { margin: 0; color: var(--pv-text-muted); }

  .lending-lock {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    min-height: 0;
    margin: 14px 0 10px;
    border: 0;
    border-top: 1px solid var(--pv-line);
    border-bottom: 1px solid var(--pv-line);
    border-radius: 0;
    background: transparent;
    padding: 11px 0;
    box-shadow: none;
  }

  .lending-lock > strong { color: var(--pv-text); font-size: 12px; }
  .lending-lock > p { margin: 0; color: var(--pv-text-muted); font-size: 12px; }
  .lending-lock > a { min-height: 44px; font-size: 12px; }
  .lending-lock-mark,
  .lending-hero-facts { display: none; }

  .lending-mode-tabs { margin: 0 0 18px; }
  .lending-quote-builder { margin-top: 0; }

  .lending-builder-heading {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--pv-line);
    padding-bottom: 14px;
  }

  .lending-builder-heading > div > span { display: none; }

  .lending-network-option > span,
  .lending-network-option > small { font-size: 11px; }

  .lending-network-option {
    border-radius: 8px;
    background: rgba(255, 255, 255, .022);
    box-shadow: none;
  }

  .lending-network-option:has(input:checked) {
    background: rgba(212, 183, 95, .06);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .34);
  }

  .lending-form--v2,
  .lending-workspace {
    align-items: start;
    min-height: 0;
  }

  .lending-form--v2 :is(.lending-collateral, .lending-terms, .lending-estimate) {
    align-self: start;
  }

  .lending-calculation-details,
  .lending-secondary-section {
    border-top: 1px solid var(--pv-line);
    border-bottom: 1px solid var(--pv-line);
  }

  .lending-calculation-details { margin: 4px 16px 0; }

  .lending-calculation-details > summary,
  .lending-secondary-section > summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    color: var(--pv-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .lending-calculation-details > summary::-webkit-details-marker,
  .lending-secondary-section > summary::-webkit-details-marker { display: none; }

  .lending-calculation-details > summary::after,
  .lending-secondary-section > summary::after {
    content: "+";
    color: var(--pv-brass);
    font-size: 16px;
    font-weight: 400;
  }

  .lending-calculation-details[open] > summary::after,
  .lending-secondary-section[open] > summary::after { content: "−"; }

  .lending-calculation-details .lending-estimate-breakdown { margin: 0; }
  .lending-calculation-details .lending-term-impact { padding-inline: 2px; }

  .lending-secondary-section {
    margin-top: 18px;
    border-radius: 0;
  }

  .lending-secondary-section > summary { min-height: 54px; }
  .lending-secondary-section > section { margin-top: 0; padding-top: 8px; }

  @media (max-width: 900px) {
    .shell--home::after {
      background:
        linear-gradient(180deg, rgba(7, 8, 6, .65), rgba(7, 8, 6, .3) 34%, rgba(7, 8, 6, .68) 70%, var(--pv-canvas)),
        linear-gradient(90deg, rgba(7, 8, 6, .38), rgba(7, 8, 6, .12), rgba(7, 8, 6, .38));
    }

    .shell--home .pack-chamber {
      grid-template:
        "copy product" auto
        "pulls pulls" auto /
        minmax(0, .84fr) minmax(300px, 1.16fr);
      gap: 18px 26px;
      min-height: 0;
      padding: calc(var(--top) + 26px) 22px 28px;
    }

    .shell--home .chamber-copy h1 { font-size: clamp(45px, 7.6vw, 60px); }
    .shell--home .chamber-aperture { min-height: 360px; }
  }

  @media (max-width: 700px) {
    .shell--home { --pv-art-opacity: .38; }

    .shell--home .pack-chamber {
      grid-template:
        "copy" auto
        "product" 235px
        "pulls" auto /
        minmax(0, 1fr);
      gap: 13px;
      padding: calc(var(--top) + 18px) 12px 26px;
    }

    .shell--home .chamber-copy { padding-inline: 7px; }

    .shell--home .chamber-copy h1 {
      max-width: 11ch;
      font-size: clamp(40px, 11.5vw, 48px);
      line-height: .96;
    }

    .shell--home .chamber-copy > p {
      max-width: 36ch;
      margin-top: 11px;
      font-size: 14px;
      line-height: 1.45;
    }

    .shell--home .chamber-product,
    .shell--home .chamber-aperture { height: 235px; min-height: 235px; }

    .shell--home .chamber-aperture > img {
      width: min(64%, 225px);
      height: 230px;
      max-height: 230px;
    }

    .shell--home .chamber-aperture::after { bottom: 15px; }
    .shell--home .chamber-console { border-radius: 7px; }
    .shell--home .chamber-console > header { padding: 16px 15px 13px; }
    .shell--home .chamber-console header h2 { font-size: 19px; }
    .shell--home .chamber-console header > strong { font-size: 20px; }

    .shell--home .chamber-tier-rail--console { padding-inline: 15px; }
    .shell--home .chamber-tier-rail--console .chamber-tier { min-height: 54px; }
    .shell--home .chamber-tier-rail--console .chamber-tier + .chamber-tier { margin-left: 12px; }
    .shell--home .chamber-selection-meta { padding: 13px 15px 3px; }
    .shell--home .chamber-selection-meta span + span::before { margin-right: 10px; }
    .shell--home .chamber-actions { padding: 12px 15px 14px; }

    .shell--home .chamber-console-links {
      grid-template-columns: 1fr auto;
      padding: 6px 15px;
    }

    .shell--home .pack-chamber .chamber-pull-ledger { margin-top: 16px; }
    .shell--home .home-page > .demo-notice {
      width: calc(100% - 24px);
      margin-inline: 12px;
    }

    .marketplace-command--authored {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      margin: 6px 0 12px;
      padding-bottom: 10px;
    }

    .marketplace-command--authored .marketplace-mode-tabs {
      order: -1;
      justify-self: stretch;
      width: 100%;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketplace-command--authored .marketplace-mode-tabs :is(button, a),
    .marketplace-command--authored .marketplace-mode-tabs :is(button, a) > span {
      font-size: 12px;
    }

    .shell--vending .machine-control-deck :where(
      .machine-digital-head,
      .machine-digital-head strong,
      .machine-digital-readout span,
      .machine-digital-product dt,
      .machine-digital-product dd,
      .machine-price-slide > span,
      .machine-price-slide > small,
      .machine-price-slide > i,
      .machine-price-meta
    ) { font-size: 11px; }

    .shell--vending .machine-digital-ui[data-status="ready"] .machine-console-progress,
    .shell--vending .machine-digital-note { display: none; }

    .marketplace-command--authored > p { padding-inline: 3px; }

    .marketplace-filters {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 10px;
    }

    .marketplace-filters .market-filter--search,
    .marketplace-filters .market-filter-actions { grid-column: 1 / -1; }

    .marketplace-filters .field { min-height: 46px; }

    .lending-hero { align-items: start; }
    .lending-lock {
      grid-template-columns: minmax(0, 1fr) auto;
      min-height: 52px;
      margin-block: 8px;
      padding-block: 4px;
    }
    .lending-lock > p { display: none; }
    .lending-mode-tabs { margin-bottom: 12px; }

    .lending-lab .lending-quote-builder { margin-top: 12px; border-radius: 10px; }
    .lending-lab .lending-builder-heading { min-height: 0; gap: 4px; padding: 13px 12px; }
    .lending-lab .lending-builder-heading h2 { font-size: 25px; }
    .lending-lab .lending-builder-heading > p { font-size: 11px; }
    .lending-lab .lending-pane-head { min-height: 52px; padding: 8px 10px; }
    .lending-lab .lending-pane-head > span { width: 24px; height: 24px; border-radius: 6px; }
    .lending-lab .lending-pane-head small { font-size: 10px; }
    .lending-lab .lending-form--v2 .collateral-list { max-height: 190px; }
    .lending-lab .lending-form--v2 .collateral-choice { min-height: 72px; }

    .lending-term-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      padding: 10px;
    }

    .lending-term-option {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 3px;
      min-height: 64px;
      border-radius: 8px;
      padding: 7px 4px;
      text-align: center;
    }

    .lending-term-option > span { justify-content: center; }
    .lending-term-option > span strong { font-size: 19px; }
    .lending-term-option > b { font-size: 10px; text-align: center; }
    .lending-term-option > b small,
    .lending-term-option > em { display: none; }

    .lending-amount-picker { gap: 8px; padding: 10px 12px; }
    .lending-amount-control { grid-template-columns: minmax(0, 1fr) minmax(122px, .68fr); gap: 8px; }
    .lending-amount-cap > small { display: none; }
    .lending-amount-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lending-amount-presets button { min-height: 40px; font-size: 10px; }
    .lending-amount-status { min-height: 0; font-size: 10px; }
    .lending-estimate-lead { padding: 12px 14px; }
    .lending-estimate-lead > strong { font-size: 34px; }
    .lending-estimate-lead > small { display: none; }

    .lending-estimate .lending-network-picker {
      gap: 7px;
      margin: 0 12px 8px;
      padding-top: 10px;
    }

    .lending-estimate .lending-network-picker > header p { display: none; }
    .lending-estimate .lending-network-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .lending-estimate .lending-network-option {
      min-height: 58px;
      border-radius: 7px;
      padding: 8px 6px;
    }
    .lending-estimate .lending-network-option > span,
    .lending-estimate .lending-network-option > small { display: none; }
    .lending-estimate .lending-network-option > strong { font-size: 10px; }

    .lending-calculation-details { margin-inline: 12px; }
    .lending-lab .lending-save-quote { min-height: 48px; margin-top: 8px; }
    .lending-lab .lending-estimate .protocol-fineprint { font-size: 10px; }
  }

  @media (max-width: 560px) {
    .vault-page .collection-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }
  }

  @media (max-width: 390px) {
    .shell--home .pack-chamber {
      grid-template-rows: auto 220px auto;
      padding-top: calc(var(--top) + 14px);
    }

    .shell--home .chamber-copy h1 { font-size: 39px; }
    .shell--home .chamber-product,
    .shell--home .chamber-aperture { height: 220px; min-height: 220px; }
    .shell--home .chamber-aperture > img { height: 215px; max-height: 215px; }

    .shell--home .chamber-console-links {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .shell--home .chamber-console-links a { min-height: 44px; }
  }

  /* Vending console alignment ---------------------------------------
   * The route's legacy rules used four different internal insets and the
   * product heading inherited the global display scale. That made the deck
   * look pushed to one side even though its outer box was centred. One
   * gutter now governs every tier, fact row and control at every width. */
  .shell--vending .machine-control-deck {
    --machine-console-gutter: 16px;
    --machine-tier-inset: 15px;
    box-sizing: border-box;
    padding: var(--machine-console-gutter);
  }

  .shell--vending .machine-control-deck > *,
  .shell--vending .machine-control-deck .machine-digital-product,
  .shell--vending .machine-control-deck .machine-price-carousel,
  .shell--vending .machine-control-deck .machine-price-viewport {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .shell--vending .machine-control-deck .machine-digital-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 3px 0 2px;
  }

  .shell--vending .machine-control-deck .machine-digital-product > :is(h2, h3) {
    overflow: visible;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #f4f0e7;
    font-size: clamp(18px, 1.45vw, 20px);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-overflow: clip;
    text-wrap: balance;
    white-space: normal;
  }

  .shell--vending .machine-control-deck .machine-digital-product dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 0;
    border-block: 1px solid var(--machine-console-line);
    border-radius: 0;
    background: transparent;
    padding: 9px 0;
  }

  .shell--vending .machine-control-deck .machine-digital-product dl > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 0;
    padding: 0 13px 0 0;
  }

  .shell--vending .machine-control-deck .machine-digital-product dl > div + div {
    border-left: 1px solid var(--machine-console-line);
    padding: 0 0 0 15px;
  }

  .shell--vending .machine-control-deck .machine-digital-product :is(dt, dd) {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell--vending .machine-control-deck .machine-digital-product dt {
    color: #8f928a;
    font-size: 9px;
    line-height: 1.1;
  }

  .shell--vending .machine-control-deck .machine-digital-product dd {
    color: #dedacf;
    font-size: 11px;
    line-height: 1.15;
  }

  .shell--vending .machine-control-deck .machine-price-slide {
    box-sizing: border-box;
    padding-inline: var(--machine-tier-inset);
  }

  .shell--vending .machine-control-deck .machine-price-slide > :is(span, b, small, i) {
    min-width: 0;
    margin-inline: 0;
  }

  .shell--vending .machine-control-deck .machine-price-meta {
    width: 100%;
    padding-inline: 0;
  }

  @media (max-width: 1180px) and (min-height: 501px) {
    .shell--vending .machine-control-deck {
      --machine-console-gutter: 14px;
      --machine-tier-inset: 14px;
    }
  }

  @media (max-width: 600px) and (orientation: portrait) {
    .shell--vending .machine-control-deck {
      --machine-console-gutter: 12px;
      --machine-tier-inset: 12px;
    }

    .shell--vending .machine-control-deck .machine-digital-product {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 7px;
    }

    .shell--vending .machine-control-deck .machine-digital-product > :is(h2, h3) {
      font-size: 17px;
    }

    .shell--vending .machine-control-deck .machine-digital-product dl {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      min-width: 0;
      padding-block: 8px;
    }

    .shell--vending .machine-control-deck .machine-digital-product dl > div:first-child {
      display: grid;
    }
  }

  @media (max-width: 360px) and (orientation: portrait) {
    .shell--vending .machine-control-deck {
      --machine-console-gutter: 10px;
      --machine-tier-inset: 10px;
    }

    .shell--vending .machine-control-deck .machine-digital-product dt { font-size: 8px; }
    .shell--vending .machine-control-deck .machine-digital-product dd { font-size: 10px; }
  }

  /* Lending composer --------------------------------------------------
     One quiet decision flow: collateral, term, amount, then one summary. */

  .lending-lab {
    --loan-accent: var(--pv-brass);
    --loan-surface: rgba(17, 19, 15, .86);
    max-width: 1180px;
  }

  .lending-lab .lending-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px;
    min-height: 0;
    margin: 0;
    padding: 30px 0 20px;
  }

  .lending-lab .lending-hero > div { max-width: none; }
  .lending-lab .lending-hero h1 {
    max-width: none;
    margin: 0 0 6px;
    font-size: clamp(42px, 4.5vw, 58px);
    line-height: .96;
    letter-spacing: -.045em;
  }

  .lending-lab .lending-hero p {
    margin: 0;
    color: #9a9d94;
    font-size: 14px;
  }

  .lending-lab .lending-hero .lending-lock {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 9px;
    width: auto;
    min-height: 38px;
    margin: 0 0 2px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .038);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
    padding: 7px 11px;
  }

  .lending-lab .lending-hero .lending-lock > strong,
  .lending-lab .lending-hero .lending-lock > p,
  .lending-lab .lending-hero .lending-lock > a {
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.2;
  }

  .lending-lab .lending-hero .lending-lock > strong { color: var(--pv-brass-hover); }
  .lending-lab .lending-hero .lending-lock > p { color: #858880; }
  .lending-lab .lending-hero .lending-lock > a {
    border-left: 1px solid rgba(255, 255, 255, .1);
    padding-left: 9px;
    color: #d5d0c3;
  }

  .lending-lab .lending-mode-tabs {
    width: min(100%, 620px);
    min-height: 54px;
    margin: 0 0 22px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
    padding: 4px;
  }

  .lending-lab .lending-mode-tabs > a {
    min-height: 46px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    padding: 8px 14px;
  }

  .lending-lab .lending-mode-tabs > a > span {
    color: #d7d4ca;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
  }

  .lending-lab .lending-mode-tabs > a > small {
    color: #74776f;
    font-size: 10px;
  }

  .lending-lab .lending-mode-tabs > a[aria-current="page"] {
    background: rgba(212, 183, 95, .11);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .2);
  }

  .lending-lab .lending-mode-tabs > a[aria-current="page"] > :is(span, small) { color: #e4cd7d; }

  .lending-lab .lending-quote-builder {
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .lending-lab .lending-builder-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    min-height: 0;
    margin: 0;
    border: 0;
    padding: 0 0 16px;
  }

  .lending-lab .lending-builder-heading h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 620;
    letter-spacing: -.035em;
  }

  .lending-lab .lending-builder-heading > p {
    max-width: 420px;
    margin: 0 0 2px;
    color: #7f827a;
    font-size: 12px;
    text-align: right;
  }

  .lending-lab .lending-form--v2 {
    display: grid;
    grid-template:
      "collateral estimate" auto
      "terms estimate" auto
      "controls estimate" auto /
      minmax(0, 1fr) minmax(330px, 360px);
    gap: 0 44px;
    align-items: start;
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, .075);
  }

  .lending-lab .lending-workspace { display: contents; }
  .lending-lab .lending-collateral { grid-area: collateral; }
  .lending-lab .lending-terms { grid-area: terms; }
  .lending-lab .lending-request-controls { grid-area: controls; }
  .lending-lab .lending-estimate { grid-area: estimate; }

  .lending-lab .lending-form--v2 :is(.lending-collateral, .lending-terms, .lending-request-controls) {
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 17px 0;
  }

  .lending-lab .lending-form--v2 :is(.lending-terms, .lending-request-controls) {
    border-top: 1px solid rgba(255, 255, 255, .065);
  }

  .lending-lab .lending-pane-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    margin: 0 0 12px;
    border: 0;
    padding: 0;
  }

  .lending-lab .lending-pane-head > span { display: none; }
  .lending-lab .lending-pane-head > div { display: grid; gap: 2px; }
  .lending-lab .lending-pane-head strong {
    color: #eeeae0;
    font-size: 14px;
    font-weight: 630;
    letter-spacing: -.012em;
  }

  .lending-lab .lending-pane-head small {
    color: #777a72;
    font-size: 11px;
    line-height: 1.3;
  }

  .lending-lab .lending-pane-head > b {
    margin-left: auto;
    color: #777a72;
    font-size: 10px;
    font-weight: 550;
  }

  .lending-lab .lending-card-search { padding: 0 0 10px; }
  .lending-lab .lending-form--v2 .collateral-list {
    max-height: 156px;
    padding: 0;
  }

  .lending-lab .lending-form--v2 .collateral-choice {
    grid-template-columns: 52px minmax(0, 1fr) 20px;
    min-height: 76px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .024);
    padding: 9px 12px;
  }

  .lending-lab .lending-form--v2 .collateral-choice + .collateral-choice { margin-top: 6px; }
  .lending-lab .lending-form--v2 .collateral-choice:has(input:checked) {
    background: rgba(212, 183, 95, .075);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .15);
  }

  .lending-lab .lending-term-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
  }

  .lending-lab .lending-term-option {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 6px;
    min-height: 62px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
    padding: 10px 11px;
  }

  .lending-lab .lending-term-option > span { justify-content: flex-start; }
  .lending-lab .lending-term-option > span strong { font-size: 22px; font-weight: 660; }
  .lending-lab .lending-term-option > span small { font-size: 8px; }
  .lending-lab .lending-term-option > b { align-self: center; font-size: 11px; text-align: right; }
  .lending-lab .lending-term-option > b small { display: block; font-size: 7px; }
  .lending-lab .lending-term-option > em { display: none; }

  .lending-lab .lending-term-option[aria-pressed="true"] {
    border: 0;
    background: rgba(212, 183, 95, .12);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .36), 0 12px 28px -24px rgba(212, 183, 95, .8);
  }

  .lending-lab .lending-term-option[aria-pressed="true"]::after {
    top: 7px;
    right: 7px;
    width: 5px;
    height: 5px;
  }

  .lending-lab .lending-request-controls .lending-amount-picker {
    gap: 9px;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .lending-lab .lending-amount-control {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .52fr);
    gap: 10px;
  }

  .lending-lab .lending-amount-input-shell {
    min-height: 54px;
    border: 0;
    background: rgba(4, 6, 4, .65);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .2);
  }

  .lending-lab .lending-amount-input-shell input { height: 54px; font-size: 24px; }
  .lending-lab .lending-amount-cap {
    min-height: 54px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .028);
    box-shadow: none;
    padding: 8px 12px;
  }

  .lending-lab .lending-amount-cap > strong { font-size: 16px; }
  .lending-lab .lending-amount-cap > small { font-size: 8px; }
  .lending-lab .lending-amount-presets { gap: 7px; }
  .lending-lab .lending-amount-presets button {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
    font-size: 10px;
  }

  .lending-lab .lending-amount-presets button[aria-pressed="true"] {
    background: rgba(212, 183, 95, .12);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .28);
  }

  .lending-lab .lending-amount-status {
    min-height: 15px;
    color: #74776f;
    font-size: 9px;
  }

  .lending-lab .lending-request-controls .lending-network-picker {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr);
    align-items: end;
    gap: 14px;
    margin: 15px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .065);
    padding: 15px 0 0;
  }

  .lending-lab .lending-request-controls .lending-network-picker > header {
    display: grid;
    gap: 3px;
  }

  .lending-lab .lending-request-controls .lending-network-picker > header h3 {
    margin: 0;
    color: #dcd8ce;
    font-size: 12px;
    font-weight: 620;
  }

  .lending-lab .lending-request-controls .lending-network-picker > header p {
    margin: 0;
    color: #71746c;
    font-size: 10px;
  }

  .lending-lab .lending-network-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .lending-lab .lending-network-option {
    align-content: center;
    gap: 2px;
    min-height: 50px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
    padding: 7px 9px;
  }

  .lending-lab .lending-network-option > span { display: none; }
  .lending-lab .lending-network-option > strong { font-size: 11px; }
  .lending-lab .lending-network-option > small { color: #74776f; font-size: 8px; }
  .lending-lab .lending-network-option:has(input:checked) {
    background: rgba(212, 183, 95, .1);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .32);
  }

  .lending-lab .lending-form--v2 .lending-estimate {
    position: sticky;
    top: calc(var(--top) + 18px);
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 17px;
    background:
      radial-gradient(circle at 75% 0, rgba(212, 183, 95, .12), transparent 34%),
      var(--loan-surface);
    box-shadow: inset 0 0 0 1px rgba(212, 183, 95, .13), 0 28px 70px -48px rgba(0, 0, 0, .95);
  }

  .lending-lab .lending-estimate .lending-pane-head {
    min-height: 0;
    margin: 0;
    padding: 21px 22px 0;
  }

  .lending-lab .lending-estimate .lending-pane-head strong { font-size: 13px; }
  .lending-lab .lending-estimate .lending-pane-head small { display: none; }
  .lending-lab .lending-estimate-lead {
    gap: 5px;
    border: 0;
    padding: 19px 22px 16px;
  }

  .lending-lab .lending-estimate-lead > span {
    color: #979990;
    font-size: 9px;
  }

  .lending-lab .lending-estimate-lead > strong {
    color: #f0d77d;
    font-size: clamp(43px, 4vw, 53px);
    font-weight: 660;
  }

  .lending-lab .lending-estimate-lead > small {
    color: #777a72;
    font-size: 8px;
    letter-spacing: .025em;
    text-transform: none;
  }

  .lending-lab .lending-estimate-glance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0 22px 16px;
  }

  .lending-lab .lending-estimate-glance > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    padding: 10px 11px;
  }

  .lending-lab .lending-estimate-glance dt {
    color: #777a72;
    font-size: 8px;
    text-transform: uppercase;
  }

  .lending-lab .lending-estimate-glance dd {
    overflow: hidden;
    margin: 0;
    color: #eee9dd;
    font-size: 13px;
    font-weight: 630;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lending-lab .lending-calculation-details {
    margin: 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .lending-lab .lending-calculation-details > summary {
    min-height: 44px;
    color: #a4a69f;
    font-size: 11px;
  }

  .lending-lab .lending-calculation-details .lending-estimate-breakdown {
    margin: 0;
    border-bottom: 0;
  }

  .lending-lab .lending-save-quote {
    width: calc(100% - 44px);
    min-height: 52px;
    margin: 18px 22px 0;
    border-radius: 10px;
    padding-inline: 17px;
    font-size: 12px;
  }

  .lending-lab .lending-estimate .protocol-fineprint {
    margin: 0;
    border: 0;
    padding: 10px 22px 18px;
    color: #777a72;
    font-size: 9px;
    text-align: center;
  }

  .lending-lab .lending-secondary-section { margin-top: 20px; }
  .lending-lab .lending-final-disclosure { color: #676a63; font-size: 9px; }

  @media (max-width: 800px) {
    .lending-lab .lending-hero {
      align-items: center;
      gap: 12px;
      padding: 15px 0 14px;
    }

    .lending-lab .lending-hero h1 { margin-bottom: 5px; font-size: 35px; }
    .lending-lab .lending-hero p {
      max-width: 240px;
      font-size: 12px;
      line-height: 1.35;
    }

    .lending-lab .lending-hero .lending-lock { padding: 7px 9px; }
    .lending-lab .lending-hero .lending-lock > p { display: none; }
    .lending-lab .lending-mode-tabs {
      width: 100%;
      min-height: 50px;
      margin-bottom: 10px;
    }

    .lending-lab .lending-mode-tabs > a { min-height: 42px; padding: 7px 8px; }
    .lending-lab .lending-mode-tabs > a > span { font-size: 12px; }
    .lending-lab .lending-mode-tabs > a > small { display: none; }

    .lending-lab .lending-builder-heading {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .lending-lab .lending-form--v2 {
      grid-template:
        "collateral" auto
        "terms" auto
        "controls" auto
        "estimate" auto /
        minmax(0, 1fr);
      gap: 0;
    }

    .lending-lab .lending-form--v2 :is(.lending-collateral, .lending-terms, .lending-request-controls) {
      padding: 11px 0;
    }

    .lending-lab .lending-pane-head {
      min-height: 28px;
      margin-bottom: 8px;
    }

    .lending-lab .lending-pane-head strong { font-size: 12px; }
    .lending-lab .lending-pane-head small { font-size: 9px; }
    .lending-lab .lending-pane-head > b { font-size: 9px; }

    .lending-lab .lending-form--v2 .collateral-list { max-height: 90px; }
    .lending-lab .lending-form--v2 .collateral-choice {
      grid-template-columns: 46px minmax(0, 1fr) 18px;
      min-height: 68px;
      border-radius: 10px;
      padding: 7px 9px;
    }

    .lending-lab .lending-form--v2 .collateral-copy strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lending-lab .lending-term-grid { gap: 5px; }
    .lending-lab .lending-term-option {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 1px;
      min-height: 58px;
      border-radius: 8px;
      padding: 7px 4px;
      text-align: center;
    }

    .lending-lab .lending-term-option > span { justify-content: center; }
    .lending-lab .lending-term-option > span strong { font-size: 19px; }
    .lending-lab .lending-term-option > b { font-size: 9px; text-align: center; }
    .lending-lab .lending-term-option > b small { display: none; }

    .lending-lab .lending-amount-control {
      grid-template-columns: minmax(0, 1fr) minmax(112px, .58fr);
      gap: 7px;
    }

    .lending-lab .lending-amount-input-shell,
    .lending-lab .lending-amount-input-shell input,
    .lending-lab .lending-amount-cap { min-height: 50px; height: 50px; }
    .lending-lab .lending-amount-input-shell input { font-size: 21px; }
    .lending-lab .lending-amount-cap { padding: 7px 9px; }
    .lending-lab .lending-amount-cap > strong { font-size: 14px; }
    .lending-lab .lending-amount-cap > small { display: none; }
    .lending-lab .lending-amount-presets button { min-height: 33px; }
    .lending-lab .lending-amount-status {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .lending-lab .lending-request-controls .lending-network-picker {
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 8px;
      margin-top: 9px;
      padding-top: 9px;
    }

    .lending-lab .lending-request-controls .lending-network-picker > header p { display: none; }
    .lending-lab .lending-network-grid { gap: 4px; }
    .lending-lab .lending-network-option {
      min-height: 43px;
      border-radius: 7px;
      padding: 6px 5px;
      text-align: center;
    }

    .lending-lab .lending-network-option > strong { font-size: 9px; }
    .lending-lab .lending-network-option > small { display: none; }

    .lending-lab .lending-form--v2 .lending-estimate {
      position: static;
      margin-top: 11px;
      border-radius: 13px;
    }

    .lending-lab .lending-estimate .lending-pane-head {
      min-height: 0;
      margin: 0;
      padding: 14px 15px 0;
    }

    .lending-lab .lending-estimate-lead { padding: 11px 15px 10px; }
    .lending-lab .lending-estimate-lead > strong { font-size: 37px; }
    .lending-lab .lending-estimate-lead > small { display: none; }
    .lending-lab .lending-estimate-glance {
      gap: 6px;
      padding: 0 15px 10px;
    }

    .lending-lab .lending-estimate-glance > div { padding: 8px 9px; }
    .lending-lab .lending-estimate-glance dd { font-size: 11px; }
    .lending-lab .lending-calculation-details { margin: 0 15px; }
    .lending-lab .lending-calculation-details > summary { min-height: 39px; }
    .lending-lab .lending-save-quote {
      width: calc(100% - 30px);
      min-height: 48px;
      margin: 12px 15px 0;
    }

    .lending-lab .lending-estimate .protocol-fineprint { padding: 8px 15px 13px; }
  }

  @media (max-width: 370px) {
    .lending-lab .lending-hero p { display: none; }
    .lending-lab .lending-term-option > span strong { font-size: 17px; }
    .lending-lab .lending-term-option > span small { font-size: 7px; }
    .lending-lab .lending-request-controls .lending-network-picker { grid-template-columns: 78px minmax(0, 1fr); }
  }
}

@layer pv.a11y {
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
    .pack-card:hover, .market-card:hover, .vault-card:hover,
    .listing-card:hover, .gold-button:hover, .outline-button:hover { transform: none; }
  }

  @media (forced-colors: active) {
    :where(.card, .pack-card, .market-card, .vault-card, .modal,
      .marketplace-command, .lending-mode-tabs) { border: 1px solid CanvasText; }
    .gold-button { border: 2px solid ButtonText; }
  }
}

/* Foundation and narrow-screen restraint ---------------------------------
   These additions deliberately sit in the existing authored layers. They
   standardise interaction behaviour without flattening specialist route
   styling such as the vending machine or Studio reveal. */
@layer pv.tokens {
  :root {
    --pv-control-height: 44px;
    --pv-touch-target: 48px;
  }
}

@layer pv.base {
  :where(a[href], button, input, select, textarea, summary, [role="button"], [role="tab"]) {
    touch-action: manipulation;
  }

  :where(button, [role="button"], [role="tab"])[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .48;
  }
}

@layer pv.components {
  :where(.gold-button, .outline-button, .ghost-button, .danger-button,
         .commerce-button, .button-text) {
    min-height: var(--pv-control-height);
  }

  :where(.gold-button, .outline-button, .ghost-button, .danger-button,
         .commerce-button, .button-text):disabled {
    transform: none;
    box-shadow: none;
  }
}

@layer pv.authored {
  .shell .nav-drawer .sidebar-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }

  .shell .topbar .top-signin {
    height: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    padding-block: 0;
  }

  /* Empty and signed-out utility states should read as concise next steps,
     rather than oversized feature panels. */
  :where(.storefront-empty, .empty) {
    min-height: 0;
    padding: clamp(26px, 4vw, 46px) clamp(18px, 3vw, 34px);
  }

  :where(.gate-panel:not(.gate-panel--compact), .empty-state) {
    gap: 14px;
    min-height: 0;
    padding: clamp(34px, 5vw, 54px) clamp(18px, 4vw, 34px);
  }

  /* The Marketplace owns three modes. At phone widths each label and count
     gets a bounded flex area, and the filters stack before browser-native
     select text can collide with its chevron. */
  @media (max-width: 430px) {
    .marketplace-command--authored .marketplace-mode-tabs {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2px;
      padding: 3px;
    }

    .marketplace-command--authored .marketplace-mode-tabs :is(button, a) {
      min-width: 0;
      min-height: var(--pv-control-height);
      gap: 4px;
      padding-inline: 6px;
      font-size: 11px;
    }

    .marketplace-command--authored .marketplace-mode-tabs :is(button, a) > span {
      min-width: 0;
      overflow: hidden;
      font-size: inherit;
      text-overflow: ellipsis;
    }

    .marketplace-command--authored .marketplace-mode-tabs :is(button, a) > b {
      min-width: 18px;
      height: 18px;
      flex: 0 0 18px;
      margin-left: 0;
      font-size: 8px;
    }

    .marketplace-page .marketplace-filters {
      gap: 8px;
      padding: 9px;
    }

    .marketplace-page .marketplace-filters .field {
      overflow: hidden;
      padding-inline: 11px 32px;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .marketplace-page .marketplace-filters input.field {
      padding-right: 11px;
    }
  }

  @media (max-width: 640px) {
    body:has(#pv-chat[data-open="0"]):not(:has(.shell--home, .shell--vending, .practice-rip-page)) .content {
      padding-bottom: max(var(--pv-space-8), calc(78px + env(safe-area-inset-bottom)));
    }

    .pv-chat-tab {
      right: max(6px, env(safe-area-inset-right));
      bottom: max(8px, env(safe-area-inset-bottom));
    }

    .pv-chat-panel { top: env(safe-area-inset-top); }
    .pv-chat-close { width: 44px; height: 44px; }
    .pv-chat-input, .pv-chat-send { min-height: var(--pv-touch-target); }
  }

  @media (max-width: 360px) {
    .marketplace-page .marketplace-filters {
      grid-template-columns: minmax(0, 1fr);
    }

    .marketplace-page .market-filter--search,
    .marketplace-page .market-filter-actions {
      grid-column: auto;
    }

    .marketplace-command--authored .marketplace-mode-tabs :is(button, a) {
      padding-inline: 5px;
      font-size: 10px;
    }
  }

  @media (pointer: coarse) {
    :where(.gold-button, .outline-button, .ghost-button, .danger-button,
           .commerce-button, .button-text, .marketplace-mode-tabs > a,
           .marketplace-mode-tabs > button) {
      min-height: var(--pv-touch-target);
    }
  }

  /* These compact controls recur across product routes. Keep their visible
     shape restrained while preserving a dependable 44px interaction area. */
  .shell .topbar .avatar-button {
    width: var(--pv-control-height);
    min-width: var(--pv-control-height);
    height: var(--pv-control-height);
    min-height: var(--pv-control-height);
  }

  /* A signed-in phone header has five real controls competing for the same
     row. Keep those interaction targets intact and let only the informational
     balance yield space. The old fixed balance width pushed the avatar beyond
     the fixed header's right edge at 320px without increasing page scrollWidth,
     so ordinary overflow checks could not detect the crop. */
  @media (max-width: 390px) {
    .shell .topbar > .top-spacer {
      min-width: 0;
      flex: 1 1 0;
    }

    .shell .topbar > .balance-pill {
      display: block;
      min-width: 0;
      flex: 0 1 auto;
      overflow: hidden;
      line-height: 42px;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .lending-lab .lending-mode-tabs > a,
  .leader-period-tabs a,
  .profile-page .profile-practice-head .outline-button {
    min-height: var(--pv-control-height);
  }

  .lending-lab .lending-hero .lending-lock {
    min-height: var(--pv-control-height);
    padding-block: 0;
  }

  .lending-lab .lending-hero .lending-lock > a {
    display: inline-flex;
    min-width: var(--pv-control-height);
    min-height: var(--pv-control-height);
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 640px) {
    body:has(#pv-chat[data-open="1"][data-mobile-modal="1"]) { overflow: hidden; }

    /* On checkout-heavy phone routes the fixed launcher has no collision-free
       home. Chat remains available in the dedicated Free Rips room. */
    body:has(.marketplace-page) .pv-chat-tab,
    body:has(.wallet-lab) .pv-chat-tab {
      display: none;
    }
  }

  /* Multi-openings end in a scoped ownership review rather than dropping the
     collector into an undifferentiated vault grid. Cards remain ordinary
     vault items, so the same listing and sell-back controls stay authoritative. */
  .vault-page--batch-review .page-head { margin-bottom: 18px; }

  .vault-batch-review {
    margin-bottom: clamp(36px, 6vw, 68px);
    border-top: 1px solid color-mix(in srgb, var(--pv-gold) 62%, transparent);
    border-bottom: 1px solid var(--pv-line);
    padding: clamp(22px, 3vw, 34px) 0 clamp(28px, 4vw, 44px);
  }

  .vault-batch-review__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px;
    margin-bottom: 26px;
  }

  .vault-batch-review__head > div > span {
    display: block;
    margin-bottom: 7px;
    color: var(--pv-gold);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: .17em;
    text-transform: uppercase;
  }

  .vault-batch-review__head h2 {
    margin: 0;
    font-family: var(--pv-ui);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 620;
    letter-spacing: -.025em;
    line-height: 1.05;
  }

  .vault-batch-review__head p {
    max-width: 66ch;
    margin: 10px 0 0;
    color: var(--pv-text-muted);
    font-size: 13px;
    line-height: 1.6;
  }

  .vault-batch-review__head dl {
    display: flex;
    gap: 0;
    margin: 0;
  }

  .vault-batch-review__head dl > div {
    min-width: 84px;
    border-left: 1px solid var(--pv-line);
    padding-left: 16px;
  }

  .vault-batch-review__head dt {
    color: var(--pv-text-muted);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .vault-batch-review__head dd {
    margin: 4px 0 0;
    color: var(--pv-text);
    font-size: 22px;
    font-weight: 620;
    line-height: 1;
  }

  .vault-batch-grid { margin-top: 0; }

  .vault-batch-grid .vault-card {
    min-width: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(212, 183, 95, .045), transparent 54%);
    padding: 8px 8px 14px;
  }

  .vault-batch-review__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 26px;
  }

  .vault-batch-review__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 132px;
    color: var(--pv-text-muted);
    text-align: left;
  }

  .vault-batch-review__empty > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: rgba(103, 201, 154, .1);
    color: var(--pv-green);
    font-size: 18px;
  }

  .vault-batch-review__empty h3,
  .vault-batch-review__empty p { margin: 0; }
  .vault-batch-review__empty h3 { color: var(--pv-text); font-size: 16px; }
  .vault-batch-review__empty p { margin-top: 3px; font-size: 12px; }

  .vault-collection-rest { margin-top: 0; }

  .vault-collection-rest__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .vault-collection-rest__head h2 {
    margin: 0;
    font-family: var(--pv-ui);
    font-size: 20px;
    font-weight: 610;
  }

  .vault-collection-rest__head span {
    color: var(--pv-text-muted);
    font-size: 11px;
  }

  .vault-collection-rest__empty { padding-block: 24px; }

  @media (max-width: 720px) {
    .vault-batch-review__head { grid-template-columns: minmax(0, 1fr); }
    .vault-batch-review__head dl { width: 100%; }
    .vault-batch-review__head dl > div { min-width: 0; flex: 1; }
    .vault-batch-review__actions { align-items: stretch; flex-direction: column-reverse; }
    .vault-batch-review__actions > * { width: 100%; }
  }

  /* The collection ledger keeps the two decisions collectors repeatedly need
     — what the vault is worth and what can be sold back now — in one quiet,
     authoritative surface. Shipping stays explicit instead of inventing an
     estimate before fulfilment is enabled. */
  .vault-control-band {
    margin: 0 0 clamp(28px, 4vw, 44px);
    border-block: 1px solid var(--pv-line);
    padding: clamp(20px, 2.6vw, 30px) 0;
  }

  .vault-control-band > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
  }

  .vault-control-band > header h2 {
    margin: 4px 0 0;
    font-family: var(--pv-ui);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 620;
    letter-spacing: -.025em;
    line-height: 1.08;
  }

  .vault-control-band > header > span {
    color: var(--pv-text-muted);
    font-size: 11px;
    white-space: nowrap;
  }

  .vault-summary-ledger {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--pv-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .018);
    overflow: hidden;
  }

  .vault-summary-ledger > div {
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 128px;
    padding: 18px;
  }

  .vault-summary-ledger > div + div { border-left: 1px solid var(--pv-line); }

  .vault-summary-ledger dt {
    color: var(--pv-text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .vault-summary-ledger dd {
    margin: 8px 0 0;
    color: var(--pv-text);
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 620;
    letter-spacing: -.02em;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .vault-summary-ledger dd.is-unavailable {
    color: var(--pv-text-muted);
    font-size: clamp(16px, 1.7vw, 20px);
  }

  .vault-summary-ledger small {
    align-self: end;
    margin-top: 10px;
    color: var(--pv-text-muted);
    font-size: 10px;
    line-height: 1.45;
  }

  .vault-summary-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
  }

  .vault-summary-actions > :is(button, .vault-select-tool) { min-height: 44px; }

  .vault-select-tool {
    position: relative;
    z-index: 20;
    min-width: 156px;
  }

  .vault-select-tool > summary {
    width: 100%;
    box-sizing: border-box;
    list-style: none;
  }

  .vault-select-tool > summary::-webkit-details-marker { display: none; }

  .vault-select-tool > summary::after {
    content: "⌄";
    margin-left: 4px;
    color: var(--pv-gold);
    font-size: 14px;
    line-height: 1;
    transition: transform .15s ease;
  }

  .vault-select-tool[open] > summary::after { transform: rotate(180deg); }

  .vault-select-tool.is-disabled {
    pointer-events: none;
    opacity: .48;
  }

  .vault-select-menu {
    position: absolute;
    z-index: 2;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    gap: 2px;
    width: max(100%, 184px);
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid var(--pv-line-strong);
    border-radius: 10px;
    background: rgba(10, 11, 9, .985);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
  }

  .vault-select-menu > button {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding-inline: 12px;
    text-align: left;
  }

  .vault-summary-note {
    margin: 12px 0 0;
    color: var(--pv-text-muted);
    font-size: 11px;
    line-height: 1.5;
  }

  .vault-select-control {
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 0 11px;
    border: 1px solid var(--pv-line);
    border-radius: 8px;
    color: var(--pv-text-muted);
    cursor: pointer;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .vault-page.is-vault-selection-mode .vault-select-control { display: flex; }

  .vault-select-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .vault-select-control > span {
    display: grid;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--pv-text-muted) 62%, transparent);
    border-radius: 4px;
    color: var(--pv-ink);
    font-size: 12px;
  }

  .vault-select-control input:focus-visible + span {
    outline: 2px solid var(--pv-gold);
    outline-offset: 3px;
  }

  .vault-select-control input:checked + span {
    border-color: var(--pv-gold);
    background: var(--pv-gold);
  }

  .vault-select-control input:checked + span::before { content: "✓"; }
  .vault-select-control input:checked ~ b { color: var(--pv-text); }

  .vault-select-control--unavailable {
    cursor: default;
    opacity: .72;
  }

  .vault-card.is-selected {
    outline: 1px solid color-mix(in srgb, var(--pv-gold) 72%, transparent);
    outline-offset: 3px;
  }

  .vault-selection-bar {
    position: sticky;
    z-index: 18;
    top: calc(var(--top) + 6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: -18px 0 28px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--pv-gold) 62%, var(--pv-line));
    border-radius: 10px;
    background: rgba(8, 9, 8, .96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
    backdrop-filter: blur(14px);
  }

  .vault-selection-bar[hidden] { display: none; }

  .vault-selection-bar > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
  }

  .vault-selection-bar strong { font-size: 13px; }
  .vault-selection-bar span { min-width: 0; color: var(--pv-text-muted); font-size: 11px; overflow-wrap: anywhere; }
  .vault-selection-bar span b { margin-left: 4px; color: var(--pv-gold); }
  .vault-selection-bar button { min-width: 0; min-height: 44px; white-space: normal; }

  .vault-sellback-review dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-sellback-review dd { overflow-wrap: anywhere; }

  .vault-sellback-items {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pv-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .018);
  }

  .vault-sellback-items h3 {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pv-line);
    color: var(--pv-text-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .vault-sellback-items ol {
    max-block-size: min(34svh, 300px);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-gutter: stable;
  }

  .vault-sellback-items li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 8px 14px;
    min-width: 0;
    padding: 11px 14px;
  }

  .vault-sellback-items li + li { border-top: 1px solid var(--pv-line); }
  .vault-sellback-items li > span { display: grid; gap: 3px; min-width: 0; }
  .vault-sellback-items strong,
  .vault-sellback-items small { overflow-wrap: anywhere; }
  .vault-sellback-items strong { color: var(--pv-text); font-size: 12px; line-height: 1.35; }
  .vault-sellback-items small { color: var(--pv-text-muted); font-size: 10px; line-height: 1.4; }
  .vault-sellback-items li > b { color: var(--pv-gold); font-size: 12px; white-space: nowrap; }
  .vault-sellback-review > .gold-button { width: 100%; }

  @media (max-width: 720px) {
    body:has(.vault-selection-bar:not([hidden])) .pv-chat-tab { display: none; }
    .vault-control-band > header { align-items: start; }
    .vault-summary-ledger { grid-template-columns: minmax(0, 1fr); }
    .vault-summary-ledger > div { min-height: 0; padding: 15px 16px; }
    .vault-summary-ledger > div + div { border-top: 1px solid var(--pv-line); border-left: 0; }
    .vault-summary-ledger small { align-self: auto; }
    .vault-summary-actions { align-items: stretch; flex-direction: column; }
    .vault-summary-actions > :is(button, .vault-select-tool) { width: 100%; white-space: normal; }
    .vault-select-menu { right: auto; left: 0; width: 100%; }
    .vault-selection-bar {
      align-items: stretch;
      flex-direction: column;
      gap: 10px;
      margin-top: -12px;
    }
    .vault-selection-bar > div { flex-wrap: wrap; justify-content: space-between; }
    .vault-selection-bar > div:last-child {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: stretch;
    }
    .vault-sellback-review dl { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 390px) {
    .vault-sellback-items li { grid-template-columns: minmax(0, 1fr); }
    .vault-sellback-items li > b { justify-self: start; }
  }

  /* Short landscape keeps the cabinet cinematic, but the adjacent console
     remains the commerce control: complete prices, facts and 44px arrows. */
  @media (min-width: 641px) and (max-width: 1080px) and (max-height: 500px) {
    .shell--vending .vending-hero .machine-wrap {
      grid-template-columns: minmax(270px, 1fr) minmax(260px, 280px);
      gap: 8px;
      padding-right: 0;
    }

    .shell--vending .machine-control-deck {
      --machine-console-gutter: 10px;
      --machine-tier-inset: 11px;
      align-self: start;
      gap: 3px;
      width: 100%;
      padding: var(--machine-console-gutter);
    }

    .shell--vending .machine-control-deck .machine-digital-head {
      min-height: 28px;
      font-size: 10px;
    }

    .shell--vending .machine-control-deck .machine-digital-readout {
      min-height: 40px;
      padding-bottom: 4px;
    }

    .shell--vending .machine-control-deck .machine-digital-readout span { font-size: 10px; }
    .shell--vending .machine-control-deck .machine-digital-readout strong {
      overflow: visible;
      font-size: 26px;
      white-space: nowrap;
    }

    .shell--vending .machine-control-deck .machine-digital-product {
      gap: 5px;
      padding-block: 1px;
    }

    .shell--vending .machine-control-deck .machine-digital-product > :is(h2, h3) {
      font-size: 17px;
      white-space: normal;
    }

    .shell--vending .machine-control-deck .machine-digital-product dl {
      display: grid;
      padding-block: 6px;
    }

    .shell--vending .machine-control-deck .machine-digital-product dt { font-size: 10px; }
    .shell--vending .machine-control-deck .machine-digital-product dd { font-size: 11px; }

    .shell--vending .machine-control-deck .machine-price-carousel {
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: 5px;
    }

    .shell--vending .machine-control-deck .machine-price-arrow {
      min-width: 44px;
      min-height: 44px;
    }

    .shell--vending .machine-control-deck .machine-price-slide {
      min-height: 76px;
      padding: 7px var(--machine-tier-inset);
    }

    .shell--vending .machine-control-deck .machine-price-slide > :is(span, small, i) {
      display: block;
      overflow: hidden;
      font-size: 10px;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .shell--vending .machine-control-deck .machine-price-slide > b {
      overflow: visible;
      font-size: 22px;
      white-space: nowrap;
    }

    .shell--vending .machine-control-deck .machine-digital-vend {
      min-height: 44px;
      padding: 7px;
      font-size: 11px;
    }
  }
}

/* A failed animation module and a saved opening record share this compact
   fallback. Only metadata scrolls; ownership controls never fall below art. */
.modal-backdrop:has(.modal--reveal-result) {
  align-items: center;
  padding: 12px;
}
.modal.modal--reveal-result {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(960px, 100%);
  height: min(740px, calc(100dvh - 24px));
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 20px;
}
.modal--reveal-result .modal-head { margin: 0; }
.modal--reveal-result .reveal--fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
  min-height: 0;
  text-align: left;
}
.modal--reveal-result .reveal-art.card-inspector-trigger {
  container-type: size;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  transform: none;
}
.modal--reveal-result .reveal-art.card-inspector-trigger:not(:disabled):hover { transform: none; }
.modal--reveal-result .reveal-art > .pv-graded-slab {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: min(94cqw, calc((100cqh - 12px) * var(--pv-slab-aspect, .605)), calc(380px * var(--pv-slab-aspect, .605)));
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}
.modal--reveal-result .reveal-art > .pv-graded-slab > .pv-graded-slab__photo {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.modal--reveal-result .reveal-result-details {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}
.modal--reveal-result .reveal-result-copy {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 2px 4px;
}
.modal--reveal-result .reveal-result-copy:focus-visible { outline: 2px solid #e2ca7b; outline-offset: -2px; }
.modal--reveal-result .reveal-presentation-notice { margin: 0 0 12px; color: #b9b4a6; font-size: 12px; line-height: 1.5; }
.modal--reveal-result .reveal-result-copy h2 { margin: 10px 0; font-size: clamp(19px, 2.6vw, 27px); line-height: 1.15; }
.modal--reveal-result .reveal-result-copy .reveal-summary { margin: 8px 0; font-size: 13px; }
.modal--reveal-result .reveal-result-copy .reveal-value-ledger { margin-block: 12px; }
.modal--reveal-result .reveal-result-copy .reveal-value-ledger dd { font-size: 20px; }
.modal--reveal-result .reveal-result-copy .proof-grid { overflow-wrap: anywhere; }
.modal--reveal-result .reveal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 4px 0 0;
}
.modal--reveal-result .reveal-actions > :is(button, a) {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}
.modal--reveal-result .reveal-actions > [data-buyback-item],
.modal--reveal-result .reveal-actions--batch > [data-reveal-batch-next],
.modal--reveal-result .reveal-actions--batch > [data-reveal-batch-finish] { grid-column: 1 / -1; }
.modal--reveal-result .reveal-actions--batch > p { margin: 0; font-size: 11px; line-height: 1.35; }
@media (max-width: 600px) and (orientation: portrait) {
  .modal.modal--reveal-result { gap: 8px; padding: 12px; }
  .modal--reveal-result .reveal--fit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(160px, 42%) minmax(0, 1fr);
    gap: 8px;
  }
  .modal--reveal-result .reveal-result-details { gap: 6px; }
  .modal--reveal-result .reveal-result-copy h2 { margin: 6px 0; font-size: 19px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .modal.modal--reveal-result { gap: 8px; padding: 10px 14px; }
  .modal--reveal-result .reveal--fit { grid-template-columns: minmax(0, 1fr) minmax(280px, 1.25fr); gap: 18px; }
  .modal--reveal-result .reveal-result-details { gap: 6px; }
}