/* Runway shopper site: page CSS shared by every page, on the system tokens. The first half is the
   storefront redesign's shop.css (bar, cards, product page, bag), so both designs read as one site;
   the second half is the account, checkout and feature parts this design adds. */

/* ---------------------------------------------------------------- the bar: the bag word stays on every width */
.nav__bag { gap: var(--s-2); }
.nav__bag [data-bag-count] { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--surface); font: 500 var(--t-label)/1 var(--font-text); font-variant-numeric: tabular-nums; }
.nav__bag.has-items [data-bag-count] { background: var(--accent); color: var(--accent-ink, #0a0a0a); }
@media (max-width: 1023px) {
  .nav:not(.is-open) .nav__actions > .nav__bag { display: inline-flex; }
  .nav:not(.is-open) .nav__actions { gap: var(--s-2); }
}
@media (max-width: 639px) { .nav:not(.is-open) .nav__actions > .btn--primary { display: none; } }

/* ---------------------------------------------------------------- inner pages: sections in whole screens
   build.py gives each section its screens on a desktop (--sd), a tablet (--st) and a phone (--sp); a
   section holds them and grows past them (more pieces shown, a long size guide) rather than overlap. */
main[data-flow] > .section { --h: var(--sd, 1); --hm: var(--sp, var(--sd, 1)); height: auto; min-height: calc(var(--h) * 100vh); min-height: calc(var(--h) * 100svh); }
main[data-flow] > .section > .wrap { height: auto; }
@media (min-width: 640px) and (max-width: 1279px) { main[data-flow] > .section { --h: var(--st, var(--sd, 1)); } }
@media (max-width: 639px) { main[data-flow] > .section { min-height: calc(var(--hm) * 100vh); min-height: calc(var(--hm) * 100lvh); } }

/* the close's button takes the page's one button size where the slab would read as a band */
@media (min-width: 640px) and (max-width: 1023px) {
  footer.closing .closing__cta.close--type > .btn--xl { align-self: flex-start; width: auto; height: var(--btn-h); font: 500 var(--t-body)/1 var(--font-text); letter-spacing: 0; }
}

/* ---------------------------------------------------------------- the hero's picture: three photographs composed
   into one (_build/lookbooks.py), on the .wrap's lines and ending 24px above the fold, as on the home page */
#hero .hero__stage:has(> picture) { margin-inline: 0; margin-bottom: calc(var(--s-5) - var(--hpadb, 64px)); border-radius: var(--r-lg); }
#hero .hero__stage > picture { position: absolute; inset: 0; }
#hero .hero__stage > picture > img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 640px) and (max-width: 1023px) { #hero .hero__stage:has(> picture) { margin-bottom: calc(90px - var(--hpadb, 64px)); } }
@media (max-width: 639px) { #hero .hero__stage:has(> picture) { aspect-ratio: 1 / 1; margin-bottom: 0; } }

/* ---------------------------------------------------------------- breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); color: var(--muted); font-size: var(--t-small); }
.crumbs a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs > li { display: flex; gap: var(--s-2); }
.crumbs > li + li::before { content: "/"; color: var(--line-strong); }

/* ---------------------------------------------------------------- product cards */
.tile--product { --tile-ratio: 2 / 3; gap: var(--s-3); }
.tile--product .tile__media > img { position: absolute; inset: 0; }
.tile__media > img.is-cutout { object-fit: contain; padding: 7% 9%; }
.tile--product .tile__media > img + img { opacity: 0; transition: opacity 320ms var(--ease), transform 600ms var(--ease); }
.tile--product:is(:hover, :focus-visible) .tile__media > img + img { opacity: 1; }
.tile--product .tile__facts { margin-top: 0; }
.tile--product .tile__head { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.tile--product .tile__head > h3 { font-size: var(--t-body); font-weight: 400; line-height: 1.4; }
.tile--product .tile__price { font-weight: 500; }
.tile--product .tile__price s { margin-left: var(--s-2); color: var(--muted); font-weight: 400; }
.tile__media > .badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
.tile__media > .badge--quiet { background: var(--bg); color: var(--ink); }

/* a product grid: four across on a desktop, three on a tablet, two on a phone; never one card across a row */
.grid.plp-grid { row-gap: var(--s-7); }
@media (min-width: 640px) and (max-width: 1023px) { .grid.plp-grid > .tile { grid-column: auto / span 4 !important; } }
@media (max-width: 639px) { .grid.plp-grid > .tile { grid-column: auto / span 6 !important; } .grid.plp-grid { row-gap: var(--s-6); } }
/* three of a kind (labels, more pieces): three across down to a tablet, the first two on a phone */
@media (min-width: 640px) and (max-width: 1023px) { .grid.three-up > .tile { grid-column: auto / span 4 !important; } }
@media (max-width: 639px) { .grid.three-up > .tile { grid-column: auto / span 6 !important; } .grid.three-up > .tile:nth-child(3) { display: none; } }
.rel-grid .tile--product { --tile-ratio: 4 / 5; }
/* a phone and a small desktop: three-of-a-kind cards taller, so the row fills its screen */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) { .grid.three-up > .tile { --tile-ratio: 2 / 3; } }
/* a label with three pieces or fewer: wider cards, square, so the row holds one screen */
.plp-grid > .tile--product:is(.span-4, .span-6) { --tile-ratio: 1 / 1; }

/* ---------------------------------------------------------------- the collection bar: categories, filters, sort */
/* two rows on the content's left line: the categories, then the filters and the sort */
.plp-bar { display: grid; justify-items: start; gap: var(--s-4); margin-bottom: var(--s-6); }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab .muted { margin-left: var(--s-2); color: inherit; font-weight: 400; }
.plp-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.select { position: relative; display: inline-flex; }
.select select { appearance: none; height: var(--btn-h-sm); padding: 0 36px 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--bg); color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; max-width: 220px;
  transition: border-color var(--dur) var(--ease); }
.select select:hover { border-color: var(--ink); }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.plp-cats-select { display: none; }
@media (max-width: 639px) {
  .plp-cats { display: none; }
  .plp-cats-select { display: inline-flex; }
  .plp-tools { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .plp-tools .select, .plp-tools select { width: 100%; max-width: none; font-size: var(--t-body); }
}
.plp-foot { display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-7); }
.plp-empty { padding: var(--s-8) 0; }

/* ---------------------------------------------------------------- the product page: the buy box beside two photographs */
.hero__media.pdp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); overflow: visible; background: none; border-radius: 0; }
.pdp-gallery > .frame { height: 100%; min-height: 0; background: var(--surface); border-radius: var(--r-lg); }
.pdp-gallery > .frame::before { content: none; }
.pdp-gallery > .frame:only-child { grid-column: 1 / -1; }
.pdp-gallery .frame__img.is-cutout { object-fit: contain; padding: 6% 8%; }
.pdp-info { display: grid; gap: var(--s-5); align-content: start; }
.pdp-info h1 { font-size: var(--t-h2); }
main[data-pdp] .section h2 { font-size: var(--t-h3); }
.pdp-brand { font-weight: 500; }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); font-size: var(--t-lead); font-weight: 500; font-variant-numeric: tabular-nums; }
.pdp-price s { color: var(--muted); font-weight: 400; }
.pdp-colour { display: flex; align-items: center; gap: var(--s-2); }
.swatch { width: 16px; height: 16px; border-radius: 999px; background: var(--c, var(--surface)); box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; }
.sizes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.sizes legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: var(--s-3); font-size: var(--t-small); font-weight: 500; }
.sizes__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.size { position: relative; }
.size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size span { display: inline-grid; place-items: center; min-width: 52px; height: var(--btn-h); padding: 0 var(--s-4); border: 1px solid var(--line-strong);
  border-radius: var(--r-btn); font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.size:hover span { border-color: var(--ink); }
.size input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.size input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.size input:disabled + span { color: var(--muted); text-decoration: line-through; border-style: dashed; cursor: not-allowed; }
.pdp-buy { display: grid; gap: var(--s-3); }
.pdp-buy .btn { width: 100%; }
.pdp-buy [data-buy-note] { min-height: 1.5em; font-size: var(--t-small); color: var(--ink); }
.pdp-buy [data-buy-note] a { font-weight: 500; }
.pdp-copy { display: grid; gap: var(--s-4); max-width: 62ch; }
.pdp-copy .t-lead { font-weight: 500; }
.size-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-body); }
.size-table th, .size-table td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.size-table thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.size-table tbody th { font-weight: 500; }
@media (max-width: 639px) {
  .hero__media.pdp-gallery { grid-template-columns: 1fr; }
  .pdp-gallery > .frame:nth-child(2) { display: none; }
  .pdp-info { gap: var(--s-4); }
  .pdp-info .pdp-colour { display: none; }
}

