:root {
  --paper: #f4f3ef;
  --ink: #0a0a0a;
  --ink-deep: #060606;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --dur-hover: .45s;
  --dur-panel: .6s;

  --o-primary: .80;
  --o-secondary: .56;
  --o-caption: .38;
  --o-muted: .22;

  --shell: clamp(1rem, 4vw, 3.5rem);
  --gap: 1px;
  --header-h: 68px;
}

.theme-light {
  --bg: var(--paper);
  --fg: var(--ink);
  --line: rgba(10, 10, 10, .12);
  --line-strong: rgba(10, 10, 10, .26);
}

.theme-dark {
  --bg: var(--ink-deep);
  --fg: var(--paper);
  --line: rgba(244, 243, 239, .11);
  --line-strong: rgba(244, 243, 239, .24);
}

.invert-dark {
  --bg: var(--ink-deep);
  --fg: var(--paper);
  --line: rgba(244, 243, 239, .11);
  --line-strong: rgba(244, 243, 239, .24);
  background: var(--bg);
  color: var(--fg);
}
.invert-light {
  --bg: var(--paper);
  --fg: var(--ink);
  --line: rgba(10, 10, 10, .12);
  --line-strong: rgba(10, 10, 10, .26);
  background: var(--bg);
  color: var(--fg);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 2;
}
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: clamp(.9rem, .82rem + .25vw, 1rem);
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

::selection { background: var(--fg); color: var(--bg); }

.display,
h1.display, h2.display, h3.display {
  font-family: 'Anton', 'Oswald', 'Impact', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.02em;

  font-size: clamp(2.4rem, min(14vw, 12vh), 9rem);
  overflow-wrap: break-word;
}

.display--md { font-size: clamp(1.9rem, min(8vw, 7vh), 4.2rem); line-height: .9; }
.display--sm { font-size: clamp(1.5rem, min(5vw, 5vh), 2.6rem); line-height: .92; }
.display--xs { font-size: clamp(1.15rem, min(3.4vw, 3.4vh), 1.75rem); line-height: .96; }

.accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -.01em;
  padding-inline: .04em;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.4;
}
.mono--tight { letter-spacing: .12em; }

.lede { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 300; line-height: 1.45; }
.t-80 { opacity: var(--o-primary); }
.t-56 { opacity: var(--o-secondary); }
.t-38 { opacity: var(--o-caption); }
.t-22 { opacity: var(--o-muted); }
.strike { text-decoration: line-through; opacity: var(--o-caption); }
.bold { font-weight: 500; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

.shell { padding-inline: var(--shell); }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.section { padding-block: clamp(3rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.rule { height: 1px; background: var(--line); border: 0; }

.grid {
  display: grid;
  gap: var(--gap);
  background: var(--bg);
}
.grid > * {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.grid--framed { padding: 1px; }

.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.pad { padding: clamp(1.1rem, 2vw, 2rem); }
.pad-lg { padding: clamp(1.5rem, 3.2vw, 3.2rem); }
.flow { display: flex; flex-wrap: wrap; gap: .6rem; }
.row { display: flex; align-items: center; gap: .75rem; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

.invertible {
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) {
  .invertible:hover,
  .invertible:focus-within {
    background: var(--fg);
    color: var(--bg);
  }
  .invertible:hover .hairline,
  .invertible:focus-within .hairline { background: currentColor; opacity: .2; }
}

.hairline { height: 1px; background: var(--line); }

.btn {
  --btn-fg: var(--fg);
  --btn-bg: var(--bg);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 2em;
  border: 1px solid var(--btn-fg);
  border-radius: 999px;
  color: var(--btn-fg);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              opacity .3s var(--ease-out);
  text-align: center;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fg);
  transform: translateY(101%);
  transition: transform var(--dur-hover) var(--ease-io);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-bg); }

.btn--solid { color: var(--btn-bg); }
.btn--solid::before { transform: translateY(0); }
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: translateY(-101%); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--btn-fg); }

.btn--block { display: flex; width: 100%; }
.btn--sm { padding: .6em 1.2em; font-size: .7rem; }
.btn--lg { padding: 1.15em 2.6em; }
.btn--ghost { border-color: var(--line-strong); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: var(--o-muted);
  pointer-events: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.btn-icon:hover { background: var(--fg); color: var(--bg); }

.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-hover) var(--ease-out);
}
.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.link--on::after { transform: scaleX(1); transform-origin: left center; }
.link--on:hover::after { transform: scaleX(0); transform-origin: right center; }

