/* ============================================================
   TOROS CLUB — wireframe template
   Structure after aimeleondore.com; skin after the TC SS26 deck.
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */

:root {
  /* dark skin (default) */
  --bg:        #0a0a0a;
  --surface:   #151515;
  --surface-2: #1c1c1c;
  --line:      #242424;
  --fg:        #e6e6e6;
  --fg-soft:   #b4b4b4;
  --mute:      #767676;
  --accent:    #ede8df;
  --hatch:     rgba(255, 255, 255, .028);
  --sheen:     rgba(255, 255, 255, .055);
  --ghost:     .045;

  /* type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* rhythm */
  --pad:      clamp(16px, 3.5vw, 40px);
  --card-pad: clamp(12px, 1vw, 16px);
  --gap:  1px;
  --hdr-h: 96px;

  /* Type scale. Every fixed font size in this sheet is multiplied by
     it; it is 1 everywhere except phones, where the small mono and
     caps that carry the look were too small to read comfortably.
     Headings sized with clamp() already grow with the screen and are
     left alone. */
  --ts: 1;

  color-scheme: dark;
}

[data-skin="light"] {
  --bg:        #f4f1eb;
  --surface:   #e9e5dd;
  --surface-2: #e2ded4;
  --line:      #d9d4c9;
  --fg:        #14120f;
  --fg-soft:   #3a3630;
  --mute:      #7c7469;
  --accent:    #14120f;
  --hatch:     rgba(0, 0, 0, .035);
  --sheen:     rgba(255, 255, 255, .55);
  --ghost:     .055;

  color-scheme: light;
}

@media (max-width: 620px) { :root { --ts: 1.13; } }

/* ---------- 2. RESET -------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 calc(14px * var(--ts))/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol   { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; background: var(--fg); color: var(--bg);
  font: 500 calc(11px * var(--ts))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
/* A drawer or dialog moves focus to its close button when it opens, and
   browsers disagree about whether focus moved by script deserves a ring,
   so a tap was drawing a box round every X. site.js notes how the visitor
   is driving: the ring shows for a keyboard and never for a pointer. */
[data-input="pointer"] :focus-visible { outline: none; }

/* ---------- TC MONOGRAM ------------------------------------
   The supplied artwork, used as an alpha mask and painted with
   currentColor. One asset serves both skins and any size, with
   no risk of a redrawn approximation drifting from the real mark.
   ----------------------------------------------------------- */
.mark {
  display: block;
  background-color: currentColor;
  -webkit-mask: url("../img/tc-mark.png") center / contain no-repeat;
          mask: url("../img/tc-mark.png") center / contain no-repeat;
}

/* shared micro-label */
.eyebrow {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* unresolved wireframe content */
.tbd {
  font-style: normal;
  color: var(--mute);
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}

/* No scrollbars, anywhere. The page still scrolls; the bar is never
   drawn, so opening a drawer (which locks the body) no longer takes a
   scrollbar's width away and shoves the page sideways. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- 3. HEADER ------------------------------------- */

/* Always solid. It used to start transparent over a full-height film;
   over the masthead's text that just laid one set of words on another. */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Smart bar: once the hero has left the top it slides away on the way
   down and comes back on the way up (site.js). Nothing fixed lives
   inside the header, so the transform is safe. */
.hdr { transition: transform .38s cubic-bezier(.3, .7, .2, 1); }
.hdr.is-away { transform: translateY(-101%); }

/* Pages with no hero start below the fixed header instead of under it.
   --hdr-real is the measured height (site.js); the fallback covers the
   moment before it runs. */
body:not(.has-hero) main { padding-top: var(--hdr-real, 86px); }
#grid-tc, #guide, .prose h2 { scroll-margin-top: calc(var(--hdr-real, 86px) + 12px); }


.hdr__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 58px;
}