/* ---------------------------------------------------------------- photographs in frames */
.photo-sq { --ratio: 80%; }
.photo-tall { --ratio: 125%; }
.photo-wall { --ratio: 133%; }
.photo-side { --ratio: 90%; }
#conditions .tile--portrait { --tile-ratio: 1 / 1; }
:is(.photo-sq, .photo-tall, .photo-wall, .photo-side) { background: var(--surface); }
:is(.photo-sq, .photo-tall, .photo-wall, .photo-side) > img.is-cutout { object-fit: contain; padding: 6% 8%; }
@media (min-width: 1024px) and (max-width: 1279px) { .photo-sq { --ratio: 100%; } }
@media (min-width: 640px) and (max-width: 1023px) {
  :is(.photo-sq, .photo-tall, .photo-side) { --ratio: 75%; }
  .photo-grid > .frame { grid-column: auto / span 4 !important; }
}
@media (max-width: 639px) {
  .photo-grid > .frame:first-child { grid-column: 1 / -1 !important; }
  .photo-grid > .frame:nth-child(n + 2) { display: none; }
  #refund-questions .photo-sq { --ratio: 60%; }
}

/* the arrow look's text-link secondary: its words start on the column line; a heading row's link on a phone
   takes its own line under the heading, on the content's left line */
main[data-flow] .btn-row > .btn--secondary { padding-inline: 0; }
@media (max-width: 639px) { main[data-flow] .section-head--row > .link { flex-basis: 100%; } }

