/* [FBP] fbp-web · direction: quiet night sky · compact 4-box storefront, sentence case
   fbp-allow: too-many-spacings, too-many-font-sizes, too-many-radii, offscale-spacing */
:root {
  --shop-bg: oklch(9% .012 270);
  --shop-panel: oklch(14% .016 270);
  --shop-panel-raised: oklch(18% .018 270);
  --shop-line: oklch(100% 0 0 / 10%);
  --shop-line-strong: oklch(100% 0 0 / 18%);
  --shop-copy: oklch(96% .004 270);
  --shop-muted: oklch(75% .012 270);
  --shop-dim: oklch(58% .014 270);
  --shop-accent: oklch(76% .14 285);
  --shop-accent-soft: oklch(76% .14 285 / 14%);
  --shop-accent-deep: oklch(54% .15 285);
  /* Spacing rhythm: every padding, gap and margin resolves to this 4/8 scale. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  /* Concentric radii: card 16 − 8px card padding = 8px media, controls 12. */
  --shop-radius-card: 16px;
  --shop-radius-control: 12px;
  --shop-radius-inner: 8px;
  --shop-radius-pill: 999px;
  --shop-shadow: 0 20px 64px oklch(0% 0 0 / 24%), 0 0 0 1px oklch(100% 0 0 / 5%);
  --shop-ease: cubic-bezier(.22, 1, .36, 1);
  --shop-spring: cubic-bezier(.16, 1, .3, 1);
  --shop-spring-bounce: cubic-bezier(.16, 1, .3, 1);
  --shop-fast: 150ms;
  --shop-base: 260ms;
  --shop-sans: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --shop-display: "Cabinet Grotesk", "General Sans", ui-sans-serif, system-ui, sans-serif;
  --shop-danger: oklch(64% .21 25);
  --shop-danger-soft: oklch(64% .21 25 / 14%);
  --shop-success: oklch(72% .15 155);
  color-scheme: dark;
}

html { background: var(--shop-bg); overflow-x: clip; }
body.shop-surface {
  min-width: 0;
  min-height: 100dvh;
  overflow-x: clip;
  background: transparent;
  color: var(--shop-copy);
  font-family: var(--shop-sans);
  isolation: isolate;
}
body.shop-surface *,
body.shop-surface *::before,
body.shop-surface *::after { box-sizing: border-box; }
body.shop-surface a { color: inherit; text-decoration: none; }
body.shop-surface button,
body.shop-surface input,
body.shop-surface select { font: inherit; }
body.shop-surface h1,
body.shop-surface h2,
body.shop-surface h3 { margin: 0; color: var(--shop-copy); font-family: var(--shop-display); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
body.shop-surface h1 { max-width: 14ch; font-size: clamp(1.75rem, 1.5rem + 2vw, 2.75rem); letter-spacing: -.025em; text-wrap: balance; }
body.shop-surface p { margin: 0; color: var(--shop-muted); }

.background-shader,
.galaxy-backdrop,
.dream-haze,
.grain { position: fixed; inset: 0; pointer-events: none; }
.background-shader { z-index: 0; width: 100%; height: 100%; opacity: .55; transition: opacity 520ms var(--shop-ease); }
.background-shader:not([data-ready="true"]) { opacity: 0; }
.galaxy-backdrop { z-index: -1; background:
  radial-gradient(90% 72% at 88% -8%, oklch(38% .11 292 / 24%), transparent 66%),
  radial-gradient(72% 52% at 0% 100%, oklch(32% .08 230 / 15%), transparent 70%),
  linear-gradient(180deg, oklch(10% .012 266 / 88%), oklch(12% .016 272 / 82%) 48%, oklch(14% .018 282 / 78%)); }
.dream-haze { z-index: 0; overflow: hidden; mix-blend-mode: screen; opacity: .35; contain: strict; }
.dream-haze::before,
.dream-haze::after { content: ""; position: absolute; width: min(62vw, 820px); aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.dream-haze::before { left: -18vw; top: 5vh; background: radial-gradient(circle, rgba(98, 70, 230, .14) 0%, rgba(120, 65, 190, .06) 40%, rgba(120, 65, 190, .015) 60%, transparent 72%); animation: haze-drift-a 26s cubic-bezier(.22, 1, .36, 1) infinite alternate; }
.dream-haze::after { right: -20vw; top: 28vh; background: radial-gradient(circle, rgba(47, 143, 220, .11) 0%, rgba(177, 85, 200, .05) 42%, rgba(177, 85, 200, .015) 62%, transparent 72%); animation: haze-drift-b 34s cubic-bezier(.22, 1, .36, 1) infinite alternate; }
@keyframes haze-drift-a { to { transform: translate3d(14vw, 9vh, 0) scale(1.12); } }
@keyframes haze-drift-b { to { transform: translate3d(-12vw, -8vh, 0) scale(1.08); } }
.grain { z-index: 2; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--shop-radius-pill);
  background: var(--shop-accent);
  color: oklch(15% .02 285) !important;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--shop-fast) var(--shop-ease);
}
.skip-link:focus { opacity: 1; pointer-events: auto; }

