html[data-page="apparel"] {
  color-scheme: dark;

  --navy:      #F4F4F5;
  --navy-deep: #131316;
  --navy-2:    #C9C9CF;

  --action:      #EDEDEF;
  --action-lift: #FFFFFF;
  --action-deep: #FFFFFF;
  --action-wash: #1F1F23;
  --on-action:   #0A0A0C;

  --bg:       #0C0C0E;
  --shell:    #141417;
  --core:     #17171A;
  --fg:       #F4F4F5;
  --muted-fg: #A8A8AE;

  --hair:     rgba(255, 255, 255, 0.13);
  --hair-2:   rgba(255, 255, 255, 0.07);
  --nav-ink:  #E7E7EC;
  --edge:        rgba(255, 255, 255, 0.30);
  --quiet:       #1E1E22;
  --quiet-ink:   #E7E7EC;
  --edge-action: rgba(237, 237, 239, 0.46);
  --action-soft: rgba(237, 237, 239, 0.13);
  --inner-hi:    rgba(255, 255, 255, 0.06);
  --nav-accent:  #FFFFFF;
  --grain:    0.020;
  --select-bg:  #F4F4F5;
  --select-ink: #0A0A0C;

  --on-band:      #F4F4F5;
  --on-band-2:    rgba(232, 232, 238, 0.88);
  --band-accent:  #FFFFFF;
  --band-hair:    rgba(255, 255, 255, 0.20);
  --ink: 255 255 255;
  --inv: 10 10 12;
  --btn-bg: #FFFFFF;
  --btn-bg-hover: #E4E4E8;
  --btn-fg: #0A0A0C;
  --ring: #FFFFFF;
  --cart-bg: #0E0E11;

  scrollbar-color: rgba(255, 255, 255, 0.24) #0C0C0E;
}

html[data-page="apparel"][data-theme="dark"] {
  color-scheme: dark;
  --navy:      #F4F4F5;
  --navy-deep: #131316;
  --navy-2:    #C9C9CF;
  --action:      #EDEDEF;
  --action-lift: #FFFFFF;
  --action-deep: #FFFFFF;
  --action-wash: #1F1F23;
  --on-action:   #0A0A0C;
  --bg:       #09090B;
  --shell:    #101013;
  --core:     #141417;
  --fg:       #F4F4F5;
  --muted-fg: #A8A8AE;
  --hair:     rgba(255, 255, 255, 0.13);
  --hair-2:   rgba(255, 255, 255, 0.07);
  --nav-ink:  #E7E7EC;
  --edge:        rgba(255, 255, 255, 0.30);
  --quiet:       #1E1E22;
  --quiet-ink:   #E7E7EC;
  --edge-action: rgba(237, 237, 239, 0.46);
  --action-soft: rgba(237, 237, 239, 0.13);
  --inner-hi:    rgba(255, 255, 255, 0.06);
  --nav-accent:  #FFFFFF;
  --grain:    0.024;
  --select-bg:  #F4F4F5;
  --select-ink: #0A0A0C;
  --on-band:      #F4F4F5;
  --on-band-2:    rgba(232, 232, 238, 0.88);
  --band-accent:  #FFFFFF;
  --band-hair:    rgba(255, 255, 255, 0.20);
  --ink: 255 255 255;
  --inv: 10 10 12;
  --btn-bg: #FFFFFF;
  --btn-bg-hover: #E4E4E8;
  --btn-fg: #0A0A0C;
  --ring: #FFFFFF;
  --cart-bg: #0E0E11;
  scrollbar-color: rgba(255, 255, 255, 0.24) #09090B;
}
@media (prefers-color-scheme: dark) {
  html[data-page="apparel"]:not([data-theme="light"]) {
    color-scheme: dark;
    --navy:      #F4F4F5;
    --navy-deep: #131316;
    --navy-2:    #C9C9CF;
    --action:      #EDEDEF;
    --action-lift: #FFFFFF;
    --action-deep: #FFFFFF;
    --action-wash: #1F1F23;
    --on-action:   #0A0A0C;
    --bg:       #09090B;
    --shell:    #101013;
    --core:     #141417;
    --fg:       #F4F4F5;
    --muted-fg: #A8A8AE;
    --hair:     rgba(255, 255, 255, 0.13);
    --hair-2:   rgba(255, 255, 255, 0.07);
    --nav-ink:  #E7E7EC;
    --edge:        rgba(255, 255, 255, 0.30);
    --quiet:       #1E1E22;
    --quiet-ink:   #E7E7EC;
    --edge-action: rgba(237, 237, 239, 0.46);
    --action-soft: rgba(237, 237, 239, 0.13);
    --inner-hi:    rgba(255, 255, 255, 0.06);
    --nav-accent:  #FFFFFF;
    --grain:    0.024;
    --select-bg:  #F4F4F5;
    --select-ink: #0A0A0C;
    --on-band:      #F4F4F5;
    --on-band-2:    rgba(232, 232, 238, 0.88);
    --band-accent:  #FFFFFF;
    --band-hair:    rgba(255, 255, 255, 0.20);
    --ink: 255 255 255;
    --inv: 10 10 12;
    --btn-bg: #FFFFFF;
    --btn-bg-hover: #E4E4E8;
    --btn-fg: #0A0A0C;
    --ring: #FFFFFF;
    --cart-bg: #0E0E11;
    scrollbar-color: rgba(255, 255, 255, 0.24) #09090B;
  }
}

html[data-page="apparel"][data-theme="light"]:not([data-drop]) {
  color-scheme: light;
  --navy:      #111113;
  --navy-deep: #ECECEF;
  --navy-2:    #3A3A40;
  --action:      #111113;
  --action-lift: #000000;
  --action-deep: #000000;
  --action-wash: #E8E8EB;
  --on-action:   #FFFFFF;
  --bg:       #F8F8F8;
  --shell:    #F1F1F3;
  --core:     #ECECEF;
  --fg:       #111113;
  --muted-fg: #5E5E66;
  --hair:     rgba(10, 10, 12, 0.14);
  --hair-2:   rgba(10, 10, 12, 0.08);
  --nav-ink:  #1A1A1E;
  --edge:        rgba(10, 10, 12, 0.32);
  --quiet:       #ECECEF;
  --quiet-ink:   #1A1A1E;
  --edge-action: rgba(17, 17, 19, 0.46);
  --action-soft: rgba(17, 17, 19, 0.10);
  --inner-hi:    rgba(255, 255, 255, 0.7);
  --nav-accent:  #000000;
  --grain:    0.014;
  --select-bg:  #111113;
  --select-ink: #F8F8F8;
  --on-band:      #111113;
  --on-band-2:    rgba(17, 17, 19, 0.82);
  --band-accent:  #000000;
  --band-hair:    rgba(10, 10, 12, 0.20);
  --ink: 10 10 12;
  --inv: 255 255 255;
  --btn-bg: #111113;
  --btn-bg-hover: #2B2B30;
  --btn-fg: #FFFFFF;
  --ring: #111113;
  --cart-bg: #FFFFFF;
  scrollbar-color: rgba(10, 10, 12, 0.30) #F8F8F8;
}

html[data-page="apparel"] body { -webkit-tap-highlight-color: rgba(255, 255, 255, 0.14); }

