/* Dyem Quynh Pham, remix-site-1, attempt 24: the shared stylesheet for every page.
   Phoebe Philo's measured system (the root) re-skinned for the brand: Dilara's header, Phoebe's list dropdown,
   KNWLS' product grid, a footer after adidas. Every value runs through a --rx token the tweak panel can turn. */
/* Antonio (Google Fonts, OFL), the closest free cut to the logo's Coolvetica, chosen by the owner in attempt 12's review.
   One variable file per subset, weights 100 to 700; there is no Vietnamese subset. */
@font-face { font-family: "Antonio"; src: url("antonio-latin-ext.woff2") format("woff2"); font-weight: 100 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Antonio"; src: url("antonio-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Direction A — Bone (default): the system on paper. */
:root {
  --rx-page: #ffffff; --rx-ink: #141210; --rx-muted: rgba(20,18,16,0.58); --rx-accent: #b0201a;
  --rx-tile: #f5f5f5; --rx-tile-hover: #efefef; --rx-rule: rgba(20,18,16,0.14);
  --rx-logo: var(--rx-ink); --rx-over: #ffffff; --rx-alert: #d6281e;
  --rx-font: "Antonio", "Arial Narrow", sans-serif;
  /* The agreed type table was set in Coolvetica; Antonio's capitals stand 86/66 as tall, so every size is taken by 0.77
     and the type keeps the size and line length the owner signed off. */
  --rx-fit: 0.77;
  --rx-w-strong: 700; /* groups, titles, the selected tab: Antonio Bold, a real cut */
  --rx-ph-a: #ece8e1; --rx-ph-b: #d2cdc4; --rx-ph-c: #b6b0a5;
  --rx-ease: cubic-bezier(0.33, 1, 0.68, 1);
  /* Knobs (the tweak panel sets these) */
  --rx-gutter: 42px; --rx-type: 1; --rx-speed: 1;
  --rx-head-pad: 18px; --rx-mark: 150px; --rx-nav-gap: 26px; --rx-scrim: 0.35;
  --rx-hero-h: 100vh; --rx-hero-dim: 0.1; --rx-hero-y: 40%;
  --rx-cols: 4; --rx-grid-gap: 12px; --rx-tile-ratio: 0.9; --rx-head-top: 60px;
  --rx-mod-h: 92vh; --rx-mod-gap: 0px;
  --rx-foot-top: 56px; --rx-foot-cols: 120px;
  --rx-head-h: 58px;
}
/* Direction B — Night: Phoebe's own black, the logo reversed to white. */
:root[data-direction="night"] {
  --rx-page: #000000; --rx-ink: #ffffff; --rx-muted: rgba(255,255,255,0.6); --rx-accent: #ff0000;
  --rx-tile: #111111; --rx-tile-hover: #1b1b1b; --rx-rule: rgba(255,255,255,0.14);
  --rx-ph-a: #3b3a37; --rx-ph-b: #1c1b19; --rx-ph-c: #0a0a09;
}
/* Direction C — Signal: red ground, black type. */
:root[data-direction="signal"] {
  --rx-page: #d4110c; --rx-ink: #0b0b0b; --rx-muted: rgba(11,11,11,0.62); --rx-accent: #0b0b0b;
  --rx-tile: #c00f0b; --rx-tile-hover: #b20d0a; --rx-rule: rgba(11,11,11,0.2);
  --rx-ph-a: #5a1210; --rx-ph-b: #2a0807; --rx-ph-c: #120403;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--rx-page); color: var(--rx-ink); font: 400 var(--t-body)/1.4 var(--rx-font); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; font-synthesis: none; transition: background-color calc(0.4s * var(--rx-speed)), color calc(0.4s * var(--rx-speed)); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rx-accent); color: var(--rx-page); }
/* Type scale (agreed in chat for attempt 08), all scaled by the Type scale knob. Every interface word is caps. */
:root {
  --t-small: calc(15px * var(--rx-fit) * var(--rx-type));   /* copyright and shipping row */
  --t-item: calc(16px * var(--rx-fit) * var(--rx-type));    /* product names and prices, footer links */
  --t-ui: calc(17px * var(--rx-fit) * var(--rx-type));      /* navigation, dropdown, section labels, footer headings, button, field */
  --t-body: calc(20px * var(--rx-fit) * var(--rx-type));    /* running text on later pages */
  --t-display: calc(36px * var(--rx-fit) * var(--rx-type)); /* the sign-up title */
}
.caps { font-size: var(--t-ui); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; }
/* A chevron marks the items inside the dropdown that open more items; SHOP itself is the navigation, so it has none. */
.chev.lg { width: 18px; height: 18px; margin-left: 0; }
.chev { width: 9px; height: 9px; margin-left: 6px; flex: none; transition: transform calc(0.25s * var(--rx-speed)) var(--rx-ease); }
.u:hover { text-decoration: underline; text-underline-offset: 4px; opacity: 0.85; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The logo is the owner's artwork, used as a mask so it takes the colour it sits in. */
.logo { display: block; aspect-ratio: 1854 / 570; background: currentColor; -webkit-mask: url("logo.png") center / contain no-repeat; mask: url("logo.png") center / contain no-repeat; }

.ph { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, var(--rx-ph-a), var(--rx-ph-b) 50%, var(--rx-ph-c)); }
.ph::after { content: attr(data-ph); position: absolute; left: 16px; bottom: 14px; font: 10px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--rx-ink) 40%, transparent); white-space: nowrap; }

/* Header, as Dilara's: white over the film and transparent at the very top; scrolled either way, hovered
   or with the menu open it takes the page's ground. The logo stays centred throughout. */