.hdr__menu { justify-self: start; padding: 8px; margin-left: -8px; }
.burger { display: block; width: 20px; }
.burger i {
  display: block; height: 1px; background: currentColor;
  margin: 5px 0; transition: transform .3s ease, opacity .3s ease;
}
.hdr__menu[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr__menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.hdr__menu[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hdr__brand { display: flex; align-items: center; gap: 10px; }
.hdr__mark  { width: 26px; height: 20px; color: var(--fg); }
.hdr__word {
  font: 500 calc(13px * var(--ts))/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hdr__util {
  justify-self: end;
  display: flex; align-items: center; gap: 20px;
}
.ico {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: color .2s ease;
}
.ico:hover { color: var(--fg); }
.ico__n { color: var(--mute); }

.hdr__stamp {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  padding-bottom: 12px;
  font: 400 calc(10px * var(--ts))/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-align: center;
}
.hdr__stamp > * + *::before {
  content: "|"; margin-right: 14px; color: var(--mute);
}

/* ---------- 4. DRAWER ------------------------------------- */

.scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .35s ease;
}
.scrim.is-on { opacity: 1; }

.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 120;
  width: min(360px, 86vw);
  padding: 28px var(--pad) 32px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.drawer.is-on { transform: none; }

.drawer__x {
  align-self: flex-end;
  font: 300 calc(26px * var(--ts))/1 var(--sans);
  padding: 0 4px 12px;
  color: var(--fg-soft);
}

.drawer__nav .eyebrow { margin: 22px 0 14px; }
.drawer__nav .eyebrow:first-child { margin-top: 0; }

.drawer__nav li + li { margin-top: 2px; }
.drawer__nav a {
  display: block; padding: 7px 0;
  font: 400 calc(13px * var(--ts))/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: color .2s ease, padding-left .25s ease;
}
.drawer__nav a:hover { color: var(--fg); padding-left: 8px; }

/* Shop Merchandise: a row like the links around it that opens the five
   categories beneath, set in from a hairline so they read as its own. */
.drawer__fold {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 7px 0;
  font: 400 calc(13px * var(--ts))/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; text-align: left;
  color: var(--fg-soft);
  transition: color .2s ease;
}
.drawer__fold:hover, .drawer__fold[aria-expanded="true"] { color: var(--fg); }
.drawer__sign { position: relative; flex: none; width: 11px; height: 11px; }
.drawer__sign::before, .drawer__sign::after {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 11px; height: 1px; background: currentColor;
  transition: transform .25s ease;
}
.drawer__sign::after { transform: rotate(90deg); }
.drawer__fold[aria-expanded="true"] .drawer__sign::after { transform: rotate(0deg); }
.drawer__sub {
  margin: 6px 0 10px 2px; padding-left: 16px;
  border-left: 1px solid var(--line);
}
.drawer__sub[hidden] { display: none; }
.drawer__sub a { font-size: calc(12px * var(--ts)); color: var(--mute); }
.drawer__sub a:hover { color: var(--fg); }

.drawer__foot {
  margin-top: auto; padding-top: 28px;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}

body.is-locked { overflow: hidden; }

/* ---------- 5. PLACEHOLDERS ------------------------------- */

/* A tile is a skeleton until its photo has pixels: the surface, the
   ghost mark, and a slow sheen crossing it. The hatch used to be the
   loading state, which made every page open on stripes; it now means
   only "there is no photo here" (.ph--empty). */
@keyframes sheen {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
.ph, .skel {
  background-color: var(--surface);
  background-image: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: sheen 1.7s ease-in-out infinite;
}
.ph {
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  transition: background-color .35s ease;
}
.ph.is-live, .skel.is-live { animation: none; background-image: none; }
.skel.is-live { background-color: transparent; }
.ph--empty {
  animation: none;
  background-image: repeating-linear-gradient(135deg, transparent 0 15px, var(--hatch) 15px 16px);
  background-size: auto; background-repeat: repeat;
}
/* a catalogue that failed to load leaves its skeletons still, not pulsing forever */
.is-failed .ph, .is-failed .skel { animation: none; background-image: none; }

/* skeleton text: bars where the words will be */
.skel { display: block; border-radius: 1px; }
.skel--line  { height: 9px; width: 78%; }
.skel--short { width: 42%; }
.skel--tiny  { width: 84px; height: 8px; }
.skel--crumb { width: 220px; }
.skel--title { height: 30px; width: 88%; }
.skel--chips { height: 40px; width: 70%; }
.skel--btn   { height: 50px; width: 100%; }
.skel__lines { display: grid; gap: 9px; padding: 15px var(--card-pad) 30px; }
.card--skel .ph__ghost, .pdp__wrap[aria-hidden] .ph__ghost { opacity: var(--ghost); }
.pdp__railIn--skel { display: grid; gap: 18px; align-content: start; width: 100%; }
.page__head .skel + .skel { margin-top: 16px; }
.page__body--skel { display: grid; gap: 14px; }
.mast__shot.skel { border-radius: 0; }
/* the masthead's pieces wait behind the monogram, as the tiles do */
.mast__shot.skel { display: grid; place-items: center; }
.mast__shot .ph__ghost { width: clamp(28px, 34%, 60px); }
.skel.is-live .ph__ghost { opacity: 0; }
.mast__cap .skel { margin-top: 2px; }

/* Photos are transparent until they have loaded, then arrive over
   the skeleton. The class is set by the load event itself, so a photo
   that has pixels can never be left hidden; one that fails is removed. */
.ph__img, .mast__img { opacity: 0; transition: opacity .35s ease; }
.ph__img:not(.ph__img--alt).is-in, .mast__img.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ph, .skel { animation: none; background-image: none; }
}

.ph__ghost {
  width: clamp(56px, 16%, 130px);
  aspect-ratio: 402 / 305;
  height: auto;
  color: var(--fg);
  opacity: var(--ghost);
  transition: opacity .35s ease;
}

.ph__code,
.ph__tag {
  position: absolute;
  font: 400 calc(9px * var(--ts))/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
}
.ph__code { top: 12px; left: 12px; }
.ph__tag  { bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

.ph--hero { height: 100%; }
.ph--hero .ph__ghost { width: clamp(90px, 11vw, 190px); }
/* keep the hero's spec tag clear of the caption row pinned to the bottom */
.ph--hero .ph__tag { top: calc(50% + clamp(52px, 7vw, 118px)); bottom: auto; }

/* Live product photography, layered over the skeleton. It is held
   transparent until its own load event says it has pixels (see the
   .is-in rule above and TC.image), then fades in. The reveal is tied
   to the load event rather than to a timer, so a loaded photo cannot
   be left invisible, and a failed one is removed. */
.ph__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Product photography arrives in every crop — transparent cutouts,
   white studio shots, grey floors — and a cover fit lost sleeves and
   hems off the sides of a 4:5 tile. So the tile contains the shot
   with a margin instead, and the moment it has pixels the loading
   hatch goes and the tile takes the shot's own edge colour
   (api.js samples it), so the margin reads as more photo, not as a
   frame around one. A cutout keeps the plain surface underneath. */
.ph--card .ph__img,
.ph--shot .ph__img { object-fit: contain; padding: 7%; }
.ph.is-live { background-image: none; }
.ph.is-live .ph__ghost { opacity: 0; }

/* a tile that leads with its both-sides shot below 1000px has no use
   for the hover swap there, and hiding it stops it loading */
@media (max-width: 1000px) {
  .ph--duo .ph__img--alt { display: none; }
  /* two garments share the tile, so each reads small: give the pair more of it */
  .ph--duo .ph__img { padding: 4.5%; }
}

/* second shot is the ALD-style hover swap — interaction-driven,
   so it carries no risk of hiding the primary image */
.ph__img--alt {
  opacity: 0;
  transition: opacity .45s ease;
}
.card__a:hover .ph__img--alt { opacity: 1; }

.ph--card { aspect-ratio: 4 / 5; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--ed   { aspect-ratio: 8 / 9; }

/* The hero carries the header across its top and the caption across
   its bottom. Product photography here is shot on white, so without
   a scrim the letterspaced caps would sit white-on-white. Two soft
   gradients keep both legible whatever image is dropped in. */
.ph--hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.58), rgba(0,0,0,0) 26%),
    linear-gradient(to top,    rgba(0,0,0,.68), rgba(0,0,0,0) 30%);
  pointer-events: none;
}
[data-skin="light"] .ph--hero::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,0) 26%),
    linear-gradient(to top,    rgba(0,0,0,.28), rgba(0,0,0,0) 22%);
}
/* caption and header ride above the scrim */
.hero__cap { z-index: 2; }

/* The campaign film fills the hero exactly as a photo would; the
   poster paints first, the film takes over the moment it has frames. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--surface);
}

/* ---------- 6. HERO --------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
}

/* The masthead: the season, a line about the house, three pieces.
   It sits on the page's own ground rather than on footage, so it
   reads the same in both skins and under the transparent header.
   .hero.mast outranks the full-height .hero rules here and in the
   responsive block. Forty percent of the viewport is the floor; the
   shots are sized off the viewport's height so it stays near it. */