html[data-page="apparel"] .island,
html[data-page="apparel"][data-theme="dark"] .island {
  background: rgba(16, 16, 19, 0.74);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.9);
}
html[data-page="apparel"][data-theme="light"]:not([data-drop]) .island {
  background: rgba(248, 248, 248, 0.78);
  border-color: rgba(10, 10, 12, 0.14);
  box-shadow: 0 16px 40px -22px rgba(10, 10, 12, 0.35);
}
@media (prefers-color-scheme: dark) {
  html[data-page="apparel"]:not([data-theme="light"]) .island {
    background: rgba(16, 16, 19, 0.74);
  }
}
html[data-page="apparel"] .vent-panel,
html[data-page="apparel"][data-theme="dark"] .vent-panel {
  background: rgba(20, 20, 23, 0.99);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.92);
}
html[data-page="apparel"][data-theme="light"]:not([data-drop]) .vent-panel {
  background: rgba(252, 252, 252, 0.99);
  box-shadow: 0 24px 50px -24px rgba(10, 10, 12, 0.4);
}
@media (prefers-color-scheme: dark) {
  html[data-page="apparel"]:not([data-theme="light"]) .vent-panel {
    background: rgba(20, 20, 23, 0.99);
  }
}
html[data-page="apparel"] .menu { background: rgba(9, 9, 11, 0.94); }
html[data-page="apparel"][data-theme="light"]:not([data-drop]) .menu { background: rgba(248, 248, 248, 0.96); }
html[data-page="apparel"] .menu a { color: var(--fg); border-bottom-color: rgb(var(--ink) / 0.12); }
html[data-page="apparel"] .menu a[aria-current] {
  color: var(--fg);
  box-shadow: inset 2px 0 0 0 var(--fg);
}
html[data-page="apparel"] .menu-foot { color: var(--muted-fg); }
html[data-page="apparel"] #shop-panel { max-height: calc(100svh - 130px); overflow-y: auto; overscroll-behavior: contain; }
.vent-head {
  position: relative; display: block; margin-top: 9px; padding: 14px 14px 4px;
  font: 500 12px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-fg);
}
.vent-head::before {
  content: ""; position: absolute; top: 0; left: 10px; right: 10px;
  height: 1px; background: var(--hair-2);
}

html[data-page="apparel"] .page-head {
  background: var(--bg);
  border-bottom: 0;
  padding: 0 0 clamp(36px, calc(var(--vh, 1svh) * 6), 60px);
}
html[data-page="apparel"] .page-head::before { display: none; }

.para {
  --sy: 0;
  --pos: 50% 30%;
  position: relative;
  height: calc(var(--vh, 1svh) * 100); min-height: 560px; max-height: 1100px;
  overflow: hidden;
  margin-bottom: clamp(40px, calc(var(--vh, 1svh) * 6), 64px);
  background: #0C0C0E;
}
.para-bg, .para-rider {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos);
  transform: translate3d(0, calc(var(--sy) * calc(var(--vh, 1svh) * 22)), 0) scale(1.06);
  transform-origin: 50% 0;
  will-change: transform;
}
.para-bg    { z-index: 1; }
.para-rider { z-index: 3; }
.para-mark {
  position: absolute; z-index: 2;
  left: 50%; top: 22%;
  width: min(1180px, 94vw); max-width: none; height: auto;
  transform: translate3d(-50%, calc(var(--sy) * var(--vh, 1svh) * -24), 0);
  will-change: transform;
}
.para::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 4;
  height: 26%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.para-cta {
  position: absolute; left: 0; right: 0; z-index: 5;
  bottom: clamp(28px, calc(var(--vh, 1svh) * 7), 72px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
@media (min-width: 720px) { .para-cta { justify-content: flex-start; } }
html[data-page="apparel"] .para-btn.btn.solid { background: var(--btn-bg); color: var(--btn-fg); }
html[data-page="apparel"] .para-btn.btn.solid .pip { background: rgb(var(--inv) / 0.13); color: var(--btn-fg); }
html[data-page="apparel"] .para-btn-2.btn.line {
  background: rgba(12, 12, 14, 0.62); color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.82);
}
@media (hover: hover) and (pointer: fine) {
  html[data-page="apparel"] .para-btn.btn.solid:hover { background: var(--btn-bg-hover); }
  html[data-page="apparel"] .para-btn-2.btn.line:hover { background: #FFFFFF; color: #0A0A0C; border-color: #FFFFFF; }
}
@media (max-width: 719px) {
  .para { --pos: 50% 46%; max-height: 900px; }
  .para-mark { top: 26%; }
}

html[data-page="apparel"] .page-head h1 {
  font-size: clamp(1.45rem, 2.9vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.16;
  color: var(--fg);
  margin: 0 0 14px;
  max-width: 18ch;
}
html[data-page="apparel"] .page-head .lede {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--muted-fg);
  max-width: 52ch;
}

.pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 4px;
}
.piece { position: relative; display: flex; flex-direction: column; min-width: 0; }

.plate {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #FFFFFF;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.plate .face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

.plate .back {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 240ms var(--ease-2), visibility 0s linear 240ms;
}
@media (hover: hover) and (pointer: fine) {
  .plate:hover .back {
    opacity: 1; visibility: visible;
    transition: opacity 240ms var(--ease-2), visibility 0s linear 0s;
  }
}


.meta { padding-top: 12px; }
html[data-page="apparel"] .meta h3,
html[data-page="apparel"] .meta .price {
  font-family: "Inter Tight", sans-serif;
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
html[data-page="apparel"] .meta .price { font-variant-numeric: tabular-nums; }
.meta .price:empty { display: none; }

.dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, var(--lg, var(--sw)) 0 32%, var(--sw) 34%);
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.22);
}

.plate:focus-visible {
  outline: 2px solid var(--action-lift);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 4px; }
}

.buy { max-width: 56ch; }
.buy-note {
  font-size: 16px; line-height: 1.62;
  color: var(--muted-fg);
  margin: 0 0 30px;
  max-width: 52ch;
  text-wrap: pretty;
}

html[data-page="apparel"] .next-link {
  background: none;
  border-color: rgb(var(--ink) / 0.18);
}
html[data-page="apparel"] .next-link:hover { border-color: rgb(var(--ink) / 0.55); color: var(--fg); }
html[data-page="apparel"] .next-link .pip { background: none; color: currentColor; }

html[data-page="apparel"] .contact {
  border-color: rgb(var(--ink) / 0.16);
}
html[data-page="apparel"] .contact::before {
  background: radial-gradient(58% 76% at 50% 100%, rgb(var(--ink) / 0.13), rgb(var(--ink) / 0.045) 44%, transparent 72%);
}
html[data-page="apparel"] .contact h2 {
  color: var(--fg);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.7vw, 1.95rem);
  letter-spacing: -0.022em;
}
html[data-page="apparel"] .contact p { color: var(--on-band-2); font-size: 16.5px; }
html[data-page="apparel"] .contact .btn.solid {
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.85);
}
html[data-page="apparel"] .contact .btn.solid:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
html[data-page="apparel"] .contact .btn.solid .pip { background: rgb(var(--inv) / 0.13); color: var(--btn-fg); }
html[data-page="apparel"] .contact .btn.line {
  background: rgb(var(--ink) / 0.05);
  border-color: rgb(var(--ink) / 0.40); color: var(--fg);
}
html[data-page="apparel"] .contact .btn.line:hover {
  background: rgb(var(--ink) / 0.12); border-color: var(--fg); color: var(--fg);
}
html[data-page="apparel"] .contact .btn.line .pip { background: rgb(var(--ink) / 0.14); color: var(--fg); }