.i {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
  transition: transform var(--dur-hover) var(--ease-out);
}
.i--lg { width: 1.35em; height: 1.35em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  transition: transform var(--dur-panel) var(--ease-io),
              background .3s linear, color .3s linear;
}
.header--hidden { transform: translateY(-101%); }
.header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
.header__logo {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-size: 1.35rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header__nav { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.6rem); }
.header__nav .mono { font-size: .66rem; }
.header__tools { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.header__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: .6rem;
  line-height: 16px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.cart-btn { position: relative; }
.header__marquee {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding-block: .5rem;
}
.marquee__track {
  display: inline-flex;
  gap: 3rem;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  color: var(--fg);
  transform: translateY(-101%);
  transition: transform var(--dur-panel) var(--ease-io);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open { transform: translateY(0); }
.menu__list a { display: block; }

.cards {
  display: grid;
  gap: var(--gap);
  background: var(--bg);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cards > * {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) {
  .card:hover, .card:focus-within { background: var(--fg); color: var(--bg); }
}
.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg);
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-hover) var(--ease-out),
              scale .9s var(--ease-out);
}
.card__img--hover { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__img--main { opacity: 0; }
  .card:hover .card__img--hover { opacity: 1; }
  .card:hover .card__img { scale: 1.03; }
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(.75rem, 1.4vw, 1.15rem);
  flex: 1;
}

.card__name {
  font-size: clamp(.85rem, .8rem + .2vw, .98rem);
  font-weight: 400;
  line-height: 1.3;
}
.card__brand { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; opacity: var(--o-caption); font-family: 'JetBrains Mono', monospace; }
.card__prices { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.card__price { font-weight: 500; }
.card__price--sale { font-weight: 500; }
.card__sizes { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .16em; opacity: var(--o-caption); text-transform: uppercase; }

.badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: .4rem .7rem;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.theme-dark .badge { background: var(--paper); color: var(--ink); }
.badge--right { left: auto; right: 0; }
.badge--flat { position: static; display: inline-block; }

.card--out .card__media { filter: grayscale(1); opacity: .5; }
.card--out .card__name { opacity: var(--o-secondary); }

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-family: 'Anton', 'Oswald', sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  opacity: var(--o-muted);
}

.catalog {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--gap);
  background: var(--bg);
}
.catalog > * { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.filters { position: sticky; top: var(--header-h); align-self: start; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.filters__group + .filters__group { border-top: 1px solid var(--line); }
.filters__head { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(.9rem, 1.6vw, 1.3rem); }
.filters__body { padding: 0 clamp(.9rem, 1.6vw, 1.3rem) 1.1rem; }
.filters details[open] .filters__caret { transform: rotate(45deg); }
.filters__caret { transition: transform var(--dur-hover) var(--ease-out); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip--sq { border-radius: 0; min-width: 3.2rem; justify-content: center; }

.sortbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem clamp(.9rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--header-h);
  background: var(--bg);
  z-index: 20;
}
.sortbar__links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

.crumbs { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.crumbs .i { opacity: var(--o-muted); }

.pager { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; padding: 2rem 1rem; }
.pager a, .pager span {
  min-width: 2.4rem;
  padding: .5rem .6rem;
  text-align: center;
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.pager a:hover { background: var(--fg); color: var(--bg); }
.pager .is-on { background: var(--fg); color: var(--bg); }

.range { display: flex; gap: .5rem; align-items: center; }
.field {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: .92rem;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.field:focus { border-color: var(--fg); outline: none; }
.field::placeholder { color: currentColor; opacity: var(--o-caption); }
select.field { appearance: none; background-image: none; }
textarea.field { resize: vertical; min-height: 5rem; }
.field--sm { padding: .5rem .6rem; font-size: .8rem; }
.label { display: block; margin-bottom: .4rem; }

.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__box {
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.switch input:checked + .switch__box { background: var(--fg); border-color: var(--fg); }
.switch input:checked + .switch__box::after {
  content: ""; width: 6px; height: 6px; background: var(--bg);
}
.switch input:focus-visible + .switch__box { outline: 2px solid var(--fg); outline-offset: 2px; }

.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: var(--gap); background: var(--bg); }
.pdp > * { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }

.gallery {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  background: var(--bg);
  padding: clamp(1rem, 3vw, 3rem);
}

.gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - var(--header-h) - 4rem);
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);
  cursor: zoom-in;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease-out); }
.gallery__item.is-zoom img { scale: 1.9; cursor: zoom-out; }
.buybox { position: sticky; top: var(--header-h); align-self: start; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: var(--gap); background: var(--bg); }
.size {
  position: relative;
  padding: .85rem .3rem;
  background: var(--bg);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.size:hover { background: var(--fg); color: var(--bg); }
.size.is-on { background: var(--fg); color: var(--bg); }

.size.is-off { opacity: var(--o-caption); cursor: not-allowed; }
.size.is-off::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px));
}
.size.is-off:hover { background: var(--bg); color: inherit; }
.size input { position: absolute; opacity: 0; pointer-events: none; }

.spec { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .5rem 1.2rem; }
.spec dt { opacity: var(--o-caption); }
.acc summary { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; }
.acc__body { padding-bottom: 1.2rem; }
.acc details + details { border-top: 1px solid var(--line); }
.acc details[open] .acc__sign { transform: rotate(45deg); }
.acc__sign { transition: transform var(--dur-hover) var(--ease-out); }