.hero.mast {
  height: auto;
  min-height: max(40vh, 340px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: clamp(20px, 4vw, 72px);
  padding: calc(var(--hdr-real, var(--hdr-h)) + 22px) var(--pad) clamp(22px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
/* The photo behind the masthead: held well down so the words and the four
   pieces stay the subject. Two photos, because the band is wide on a desk
   and tall on a phone: a landscape here, a portrait in the phone block.
   Each has its own dials, since the landscape is mostly white sky and the
   portrait is mostly night: --mast-photo (how much of it shows) and
   --mast-dim (how bright what shows is). The wash fades the bottom edge
   into the page and keeps the copy's side darkest. */
.hero.mast { --mast-photo: .5; --mast-dim: .42; isolation: isolate; overflow: hidden; }
.hero.mast::before,
.hero.mast::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero.mast::before {
  background: url("../img/mast-bg-wide.webp") center 88% / cover no-repeat;
  opacity: var(--mast-photo);
  filter: brightness(var(--mast-dim)) contrast(1.12);
}
.hero.mast::after {
  background:
    linear-gradient(to top, var(--bg) 0, transparent 34%),
    linear-gradient(to right, rgba(10, 10, 10, .6) 0, rgba(10, 10, 10, .15) 55%, rgba(10, 10, 10, .35) 100%);
}
.mast .eyebrow { font-size: calc(12px * var(--ts)); letter-spacing: .2em; color: var(--fg-soft); white-space: nowrap; }
.mast__h {
  margin-top: 14px;
  font: 500 clamp(26px, 3.1vw, 44px)/1.06 var(--sans);
  letter-spacing: -.025em;
}
/* the paragraph and the shipping note step in a touch from the headline's
   edge, so the two quiet lines read as set under it rather than pinned to
   the margin */
.mast__p {
  max-width: 42ch;
  margin-top: 12px; padding-left: 6px;
  font: 300 calc(14px * var(--ts))/1.6 var(--sans);
  color: color-mix(in srgb, var(--fg-soft) 86%, var(--bg));
}
.mast__go { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 20px; padding-bottom: 8px; }
/* the one promise worth making before anyone has looked at a piece: under
   the button at every width, with room above and below it */
.mast__note {
  display: inline-flex; align-items: center; gap: .8em;
  padding-left: 6px;
  font: 400 calc(11px * var(--ts))/1.4 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-soft);
}
.mast__noteIcon { flex: none; width: 1.55em; height: 1.55em; }
/* The masthead's action. Not a white plate: an outlined row in the
   site's own quiet vocabulary, hairline border, spaced caps, an arrow
   that leans forward on hover while the border and label brighten. */
.cta {
  display: inline-flex; align-items: center; gap: 18px;
  height: 48px; padding: 0 20px 0 22px;
  border: 1px solid var(--mute);
  color: var(--fg);
  /* frosted: a light blur of the photo behind it, under a thin tint, so
     the label sits on something calmer than the car's grille */
  background-color: rgba(10, 10, 10, .3);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  transition: border-color .25s ease, background-color .25s ease;
}
.cta__label {
  font: 500 calc(11px * var(--ts))/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
}
.cta__end { display: inline-flex; }
.cta__arrow {
  font: 300 17px/1 var(--sans);
  color: var(--fg-soft);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .25s ease;
}
.cta:hover, .cta:focus-visible { border-color: var(--fg); background-color: rgba(21, 21, 21, .55); }
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(6px); color: var(--fg); }


.mast__picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 24px);
  align-items: end;
  list-style: none; margin: 0; padding: 0;
}
.mast__pick { display: block; }
.mast__shot { position: relative; height: clamp(96px, 17vh, 190px); }
.mast__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}
.mast__pick:hover .mast__img { transform: translateY(-5px); }
.mast__cap {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font: 400 calc(10px * var(--ts))/1.3 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
  transition: color .2s ease;
}
.mast__cap span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mast__pick:hover .mast__cap { color: var(--fg); }

.hero__cap {
  position: absolute; inset: auto 0 0;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad) 22px;
  font: 400 calc(10px * var(--ts))/1.4 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  /* Sits on photography, not on the page, so it takes a fixed light
     colour in both skins rather than the theme's foreground — and a
     shadow to survive whatever image is dropped behind it. */
  color: #f4f2ee;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
  pointer-events: none;
}

/* ---------- 7. UTILITY BAR -------------------------------- */

.util {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line);
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
}
.util__crumb span { color: var(--mute); margin: 0 6px; }
.util__crumb a:hover { color: var(--fg); }

.util__ctl { display: flex; align-items: center; gap: 26px; }
.util__left { display: inline-flex; align-items: center; gap: 12px; }
.dens__btn { padding: 4px; margin: -4px; }
.dens__icon { margin-right: 0; width: 1.4em; height: 1.4em; }
/* Filter and Sort share one baseline: both are flex rows, glyph then
   label, and the sort's wrapper no longer sits on its own inline box. */
.sort { display: inline-flex; align-items: center; }
.ctl__icon {
  display: inline-block; flex: none;
  width: 1.3em; height: 1.3em;
  margin-right: .75em;
}
.util__ctl > button, .util__left > button, .sort__btn { display: inline-flex; align-items: center; }
/* a flex row swallows the space after "Sort:" */
#sortNow { margin-left: .5em; }
.util__ctl button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--fg-soft); transition: color .2s ease;
}
.util__ctl button:hover { color: var(--fg); }

/* filters: a button beside Sort, and a panel that opens under the bar */
.filt__n { color: var(--fg); }
.filt__btn[aria-expanded="true"] { color: var(--fg); }
.filt {
  padding: clamp(20px, 2.6vw, 34px) var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.filt[hidden] { display: none; }
.filt__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 26px 34px;
}
.filt__group .eyebrow { margin-bottom: 12px; color: var(--fg-soft); }
.filt__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 13px;
  border: 1px solid var(--line);
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.chip:hover { color: var(--fg); border-color: var(--mute); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filt__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.filt__clear {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
  text-decoration: underline; text-underline-offset: 4px;
}
.filt__clear:hover { color: var(--fg); }
.card--none { grid-column: 1 / -1; min-height: 38vh; align-items: center; text-align: center; }

/* sort: a button and, below it, a hairline list of the five orders */
.sort { position: relative; }
.sort__btn[aria-expanded="true"] { color: var(--fg); }
.sort__menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 30;
  display: flex; flex-direction: column;
  min-width: 190px;
  /* whatever the bar's layout becomes, the list can never be wider than the screen */
  max-width: calc(100vw - 2 * var(--pad));
  background: var(--bg);
  border: 1px solid var(--line);
}
.sort__menu button {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  border-top: 1px solid var(--line);
}
.sort__menu button:first-child { border-top: 0; }
.sort__menu button[aria-selected="true"] { color: var(--fg); background: var(--surface); }
/* an author display beats the hidden attribute; say it explicitly */
.sort__menu[hidden] { display: none; }

.pill {
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--mute);
}
/* only surfaces when the Storefront API call fails */
.pill--warn {
  max-width: 46ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-style: dashed;
  color: var(--fg-soft);
}

/* ---------- 8. PRODUCT GRID ------------------------------- */

.sec { padding: 0; }

.grid {
  display: grid;
  gap: var(--gap);
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Density: the button in the utility bar sets data-cols, which outranks
   the breakpoint defaults here and in the responsive block below. */
.grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.card { background: var(--bg); }

.card__a { display: block; padding-bottom: 26px; }

/* text panel that squares off an odd-numbered row */
.card--note {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 16px;
  padding: clamp(28px, 3vw, 52px);
}
.card__noteH {
  font: 300 clamp(21px, 1.8vw, 30px)/1.2 var(--sans);
  letter-spacing: -.01em;
}
.card__noteP {
  max-width: 34ch;
  font: 300 calc(13px * var(--ts))/1.7 var(--sans);
  color: var(--fg-soft);
}
.card__noteMeta { display: grid; gap: 6px; margin-top: 4px; }
.card__noteMeta span {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute);
}

/* the cell that squares off the last row: a doorway to the whole
   catalogue, set like the note panel, and the blank tiles after it */
/* The cell is a grid of one so the link stretches to the row's height
   without a percentage height or an aspect ratio of its own: either
   one fed the row's own sizing back into the column, which widened
   the fourth column and left the last row overflowing the grid. */
.card--all { display: grid; min-width: 0; }
.card--all[data-span="2"] { grid-column: span 2; }
.card__all {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 14px;
  min-width: 0;
  padding: clamp(28px, 3vw, 52px);
}
.card__allH {
  font: 300 clamp(21px, 1.8vw, 30px)/1.2 var(--sans);
  letter-spacing: -.01em;
}
.card__allGo {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.card__all:hover .card__allGo { color: var(--fg); text-decoration-color: var(--fg); }
.card--pad { background: var(--bg); }

.card__a:hover .ph        { background-color: var(--surface-2); }
/* the ghost brightens on hover only while the tile is still waiting for
   its photo; once the photo is in, the mark stays gone. Without the
   :not() this rule tied with .ph.is-live .ph__ghost on specificity and
   won by coming later, so the monogram showed through every cutout. */
.card__a:hover .ph:not(.is-live) .ph__ghost { opacity: calc(var(--ghost) * 2.6); }
.card__a:hover .card__name { color: var(--fg); }

.card__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 13px var(--card-pad) 0;
}
/* A long product name must never crowd the price out of the row —
   it drops to its own line and stays right-aligned instead. */