html[data-page="apparel"] .sec { padding-block: clamp(56px, calc(var(--vh, 1svh) * 9), 88px); }
html[data-page="apparel"] .page-head + .sec { padding-top: clamp(34px, calc(var(--vh, 1svh) * 6), 60px); }

@media (min-width: 900px) {
  html[data-page="apparel"] .sec { padding-block: 96px; }
  html[data-page="apparel"] .contact { padding: 88px 56px; }
}

.pdp { padding-top: clamp(96px, calc(var(--vh, 1svh) * 14), 132px); padding-bottom: clamp(56px, calc(var(--vh, 1svh) * 9), 96px); }
.pdp-back {
  display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 14px;
  font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg);
  touch-action: manipulation;
}
.pdp-back:hover { color: var(--fg); }
.pdp-back:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.pdp-grid[hidden] { display: none; }
.pdp-gallery {
  display: flex; gap: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
}
.pdp-gallery::-webkit-scrollbar { display: none; }
.pdp-shot {
  flex: 0 0 100%; margin: 0; scroll-snap-align: start;
  aspect-ratio: 1 / 1; background: #FFFFFF;
}
.pdp-shot[hidden] { display: none; }
.pdp-shot img { width: 100%; height: 100%; object-fit: contain; }
.pdp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.pdp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ink) / 0.28); transition: background-color 240ms var(--ease-2); }
.pdp-dots span.on { background: var(--fg); }
html[data-page="apparel"] .pdp-name {
  font-family: "Inter Tight", sans-serif; font-weight: 500;
  font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
  margin: 0 0 6px; color: var(--fg);
}
.pdp-price {
  font-family: "Inter Tight", sans-serif; font-size: 12.5px; font-weight: 400;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; margin: 10px 0 0; color: var(--muted-fg);
}
.pdp-order { width: 100%; justify-content: center; }
html[data-page="apparel"] .pdp-order.btn.solid { background: var(--btn-bg); color: var(--btn-fg); }
html[data-page="apparel"] .pdp-order.btn.solid:hover { background: var(--btn-bg-hover); }
html[data-page="apparel"] .pdp-order.btn.solid .pip { background: rgb(var(--inv) / 0.13); color: var(--btn-fg); }
.pdp-note { font-size: 14.5px; line-height: 1.55; color: var(--muted-fg); margin: 10px 0 0; max-width: 52ch; text-wrap: pretty; }
.pdp-missing { color: var(--muted-fg); }

