/* THE HOODIE MODE. Two panes on desktop, the object on the right because that is what
   is being bought; one column on a phone with the object on top, 300 tall, so the first
   paint is the thing and the first scroll is the controls.

   Ingredient pre-flight: no hairline borders (light and shadow do the separation, the
   components layer rule), smallest radius 12, every target 44, no uppercase tracking,
   one accent (the tier chip when it is good is a filled lit object, the warning is a
   second, deliberately different, amber). */

.hoodie { position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 18px; background: var(--panel-2, #1a1b1f); box-shadow: var(--e-2); min-width: 0; }
.hoodie-frame-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hoodie .lbl, .hoodie-preview-label { font-size: 13px; color: #c3c0b8; }
.hoodie-previews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; position: sticky; top: 0; z-index: 3; padding-block: 8px; background: var(--panel-2, #1a1b1f); }
.hoodie-preview { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; height: clamp(220px, 42dvh, 380px); }
.hoodie-view { position: relative; min-height: 0; height: 100%; border-radius: 12px; background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.06), transparent 60%); overflow: hidden; }
.hoodie .stage { min-height: 0; height: 100%; aspect-ratio: auto; border-radius: 12px; box-shadow: none; background: rgba(0,0,0,0.15); }
.hoodie .hoodie-editor { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
.hoodie-control-group { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hoodie-checkout { grid-column: 1 / -1; display: grid; gap: 12px; }
.hoodie .hoodie-row > .lbl, .hoodie .hoodie-field > span, .hoodie .tier-lines { color: #c3c0b8; }
/* A TRANSLUCENT LIFT IS A GROUND NOBODY MEASURED.
   This rule used to read `background: rgba(255,255,255,0.04)`. Over --panel-2
   (#232428) that composites to rgb(43.8, 44.76, 48.6), and --dim measures
   4.79:1 there against the house floor of 4.8. The craft ladder failed it at
   every width on 2026-09-07: "free shipping in the US" is the price subline on
   a LIVE $24.99 product.
   The token was not wrong. --dim is 5.38:1 on --panel-2, which is what the
   token block records. The 4% white lift created a FOURTH ground that no
   measurement covered, and 0.58 of headroom is not enough to absorb one.
   So this uses --panel-3, which is a real, opaque, measured ground: --dim is
   4.90:1 on it. The surface looks the same (the lift composited to #2C2D31,
   panel-3 is #2A2B30) and it is now a colour the contrast test can see. */
.hoodie .hoodie-buy { box-shadow: none; background: var(--panel-3); }
.hoodie-control-group button, .hoodie-field input, .hoodie-field select { scroll-margin-top: 430px; }
@media (max-width: 760px) {
  .hoodie { padding: 12px; gap: 12px; }
  .hoodie-previews { gap: 8px; }
  .hoodie-preview { height: clamp(170px, 32dvh, 240px); }
  .hoodie .hoodie-editor { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .hoodie-view .hoodie-hint { font-size: 11px; left: 6px; bottom: 6px; }
  .hoodie-control-group button, .hoodie-field input, .hoodie-field select { scroll-margin-top: 270px; }
}

.hoodie-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hoodie-view.relief-view-flat::after { content: 'No 3D on this device. The emblem preview on the left is exact.'; position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--dim); }
.hoodie-view .hoodie-hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #c3c0b8; pointer-events: none; } /* measured 5.9:1 on the viewport ground; --dim read 4.50 there */

.hoodie-editor { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.hoodie-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hoodie-row > .lbl { flex-basis: 100%; font-size: 13px; color: var(--dim); }

/* Frame and colour pickers: 44px targets, aria-checked lit. */
.frame-pick, .swatch { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--panel-3, #24262b); color: var(--ink, #f2f2f2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); font: inherit; }
.frame-pick svg { width: 22px; height: 22px; fill: currentColor; }
.frame-pick[aria-checked="true"], .swatch[aria-checked="true"] { background: var(--accent, #FEC710); color: var(--accent-ink, #17130a); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(254,199,16,0.28); }
.frame-pick:focus-visible, .swatch:focus-visible, .stage:focus-visible, .chip:focus-visible, .hoodie-editor button:focus-visible, .hoodie-editor input:focus-visible, .hoodie-editor select:focus-visible { outline: 2px solid var(--accent, #FEC710); outline-offset: 2px; }
.swatch { width: 44px; padding: 0; position: relative; }
.swatch i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.swatch[aria-checked="true"] i { box-shadow: inset 0 0 0 2px var(--accent-ink, #17130a); }
.swatch[disabled] { opacity: 0.35; cursor: not-allowed; }

/* The stage: art under chrome, the whole thing focusable for the keyboard. */
.stage { position: relative; width: 100%; aspect-ratio: 11 / 10; border-radius: 16px; background: var(--panel-2, #1a1b1f); box-shadow: var(--e-1, 0 6px 18px rgba(0,0,0,0.35)); overflow: hidden; touch-action: none; user-select: none; cursor: default; }
.stage > div { position: absolute; inset: 0; }
.stage > div > svg { display: block; width: 100%; height: 100%; }
.stage .emblem-chrome { pointer-events: none; }

/* Layer controls */
.hoodie-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
.hoodie-field > span { font-size: 13px; color: var(--dim); }
.hoodie-field input, .hoodie-field select { height: 44px; border-radius: 12px; border: 0; padding: 0 14px; background: var(--panel-3, #24262b); color: var(--ink, #f2f2f2); font: inherit; font-size: 16px; }
.hoodie-editor .chip { min-height: 44px; }
.upload-chip { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-chip:focus-within { outline: 2px solid var(--accent, #FEC710); outline-offset: 2px; }
.hoodie-err { color: #ff8a8a; font-size: 13px; min-height: 1.2em; }

/* The tier chip: the one lit object in the status row. */
.tier { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 12px; font-weight: 700; }
.tier[data-tone="good"] { background: var(--accent, #FEC710); color: var(--accent-ink, #17130a); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.tier[data-tone="warn"] { background: #f0a234; color: #1b1203; }
.tier[data-tone="wait"] { background: var(--panel-3, #24262b); color: var(--dim); }
.tier-lines { margin: 6px 0 0; padding: 0; list-style: none; color: var(--dim); font-size: 14px; }
.tier-lines li + li { margin-top: 4px; }

.hoodie-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2, #1a1b1f); box-shadow: var(--e-1, 0 6px 18px rgba(0,0,0,0.35)); }
.hoodie-buy .price { font-weight: 800; font-size: 20px; }
.hoodie-buy .price small { display: block; font-weight: 500; font-size: 13px; color: var(--dim); }
.hoodie-buy .buy { height: 44px; padding: 0 22px; border-radius: 12px; border: 0; font: inherit; font-weight: 800; background: var(--accent, #FEC710); color: var(--accent-ink, #17130a); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 18px rgba(254,199,16,0.28); }
.hoodie-buy .buy[disabled] { cursor: wait; opacity: 0.85; }
.hoodie-orders { font-size: 14px; color: var(--dim); min-height: 1.2em; word-break: break-word; }

@media (prefers-reduced-motion: no-preference) {
  .tier { transition: background-color 180ms ease, color 180ms ease; }
}