/* ---------------------------------------------------------------- spec rows on the inner pages: names in ink, long values wrap */
main[data-flow] .rows--spec .rows__name { color: var(--ink); }
main[data-flow] .rows__value { white-space: normal; text-align: right; }
@media (max-width: 639px) {
  main[data-flow] .rows > li { grid-template-columns: minmax(0, 1fr); }
  main[data-flow] .rows__value { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ---------------------------------------------------------------- designers: the A to Z with counts */
.search-field { position: relative; display: block; max-width: 480px; }
.search-field input { width: 100%; height: 48px; padding: 0 var(--s-4) 0 44px; border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1 var(--font-text); transition: border-color var(--dur) var(--ease); }
.search-field input:hover, .search-field input:focus { border-color: var(--ink); outline: none; }
.search-field svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.az { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.az li { border-bottom: 1px solid var(--line); }
.az a { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; font-weight: 500; text-decoration: none; color: var(--ink);
  transition: color var(--dur) var(--ease); }
.az a:hover { color: var(--action); }
.az a span:last-child { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the bag */
.bag-lines { display: grid; }
.bag-line { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.bag-line:first-child { padding-top: 0; }
.bag-line__img { display: block; aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: clip; background: var(--surface); }
.bag-line__img img { width: 100%; height: 100%; object-fit: cover; }
.bag-line__img img.is-cutout { object-fit: contain; padding: 6%; }
.bag-line__main { display: grid; gap: var(--s-1); }
.bag-line__main a { font-weight: 500; text-decoration: none; color: var(--ink); }
.bag-line__ctl { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-btn); height: var(--btn-h-sm); }
.qty button { width: 36px; height: 100%; border: 0; background: none; color: var(--ink); font: 500 18px/1 var(--font-text); cursor: pointer; }
.qty button:disabled { color: var(--muted); cursor: not-allowed; }
.qty output { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.text-btn { border: 0; background: none; padding: 0; color: var(--ink); font: 500 var(--t-small)/1.4 var(--font-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bag-line__price { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.bag-sum { display: grid; gap: var(--s-5); }
.bag-sum .btn { width: 100%; }
.form-note { font-size: var(--t-small); }
.form-note[data-state="error"] { color: #b42318; }
@media (max-width: 639px) { .bag-line { grid-template-columns: 80px 1fr; } .bag-line__price { grid-column: 2; text-align: left; } }

/* ---------------------------------------------------------------- help pages: numbered steps */
.steps { display: grid; counter-reset: step; }
.steps > li { display: grid; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.steps > li:first-child { padding-top: 0; }
.steps > li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink, #0a0a0a); font-weight: 500; font-variant-numeric: tabular-nums; }
.steps h3 { font: 500 var(--t-lead)/1.35 var(--font-text); margin-bottom: var(--s-2); }
.form .field select { appearance: auto; }

/* ---------------------------------------------------------------- before and without the script */
[hidden] { display: none !important; }
@media (scripting: enabled) {
  html:not(.js-shop) [data-plp] .plp-grid > .tile:nth-child(n + 9) { display: none; }
  html:not(.js-shop) [data-plp-empty] { display: none; }
}
@media (scripting: enabled) and (min-width: 640px) and (max-width: 1023px) { html:not(.js-shop) [data-plp] .plp-grid > .tile:nth-child(9) { display: grid; } }
@media (scripting: enabled) and (max-width: 639px) { html:not(.js-shop) [data-plp] .plp-grid > .tile:nth-child(n + 7) { display: none; } }
@media (scripting: none) { .plp-foot, .plp-tools, .plp-cats { display: none; } }

/* a button that cannot act yet (an empty bag, a piece sold out) reads as resting, not as the next step */
.btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }


/* ================================================================ added for the shopper site */

/* ---------------------------------------------------------------- dark appearance (Settings > Appearance)
   the page's tokens swap to the inverse ground; inverse sections stay dark */
:root[data-theme="dark"] {
  --p-bg: #0a0a0a; --p-surface: #171717; --p-ink: #ffffff; --p-muted: #979797;
  --p-action: #f3ff49; --p-action-ink: #0a0a0a;
}
:root[data-theme="dark"] body { background: var(--p-bg); color: var(--p-ink); }
:root[data-theme="dark"] .ground-inverse { --surface: #1f1f1f; }

/* ---------------------------------------------------------------- the bar: icon links (saved, account) */
.nav__icon { display: inline-flex; align-items: center; gap: var(--s-2); }
.nav__icon svg { width: 18px; height: 18px; }
@media (max-width: 1023px) { .nav:not(.is-open) .nav__actions > .nav__icon { display: none; } }

/* ---------------------------------------------------------------- account pages: a side menu and the content */
.acct { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); align-items: start; }
.acct__side { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav) + var(--s-5)); display: grid; gap: var(--s-5); }
.acct__main { grid-column: 4 / -1; display: grid; gap: var(--s-7); min-width: 0; }
.acct__main > .stack-5 > h1, .acct__main > header h1 { font-size: var(--t-h2); }
.side-menu { display: grid; }
.side-menu p { margin: var(--s-4) 0 var(--s-2); color: var(--muted); font-size: var(--t-label); font-weight: 500; }
.side-menu p:first-child { margin-top: 0; }
.side-menu a { display: flex; justify-content: space-between; align-items: center; padding: var(--s-2) 0; color: var(--ink); text-decoration: none; font-weight: 400;
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); }
.side-menu a:hover { padding-left: var(--s-1); }
.side-menu a[aria-current="page"] { font-weight: 500; }
.side-menu a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
@media (max-width: 1023px) {
  .acct__side { grid-column: 1 / -1; position: static; }
  .acct__main { grid-column: 1 / -1; }
  .side-menu { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: none; }
  .side-menu p { display: none; }
  .side-menu a { flex: none; height: var(--btn-h-sm); padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-btn); font-size: var(--t-small); font-weight: 500; }
  .side-menu a:hover { padding-left: var(--s-4); }
  .side-menu a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .side-menu a[aria-current="page"]::after { content: none; }
}

/* ---------------------------------------------------------------- boxes: the one panel style for forms and summaries */
.box { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.box--line { background: var(--bg); border: 1px solid var(--line); }
.box > h2, .box > h3, .box__head h2, .box__head h3 { font: 500 var(--t-lead)/1.3 var(--font-text); letter-spacing: -0.01em; }
.box__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 639px) { .box { padding: var(--s-5); } }
.note { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-sm); background: var(--bg); font-size: var(--t-small); }
.box--line .note, .note--surface { background: var(--surface); }
.note--accent { background: var(--p-accent); color: #0a0a0a; }
.note--error { background: color-mix(in oklab, #b42318 9%, var(--bg)); color: #b42318; }
.ok { color: #0a0a0a; background: var(--p-accent); }

/* a line list inside a box: label left, value right */
.sum { display: grid; gap: var(--s-3); }
.sum > div { display: flex; justify-content: space-between; gap: var(--s-4); font-variant-numeric: tabular-nums; }
.sum > .sum__total { padding-top: var(--s-4); border-top: 1px solid var(--line-strong); font-weight: 500; font-size: var(--t-lead); }
.sum .is-off { color: var(--ink); }
.sum dd { margin: 0; text-align: right; }

/* ---------------------------------------------------------------- choice cards: delivery, payment, reasons */
.choices { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; }
.choices legend { padding: 0; margin-bottom: var(--s-3); font-weight: 500; }
.choice { position: relative; display: grid; grid-template-columns: 20px 1fr auto; gap: var(--s-3); align-items: start; padding: var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.choice:hover { border-color: var(--ink); }
.choice input { appearance: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.choice input[type="checkbox"] { border-radius: 6px; }
.choice input:checked { border: 6px solid var(--ink); }
.choice input[type="checkbox"]:checked { border-width: 0; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
:root[data-theme="dark"] .choice input[type="checkbox"]:checked { background-color: #fff; filter: invert(1); }
.choice input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.choice__main { display: grid; gap: 2px; }
.choice__main strong { font-weight: 500; }
.choice__main span { color: var(--muted); font-size: var(--t-small); }
.choice__end { font-weight: 500; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--s-2); }
.choice__end img { height: 24px; width: auto; }

/* inline field + button (promo code, invite code, reply) */
.inline-field { display: flex; gap: var(--s-2); }
.inline-field input { flex: 1; min-width: 0; height: var(--btn-h); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-text); }
.inline-field input:focus, .field :is(input, select, textarea):focus { outline: none; border-color: var(--ink); }
.field small { font-weight: 400; color: var(--muted); }
.field.is-invalid :is(input, select) { border-color: #b42318; }
.field .err { font-weight: 400; color: #b42318; }

/* ---------------------------------------------------------------- sign-in: the six-digit code */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: var(--s-2); }
.otp input { height: 64px; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font: 400 28px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.otp input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.otp.is-wrong input { border-color: #b42318; }
@media (max-width: 639px) { .otp { grid-template-columns: repeat(6, minmax(0, 1fr)); } .otp input { height: 56px; font-size: 24px; } }
.auth-step { display: grid; gap: var(--s-5); max-width: 440px; }
.auth-step .btn { justify-self: start; }

/* ---------------------------------------------------------------- order thread (tracking, returns) */
.thread { display: grid; }
.thread > li { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-3); padding-bottom: var(--s-5); }
.thread > li::before { content: ""; position: absolute; left: 11px; top: 20px; bottom: 0; width: 2px; background: var(--line-strong); }
.thread > li:last-child::before { content: none; }
.thread__dot { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--bg); position: relative; z-index: 1; }
.thread > li.is-done .thread__dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--bg); }
.thread > li.is-now .thread__dot { border-color: var(--ink); background: var(--p-accent); }
.thread > li.is-done::before { background: var(--ink); }
.thread strong { font-weight: 500; display: block; }
.thread span { color: var(--muted); font-size: var(--t-small); }
.thread time { color: var(--muted); font-size: var(--t-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.thread__group { grid-column: 2 / -1; font-size: var(--t-label) !important; font-weight: 500; color: var(--ink) !important; margin-bottom: 2px; }
.box .thread > li { --bg: var(--surface); }

/* ---------------------------------------------------------------- lists of orders, tickets, settings rows */
.list { display: grid; }
.list > li > a, .list > li > .list__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.list > li > a:hover .list__title { text-decoration: underline; text-underline-offset: 3px; }
.list > li > a::after { content: "\2192"; color: var(--muted); transition: transform var(--dur) var(--ease); }
.list > li > a:hover::after { transform: translateX(3px); color: var(--ink); }
.list__icon { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); }
.list__icon svg { width: 20px; height: 20px; }
.list__icon.is-accent { background: var(--p-accent); color: #0a0a0a; }
.list__body { display: grid; gap: 2px; min-width: 0; }
.list__title { font-weight: 500; }
.list__sub { color: var(--muted); font-size: var(--t-small); }
.list__thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.list__thumbs img { width: 48px; height: 60px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface); }
.list__thumbs img.is-cutout { object-fit: contain; padding: 3px; }
.list__end { display: flex; align-items: center; gap: var(--s-3); }
.status { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3); border-radius: 999px; background: var(--surface);
  font: 500 var(--t-label)/1 var(--font-text); white-space: nowrap; }
.status--live { background: var(--p-accent); color: #0a0a0a; }
.status--ink { background: var(--ink); color: var(--bg); }

/* ---------------------------------------------------------------- a product line (order, return, confirmation) */
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; padding-bottom: 0; }
.line:first-child { padding-top: 0; }
.line__img { aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: clip; background: var(--bg); }
.box--line .line__img { background: var(--surface); }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__img img.is-cutout { object-fit: contain; padding: 6%; }
.line__main { display: grid; gap: 2px; }
.line__main strong { font-weight: 500; }
.line__main span { color: var(--muted); font-size: var(--t-small); }
.line__end { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.line .choice-tick { margin-top: var(--s-3); }
.flag { display: inline-flex; width: fit-content; margin-top: var(--s-2); padding: 2px var(--s-2); border-radius: 6px; background: var(--p-accent); color: #0a0a0a; font-size: var(--t-label); font-weight: 500; }
.flag--quiet { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }
.flag--error { background: color-mix(in oklab, #b42318 10%, transparent); color: #b42318; }

/* ---------------------------------------------------------------- the return wizard's steps */
.steps-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); counter-reset: s; }
.steps-bar li { display: grid; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); counter-increment: s; }
.steps-bar li::before { content: ""; height: 4px; border-radius: 4px; background: var(--line-strong); transition: background-color var(--dur) var(--ease); }
.steps-bar li.is-done::before, .steps-bar li.is-now::before { background: var(--ink); }
.steps-bar li.is-now { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- Runway Access: the tier card */
.tier { display: grid; gap: var(--s-6); padding: var(--s-7); border-radius: var(--r-lg); min-height: 360px; align-content: space-between; }
.tier__top { display: flex; justify-content: space-between; align-items: start; gap: var(--s-4); flex-wrap: wrap; }
.tier__name { font: 400 var(--t-h2)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.tier__balance { font: 400 var(--t-stat, 64px)/1 var(--font-display); letter-spacing: var(--display-tracking-xl); font-variant-numeric: tabular-nums; }
.tier__balance small { font-size: var(--t-body); letter-spacing: 0; color: var(--muted); margin-left: var(--s-2); }
.meter { height: 8px; border-radius: 8px; background: color-mix(in oklab, var(--ink) 16%, transparent); overflow: clip; }
.meter > span { display: block; height: 100%; width: var(--v, 0%); background: var(--p-accent); border-radius: inherit; }
.ground-base .meter > span, :root:not([data-theme="dark"]) .box .meter > span { background: var(--ink); }
.tier__meta { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-small); color: var(--muted); }
.tier__meta strong { color: var(--ink); font-weight: 500; }
@media (max-width: 639px) { .tier { padding: var(--s-5); min-height: 0; } }
.tiers { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tiers th, .tiers td { text-align: left; padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.tiers thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.tiers tbody th { font-weight: 500; }
.tiers tr.is-you th::after { content: "You"; margin-left: var(--s-2); padding: 2px 8px; border-radius: 999px; background: var(--p-accent); color: #0a0a0a; font-size: var(--t-label); }
.tier-chip { display: inline-block; width: 12px; height: 12px; border-radius: 999px; margin-right: var(--s-2); vertical-align: -1px; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* a reward row */
.reward { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.reward:first-child { padding-top: 0; }
.reward__value { font: 400 var(--t-h3)/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.reward__cost { color: var(--muted); font-size: var(--t-small); }
.reward .btn { grid-row: 1 / span 2; grid-column: 2; }

/* a code you copy (invite, reward, welcome) */
.code { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm); background: var(--bg); }
.code output, .code > span { font: 500 22px/1.2 var(--font-mono); letter-spacing: .06em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- dialogs and toasts */
dialog.sheet { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: var(--s-6); border: 0; border-radius: var(--r-lg);
  background: var(--bg); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / .25); }
dialog.sheet::backdrop { background: rgb(10 10 10 / .5); }
dialog.sheet[open] { display: grid; gap: var(--s-5); animation: sheet-in 220ms var(--ease); }
dialog.sheet h2 { font: 500 var(--t-h3)/1.2 var(--font-text); letter-spacing: -0.015em; }
dialog.sheet .btn-row .btn { flex: 1; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 639px) { dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r-lg) var(--r-lg) 0 0; } }
.toast { position: fixed; left: 50%; bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); z-index: 100; translate: -50% 0; padding: var(--s-3) var(--s-5);
  border-radius: 999px; background: var(--p-ink); color: var(--p-bg); font-weight: 500; font-size: var(--t-small); box-shadow: 0 8px 30px rgb(0 0 0 / .2);
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), translate 200ms var(--ease); }
.toast.is-on { opacity: 1; translate: -50% -6px; }

/* ---------------------------------------------------------------- the heart (saved pieces) */
.heart { display: inline-grid; place-items: center; width: var(--btn-h); height: var(--btn-h); border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color var(--dur) var(--ease), transform 120ms var(--ease); }
.heart:hover { border-color: var(--ink); }
.heart:active { transform: scale(.94); }
.heart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill var(--dur) var(--ease); }
.heart[aria-pressed="true"] svg { fill: currentColor; }
.tile__media > .heart { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 999px; }
.tile__media > .heart svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- switches (settings) */
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background-color var(--dur) var(--ease); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: transform var(--dur) var(--ease); }
.switch input:checked + span { background: var(--ink); }
:root[data-theme="dark"] .switch input:checked + span { background: var(--p-accent); }
:root[data-theme="dark"] .switch input:checked + span::after { background: #0a0a0a; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.set-row:first-child { padding-top: 0; }
.set-row:last-child { border-bottom: 0; padding-bottom: 0; }
.set-row > div { display: grid; gap: 2px; }
.set-row strong { font-weight: 500; }
.set-row span { color: var(--muted); font-size: var(--t-small); }

/* ---------------------------------------------------------------- support thread */
.chat { display: grid; gap: var(--s-4); align-content: start; }
.bubble { max-width: min(76%, 520px); display: grid; gap: var(--s-1); }
.bubble p { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); }
.bubble--me { justify-self: end; }
.bubble--me p { background: var(--ink); color: var(--bg); border-bottom-right-radius: 4px; }
.bubble--them p { border-bottom-left-radius: 4px; }
.bubble span { font-size: var(--t-label); color: var(--muted); }
.bubble--me span { text-align: right; }
.bubble.is-pending p { opacity: .55; }
.composer { display: flex; gap: var(--s-2); align-items: end; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.composer textarea { flex: 1; min-height: 48px; max-height: 160px; padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg);
  color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-text); resize: vertical; }
.composer textarea:focus { outline: none; border-color: var(--ink); }

/* ---------------------------------------------------------------- try-on: the mirror stage */
.mirror { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: clip; background: var(--surface); }
.mirror > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mirror__drop { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6); text-align: center; color: var(--muted); }
.mirror__drop svg { width: 40px; height: 40px; color: var(--ink); }
.mirror__busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-4); padding: var(--s-6); text-align: center;
  background: rgb(10 10 10 / .55); color: #fff; backdrop-filter: blur(6px); }
.mirror__busy .meter { width: 220px; background: rgb(255 255 255 / .25); }
.mirror__busy .meter > span { background: var(--p-accent) !important; transition: width 400ms linear; }
.spinner { width: 32px; height: 32px; border-radius: 999px; border: 3px solid rgb(255 255 255 / .25); border-top-color: var(--p-accent); animation: spin 900ms linear infinite; }
@keyframes spin { to { rotate: 1turn; } }

/* ---------------------------------------------------------------- outfit builder: the stage */
.stage-board { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
.stage-board__slot { position: absolute; display: grid; place-items: center; transition: opacity 260ms var(--ease); }
.stage-board__slot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 0 / .12)); }
.stage-board__slot[data-slot="top"] { left: 22%; right: 22%; top: 4%; height: 44%; z-index: 2; }
.stage-board__slot[data-slot="bottom"] { left: 26%; right: 26%; top: 42%; height: 54%; z-index: 1; }
.stage-board__slot[data-slot="layer"] { left: 2%; width: 34%; top: 10%; height: 40%; z-index: 3; }
.stage-board__slot.is-empty { opacity: 0; }
.pick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.pick { position: relative; display: grid; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
  cursor: pointer; text-align: left; color: var(--ink); font: 400 var(--t-label)/1.3 var(--font-text); transition: border-color var(--dur) var(--ease), transform 160ms var(--ease); }
.pick:hover { border-color: var(--ink); transform: translateY(-2px); }
.pick img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface); border-radius: 6px; }
.pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) { .pick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Runway Studio: the disc */
.disc { position: relative; aspect-ratio: 1; width: min(100%, 440px); justify-self: center; border-radius: 999px; overflow: clip;
  background: repeating-radial-gradient(circle at 50% 50%, #0a0a0a 0 2px, #161616 2px 5px); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.disc img { position: absolute; inset: 31%; width: 38%; height: 38%; border-radius: 999px; object-fit: cover; }
.disc::after { content: ""; position: absolute; inset: calc(50% - 8px); border-radius: 999px; background: #0a0a0a; box-shadow: 0 0 0 3px var(--p-accent); }
.disc.is-playing { animation: spin 9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .disc.is-playing { animation: none; } }
.bars { display: inline-flex; gap: 3px; align-items: end; height: 16px; }
.bars i { width: 3px; height: 30%; background: currentColor; border-radius: 2px; }
.is-playing-text .bars i { animation: bar 900ms ease-in-out infinite alternate; }
.is-playing-text .bars i:nth-child(2) { animation-delay: -300ms; } .is-playing-text .bars i:nth-child(3) { animation-delay: -600ms; }
@keyframes bar { to { height: 100%; } }

/* ---------------------------------------------------------------- stories */
.story-card { display: grid; gap: var(--s-3); color: var(--ink); text-decoration: none; }
.story-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: clip; background: var(--surface); }
.story-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.story-card:hover .story-card__img img { transform: scale(1.025); }
.story-card h3 { font: 500 var(--t-lead)/1.3 var(--font-text); letter-spacing: -0.01em; }
.story-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.story-card p { color: var(--muted); }
.meta-line { font-size: var(--t-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.story-list { display: grid; }
.story-list > a { display: grid; grid-template-columns: 1fr 160px; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.story-list > a:first-child { padding-top: 0; }
.story-list > a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.story-list h3 { font: 500 var(--t-lead)/1.3 var(--font-text); margin: var(--s-2) 0; }
.story-list p { color: var(--muted); }
.story-list img { width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--surface); }
@media (max-width: 639px) { .story-list > a { grid-template-columns: 1fr 96px; } .story-list img { width: 96px; } }
.article { display: grid; gap: var(--s-6); max-width: 720px; }
.article h1 { font-size: var(--t-h2); }
.article .t-lead { font-style: italic; }
.angle { padding: var(--s-5) var(--s-6); border-left: 4px solid var(--p-accent); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; display: grid; gap: var(--s-2); }
.angle h2 { font: 500 var(--t-label)/1.2 var(--font-text); letter-spacing: .06em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips span { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: 999px; border: 1px solid var(--line-strong); font-size: var(--t-small); }

/* ---------------------------------------------------------------- product page additions */
.pdp-actions { display: flex; gap: var(--s-2); }
.pdp-actions .btn { flex: 1; }
.pdp-badge { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 2; height: 28px; padding: 0 var(--s-3); border-radius: 999px; display: inline-flex; align-items: center;
  background: rgb(10 10 10 / .72); color: #fff; font: 500 var(--t-label)/1 var(--font-text); letter-spacing: .08em; backdrop-filter: blur(6px); }
.pdp-follow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.btn--follow[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mirror-tile { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: #0a0a0a; color: #fff; text-decoration: none; transition: transform 160ms var(--ease); }
.mirror-tile:hover { transform: translateY(-2px); }
.mirror-tile .meta-line { color: var(--p-accent); }
.mirror-tile strong { font-weight: 500; }
.mirror-tile .pill-btn { grid-row: 1 / span 2; grid-column: 2; height: var(--btn-h-sm); padding: 0 var(--s-4); display: inline-flex; align-items: center; border-radius: var(--r-btn);
  background: var(--p-accent); color: #0a0a0a; font-weight: 500; font-size: var(--t-small); }
.fit-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-3); align-items: end; }
@media (max-width: 639px) { .fit-form { grid-template-columns: 1fr 1fr; } .fit-form .btn { grid-column: 1 / -1; } }
.size-table tr.is-picked > * { background: color-mix(in oklab, var(--p-accent) 55%, transparent); }

/* ---------------------------------------------------------------- the checkout bar on a phone, the order summary beside the form */
.co { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); align-items: start; }
.co__form { grid-column: 1 / span 7; display: grid; gap: var(--s-5); }
.co__side { grid-column: 9 / -1; position: sticky; top: calc(var(--nav) + var(--s-5)); display: grid; gap: var(--s-4); }
@media (max-width: 1023px) { .co__form, .co__side { grid-column: 1 / -1; } .co__side { position: static; } }
.co__side .btn { width: 100%; }
.reserve { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); }
.reserve output { font-weight: 500; font-variant-numeric: tabular-nums; }
.saved-address { display: grid; gap: 2px; }
.saved-address strong { font-weight: 500; }

/* ---------------------------------------------------------------- the profile hub's link groups */
.hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.hub-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform 160ms var(--ease), background-color var(--dur) var(--ease); min-height: 148px; }
.hub-card:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--surface) 90%, var(--ink)); }
.hub-card svg { width: 24px; height: 24px; margin-bottom: var(--s-3); }
.hub-card strong { font-weight: 500; font-size: var(--t-lead); }
.hub-card span { color: var(--muted); font-size: var(--t-small); }
.hub-card.is-accent { background: var(--p-accent); color: #0a0a0a; }
.hub-card.is-accent span { color: #3a3a1a; }
@media (max-width: 1023px) { .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .hub { grid-template-columns: minmax(0, 1fr); } .hub-card { min-height: 0; } }

/* ---------------------------------------------------------------- home: feature panels */
.feature { position: relative; display: grid; align-content: end; gap: var(--s-3); min-height: 100%; padding: var(--s-6); border-radius: var(--r-lg); overflow: clip;
  color: #fff; text-decoration: none; isolation: isolate; }
.feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--ease); }
.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 10 10 / .78), rgb(10 10 10 / 0) 60%); }
.feature:hover > img { transform: scale(1.025); }
.feature h3 { font: 400 var(--t-h3)/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.feature p { max-width: 40ch; color: rgb(255 255 255 / .86); }
.feature .meta-line { color: var(--p-accent); }

/* a phone-sized empty state */
.empty { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-7) 0; }
.empty svg { width: 32px; height: 32px; }
.empty strong { font: 500 var(--t-lead)/1.3 var(--font-text); }
.empty p { color: var(--muted); max-width: 44ch; }

/* state switch through ?state=: [data-state] blocks show only for theirs */
[data-state]:not(.is-state) { display: none !important; }
.tier__top > div { display: grid; gap: var(--s-2); }
.meta-line { display: block; }
.btn--follow { display: inline-flex; align-items: center; color: var(--ink); border-color: var(--line-strong); }

/* columns inside the account content: side by side on a desktop, stacked below 1024 */
.col-a { grid-column: 1 / span 5; } .col-b { grid-column: 6 / -1; } .col-c { grid-column: 1 / span 6; } .col-d { grid-column: 7 / -1; }
.addr-grid > * { grid-column: auto / span 6; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { :is(.col-a, .col-b, .col-c, .col-d) { grid-column: 1 / -1; } .acct__main .grid { row-gap: var(--s-5); } }
@media (max-width: 639px) {
  .addr-grid > * { grid-column: 1 / -1; }
  .choices--3 { grid-template-columns: minmax(0, 1fr); }
  .thread > li { grid-template-columns: 24px 1fr; }
  .thread time { grid-column: 2; margin-top: -8px; }
  .line { grid-template-columns: 64px 1fr; }
  .line__end { grid-column: 2; text-align: left; }
  .list > li > a { grid-template-columns: auto 1fr; }
  .list__end { grid-column: 2; }
  .reward { grid-template-columns: 1fr; } .reward .btn { grid-row: auto; grid-column: 1; justify-self: start; }
  .tier__balance { font-size: 48px; }
}
.reserve svg, .btn > svg, label.btn svg { width: 18px; height: 18px; flex: none; }
.box > * { min-width: 0; }
@media (max-width: 639px) {
  .inline-field { flex-wrap: wrap; } .inline-field input { flex-basis: 100%; } .inline-field .btn { width: 100%; }
  .code { flex-wrap: wrap; } .code output, .code > span { font-size: 18px; }
}
@media (min-width: 1024px) { .side-menu a { justify-content: flex-start; gap: var(--s-3); } }
.choice.choice-tick { display: block; padding: 0; border: 0; background: none; box-shadow: none !important; }
.list > li > a { grid-template-columns: auto 1fr auto auto; }
@media (max-width: 639px) { .list > li > a { grid-template-columns: auto 1fr; } .list > li > a::after { display: none; } }
.box .disc { width: min(100%, 300px); box-shadow: 0 16px 40px rgb(0 0 0 / .4); }

/* ================================================================ motion and 3D (second pass)
   Easing and timing from the Awwwards motion DNA of the references: cubic-bezier(0.22, 1, 0.36, 1),
   500-900 ms. DESIGN.md "3D and scroll scenes" overrides tasteskill's no-scroll-motion rule here. */
:root { --ease-out-r: cubic-bezier(0.22, 1, 0.36, 1); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* page titles: the words rise in, one after another */
.h-words .w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .h-words .w { animation: word-in 900ms var(--ease-out-r) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
  @keyframes word-in { from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); } }
}

/* scroll-linked: blocks rise as they enter, the film's panel opens through a circle */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rise-in { from { opacity: 0; transform: translateY(48px) scale(.985); } }
    .reveal-stagger > * { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .reveal-stagger > :nth-child(2) { animation-range: entry 8% entry 68%; }
    .reveal-stagger > :nth-child(3) { animation-range: entry 16% entry 76%; }
    .reveal-stagger > :nth-child(4) { animation-range: entry 24% entry 84%; }
    .mask-open { animation: mask-open linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes mask-open { from { clip-path: circle(14% at 50% 60%); } to { clip-path: circle(110% at 50% 50%); } }
    .drift { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes drift { from { transform: translateY(-6%) scale(1.08); } to { transform: translateY(6%) scale(1.08); } }
  }
}

/* photographs inside a headline (Butter on the reference board) */
.h-pic { display: inline-block; width: 1.7em; height: .82em; margin: 0 .08em; border-radius: 999px; overflow: clip; vertical-align: -.06em; background: var(--surface); }
.h-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .h-pic { animation: pic-in 1s var(--ease-out-r) both; animation-delay: .35s; }
  @keyframes pic-in { from { width: 0; margin: 0; } }
}

/* 3D scenes over their stills */
.scene3d { position: relative; isolation: isolate; outline: none; touch-action: pan-y; }
.scene3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms var(--ease-out-r); z-index: 2; cursor: grab; }
.scene3d.is-live .scene3d__canvas { opacity: 1; }
.scene3d.is-live > .scene3d__poster { opacity: 0; transition: opacity 700ms var(--ease-out-r); }
.scene3d:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
.scene3d__ui { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--s-4); display: flex; justify-content: center; align-items: center; gap: var(--s-3); pointer-events: none; }
.scene3d__ui > * { pointer-events: auto; }
.scene3d__label { min-height: 1.4em; font-size: var(--t-small); font-weight: 500; }
.scene3d:not(.is-live) .scene3d__ui .live-only { display: none; }

