@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

    :root {
      --bg: #f3f4f5;
      --panel: #ffffff;
      --panel-2: #e9ebed;
      --ink: #181b1f;
      --muted: #68717a;
      --line: #d2d6da;
      --grid: rgb(34 40 46 / .052);
      --accent: #252a30;
      --accent-bright: #d7ff45;
      --accent-ink: #111500;
      --danger: #ff644f;
      --radius: 4px;
      --shadow: 0 24px 80px rgb(29 43 56 / .16);
    }

    * { box-sizing: border-box; }
    html { background: var(--bg); color-scheme: light; }
    body {
      margin: 0;
      min-width: 320px;
      min-height: 100vh;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(ellipse 58% 54% at 12% 0%, rgb(255 255 255 / .94), transparent 72%),
        radial-gradient(ellipse 52% 48% at 92% 10%, rgb(255 255 255 / .58), transparent 74%),
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        linear-gradient(135deg, #fafafa 0%, var(--bg) 52%, #e8eaec 100%);
      background-size: auto, auto, 32px 32px, 32px 32px, auto;
      font-family: "Space Mono", monospace;
    }

    button, select { font: inherit; }
    button { color: inherit; }
    .info select { color: #111820; background: var(--panel); }
    .info select option { color: #111820; background: #ffffff; }
    button:focus-visible, select:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }

    .noise {
      position: fixed;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: .014;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }

    .shell { width: 100%; min-width: 0; max-width: 100vw; min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }

    .topbar {
      --accent: #252a30;
      width: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 76px;
      padding: 16px clamp(18px, 4vw, 64px);
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      background: rgb(255 255 255 / .9);
      backdrop-filter: blur(18px) saturate(1.12);
      position: relative;
      z-index: 10;
    }

    .brand {
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(24px, 3vw, 40px);
      line-height: .85;
      letter-spacing: -2px;
    }
    .brand span { color: var(--accent); }

    .status { display: flex; align-items: center; gap: 20px; font-size: 11px; text-transform: uppercase; color: var(--muted); }
    .status__live { display: flex; align-items: center; gap: 8px; color: var(--ink); }
    .status__dot { width: 8px; height: 8px; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

    .cart-button {
      min-height: 44px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      text-transform: uppercase;
      transition: background .18s, color .18s, border-color .18s;
    }
    .cart-button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
    .cart-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 8px; background: var(--ink); color: #fff; font-weight: 700; }

    main {
      display: grid;
      grid-template-columns: minmax(220px, .65fr) minmax(380px, 1.5fr) minmax(260px, .8fr);
      min-height: calc(100vh - 132px);
    }

    .rail, .info {
      padding: clamp(24px, 4vw, 54px);
      color: var(--ink);
    }
    .rail { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 40px; background: #f1f2f3; }
    .info { border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 36px; background: #f8f8f9; }

    .eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .rail h1 {
      margin: 12px 0 0;
      max-width: 8ch;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(36px, 4.2vw, 66px);
      line-height: .87;
      letter-spacing: -.055em;
      margin-left: -.035em;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .select-list { display: grid; gap: 7px; }
    .select-item {
      width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
      padding: 10px 12px; border: 1px solid transparent; background: transparent; color: var(--muted); text-align: left; cursor: pointer;
      transition: transform .18s, border-color .18s, color .18s, background .18s;
    }
    .select-item:hover { color: var(--ink); transform: translateX(4px); }
    .select-item.active { color: var(--ink); border-color: var(--ink); background: rgb(24 27 31 / .035); }
    .select-item__num { font-size: 10px; color: var(--muted); }
    .select-item__name { text-transform: uppercase; font-weight: 700; }
    .select-item__rarity { font-size: 9px; text-transform: uppercase; color: var(--accent); }

    .controls-hint { margin-top: auto; display: grid; gap: 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
    .key { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--line); color: var(--ink); background: var(--panel); }
    .rail .key { color: var(--ink); }

    .viewer {
      position: relative;
      isolation: isolate;
      display: grid;
      place-items: center;
      min-height: 620px;
      overflow: hidden;
      cursor: grab;
      user-select: none;
      touch-action: none;
      color: var(--ink);
      background:
        linear-gradient(rgb(24 27 31 / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(24 27 31 / .045) 1px, transparent 1px),
        radial-gradient(ellipse 68% 62% at 50% 42%, #ffffff, #fafafa 54%, transparent 78%),
        linear-gradient(180deg, #ffffff, #eef0f2);
      background-size: 32px 32px, 32px 32px, auto, auto;
    }
    .viewer:active { cursor: grabbing; }
    .viewer::before {
      content: "";
      position: absolute;
      inset: 10% 11%;
      z-index: -2;
      border: 1px solid var(--line);
      clip-path: polygon(0 0, 27% 0, 27% 1px, 73% 1px, 73% 0, 100% 0, 100% 100%, 73% 100%, 73% calc(100% - 1px), 27% calc(100% - 1px), 27% 100%, 0 100%);
    }

    .stage-number { display: none; }

    .product {
      position: relative;
      width: min(64%, 490px);
      aspect-ratio: .86;
      display: grid;
      place-items: center;
      transform-style: preserve-3d;
      transition: transform .1s linear, filter .25s, opacity .2s;
      filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
    }
    .product.switching-out {
      pointer-events: none;
      animation: loadoutDepart 200ms ease-in both;
    }
    .product.switching-in {
      pointer-events: none;
      animation: loadoutArrive 760ms cubic-bezier(.18, .76, .18, 1) both;
    }
    .product-art { width: 100%; height: 100%; overflow: visible; }
    .product-art .fabric { fill: var(--product-color, #d9d5ca); transition: fill .3s; }
    .product-art .shade { fill: rgb(0 0 0 / .12); }
    .product-art .print { fill: var(--product-print, #111); }
    .product-art .stitch { fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 2; stroke-dasharray: 4 7; }

    .drag-hint { position: absolute; bottom: 40px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
    .drag-line { width: 54px; height: 1px; background: var(--muted); position: relative; }
    .drag-line::before, .drag-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--muted); }
    .drag-line::before { left: 0; border-left: 1px solid var(--muted); transform: rotate(-45deg); }
    .drag-line::after { right: 0; border-right: 1px solid var(--muted); transform: rotate(45deg); }

    .product-meta h2 { margin: 8px 0 8px; font-family: "Archivo Black", sans-serif; font-size: clamp(30px, 3.1vw, 56px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
    .product-meta p { color: var(--muted); font-size: 12px; line-height: 1.75; }
    .price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
    .price strong { font-family: "Archivo Black", sans-serif; font-size: 28px; }
    .stock { color: var(--accent); font-size: 9px; text-transform: uppercase; }

    .specs { display: grid; gap: 13px; margin-top: 30px; }
    .spec { display: grid; grid-template-columns: 72px 1fr; gap: 12px; font-size: 10px; text-transform: uppercase; }
    .spec dt { color: var(--muted); }
    .spec dd { margin: 0; }

    .product-sheet-button {
      width: 100%; min-height: 46px; margin-top: 24px; padding: 10px 14px;
      border: 1px solid var(--accent); background: rgb(102 123 0 / .06); color: var(--accent);
      cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase;
      transition: background .18s, color .18s, transform .18s;
    }
    .product-sheet-button:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

    .purchase { display: grid; gap: 12px; }
    .field label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
    .size-select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); }
    .equip {
      width: 100%; min-height: 58px; border: 0; background: var(--accent-bright); color: var(--accent-ink); font-weight: 700; text-transform: uppercase; cursor: pointer;
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
      transition: transform .16s, box-shadow .16s, background .16s;
    }
    .equip:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #687c13; }
    .equip:active { transform: translateY(2px); box-shadow: 0 2px 0 #687c13; }

    .ticker { min-height: 56px; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--ink); background: var(--ink); color: #fff; }
    .ticker-track { flex: none; display: flex; gap: 42px; width: max-content; animation: ticker 18s linear infinite; font-weight: 700; font-size: 11px; text-transform: uppercase; }
    .ticker-track span::before { content: "+"; margin-right: 42px; }

    .toast {
      position: fixed; right: 24px; bottom: 76px; z-index: 30; width: min(360px, calc(100vw - 48px)); padding: 18px;
      border: 1px solid var(--accent); background: var(--panel); box-shadow: var(--shadow); transform: translateY(30px); opacity: 0; pointer-events: none;
      transition: transform .25s, opacity .25s;
    }
    .toast.show { transform: none; opacity: 1; }
    .toast strong { display: block; color: var(--accent); text-transform: uppercase; font-size: 11px; }
    .toast span { display: block; margin-top: 5px; font-size: 12px; }

    .cart-panel {
      position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(440px, 100%); padding: 28px; border-left: 1px solid var(--line); background: var(--panel);
      transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.8,.22,1); box-shadow: -30px 0 90px rgb(31 37 45 / .2);
    }
    .cart-panel.open { transform: none; }
    .cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
    .cart-head h3 { margin: 0; font-family: "Archivo Black", sans-serif; font-size: 28px; text-transform: uppercase; }
    .close-cart { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
    .cart-items { display: grid; gap: 12px; padding: 22px 0; }
    .cart-empty { color: var(--muted); font-size: 12px; line-height: 1.8; }
    .cart-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px; background: var(--panel); border: 1px solid var(--line); }
    .cart-item strong { font-size: 12px; text-transform: uppercase; }
    .cart-item span { color: var(--muted); font-size: 10px; }

    .product-sheet-dialog {
      width: min(1400px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0;
      border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
    }
    .product-sheet-dialog::backdrop { background: rgb(31 37 45 / .48); backdrop-filter: blur(8px); }
    .product-sheet-dialog__bar {
      position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .94);
    }
    .product-sheet-dialog__bar h3 { margin: 4px 0 0; font-family: "Archivo Black", sans-serif; font-size: clamp(18px, 2vw, 30px); text-transform: uppercase; }
    .close-sheet { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 24px; }
    .product-sheet-dialog img { display: block; width: 100%; height: auto; }

    @keyframes ticker { to { transform: translateX(-50%); } }
    @keyframes loadoutDepart {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
      100% {
        opacity: 0;
        transform: perspective(1100px) translate3d(120px, 0, -160px);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
    }
    @keyframes loadoutArrive {
      0% {
        opacity: .55;
        transform: perspective(1100px) translate3d(-330px, 0, -180px);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
      30% {
        opacity: .82;
        transform: perspective(1100px) translate3d(-265px, 0, -122px);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
      62% {
        opacity: .96;
        transform: perspective(1100px) translate3d(-132px, 0, -42px);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
      84% {
        opacity: 1;
        transform: perspective(1100px) translate3d(-36px, 0, -8px);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
      100% {
        opacity: 1;
        transform: perspective(1100px) translate3d(0, 0, 0);
        filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24));
      }
    }

    @media (max-width: 980px) {
      main { grid-template-columns: 200px minmax(360px, 1fr); }
      .rail h1 { font-size: 32px; }
      .rail .eyebrow { font-size: 10px; letter-spacing: .1em; }
      .info { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
      .viewer { min-height: 610px; }
    }

    @media (max-width: 700px) {
      .topbar { min-height: 64px; }
      .status__live, .status > span { display: none; }
      main { display: flex; flex-direction: column; width: 100%; min-width: 0; }
      .rail, .viewer, .info { width: 100%; min-width: 0; max-width: 100vw; }
      .rail { order: 2; border-right: 0; border-top: 1px solid var(--line); padding: 24px 18px; gap: 22px; overflow: hidden; }
      .rail h1, .controls-hint { display: none; }
      .select-list { display: flex; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; padding-bottom: 8px; }
      .select-item { min-width: 190px; }
      .viewer { order: 1; min-height: 500px; }
      .viewer::before { inset: 7%; }
      .product { width: min(76%, 390px); }
      @keyframes loadoutArrive {
        0% { opacity: .55; transform: perspective(900px) translate3d(-180px, 0, -130px); filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24)); }
        30% { opacity: .82; transform: perspective(900px) translate3d(-145px, 0, -88px); filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24)); }
        62% { opacity: .96; transform: perspective(900px) translate3d(-72px, 0, -30px); filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24)); }
        84% { opacity: 1; transform: perspective(900px) translate3d(-20px, 0, -6px); filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24)); }
        100% { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0); filter: drop-shadow(0 38px 24px rgb(31 37 45 / .24)); }
      }
      .drag-hint { bottom: 22px; }
      .info { order: 3; display: flex; padding: 34px 20px; }
      .product-meta h2 { font-size: 42px; }
      .ticker { order: 4; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
      html.force-full-motion .product.switching-out { animation-duration: 200ms !important; }
      html.force-full-motion .product.switching-in { animation-duration: 760ms !important; }
    }

    .product-frame {
      display: none;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }
    .product.has-frames .product-frame { display: block; }
    .product.has-frames .product-art { display: none; }
    .product-3d-canvas {
      display: none;
      width: 100%;
      height: 100%;
      pointer-events: none;
      user-select: none;
    }
    .product.has-3d { width: min(76%, 560px); aspect-ratio: .92; filter: drop-shadow(0 34px 22px rgb(31 37 45 / .24)); }
    .product.has-3d .product-3d-canvas.is-active { display: block; }
    .product.has-3d .product-frame,
    .product.has-3d .product-art { display: none; }

    /* Product-experience refinement */
    .select-item { position: relative; overflow: hidden; grid-template-columns: 26px 12px 1fr auto; }
    .select-item.active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-bright); }
    .select-item.active::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(215 255 69 / .18), transparent); transform: translateX(-110%); animation: selectionScan .62s ease-out both; }
    .select-item__swatch { width: 12px; height: 12px; border: 1px solid rgb(24 27 31 / .22); background: var(--swatch); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .14); }
    .carousel-meta { display: none; }
    .sound-toggle { width: max-content; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-transform: uppercase; font-size: 10px; }
    .sound-toggle[aria-pressed="true"] { color: var(--ink); }

    .viewer { --ground-shift: 0px; --ground-scale: 1; }
    .product { z-index: 1; }
    .product-ground-shadow {
      position: absolute; left: 50%; bottom: 14%; z-index: -1; width: min(42%, 360px); height: 46px;
      transform: translateX(calc(-50% + var(--ground-shift))) scaleX(var(--ground-scale));
      border-radius: 50%; background: radial-gradient(ellipse, rgb(24 27 31 / .24), rgb(24 27 31 / .08) 48%, transparent 72%);
      filter: blur(9px); opacity: .74; transition: transform .14s linear, opacity .24s;
    }
    .detail-hotspots { position: absolute; right: 22px; top: 50%; z-index: 3; display: grid; gap: 8px; transform: translateY(-50%); }
    .detail-hotspots button { display: grid; grid-template-columns: 22px auto; gap: 8px; align-items: center; min-height: 34px; padding: 6px 9px; border: 1px solid transparent; background: rgb(255 255 255 / .74); color: var(--muted); backdrop-filter: blur(8px); cursor: pointer; font-size: 9px; text-transform: uppercase; transition: color .18s, border-color .18s, transform .18s; }
    .detail-hotspots button:hover { color: var(--ink); border-color: var(--line); transform: translateX(-3px); }
    .detail-hotspots button span { color: var(--ink); }

    .product-detail-button {
      width: 100%; min-height: 46px; margin-top: 24px; padding: 10px 14px; border: 1px solid var(--ink);
      background: var(--ink); color: #fff; cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase;
      transition: background .18s, color .18s, transform .18s;
    }
    .product-detail-button:hover { background: var(--accent); transform: translateY(-2px); }
    .purchase.is-unavailable .size-select { color: var(--muted); background: var(--panel-2); cursor: not-allowed; }
    .purchase.is-unavailable .equip { background: #e1e4e6; color: #535b63; box-shadow: inset 0 0 0 1px #cbd0d4; }
    .purchase.is-unavailable .equip:hover { transform: none; box-shadow: inset 0 0 0 1px #cbd0d4; }

    .mobile-purchase-dock { display: none; }
    .product-detail-dialog {
      width: min(1040px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0;
      border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
    }
    .product-detail-dialog::backdrop { background: rgb(22 26 31 / .62); backdrop-filter: blur(9px); }
    .detail-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
    .detail-dialog__bar h3 { margin: 4px 0 0; font-family: "Archivo Black", sans-serif; font-size: clamp(22px, 3vw, 36px); text-transform: uppercase; }
    .close-detail { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 24px; }
    .detail-dialog__body { display: grid; grid-template-columns: minmax(320px, 1.2fr) minmax(280px, .8fr); min-height: 560px; }
    .detail-view { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 520px; border-right: 1px solid var(--line); background: #111419; }
    .detail-view__fabric, .detail-view__print, .detail-view__construction { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .22s, transform .5s cubic-bezier(.2,.8,.2,1); }
    .detail-view__fabric { background: repeating-linear-gradient(88deg, #080a0d 0 2px, #13171b 2px 4px), repeating-linear-gradient(2deg, transparent 0 3px, rgb(255 255 255 / .035) 3px 4px); transform: scale(1.08); }
    .detail-view__print { object-fit: contain; padding: 12%; filter: drop-shadow(0 22px 34px rgb(0 0 0 / .45)); transform: scale(.92); }
    .detail-view__construction { background: linear-gradient(135deg, #12161a, #050607); }
    .detail-view__construction i { position: absolute; left: 12%; right: 12%; height: 1px; background: repeating-linear-gradient(90deg, #d0a42a 0 7px, transparent 7px 13px); box-shadow: 0 2px 0 rgb(255 255 255 / .08); transform: rotate(-8deg); }
    .detail-view__construction i:nth-child(1) { top: 34%; }
    .detail-view__construction i:nth-child(2) { top: 50%; transform: rotate(5deg); }
    .detail-view__construction i:nth-child(3) { top: 66%; transform: rotate(-3deg); }
    .detail-view[data-active-detail="fabric"] .detail-view__fabric,
    .detail-view[data-active-detail="print"] .detail-view__print,
    .detail-view[data-active-detail="construction"] .detail-view__construction { opacity: 1; transform: scale(1); }
    .detail-view__label { position: absolute; left: 18px; bottom: 18px; z-index: 2; padding: 8px 10px; background: var(--accent-bright); color: var(--accent-ink); font-size: 10px; font-weight: 700; text-transform: uppercase; }
    .detail-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: clamp(26px, 4vw, 52px); background: #f7f8f8; }
    .detail-tabs { display: grid; gap: 6px; }
    .detail-tabs button { min-height: 42px; padding: 8px 10px; border: 1px solid transparent; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font-size: 10px; text-transform: uppercase; }
    .detail-tabs button.active { border-color: var(--ink); color: var(--ink); background: rgb(24 27 31 / .035); }
    .detail-copy h4 { margin: 9px 0 12px; font-family: "Archivo Black", sans-serif; font-size: clamp(26px, 3vw, 42px); line-height: .95; text-transform: uppercase; }
    .detail-copy p { color: var(--muted); font-size: 12px; line-height: 1.75; }
    .detail-specs { display: grid; gap: 10px; margin: 0; }
    .detail-specs div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 9px; text-transform: uppercase; }
    .detail-specs dt { color: var(--muted); }
    .detail-specs dd { margin: 0; }

    @keyframes selectionScan { to { transform: translateX(110%); } }

    @media (max-width: 700px) {
      .shell { min-height: auto; grid-template-rows: auto auto auto; }
      main { min-height: 0; }
      .rail { position: relative; overflow: hidden; }
      .rail::after { content: ""; position: absolute; right: 0; top: 58px; bottom: 18px; width: 38px; pointer-events: none; background: linear-gradient(90deg, transparent, #f1f2f3 82%); }
      .select-list { scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; gap: 10px; padding-right: 44px; }
      .select-list::-webkit-scrollbar { display: none; }
      .select-item { scroll-snap-align: start; min-width: min(82vw, 260px); grid-template-columns: 26px 12px 1fr auto; }
      .carousel-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; text-transform: uppercase; }
      .carousel-pagination { color: var(--ink); font-weight: 700; }
      .detail-hotspots { right: 12px; top: auto; bottom: 54px; display: flex; transform: none; }
      .detail-hotspots button { grid-template-columns: auto; min-width: 38px; padding: 7px; font-size: 0; }
      .detail-hotspots button span { font-size: 9px; }
      .product-ground-shadow { bottom: 13%; width: 54%; height: 32px; }
      .info { gap: 30px; }
      .product-meta h2 { overflow-wrap: anywhere; }
      .ticker { min-height: 52px; }
      .mobile-purchase-dock { position: fixed; inset: auto 0 0; z-index: 35; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border-top: 1px solid var(--ink); background: rgb(248 249 249 / .96); backdrop-filter: blur(14px); transform: translateY(110%); transition: transform .24s ease; }
      .mobile-purchase-dock.is-visible { transform: none; }
      .mobile-purchase-dock > div { min-width: 0; display: grid; gap: 2px; }
      .mobile-purchase-dock span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; text-transform: uppercase; }
      .mobile-purchase-dock strong { font-family: "Archivo Black", sans-serif; font-size: 18px; }
      .mobile-purchase-dock button { min-width: 122px; min-height: 48px; border: 0; background: var(--accent-bright); color: var(--accent-ink); font-weight: 700; text-transform: uppercase; }
      .mobile-purchase-dock.is-unavailable button { background: #e1e4e6; color: #535b63; }
      .detail-dialog__body { grid-template-columns: 1fr; }
      .detail-view { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
      .detail-copy { padding: 24px 20px; }
      .product-detail-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
    }

    /* Obsidian Showroom */
    :root {
      --obsidian: #090b0f;
      --showroom-ivory: #eeeae0;
      --coordinate-gold: #b99545;
      --gallery-line: #292d33;
      --bg: var(--obsidian);
      --panel: #11151a;
      --panel-2: #1a1e24;
      --ink: #f0eee8;
      --muted: #9299a2;
      --line: var(--gallery-line);
      --grid: rgb(185 149 69 / .045);
      --accent: var(--coordinate-gold);
      --shadow: 0 30px 100px rgb(0 0 0 / .46);
    }
    html { background: var(--obsidian); color-scheme: dark; }
    body {
      background:
        radial-gradient(ellipse 52% 46% at 50% -8%, rgb(185 149 69 / .09), transparent 68%),
        radial-gradient(ellipse 36% 60% at -8% 46%, rgb(255 255 255 / .025), transparent 72%),
        linear-gradient(rgb(185 149 69 / .025) 1px, transparent 1px),
        linear-gradient(90deg, rgb(185 149 69 / .025) 1px, transparent 1px),
        var(--obsidian);
      background-size: auto, auto, 48px 48px, 48px 48px, auto;
    }
    .noise { opacity: .022; mix-blend-mode: soft-light; }
    .topbar {
      --accent: var(--coordinate-gold);
      color: #f0eee8;
      border-color: var(--gallery-line);
      background: rgb(12 15 20 / .92);
      box-shadow: 0 12px 36px rgb(0 0 0 / .22);
    }
    .brand span, .status__live, .status__dot { color: var(--coordinate-gold); }
    .status__dot { background: var(--coordinate-gold); box-shadow: 0 0 0 1px var(--coordinate-gold), 0 0 14px rgb(185 149 69 / .25); }
    .cart-button { border-color: #3a4048; }
    .cart-button:hover { background: var(--showroom-ivory); color: #101216; border-color: var(--showroom-ivory); }
    .cart-count { background: var(--showroom-ivory); color: #111318; }

    .rail {
      position: relative;
      border-color: var(--gallery-line);
      background: #0d1015;
      background-image:
        radial-gradient(circle at 20% 76%, transparent 0 80px, rgb(185 149 69 / .055) 81px 82px, transparent 83px 132px, rgb(185 149 69 / .035) 133px 134px, transparent 135px),
        linear-gradient(145deg, rgb(255 255 255 / .018), transparent 42%);
    }
    .info {
      border-color: var(--gallery-line);
      background: #11151a;
      background-image: linear-gradient(160deg, rgb(255 255 255 / .018), transparent 38%);
    }
    .rail h1, .product-meta h2, .price strong { color: #f4f1ea; }
    .eyebrow, .stock, .select-item__rarity { color: var(--coordinate-gold); }
    .select-item:hover { color: #f4f1ea; }
    .select-item.active { color: #f4f1ea; border-color: var(--coordinate-gold); background: rgb(185 149 69 / .07); }
    .select-item.active::before { background: var(--coordinate-gold); }
    .select-item.active::after { background: linear-gradient(90deg, transparent, rgb(185 149 69 / .14), transparent); }
    .select-item__swatch { border-color: #505761; }
    .key { color: #e8e5de; border-color: #3a4048; background: #161a20; }
    .sound-toggle[aria-pressed="true"], .carousel-pagination { color: var(--coordinate-gold); }

    .viewer {
      --ink: #181a1d;
      --muted: #666861;
      --line: #c8c1b4;
      color: #181a1d;
      border-inline: 1px solid #2a2d33;
      background:
        linear-gradient(rgb(185 149 69 / .11) 1px, transparent 1px),
        linear-gradient(90deg, rgb(185 149 69 / .11) 1px, transparent 1px),
        radial-gradient(ellipse 66% 58% at 50% 42%, #fffdf8 0%, #f5f1e8 54%, transparent 79%),
        radial-gradient(circle at 50% 43%, transparent 0 205px, rgb(185 149 69 / .11) 206px 207px, transparent 208px),
        linear-gradient(160deg, #f4f0e7, var(--showroom-ivory));
      background-size: 40px 40px, 40px 40px, auto, auto, auto;
      box-shadow: inset 0 0 90px rgb(54 45 27 / .07), 0 0 48px rgb(0 0 0 / .3);
    }
    .viewer::before { border-color: rgb(88 78 55 / .28); }
    .viewer::after {
      content: "X 148.22 / Y 09.04 · BAY 01";
      position: absolute; top: 20px; left: 22px; z-index: 3;
      color: #8e7338; font-size: 8px; letter-spacing: .13em; text-transform: uppercase;
      pointer-events: none;
    }
    .product-ground-shadow { background: radial-gradient(ellipse, rgb(13 15 18 / .3), rgb(13 15 18 / .1) 48%, transparent 72%); }
    .detail-hotspots button { background: rgb(238 234 224 / .8); border-color: rgb(88 78 55 / .08); }
    .detail-hotspots button:hover { border-color: var(--coordinate-gold); }

    .info select { color: #f0eee8; background: #171b21; border-color: #3a4048; }
    .info select option { color: #f0eee8; background: #171b21; }
    .price { border-color: var(--gallery-line); }
    .spec dd { color: #e6e3dc; }
    .product-detail-button { background: var(--showroom-ivory); color: #131519; border-color: var(--showroom-ivory); }
    .product-detail-button:hover { background: var(--coordinate-gold); color: #0e1013; }
    .product-sheet-button { color: #d1b46e; border-color: #77643a; background: rgb(185 149 69 / .055); }
    .product-sheet-button:hover { background: var(--coordinate-gold); color: #101216; }
    .equip { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .32), 0 0 28px rgb(215 255 69 / .08); }
    .purchase.is-unavailable .size-select, .purchase.is-unavailable .equip { background: #1a1e24; color: #707781; box-shadow: inset 0 0 0 1px #343a42; }

    .ticker { border-color: var(--coordinate-gold); background: #07090c; color: #d9d5cc; }
    .ticker-track span::before { color: var(--coordinate-gold); }
    .toast, .cart-panel { color: #f0eee8; border-color: #3a4048; background: #11151a; box-shadow: var(--shadow); }
    .cart-item { background: #161a20; border-color: #30353c; }
    .close-cart { border-color: #3a4048; }

    .product-detail-dialog { background: #0d1015; color: #f0eee8; border-color: #3a4048; }
    .detail-dialog__bar { border-color: #30353c; }
    .close-detail { color: #f0eee8; border-color: #3a4048; }
    .detail-copy {
      --ink: #181a1d;
      --muted: #666861;
      --line: #c8c1b4;
      color: #181a1d;
      background: var(--showroom-ivory);
    }
    .detail-tabs button.active { border-color: #181a1d; color: #181a1d; }
    .detail-view__label { background: var(--coordinate-gold); color: #111318; }
    .product-sheet-dialog { background: #0d1015; color: #f0eee8; border-color: #3a4048; }
    .product-sheet-dialog__bar { background: rgb(13 16 21 / .96); border-color: #30353c; }
    .close-sheet { color: #f0eee8; border-color: #3a4048; }

    .mobile-purchase-dock { color: #f0eee8; border-color: var(--coordinate-gold); background: rgb(12 15 20 / .96); }

    @media (max-width: 700px) {
      .rail::after { background: linear-gradient(90deg, transparent, #0d1015 82%); }
      .viewer::after { top: 12px; left: 14px; font-size: 7px; }
      .mobile-purchase-dock { background: rgb(12 15 20 / .96); }
      .detail-hotspots button { background: rgb(238 234 224 / .84); }
    }

    /* Obsidian Showroom — second pass */
    .topbar::after {
      content: ""; position: absolute; left: clamp(18px, 4vw, 64px); right: clamp(18px, 4vw, 64px); bottom: -1px; height: 1px;
      background: linear-gradient(90deg, transparent, rgb(185 149 69 / .5), transparent);
    }
    .rail, .info { position: relative; isolation: isolate; }
    .rail::before, .info::before {
      content: ""; position: absolute; z-index: 2; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgb(185 149 69 / .5), transparent);
      box-shadow: 0 1px 20px rgb(185 149 69 / .16);
    }
    .rail {
      box-shadow: inset -22px 0 46px rgb(0 0 0 / .22), inset 0 1px rgb(255 255 255 / .025);
      background-image:
        linear-gradient(90deg, transparent 0 97%, rgb(185 149 69 / .08) 97% 97.4%, transparent 97.4%),
        radial-gradient(circle at 20% 76%, transparent 0 80px, rgb(185 149 69 / .065) 81px 82px, transparent 83px 132px, rgb(185 149 69 / .04) 133px 134px, transparent 135px),
        linear-gradient(145deg, rgb(255 255 255 / .026), transparent 42%);
    }
    .info {
      box-shadow: inset 22px 0 46px rgb(0 0 0 / .16), inset 0 1px rgb(255 255 255 / .025);
      background-image:
        linear-gradient(90deg, rgb(185 149 69 / .06), transparent 3%),
        linear-gradient(160deg, rgb(255 255 255 / .025), transparent 38%);
    }
    .select-item { border-radius: 2px; }
    .select-item.active {
      box-shadow: inset 0 0 0 1px rgb(185 149 69 / .16), 0 10px 30px rgb(0 0 0 / .24), 0 0 24px rgb(185 149 69 / .035);
    }
    .product-meta { position: relative; }
    .product-meta::before {
      content: "OBJECT DOSSIER"; display: block; margin-bottom: 16px; color: #545b64; font-size: 8px; letter-spacing: .18em;
    }

    .viewer {
      border: 10px solid #07090c;
      background:
        linear-gradient(rgb(185 149 69 / .105) 1px, transparent 1px),
        linear-gradient(90deg, rgb(185 149 69 / .105) 1px, transparent 1px),
        radial-gradient(ellipse 48% 67% at 50% 39%, rgb(255 255 255 / .98) 0%, rgb(255 253 246 / .82) 42%, transparent 73%),
        radial-gradient(circle at 50% 43%, transparent 0 205px, rgb(185 149 69 / .12) 206px 207px, transparent 208px),
        linear-gradient(160deg, #f4f0e7, var(--showroom-ivory));
      background-size: 40px 40px, 40px 40px, auto, auto, auto;
      box-shadow: inset 0 0 120px rgb(35 29 17 / .14), inset 0 0 0 1px rgb(185 149 69 / .32), 0 0 70px rgb(0 0 0 / .5);
    }
    .viewer::before {
      inset: 9% 10%;
      border-color: rgb(103 84 43 / .32);
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / .32), 0 0 50px rgb(185 149 69 / .035);
    }
    .viewer::after { top: 17px; left: 19px; padding-left: 26px; }
    .stage-number {
      display: block; position: absolute; z-index: 0; left: 2.5%; bottom: -1.5%; pointer-events: none;
      color: rgb(185 149 69 / .075); font-family: "Archivo Black", sans-serif; font-size: clamp(92px, 13vw, 210px); line-height: .72;
      letter-spacing: -.08em; text-shadow: 0 1px rgb(255 255 255 / .34); user-select: none;
    }
    .stage-number::before {
      content: "ARCHIVE OBJECT"; position: absolute; left: .1em; bottom: calc(100% + 16px); width: max-content;
      color: rgb(103 84 43 / .54); font-family: "Space Mono", monospace; font-size: 7px; letter-spacing: .24em;
    }
    .product-ground-shadow { z-index: 0; filter: none; opacity: 1; background: none; overflow: visible; }
    .product-ground-shadow::before {
      content: ""; position: absolute; inset: 6px -6%; border-radius: 50%;
      background: radial-gradient(ellipse, rgb(13 15 18 / .34), rgb(13 15 18 / .1) 48%, transparent 72%); filter: blur(9px);
    }
    .product-ground-shadow::after {
      content: "SHOWROOM BAY / CALIBRATED LIGHT"; position: absolute; top: 52px; left: 50%; width: max-content; transform: translateX(-50%);
      color: rgb(103 84 43 / .62); font-size: 7px; letter-spacing: .18em;
    }
    .product.has-3d {
      filter: drop-shadow(0 42px 26px rgb(17 18 20 / .3)) drop-shadow(0 0 28px rgb(255 255 255 / .18));
    }
    .detail-hotspots { padding: 8px 0; border-block: 1px solid rgb(103 84 43 / .18); }
    .detail-hotspots button { box-shadow: 0 6px 18px rgb(31 27 20 / .08); }
    .drag-hint { padding: 7px 12px; background: rgb(238 234 224 / .62); backdrop-filter: blur(8px); }

    @media (max-width: 700px) {
      .viewer { border-width: 7px; }
      .stage-number { left: 3%; bottom: 1%; font-size: 104px; opacity: .78; }
      .stage-number::before { bottom: calc(100% + 10px); }
      .product-ground-shadow::after { display: none; }
      .rail::before, .info::before { left: 8%; right: 8%; }
      .product-meta::before { margin-bottom: 12px; }
      .drag-hint { padding: 5px 9px; }
    }

    .detail-hotspots { touch-action: manipulation; }
    .detail-hotspots button[aria-pressed="true"] {
      color: var(--showroom-ivory);
      border-color: var(--coordinate-gold);
      background: #11151a;
      box-shadow: 0 8px 24px rgb(0 0 0 / .18), inset 0 0 0 1px rgb(185 149 69 / .16);
      transform: translateX(-4px);
    }
    .detail-hotspots button[aria-pressed="true"] span { color: #d7ba76; }

    /* Void Chrome */
    :root {
      --void-black: #07080c;
      --smoked-silver: #aeb3be;
      --violet-reflection: #8875ff;
      --bg: var(--void-black);
      --panel: #0e1016;
      --panel-2: #171a22;
      --ink: #e7e9ef;
      --muted: #858b97;
      --line: #292d38;
      --grid: rgb(136 117 255 / .035);
      --accent: var(--violet-reflection);
      --coordinate-gold: var(--violet-reflection);
      --showroom-ivory: #dfe2e8;
      --gallery-line: #292d38;
      --shadow: 0 34px 110px rgb(0 0 0 / .62);
    }

    html { background: var(--void-black); color-scheme: dark; }
    body {
      background:
        radial-gradient(ellipse 48% 34% at 55% -8%, rgb(136 117 255 / .105), transparent 72%),
        linear-gradient(rgb(174 179 190 / .022) 1px, transparent 1px),
        linear-gradient(90deg, rgb(174 179 190 / .018) 1px, transparent 1px),
        var(--void-black);
      background-size: auto, 56px 56px, 56px 56px, auto;
    }
    .noise { opacity: .028; mix-blend-mode: screen; }

    .topbar {
      --accent: var(--violet-reflection);
      color: #eceef4;
      border-color: #252935;
      background: rgb(8 10 15 / .96);
      box-shadow: 0 18px 46px rgb(0 0 0 / .38), inset 0 -1px rgb(255 255 255 / .018);
      backdrop-filter: blur(20px) saturate(.82);
    }
    .topbar::after {
      background: linear-gradient(90deg, transparent, rgb(136 117 255 / .62), transparent);
      box-shadow: 0 0 18px rgb(136 117 255 / .14);
    }
    .brand span, .status__live { color: #c5c9d2; }
    .status__dot {
      color: var(--violet-reflection);
      background: var(--violet-reflection);
      box-shadow: 0 0 0 1px var(--violet-reflection), 0 0 16px rgb(136 117 255 / .34);
    }
    .cart-button { color: #c6cad3; border-color: #363b48; }
    .cart-button:hover { color: #08090d; border-color: #d9dce3; background: #d9dce3; }
    .cart-count { color: #090a0e; background: #c9cdd6; }

    .rail {
      background-color: #0b0d12;
      background-image:
        linear-gradient(90deg, transparent 0 97%, rgb(136 117 255 / .14) 97% 97.3%, transparent 97.3%),
        radial-gradient(circle at 18% 74%, transparent 0 82px, rgb(174 179 190 / .055) 83px 84px, transparent 85px 136px, rgb(136 117 255 / .05) 137px 138px, transparent 139px),
        linear-gradient(145deg, rgb(255 255 255 / .026), transparent 45%);
      border-color: #292d38;
      box-shadow: inset -24px 0 54px rgb(0 0 0 / .34), inset 0 1px rgb(255 255 255 / .025);
    }
    .info {
      background-color: #0e1016;
      background-image:
        linear-gradient(90deg, rgb(136 117 255 / .055), transparent 3%),
        linear-gradient(160deg, rgb(255 255 255 / .025), transparent 42%);
      border-color: #292d38;
      box-shadow: inset 24px 0 54px rgb(0 0 0 / .22), inset 0 1px rgb(255 255 255 / .025);
    }
    .rail::before, .info::before {
      background: linear-gradient(90deg, transparent, rgb(136 117 255 / .48), transparent);
      box-shadow: 0 1px 20px rgb(136 117 255 / .13);
    }
    .rail h1, .product-meta h2, .price strong { color: #eef0f5; }
    .eyebrow, .stock, .select-item__rarity { color: #a99dff; }
    .select-item:hover { color: #eff1f5; }
    .select-item.active {
      color: #f2f3f7;
      border-color: var(--violet-reflection);
      background: rgb(136 117 255 / .075);
      box-shadow: inset 0 0 0 1px rgb(174 179 190 / .055), 0 12px 34px rgb(0 0 0 / .32), 0 0 26px rgb(136 117 255 / .05);
    }
    .select-item.active::before { background: var(--violet-reflection); }
    .select-item.active::after { background: linear-gradient(90deg, transparent, rgb(136 117 255 / .16), transparent); }
    .select-item__swatch { border-color: #555b68; }
    .key { color: #d5d8df; border-color: #393e4b; background: #151820; }
    .sound-toggle[aria-pressed="true"], .carousel-pagination { color: #b4aaff; }
    .product-meta::before { content: "OBJECT SCAN / ACTIVE"; color: #626978; }

    .viewer {
      --ink: #111319;
      --muted: #525763;
      --line: #7d828d;
      color: #111319;
      border: 10px solid #06070a;
      background:
        linear-gradient(rgb(76 70 121 / .12) 1px, transparent 1px),
        linear-gradient(90deg, rgb(76 70 121 / .12) 1px, transparent 1px),
        radial-gradient(ellipse 52% 68% at 50% 38%, #e8eaf0 0%, #c7cad1 47%, transparent 75%),
        linear-gradient(154deg, #c7cad1 0%, #aeb2bb 52%, #8f949e 100%);
      background-size: 44px 44px, 44px 44px, auto, auto;
      box-shadow: inset 0 0 130px rgb(16 18 27 / .22), inset 0 0 0 1px rgb(201 205 216 / .38), 0 0 74px rgb(0 0 0 / .58);
    }
    .viewer::before {
      border-color: rgb(51 54 65 / .42);
      box-shadow: inset 0 0 0 1px rgb(240 242 247 / .24), 0 0 42px rgb(136 117 255 / .045);
    }
    .viewer::after {
      content: "VC-01 / OBJECT FIELD / 148.22";
      color: #5f52a8;
      text-shadow: 0 1px rgb(255 255 255 / .25);
    }
    .stage-number {
      color: rgb(67 56 137 / .105);
      text-shadow: 0 1px rgb(255 255 255 / .26);
    }
    .stage-number::before { content: "VOID CHROME / OBJECT"; color: rgb(56 48 111 / .62); }
    .product.has-3d {
      filter: drop-shadow(0 44px 28px rgb(9 10 14 / .4)) drop-shadow(8px -5px 18px rgb(136 117 255 / .095));
    }
    .product-ground-shadow::before {
      background: radial-gradient(ellipse, rgb(9 10 14 / .42), rgb(9 10 14 / .13) 48%, transparent 72%);
    }
    .product-ground-shadow::after { content: "CHAMBER / OPTICAL CALIBRATION"; color: rgb(72 62 137 / .66); }
    .detail-hotspots { border-color: rgb(62 55 105 / .24); }
    .detail-hotspots button {
      color: #555b66;
      border-color: rgb(63 66 78 / .18);
      background: rgb(199 202 209 / .84);
      box-shadow: 0 8px 22px rgb(23 25 32 / .12);
      backdrop-filter: blur(10px) saturate(.8);
    }
    .detail-hotspots button:hover { color: #111319; border-color: var(--violet-reflection); }
    .detail-hotspots button span { color: #292d36; }
    .detail-hotspots button[aria-pressed="true"] {
      color: #eceef4;
      border-color: var(--violet-reflection);
      background: #11131a;
      box-shadow: 0 9px 26px rgb(8 9 13 / .34), inset 0 0 0 1px rgb(136 117 255 / .2), 0 0 16px rgb(136 117 255 / .08);
    }
    .detail-hotspots button[aria-pressed="true"] span { color: #b6adff; }
    .drag-hint { color: #555a65; background: rgb(185 189 199 / .65); }

    .info select { color: #e7e9ef; background: #171a22; border-color: #373c49; }
    .info select option { color: #e7e9ef; background: #171a22; }
    .price { border-color: #2c303a; }
    .spec dd { color: #d8dbe2; }
    .product-detail-button { color: #090a0e; border-color: #c8ccd5; background: #c8ccd5; }
    .product-detail-button:hover { color: #f0f1f5; border-color: var(--violet-reflection); background: #171a23; }
    .product-sheet-button { color: #b8b0ff; border-color: #554c8c; background: rgb(136 117 255 / .05); }
    .product-sheet-button:hover { color: #f1f2f6; background: #292340; }
    .purchase.is-unavailable .size-select, .purchase.is-unavailable .equip { color: #6f7581; background: #191c23; box-shadow: inset 0 0 0 1px #343946; }

    .ticker { color: #c7cad2; border-color: #4d447c; background: #06070a; }
    .ticker-track span::before { color: #998bff; }
    .toast, .cart-panel { color: #e9ebf0; border-color: #363b47; background: #0e1016; }
    .cart-item { background: #151820; border-color: #2d323e; }
    .close-cart { border-color: #373c49; }

    .product-detail-dialog, .product-sheet-dialog { color: #e9ebf0; border-color: #383d49; background: #0b0d12; }
    .detail-dialog__bar, .product-sheet-dialog__bar { border-color: #303541; background: rgb(11 13 18 / .97); }
    .close-detail, .close-sheet { color: #e9ebf0; border-color: #393e4b; }
    .detail-copy {
      --ink: #171920;
      --muted: #5f6470;
      --line: #a3a7b0;
      color: #171920;
      background: #c7cad1;
    }
    .detail-tabs button.active { color: #f0f1f5; border-color: var(--violet-reflection); background: #181a23; }
    .detail-view__label { color: #f2f3f6; background: #6253b5; }

    .mobile-purchase-dock {
      color: #e9ebf0;
      border-color: #6255a5;
      background: rgb(9 11 16 / .97);
    }

    @media (max-width: 700px) {
      .topbar { padding: 12px 14px; gap: 12px; }
      .status { min-width: 0; margin-left: auto; gap: 0; }
      .cart-button { min-width: 0; padding: 8px 9px; font-size: 0; }
      .cart-button::before { content: "INV"; font-size: 9px; letter-spacing: .08em; }
      .cart-count { margin-left: 6px; font-size: 10px; }
      .rail::after { background: linear-gradient(90deg, transparent, #0b0d12 82%); }
      .viewer { border-width: 7px; }
      .detail-hotspots {
        left: auto;
        right: 12px;
        display: grid;
        grid-template-columns: repeat(3, 40px);
        width: 136px;
        gap: 8px;
      }
      .detail-hotspots button { width: 40px; min-width: 0; background: rgb(199 202 209 / .88); }
      .mobile-purchase-dock { background: rgb(9 11 16 / .97); }
    }