.header { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--rx-head-pad) var(--rx-gutter); color: var(--rx-over); background: transparent; transition: background-color calc(0.3s * var(--rx-speed)), color calc(0.3s * var(--rx-speed)); }
.header:hover, .header.solid, .header:focus-within, .header.menu { background: var(--rx-page); color: var(--rx-ink); }
.header nav { display: flex; gap: var(--rx-nav-gap); }
.header nav:last-child { justify-content: flex-end; }
.header button { all: unset; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.header .mark { display: block; width: var(--rx-mark); }
/* Dropdown, as on Phoebe Philo: one list under SHOP (24px rows, 4px apart), each group's items fading in
   beside it; the panel continues the header's ground, so no rule divides them. */
.mega { position: fixed; inset: calc(var(--rx-head-h) - 1px) 0 auto; z-index: 19; background: var(--rx-page); color: var(--rx-ink); clip-path: inset(0 0 100% 0); transition: clip-path calc(0.35s * var(--rx-speed)) var(--rx-ease); padding: 6px var(--rx-gutter) 32px; }
.mega.open { clip-path: inset(0); }
.dd, .dd-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 220px; }
.dd { position: relative; }
.dd > li { position: static; }
.dd a, .dd button { all: unset; display: inline-flex; align-items: center; min-height: 28px; cursor: pointer; }
.dd button .chev { transform: rotate(-90deg); }
.dd li.open > button .chev { transform: rotate(-90deg) translateY(2px); }
.dd a:hover, .dd button:hover, .dd [aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
.dd-sub { position: absolute; top: 0; left: 220px; opacity: 0; visibility: hidden; transition: opacity calc(0.2s * var(--rx-speed)), visibility 0s linear calc(0.2s * var(--rx-speed)); }
.dd > li.open > .dd-sub { opacity: 1; visibility: visible; transition-delay: 0s; }
.shot { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hero: the campaign film, full bleed, no headline over it. */
.hero { position: relative; height: var(--rx-hero-h); min-height: 560px; overflow: hidden; background: #000; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--rx-hero-y); }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: 1; background: linear-gradient(rgba(0,0,0,var(--rx-scrim)), transparent); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,var(--rx-hero-dim)); pointer-events: none; }
.hero .foot { position: absolute; z-index: 2; bottom: 28px; left: 0; right: 0; text-align: center; color: #fff; }

/* New arrivals (KNWLS grid) */
.head { display: flex; justify-content: space-between; padding: var(--rx-head-top) var(--rx-gutter) 18px; }
.grid { display: grid; grid-template-columns: repeat(var(--rx-cols), minmax(0, 1fr)); gap: var(--rx-grid-gap); padding: 0 var(--rx-gutter); }
.card .tile { aspect-ratio: var(--rx-tile-ratio); background: var(--rx-tile); display: grid; place-items: center; transition: background-color calc(0.3s * var(--rx-speed)); }
.card:hover .tile { background: var(--rx-tile-hover); }
.card .tile { overflow: hidden; }
.card .tile .shot { transition: transform calc(0.6s * var(--rx-speed)) var(--rx-ease); }
.card .meta { display: grid; gap: 2px; padding: 12px 0 26px; font-size: var(--t-item); letter-spacing: 0.06em; }
.card .meta .price, .card .meta .coll { color: var(--rx-muted); }

/* Shoes + Bags (Phoebe two-up) */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rx-mod-gap); margin-top: 40px; }
.module { position: relative; display: block; height: var(--rx-mod-h); min-height: 480px; }
.module .shot { position: absolute; inset: 0; }
.module .label { position: absolute; bottom: 36px; left: 0; right: 0; text-align: center; color: #fff; mix-blend-mode: difference; }

/* Footer, after adidas: a full-width sign-up band leads it (title, then the email and the button on one line),
   then the logo and the link columns share one row, half the width each. */
.band { background: var(--rx-ink); color: var(--rx-page); padding: 40px var(--rx-gutter); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; }
.band h2 { margin: 0; font: inherit; font-size: var(--t-display); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.06em; }
.band form { display: flex; align-items: stretch; width: min(460px, 100%); }
.band input { all: unset; flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--rx-page) 45%, transparent); border-right: 0; color: var(--rx-page); font-size: var(--t-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.band input::placeholder { color: color-mix(in srgb, var(--rx-page) 60%, transparent); }
.band input:focus { border-color: var(--rx-page); }
.band button { all: unset; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; background: var(--rx-page); color: var(--rx-ink); cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-ui); }
.band button:hover { opacity: 0.85; }
.band button svg { width: 24px; height: 10px; }
footer { padding: var(--rx-foot-top) var(--rx-gutter) 28px; display: grid; gap: 48px; }
footer .cols { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; gap: 24px var(--rx-foot-cols); }
footer .cols h3 { margin: 0 0 16px; font-weight: 400; }
footer .cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer .cols a { color: var(--rx-muted); font-size: var(--t-item); text-transform: uppercase; letter-spacing: 0.06em; }
footer .cols a:hover { color: var(--rx-ink); }
footer .legal { font-size: var(--t-small); display: flex; justify-content: center; gap: 12px 32px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--rx-rule); color: var(--rx-muted); }

.reveal { opacity: 0; transform: translateY(10px); transition: opacity calc(0.6s * var(--rx-speed)), transform calc(0.6s * var(--rx-speed)) var(--rx-ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Tweak panel: knobs by section, and single elements picked on the page ---------- */
.panel { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 300px; max-height: calc(100vh - 32px); overflow: auto; font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; color: #111; background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.panel summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; justify-content: space-between; }
.panel summary::-webkit-details-marker { display: none; }
.panel .body { padding: 0 14px 14px; display: grid; gap: 8px; }
.panel .grp { border-top: 1px solid #eee; }
.panel .grp > summary { padding: 9px 0; font-weight: 600; }
.panel .grp > summary small { font-weight: 400; color: #888; }
.panel .knobs { display: grid; gap: 10px; padding: 2px 0 12px; }
.panel label { display: grid; gap: 4px; }
.panel .seg { display: flex; gap: 4px; }
.panel .seg button, .panel .btn { flex: 1; padding: 6px 0; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #111; cursor: pointer; font: inherit; }
.panel .seg button[aria-pressed="true"], .panel .btn[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.panel input[type=range] { width: 100%; accent-color: #111; }
.panel input[type=color] { width: 100%; height: 28px; border: 1px solid #ddd; border-radius: 6px; padding: 0 2px; background: #fff; }
.panel .row { display: flex; justify-content: space-between; gap: 8px; color: #555; }
.panel .check { display: flex; gap: 6px; align-items: center; }
.panel .actions { display: flex; gap: 6px; }
.panel .picked { padding: 6px 8px; border-radius: 6px; background: #f4f4f4; color: #333; word-break: break-all; }
.panel .hint { margin: 0; color: #777; }
body.rx-picking, body.rx-picking * { cursor: crosshair !important; }
.rx-hover { outline: 2px dashed #2f6bff !important; outline-offset: 2px; }
.rx-sel { outline: 2px solid #2f6bff !important; outline-offset: 2px; }

/* ---------- Pages without the film: the header behaves as on Home, transparent at the top (in ink over the white
   page) and the page's ground once scrolled or hovered; the page starts below it ---------- */
body.plain .header { color: var(--rx-ink); }
body.plain main { padding-top: var(--rx-head-h); }
[hidden] { display: none !important; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; padding: 48px var(--rx-gutter) 20px; }
.page-head h1 { margin: 0; font: inherit; }
.muted { color: var(--rx-muted); }
.copy { font-size: var(--t-body); line-height: 1.4; margin: 0; }
.copy + .copy { margin-top: 1em; }
.link { text-decoration: underline; text-underline-offset: 4px; }
.btn-ink { all: unset; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 12px; height: 52px; padding: 0 24px; background: var(--rx-ink); color: var(--rx-page); cursor: pointer; text-align: center; }
.btn-ink:hover { opacity: 0.88; }
.btn-ink[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-line { all: unset; box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 52px; padding: 0 24px; border: 1px solid var(--rx-ink); cursor: pointer; }

/* Loader, as Phoebe opens: the logo fades in on the page ground and holds until the mandatory assets are in */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--rx-page); color: var(--rx-ink); transition: opacity calc(0.3s * var(--rx-speed)) ease, visibility 0s linear calc(0.3s * var(--rx-speed)); }
.loader .logo { width: min(260px, 56vw); animation: rx-fade calc(0.3s * var(--rx-speed)) ease 0.15s both; }
.loader.done { opacity: 0; visibility: hidden; }
html:has(.loader:not(.done)) { overflow: hidden; }
@keyframes rx-fade { from { opacity: 0; } to { opacity: 1; } }

/* Product card: a second photograph on hover (Dilara, adidas); name > price > collection > colours */
.card .tile { position: relative; }
.card .tile .shot { position: absolute; inset: 0; }
.card .tile .alt { opacity: 0; transform: scale(var(--z, 1.7)); transform-origin: var(--ox, 50%) var(--oy, 32%); transition: opacity calc(0.25s * var(--rx-speed)) ease-out; }
.card:hover .tile .alt, .card:focus-visible .tile .alt { opacity: 1; }
.card .meta .coll { font-size: var(--t-small); }
.card .meta .sw { display: flex; gap: 6px; margin-top: 6px; }
/* The tag, as adidas writes its badge: a plain word in ink, the card's last line. */
.card .meta .tag { margin-top: 6px; }
.grid { align-items: start; }
/* Colours as KNWLS' plain squares; a sold-out colour is crossed by a thin line under a pale film. */
.swatch { position: relative; display: inline-block; width: 12px; height: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16); overflow: hidden; flex: none; }
.swatch.out::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.55); }
.swatch.out::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -25%; width: 1px; height: 150%; background: var(--rx-ink); transform: rotate(45deg); }
.colours { display: flex; flex-wrap: wrap; gap: 10px; }
.colours button { all: unset; cursor: pointer; box-sizing: border-box; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; }
.colours button .swatch { display: block; width: 24px; height: 24px; }
.colours button[aria-pressed="true"] { border-color: var(--rx-ink); }
.colours button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.colours button[disabled] { cursor: not-allowed; }
/* Dropdowns: the groups in bold, the items inside them plain (Phoebe, Dilara, adidas). */
.dd > li > a, .dd > li > button { font-weight: var(--rx-w-strong); }
.dd-sub a { font-weight: 400; }
/* Page titles: bold and large, the selected category's name on Shop (adidas). */
.page-title { margin: 0; font-size: var(--t-display); font-weight: var(--rx-w-strong); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.04em; }

/* Collection page: name and lede as Dilara sets them, then Phoebe's look grid revealed at random */
.coll-head { padding: 40px var(--rx-gutter) 30px; text-align: center; border-bottom: 1px solid var(--rx-rule); }
.coll-head h1 { margin: 0; font-weight: 400; font-size: calc(56px * var(--rx-fit) * var(--rx-type)); line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.coll-head p { margin: 10px 0 0; font-size: var(--t-small); }
.looks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.looks img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rx-tile); opacity: 0; transition: opacity calc(0.1s * var(--rx-speed)); }
.looks img.in { opacity: 1; }
.looks button { all: unset; display: block; cursor: zoom-in; }
.viewer { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; background: var(--rx-page); color: var(--rx-ink); }
.viewer-head, .viewer-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--rx-gutter); font-size: var(--t-item); }
.viewer-head button { all: unset; cursor: pointer; }
.viewer-head button:hover, .viewer-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.viewer-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track figure { flex: 0 0 100%; margin: 0; padding: 0 64px; display: grid; place-items: center; scroll-snap-align: center; min-height: 0; }
.viewer-track img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
.viewer-arrow { all: unset; position: absolute; top: 50%; translate: 0 -50%; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.viewer-arrow.prev { left: 16px; } .viewer-arrow.next { right: 16px; }
.viewer-arrow svg { width: 20px; height: 20px; }
html:has(.viewer:not([hidden])) { overflow: hidden; }

/* Shop (PLP), after adidas: crumbs, the category's name in bold, category tabs over a hairline, and Filter & Sort
   opening a drawer from the right (applied filters, sort, colour, collection, price; Show items at its foot). */
.plp-head { padding: 32px var(--rx-gutter) 28px; display: grid; gap: 18px; }
.plp-head .crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.plp-row { display: flex; align-items: center; gap: 24px; margin-top: 10px; min-width: 0; }
.cat-tabs { flex: 1; min-width: 0; display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button { all: unset; cursor: pointer; padding: 10px 0 12px; white-space: nowrap; color: var(--rx-muted); border-bottom: 3px solid transparent; transition: color calc(0.2s * var(--rx-speed)); }
.cat-tabs button:hover { color: var(--rx-ink); }
.cat-tabs button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.cat-tabs button[aria-selected="true"] { color: var(--rx-ink); font-weight: var(--rx-w-strong); border-bottom-color: var(--rx-ink); }

.fs-btn { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 0 2px; cursor: pointer; }
.fs-btn:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 4px; }
.fs-ico { position: relative; display: inline-flex; }
.fs-btn:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.fs-btn svg { width: 20px; height: 20px; }
.fs-btn .badge { position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; background: var(--rx-ink); color: var(--rx-page); font-size: 11px; letter-spacing: 0; }
.scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity calc(0.3s * var(--rx-speed)), visibility 0s linear calc(0.3s * var(--rx-speed)); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(460px, 100vw); display: grid; grid-template-rows: auto 1fr auto; background: var(--rx-page); transform: translateX(100%); visibility: hidden; transition: transform calc(0.3s * var(--rx-speed)) var(--rx-ease), visibility 0s linear calc(0.3s * var(--rx-speed)); }
.drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer.open + .scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
html:has(.drawer.open) { overflow: hidden; }
.drawer-head { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--rx-rule); }
.drawer-head h2 { margin: 0 auto 0 0; font-size: calc(24px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.06em; }
.drawer-head button { all: unset; cursor: pointer; }
.drawer-head .clear { text-decoration: underline; text-underline-offset: 4px; }
.drawer-head .x svg { width: 18px; height: 18px; display: block; }
.drawer-head { padding-right: calc(24px + var(--sb, 0px)); }
.drawer-body { overflow-y: auto; }
.fs-sec { padding: 20px 24px; border-bottom: 1px solid var(--rx-rule); }
.fs-sec h3 { margin: 0 0 14px; font: inherit; font-weight: var(--rx-w-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { all: unset; cursor: pointer; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 6px; border: 1px solid color-mix(in srgb, var(--rx-ink) 45%, transparent); font-size: var(--t-item); font-weight: 400; }
.chips button svg { width: 20px; height: 20px; flex: none; }
.chips button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.chips button:hover { border-color: var(--rx-ink); }
.fs-group { border-bottom: 1px solid var(--rx-rule); }
.fs-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-weight: var(--rx-w-strong); }
.fs-group summary .t { display: grid; gap: 4px; }
.fs-group summary .v { font-size: var(--t-small); font-weight: 400; }
.fs-group.has > summary { box-shadow: inset 3px 0 0 var(--rx-ink); }

.fs-opt .n { font-weight: 400; color: var(--rx-muted); }
.fs-group summary::-webkit-details-marker { display: none; }
.fs-group summary .chev { transition: transform calc(0.2s * var(--rx-speed)); }
.fs-group[open] summary .chev { transform: rotate(180deg); }
.fs-group .opts { display: grid; gap: 22px; padding: 4px 24px 24px; }
.fs-opt { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--t-item); }
.fs-opt .l { flex: 1; }
.fs-opt .box { width: 22px; height: 22px; box-sizing: border-box; border: 1px solid var(--rx-ink); display: grid; place-items: center; flex: none; }
.fs-opt .box svg { width: 14px; height: 14px; opacity: 0; }
.fs-opt input[type="radio"] + .box { border-radius: 50%; }
.fs-opt input:checked + .box { background: var(--rx-ink); }
.fs-opt input[type="checkbox"]:checked + .box svg { opacity: 1; }
.fs-opt input[type="radio"]:checked + .box { background: var(--rx-page); box-shadow: inset 0 0 0 5px var(--rx-ink); }
.fs-opt input:focus-visible + .box { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.fs-opt:hover .l { text-decoration: underline; text-underline-offset: 4px; }



.fs-opt .swatch { width: 16px; height: 16px; }
.more { all: unset; cursor: pointer; justify-self: start; text-decoration: underline; text-underline-offset: 4px; font-size: var(--t-item); }
/* Size as adidas: tiles three to a row on a grey hairline; chosen in ink; none left in that size, struck. */
.fs-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fs-sizes button { all: unset; box-sizing: border-box; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--rx-ink) 45%, transparent); cursor: pointer; font-size: var(--t-item); }
.fs-sizes button:hover { border-color: var(--rx-ink); }
.fs-sizes button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.fs-sizes button[aria-pressed="true"] { background: var(--rx-ink); border-color: var(--rx-ink); color: var(--rx-page); }
.fs-sizes button[disabled] { color: var(--rx-muted); border-color: var(--rx-rule); background: linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--rx-muted) calc(50% - 0.6px), var(--rx-muted) calc(50% + 0.6px), transparent calc(50% + 0.6px)); cursor: not-allowed; }
.range { position: relative; height: 22px; margin: 10px 11px 0; }
.range .track, .range .fill { position: absolute; top: 10px; height: 1px; background: var(--rx-rule); left: 0; right: 0; }
.range .fill { background: var(--rx-ink); }
.range input { position: absolute; inset: 0 -11px; width: calc(100% + 22px); margin: 0; appearance: none; background: none; pointer-events: none; }
.range input::-webkit-slider-runnable-track { height: 22px; background: none; }
.range input::-moz-range-track { height: 22px; background: none; }
.range input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--rx-ink); box-shadow: inset 0 0 0 2px var(--rx-ink), inset 0 0 0 4px var(--rx-page); cursor: grab; }
.range input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--rx-ink); box-shadow: inset 0 0 0 2px var(--rx-ink), inset 0 0 0 4px var(--rx-page); cursor: grab; }
.range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.range-vals { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0 0; font-size: var(--t-small); }
.range-vals span { white-space: nowrap; }
.range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.range-fields label { display: grid; gap: 8px; font-size: var(--t-small); font-weight: var(--rx-w-strong); }
.range-fields input { all: unset; box-sizing: border-box; height: 56px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--rx-ink) 45%, transparent); font-size: var(--t-item); font-weight: 400; letter-spacing: 0.03em; }
.range-fields input:focus-visible { border-color: var(--rx-ink); outline: 1px solid var(--rx-ink); }
.fs-count { margin: 0 0 12px; font-size: var(--t-small); }
.drawer-foot { padding: 16px 24px 24px; border-top: 1px solid var(--rx-rule); }
.drawer-foot .btn-ink { width: 100%; justify-content: space-between; }
.empty { padding: 80px var(--rx-gutter) 120px; text-align: center; display: grid; gap: 20px; justify-items: center; }