.shop-header { position: sticky; top: 0; z-index: 10; padding: 16px 0; min-width: 0; }
.shop-nav {
  min-width: 0;
  position: relative;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 24px);
  min-height: 56px;
  padding: 6px 8px 6px clamp(14px, 2.2vw, 20px);
  border-radius: var(--shop-radius-pill);
  --g-fill: oklch(17% .022 285 / .58);
  background: var(--g-fill);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .22), inset 0 -1px 0 oklch(0% 0 0 / .35), inset 1px 0 0 oklch(100% 0 0 / .10), inset -1px 0 0 oklch(100% 0 0 / .10), inset 0 0 0 1px oklch(100% 0 0 / .04), inset 0 12px 24px -12px oklch(100% 0 0 / .08), 0 8px 32px oklch(0% 0 0 / .28), 0 1px 2px oklch(0% 0 0 / .20);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  isolation: isolate;
  overflow: clip;
}
.shop-nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(140px 70px at var(--mx, 50%) var(--my, -10%), oklch(100% 0 0 / .22), transparent 70%); opacity: 0; transition: opacity 260ms cubic-bezier(.32, .72, 0, 1); }
@media (hover: hover) and (pointer: fine) { .shop-nav:hover::before { opacity: 1; } }
.shop-nav > * { position: relative; z-index: 1; }
.wordmark { min-height: 36px; display: inline-flex; align-items: center; font-size: clamp(15px, 2.2vw, 18px); font-weight: 600; line-height: 1; letter-spacing: -.03em; text-decoration: none; font-family: var(--shop-sans); white-space: nowrap; flex-shrink: 0; }
.shop-nav-links { min-width: 0; display: flex; align-items: center; gap: clamp(4px, 1.5vw, 16px); font-size: 14px; }
.shop-nav-links a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(8px, 1.5vw, 12px);
  border-radius: var(--shop-radius-pill);
  color: oklch(74% .01 285);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--shop-fast) cubic-bezier(.22, 1, .36, 1), transform var(--shop-fast) var(--shop-spring);
}
.shop-nav-links a:hover { background-color: oklch(100% 0 0 / 5%); color: var(--shop-copy); transform: translateY(-1px); text-decoration: none; }
.shop-nav-links a:active { transform: scale(.95); }
.shop-nav-links a[aria-current="page"] { color: var(--shop-copy); background-color: oklch(100% 0 0 / 8%); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 12%); text-decoration: none; }
.shop-main { position: relative; z-index: 1; padding-block: 48px 48px; }
.shop-page { display: grid; gap: 48px; }
.page-heading { display: grid; gap: 12px; max-width: 720px; }
.page-heading p { max-width: 60ch; font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.eyebrow { color: var(--shop-accent) !important; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
/* Load entrance: spring-physics rise with subtle scale. */
.load-reveal { animation: shop-load-in 760ms var(--shop-spring-bounce, var(--shop-spring)) both; animation-delay: calc(var(--i, 0) * 75ms); }
.page-heading.load-reveal { --i: 0; }
@keyframes shop-load-in { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.97); } to { opacity: 1; transform: none; } }