.card__price { margin-left: auto; }
.card__name {
  font: 400 calc(11px * var(--ts))/1.3 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: color .2s ease;
}
.card__price {
  font: 400 calc(11px * var(--ts))/1.3 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

.card__spec,
.card__sizes {
  padding: 6px var(--card-pad) 0;
  font: 400 calc(10px * var(--ts))/1.5 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute);
}
.card__sizes { padding-top: 3px; letter-spacing: .2em; }
/* one across (a phone): the tile is wide and the type is larger, so the
   sizes want a little more air under the colour */
.grid[data-cols="1"] .card__sizes { padding-top: 7px; }

/* A tile sheds detail as it narrows, whatever made it narrow. Keyed to the
   tile's own width, not the screen's. Narrow (two across on any phone): the
   colour and the price share one line under the name, and then the sizes go.
   Smallest (three across on a phone): the photo alone, as a contact sheet.
   These sit after the tile's base rules: a container query adds no weight. */
#productGrid .card { container-type: inline-size; }
@container (max-width: 312px) {
  .card__a:not(.card__all) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px; align-items: baseline;
  }
  .card__a:not(.card__all) > :first-child { grid-column: 1 / -1; }
  .card__meta { display: contents; }
  .card__name { grid-column: 1 / -1; padding: 12px var(--card-pad) 0; }
  .card__spec { grid-column: 1; grid-row: 3; padding-right: 0; }
  .card__price { grid-column: 2; grid-row: 3; margin-left: 0; padding: 6px var(--card-pad) 0 0; }
  .card__sizes { grid-column: 1 / -1; }
}
@container (max-width: 230px) {
  .card__sizes { display: none; }
  .card__a:not(.card__all) { padding-bottom: 18px; }
}
@container (max-width: 165px) {
  .card__a:not(.card__all) { display: block; padding-bottom: 0; }
  .card__name, .card__price, .card__spec { display: none; }
  .card__all { padding: 14px; gap: 8px; }
  .card__allH { font-size: calc(14px * var(--ts)); }
}

/* ---------- 9. EDITORIAL ---------------------------------- */

.ed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.ed__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
  gap: 22px;
  padding: clamp(40px, 7vw, 96px);
  border-left: 1px solid var(--line);
}
.ed__h {
  font: 300 clamp(28px, 3.4vw, 50px)/1.12 var(--sans);
  letter-spacing: -.015em;
}
.ed__h em { font-style: italic; font-weight: 400; }

.ed__p {
  max-width: 46ch;
  font: 300 calc(14px * var(--ts))/1.75 var(--sans);
  color: var(--fg-soft);
}