/* Shop detail (PDP): two columns. The photographs as Dilara shows them over 62% of the width, one at a time and held
   in view; the details, crumbs first, in the other 38%. */
.pdp { display: grid; grid-template-columns: minmax(0, 62.4%) minmax(0, 1fr); }
.pdp { height: calc(100svh - var(--rx-head-h)); }
.pd-media { position: relative; height: 100%; min-height: 0; }
.slides img { cursor: zoom-in; }
.slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: -2px; }
.slides figure { flex: 0 0 100%; min-width: 0; margin: 0; overflow: hidden; scroll-snap-align: start; background: var(--rx-page); }
.slides img { display: block; width: 100%; height: 100%; object-fit: contain; }
.slide-btn { all: unset; position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--rx-ink); filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
.slide-btn svg { width: 18px; height: 18px; }
.slide-btn.prev { left: 10px; } .slide-btn.next { right: 10px; }
.slide-btn:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: -4px; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 4px; }
.dots button { all: unset; cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; }
.dots button::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rx-ink); opacity: 0.3; box-shadow: 0 0 0 1px rgba(255,255,255,0.6); }
.dots button[aria-current="true"]::before { opacity: 1; }
.dots button:focus-visible { outline: 2px solid var(--rx-ink); }
.pd-crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.pd-crumbs a { color: inherit; }
.pdp .info { height: 100%; overflow-y: auto; align-content: safe center; scrollbar-width: thin; align-self: start; display: grid; gap: 26px; width: 100%; max-width: 500px; margin: 0 auto; padding: 40px 32px 48px; box-sizing: border-box; }
.crumbs { font-size: var(--t-small); color: var(--rx-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.pd-kicker { font-size: var(--t-small); color: var(--rx-muted); }
.pdp h1 { margin: 6px 0 0; font-size: calc(30px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); line-height: 1.05; letter-spacing: 0.04em; }
.pdp .price { margin-top: 10px; }
.opt { display: grid; gap: 12px; }
.opt .row { display: flex; justify-content: space-between; }
.opt .row span:first-child { font-weight: var(--rx-w-strong); }
.colour-name { font-size: var(--t-small); color: var(--rx-muted); }
.one-size { font-size: var(--t-item); }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sizes button { all: unset; box-sizing: border-box; height: 46px; display: grid; place-items: center; background: var(--rx-tile); cursor: pointer; }
.sizes button:hover { box-shadow: inset 0 0 0 1px var(--rx-ink); }
.sizes button[aria-pressed="true"] { background: var(--rx-ink); color: var(--rx-page); }
.sizes button[disabled] { color: var(--rx-muted); background: linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--rx-muted) calc(50% - 0.6px), var(--rx-muted) calc(50% + 0.6px), transparent calc(50% + 0.6px)), var(--rx-tile); cursor: not-allowed; box-shadow: none; }
.link-btn { all: unset; cursor: pointer; }
.sg { display: grid; gap: 18px; padding: 24px 24px 40px; font-size: var(--t-item); }
.sg h3 { margin: 0; font: inherit; font-size: calc(20px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.06em; }
.sg h4 { margin: 12px 0 0; font: inherit; font-weight: var(--rx-w-strong); }
.sg p { margin: 0; color: var(--rx-muted); }
.sg dl { margin: 0; display: grid; gap: 12px; }
.sg dt { font-weight: var(--rx-w-strong); }
.sg dd { margin: 4px 0 0; color: var(--rx-muted); }
.sg-units { flex: none; }
.sg-table { overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.sg table { width: 100%; table-layout: fixed; border-collapse: collapse; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg col.label { width: 80px; }
.sg th[scope="row"] { white-space: normal; }
.sg th, .sg td { padding: 7px 0 7px 8px; font-weight: 400; text-align: right; }
.sg th[scope="row"], .sg thead th:first-child { position: sticky; left: 0; z-index: 1; padding-left: 0; text-align: left; background: var(--rx-page); }
.sg-hint { font-size: var(--t-small); }
.sg thead th { color: var(--rx-muted); }
.sg thead th { padding-bottom: 12px; }
.added { min-height: 1.2em; font-size: var(--t-small); }
.acc details { border-top: 1px solid var(--rx-rule); }
.acc details:last-child { border-bottom: 1px solid var(--rx-rule); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.acc summary .chev { transition: transform calc(0.2s * var(--rx-speed)); }
.acc details[open] summary .chev { transform: rotate(180deg); }
.acc summary::-webkit-details-marker { display: none; }
.acc .copy { padding: 0 0 18px; font-size: var(--t-item); color: var(--rx-muted); }
.related .head { padding-top: 56px; }

/* About, as KNWLS sets it: the title centred, then the text in one narrow column. */
.about { padding: 72px var(--rx-gutter) 120px; display: grid; justify-items: center; gap: 36px; }
.about-text { width: min(680px, 100%); display: grid; gap: 1em; }
.about-text .copy + .copy { margin-top: 0; }

/* Cart */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 calc(var(--rx-gutter) * 1.5); padding: 0 var(--rx-gutter) 96px; align-items: start; }
.lines { border-top: 1px solid var(--rx-rule); }
.line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rx-rule); }
.line img { display: block; width: 112px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rx-tile); }
.line .what { display: grid; align-content: start; gap: 6px; font-size: var(--t-item); }
.line .end { display: grid; justify-items: end; align-content: space-between; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rx-rule); }
.qty button { all: unset; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.qty span { min-width: 24px; text-align: center; }
.remove { all: unset; cursor: pointer; color: var(--rx-muted); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 4px; }
.summary { position: sticky; top: calc(var(--rx-head-h) + 24px); background: var(--rx-tile); padding: 28px; display: grid; gap: 14px; }
.summary .row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-item); }
.summary .total { border-top: 1px solid var(--rx-rule); padding-top: 14px; font-size: var(--t-ui); }
.summary .note { font-size: var(--t-small); color: var(--rx-muted); margin: 0; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field span { font-size: var(--t-small); color: var(--rx-muted); }
.field input, .field select { all: unset; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid var(--rx-rule); font-size: var(--t-item); letter-spacing: 0.03em; background: transparent; }
.field select { line-height: 46px; }
.field input:focus, .field select:focus { border-color: var(--rx-ink); }
.choice { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--rx-rule); cursor: pointer; font-size: var(--t-item); }
.choice:has(input:checked) { border-color: var(--rx-ink); }
.choice span:first-child { display: flex; gap: 12px; align-items: center; }
.choice input { accent-color: var(--rx-ink); margin: 0; }
.mini { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: var(--t-item); }
.mini img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; }
.done { padding: 120px var(--rx-gutter); text-align: center; display: grid; gap: 20px; justify-items: center; }

@media (max-width: 900px) {
  .pdp, .cart { grid-template-columns: 1fr; }
  .pdp .info { position: static; padding: 28px var(--rx-gutter) 40px; max-width: none; }
  .pdp { height: auto; }
  .pdp .info { height: auto; overflow: visible; }
  .pd-media { position: relative; top: auto; height: auto; }
  .slides { aspect-ratio: 2 / 3; height: auto; }
  .slide-btn { display: none; }
  .viewer-track figure { padding: 0 20px; }
  .cat-tabs { gap: 22px; }
  .summary { position: static; margin-top: 24px; }
  .fields { grid-template-columns: 1fr; }
  .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coll-head h1 { font-size: calc(40px * var(--rx-fit) * var(--rx-type)); }
  .line { grid-template-columns: 88px minmax(0, 1fr); } .line img { width: 88px; } .line .end { grid-column: 2; justify-items: start; gap: 10px; }
  .header nav a, .header nav .link-btn { display: none; } .header nav:last-child [data-open="bag"] { display: inline; white-space: nowrap; }
  .header .menu-btn { all: unset; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: -13px; cursor: pointer; }
  .header .mark { width: calc(var(--rx-mark) * 0.8); }
  .two { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega { grid-template-columns: 1fr 1fr; } .mega .ph { display: none; }
  .band { justify-content: flex-start; } .band h2 { font-size: calc(28px * var(--rx-fit) * var(--rx-type)); }
  footer .cols { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 32px 24px; }
  footer .legal { justify-content: space-between; }
  .dd-sub { position: static; opacity: 1; visibility: visible; display: none; padding: 4px 0 6px 16px; width: auto; }
  .dd > li.open > .dd-sub { display: grid; }
  .panel { width: calc(100vw - 32px); max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- attempt 21 ---------- */
.zoom { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--rx-page); color: var(--rx-ink); }
.zoom[hidden] { display: none; }
html:has(.zoom:not([hidden])) { overflow: hidden; }
.zoom-stage { position: relative; overflow: hidden; min-height: 0; }
.zoom-stage img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transition: transform calc(0.3s * var(--rx-speed)) var(--rx-ease); }
.zoom.in .zoom-stage img { transform: scale(2.2); cursor: zoom-out; }
.zoom-x { all: unset; position: absolute; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.zoom-x svg { width: 18px; height: 18px; }
.zoom-x:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: -4px; }
.zoom .slide-btn { z-index: 2; }
.zoom-thumbs { display: flex; justify-content: center; gap: 8px; padding: 12px 24px 16px; overflow-x: auto; }
.zoom-thumbs button { all: unset; flex: none; cursor: pointer; width: 56px; height: 70px; padding-bottom: 6px; border-bottom: 3px solid transparent; }
.zoom-thumbs button[aria-current="true"] { border-bottom-color: var(--rx-ink); }
.zoom-thumbs button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.zoom-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--rx-tile); }