.surface {
  position: relative;
  isolation: isolate;
  background: oklch(14% .016 270 / 88%);
  border-radius: var(--shop-radius-card);
  box-shadow: var(--shop-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), oklch(82% .14 285 / 14%), transparent 68%);
  opacity: 0;
  transition: opacity 280ms var(--shop-ease);
}
@media (hover: hover) and (pointer: fine) { .surface:hover::before { opacity: 1; } }
.surface > * { position: relative; z-index: 1; }

/* Compact catalog: one grid, four equal boxes, media row capped at 160px. */
.catalog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.box {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 160px) 1fr;
  overflow: clip;
  padding: 8px;
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--shop-fast) var(--shop-ease), transform 280ms var(--shop-spring);
}
a.box { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .box:hover { border-color: var(--shop-line-strong); background-color: oklch(17% .018 270 / 92%); transform: translate3d(0, -5px, 0) scale(1.012); }
  a.box:hover { border-color: oklch(76% .14 285 / 55%); box-shadow: var(--shop-shadow), 0 22px 48px -16px oklch(76% .14 285 / 45%), inset 0 1px 0 oklch(100% 0 0 / 16%); }
}
.box:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 2px; }
.box:active, .box.is-pressed { transform: translate3d(0, 2px, 0) scale(.985); border-color: oklch(76% .14 285 / 55%); box-shadow: var(--shop-shadow), 0 10px 28px -12px oklch(76% .14 285 / 45%); transition-duration: 75ms; }
.box-media {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: clip;
  border-radius: calc(var(--shop-radius-card) - 8px);
  background: oklch(12% .014 272);
}
.box-media picture { display: block; width: 100%; height: 100%; min-height: 0; background: oklch(12% .014 272); }
.box-media img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  background: oklch(12% .014 272);
  transition: transform 420ms var(--shop-spring), filter 320ms var(--shop-ease);
}
@media (hover: hover) and (pointer: fine) { .box:hover .box-media img { transform: scale(1.06); filter: brightness(1.04) contrast(1.02); } }
.box-media .chip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-media-soon {
  background:
    radial-gradient(70% 46% at 50% 30%, oklch(30% .032 282 / 90%), transparent 70%),
    radial-gradient(120% 100% at 50% 110%, oklch(10% .012 270), transparent 72%),
    linear-gradient(180deg, oklch(11% .015 272), oklch(7.5% .01 270));
}
.soon-glyph {
  font-family: var(--shop-sans);
  font-size: 3.5rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.04em;
  color: oklch(46% .04 282);
  text-shadow: 0 1px 0 oklch(100% 0 0 / .12), 0 0 28px oklch(76% .14 285 / .32), 0 14px 36px oklch(0% 0 0 / .6);
  user-select: none;
  transition: transform 320ms var(--shop-spring), color 240ms var(--shop-ease);
}
@media (hover: hover) and (pointer: fine) { .is-soon:hover .soon-glyph { color: oklch(68% .1 285); transform: translate3d(0, -3px, 0) scale(1.05); } }
.box-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 4px 4px;
}
.box-title { margin-top: 4px; color: var(--shop-copy); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.box-body-soon { align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 24px 8px; }
.box-body-soon .box-title { margin-top: 0; color: var(--shop-muted); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.box-note { margin: 0; color: var(--shop-dim) !important; font-size: .8125rem; line-height: 1.5; }
.box-kicker { color: var(--shop-muted) !important; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; }
.hoodie-facts { color: var(--shop-muted) !important; font-size: .875rem; line-height: 1.5; }
.price { color: var(--shop-copy); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0; }
.chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 24px);
  padding: 0 10px;
  border-radius: var(--shop-radius-pill);
  background: oklch(96% .004 270 / 92%);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 30%);
  color: oklch(22% .02 270);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-live {
  gap: 6px;
  background: oklch(96% .004 270 / 95%);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 34%), inset 0 0 0 1px oklch(76% .14 285 / 42%);
}
.chip-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(62% .19 152);
  box-shadow: 0 0 8px oklch(62% .19 152 / .85);
}
.is-soon { background: oklch(13% .012 270 / 88%); }
.is-live {
  border-color: oklch(76% .14 285 / 28%);
  background:
    radial-gradient(140% 90% at 50% -20%, oklch(76% .14 285 / 14%), transparent 60%),
    var(--shop-panel);
}