.ed__list { display: grid; gap: 7px; }
.ed__list span {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}
.ed__list span::before { content: "— "; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid var(--fg);
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.btn:hover { background: var(--fg); color: var(--bg); }

/* ---------- 10. SIGNUP ------------------------------------ */

.signup {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  padding: clamp(60px, 9vw, 130px) var(--pad);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.signup__h {
  font: 300 clamp(22px, 2.6vw, 34px)/1.25 var(--sans);
  letter-spacing: -.01em;
  max-width: 26ch;
}
.signup__form {
  display: flex; gap: 0; width: min(420px, 100%);
  border-bottom: 1px solid var(--line);
  margin-top: 6px;
}
.signup__form input {
  flex: 1; padding: 12px 2px;
  background: none; border: 0;
  font: 400 calc(11px * var(--ts))/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.signup__form input::placeholder { color: var(--mute); }
.signup__form input:focus { outline: none; }
.signup__form:focus-within { border-bottom-color: var(--fg); }
.signup__form button {
  padding: 12px 4px 12px 18px;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-soft);
}
.signup__form button:hover { color: var(--fg); }

.signup__fine {
  font: 400 calc(9px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}

/* ---------- 11. FOOTER ------------------------------------ */

.ftr { padding: clamp(40px, 6vw, 76px) var(--pad) 26px; }

.ftr__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.ftr__cols .eyebrow { margin-bottom: 14px; }
.ftr__cols li + li { margin-top: 8px; }
.ftr__cols a {
  font: 400 calc(11px * var(--ts))/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: color .2s ease;
}
.ftr__cols a:hover { color: var(--fg); }

.ftr__end {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 76px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
}
.ftr__mark { width: 22px; height: 17px; color: var(--mute); }

/* one skin for now: the toggle stays in the markup, out of sight */
.skinbtn { display: none !important; }
.skinbtn {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
  transition: color .2s ease;
}
.skinbtn:hover { color: var(--fg); }

/* ---------- 12. RESPONSIVE -------------------------------- */

@media (max-width: 1000px) {
  .hero.mast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid--4:not([data-cols]),
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 .card--note { grid-column: span 2; }
  .ed { grid-template-columns: 1fr; }
  .ed__copy { border-left: 0; border-top: 1px solid var(--line); }
  .ph--ed { aspect-ratio: 4 / 3; }
  .ftr__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  /* menu links were cramped under a thumb */
  .drawer__nav a, .drawer__fold { padding-top: 11px; padding-bottom: 11px; }
  .drawer__nav li + li { margin-top: 4px; }
  .drawer__nav .eyebrow { margin: 28px 0 14px; }

  .hdr__word { font-size: calc(11px * var(--ts)); letter-spacing: .2em; }
  .hdr__util { gap: 14px; }
  .ico { font-size: calc(9px * var(--ts)); }
  /* only the bag survives the narrow bar — both move into the drawer */
  .ico--acct { display: none; }
  /* One line, always. Bigger phone type wrapped it onto two, so it is sized
     off the screen's width instead of the type scale, and cannot wrap. */
  .hdr__stamp { font-size: min(9px, 2.3vw); gap: 0 8px; flex-wrap: nowrap; white-space: nowrap; letter-spacing: .08em; }
  .hdr__stamp > * + *::before { margin-right: 8px; }

  /* stack the filter row instead of letting the sort run off the edge */
  /* room between the breadcrumb and the controls under it */
  .util { gap: 22px 10px; padding-top: 18px; padding-bottom: 18px; }
  .util__ctl { width: 100%; justify-content: space-between; gap: 14px; }
  /* Sort sits at the right end of the stacked row (Filter took the left
     when it arrived), so its list keeps the default: pinned to the
     button's right edge, opening leftwards into the screen. */

  .grid--4:not([data-cols]), .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .grid--3 .card--note { grid-column: auto; }
  .ph--card, .ph--tall { aspect-ratio: 1 / 1; }
  .grid[data-cols="2"] .ph--card, .grid[data-cols="3"] .ph--card { aspect-ratio: 4 / 5; }

  .hero { height: 82svh; min-height: 420px; }
  .hero__cap { flex-direction: column; gap: 4px; }

  /* masthead: copy, then the three pieces in a row; the paragraph and
     the captions give way so it stays a masthead on a phone */
  .hero.mast {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-top: calc(var(--hdr-real, var(--hdr-h)) + 34px);
    padding-bottom: 32px;
  }
  /* a phone stacks everything, so each step down the masthead gets more
     air than the desk's two columns need */
  .mast__h { margin-top: 20px; }
  .mast__cap { display: none; }
  .hero.mast { --mast-photo: .45; --mast-dim: .6; }
  .hero.mast::before { background-image: url("../img/mast-bg.webp"); background-position: center 40%; filter: brightness(var(--mast-dim)) contrast(1.05); }
  .mast__p { font-size: calc(13px * var(--ts)); margin-top: 16px; }
  .mast__go { margin-top: 26px; gap: 22px; padding-bottom: 6px; }
  .cta { width: 100%; justify-content: space-between; }
  .mast__shot { height: clamp(72px, 12vh, 120px); }
}

/* ============================================================
   13. COMMERCE — bag, cart drawer, product detail
   Added when the wireframe became a working storefront. Same
   vocabulary as the rest of the sheet: hairline rules, mono
   micro-caps, no shadows, no rounded corners.
   ============================================================ */

/* ---------- bag count ------------------------------------- */

/* the bag: a glyph, and a round count riding its top-right corner
   that only exists once there is something to count */
.ico--search { display: inline-flex; align-items: center; padding: 2px; }
.ico__glyph { display: block; }
.ico--bag { position: relative; display: inline-flex; align-items: center; padding: 2px; }
.ico__bag { display: block; }
.ico__n {
  position: absolute; top: -5px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--fg); color: var(--bg);
  font: 500 calc(9px * var(--ts))/1 var(--sans); letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--bg);
}
.ico__n.is-full { display: inline-flex; }

/* ---------- cart drawer ------------------------------------
   Mirrors .drawer, hinged on the right. Head and foot hold their
   ground while only the line list scrolls, so Checkout stays
   reachable however long the bag gets.
   ----------------------------------------------------------- */

.cart {
  position: fixed; inset: 0 0 0 auto; z-index: 120;
  width: min(420px, 92vw);
  padding: 28px var(--pad) 0;
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.cart.is-on   { transform: none; }
.cart.is-busy { opacity: .6; pointer-events: none; }

.cart__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cart__top .drawer__x { align-self: auto; padding: 0 4px; }

.cart__err { margin: 14px 0 0; }

.cart__top .eyebrow { display: inline-flex; align-items: center; gap: .7em; }
.cart__glyph { display: inline-block; flex: none; width: 1.5em; height: 1.5em; }

/* "You might also like": three pieces on the rule above the subtotal,
   the size of the masthead's featured row. It gives way on short
   screens, where the bag's own lines need the room more. */
.cart__more { padding: 16px 0 14px; border-top: 1px solid var(--line); }
.cart__more[hidden] { display: none; }
.cart__more .eyebrow { margin-bottom: 10px; }
.cart__moreRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cmore { display: block; min-width: 0; }
.cmore__shot { position: relative; display: block; height: clamp(72px, 11vh, 104px); background-color: transparent; }
.cmore__shot .mast__img { object-position: center bottom; }
.cmore__name, .cmore__price {
  display: block;
  font: 400 calc(9px * var(--ts))/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.cmore__name {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .2s ease;
}
.cmore__price { margin-top: 2px; color: var(--mute); }
.cmore:hover .cmore__name { color: var(--fg); }
.cmore:hover .mast__img { transform: translateY(-4px); }
@media (max-height: 640px) { .cart__more { display: none; } }


.cart__keep {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin-top: 14px;
  font: 300 calc(12px * var(--ts))/1.4 var(--sans);
  color: var(--mute);
}
.cart__keep[hidden] { display: none; }
.cart__keepGo {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.cart__keepGo:hover { color: var(--fg); text-decoration-color: var(--fg); }

.cart__lines {
  flex: 1; overflow-y: auto;
  margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad);
}

.cart__empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 44px 0;
  color: var(--mute);
}

.cline {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.cline__shot {
  display: block; aspect-ratio: 4 / 5;
  background: var(--surface);
  overflow: hidden;
}
.cline__img { width: 100%; height: 100%; object-fit: cover; }

.cline__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}

.cline__name {
  font: 400 calc(11px * var(--ts))/1.35 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg);
}
.cline__name:hover { color: var(--mute); }

.cline__opts {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
}

.cline__price {
  font: 400 calc(11px * var(--ts))/1 var(--mono);
  letter-spacing: .06em;
  color: var(--fg-soft);
  white-space: nowrap;
}

.cline__rm {
  padding: 0;
  font: 400 calc(9px * var(--ts))/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid transparent;
}
.cline__rm:hover { color: var(--fg); border-bottom-color: var(--line); }

.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); }
.qty__b {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font: 400 calc(13px * var(--ts))/1 var(--sans);
  color: var(--fg-soft);
}
.qty__b:hover { background: var(--surface); color: var(--fg); }
.qty__n {
  min-width: 30px;
  display: flex; align-items: center; justify-content: center;
  border-inline: 1px solid var(--line);
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  color: var(--fg);
}

.cart__foot {
  padding: 20px 0 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.cart__sub {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 calc(11px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg);
}
.cart__fine {
  margin: 10px 0 16px;
  font: 400 calc(10px * var(--ts))/1.5 var(--mono);
  letter-spacing: .08em;
  color: var(--mute);
}

/* a flex row so the bag's Checkout can carry an arrow out beside the word
   (it leaves this site for Shopify's); a lone label still centres */
.btn__out { display: block; flex: none; width: 1.35em; height: 1.35em; }
.btn--buy {
  display: flex; align-items: center; justify-content: center; gap: .8em; width: 100%;
  background: var(--fg); color: var(--bg);
  border-color: var(--fg);
  text-align: center;
}
.btn--buy:hover { background: transparent; color: var(--fg); }
.btn--buy:disabled {
  background: transparent; color: var(--mute);
  border-color: var(--line); cursor: not-allowed;
}
.btn--ghost { border-color: var(--line); color: var(--fg-soft); }

/* ---------- product detail -------------------------------- */

.pdp { min-height: 60vh; }

.pdp__load {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(80px, 16vw, 200px) var(--pad);
}
.pdp__loadMark {
  width: 54px; height: 42px; color: var(--fg);
  animation: tcPulse 1.6s ease-in-out infinite;
}
@keyframes tcPulse { 0%, 100% { opacity: .1; } 50% { opacity: .32; } }

.pdp__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 32vw, 440px);
  border-bottom: 1px solid var(--line);
}

.pdp__gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  background: var(--line);
}
.ph--shot { aspect-ratio: 4 / 5; }
.ph--shot .ph__ghost { width: clamp(40px, 5vw, 74px); }

/* a lone image should not sit in half a column */
.pdp__gal .ph--shot:only-child { grid-column: span 2; aspect-ratio: 16 / 10; }

.pdp__rail { border-left: 1px solid var(--line); }

.pdp__railIn {
  position: sticky; top: var(--hdr-h);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px;
  padding: clamp(28px, 3.5vw, 48px) clamp(20px, 2.4vw, 36px);
}

.pdp__h {
  font: 400 clamp(19px, 2vw, 26px)/1.2 var(--sans);
  letter-spacing: .01em;
  color: var(--fg);
}