/* The bag, as Dilara's panel; the log in, as adidas' panel. Neither keeps anything yet. */
.header nav .link-btn { text-transform: inherit; letter-spacing: inherit; }
.bag-empty { display: grid; justify-items: center; gap: 14px; padding: 120px 24px; text-align: center; font-size: var(--t-item); }
.bag-empty p { margin: 0; }
.bag-empty .btn-ink { margin-top: 12px; }
.bag-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--rx-rule); font-size: var(--t-item); }
.bag-line img { display: block; width: 88px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rx-tile); }
.bag-line .what { display: grid; align-content: start; justify-items: start; gap: 6px; }
.bag-line .end { display: grid; justify-items: end; align-content: space-between; }
#bag-foot { display: grid; gap: 10px; }
#bag-foot[hidden] { display: none; }
.bag-sum { display: flex; justify-content: space-between; font-size: var(--t-item); font-weight: var(--rx-w-strong); }
#bag-foot .note { margin: 0; font-size: var(--t-small); color: var(--rx-muted); }
.bag-view { justify-self: center; font-size: var(--t-item); }
.login { display: grid; gap: 18px; padding: 28px 24px 40px; font-size: var(--t-item); }
.login h3 { margin: 0; font-size: calc(28px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.04em; }
.login p { margin: 0; }
.login .fine { font-size: var(--t-small); color: var(--rx-muted); }
.login .fine a { text-decoration: underline; text-underline-offset: 3px; }
.login .btn-ink { width: 100%; justify-content: space-between; }
.login .note { min-height: 1.2em; font-size: var(--t-small); }

/* Collections viewer: the site's chevrons and close. */
.viewer { grid-template-rows: auto minmax(0, 1fr); }
.viewer-head .x svg { width: 18px; height: 18px; display: block; }
.viewer-arrow svg { width: 18px; height: 18px; }

/* Help, as Phoebe Philo's: the topics in a column, the chosen one underlined; its questions open in place. */
.help { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 40px; width: min(1000px, calc(100% - 2 * var(--rx-gutter))); margin: 0 auto; padding: 72px 0 120px; }
.help-cats { display: grid; align-content: start; gap: 12px; }
.help-cats button { all: unset; cursor: pointer; justify-self: start; font-size: var(--t-item); }
.help-cats button[aria-selected="true"], .help-cats button:hover { text-decoration: underline; text-underline-offset: 4px; }
.help-cats button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.help-qs { display: grid; align-content: start; gap: 4px; }
.help-qs [data-topic][hidden] { display: none; }
.help-qs details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 0; font-size: var(--t-item); }
.help-qs details summary::-webkit-details-marker { display: none; }
.help-qs details[open] summary .chev { transform: rotate(180deg); }
.help-qs details p { margin: 0 0 14px; max-width: 60ch; color: var(--rx-muted); font-size: var(--t-item); line-height: 1.45; text-transform: none; letter-spacing: 0.02em; }