.btn {
  --btn-bg: oklch(20% .024 285);
  --btn-bg-hover: oklch(25% .026 285);
  --btn-fg: var(--shop-copy);
  --btn-ring: var(--shop-accent-deep);
  --btn-gloss: oklch(100% 0 0 / .22);
  --btn-hi: oklch(100% 0 0 / .32);
  --btn-shade: oklch(0% 0 0 / .24);
  --btn-shadow: 0 3px 0 oklch(0% 0 0 / .55), 0 6px 14px -4px oklch(0% 0 0 / .45);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 9999px;
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--btn-bg);
  background-image: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 0%), oklch(100% 0 0 / .16), transparent 70%), linear-gradient(180deg, var(--btn-gloss), transparent 62%);
  box-shadow: inset 0 0 0 1px var(--btn-ring), inset 0 1.5px 0 var(--btn-hi), inset 0 -1.5px 0 var(--btn-shade), var(--btn-shadow);
  background-clip: padding-box;
  transition: transform 240ms var(--shop-spring), color var(--shop-fast) var(--shop-ease), filter var(--shop-fast) var(--shop-ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 22%, oklch(100% 0 0 / .05) 40%, oklch(100% 0 0 / .26) 50%, oklch(100% 0 0 / .05) 60%, transparent 78%);
  transform: translate3d(-32%, 0, 0);
  transition: opacity 220ms var(--shop-ease), transform 380ms var(--shop-spring);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { background-color: var(--btn-bg-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0, -2px, 0) scale(1.015); }
  .btn-primary:hover { transform: translate3d(0, -2px, 0) scale(1.02); }
  .btn:hover::before { opacity: 1; transform: translate3d(32%, 0, 0); }
  .btn:hover > [aria-hidden] { transform: translate3d(3px, -2px, 0) scale(1.08); }
}
.btn > [aria-hidden] { transition: transform 240ms var(--shop-spring-bounce, var(--shop-spring)); }
.btn:active, .btn.is-pressed { transform: translate3d(0, 2px, 0) scale(.97); box-shadow: inset 0 0 0 1px var(--btn-ring), inset 0 2px 5px oklch(0% 0 0 / .34), 0 1px 0 var(--btn-ring); transition-duration: 65ms; }
.btn:active > [aria-hidden], .btn.is-pressed > [aria-hidden] { transform: translate3d(1px, 1px, 0) scale(.95); }
.btn:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 2px; }
.btn-primary { --btn-bg: var(--shop-accent); --btn-bg-hover: oklch(80% .14 285); --btn-fg: oklch(15% .02 285); --btn-gloss: oklch(100% 0 0 / .38); --btn-hi: oklch(100% 0 0 / .54); --btn-shade: oklch(0% 0 0 / .34); --btn-shadow: 0 4px 0 var(--shop-accent-deep), 0 8px 14px oklch(0% 0 0 / .42), 0 18px 32px -8px var(--accent-glow, oklch(76% .14 285 / .48)); color: oklch(15% .02 285) !important; }
.btn-primary:hover { --btn-shadow: 0 6px 0 var(--shop-accent-deep), 0 12px 20px oklch(0% 0 0 / .44), 0 26px 44px -8px var(--accent-glow, oklch(76% .14 285 / .62)); }
.btn-primary:active, .btn-primary.is-pressed { background-color: oklch(72% .14 285); --btn-shadow: inset 0 2px 6px oklch(0% 0 0 / .34), 0 1px 0 var(--shop-accent-deep), 0 8px 18px -6px oklch(76% .14 285 / .45); }
.btn-primary[data-loading] { position: relative; pointer-events: none; color: transparent !important; }
.btn-primary[data-loading]::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid oklch(100% 0 0 / .25); border-top-color: currentColor; color: var(--btn-fg); animation: btn-spin .8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-quiet { --btn-bg: transparent; --btn-bg-hover: oklch(20% .024 285); --btn-fg: oklch(74% .01 285); --btn-ring: transparent; --btn-gloss: transparent; --btn-hi: transparent; --btn-shade: transparent; --btn-shadow: 0 0 0 0 transparent; }
.btn-quiet:hover { color: var(--shop-copy); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn[disabled]:hover { background-color: var(--btn-bg); transform: none; }
@media (max-width: 420px) { .selection-actions, .form-actions { gap: 12px; align-items: center; } .selection-actions .btn, .form-actions .btn { padding-inline: 16px; } }

.selection-layout,
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px; align-items: start; }
.form-stack { display: grid; gap: 16px; }
.form { display: grid; gap: 24px; padding: 24px; }
.form h2 { font-size: 1.25rem; }
.form-header { display: grid; gap: 8px; }
.form-header p { font-size: .9375rem; }
.selection-product { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--shop-line); }
.selection-product img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--shop-radius-inner); background: oklch(20% .012 270); }
.selection-product-copy { display: grid; gap: 4px; }
.selection-product-copy strong { font-size: 1rem; }
.selection-product-copy span { color: var(--shop-muted); font-size: .875rem; }
.fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.fieldset legend { padding: 0; color: var(--shop-copy); font-size: .9375rem; font-weight: 600; }
.size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.size-choice { min-height: 48px; border: 0; border-radius: var(--shop-radius-control); color: var(--shop-copy); background-color: var(--shop-panel-raised); box-shadow: inset 0 0 0 1px var(--shop-line-strong); cursor: pointer; font-weight: 600; transition: background-color var(--shop-fast) var(--shop-ease), transform 220ms var(--shop-spring), box-shadow 220ms var(--shop-ease), color var(--shop-fast) var(--shop-ease); }
@media (hover: hover) and (pointer: fine) { .size-choice:hover { background-color: oklch(23% .018 270); transform: translateY(-2px); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 26%), 0 8px 18px -8px oklch(0% 0 0 / 45%); } }
.size-choice:active { background-color: oklch(20% .016 270); transform: scale(.95); transition-duration: 70ms; }
.size-choice:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 2px; }
.size-choice.is-active,
.size-choice[aria-pressed="true"] { color: var(--shop-copy); background-color: var(--shop-accent-soft); transform: translateY(-1px) scale(1.02); box-shadow: inset 0 0 0 1.5px var(--shop-accent), 0 10px 24px -10px oklch(76% .14 285 / 45%); }
.quantity-control { display: flex; align-items: center; gap: 12px; }
.quantity-control button { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: var(--shop-copy); background-color: var(--shop-panel-raised); box-shadow: inset 0 0 0 1px var(--shop-line-strong); cursor: pointer; font-size: 1.25rem; transition: background-color var(--shop-fast) var(--shop-ease), transform 200ms var(--shop-spring), box-shadow 200ms var(--shop-ease); }
@media (hover: hover) and (pointer: fine) { .quantity-control button:hover:not(:disabled) { background-color: oklch(24% .022 278); transform: translateY(-2px) scale(1.04); box-shadow: inset 0 0 0 1px var(--shop-accent), 0 8px 18px -6px oklch(76% .14 285 / 35%); } }
.quantity-control button:active:not(:disabled) { background-color: oklch(20% .016 270); transform: scale(.92); transition-duration: 60ms; }
.quantity-control button:disabled { opacity: .4; cursor: not-allowed; }
.quantity-control output { display: inline-block; min-width: 48px; color: var(--shop-copy); font-size: 1.125rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; transition: transform 200ms var(--shop-spring), color 200ms var(--shop-ease); }
.num-bump { animation: value-pop 320ms var(--shop-spring-bounce, var(--shop-spring)); }
@keyframes value-pop { 0% { transform: scale(1); } 40% { transform: translateY(-2px) scale(1.12); color: var(--shop-accent); } 100% { transform: scale(1); } }
.selection-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 8px; }
.recap { position: sticky; top: 24px; display: grid; gap: 16px; padding: 24px; }
.recap h2 { font-size: 1.125rem; }
.summary-product { display: flex; align-items: center; gap: 12px; }
.summary-product img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--shop-radius-inner); background: oklch(20% .012 270); }
.summary-product div { display: grid; gap: 4px; }
.summary-product strong { font-size: .875rem; }
.summary-product span { color: var(--shop-muted); font-size: .8125rem; }
.summary-lines { display: grid; gap: 8px; padding-top: 4px; }
.summary-line { display: flex; justify-content: space-between; gap: 16px; color: var(--shop-muted); font-size: .875rem; }
.summary-line strong { color: var(--shop-copy); font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--shop-line); color: var(--shop-copy); font-size: 1.05rem; font-weight: 600; }
.summary-note { padding-top: 16px; border-top: 1px solid var(--shop-line); color: var(--shop-dim) !important; font-size: .8125rem; line-height: 1.55; }