.pdp__price {
  display: flex; align-items: baseline; gap: 12px;
  font: 400 calc(13px * var(--ts))/1 var(--mono);
  letter-spacing: .08em;
  color: var(--fg);
}
.pdp__was { color: var(--mute); font-size: calc(11px * var(--ts)); }

.pdp__desc {
  font: 300 calc(13px * var(--ts))/1.7 var(--sans);
  color: var(--fg-soft);
  max-width: 44ch;
  white-space: pre-line;
}

.pdp__err {
  width: 100%; padding: 10px 12px;
  border: 1px dashed var(--line);
  font: 400 calc(10px * var(--ts))/1.4 var(--mono);
  letter-spacing: .08em;
  color: var(--fg-soft);
}

.pdp__oops {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(60px, 12vw, 160px) var(--pad);
}

/* ---------- options --------------------------------------- */

.opt { width: 100%; }

.opt__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.opt__val {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg);
}

.opt__row { display: flex; flex-wrap: wrap; gap: 6px; }

.swatch {
  min-width: 42px; padding: 10px 12px;
  border: 1px solid var(--line);
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.swatch:hover { border-color: var(--fg-soft); color: var(--fg); }
.swatch.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* exists, but out of stock */
.swatch.is-out { color: var(--mute); border-style: dashed; }

/* no such variant at all — struck through, still selectable so the
   shopper can see what the combination would have been */
.swatch.is-dead { color: var(--mute); opacity: .45; text-decoration: line-through; }

/* ---------- spec sheet ------------------------------------- */

.spec { width: 100%; border-top: 1px solid var(--line); }
.spec .eyebrow { display: block; margin: 18px 0 12px; }

.spec__dl {
  display: grid;
  grid-template-columns: minmax(80px, 34%) 1fr;
  gap: 8px 16px;
  margin: 0;
  font: 400 calc(10px * var(--ts))/1.5 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.spec__dl dt { color: var(--mute); }
.spec__dl dd { margin: 0; color: var(--fg-soft); }

/* ---------- sold-out flag on a grid tile ------------------- */

.ph__flag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font: 400 calc(9px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
}

/* ---------- search -----------------------------------------
   Drops from the top rather than sliding from a side, so it reads
   as an extension of the header it was opened from.
   ----------------------------------------------------------- */

.find {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .28s ease;
}
.find.is-on { opacity: 1; }

/* A sheet from the top: the bar holds still, everything under it scrolls. */
.find__box {
  display: flex; flex-direction: column;
  max-height: min(88svh, 900px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transform: translateY(-18px);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.find.is-on .find__box { transform: none; }
.find__box:focus { outline: none; }

.find__bar {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(16px, 2.4vw, 28px) var(--pad);
  border-bottom: 1px solid var(--line);
}
.find__glyph { display: block; flex: none; width: 24px; height: 24px; color: var(--mute); }
.find__bar:focus-within .find__glyph { color: var(--fg); }

.find__bar input {
  flex: 1; min-width: 0;
  padding: 6px 0;
  background: none; border: 0; border-radius: 0;
  font: 300 clamp(20px, 2.6vw, 32px)/1.2 var(--sans);
  letter-spacing: -.01em;
  color: var(--fg);
}
.find__bar input::placeholder { color: var(--mute); }
.find__bar input:focus { outline: none; }
/* the browser's own clear affordance fights the type scale */
.find__bar input::-webkit-search-cancel-button { -webkit-appearance: none; }

.find__x {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  color: var(--mute);
  transition: color .2s ease;
}
.find__x:hover { color: var(--fg); }
.find__esc {
  padding: 5px 7px;
  border: 1px solid var(--line);
  font: 400 calc(9px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.find__times { font: 300 26px/1 var(--sans); }

.find__scroll {
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(18px, 2.4vw, 30px) var(--pad) clamp(28px, 4vw, 48px);
}
.find__note { margin-bottom: 18px; color: var(--fg-soft); }
.find__lead { max-width: 56ch; margin-bottom: 26px; font: 300 calc(15px * var(--ts))/1.6 var(--sans); color: var(--fg-soft); }
.find__h { margin: 0 0 14px; }
.find__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.find__chips .chip { display: inline-block; }

/* results and suggestions are the grid's own tiles, four up */
.find__out {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none; margin: 0; padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.hit { background: var(--bg); }
.hit__a { display: block; padding-bottom: 16px; }
.hit__shot { display: grid; }
.hit__body {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 2px 12px;
  padding: 12px var(--card-pad) 0;
}
.hit__name {
  font: 400 calc(11px * var(--ts))/1.35 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-soft);
  transition: color .2s ease;
}
.hit__a:hover .hit__name { color: var(--fg); }
.hit__a:hover .ph { background-color: var(--surface-2); }
.hit__price {
  margin-left: auto;
  font: 400 calc(11px * var(--ts))/1.35 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
/* phones: two tiles to a row, the sheet may take the whole screen, and
   the Esc hint means nothing without a keyboard. Kept here, after the
   rules it overrides: the main responsive block sits earlier in the file. */
@media (max-width: 620px) {
  .find__out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .find__esc { display: none; }
  .find__box { max-height: 100svh; }
}


/* ---------- size guide -------------------------------------
   The table arrives from Shopify stripped of its attributes, so
   everything it looks like is set here and it inherits the skin.
   ----------------------------------------------------------- */

.guide { border-bottom: 1px solid var(--line); }

.guide__sum {
  display: flex; align-items: baseline; gap: 14px;
  padding: 22px var(--pad);
  cursor: pointer;
  list-style: none;
}
.guide__sum::-webkit-details-marker { display: none; }
.guide__sum::after {
  content: "+";
  margin-left: auto;
  font: 300 calc(18px * var(--ts))/1 var(--sans);
  color: var(--fg-soft);
}
.guide__det[open] .guide__sum::after { content: "\2013"; }
.guide__sum:hover .eyebrow { color: var(--fg); }

.guide__hint {
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}

.guide__scroll {
  overflow-x: auto;
  padding: 0 var(--pad) 30px;
}

.guide__scroll table {
  width: auto; min-width: 100%;
  border-collapse: collapse;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.guide__scroll td,
.guide__scroll th {
  padding: 9px 14px;
  border: 1px solid var(--line);
  color: var(--fg-soft);
  text-align: center;
  white-space: nowrap;
}
/* first column is the measurement name — left-align and anchor it */
.guide__scroll tr > td:first-child,
.guide__scroll tr > th:first-child {
  text-align: left;
  color: var(--fg);
  background: var(--surface);
}
.guide__scroll tr:first-child td { color: var(--fg); background: var(--surface); }
.guide__scroll p { margin: 12px 0 0; color: var(--mute); font: 400 calc(10px * var(--ts))/1.6 var(--mono); }

/* note under the size chart: room above it, and set as a caption */
.guide__note {
  margin: 0 var(--pad) 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 70ch;
}
.guide__note p {
  font: 300 calc(12px * var(--ts))/1.7 var(--sans);
  color: var(--mute);
}
.guide__note p + p { margin-top: 8px; }
.guide__scroll + .guide__note { margin-top: -6px; }

/* the supplier's spec sheet: present, folded, small and quiet */
.sheet {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 72ch);
  gap: 0 28px;
  margin: 0; padding: 0 var(--pad) 34px;
}
.sheet dt, .sheet dd {
  margin: 0; padding: 9px 0;
  border-top: 1px solid var(--line);
}
.sheet dt {
  font: 400 calc(9.5px * var(--ts))/1.6 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}
.sheet dd {
  font: 300 calc(11.5px * var(--ts))/1.65 var(--sans);
  color: var(--mute);
}
.guide--spec .guide__det[open] .sheet dd { color: color-mix(in srgb, var(--fg-soft) 72%, var(--bg)); }

/* gallery slider */
.pdp__gal.slider { position: relative; display: block; background: var(--line); }
.slider__track {
  display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: -2px;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.slider__slide { flex: 0 0 calc(50% - var(--gap) / 2); scroll-snap-align: start; }
.slider__slide:only-child { flex-basis: 100%; aspect-ratio: 16 / 10; }
.slider__arrow {
  position: absolute; top: 50%; z-index: 3;
  width: 42px; height: 42px; margin-top: -21px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--line);
  font: 300 calc(17px * var(--ts))/1 var(--sans);
  color: var(--fg);
  transition: opacity .2s ease, background .2s ease;
}
.slider__arrow--prev { left: 12px; }
.slider__arrow--next { right: 12px; }
.slider__arrow:hover { background: var(--bg); }
.slider__arrow:disabled { opacity: 0; pointer-events: none; }
.slider__count {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em;
  color: var(--mute);
}
.slider.is-static .slider__arrow, .slider.is-static .slider__count { display: none; }
.slider.is-static .slider__track { cursor: default; }

/* ---------- commerce, responsive --------------------------- */

@media (max-width: 1000px) {
  .slider__slide { flex-basis: 100%; }
  .sheet { grid-template-columns: 1fr; }
  .sheet dd { border-top: 0; padding-top: 0; }
  .pdp__wrap   { grid-template-columns: 1fr; }
  .pdp__rail   { border-left: 0; border-top: 1px solid var(--line); }
  .pdp__railIn { position: static; }
}

@media (max-width: 620px) {
  .pdp__gal { grid-template-columns: 1fr; }
  .pdp__gal .ph--shot:only-child { grid-column: auto; aspect-ratio: 4 / 5; }

  .cart { width: 100%; }
  .cline { grid-template-columns: 64px 1fr; }
  .cline__price { grid-column: 2; justify-self: start; }
}

/* ---------- 15. PAGES — support, house, legal ------------- */

.page { min-height: 60vh; }

.page__head {
  padding: clamp(36px, 6vw, 80px) var(--pad) clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.page__h {
  margin-top: 16px;
  font: 400 clamp(28px, 3.4vw, 48px)/1.08 var(--sans);
  letter-spacing: -.015em;
}
.page__lead {
  max-width: 54ch;
  margin-top: 16px;
  font: 400 calc(15px * var(--ts))/1.65 var(--sans);
  color: var(--fg);
}

.page__body {
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(60px, 8vw, 110px);
  max-width: calc(68ch + 2 * var(--pad));
}
.page--wide .page__body { max-width: none; padding-left: 0; padding-right: 0; }

/* On this page: a hairline list of the sections, for the long legal
   texts only (pages.js builds it when there are five heads or more). */
.page__toc {
  list-style: none; padding: 0;
  margin: 0 0 36px;
  border-top: 1px solid var(--line);
}
.page__toc li { margin: 0; }
.page__toc a {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: 500 calc(11px * var(--ts))/1.4 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
}
.page__toc a::before {
  content: counter(toc, decimal-leading-zero);
  counter-increment: toc;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .1em;
  color: var(--mute);
}
.page__toc { counter-reset: toc; }
.page__toc a:hover { color: var(--fg); }

/* House prose. Section heads are sans, weighted, ruled off above;
   body copy is light with the facts that matter set in a heavier
   weight. Policy HTML from Shopify is sanitised down to these
   elements, so it dresses the same. */
.prose h2 {
  margin: 44px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 500 calc(12px * var(--ts))/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg);
  scroll-margin-top: calc(var(--hdr-h) + 20px);
}
.prose > h2:first-child,
.prose > .page__toc + h2,
.prose > .page__facts + h2 { margin-top: 0; }
.prose > h2:first-child { padding-top: 0; border-top: 0; }
.prose h3, .prose h4 {
  margin: 24px 0 8px;
  font: 500 calc(14px * var(--ts))/1.4 var(--sans);
  color: var(--fg);
}
.prose p, .prose li {
  font: 300 calc(15px * var(--ts))/1.75 var(--sans);
  color: var(--fg-soft);
}
.prose p + p, .prose div + p, .prose ul + p, .prose ol + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 20px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--mute); font-weight: 400; }
.prose a {
  color: var(--fg);
  font-weight: 400;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--mute);
  transition: text-decoration-color .2s ease;
}
.prose a:hover { text-decoration-color: var(--fg); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose em { color: var(--fg); font-style: italic; }
.prose table {
  margin: 16px 0;
  border-collapse: collapse;
  font: 400 calc(11px * var(--ts))/1.5 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.prose td, .prose th {
  padding: 10px 14px;
  border: 1px solid var(--line);
  color: var(--fg-soft);
  text-align: left;
}
.prose th { color: var(--fg); background: var(--surface); }

.page__list { list-style: none; padding: 0; margin: 14px 0 0; }
.page__list li + li { margin-top: 0; }
.page__list a {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font: 500 calc(11px * var(--ts))/1.4 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
}
.page__list a::after { content: "\2192"; color: var(--mute); }
.page__list li:last-child a { border-bottom: 1px solid var(--line); }
.page__list a:hover, .page__list a:hover::after { color: var(--fg); }

.page__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px 34px;
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.fact .eyebrow {
  margin-bottom: 12px;
  font: 500 calc(11px * var(--ts))/1 var(--sans);
  letter-spacing: .16em;
  color: var(--fg);
}
.fact p { font-weight: 400; color: var(--fg-soft); }
.fact p + p { margin-top: 8px; }
.fact a { color: var(--fg); text-decoration: none; }
.fact a:hover { text-decoration: underline; }

/* the lookbook: the whole collection, tile by tile */
.look__grid { margin-top: 0; }

.ftr__end { line-height: 1.6; }
.ftr__legal { display: flex; gap: 20px; }
.ftr__end a {
  color: var(--fg-soft);
  transition: color .2s ease;
}
/* On a phone the line wrapped mid-way and left Privacy hanging under
   the copyright. Stack it: mark, copyright, then the two links. */
@media (max-width: 620px) {
  .ftr__end { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* a glyph beside a footer link: the text's own height and colour */
.ftr__icon {
  /* the reset makes every svg a block, which dropped the label onto
     its own line under the glyph */
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .65em;
  vertical-align: -.14em;
}
.ftr__end a:hover { color: var(--fg); }
/* the builder's credit: the quietest thing in the footer until it is hovered */
.ftr__by, .ftr__end .ftr__by a { color: var(--mute); }
.ftr__by { opacity: .75; transition: opacity .2s ease; }
.ftr__by:hover { opacity: 1; }
.ftr__end .ftr__by a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.ftr__end .ftr__by a:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* the 404 page: two ways forward, then the usual helps */
.lost__go { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

/* ---------- 17. ACCOUNT ----------------------------------- */

.acct__tabs {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.acct__tab {
  padding: 16px 0 14px;
  border-bottom: 2px solid transparent;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.acct__tab:hover { color: var(--fg); }
.acct__tab[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }
.acct__out { margin-left: auto; }

.acct__body { max-width: calc(760px + 2 * var(--pad)); display: grid; gap: clamp(28px, 4vw, 44px); }
.acct__h {
  margin: 0 0 16px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 500 calc(12px * var(--ts))/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
}
.acct__panel:first-child .acct__h { border-top: 0; padding-top: 0; }
.acct__sub { margin: 26px 0 8px; font: 400 calc(10px * var(--ts))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.acct__wait { display: grid; gap: 12px; }
.acct__big  { font: 400 calc(20px * var(--ts))/1.3 var(--sans); letter-spacing: -.01em; }
.acct__fine, .acct__none { margin-top: 8px; font: 300 calc(13px * var(--ts))/1.7 var(--sans); color: var(--fg-soft); max-width: 58ch; }
.acct__none + .btn { margin-top: 16px; }
.acct__addr { font: 300 calc(14px * var(--ts))/1.7 var(--sans); color: var(--fg-soft); white-space: pre-line; }
.acct__err  { margin: 0 0 16px; font: 400 calc(13px * var(--ts))/1.6 var(--sans); color: #e5484d; max-width: 60ch; }
.acct__go   { margin-top: 4px; }
.acct__more {
  display: inline-block; margin-top: 16px; margin-right: 18px;
  font: 400 calc(10px * var(--ts))/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line);
}
.acct__more:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* an order, as a row */
.ord {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.ord:last-of-type { border-bottom: 1px solid var(--line); }
.ord:hover .ord__name { text-decoration: underline; text-underline-offset: 3px; }
.ord__thumbs { display: flex; gap: 6px; }
.ord__thumb { position: relative; width: 56px; height: 56px; flex: none; background-color: var(--surface); }
.ord__thumb .mast__img { padding: 8%; object-position: center; }
.ord__main, .ord__side, .items__main { display: grid; gap: 5px; min-width: 0; }
.ord__side { justify-items: end; text-align: right; }
.ord__name { font: 500 calc(13px * var(--ts))/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord__meta, .ord__status, .ord__total {
  font: 400 calc(10px * var(--ts))/1.3 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute);
}
.ord__status { color: var(--fg-soft); }
.ord__total  { color: var(--fg); }

.items { list-style: none; margin: 0; padding: 0; }
.items__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.items__row .ord__thumb { width: 72px; height: 72px; }
.sums {
  display: grid; grid-template-columns: 1fr auto; gap: 9px 24px;
  margin: 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font: 300 calc(13px * var(--ts))/1.4 var(--sans); color: var(--fg-soft);
}
.sums dt, .sums dd { margin: 0; }
.sums dd { text-align: right; }
.sums__total { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 500; color: var(--fg); }

.ship {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.ship__track { font: 400 calc(12px * var(--ts))/1.4 var(--sans); color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* forms: returns, addresses, profile */
.frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; }
.fld { grid-column: 1 / -1; display: grid; gap: 7px; }
.fld--half { grid-column: auto; }
.fld__l { font: 400 calc(10px * var(--ts))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.fld__i, .ret__field, .ret__note {
  width: 100%; padding: 12px 13px;
  background: transparent;
  border: 1px solid var(--line);
  font: 300 calc(14px * var(--ts))/1.3 var(--sans); color: var(--fg);
  border-radius: 0;
}
.fld__i:focus, .ret__field:focus, .ret__note:focus { outline: 0; border-color: var(--fg-soft); }
.fld__i:disabled { color: var(--mute); }
.ret__field { appearance: none; -webkit-appearance: none; width: auto; min-width: 96px; }
.ret__field option { color: #111; }
.fld--check { grid-template-columns: auto 1fr; align-items: center; gap: 10px; font: 300 calc(13px * var(--ts))/1.3 var(--sans); color: var(--fg-soft); }
.frm .acct__err, .frm .acct__fine, .frm__go, .frm > .btn { grid-column: 1 / -1; }
.frm__go { display: flex; gap: 12px; flex-wrap: wrap; }
.frm > .btn { justify-self: start; }

/* the waitlist form: the account forms' fields, one column */
.wait { max-width: 440px; }
.wait .acct__err { margin: 0; }
.wait__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wait__done { grid-column: 1 / -1; font: 300 clamp(22px, 2.2vw, 30px)/1.2 var(--sans); letter-spacing: -.01em; }

.ret { display: grid; gap: 0; max-width: 680px; }
.ret__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.ret__pick { width: 18px; height: 18px; accent-color: var(--fg); }
.ret__label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; cursor: pointer; }
.ret__note { margin: 18px 0; resize: vertical; }
.ret > .btn { justify-self: start; }

.addr { padding: 16px 0; border-top: 1px solid var(--line); }
.addr__def { display: block; margin-bottom: 8px; font: 400 calc(10px * var(--ts))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.addr + .btn, .acct__none + .btn { margin-top: 18px; }

@media (max-width: 620px) {
  .acct__tabs { flex-wrap: nowrap; gap: 0 20px; }
  .frm { grid-template-columns: minmax(0, 1fr); }
  .fld--half { grid-column: 1 / -1; }
  .ord { grid-template-columns: minmax(0, 1fr) auto; }
  .ord__thumbs { grid-column: 1 / -1; }
  .ret__row { grid-template-columns: auto minmax(0, 1fr); }
  .ret__row .ret__field { grid-column: 2; width: 100%; }
}

/* ---------- 16. SEASON POP-UP ----------------------------- */

.pop {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .25s ease;
}
.pop.is-on { opacity: 1; }
.pop__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .74); }
.pop__box {
  position: relative;
  width: min(100%, 780px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: clamp(26px, 4vw, 48px);
  background: var(--bg);
  border: 1px solid var(--line);
  transform: translateY(10px);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pop.is-on .pop__box { transform: none; }
.pop__x {
  position: absolute; top: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px);
  width: 44px; height: 44px;
  font: 300 calc(24px * var(--ts))/1 var(--sans);
  color: var(--fg-soft);
  transition: color .2s ease;
}
.pop__x:hover { color: var(--fg); }
.pop__h {
  margin-top: 14px; padding-right: 48px;
  font: 500 clamp(24px, 3vw, 36px)/1.08 var(--sans);
  letter-spacing: -.02em;
}
.pop__p {
  max-width: 46ch; margin-top: 10px;
  font: 300 calc(14px * var(--ts))/1.65 var(--sans);
  color: var(--fg-soft);
}
.pop__picks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
  list-style: none; margin: clamp(20px, 3vw, 32px) 0; padding: 0;
}
.pop__pick { display: block; }
.pop__shot { position: relative; aspect-ratio: 1 / 1; background: var(--surface); }
.pop__shot .mast__img { padding: 10%; object-position: center; }
.pop__pick:hover .mast__img { transform: translateY(-4px); }
.pop__name, .pop__price {
  display: block;
  font: 400 calc(10px * var(--ts))/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.pop__name { margin-top: 10px; color: var(--fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop__price { margin-top: 3px; color: var(--mute); }
.pop__pick:hover .pop__name { color: var(--fg); }
@media (max-width: 620px) {
  .pop__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pop__go { width: 100%; justify-content: center; }
}

/* ---------- 14. MOTION ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}