/* Articles (shipping, returns, privacy, terms), as adidas' help articles, the column centred on the page. */
.article { width: min(720px, calc(100% - 2 * var(--rx-gutter))); margin: 0 auto; padding: 48px 0 104px; display: grid; gap: 16px; }
.article .crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.article .page-title { margin: 28px 0 8px; }
.article h2 { margin: 22px 0 0; font: inherit; font-size: var(--t-item); font-weight: var(--rx-w-strong); text-transform: uppercase; letter-spacing: 0.06em; }
.article ol, .article ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--t-body); line-height: 1.4; }
.article .draft { font-size: var(--t-small); color: var(--rx-muted); }
.plain-table { width: 100%; border-collapse: collapse; font-size: var(--t-item); font-variant-numeric: tabular-nums; }
.plain-table th, .plain-table td { padding: 8px 12px 8px 0; text-align: left; font-weight: 400; vertical-align: top; }
.plain-table thead th { color: var(--rx-muted); }
/* A short window keeps the details in one screen by drawing them closer together. */
@media (min-width: 901px) and (max-height: 820px) { .pdp .info { gap: 14px; padding-top: 20px; padding-bottom: 20px; } .pdp .sizes button { height: 40px; } .pdp .acc summary { padding: 12px 0; } }
@media (max-width: 900px) {
  .help { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .help-cats { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .help-cats button { flex: none; white-space: nowrap; }
}

/* ---------- attempt 22 ---------- */
/* Bag, as adidas' cart in the panel: boxed lines, the site's 18 px icons, then the order summary. */
.drawer-head h2 .n { margin-left: 6px; font-size: var(--t-item); font-weight: 400; color: var(--rx-muted); letter-spacing: 0.04em; }
.bag-note { margin: 0; padding: 18px 24px 0; font-size: var(--t-small); color: var(--rx-muted); }
.bag-lines { display: grid; gap: 12px; padding: 16px 24px 24px; }
.bag-line { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0; padding: 0; border: 1px solid var(--rx-rule); font-size: var(--t-item); }
.bag-line .pic img { display: block; width: 116px; height: 100%; min-height: 145px; object-fit: cover; background: var(--rx-tile); }
.bag-line .what { display: grid; grid-template-rows: auto auto auto 1fr; justify-items: stretch; gap: 6px; padding: 14px 16px 16px; min-width: 0; }
.bag-line .top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.bag-line .nm:hover { text-decoration: underline; text-underline-offset: 4px; }
.bag-line .muted { font-size: var(--t-small); }
.bin { all: unset; flex: none; width: 18px; height: 18px; cursor: pointer; position: relative; }
.bin::before { content: ""; position: absolute; inset: -10px; }
.bin svg { display: block; width: 18px; height: 18px; }
.bin:hover { color: var(--rx-accent); }
.bin:focus-visible, .qty button:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.bag-line .bot { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: 12px; }
.bag-line .pr { font-weight: var(--rx-w-strong); }
.qty button { width: 40px; height: 40px; }
.qty button svg { display: block; width: 18px; height: 18px; }
.qty button[disabled] { opacity: 0.3; cursor: default; }
#bag-foot { display: grid; gap: 16px; }
.sum h3 { margin: 0 0 14px; font-size: calc(24px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.06em; }
.sum dl { margin: 0; display: grid; gap: 8px; font-size: var(--t-item); }
.sum dl div { display: flex; justify-content: space-between; gap: 16px; }
.sum dd { margin: 0; }
.sum .total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rx-rule); font-weight: var(--rx-w-strong); }
.policy { margin: 0; font-size: var(--t-small); color: var(--rx-muted); line-height: 1.4; }
.policy a { color: var(--rx-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Log in steps. */
.login .who { display: flex; gap: 12px; align-items: baseline; }
.login .fields { gap: 12px; }
.login .link-btn.fine { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.login-links { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-small); }

/* Careers, as adidas': the search over the atelier's photograph, then the newest roles as cards on a grey ground. */
.careers-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: calc(min(680px, 86svh) + var(--rx-head-h)); padding: calc(var(--rx-head-h) + 120px) var(--rx-gutter) 120px; box-sizing: border-box; background: #141210; color: #fff; text-align: center; }
.careers-hero .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.careers-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 10, 9, 0.5); }
.careers-hero .in { display: grid; justify-items: center; gap: 28px; width: min(924px, 100%); }
.careers-hero .page-title { font-size: calc(72px * var(--rx-fit) * var(--rx-type)); }
.careers-hero p { margin: 0; max-width: 40ch; font-size: calc(24px * var(--rx-fit) * var(--rx-type)); line-height: 1.3; letter-spacing: 0.04em; }
.job-search { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; width: 100%; margin-top: 16px; text-align: left; color: var(--rx-ink); }
.job-search input, .pick-btn { box-sizing: border-box; height: 56px; padding: 0 18px; border: 1px solid var(--rx-rule); border-radius: 0; background: var(--rx-page); color: var(--rx-ink); font: inherit; font-size: calc(20px * var(--rx-fit) * var(--rx-type)); letter-spacing: 0.06em; text-transform: uppercase; }
.job-search input::placeholder { color: var(--rx-muted); opacity: 1; }
.job-search input:focus, .pick-btn:focus-visible { outline: none; border-color: var(--rx-ink); }
.job-search .btn-ink { height: 56px; font-size: calc(20px * var(--rx-fit) * var(--rx-type)); }
.pick { position: relative; }
.pick-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--rx-rule); background: var(--rx-page); color: var(--rx-ink); cursor: pointer; font-size: calc(20px * var(--rx-fit) * var(--rx-type)); letter-spacing: 0.06em; text-transform: uppercase; }
.pick-btn .pick-none { color: var(--rx-muted); }
.pick-btn .chev { transition: transform calc(0.25s * var(--rx-speed)) var(--rx-ease); }
.pick-btn[aria-expanded="true"] { border-color: var(--rx-ink); }
.pick-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pick-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 0; padding: 6px 0; list-style: none; background: var(--rx-page); color: var(--rx-ink); border: 1px solid var(--rx-ink); border-top: 0; text-align: left; }
.pick-list li { padding: 12px 18px; cursor: pointer; font-size: var(--t-item); }
.pick-list li:hover, .pick-list li:focus { background: var(--rx-tile); outline: none; }
.pick-list li[aria-selected="true"] { text-decoration: underline; text-underline-offset: 4px; }
.jobs-new { background: var(--rx-tile); padding: 100px var(--rx-gutter) 120px; }
.jobs-new .in { width: min(924px, 100%); margin: 0 auto; display: grid; justify-items: start; gap: 28px; }
.jobs-new h2 { margin: 0; font-size: calc(44px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.04em; line-height: 1.05; }
.job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; margin-top: 8px; }
.job { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; gap: 12px 32px; min-height: 230px; padding: 20px 18px 18px; background: var(--rx-page); color: var(--rx-ink); text-decoration: none; }
.job h3 { grid-column: 1; margin: 0; font-size: calc(26px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.04em; line-height: 1.1; }
.job .t { grid-column: 2; grid-row: 1; align-self: start; padding-top: 0.35em; font-size: var(--t-small); color: var(--rx-muted); white-space: nowrap; }
.job .d { grid-column: 1; margin: 0; font-size: calc(18px * var(--rx-fit) * var(--rx-type)); line-height: 1.35; color: var(--rx-muted); }
.job .m { grid-column: 1; grid-row: 3; align-self: end; margin: 0; font-size: var(--t-small); }
.job svg { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; margin-bottom: 4px; transition: transform calc(0.25s * var(--rx-speed)) var(--rx-ease); }
.job:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.job:hover svg { transform: translateX(4px); }
.jobs-new .btn-ink { margin-top: 8px; }

/* The job list: New open roles' 924 px column on the grey ground; the keywords, the three filters and the sort side by
   side in one white card on top, each filter a dropdown of ticks; the roles below as wide cards. */
.jobs-page { background: var(--rx-tile); }
.jobs-wrap { display: grid; grid-template-columns: minmax(0, 924px); justify-content: center; gap: 20px; padding: 56px var(--rx-gutter) 120px; }
.jobs-bar { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 20px 12px; padding: 20px; background: var(--rx-page); }
.jobs-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.jobs-chips:empty { display: none; }
.chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--rx-ink); color: var(--rx-page); cursor: pointer; font-size: var(--t-small); letter-spacing: 0.06em; text-transform: uppercase; }
.chip.clear { background: var(--rx-alert); }
.chip:hover { opacity: 0.85; }
.chip:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.jobs-q { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--rx-rule); border-radius: 0; background: var(--rx-page); color: var(--rx-ink); font: inherit; font-size: var(--t-item); letter-spacing: 0.06em; text-transform: uppercase; }
.jobs-q::placeholder { color: var(--rx-muted); opacity: 1; }
.jobs-q:focus { outline: none; border-color: var(--rx-ink); }
.jobs-bar .pick-btn { height: 48px; padding: 0 14px; font-size: var(--t-item); }
.pick.multi .pick-list { box-sizing: border-box; display: grid; gap: 2px; padding: 8px 0; }
.pick.multi .fs-opt { padding: 8px 14px; }
.jobs-list { display: grid; gap: 20px; }
.jobs-list .job { min-height: 176px; }
#jobs-none { margin: 0; font-size: var(--t-item); }