.provider-group { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.provider-group legend { color: var(--shop-copy); font-size: 1.25rem; font-weight: 600; }
.provider-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.provider-option { position: relative; min-height: 0; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px; border-radius: var(--shop-radius-card); background-color: var(--shop-panel-raised); box-shadow: inset 0 0 0 1px var(--shop-line-strong); cursor: pointer; transition: background-color var(--shop-fast) var(--shop-ease), transform 240ms var(--shop-spring), box-shadow 240ms var(--shop-ease); }
@media (hover: hover) and (pointer: fine) { .provider-option:hover { background-color: oklch(23% .018 270); transform: translateY(-2px); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 26%), 0 12px 26px -12px oklch(0% 0 0 / 50%); } }
.provider-option:active { background-color: oklch(20% .016 270); transform: scale(.985); transition-duration: 75ms; }
.provider-option:focus-within { box-shadow: inset 0 0 0 1.5px var(--shop-accent), 0 0 0 3px oklch(76% .14 285 / 18%); }
.provider-option:has(input:checked) { background-color: var(--shop-accent-soft); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--shop-accent), 0 14px 32px -14px oklch(76% .14 285 / 42%); }
.provider-option input { position: absolute; width: 24px; height: 24px; margin: 0; opacity: 0; }
.provider-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--shop-radius-inner); color: var(--shop-copy); background: oklch(100% 0 0 / 10%); transition: transform 240ms var(--shop-spring), background-color 200ms var(--shop-ease), color 200ms var(--shop-ease); }
.provider-option:has(input:checked) .provider-icon { background: oklch(76% .14 285 / 24%); color: var(--shop-accent); transform: scale(1.06); }
.provider-icon svg { width: 24px; height: 24px; }
.provider-copy { display: grid; gap: 4px; }
.provider-copy strong { color: var(--shop-copy); font-size: 1rem; }
.provider-copy span { color: var(--shop-muted); font-size: .8125rem; line-height: 1.45; }
.receipt { max-width: 640px; display: grid; gap: 24px; padding: 24px; }
.surface[hidden] { display: none !important; }
.provider-option:not(:has(input:checked)) .provider-selected { visibility: hidden; }
.provider-selected { color: var(--shop-accent) !important; font-weight: 600; }
.provider-help { color: var(--shop-dim) !important; font-size: .8125rem; }
.address-intro { display: grid; gap: 8px; padding: 16px; border-radius: var(--shop-radius-inner); background: oklch(76% .14 285 / 8%); box-shadow: inset 0 0 0 1px oklch(76% .14 285 / 18%); }
.address-intro strong { color: var(--shop-copy); font-size: .875rem; }
.address-intro p { color: var(--shop-muted); font-size: .8125rem; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--shop-muted); font-size: .8125rem; font-weight: 600; }
.field label span { color: var(--shop-dim); font-weight: 400; }
.input { min-width: 0; min-height: 48px; width: 100%; padding: 0 12px; border: 0; border-radius: var(--shop-radius-control); color: var(--shop-copy); background: oklch(8% .012 270); box-shadow: inset 0 0 0 1px var(--shop-line-strong), inset 0 1px 2px oklch(0% 0 0 / 20%); outline: 0; transition: background-color var(--shop-fast) var(--shop-ease), box-shadow 200ms var(--shop-ease), transform 200ms var(--shop-spring); }
.input:hover { background: oklch(11% .014 270); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 26%), inset 0 1px 2px oklch(0% 0 0 / 20%); }
.input:focus-visible { transform: translateY(-1px); background: oklch(10% .015 275); box-shadow: inset 0 0 0 1.5px var(--shop-accent), 0 0 0 3px oklch(76% .14 285 / 18%), 0 8px 20px -8px oklch(76% .14 285 / 28%); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--shop-danger), 0 0 0 3px var(--shop-danger-soft); animation: field-shake 260ms var(--shop-ease); }
@keyframes field-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
select.input { appearance: auto; }
.error { min-height: 0; color: var(--shop-danger) !important; font-size: .75rem; }
.error[hidden] { display: none; }
.status { min-height: 24px; color: var(--shop-muted) !important; font-size: .875rem; }
.status[data-tone="error"] { color: var(--shop-danger) !important; }
.status[data-tone="success"] { color: var(--shop-success) !important; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.form-actions .btn-primary { min-width: 220px; }
.fine-print { color: var(--shop-dim) !important; font-size: .75rem; line-height: 1.55; }

.success-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--shop-accent); background: var(--shop-accent-soft); box-shadow: inset 0 0 0 1px oklch(76% .14 285 / 35%), 0 0 28px -4px oklch(76% .14 285 / 45%); animation: mark-pop 680ms var(--shop-spring-bounce, var(--shop-spring)) both; }
.success-mark svg { width: 28px; height: 28px; stroke-dasharray: 32; stroke-dashoffset: 32; animation: check-draw 520ms 220ms var(--shop-ease) forwards; }
@keyframes mark-pop { from { opacity: 0; transform: scale(.65) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
.receipt h1 { max-width: 16ch; font-size: clamp(1.75rem, 1.5rem + 2vw, 2.75rem); }
.success-ref { color: var(--shop-muted); font-family: var(--shop-mono); font-size: .8125rem; overflow-wrap: anywhere; }
.success-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.shop-footer { position: relative; z-index: 1; padding-bottom: 32px; }
.shop-footer p { max-width: 65ch; color: var(--shop-dim); font-size: .75rem; }

@media (max-width: 1100px) {
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .box { grid-template-rows: minmax(0, 160px) 1fr; }
}
@media (max-width: 900px) {
  .selection-layout, .checkout-layout { grid-template-columns: 1fr; }
  .recap { position: static; }
}
@media (max-width: 760px) {
  .shop-nav { gap: 8px; padding: 4px 8px 4px 16px; min-height: 52px; }
  .shop-nav-links { gap: 4px; }
  .shop-nav-links a { min-height: 36px; padding: 0 10px; font-size: 13px; }
  .shop-nav > .btn-primary { height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 640px) {
  .shop-main { padding-block: 32px 48px; }
  .shop-page { gap: 32px; }
  .catalog { grid-template-columns: 1fr; }
  .box { grid-template-rows: minmax(0, 180px) 1fr; }
  .form, .recap { padding: 16px; }
  .provider-options { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions .btn, .form-actions .btn-primary { width: 100%; min-width: 0; }
  .selection-actions { flex-direction: column-reverse; align-items: stretch; }
  .selection-actions .btn { width: 100%; }
}
@media (max-width: 380px) {
  .shop-nav { gap: 4px; padding: 4px 4px 4px 12px; min-height: 48px; }
  .wordmark { font-size: 14px; }
  .shop-nav-links { gap: 2px; }
  .shop-nav-links a { min-height: 34px; padding: 0 6px; font-size: 12px; }
  .shop-nav > .btn-primary { height: 34px; padding: 0 8px; font-size: 12px; gap: 4px; }
}
@media (max-width: 260px) {
  .shop-nav-links a:first-child { display: none; }
  .shop-nav { gap: 4px; padding: 4px 4px 4px 8px; min-height: 40px; }
  .wordmark { font-size: 12px; min-height: 28px; }
  .shop-nav-links a { min-height: 28px; padding: 0 6px; font-size: 11px; }
  .shop-nav > .btn-primary { height: 28px; padding: 0 8px; font-size: 11px; gap: 2px; }
  .shop-nav > .btn-primary span[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .dream-haze::before, .dream-haze::after, .soon-glyph, .chip-live::before, .shop-header, .success-mark, .success-mark svg, .num-bump { animation: none; stroke-dashoffset: 0; }
  .load-reveal { animation: none; transform: none; opacity: 1; }
  .box:hover, .size-choice:hover, .provider-option:hover, .quantity-control button:hover:not(:disabled), .input:focus-visible { transform: none; }
  .box:hover .box-media img { transform: none; filter: none; }
  .box:active, .size-choice:active, .provider-option:active { transform: none; }
  .background-shader { display: none !important; }
}