.pdp-opt { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.pdp-opt legend {
  padding: 0; margin-bottom: 10px;
  font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg);
}
.pdp-picked { color: var(--fg); margin-left: 6px; }
.pdp-swatches, .pdp-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.pdp-sw {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pdp-sw::before {
  content: ""; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, var(--lg, var(--sw)) 0 30%, var(--sw) 32%);
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.24);
}
.pdp-sw::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow 240ms var(--ease-2);
}
.pdp-sw:hover::after { box-shadow: 0 0 0 1.5px rgb(var(--ink) / 0.40); }
.pdp-sw:has(input:checked)::after { box-shadow: 0 0 0 1.5px var(--ring); }
.pdp-sw:has(input:focus-visible)::after { box-shadow: 0 0 0 2px var(--ring), 0 0 0 5px rgb(var(--ink) / 0.28); }
.pdp-size { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pdp-size span {
  display: grid; place-items: center;
  min-width: 52px; height: 44px; padding: 0 12px; border-radius: 4px;
  font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--fg);
  border: 1px solid rgb(var(--ink) / 0.20);
  transition: border-color 240ms var(--ease-2), background-color 240ms var(--ease-2), color 240ms var(--ease-2);
}
.pdp-size:hover span { border-color: rgb(var(--ink) / 0.55); }
.pdp-size input:checked + span { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pdp-size input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 3px; }
.pdp-guide { margin: -6px 0 22px; }
.pdp-guide summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.35);
  list-style: none; touch-action: manipulation;
}
.pdp-guide summary::-webkit-details-marker { display: none; }
.pdp-guide summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 240ms var(--ease-2);
}
.pdp-guide[open] > summary::after, .pdp-compare[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.pdp-guide summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 2px; }
.pdp-units { display: flex; gap: 4px; margin: 6px 0 12px; }
.pdp-units button {
  min-height: 36px; padding: 0 14px; border-radius: 4px; cursor: pointer;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.04em;
  color: var(--muted-fg); background: transparent; border: 1px solid rgb(var(--ink) / 0.20);
  touch-action: manipulation;
  transition: color 240ms var(--ease-2), background-color 240ms var(--ease-2), border-color 240ms var(--ease-2);
}
.pdp-units button:hover { color: var(--fg); border-color: rgb(var(--ink) / 0.55); }
.pdp-units button[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pdp-units button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.pdp-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.pdp-table {
  width: 100%; border-collapse: collapse;
  font-family: "Inter Tight", sans-serif; font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pdp-table th, .pdp-table td {
  padding: 9px 6px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgb(var(--ink) / 0.10);
}
.pdp-table th:first-child { text-align: left; padding-left: 0; }
.pdp-table thead th { font-weight: 500; color: var(--muted-fg); font-size: 12px; letter-spacing: 0.04em; }
.pdp-table tbody th { font-weight: 500; color: var(--muted-fg); }
.pdp-guide-note { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted-fg); }
.pdp-draw { margin: 2px auto 12px; max-width: 220px; }
.pdp-draw svg { display: block; width: 100%; height: auto; max-height: 176px; overflow: visible; }
.pdp-draw .out { fill: none; stroke: rgb(var(--ink) / 0.55); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pdp-draw .ml { cursor: pointer; }
.pdp-draw .hit { fill: none; stroke: transparent; stroke-width: 14; }
.pdp-draw .ln { fill: none; stroke: rgb(var(--ink) / 0.42); stroke-width: 1; stroke-linecap: round; transition: stroke 200ms var(--ease-2), stroke-width 200ms var(--ease-2); }
.pdp-draw .tg { fill: var(--bg); stroke: rgb(var(--ink) / 0.42); stroke-width: 1; transition: fill 200ms var(--ease-2), stroke 200ms var(--ease-2); }
.pdp-draw .tx { fill: var(--muted-fg); font: 500 12px "Inter Tight", sans-serif; transition: fill 200ms var(--ease-2); pointer-events: none; }
.pdp-draw .ml.on .ln { stroke: var(--ring); stroke-width: 1.8; }
.pdp-draw .ml.on .tg { fill: var(--ring); stroke: var(--ring); }
.pdp-draw .ml.on .tx { fill: var(--btn-fg); }
.pdp-table thead th, .pdp-table tbody th { padding-block: 0; }
.pdp-table thead th:not(:first-child) { padding-inline: 2px; }
.pdp-col {
  display: block; width: 100%; min-width: 38px; min-height: 44px; padding: 0 4px; border-radius: 4px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 240ms var(--ease-2), background-color 240ms var(--ease-2);
}
.pdp-col:hover { color: var(--fg); background: rgb(var(--ink) / 0.10); }
.pdp-col.pick { background: var(--btn-bg); color: var(--btn-fg); }
.pdp-col:focus-visible, .pdp-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.pdp-row {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; cursor: pointer;
  font: inherit; color: inherit; background: transparent; border: 0; text-align: left;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pdp-let {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none;
  font-size: 12px; font-weight: 500; border: 1px solid rgb(var(--ink) / 0.42); color: var(--muted-fg);
  transition: color 200ms var(--ease-2), background-color 200ms var(--ease-2), border-color 200ms var(--ease-2);
}
.pdp-table tbody tr.lit th, .pdp-table tbody tr.lit td { color: var(--fg); background: rgb(var(--ink) / 0.06); }
.pdp-table tbody tr.lit .pdp-let { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pdp-table td.pick { color: var(--fg); background: rgb(var(--ink) / 0.10); }
@media (max-width: 340px) {
  .pdp-table { font-size: 12px; }
  .pdp-table th, .pdp-table td { padding-inline: 2px; }
  .pdp-col { min-width: 0; padding: 0; }
  .pdp-row { gap: 6px; }
}
.pdp-guide-hint { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted-fg); }
.pdp-guide-add { width: 100%; justify-content: center; margin-top: 14px; }
.pdp-guide-add[hidden], .pdp-guide-hint[hidden], .pdp-cmp-prod[hidden], .pdp-cmp-sizes[hidden] { display: none; }
html[data-page="apparel"] .btn.solid:is(.pdp-guide-add, .pdp-bar-add) { background: var(--btn-bg); color: var(--btn-fg); }
html[data-page="apparel"] .btn.solid:is(.pdp-guide-add, .pdp-bar-add):hover { background: var(--btn-bg-hover); }
html[data-page="apparel"] .btn.solid:is(.pdp-guide-add, .pdp-bar-add) .pip { background: rgb(var(--inv) / 0.13); color: var(--btn-fg); }
html[data-page="apparel"] .btn.solid.pdp-cmp-choose { background: transparent; color: var(--fg); border: 1px solid rgb(var(--ink) / 0.32); box-shadow: none; }
html[data-page="apparel"] .btn.solid.pdp-cmp-choose:hover { background: rgb(var(--ink) / 0.08); border-color: rgb(var(--ink) / 0.6); }
html[data-page="apparel"] .btn.solid.pdp-cmp-choose .pip { background: rgb(var(--ink) / 0.12); color: var(--fg); }
.pdp-guide-add:disabled, .pdp-cmp-choose:disabled { opacity: 0.6; cursor: default; }
html[data-page="apparel"] .is-tinted .btn.solid:is(.pdp-order, .pdp-guide-add, .pdp-bar-add) {
  background: var(--pc); color: var(--pc-ink); border-color: var(--pc-edge);
}
html[data-page="apparel"] .is-tinted .btn.solid:is(.pdp-order, .pdp-guide-add, .pdp-bar-add):hover { background: var(--pc-hover); }
html[data-page="apparel"] .is-tinted .btn.solid:is(.pdp-order, .pdp-guide-add, .pdp-bar-add) .pip { background: var(--pc-pip); color: var(--pc-ink); }

.pdp-compare { margin: 8px 0 0; }
.pdp-compare > summary { color: var(--muted-fg); }
.pdp-cmp { display: grid; gap: 22px; padding: 6px 0 8px; }
.pdp-cmp-h { display: block; margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--muted-fg); text-wrap: pretty; }
.pdp-cmp-brands, .pdp-cmp-prod, .pdp-cmp-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-cmp-prod, .pdp-cmp-sizes { margin-top: 10px; }
.pdp-cmp-brands button, .pdp-cmp-prod button, .pdp-cmp-sizes button, .pdp-cmp-u button {
  min-height: 44px; padding: 0 12px; border-radius: 4px; cursor: pointer;
  font: 500 13px/1.2 "Inter Tight", sans-serif; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--fg); background: transparent; border: 1px solid rgb(var(--ink) / 0.20);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 240ms var(--ease-2), background-color 240ms var(--ease-2), border-color 240ms var(--ease-2);
}
.pdp-cmp-sizes button, .pdp-cmp-u button { min-width: 44px; padding: 0 10px; }
.pdp-cmp-prod button { padding-block: 8px; max-width: 100%; text-align: left; line-height: 1.3; }
.pdp-cmp-brands button:hover, .pdp-cmp-prod button:hover, .pdp-cmp-sizes button:hover, .pdp-cmp-u button:hover { border-color: rgb(var(--ink) / 0.55); }
.pdp-cmp button[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pdp-cmp button:focus-visible, .pdp-cmp input:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.pdp-cmp-type { display: flex; align-items: center; gap: 10px; }
.pdp-cmp-u { display: flex; gap: 4px; }
.pdp-cmp input {
  width: 7.5rem; min-height: 44px; padding: 0 12px; border-radius: 4px;
  font: 500 16px/1 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; color: var(--fg);
  background: transparent; border: 1px solid rgb(var(--ink) / 0.20); caret-color: var(--fg);
}
.pdp-cmp input::placeholder { color: rgb(var(--ink) / 0.35); }
.pdp-cmp input:hover { border-color: rgb(var(--ink) / 0.55); }
.pdp-cmp-out:empty { display: none; }
.pdp-cmp-line { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--fg); text-wrap: pretty; font-variant-numeric: tabular-nums; }
.pdp-cmp-fine, .pdp-cmp-src { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted-fg); text-wrap: pretty; }
.pdp-cmp-src { font-size: 12.5px; }
.pdp-cmp-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--ink) / 0.35); }
.pdp-cmp-choose { width: 100%; justify-content: center; margin-top: 14px; }
.pdp-warn {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: #FFB4A8;
}
.pdp-arrive { margin: 18px 0 0; display: grid; gap: 2px; }
.pdp-arrive[hidden] { display: none; }
.pdp-arrive-l { font: 500 14.5px/1.4 "Inter Tight", sans-serif; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
.pdp-arrive-s { max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }
.pdp-help { max-width: 52ch; margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }
.pdp-help a {
  display: inline-block; padding-block: 6px; margin-block: -6px; color: var(--fg);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--ink) / 0.35);
}
.pdp-help a:hover { text-decoration-color: currentColor; }
.pdp-help a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

.pdp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid rgb(var(--ink) / 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(105%); visibility: hidden;
  transition: transform 320ms var(--ease-2), visibility 0s linear 320ms;
}
.pdp-bar.on { transform: none; visibility: visible; transition: transform 320ms var(--ease-2), visibility 0s; }
.pdp-bar-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pdp-bar-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13px/1.3 "Inter Tight", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg);
}
.pdp-bar-sub { font-size: 13px; line-height: 1.3; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.pdp-bar-add { flex: none; min-height: 44px; }
html.pdp-barred body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
html.pdp-barred { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.locked .pdp-bar, html:has(dialog[open]) .pdp-bar { visibility: hidden; }
@media (min-width: 900px) { .pdp-bar { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pdp-bar, .pdp-bar.on { transition: none; }
  .pdp-draw .ln, .pdp-draw .tg, .pdp-draw .tx, .pdp-col, .pdp-let, .pdp-cmp-brands button, .pdp-cmp-prod button, .pdp-cmp-sizes button, .pdp-cmp-u button { transition: none; }
}
@media (min-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
  .pdp-gallery { margin-inline: 0; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; }
  .pdp-dots { display: none; }
  .pdp-info { position: sticky; top: 110px; }
  .pdp-shot.wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .pdp-shot.wide img { object-fit: cover; }
}

.shop-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 clamp(20px, 3vw, 36px);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.groups {
  display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 36px);
}
.groups a {
  display: inline-flex; align-items: baseline; gap: 5px;
  min-height: 44px; padding: 12px 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-fg); text-decoration: none;
  touch-action: manipulation;
  transition: color 200ms var(--ease-2);
}
.groups a span { font-size: 12px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.groups a:hover { color: var(--fg); }
.groups a[aria-current] { color: var(--fg); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.groups a:focus-visible, .filter-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 2px; }
.piece[hidden] { display: none; }

html[data-page="apparel"] .meta .price { display: flex; justify-content: space-between; gap: 8px; }
.meta .coll { color: var(--muted-fg); letter-spacing: 0.08em; }
.pieces-sec:not([data-c="all"]) .meta .coll { display: none; }

.filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; margin-left: auto;
  font: 600 13px/1 "Inter Tight", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); background: none; border: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.filter-btn svg { width: 16px; height: 16px; transition: transform 320ms var(--ease-2); }
.filter-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.filter-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
  background: var(--btn-bg); color: var(--btn-fg);
}

.filters {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 460ms var(--ease-2), opacity 300ms var(--ease-2);
}
.filters[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }
.filters-in { min-height: 0; overflow: hidden; }
.filters-grid {
  display: grid; gap: 26px 40px;
  padding: 26px 0 8px;
  border-top: 1px solid rgb(var(--ink) / 0.14);
}
.f-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-set legend {
  padding: 0; margin-bottom: 12px;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-fg);
}
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 13px; border-radius: 4px; cursor: pointer;
  font: 500 12.5px/1 "Inter Tight", sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg); background: transparent; border: 1px solid rgb(var(--ink) / 0.20);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color 240ms var(--ease-2), background-color 240ms var(--ease-2), color 240ms var(--ease-2), opacity 240ms var(--ease-2);
}
.f-chip:hover { border-color: rgb(var(--ink) / 0.55); }
.f-chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.f-chip[aria-disabled="true"] { opacity: 0.32; cursor: not-allowed; }
.f-chip[aria-disabled="true"]:hover { border-color: rgb(var(--ink) / 0.20); }
.f-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.f-n { font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--muted-fg); }
.f-chip[aria-pressed="true"] .f-n { color: rgb(var(--inv) / 0.55); }
.f-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.28);
}
.f-chip[aria-pressed="true"] .f-dot { box-shadow: inset 0 0 0 1px rgb(var(--inv) / 0.25); }

.filters-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0 26px;
  margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgb(var(--ink) / 0.14);
}
.f-clear {
  min-height: 44px; padding: 0; cursor: pointer;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.35);
  touch-action: manipulation;
}
.f-clear:hover { text-decoration-color: var(--fg); }
.f-clear:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 2px; }
html[data-page="apparel"] .f-done.btn.solid { background: var(--btn-bg); color: var(--btn-fg); font-variant-numeric: tabular-nums; }
html[data-page="apparel"] .f-done.btn.solid:hover { background: var(--btn-bg-hover); }

.f-empty {
  margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted-fg);
}
.f-empty .f-clear { margin-left: 6px; min-height: 0; font-size: 13px; }

@media (min-width: 720px) {
  .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .filters-grid { grid-template-columns: 1.1fr 1.5fr 1.1fr 0.9fr 1.1fr; gap: 26px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .filters, .filter-btn svg { transition: none; }
}
.filter-btn[hidden], .filters[hidden], .filter-count[hidden], .f-empty[hidden] { display: none; }

.pdp-set {
  margin: 22px 0 0; padding: 14px 0 16px;
  border-top: 1px solid rgb(var(--ink) / 0.14);
  border-bottom: 1px solid rgb(var(--ink) / 0.14);
}
.pdp-set[hidden] { display: none; }
.pdp-set-link {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 18px; align-items: center; gap: 16px;
  color: var(--fg); text-decoration: none;
  touch-action: manipulation;
}
.pdp-set-offer { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted-fg); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.pdp-set-plate { display: block; aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; }
.pdp-set-plate img { width: 100%; height: 100%; object-fit: contain; transition: transform 420ms var(--ease-2); }
.pdp-set-text { display: grid; gap: 5px; min-width: 0; }
.pdp-set-label {
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-fg);
}
.pdp-set-name, .pdp-set-price {
  font: 500 13px/1.3 "Inter Tight", sans-serif; letter-spacing: 0.03em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.pdp-set-arrow { width: 18px; height: 18px; transition: transform 320ms var(--ease-2); }
.pdp-set-link:hover .pdp-set-plate img { transform: scale(1.05); }
.pdp-set-link:hover .pdp-set-arrow { transform: translate(2px, -2px); }
.pdp-set-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pdp-set-plate img, .pdp-set-arrow { transition: none; }
}

html.choosing .pieces-sec { display: none; }
html:not(.choosing) .chooser { display: none; }
html[data-page="apparel"] .chooser + .pieces-sec { padding-top: clamp(34px, calc(var(--vh, 1svh) * 6), 60px); }
.pieces-sec { scroll-margin-top: 90px; }

html[data-page="apparel"] .chooser h2 {
  margin: 0 0 clamp(22px, 3vw, 34px);
  font-family: "Inter Tight", sans-serif; font-weight: 400;
  font-size: clamp(1.4rem, 2.7vw, 1.95rem); letter-spacing: -0.022em; line-height: 1.15;
  color: var(--fg); text-wrap: balance;
}
.chooser-grid { display: grid; gap: 36px 4px; }
.coll-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 16px;
  color: var(--fg); text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.coll-plate {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 4% 3%; background: #FFFFFF;
}
.coll-plate img {
  width: 50%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  clip-path: inset(1%);
  transition: transform 520ms var(--ease-2);
}
.coll-text { display: grid; gap: 6px; min-width: 0; }
.coll-name {
  font: 500 15px/1.2 "Inter Tight", sans-serif; letter-spacing: 0.03em; text-transform: uppercase;
}
.coll-sub {
  font: 500 12.5px/1.2 "Inter Tight", sans-serif; letter-spacing: 0.02em;
  color: var(--muted-fg); font-variant-numeric: tabular-nums;
}
.coll-arrow { width: 20px; height: 20px; transition: transform 320ms var(--ease-2); }
@media (hover: hover) and (pointer: fine) {
  .coll-card:hover .coll-plate img { transform: scale(1.04); }
  .coll-card:hover .coll-arrow { transform: translate(3px, -3px); }
}
.coll-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.coll-all { margin: clamp(28px, 4vw, 40px) 0 0; }
.coll-all a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-fg);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.30);
  touch-action: manipulation;
  transition: color 200ms var(--ease-2);
}
.coll-all a:hover { color: var(--fg); }
.coll-all a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 2px; }
@media (min-width: 720px) {
  .chooser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.coll-card.soon .coll-plate {
  --rh: clamp(120px, 19vw, 250px);
  align-items: center;
  gap: clamp(2px, 0.8vw, 12px);
  padding: clamp(22px, 4vw, 44px) 4%;
}
.coll-card.soon .coll-plate img {
  width: auto; height: var(--rh);
  aspect-ratio: auto; clip-path: none;
  translate: calc(var(--rh) * 0.084) 0;
}
@media (min-width: 720px) {
  .coll-card.soon { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .coll-plate img, .coll-arrow { transition: none; }
}

.cart-btn { position: relative; }
.cart-badge {
  position: absolute; top: -3px; right: -3px;
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font: 600 10.5px/1 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums;
  background: var(--btn-bg); color: var(--btn-fg);
}
.cart-badge[hidden] { display: none; }

.cart {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-left: 1px solid rgb(var(--ink) / 0.12);
  background: var(--cart-bg); color: var(--fg);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
  overscroll-behavior: contain;
}
.cart::backdrop { background: rgba(0, 0, 0, 0.6); }
.cart[open] { animation: cart-in 460ms var(--ease-2); }
.cart[open]::backdrop { animation: cart-dim 460ms var(--ease-2); }
@keyframes cart-in { from { transform: translateX(100%); } }
@keyframes cart-dim { from { opacity: 0; } }
html:has(dialog.cart[open]) { scrollbar-gutter: stable; }
html:has(dialog.cart[open]) body { overflow: hidden; }
.cart-in {
  display: flex; flex-direction: column; height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 clamp(20px, 5vw, 28px);
}
.cart-head {
  position: sticky; top: 0; z-index: 2; background: var(--cart-bg);
  display: flex; align-items: center; justify-content: space-between;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: 14px; border-bottom: 1px solid rgb(var(--ink) / 0.12);
}
html[data-page="apparel"] .cart-head h2 {
  margin: 0; font: 400 1.5rem/1.2 "Inter Tight", sans-serif; letter-spacing: -0.02em; color: var(--fg);
}
.cart-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; border-radius: 50%; color: var(--fg); cursor: pointer;
  touch-action: manipulation;
}
.cart-x svg { width: 20px; height: 20px; }
.cart-x:hover { background: rgb(var(--ink) / 0.08); }

.cart-body { flex: 1 0 auto; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.cart-body:has(+ .cart-foot:not([hidden])) { padding-bottom: 12px; }
.cart-list { list-style: none; margin: 0; padding: 0; }
.cart-list[hidden] { display: none; }
.cart-item {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px;
  padding: 18px 0; border-bottom: 1px solid rgb(var(--ink) / 0.10);
}
.cart-thumb { display: block; aspect-ratio: 1 / 1; background: #FFFFFF; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-info { min-width: 0; }
.cart-name {
  display: block; color: var(--fg); text-decoration: none;
  font: 500 13px/1.3 "Inter Tight", sans-serif; letter-spacing: 0.03em; text-transform: uppercase;
}
.cart-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-opts { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted-fg); }
.cart-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cart-qty {
  display: inline-flex; align-items: center;
  border: 1px solid rgb(var(--ink) / 0.20); border-radius: 4px;
}
.cart-qty button {
  display: grid; place-items: center; width: 36px; height: 36px;
  background: none; border: 0; color: var(--fg); cursor: pointer; touch-action: manipulation;
}
.cart-qty button svg { width: 14px; height: 14px; }
.cart-qty button:hover { background: rgb(var(--ink) / 0.08); }
.cart-n { min-width: 22px; text-align: center; font: 500 13px/1 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; }
.cart-rm {
  min-height: 36px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 11.5px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.28);
  touch-action: manipulation;
}
.cart-rm:hover { color: var(--fg); }
.cart-price { margin-left: auto; font: 500 13px/1 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; }

.cart-empty { display: grid; justify-items: start; gap: 6px; padding: 28px 0 8px; }
.cart-empty[hidden] { display: none; }
.cart-empty p { margin: 0; font-size: 16px; color: var(--muted-fg); }
.cart-empty a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.35);
}

.cart-foot {
  position: sticky; bottom: 0; z-index: 2; background: var(--cart-bg);
  padding-top: 18px; padding-bottom: max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--ink) / 0.12);
}
.cart-foot[hidden] { display: none; }
.cart-sums {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 18px;
  font: 500 13.5px/1.3 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums;
}
.cart-sums dt { color: var(--muted-fg); }
.cart-sums dd { margin: 0; text-align: right; }
.cart-sums .cart-save { color: var(--fg); }
.cart-sums .cart-total { font-size: 16px; font-weight: 600; color: var(--fg); }
html[data-page="apparel"] .cart-send.btn.solid { width: 100%; justify-content: center; background: var(--btn-bg); color: var(--btn-fg); }
html[data-page="apparel"] .cart-send.btn.solid:hover { background: var(--btn-bg-hover); }
html[data-page="apparel"] .cart-send.btn.solid .pip { background: rgb(var(--inv) / 0.13); color: var(--btn-fg); }
.cart-alt { display: flex; gap: 8px; margin-top: 8px; }
.cart-alt-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px; border-radius: 4px; cursor: pointer;
  font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); background: transparent; border: 1px solid rgb(var(--ink) / 0.28);
  text-decoration: none; touch-action: manipulation;
  transition: background-color 200ms var(--ease-2), color 200ms var(--ease-2), border-color 200ms var(--ease-2);
}
.cart-alt-btn[hidden] { display: none; }
.cart-note .nowrap { white-space: nowrap; }
@media (max-height: 740px) {
  .cart-foot { position: static; }
}
.cart-alt-btn:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.cart-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted-fg); overflow-wrap: anywhere; }

.cart :is(button, a):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cart[open], .cart[open]::backdrop { animation: none; }
}
html[data-page="apparel"] main > .page-head + section.chooser { padding-top: clamp(8px, 2vw, 20px) !important; }

.h-view { display: inline; }
.h-choose { display: none; }
html.choosing .h-choose { display: inline; }
html.choosing .h-view { display: none; }
html[data-page="apparel"] main > .chooser + :is(#_, .pieces-sec) { padding-top: clamp(8px, 2vw, 20px) !important; }

.ship-line, .pdp-ship, .cart-ship {
  display: flex; align-items: center; gap: 10px;
  font-family: "Inter Tight", sans-serif; color: var(--fg);
}
.ship-line svg, .pdp-ship svg, .cart-ship svg { width: 20px; height: 20px; flex: none; }
html[data-page="apparel"] .page-head .ship-line { margin-top: 14px; font-size: 15px; color: var(--muted-fg); max-width: none; }
html[data-page="apparel"] .page-head .ship-line svg { color: var(--fg); }
.pdp-ship {
  margin: 0 0 26px; font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pdp-ship svg { width: 18px; height: 18px; }
.cart-ship {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 6px;
  background: rgb(var(--ink) / 0.06); border: 1px solid rgb(var(--ink) / 0.10);
  font-size: 13px; line-height: 1.4; color: var(--muted-fg);
}
.cart-ship strong { color: var(--fg); font-weight: 600; }
.cart-sums .cart-free { color: var(--fg); }

.cart-code { margin: 0 0 14px; }
.cart-code-open {
  min-height: 36px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 11.5px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.35);
  touch-action: manipulation;
}
.cart-code-open:hover { text-decoration-color: var(--fg); }
.cart-code-open[hidden], .cart-code-form[hidden], .cart-code-on[hidden] { display: none; }
.cart-code-form { display: flex; gap: 8px; margin-top: 6px; }
.cart-code-form input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 4px;
  font: 500 16px/1 "Inter Tight", sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg); background: rgb(var(--ink) / 0.04); border: 1px solid rgb(var(--ink) / 0.22);
  caret-color: var(--fg);
}
.cart-code-form input::placeholder { color: #8A8A90; text-transform: none; letter-spacing: 0; }
.cart-code-form input[aria-invalid="true"] { border-color: #FF8A80; }
.cart-code-form input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cart-code-form button {
  height: 42px; padding: 0 16px; border-radius: 4px; cursor: pointer;
  font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--fg); border: 1px solid rgb(var(--ink) / 0.45);
  touch-action: manipulation;
  transition: background-color 200ms var(--ease-2), color 200ms var(--ease-2);
}
.cart-code-form button:hover { background: var(--btn-bg); color: var(--btn-fg); }
.cart-code-msg { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted-fg); }
.cart-code-msg:not(:empty) { margin-top: 8px; }
.cart-code-form:has([aria-invalid="true"]) + .cart-code-msg { color: #FF8A80; }
.cart-code-on {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
  padding: 4px 4px 4px 12px; border-radius: 4px; border: 1px solid rgb(var(--ink) / 0.45);
  font: 600 12px/1.3 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.cart-code-on .cart-code-rm { padding: 0 8px; }

@media (max-width: 599px) {
  html[data-page="apparel"] .island > .btn.solid { display: none; }
}

.cart-recs { padding: 22px 0 10px; }
.cart-recs[hidden] { display: none; }
html[data-page="apparel"] .cart-recs h3 {
  margin: 0 0 12px;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-fg);
}
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rec {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px; border-radius: 6px;
  border: 1px solid rgb(var(--ink) / 0.10);
}
.rec-set { border-color: rgb(var(--ink) / 0.45); background: rgb(var(--ink) / 0.04); }
.rec-thumb { display: block; aspect-ratio: 1 / 1; background: #FFFFFF; }
.rec-thumb img { width: 100%; height: 100%; object-fit: contain; }
.rec-info { min-width: 0; }
.rec-tag {
  display: inline-block; margin: 0 0 6px; padding: 4px 7px; border-radius: 3px;
  font: 600 10.5px/1 "Inter Tight", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg);
}
.rec-name {
  display: block; color: var(--fg); text-decoration: none;
  font: 500 12.5px/1.3 "Inter Tight", sans-serif; letter-spacing: 0.03em; text-transform: uppercase;
}
.rec-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.rec-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 10px;
  font: 500 13px/1.3 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; color: var(--fg);
}
.rec-price b { font-weight: 600; }
.rec-price s { color: var(--muted-fg); }
.rec-price span { color: var(--muted-fg); font-size: 12px; }
.rec-price .rec-color { margin-left: auto; }
.rec-sizes { display: flex; flex-wrap: wrap; gap: 5px; }
.rec-sizes button {
  min-width: 40px; height: 36px; padding: 0 8px; border-radius: 4px; cursor: pointer;
  font: 500 12px/1 "Inter Tight", sans-serif; letter-spacing: 0.04em; color: var(--fg);
  background: transparent; border: 1px solid rgb(var(--ink) / 0.22);
  touch-action: manipulation;
  transition: background-color 200ms var(--ease-2), color 200ms var(--ease-2), border-color 200ms var(--ease-2);
}
.rec-sizes button:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }

.dots:has(button) { gap: 0; margin: 4px 0 0 -7px; }
.dots button {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dots button::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, var(--lg, var(--sw)) 0 32%, var(--sw) 34%);
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.22);
  transition: transform 200ms var(--ease-2), box-shadow 200ms var(--ease-2);
}
.dots button:hover::before { transform: scale(1.2); }
.dots button[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.2px var(--ring); }
.dots button:focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; }
@media (max-width: 719px) {
  .dots:has(button) { margin-left: -9px; }
  .dots button { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dots button::before { transition: none; }
}


.track-pop .cart-body { padding-top: 22px; }
.track-lede { margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }
.track-pop .track-row { flex-direction: column; }
.track-pop .track-row .btn { justify-content: center; }
.track-pop .track-pick .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.track-pop .track-help { margin-top: 36px; font-size: 14px; }

.pdp-shot-btn {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; touch-action: manipulation;
}
.pdp-shot-btn:focus-visible { outline: 2px solid #0A0A0C; outline-offset: -4px; }

.zoom {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: transparent; color: #0A0A0C; overflow: hidden;
  overscroll-behavior: contain;
}
.zoom::backdrop { background: transparent; }
.zoom-veil { position: absolute; inset: 0; background: #FFFFFF; }
html:has(dialog.zoom[open]) body { overflow: hidden; }

.zoom-stage {
  position: absolute; inset: 0; display: block;
  padding: max(64px, env(safe-area-inset-top)) 16px max(92px, calc(env(safe-area-inset-bottom) + 76px));
  border: 0; background: none; overflow: hidden;
  cursor: zoom-in; touch-action: manipulation;
}
.zoom-stage.on { cursor: zoom-out; touch-action: none; }
.zoom-stage:focus-visible { outline: none; }
.zoom-stage:focus-visible .zoom-img { outline: 2px solid #0A0A0C; outline-offset: 6px; }
.zoom-fly { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.zoom-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform 520ms var(--ease-2);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}

.zoom-x {
  position: absolute; z-index: 1;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; color: #0A0A0C;
  background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0 1px rgba(10, 10, 12, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; touch-action: manipulation;
  transition: background-color 240ms var(--ease-2);
}
.zoom-x svg { width: 20px; height: 20px; }
.zoom-x:hover { background: #EDEDED; }
.zoom-x:focus-visible, .zoom-sides button:focus-visible { outline: 2px solid #0A0A0C; outline-offset: 2px; }

.zoom-sides {
  position: absolute; z-index: 1; left: 50%; transform: translateX(-50%);
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; gap: 4px; padding: 4px;
  border-radius: calc(var(--r-pill) + 4px);
  background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0 1px rgba(10, 10, 12, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.zoom-sides button {
  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: none; color: #0A0A0C; cursor: pointer; touch-action: manipulation;
  font: 500 13px/1 "Inter Tight", sans-serif; letter-spacing: 0.02em;
  transition: background-color 240ms var(--ease-2), color 240ms var(--ease-2);
}
.zoom-sides button:hover { background: rgba(10, 10, 12, 0.08); }
.zoom-sides button[aria-pressed="true"] { background: #0A0A0C; color: #FFFFFF; }
.zoom-sep { align-self: center; width: 1px; height: 22px; margin: 0 4px; background: rgba(10, 10, 12, 0.16); }
.zoom-sides .zoom-thumb {
  flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0;
  overflow: hidden; border-radius: 10px; background: #F2F2F2;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 12, 0.1);
}
.zoom-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zoom-sides .zoom-thumb:hover { background: #F2F2F2; box-shadow: inset 0 0 0 1px rgba(10, 10, 12, 0.55); }
.zoom-sides .zoom-thumb[aria-pressed="true"] { background: #F2F2F2; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A0A0C; }
@media (max-width: 380px) {
  .zoom-sides { max-width: calc(100vw - 12px); gap: 3px; }
  .zoom-sides button:not(.zoom-thumb) { padding: 0 13px; }
}

.zoom-cursor {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 0; height: 0;
}
.zoom-cursor-dot {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(10, 10, 12, 0.9); color: #FFFFFF;
  box-shadow: 0 6px 16px -8px rgba(10, 10, 12, 0.45);
  opacity: 0; transform: scale(0.4);
  transition: opacity 260ms var(--ease-2), transform 420ms var(--ease-2);
}
.zoom-cursor svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.zoom-cursor .v { transform-origin: 12px 12px; transition: transform 420ms var(--ease-2); }
.zoom.in .zoom-cursor .v { transform: scaleY(0); }
.zoom.cur .zoom-cursor-dot { opacity: 1; transform: scale(1); }
.zoom.cur.press .zoom-cursor-dot { transform: scale(0.86); }
.zoom.cur .zoom-stage { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .zoom-img, .zoom-cursor-dot, .zoom-cursor .v { transition: none; }
}

.shop-note {
  position: fixed; z-index: 71; top: 0; left: 0; right: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(30px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0;
  background: var(--btn-bg); color: var(--btn-fg); white-space: nowrap;
  font: 500 12px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase;
}
.shop-note a { color: inherit; padding: 9px 0; touch-action: manipulation; }
.shop-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.shop-note a:focus-visible { outline: 2px solid var(--btn-fg); outline-offset: 2px; }
@media (max-width: 559px) { .sn-long { display: none; } }
html[data-page="apparel"] .nav-dock { top: calc(40px + env(safe-area-inset-top)); }
html[data-page="apparel"] main { padding-top: calc(30px + env(safe-area-inset-top)); }

.shop-foot .sf-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 24px;
  padding: 12px 0 30px; margin-bottom: 18px; border-bottom: 1px solid var(--hair);
}
.sf-brand { grid-column: 1 / -1; }
.sf-brand .brand { display: block; }
.sf-brand .motto { display: block; margin-top: 4px; color: var(--muted-fg); }
.sf-brand p { margin: 14px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--muted-fg); }
.sf-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sf-col h2 {
  margin: 0 0 8px; color: var(--muted-fg);
  font: 500 12px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase;
}
.sf-col a { padding: 6px 0; font-size: 15px; color: var(--fg); touch-action: manipulation; }
.sf-col a:hover, .sf-col a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .shop-foot .sf-cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .sf-brand { grid-column: auto; }
}

.pdp-details { margin-top: 30px; }
.pdp-details > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; padding: 13px 0; }
.pdp-details dt { color: var(--muted-fg); font-size: 14px; }
.pdp-details dd { color: var(--fg); font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.pdp-details dd a { color: inherit; text-decoration: underline; text-decoration-color: rgb(var(--ink) / 0.35); text-underline-offset: 3px; }
.pdp-details dd a:hover { text-decoration-color: currentColor; }
.pdp-details [hidden] { display: none; }

.pdp-look { margin-top: clamp(56px, 8vw, 96px); }
.pdp-look[hidden] { display: none; }
.pdp-look h2 {
  margin: 0 0 16px; color: var(--muted-fg);
  font: 500 12px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
.pdp-look-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.look-card { display: block; min-width: 0; }
.look-plate { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #FFFFFF; }
.look-plate img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms var(--ease-2); }
.look-card:hover .look-plate img { transform: scale(1.04); }
.look-name {
  display: block; margin-top: 10px; color: var(--fg);
  font: 500 12px/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.look-price { display: block; margin-top: 4px; font-size: 13px; color: var(--muted-fg); }
.look-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .look-plate img { transition: none; } }

html[data-page="apparel"] .menu {
  justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain;
  padding-top: calc(118px + env(safe-area-inset-top));
}
html[data-page="apparel"] .menu-shop {
  flex: 0 0 auto; margin-top: 22px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
}
html[data-page="apparel"] .menu-shop a {
  font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3;
  padding: 12px 0; color: rgb(var(--ink) / 0.8);
}
html[data-page="apparel"] .menu-shop a[aria-current] { color: var(--fg); padding-left: 12px; }
html[data-page="apparel"] .menu-help { margin-top: 0; }
html[data-page="apparel"] .menu-help a { color: rgb(var(--ink) / 0.72); }
html[data-page="apparel"] .menu-help a[aria-current] { color: var(--fg); }
html[data-page="apparel"] .menu-foot { margin-top: 14px; }
html[data-page="apparel"] .menu-foot a { display: block; padding: 12px 0; }

.para-mark-short { width: min(760px, 74vw); top: 17%; }
@media (max-width: 719px) { .para-mark-short { width: 80vw; top: 24%; } }

html[data-page="apparel"]:not(.choosing) .para { display: none; }
html[data-page="apparel"]:not(.choosing) .page-head { padding-top: clamp(104px, calc(var(--vh, 1svh) * 15), 140px); padding-bottom: 0; }
html[data-page="apparel"]:not(.choosing) .page-head h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; max-width: none;
}


.offer {
  position: fixed; z-index: 60; left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom) + var(--offer-lift, 0px) + var(--buybar-h, 0px));
  max-height: 45vh; max-height: 45dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px 16px; border-radius: 14px;
  background: var(--core); color: var(--fg);
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 var(--inner-hi);
  font-family: "Inter Tight", system-ui, sans-serif;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 320ms var(--ease-2), transform 320ms var(--ease-2), visibility 0s linear 320ms;
}
.offer[hidden] { display: none; }
.offer.is-in { opacity: 1; transform: none; transition-delay: 0s; }
.offer.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 720px) {
  .offer { left: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 360px; }
}
.offer-top { display: flex; align-items: center; gap: 12px; }
.offer-mark { display: flex; flex: none; }
.offer-mark img { width: 26px; height: 34px; object-fit: contain; }
.offer-kick {
  margin: 0; flex: 1; min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); text-wrap: balance;
}
.offer-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px 0;
  background: none; border: 0; border-radius: 50%; color: var(--muted-fg); cursor: pointer;
  touch-action: manipulation; transition: color 200ms var(--ease-2), background-color 200ms var(--ease-2);
}
.offer-x svg { width: 18px; height: 18px; }
.offer-x:hover { color: var(--fg); background: rgb(var(--ink) / 0.08); }
.offer-h {
  margin: 12px 0 14px; font-size: 21px; font-weight: 500; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--fg); text-wrap: balance;
}
.offer-ask { display: grid; justify-items: stretch; gap: 2px; }
.offer-ask[hidden] { display: none; }
.offer .btn.solid { width: 100%; justify-content: space-between; min-height: 50px; background: var(--btn-bg); color: var(--btn-fg); }
.offer .btn.solid:hover { background: var(--btn-bg-hover); }
.offer .btn.solid .pip { background: rgb(var(--inv) / 0.13); color: var(--btn-fg); }
.offer .btn.solid:disabled { opacity: 0.6; cursor: progress; }
.offer-no {
  min-height: 44px; background: none; border: 0; cursor: pointer; touch-action: manipulation;
  font: 500 14.5px/1 "Inter Tight", system-ui, sans-serif; color: var(--muted-fg);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink) / 0.3);
  transition: color 200ms var(--ease-2);
}
.offer-no:hover { color: var(--fg); }
.offer-form { display: grid; gap: 10px; }
.offer-form[hidden] { display: none; }
.offer-form input {
  width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r-in);
  background: var(--quiet); color: var(--fg); border: 1px solid var(--edge);
  font: 400 16px/1.2 "Inter Tight", system-ui, sans-serif;
  transition: border-color 200ms var(--ease-2);
}
.offer-form input::placeholder { color: var(--muted-fg); opacity: 1; }
.offer-form input:hover { border-color: rgb(var(--ink) / 0.5); }
.offer-form input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.offer .list-msg { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.offer .list-msg:empty { display: none; }
.offer .list-msg.is-bad { color: #FF9C93; }
.offer .list-msg:focus { outline: none; }
.offer-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted-fg); }
.offer-form.is-done input, .offer-form.is-done .offer-go, .offer-form.is-done .offer-note { display: none; }
.offer .list-check { display: block; width: 100%; height: 160px; border: 0; border-radius: var(--r-in); background: #FFFFFF; }
.offer :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .offer, .offer.is-in { transition: none; transform: none; }
  .offer-form input, .offer-x, .offer-no { transition: none; }
}

.cart-arrives {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 500 13px/1.35 "Inter Tight", sans-serif; color: var(--fg);
}
.cart-arrives svg { width: 18px; height: 18px; flex: none; color: var(--muted-fg); }
.cart-note .cart-fill { display: block; margin-top: 6px; font-weight: 500; color: var(--fg); }

.pdp-sizes:has(> .pdp-size:nth-child(6):last-child) { display: grid; grid-template-columns: repeat(3, minmax(52px, 1fr)); max-width: 260px; }