/* A role, centred as the help articles: the crumbs, the title and the introduction, the facts in two columns of three,
   the work and what it asks, Apply now at the foot. */
.job-facts { margin: 8px 0; padding: 22px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; border-block: 1px solid var(--rx-rule); }
.job-facts div { display: grid; gap: 4px; align-content: start; }
.job-facts dt { font-size: var(--t-small); color: var(--rx-muted); letter-spacing: 0.06em; }
.job-facts dd { margin: 0; font-size: var(--t-item); letter-spacing: 0.04em; }
.job-copy { display: grid; gap: 16px; }
.job-apply { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.job-apply .note { min-height: 1.2em; margin: 0; font-size: var(--t-small); color: var(--rx-muted); }
.job-gone { display: grid; justify-items: start; gap: 28px; padding: 120px var(--rx-gutter); }

/* Checkout, as Shopify's one page: the form on white at the left, the order on grey at the right to the window's
   edge; inputs with their labels inside, rising when filled; options in one bordered group. The site's header keeps only
   the logo and Bag, and the newsletter band and the footer give way to the policies, as Shopify's checkout does. */
body[data-page="checkout"] .header nav:first-child, body[data-page="checkout"] .header [data-open="login"], body[data-page="checkout"] footer { visibility: hidden; }
body[data-page="checkout"] footer, body[data-page="checkout"] .band { display: none; }
.sc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: calc(100svh - var(--rx-head-h)); border-top: 1px solid var(--rx-rule); }
.sc-main { grid-column: 1; grid-row: 1; padding: 40px 48px 56px var(--rx-gutter); }
.sc-form { width: min(560px, 100%); margin-left: auto; display: grid; gap: 36px; text-transform: none; letter-spacing: 0.02em; }
.sc-sec { display: grid; gap: 12px; }
.sc-sec h2, .sc-head h2 { margin: 0; font-size: calc(24px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); letter-spacing: 0.04em; text-transform: uppercase; }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--t-small); }
.sc-sec > .muted { margin: -4px 0 0; font-size: var(--t-small); }
.sc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.sc-in { position: relative; display: block; }
.sc-in input, .sc-in select { all: unset; box-sizing: border-box; display: block; width: 100%; height: 54px; padding: 22px 14px 6px; border: 1px solid var(--rx-rule); background: var(--rx-page); color: var(--rx-ink); font-size: var(--t-item); }
.sc-in span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--rx-muted); font-size: var(--t-item); pointer-events: none; transition: all calc(0.15s * var(--rx-speed)) var(--rx-ease); }
.sc-in input:focus + span, .sc-in input:not(:placeholder-shown) + span, .sc-in select + span { top: 15px; font-size: 12px; }
.sc-in input:focus, .sc-in select:focus { border-color: var(--rx-ink); outline: 1px solid var(--rx-ink); outline-offset: -2px; }
.sc-in .chev { position: absolute; right: 14px; top: 18px; pointer-events: none; }
.sc-in select { padding-right: 44px; cursor: pointer; }
.sc-sec .fs-opt { font-size: var(--t-small); }
.sc-group { border: 1px solid var(--rx-rule); }
.sc-opt { display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; font-size: var(--t-item); }
.sc-opt + .sc-opt, .sc-panel + .sc-opt { border-top: 1px solid var(--rx-rule); }
.sc-opt:has(input:checked) { background: var(--rx-tile); box-shadow: inset 0 0 0 1px var(--rx-ink); }
.sc-opt input { accent-color: var(--rx-ink); margin: 0; width: 18px; height: 18px; }
.sc-opt .t { flex: 1; display: grid; gap: 2px; }
.sc-opt .t .muted, .sc-opt .cards { font-size: var(--t-small); color: var(--rx-muted); }
.sc-panel { display: grid; gap: 12px; padding: 16px; background: var(--rx-tile); border-top: 1px solid var(--rx-rule); }
.sc-panel p { margin: 0; font-size: var(--t-small); }
.sc-pay { width: 100%; height: 58px; font-size: var(--t-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.sc-form .note { min-height: 1.2em; margin: -24px 0 0; font-size: var(--t-small); color: var(--rx-alert); }
.sc-policies { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 18px; border-top: 1px solid var(--rx-rule); font-size: var(--t-small); }
.sc-policies a { text-decoration: underline; text-underline-offset: 3px; }
.sc-side { grid-column: 2; grid-row: 1; background: var(--rx-tile); border-left: 1px solid var(--rx-rule); padding: 40px var(--rx-gutter) 56px 48px; }
.sc-side-in { position: sticky; top: calc(var(--rx-head-h) + 40px); width: min(440px, 100%); display: grid; gap: 20px; text-transform: none; letter-spacing: 0.02em; }
#co-lines { display: grid; gap: 16px; }
.sc-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: var(--t-item); }
.sc-line .th { position: relative; width: 64px; height: 64px; border: 1px solid var(--rx-rule); background: var(--rx-page); }
.sc-line img { width: 100%; height: 100%; object-fit: cover; }
.sc-line b { position: absolute; top: -9px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; background: var(--rx-ink); color: var(--rx-page); font: 600 12px/1 ui-sans-serif, system-ui, sans-serif; }
.sc-line .nm { display: grid; gap: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.sc-line .nm .muted { font-size: var(--t-small); text-transform: none; }
.sc-sum { margin: 0; display: grid; gap: 10px; font-size: var(--t-item); }
.sc-sum div { display: flex; justify-content: space-between; gap: 16px; }
.sc-sum dt .muted { margin-left: 8px; font-size: var(--t-small); }
.sc-sum dd { margin: 0; }
.sc-sum .total { margin-top: 6px; align-items: baseline; font-size: calc(24px * var(--rx-fit) * var(--rx-type)); font-weight: var(--rx-w-strong); }
.sc-sum .total small { margin-right: 8px; font-size: var(--t-small); font-weight: 400; color: var(--rx-muted); }
.sc-toggle { display: none; }
.sc-done { padding: 120px var(--rx-gutter); text-align: center; display: grid; gap: 20px; justify-items: center; }
.sc-done h1 { margin: 0; font-size: var(--t-display); }
.sc-done p { margin: 0; max-width: 46ch; }

/* The phone's menu: a drawer from the left; Shop and Collections fold open in place with the site's chevron; the
   support links small at the foot. The button shows below 900 px only. */
@media (min-width: 901px) { .header .menu-btn { display: none; } }
.drawer.left { left: 0; right: auto; transform: translateX(-100%); }
.drawer.left.open { transform: none; }
.mm-list, .mm-sub, .mm-small { list-style: none; margin: 0; padding: 0; }
.mm-list > li { border-bottom: 1px solid var(--rx-rule); }
.mm-btn, .mm-list > li > a { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 60px; padding: 0 24px; cursor: pointer; font-size: var(--t-ui); letter-spacing: 0.06em; }
.mm-btn .chev { transition: transform calc(0.25s * var(--rx-speed)) var(--rx-ease); }
.mm-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mm-btn:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: -4px; }
.mm-sub { display: grid; padding: 0 24px 16px; }
.mm-sub a { display: flex; align-items: center; min-height: 40px; font-size: var(--t-item); }
.mm-sub a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mm-g .mm-btn { min-height: 40px; padding: 0; font-size: var(--t-item); }
.mm-g .mm-sub { padding: 0 0 8px 16px; }
.mm-small { display: grid; gap: 4px; padding: 24px; font-size: var(--t-small); color: var(--rx-muted); }
.mm-small a { display: inline-flex; align-items: center; min-height: 32px; }

/* Collections: the head row, the look and its arrows on one grid; the arrows sit on the gutter under Look n and the
   cross, the look centred between them. */
.viewer { grid-template-rows: 46px minmax(0, 1fr); }
.viewer-head { box-sizing: border-box; height: 46px; padding-top: 0; padding-bottom: 0; }
.viewer-track figure { box-sizing: border-box; height: 100%; padding: 0 calc(var(--rx-gutter) + 42px) 46px; }
.viewer-track img { max-height: calc(100svh - 92px); }
.viewer-arrow { width: 18px; height: 18px; }
.viewer-arrow::before { content: ""; position: absolute; inset: -12px; }
.viewer-arrow svg { display: block; }
.viewer-arrow.prev { left: var(--rx-gutter); }
.viewer-arrow.next { right: var(--rx-gutter); }
@media (max-width: 900px) {
  .job-search { grid-template-columns: 1fr; }
  .job-grid { grid-template-columns: 1fr; }
  .careers-hero { padding: calc(var(--rx-head-h) + 64px) var(--rx-gutter) 80px; min-height: 0; }
  .careers-hero .page-title { font-size: calc(48px * var(--rx-fit) * var(--rx-type)); }
  .jobs-new { padding: 64px var(--rx-gutter) 80px; }
  .jobs-wrap { padding-top: 24px; }
  .jobs-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
  .jobs-chips { margin-top: 4px; }
  .sc { grid-template-columns: 1fr; }
  .sc-main, .sc-side { grid-column: auto; grid-row: auto; }
  .sc-side { border-left: 0; border-bottom: 1px solid var(--rx-rule); padding: 0 var(--rx-gutter); }
  .sc-toggle { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; cursor: pointer; font-size: var(--t-item); text-transform: none; }
  .sc-toggle .l { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 3px; }
  .sc-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .sc-toggle .co-total { font-weight: var(--rx-w-strong); }
  .sc-side-in { position: static; width: 100%; display: none; padding-bottom: 24px; }
  .sc-side.open .sc-side-in { display: grid; }
  .sc-main { padding: 28px var(--rx-gutter) 48px; }
  .sc-form { width: 100%; }
  .sc-row { grid-template-columns: 1fr; }
  .jobs-bar .jobs-q { grid-column: 1 / -1; }
  .viewer-track figure { padding: 0 calc(var(--rx-gutter) + 30px) 46px; }
}