/* NC Academy team store — "The Rotation" */
@property --m { syntax: '<length>'; inherits: true; initial-value: 40px; }

:root {
  --navy: #0b1d33;
  --navy-2: #12304f;
  --night: #07121f;
  --caro: #68abe4;
  --caro-2: #8cc0ec;
  --caro-ink: #1c64a6;
  --ice: #e3f0fb;
  --chalk: #f1f5f9;
  --line: #d9e3ee;
  --muted: #56677a;
  --err: #c2273f;
  --r: 20px;
  --head: 64px;
  --fd: 'Anybody', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --fb: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fm: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .75, .15, 1);
}
@media (max-width: 759px) { :root { --head: 58px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 12px); }
html.locked { overflow: hidden; }
body { margin: 0; background: #fff; color: var(--navy); font: 400 16px/1.5 var(--fb); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
input, select { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--caro); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 420px) { .wide-only { display: none; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: #fff; color: var(--navy); padding: 12px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 12px; }
.mono { font: 500 11.5px/1.35 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font: 800 14.5px/1 var(--fd); font-stretch: 112%; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.btn-caro { background: var(--caro); color: var(--navy); }
.btn-caro:hover { background: var(--caro-2); }
.btn-line { box-shadow: inset 0 0 0 2px currentColor; color: var(--navy); }
.btn-line:hover { background: rgba(11, 29, 51, .08); }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 12.5px; }
.btn:disabled { opacity: .55; }
.btn.busy { opacity: .75; pointer-events: none; }
.linkish { color: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 60; background: var(--navy); color: #fff; transition: box-shadow .3s; }
.top.scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(3, 10, 20, .28); }
.top-in { height: var(--head); display: flex; align-items: center; gap: 12px; max-width: 1480px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 36px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; }
.brand-logo { height: 42px; width: auto; flex: none; }
.logo-txt { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--caro); color: var(--navy); font: 900 16px var(--fd); }
.brand-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-txt b { font: 900 16px/1 var(--fd); font-stretch: 118%; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.brand-txt small { font-size: 9.5px; color: var(--caro); white-space: nowrap; }
.topnav { display: none; }
.top-act { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ib { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background-color .2s; }
.ib:hover { background: rgba(255, 255, 255, .09); }
.ib svg { width: 22px; height: 22px; }
.ib-menu .glyph { width: 26px; height: 26px; }
.bagbtn { height: 44px; margin-left: 4px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--caro); color: var(--navy); display: flex; align-items: center; gap: 8px; font: 800 13px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s; }
.bagbtn:hover { background: var(--caro-2); }
.bag-i { display: grid; }
.bag-i svg { width: 21px; height: 21px; }
.cnt { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 12.5px/1 var(--fd); }
.cnt span { display: block; }
.cnt.zero { background: rgba(11, 29, 51, .22); color: var(--navy); }
@media (max-width: 420px) { .bag-t { display: none; } .bagbtn { padding-left: 11px; } .brand-txt small { display: none; } .brand-logo { height: 36px; } .brand-txt b { font-size: 13px; font-stretch: 108%; } .top-in { gap: 6px; } .top-act { gap: 0; } }
/* The full department row needs 1300px now that it carries the limited-time link; narrower screens use the menu. */
@media (min-width: 760px) and (max-width: 1299px) { .topnav { display: flex; margin-left: auto; } .topnav a[data-p] { display: none; } .topnav .tn-kit, .topnav .tn-ltd { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--caro); font: 700 14px/1 var(--fb); } .topnav .tn-ltd { color: #fff; } .top-act { margin-left: 8px; } }
@media (min-width: 1300px) {
  .topnav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .topnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 999px; font: 600 14px/1 var(--fb); color: rgba(255, 255, 255, .8); transition: color .2s, background-color .2s; }
  .topnav a:hover, .topnav a.on { color: #fff; background: rgba(255, 255, 255, .08); }
  .topnav a.near { color: #fff; box-shadow: inset 0 -2px 0 var(--caro); border-radius: 0; }
  .topnav .tn-kit { color: var(--caro); font-weight: 700; margin-right: 6px; }
  .topnav .tn-ltd { color: #fff; font-weight: 700; }
  .top-act { margin-left: 8px; }
  .ib-menu { display: none; }
}
.glyph { display: block; }
.glyph rect { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .9; }
.glyph path { stroke: currentColor; stroke-width: 2.2; }
.glyph path.al { stroke-width: 1; opacity: .55; stroke-dasharray: 2 2; }
.glyph circle { fill: currentColor; opacity: .6; }
.glyph circle.on { fill: var(--caro); opacity: 1; }

/* department menu */
.menu { position: absolute; top: calc(100% + 8px); right: clamp(8px, 3vw, 36px); width: min(400px, calc(100vw - 16px)); background: #102a47; color: #fff; border-radius: 22px; box-shadow: 0 30px 60px rgba(3, 10, 20, .45); border: 1px solid rgba(255, 255, 255, .08); }
.menu-in { padding: 18px; }
.menu-in > .mono { color: var(--caro); padding: 2px 6px 10px; }
.menu-list a { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px; border-radius: 14px; font: 700 16px var(--fb); }
.menu-list a:hover { background: rgba(255, 255, 255, .07); }
.menu-list .mn { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; font: 900 15px var(--fd); }
.menu-list .glyph { width: 26px; height: 26px; color: rgba(255, 255, 255, .7); }
.menu-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.menu-more a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-weight: 600; font-size: 14px; }
.menu-more a:hover { background: rgba(255, 255, 255, .14); }
.tn-ltd::before, .mm-ltd::before, .chip-ltd::before { content: ''; flex: none; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #e2566e; box-shadow: 0 0 0 3px rgba(226, 86, 110, .22); }

/* ---------- hero: the court ---------- */
.hero { position: relative; background: var(--navy); color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: clip; }
.hero[data-o="h"] { --cw: min(100%, max(760px, min(calc((100svh - var(--head) - 170px) * 2), 1360px))); padding: 44px clamp(24px, 4vw, 64px) 40px; }
.hero[data-o="v"] { --cw: min(100%, 520px); padding: 14px 16px 34px; }
.fig-top, .fig-bot { width: var(--cw); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--caro); }
.fig-top { padding-bottom: 16px; }
.fig-bot { padding-top: 16px; color: rgba(255, 255, 255, .55); }
.fig-top .mono { color: var(--caro); white-space: nowrap; }
.hero[data-o="v"] .fig-top .mono { font-size: 10.5px; }

.court { position: relative; width: var(--cw); container-type: inline-size; z-index: 1;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.11 0 0 0 0 0.2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--caro);
  box-shadow: 0 40px 90px rgba(2, 8, 16, .45); }
.court[data-o="h"] { aspect-ratio: 2 / 1; }
.court[data-o="v"] { aspect-ratio: 1 / 2; }
.court > * { --m: calc(100cqi / 18); }
.court[data-o="v"] > * { --m: calc(100cqi / 9); }
.court-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.court-svg .zone { fill: rgba(11, 29, 51, .07); }
.court-svg .ln { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: square; stroke-dasharray: 1; }
.court-svg .ext { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 6; }
.court-svg .net-sh { fill: rgba(11, 29, 51, .2); }
.court-svg .net-band { fill: #fff; }
.court-svg .post { fill: var(--navy); stroke: #fff; stroke-width: 5; }
.court-svg .ant { fill: #e2566e; stroke: #fff; stroke-width: 3; }

/* far court: the headline painted on the floor */
.far { position: absolute; left: 0; top: 0; width: 50%; height: 100%; container-type: inline-size; padding: calc(var(--m) * .62) calc(var(--m) * .72); display: flex; flex-direction: column; z-index: 2; }
.court[data-o="v"] .far { width: 100%; height: 50%; padding: calc(var(--m) * .55) calc(var(--m) * .6); }
.eyebrow { color: rgba(11, 29, 51, .78); font-size: max(10px, 2.1cqi); }
.h1 { margin-top: calc(var(--m) * .2); font: italic 900 17cqi/.84 var(--fd); font-stretch: 122%; letter-spacing: -.012em; text-transform: uppercase; color: var(--navy); }
.court[data-o="v"] .h1 { font-size: 22.5cqi; margin-top: calc(var(--m) * .28); }
.h1 .l { display: block; overflow: hidden; padding: .02em .08em .05em 0; margin-bottom: -.05em; }
.h1 .l > span { display: inline-block; }
.h1 .rep { color: #fff; -webkit-text-stroke: max(2px, .028em) var(--navy); paint-order: stroke fill; }
.far-more { margin-top: auto; max-width: 64cqi; }
.ctas .txtlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 800 12.5px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: rgba(11, 29, 51, .35); }
.ctas .txtlink svg { width: 16px; height: 16px; }
.ctas .txtlink:hover { text-decoration-color: var(--navy); }
.far-cta { display: none; }
.court[data-o="v"] .far-cta { display: block; position: absolute; z-index: 3; left: calc(var(--m) * .6); top: calc(33.34% + var(--m) * .42); }
.far-cta .btn { min-height: 46px; padding: 0 18px; font-size: 13px; }
.sub { font: 500 clamp(15px, 3.1cqi, 19px)/1.45 var(--fb); color: rgba(11, 29, 51, .86); max-width: 30ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.court[data-o="v"] .far-more { display: none; }
.hero-mob { display: none; }
.hero[data-o="v"] .hero-mob { display: block; width: var(--cw); padding-top: 18px; }
.hero[data-o="v"] .hero-mob .sub { color: rgba(255, 255, 255, .86); font-size: 16px; }
.hero[data-o="v"] .hero-mob .btn-line { color: #fff; }
.hero[data-o="v"] .hero-mob .btn-navy { background: var(--caro); color: var(--navy); }
.hero[data-o="v"] .hero-mob .ctas .btn { flex: 1 1 auto; }

/* the six spots */
.pos { position: absolute; left: var(--x); top: var(--y); --d: calc(var(--m) * 1.78); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); z-index: 3; border-radius: 50%; }
.court[data-o="v"] .pos { --d: calc(var(--m) * 1.8); }
.pos-in { position: absolute; inset: 0; display: block; transition: transform .35s var(--ease); }
.disc { position: absolute; inset: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 calc(var(--m) * .1) calc(var(--m) * .28) rgba(11, 29, 51, .3), 0 0 0 calc(var(--m) * .045) rgba(255, 255, 255, .55); }
.disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 calc(var(--m) * .3) calc(var(--m) * .6) rgba(11, 29, 51, .35); opacity: 0; transition: opacity .35s; }
.disc img { width: 86%; height: 86%; object-fit: contain; clip-path: circle(47% at 50% 50%); }
.num { position: absolute; left: -6%; top: -6%; width: 36%; height: 36%; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 900 calc(var(--d) * .2)/1 var(--fd); box-shadow: 0 0 0 max(2px, calc(var(--m) * .05)) var(--caro); }
.lab { position: absolute; top: calc(100% + var(--m) * .14); left: 50%; width: max-content; max-width: calc(var(--m) * 2.9); text-wrap: balance; transform: translateX(-50%); text-align: center; font: 800 max(10.5px, calc(var(--m) * .25))/1.05 var(--fd); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.pos:hover .pos-in, .pos:focus-visible .pos-in { transform: translateY(-5px); }
.pos:hover .disc::after, .pos:focus-visible .disc::after { opacity: 1; }
.pos:focus-visible { outline-offset: 6px; }
.pos-empty .num { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px rgba(11, 29, 51, .4); position: absolute; left: 32%; top: 32%; }

/* serve */
.serve { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 4; pointer-events: none; --bd: max(26px, calc(var(--m) * .54)); }
.court[data-o="v"] .serve { --bd: max(20px, calc(var(--m) * .6)); }
.ball { position: absolute; width: var(--bd); height: var(--bd); left: calc(var(--bd) / -2); top: calc(var(--bd) / -2); }
.ball svg { width: 100%; height: 100%; display: block; }
.ball-sh { position: absolute; width: calc(var(--bd) * 1.25); height: calc(var(--bd) * .62); left: calc(var(--bd) * -.45); top: calc(var(--bd) * .12); border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 29, 51, .55), rgba(11, 29, 51, 0)); opacity: .55; }
.serve-hit { position: absolute; left: var(--x); top: var(--y); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; z-index: 5; cursor: pointer; }
.serve-hit:focus-visible { outline-offset: 0; }
.serve .ball { transition: translate .25s var(--ease); }
.serve-hit:hover + .serve .ball { translate: 0 -4px; }
@media (prefers-reduced-motion: reduce) { .serve-hit { display: none; } }
.land-ring { position: absolute; left: var(--x); top: var(--y); width: calc(var(--m) * 1.1); height: calc(var(--m) * 1.1); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 2; }
.dim-side { position: absolute; left: -34px; top: 0; bottom: 0; width: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--caro); }
.dim-side i { flex: 1; width: 9px; border-top: 1.5px solid rgba(104, 171, 228, .6); background: linear-gradient(90deg, rgba(104, 171, 228, .6), rgba(104, 171, 228, .6)) center / 1.5px 100% no-repeat; }
.dim-side i:last-child { border-top: 0; border-bottom: 1.5px solid rgba(104, 171, 228, .6); }
.dim-side b { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px var(--fm); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1060px) { .dim-side { display: none; } }

/* limited-time bar above the court */
.ltd-bar { position: relative; z-index: 2; width: var(--cw); display: flex; align-items: center; gap: 14px; min-height: 60px; margin-bottom: 18px; padding: 8px; border-radius: 999px; background: #10263f; box-shadow: inset 0 0 0 1px rgba(104, 171, 228, .34), 0 14px 34px rgba(2, 8, 16, .35); color: #fff; transition: background-color .25s, box-shadow .25s; }
.ltd-bar:hover { background: #142e4c; box-shadow: inset 0 0 0 1px rgba(104, 171, 228, .7), 0 14px 34px rgba(2, 8, 16, .35); }
.ltd-bar-disc { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--caro); }
.ltd-bar-disc img { width: 90%; height: 90%; object-fit: contain; clip-path: circle(55% at 50% 50%); }
.ltd-bar-t { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.ltd-bar-t .mono { display: inline-flex; align-items: center; gap: 8px; color: var(--caro); white-space: nowrap; }
.ltd-bar-t .mono i, .ltd-flag i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e2566e; box-shadow: 0 0 0 3px rgba(226, 86, 110, .22); }
.ltd-bar-t b { font: 800 16px/1.15 var(--fd); font-stretch: 112%; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltd-bar-lead { flex: 1; min-width: 16px; align-self: center; border-bottom: 2px dotted rgba(104, 171, 228, .42); margin: 2px 2px 0; }
.ltd-bar-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--caro); color: var(--navy); font: 800 13px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s; }
.ltd-bar-go svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.ltd-bar:hover .ltd-bar-go { background: var(--caro-2); }
.ltd-bar:hover .ltd-bar-go svg { transform: translateX(3px); }
/* the bar keeps clear of the net post that stands above the court */
.hero.has-ltd[data-o="h"] { --cw: min(100%, max(760px, min(calc((100svh - var(--head) - 232px) * 1.88), 1360px))); }
.hero[data-o="h"] .ltd-bar { margin-bottom: calc(var(--cw) * .03); }
.hero[data-o="v"] .ltd-bar { border-radius: 24px; gap: 12px; margin-bottom: 14px; padding: 9px; }
.hero[data-o="v"] .ltd-bar-t { flex: 1; flex-direction: column; align-items: flex-start; gap: 5px; }
.hero[data-o="v"] .ltd-bar-t .mono { font-size: 10.5px; }
.hero[data-o="v"] .ltd-bar-t b { font-size: 14.5px; white-space: normal; text-wrap: balance; }
.hero[data-o="v"] .ltd-bar-lead { display: none; }
.hero[data-o="v"] .ltd-bar-go { padding: 0; width: 44px; height: 44px; }
.hero[data-o="v"] .go-t { display: none; }

/* intro: hold the first frame until the script starts the animation */
html.intro .hero .court, html.intro .hero .fig-top, html.intro .hero .fig-bot, html.intro .hero .hero-mob, html.intro .hero .ltd-bar { opacity: 0; }

/* ---------- shared type ---------- */
.h2 { font: 900 clamp(34px, 5vw, 64px)/.92 var(--fd); font-stretch: 118%; letter-spacing: -.012em; text-transform: uppercase; overflow-wrap: break-word; }
.h3 { font: 900 clamp(24px, 2.8vw, 34px)/1 var(--fd); font-stretch: 116%; text-transform: uppercase; letter-spacing: -.005em; }
.fig { color: var(--caro-ink); }
.kit .fig, .coll-top .fig { color: var(--caro); }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--navy); font: 800 12.5px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s, color .2s; }
.more svg { width: 16px; height: 16px; }
.more:hover { background: var(--navy); color: #fff; }
.more-lt { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); color: #fff; }
.more-lt:hover { background: #fff; color: var(--navy); }

/* ---------- limited time ---------- */
.ltd { position: relative; background: var(--chalk); padding: clamp(56px, 7vw, 104px) 0; overflow: clip; }
.ltd-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 30px; padding-bottom: 14px; margin-bottom: clamp(48px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.ltd-flag { display: inline-flex; align-items: center; gap: 10px; color: var(--caro-ink); white-space: nowrap; }
.ltd-spec { color: var(--muted); text-align: right; }
/* order-by and delivery-by dates with the countdown, across the top of the feature */
.ltd.has-due .ltd-cap { margin-bottom: 18px; }
.ltd-due { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(52px, 5vw, 68px); border-radius: var(--r); background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1px rgba(104, 171, 228, .34), 0 24px 54px rgba(11, 29, 51, .2); }
.due-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
.due-d { min-width: 0; padding: 20px 16px 18px 20px; }
.due-d + .due-d { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
.due-d dt { display: flex; align-items: center; gap: 9px; color: var(--caro); white-space: nowrap; }
.due-d dt i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e2566e; box-shadow: 0 0 0 3px rgba(226, 86, 110, .3); }
.due-d dd { margin: 10px 0 0; display: grid; gap: 7px; }
.due-d dd b { font: italic 900 30px/.95 var(--fd); font-stretch: 116%; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
.due-d dd span { font: 500 14px/1.35 var(--fb); color: rgba(255, 255, 255, .8); }
.due-clock { padding: 16px 20px 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.due-h { color: var(--caro); }
.due-units { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; will-change: transform; }
.due-u { display: grid; justify-items: center; gap: 7px; padding: 11px 4px 10px; border-radius: 12px; background: var(--navy-2); box-shadow: inset 0 0 0 1px rgba(104, 171, 228, .16); contain: layout paint; }
.due-u b { font: italic 900 32px/1 var(--fd); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.due-u small { font: 500 10px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--caro); }
.ltd-due.done .due-u b { color: rgba(255, 255, 255, .55); }
@media (min-width: 760px) {
  .ltd-due { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .due-d { padding: 26px 24px 24px 30px; }
  .due-d dd b { font-size: clamp(34px, 3.4vw, 46px); }
  .due-d dd span { font-size: 15px; }
  .due-clock { display: flex; flex-direction: column; justify-content: center; padding: 22px 28px 22px 30px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
  .due-units { grid-auto-columns: 66px; gap: 10px; }
  .due-u b { font-size: 34px; }
}
.ltd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: center; }
/* the stage: a corner of the court with the net along its left edge and the attack line 3 m off it */
.ltd-stage { position: relative; aspect-ratio: 1; --dw: 82%; --dx: 11%; --dy: 9%;
  background: radial-gradient(80% 70% at 56% 46%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%), var(--caro);
  box-shadow: 0 34px 80px rgba(11, 29, 51, .22); }
.ltd-court { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 5px #fff; background: linear-gradient(90deg, transparent 10px, rgba(11, 29, 51, .16) 10px 22px, transparent 22px), linear-gradient(90deg, rgba(11, 29, 51, .07) 0 33.33%, transparent 33.33%); }
/* net band and posts past both sidelines, attack line with one extension dash outside each */
.ltd-court::before { content: ''; position: absolute; left: 0; top: -20px; bottom: -20px; width: 10px; background: #fff; }
.ltd-court::after { content: ''; position: absolute; left: calc(33.33% - 2.5px); top: -17px; bottom: -17px; width: 5px; background: linear-gradient(#fff 0 10px, transparent 10px 17px, #fff 17px calc(100% - 17px), transparent calc(100% - 17px) calc(100% - 10px), #fff calc(100% - 10px)); }
.ltd-post { position: absolute; left: -6px; top: -31px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 4px #fff; }
.ltd-post.b { top: auto; bottom: -31px; }
.ltd-disc { position: absolute; z-index: 1; left: var(--dx); top: var(--dy); width: var(--dw); aspect-ratio: 1; border-radius: 50%; }
.ltd-plate { position: absolute; inset: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 18px 44px rgba(11, 29, 51, .3), 0 0 0 9px rgba(255, 255, 255, .45); transition: transform .45s var(--ease); }
.ltd-plate img { width: 80%; height: 80%; object-fit: contain; clip-path: circle(62% at 50% 50%); }
.ltd-disc:hover .ltd-plate { transform: translateY(-6px); }
img.img-off { visibility: hidden; }
.ltd-disc:focus-visible { outline-offset: 10px; border-radius: 50%; }
.ltd-cw-tag { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: var(--navy); color: #fff; font: 800 13px/1 var(--fd); font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 3px var(--caro); }
.ltd-stage.rv .ltd-disc { transform: translateY(26px) scale(.9); transition: transform .9s var(--ease) .12s; }
.ltd-stage.rv.seen .ltd-disc { transform: none; }
.ltd-info.rv { --d: 120ms; }
.ltd-aud { color: var(--caro-ink); }
.ltd .ltd-h { margin-top: 10px; font-size: clamp(30px, 3.7vw, 54px); font-stretch: 112%; }
.nw { white-space: nowrap; }
.ltd-price { margin-top: 16px; font: italic 900 44px/1 var(--fd); font-stretch: 118%; }
.ltd-price s { font-size: .55em; color: var(--muted); margin-right: 4px; }
.ltd-buy { margin-top: 28px; display: grid; gap: 22px; min-height: 250px; align-content: start; }
.ltd-buy .sk { margin: 0; height: 64px; background: #e2e9f1; }
.ltd-buy .sk-tall { height: 98px; }
.ltd-buy .sk-btn { height: 52px; width: min(100%, 300px); border-radius: 999px; }
.ltd-buy .opt-f .lbl { margin-bottom: 10px; }
.ltd-cws { display: flex; flex-wrap: wrap; gap: 10px; }
.ltd-cw { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 5px 20px 5px 5px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 650 15px/1 var(--fb); color: var(--navy); transition: box-shadow .15s; }
.ltd-cw img { width: 48px; height: 48px; object-fit: contain; border-radius: 11px; }
.ltd-cw i { width: 28px; height: 28px; margin: 0 4px 0 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 29, 51, .25); }
.ltd-cw:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--navy); }
.ltd-cw[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--navy); }
.ltd-cw:disabled { opacity: .4; }
.ltd-act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; }
@media (max-width: 1099px) { .ltd-buy .chips-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ltd-add { min-width: 250px; }
.ltd-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 800 12.5px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--caro); }
.ltd-more svg { width: 16px; height: 16px; flex: none; }
.ltd-more:hover { text-decoration-color: var(--navy); }
.ltd-rest { margin-top: clamp(48px, 6vw, 80px); }
.ltd-rest .opt-head .h3 { margin-top: 0; }
@media (max-width: 599px) {
  .ltd-cap { min-height: 24px; }
  .ltd-spec { font-size: 10.5px; }
  .ltd-price { font-size: 38px; margin-top: 14px; }
  .ltd-cws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltd-act { flex-direction: column; align-items: stretch; }
  .ltd-add { min-width: 0; }
  .ltd-more { align-self: center; }
}
@media (min-width: 600px) { .ltd-stage { aspect-ratio: 5 / 4; --dw: 64%; --dx: 26%; --dy: 10%; } }
@media (min-width: 900px) {
  .ltd-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(44px, 5vw, 84px); }
}

/* ---------- team kit ---------- */
.kit { position: relative; background: var(--navy); color: #fff; padding: clamp(64px, 8vw, 112px) 0 clamp(64px, 8vw, 104px); border-top: 1px solid rgba(255, 255, 255, .06); }
.kit::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(104, 171, 228, .5), transparent); }
.kit-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.kit-copy .h2 { margin-top: 14px; }
.lede { margin-top: 18px; font-size: clamp(16px, 1.45vw, 19px); color: rgba(255, 255, 255, .8); max-width: 36ch; }
.kit-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.kit-price { font: italic 900 46px/1 var(--fd); font-stretch: 118%; color: var(--caro); }
.kit-lay { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(clamp(16px, 4vw, 48px) * -1); padding: 0 clamp(16px, 4vw, 48px) 6px; }
.kit-lay::-webkit-scrollbar { display: none; }
.kit-lay li { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kp { aspect-ratio: 1; background: #fff; border-radius: 18px; display: grid; place-items: center; }
.kp img { width: 88%; height: 88%; object-fit: contain; }
.kn { color: var(--caro); }
.kt { font: 600 14px/1.3 var(--fb); color: #fff; }
.kt em { display: block; font-style: normal; font-weight: 500; color: rgba(255, 255, 255, .6); font-size: 13px; }
@media (min-width: 900px) {
  .kit-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .kit-lay { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 22px 16px; }
}

/* roster */
.roster { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 28px; }
.roster-head .h3 { margin-top: 10px; }
.note { margin-top: 8px; color: rgba(255, 255, 255, .68); font-size: 15px; }
.roster-grid { display: grid; gap: 6px; grid-template-columns: 46px repeat(var(--gems, 5), minmax(0, 1fr)); grid-auto-rows: 52px; min-height: 120px; }
.roster-grid .loading { grid-column: 1 / -1; color: rgba(255, 255, 255, .5); align-self: center; }
.rc { grid-column: var(--g); grid-row: var(--a); min-width: 0; display: flex; align-items: center; justify-content: center; }
.rc-corner { grid-column: 1; grid-row: 1; }
.rc-age { font: italic 900 22px/1 var(--fd); font-stretch: 115%; color: #fff; }
.rc-age small { font-size: 12px; color: rgba(255, 255, 255, .5); margin-left: 1px; }
.rc-gem { flex-direction: column; gap: 4px; font: 500 10px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.rc-gem .gem { width: 22px; height: 22px; }
.rc-team { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .03); gap: 8px; color: #fff; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.rc-team:hover { background: rgba(104, 171, 228, .16); border-color: var(--caro); }
.rc-team:active { transform: scale(.97); }
.rc-team[aria-pressed="true"] { background: var(--caro); border-color: var(--caro); color: var(--navy); }
.rc-team .gem { width: 24px; height: 24px; }
.rc-t { display: none; font: 600 13px/1 var(--fb); white-space: nowrap; }
.rc-none { border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .07); }
@media (min-width: 900px) {
  .roster-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
  .roster-head .fig { grid-column: 1 / -1; }
  .roster-head .note { margin: 0 0 4px; max-width: 34ch; text-align: right; }
  .roster-grid { grid-template-columns: 124px repeat(var(--ages, 8), minmax(0, 1fr)); grid-auto-rows: 56px; gap: 8px; }
  .rc { grid-column: var(--a); grid-row: var(--g); }
  .rc-corner { grid-column: 1; grid-row: 1; }
  .rc-gem { flex-direction: row; justify-content: flex-start; gap: 10px; font-size: 11px; }
  .rc-age { font-size: 26px; }
}
@media (min-width: 1200px) { .rc-t { display: inline; font-size: 13.5px; } .rc-team { justify-content: flex-start; padding: 0 12px; gap: 8px; } }
.rc .gem { flex: none; }
.gem { display: block; fill: var(--gem, var(--caro)); stroke: rgba(11, 29, 51, .6); stroke-width: 1.1; stroke-linejoin: round; }
.gem .f { fill: none; stroke: rgba(11, 29, 51, .42); }
.gem .h { fill: #fff; opacity: .85; stroke: none; }

/* optional gear */
.opt { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid rgba(255, 255, 255, .1); }
.opt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.opt-head .h3 { margin-top: 10px; }

/* ---------- strips + tiles ---------- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(clamp(16px, 4vw, 48px) * -1); padding: 4px clamp(16px, 4vw, 48px) 8px; scroll-padding: 0 clamp(16px, 4vw, 48px); }
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
@media (min-width: 700px) { .strip { grid-auto-columns: 36%; gap: 18px; } }
@media (min-width: 1100px) { .strip { grid-auto-columns: 21%; gap: 20px; } }

.tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tile-hit { display: flex; flex-direction: column; gap: 12px; flex: 1; border-radius: var(--r); }
.plate { position: relative; aspect-ratio: 1; background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: box-shadow .25s; }
.plate img { width: 84%; height: 84%; object-fit: contain; transition: transform .5s var(--ease); }
.tile-hit:hover .plate { box-shadow: inset 0 0 0 2px var(--caro); }
.tile-hit:hover .plate img { transform: scale(1.05) translateY(-1%); }
.tag { position: absolute; left: 12px; top: 12px; padding: 6px 9px; border-radius: 999px; background: var(--navy); color: #fff; font: 500 10px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; }
.tag-out { left: auto; right: 12px; background: var(--err); }
.tile.out .plate img { opacity: .45; }
.tile-txt { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.aud { color: var(--muted); font-size: 10.5px; }
.aud .cw { color: var(--caro-ink); }
.nm { font: 650 15.5px/1.28 var(--fb); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr { font: 800 16px/1.2 var(--fd); font-stretch: 110%; }
.pr s { color: var(--muted); font-weight: 600; margin-right: 4px; }
.sw { display: flex; align-items: center; margin: 0 0 0 -11px; }
.sw-b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.sw-b i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 29, 51, .22); transition: box-shadow .2s; }
.sw-b[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgba(11, 29, 51, .22), 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.sw-more { font: 500 11px var(--fm); color: var(--muted); }
.kit .tile, .strip-dark .tile { color: #fff; }
.kit .plate { box-shadow: none; }
.kit .tile-hit:hover .plate { box-shadow: 0 0 0 3px var(--caro); }
.kit .aud { color: rgba(255, 255, 255, .6); }
.kit .aud .cw { color: var(--caro); }
.kit .tag { background: var(--caro); color: var(--navy); }
.kit .sw-b[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgba(11, 29, 51, .22), 0 0 0 2px var(--navy), 0 0 0 4px #fff; }

/* ---------- departments ---------- */
.dept { position: relative; padding: clamp(60px, 7.5vw, 104px) 0; background: #fff; overflow: clip; }
.dept[data-pos]:not([data-pos="0"])::before { content: attr(data-pos); position: absolute; right: .02em; top: .06em; font: italic 900 clamp(260px, 34vw, 520px)/.8 var(--fd); font-stretch: 120%; color: transparent; -webkit-text-stroke: 2px rgba(11, 29, 51, .055); pointer-events: none; }
.dept.alt[data-pos]:not([data-pos="0"])::before { -webkit-text-stroke-color: rgba(11, 29, 51, .07); }
.dept > .wrap { position: relative; }
.dept.alt { background: var(--chalk); }
.dept.alt .plate { box-shadow: none; }
.dept.alt .tile-hit:hover .plate { box-shadow: 0 0 0 2px var(--caro); }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: clamp(24px, 3vw, 36px); }
.sh-l { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sh-l .mono { color: var(--muted); }
.sh-l .h2 { margin-top: 6px; }
.sh-n { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: italic 900 30px/1 var(--fd); box-shadow: 0 0 0 4px var(--caro); }
.sh-n.big { width: 76px; height: 76px; font-size: 36px; }
.sh-r { display: flex; align-items: center; gap: 14px; }
.sh-r .glyph { width: 38px; height: 38px; color: var(--navy); }
.sh-r .glyph circle.on { fill: var(--caro-ink); }
@media (max-width: 759px) {
  .sh { align-items: center; }
  .sh-n { width: 48px; height: 48px; font-size: 22px; box-shadow: 0 0 0 3px var(--caro); }
  .sh-l { gap: 14px; }
  .sh-r .glyph { display: none; }
  .sh-r { display: none; }
  .sh-l > div { min-width: 0; }
  .h2 { font-size: 32px; }
  .sh .h2 { font-size: 30px; font-stretch: 108%; }
}
.grid-home { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(clamp(16px, 4vw, 48px) * -1); padding: 4px clamp(16px, 4vw, 48px) 8px; scroll-padding: 0 clamp(16px, 4vw, 48px); }
.grid-home::-webkit-scrollbar { display: none; }
.grid-home > * { scroll-snap-align: start; }
.endcard { display: flex; }
.endcard > span { flex: 1; aspect-ratio: 1; border-radius: var(--r); background: var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; }
.endcard .glyph { width: 40px; height: 40px; color: var(--caro); }
.endcard b { font: 900 22px/1 var(--fd); font-stretch: 115%; text-transform: uppercase; }
.endcard em { width: 48px; height: 48px; border-radius: 50%; background: var(--caro); color: var(--navy); display: grid; place-items: center; }
.endcard em svg { width: 20px; height: 20px; }
@media (min-width: 700px) and (max-width: 759px) { .grid-home { grid-auto-columns: 40%; } }
@media (min-width: 760px) {
  .grid-home { grid-auto-flow: row; grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 32px 18px; }
  .grid-home .tile:nth-child(n + 7) { display: none; }
  .endcard { display: none; }
  .grid-feat .tile.big { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1100px) {
  .grid-home { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 36px 22px; }
  .grid-home .tile:nth-child(n + 7) { display: flex; }
  .grid-home .tile:nth-child(n + 9) { display: none; }
  .grid-home .endcard.fill { display: flex; }
  .grid-feat .tile:nth-child(n + 9) { display: flex; }
  .grid-feat .tile:nth-child(n + 10) { display: none; }
}
.tile.big .plate { aspect-ratio: auto; flex: 1; min-height: 0; }
.tile.big .plate img { width: 76%; height: 76%; position: absolute; inset: 12%; }
.tile.big .nm { font-size: 19px; }
.tile.big .pr { font-size: 19px; }
@media (max-width: 759px) { .tile.big .plate { aspect-ratio: 1; flex: none; } .tile.big .plate img { position: static; width: 84%; height: 84%; } .tile.big .nm, .tile.big .pr { font-size: 15.5px; } }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.rv.seen { opacity: 1; transform: none; }
.grid-home .tile.rv:nth-child(4n + 2) { --d: 70ms; }
.grid-home .tile.rv:nth-child(4n + 3) { --d: 140ms; }
.grid-home .tile.rv:nth-child(4n + 4) { --d: 210ms; }

/* ---------- collection view ---------- */
.view { min-height: 70vh; }
.coll-top { background: var(--navy); color: #fff; padding: 22px 0 26px; }
.backlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--caro); font: 500 12px var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.backlink svg { width: 18px; height: 18px; }
.coll-h { display: flex; align-items: center; gap: 20px; margin: 10px 0 24px; }
.coll-h .mono { color: rgba(255, 255, 255, .6); }
.coll-h .h2 { margin-top: 6px; }
.coll-g .glyph { width: 60px; height: 60px; color: var(--caro); }
.coll-tools { display: flex; align-items: center; gap: 14px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font: 600 14px/1 var(--fb); white-space: nowrap; transition: background-color .2s, color .2s; }
.chip b { width: 22px; height: 22px; border-radius: 50%; background: var(--caro); color: var(--navy); display: grid; place-items: center; font: 900 11.5px var(--fd); }
.chip:hover { background: rgba(255, 255, 255, .1); }
.chip.on { background: #fff; color: var(--navy); box-shadow: none; }
.sort { display: flex; align-items: center; gap: 10px; flex: none; color: rgba(255, 255, 255, .7); }
.sort select { min-height: 44px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368abe4' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; color: #fff; padding: 0 40px 0 16px; font: 600 14px var(--fb); -webkit-appearance: none; appearance: none; }
.sort select option { color: var(--navy); }
@media (max-width: 759px) {
  .coll-tools { flex-direction: column; align-items: stretch; }
  .chips { margin: 0 calc(clamp(16px, 4vw, 48px) * -1); padding: 2px clamp(16px, 4vw, 48px); }
  .sort { justify-content: space-between; }
  .coll-h { gap: 14px; }
  .coll-h.long .h2 { font-size: 27px; } /* a long word ("Sweatshirts") must fit beside the glyph */
  .sh-n.big { width: 56px; height: 56px; font-size: 26px; }
}
.grid-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; padding: 32px 0 88px; }
@media (min-width: 700px) { .grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 18px; } }
@media (min-width: 1100px) { .grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; } }
@media (max-width: 420px) { .grid-all .nm { font-size: 14.5px; } .grid-all .sw { flex-wrap: wrap; } }
.empty { padding: 96px 0; display: grid; gap: 24px; }

/* ---------- dialogs ---------- */
.dlg { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.scrim { position: absolute; inset: 0; background: rgba(4, 11, 20, .64); }
.card { position: relative; background: #fff; color: var(--navy); display: flex; flex-direction: column; max-height: 100%; }
.dlg.open .card { animation: card-in .45s var(--ease) both; }
@keyframes card-in { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-side.open .card { animation-name: side-in; }
@keyframes side-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-top.open .card { animation-name: top-in; }
@keyframes top-in { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.x { position: absolute; top: 14px; right: 14px; z-index: 6; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(11, 29, 51, .16), inset 0 0 0 1px var(--line); transition: transform .2s var(--ease); }
.x:hover { transform: rotate(90deg); }
.x svg { width: 20px; height: 20px; }
.x.x-in { position: static; flex: none; }
.sk { height: 52px; border-radius: 12px; background: var(--chalk); margin-top: 14px; }
.err { color: var(--err); font-weight: 600; font-size: 14.5px; }
.err-s { color: var(--err); font: 600 13px var(--fb); margin-top: 6px; }
.hint { color: var(--muted); font-size: 13.5px; }
.lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; font: 800 12px/1.2 var(--fb); letter-spacing: .08em; text-transform: uppercase; }
.lbl em { font-style: normal; font-weight: 500; color: var(--muted); letter-spacing: .02em; text-transform: none; font-size: 13px; }
.lbl b { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--caro-ink); }
.bad .lbl > span:first-child, .bad > .lbl > span { color: var(--err); }
.bad-t { color: var(--err) !important; }
.chips-b { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-b { min-height: 44px; min-width: 48px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 650 14.5px/1 var(--fb); transition: box-shadow .15s, background-color .15s, color .15s; }
.chip-b:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--navy); }
.chip-b[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.chip-b.dim { color: var(--muted); background: var(--chalk); }
.chip-b:disabled { opacity: .38; text-decoration: line-through; }
.chip-b i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 29, 51, .25); flex: none; }
.chip-b[aria-pressed="true"] i { box-shadow: 0 0 0 1.5px #fff; }
.chip-b .gem { width: 20px; height: 20px; }
.bad .chips-b .chip-b:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px rgba(194, 39, 63, .55); }
.fld { display: block; }
.inp { width: 100%; height: 52px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); padding: 0 14px; font: 650 16.5px var(--fb); color: var(--navy); background: #fff; transition: box-shadow .15s; }
.inp:focus { outline: none; box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 4px rgba(104, 171, 228, .45); }
.bad .inp { box-shadow: inset 0 0 0 2px var(--err); }
select.inp { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1d33' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 40px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--chalk); font: 500 11px var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pill-c { background: var(--ice); color: var(--caro-ink); }
.qty { display: flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); flex: none; }
.qty button { width: 44px; height: 50px; display: grid; place-items: center; border-radius: 999px; }
.qty button:hover { background: var(--chalk); }
.qty button svg { width: 18px; height: 18px; }
.qty output { min-width: 26px; text-align: center; font: 800 16px var(--fd); }
.qty.sm button { height: 44px; }
.desc { border-top: 1px solid var(--line); padding-top: 4px; }
.desc summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font: 800 12px var(--fb); letter-spacing: .08em; text-transform: uppercase; list-style: none; }
.desc summary::-webkit-details-marker { display: none; }
.desc summary::after { content: '+'; margin-left: auto; font: 500 20px var(--fb); }
.desc[open] summary::after { content: '–'; }
.desc-in { color: #2d3e51; font-size: 14.5px; padding-bottom: 8px; }
.desc-in ul { list-style: disc; padding-left: 20px; }
.desc-in p { margin: 0 0 6px; }
/* size charts in product descriptions */
.desc-in table { width: 100%; margin: 12px 0 8px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.desc-in caption { text-align: left; padding-bottom: 8px; font: 500 11px/1.3 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.desc-in th, .desc-in td { padding: 7px 3px; border-bottom: 1px solid var(--line); text-align: center; }
.desc-in thead th { font-weight: 700; color: var(--navy); border-bottom-color: var(--navy); }
.desc-in tbody th, .desc-in thead th:first-child { text-align: left; font-weight: 600; }

/* personalize */
.pz { margin: 0; border: 0; padding: 18px 16px 18px; border-radius: 18px; background: linear-gradient(180deg, var(--ice), #f7fbff); box-shadow: inset 0 0 0 1.5px rgba(104, 171, 228, .55); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pz legend { float: left; width: 100%; padding: 0; margin: 0 0 -2px; color: var(--caro-ink); }
.pz legend + * { clear: both; }
.tp .lbl { margin-bottom: 9px; }
.tp-cur { display: inline-flex; align-items: center; gap: 6px; }
.tp-cur .gem { width: 18px; height: 18px; }
.tp-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.tp-ages .chip-b { min-width: 0; padding: 0 6px; font-family: var(--fd); font-weight: 800; font-stretch: 110%; }
.tp-gems { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-height: 44px; align-items: center; }
.plate-prev { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--navy); color: #fff; min-width: 0; }
.pp-n { font: italic 900 18px/1.1 var(--fd); font-stretch: 116%; text-transform: uppercase; letter-spacing: .03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-t { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 500 11px var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--caro); }
.pp-t .gem { width: 18px; height: 18px; }

/* product */
.card-p { width: min(1120px, calc(100% - 48px)); height: min(800px, calc(100% - 48px)); border-radius: 28px; }
@media (min-width: 900px) { .card-p > .x { right: auto; left: 14px; } }
.p-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); height: 100%; min-height: 0; }
.p-gal { background: var(--chalk); border-radius: 28px 0 0 28px; padding: 26px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.p-main { flex: 1; min-height: 0; background: #fff; border-radius: 20px; display: grid; place-items: center; }
.p-main img { width: 86%; height: 86%; object-fit: contain; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: none; padding: 2px; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: none; width: 64px; height: 64px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px transparent; display: grid; place-items: center; }
.thumbs button img { width: 84%; height: 84%; object-fit: contain; }
.thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--navy); }
.p-info { overflow-y: auto; overscroll-behavior: contain; padding: 34px 36px 0; border-radius: 0 28px 28px 0; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.crumb { color: var(--caro-ink); }
.p-title { font: 900 clamp(26px, 2.6vw, 34px)/1 var(--fd); font-stretch: 114%; text-transform: uppercase; letter-spacing: -.005em; margin-top: -8px; }
.p-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.p-meta:empty { display: none; }
.p-price { font: italic 900 30px/1 var(--fd); font-stretch: 114%; }
.p-price s { color: var(--muted); font-size: 20px; margin-right: 8px; font-weight: 700; }
.buybar { position: sticky; bottom: 0; margin-top: auto; padding: 16px 0 24px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 16px); z-index: 3; display: grid; gap: 10px; }
.buy-row { display: flex; gap: 10px; }
.add { flex: 1; min-height: 52px; }
.add-p { opacity: .8; font-weight: 700; }
@media (max-width: 899px) {
  .dlg#dlg-product, .dlg#dlg-pack { align-items: stretch; }
  .card-p, .card-k { width: 100%; height: 100%; border-radius: 0; }
  .p-grid { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .p-gal { border-radius: 0; padding: 12px 12px 14px; }
  .p-main { aspect-ratio: 1; flex: none; }
  .p-info { overflow: visible; padding: 22px 16px 0; border-radius: 0; gap: 18px; }
  .buybar { padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .x { top: 10px; right: 10px; }
  .crumb { padding-right: 0; }
}

/* package builder */
.card-k { width: min(1040px, calc(100% - 48px)); height: min(880px, calc(100% - 48px)); border-radius: 28px; }
.k-head { padding: 28px 90px 18px 32px; border-bottom: 1px solid var(--line); flex: none; }
.k-head .mono { color: var(--caro-ink); }
.k-title { margin-top: 8px; font: 900 clamp(26px, 3vw, 40px)/1 var(--fd); font-stretch: 116%; text-transform: uppercase; }
.k-load { padding: 24px 32px; display: grid; gap: 4px; }
.k-load .mono { color: var(--muted); margin-top: 12px; }
.k-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 32px 28px; min-height: 0; }
.k-step { padding: 24px 0 8px; display: grid; gap: 16px; }
.k-step + .k-step { border-top: 1px solid var(--line); margin-top: 16px; }
.k-sh { display: flex; align-items: center; gap: 12px; font: 900 20px/1 var(--fd); font-stretch: 114%; text-transform: uppercase; }
.k-n { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: italic 900 15px var(--fd); box-shadow: 0 0 0 3px var(--caro); }
.k-count { margin-left: auto; color: var(--muted); font-size: 11px; }
.k-all { padding: 16px; border-radius: 16px; background: var(--chalk); }
.sz-g { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sz-g + .sz-g { margin-top: 8px; }
.sz-l { min-width: 52px; color: var(--muted); font-size: 10.5px; }
.sz { min-width: 46px; padding: 0 10px; }
.k-items { display: grid; gap: 12px; }
.k-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.k-item.done { box-shadow: inset 0 0 0 1.5px rgba(104, 171, 228, .8); background: #fbfdff; }
.k-item.bad { box-shadow: inset 0 0 0 2px var(--err); }
.k-img { position: relative; width: 76px; height: 76px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.k-img img { width: 86%; height: 86%; object-fit: contain; }
.k-ok { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--caro); color: var(--navy); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--ease); }
.k-ok svg { width: 14px; height: 14px; }
.k-item.done .k-ok { opacity: 1; transform: none; }
.k-nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.k-nm b { font: 700 15.5px/1.25 var(--fb); }
.k-nm em { font-style: normal; color: var(--muted); font-size: 14px; }
.k-nm .mono { margin-left: auto; color: var(--navy); }
.k-opt + .k-opt { margin-top: 10px; }
.k-one { color: var(--muted); }
.k-foot { flex: none; border-top: 1px solid var(--line); padding: 14px 32px 20px; display: grid; gap: 10px; background: #fff; border-radius: 0 0 28px 28px; }
.k-foot-row { display: flex; align-items: center; gap: 18px; }
.k-total { display: flex; flex-direction: column; gap: 2px; }
.k-total .mono { color: var(--muted); }
.k-total b { font: italic 900 28px/1 var(--fd); font-stretch: 114%; }
.k-foot .add { flex: 1; max-width: 420px; margin-left: auto; }
@media (min-width: 1000px) { .k-items { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 899px) {
  .card-k { width: 100%; height: 100%; border-radius: 0; }
  .k-head { padding: 18px 64px 14px 16px; }
  .k-body { padding: 4px 16px 24px; }
  .k-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; }
  .k-item { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .k-img { width: 60px; height: 60px; }
  .k-foot-row { gap: 12px; }
  .k-total { flex: none; }
  .k-total b { font-size: 22px; }
  .k-foot .add { min-width: 0; padding: 0 16px; font-size: 13px; }
  .pp-n { font-size: 16px; }
  .sz-l { min-width: 44px; }
}

/* bag */
.dlg-side { justify-content: flex-end; align-items: stretch; }
.card-b { width: min(470px, 100%); height: 100%; border-radius: 28px 0 0 28px; }
.b-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 22px 16px; border-bottom: 1px solid var(--line); }
.b-head .mono { color: var(--caro-ink); }
.b-title { font: 900 30px/1 var(--fd); font-stretch: 114%; text-transform: uppercase; margin-top: 6px; }
.b-lines { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 22px; }
.bl { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bl.bad { background: #fff4f5; }
.bl-img { width: 76px; height: 76px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.bl-img img { width: 86%; height: 86%; object-fit: contain; }
.bl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-t b { font: 700 15px/1.3 var(--fb); }
.bl-t .mono { color: var(--muted); font-size: 10.5px; }
.bl-a { font-size: 13.5px; color: var(--caro-ink); font-weight: 600; }
.bl-q { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.bl-p { font: 800 15px var(--fd); }
.rm { font-size: 13.5px; color: var(--muted); }
.bl-pack { display: block; }
.bl-pk { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--navy); color: #fff; }
.bl-pk-h { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bl-pk-h b { font: 900 16px/1.1 var(--fd); font-stretch: 112%; text-transform: uppercase; }
.bl-pk-h .mono { color: var(--caro); font-size: 10.5px; }
.bl-pk strong { font: 800 16px var(--fd); }
.bl-pk-items { display: grid; gap: 2px; padding: 8px 4px 0; }
.bl-pk-items li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; min-height: 44px; }
.bl-pk-items img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); padding: 3px; }
.bl-pk-items em { font-style: normal; color: var(--muted); font-size: 10.5px; }
.b-foot { padding: 16px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
.b-sum { display: flex; align-items: baseline; justify-content: space-between; font: 800 13px var(--fb); letter-spacing: .08em; text-transform: uppercase; }
.b-sum strong { font: italic 900 26px var(--fd); font-stretch: 114%; letter-spacing: 0; }
.b-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 32px; }
.b-empty .glyph { width: 64px; height: 64px; color: var(--caro); margin-bottom: 8px; }
.b-empty p:not(.hint) { font: 900 22px var(--fd); font-stretch: 114%; text-transform: uppercase; }
.b-empty-a { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
@media (max-width: 599px) { .card-b { width: 100%; border-radius: 0; } .bl { grid-template-columns: 64px minmax(0, 1fr) auto; } .bl-img { width: 64px; height: 64px; } }

/* search */
.dlg-top { align-items: flex-start; }
.card-s { width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 28px 28px; padding: 16px 0 26px; }
.s-bar { display: flex; align-items: center; gap: 12px; }
.s-field { flex: 1; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--navy); }
.s-field svg { width: 22px; height: 22px; flex: none; }
.s-field input { flex: 1; min-width: 0; border: 0; outline: 0; font: 650 18px var(--fb); color: var(--navy); background: transparent; }
.s-field:focus-within { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 4px rgba(104, 171, 228, .45); }
.s-res { padding-top: 18px; }
.s-hint { color: var(--muted); margin-bottom: 12px; }
.s-depts { display: flex; flex-wrap: wrap; gap: 8px; }
.s-depts .chip { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.s-depts .chip:hover { background: var(--chalk); }
.s-depts .chip-c { background: var(--caro); box-shadow: none; }
.s-none { font-size: 16px; color: var(--muted); padding: 12px 0; }
.grid-s { padding: 4px 0 8px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 16px; z-index: 120; width: min(460px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 20px; background: var(--navy); color: #fff; box-shadow: 0 24px 60px rgba(3, 10, 20, .4); transform: translate(-50%, calc(100% + 40px)); transition: transform .45s var(--ease); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); pointer-events: auto; }
.toast img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; flex: none; }
.t-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.t-t .mono { color: var(--caro); font-size: 10.5px; }
.t-t b { font: 700 14.5px/1.25 var(--fb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- footer ---------- */
.foot { background: var(--night); color: rgba(255, 255, 255, .78); padding: clamp(56px, 7vw, 88px) 0 28px; }
.foot-sign { display: flex; flex-wrap: wrap; gap: 0 .35em; margin-bottom: clamp(40px, 6vw, 72px); font: italic 900 clamp(40px, 6.9vw, 118px)/.9 var(--fd); font-stretch: 122%; text-transform: uppercase; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: max(1.5px, .014em) rgba(104, 171, 228, .55); }
.foot-sign span:last-child { color: var(--caro); -webkit-text-stroke-color: var(--caro); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.foot-brand { display: flex; align-items: center; gap: 18px; }
.foot-logo { height: 84px; width: auto; }
.foot-brand b { display: block; font: 900 22px/1.05 var(--fd); font-stretch: 116%; text-transform: uppercase; color: #fff; }
.foot-brand .mono { display: block; color: var(--caro); margin-top: 8px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col h4 { color: rgba(255, 255, 255, .45); margin-bottom: 8px; }
.foot-col a, .foot-col .linkish { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.foot-col a:hover, .foot-col .linkish:hover { color: var(--caro); }
.foot-bot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.foot-bot > .mono { color: rgba(255, 255, 255, .45); }
.powered { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: rgba(255, 255, 255, .6); }
.powered img { height: 24px; width: auto; }
@media (min-width: 760px) { .foot-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .ltd-stage.rv .ltd-disc { transform: none; }
}