.sizetable td, .sizetable th { padding: .55rem .4rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .82rem; }
.sizetable th { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: var(--o-caption); font-weight: 400; }
.tablewrap { overflow-x: auto; }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(6, 6, 6, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-panel) var(--ease-io);
  backdrop-filter: blur(2px);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(30rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  border-left: 1px solid var(--line);
  transform: translateX(101%);
  transition: transform var(--dur-panel) var(--ease-io);
}
.panel.is-open { transform: translateX(0); }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--line); }
.panel__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.panel__foot { border-top: 1px solid var(--line); padding: clamp(1rem, 2vw, 1.5rem); }

.line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; padding: 1rem clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--line); }
.line__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.qty button { width: 28px; height: 28px; display: grid; place-items: center; transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.qty button:hover { background: var(--fg); color: var(--bg); }
.qty span { min-width: 28px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .74rem; }

.totals { display: grid; gap: .5rem; }
.totals__row { display: flex; justify-content: space-between; gap: 1rem; }
.totals__row--big { font-size: 1.1rem; font-weight: 500; padding-top: .6rem; border-top: 1px solid var(--line); }

.notice { padding: .7rem .9rem; border: 1px solid var(--line-strong); font-size: .82rem; }
.notice--mono { font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }

.meter { height: 2px; background: var(--line); overflow: hidden; }
.meter__fill { height: 100%; background: var(--fg); transition: width var(--dur-panel) var(--ease-out); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); background: var(--bg); }
.steps > * { background: var(--bg); box-shadow: 0 0 0 1px var(--line); padding: .9rem clamp(.8rem, 1.6vw, 1.2rem); }
.step.is-on { background: var(--fg); color: var(--bg); }
.step.is-done { opacity: var(--o-secondary); }
.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--gap); background: var(--bg); align-items: start; }
.checkout > * { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.summary { position: sticky; top: calc(var(--header-h) + 1px); }
.pick { display: grid; gap: var(--gap); background: var(--bg); }
.pick > label { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.pick__opt {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem clamp(.9rem, 1.8vw, 1.3rem);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.pick__opt:hover { background: var(--fg); color: var(--bg); }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick input:checked + .pick__opt { background: var(--fg); color: var(--bg); }
.pick input:focus-visible + .pick__opt { outline: 2px solid var(--fg); outline-offset: -4px; }
.pick__dot { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 999px; margin-top: .35rem; flex: none; }
.pick input:checked + .pick__opt .pick__dot { background: currentColor; }

.slots { display: flex; gap: .4rem; flex-wrap: wrap; }
.dates { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.date-chip { flex: none; min-width: 4.6rem; }

.footer { background: var(--ink-deep); color: var(--paper); --bg: var(--ink-deep); --fg: var(--paper); --line: rgba(244, 243, 239, .11); --line-strong: rgba(244, 243, 239, .24); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); background: var(--bg); }
.footer__grid > * { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.footer__word {
  font-family: 'Anton', 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: clamp(3rem, 17vw, 16rem);
  line-height: .8;
  letter-spacing: -.03em;
  opacity: var(--o-muted);
  text-align: center;
  padding: 1rem 0 .2rem;
  overflow: hidden;
}

[data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .85s var(--ease-out), translate .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }
[data-reveal="fade"] { translate: none; }
[data-reveal="right"] { translate: -18px 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.htmx-request .is-busy { opacity: var(--o-caption); pointer-events: none; }
.htmx-indicator { opacity: 0; transition: opacity .2s linear; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.hide { display: none !important; }
.ratio-square { aspect-ratio: 1; }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-tall { aspect-ratio: 3 / 4; }
.cover { width: 100%; height: 100%; object-fit: cover; }
.abs-fill { position: absolute; inset: 0; }
.rel { position: relative; }
.of-hidden { overflow: hidden; }

@media (max-width: 1100px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .buybox { position: static; }
  .catalog { grid-template-columns: minmax(0, 1fr); }

  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 96;
    width: min(22rem, 88vw);
    max-height: none;
    background: var(--bg);
    border-right: 1px solid var(--line);
    transform: translateX(-101%);
    transition: transform var(--dur-panel) var(--ease-io);
    overflow-y: auto;
  }
  .filters.is-open { transform: translateX(0); }
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
}

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .g12, .g4, .g3, .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: auto; }
  .col-span-all { grid-column: 1 / -1; }
  .header__nav { display: none; }
}

@media (max-width: 640px) {
  :root { --header-h: 58px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g12, .g4, .g3, .g2, .footer__grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .line { grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; }
  .panel { width: 100vw; }
  .spec { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .spec dd + dt { margin-top: .6rem; }
}

@media (max-width: 420px) {
  .steps .step span:not(.mono) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; translate: none; }
  .marquee__track { animation: none; }
}

@media print {
  .header, .footer, .panel, .scrim, .filters, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}