/* the home hero's rail */
.rail3d { height: 100%; min-height: 520px; border-radius: var(--r-lg); background: radial-gradient(120% 80% at 50% 100%, color-mix(in oklab, var(--p-accent) 30%, var(--surface)), var(--surface) 60%); }
.rail3d > .scene3d__poster { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.rail3d > .scene3d__poster > .frame { border-radius: var(--r-lg); overflow: clip; position: relative; }
.rail3d > .scene3d__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) { .rail3d { min-height: 440px; } .rail3d > .scene3d__poster { grid-template-columns: 1fr; } .rail3d > .scene3d__poster > .frame:nth-child(2) { display: none; } }

/* the product page's every-angle flow */
.flow3d { height: min(78vh, 760px); border-radius: var(--r-lg); background: var(--surface); }
.flow3d > .scene3d__poster { position: absolute; inset: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.flow3d > .scene3d__poster img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 639px) { .flow3d { height: 70vh; } .flow3d > .scene3d__poster { grid-template-columns: 1fr; } .flow3d > .scene3d__poster img:nth-child(n+2) { display: none; } }
.round-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 500 18px/1 var(--font-text); cursor: pointer; transition: transform 160ms var(--ease-out-r), border-color var(--dur) var(--ease); }
.round-btn:hover { border-color: var(--ink); transform: translateY(-2px); }
.round-btn:active { transform: scale(.94); }
.round-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* the Outfit Builder's 3D board: the flat board stays as its still */
.stage-board.scene3d.is-live > .stage-board__slot { opacity: 0 !important; }

/* the film's chapter: a full-width rounded dark panel that opens through a circle */
.film-panel { position: relative; border-radius: var(--r-lg); overflow: clip; background: #0a0a0a; aspect-ratio: 16 / 9; }
.film-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }