/* ==========================================================================
   PALAZE® — Page layouts
   Editorial compositions. Mobile-first; every breakpoint adds, never subtracts.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   HERO — full-bleed campaign
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--plz-ink);
  color: var(--plz-bone);
  isolation: isolate;
}
@media (max-width: 767px) {
  .hero { min-height: calc(88svh - var(--header-h)); }
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media svg { width: 100%; height: 100%; display: block; }

/* Legibility scrim — graded so copy stays readable on every crop. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(9, 9, 9, 0.90) 0%, rgba(9, 9, 9, 0.55) 34%, rgba(9, 9, 9, 0.12) 62%, rgba(9, 9, 9, 0.42) 100%);
}
@media (max-width: 767px) {
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(9, 9, 9, 0.94) 0%, rgba(9, 9, 9, 0.72) 42%, rgba(9, 9, 9, 0.34) 72%, rgba(9, 9, 9, 0.5) 100%);
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-9) var(--gutter) calc(var(--sp-8) + 2vh);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--plz-concrete-2);
}
.hero__eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-6xl);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
}
.hero__title .hero-line > span { display: block; }

.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 3.6vw, 4.25rem);
  line-height: 1;
  color: var(--plz-bone);
  letter-spacing: -0.01em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--plz-concrete-2);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__foot {
  position: absolute;
  inset: auto var(--gutter) var(--sp-5) auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--plz-concrete-2);
}
.hero__scroll-cue {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, currentColor);
  position: relative;
  overflow: hidden;
}
.hero__scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--plz-bone);
  animation: cue-drop 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-drop {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (max-width: 767px) { .hero__foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-cue::after { animation: none; opacity: 0.6; } }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════════════════ */
.sec-head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: 1.35fr 1fr; align-items: end; gap: var(--sp-8); }
}
.sec-head__index {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-subtle);
  display: block;
  margin-bottom: var(--sp-3);
}
.sec-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-4xl);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.86;
}
.sec-head__sub { font-size: var(--t-lg); color: var(--fg-muted); max-width: 40ch; line-height: 1.45; }
.sec-head__aside { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
@media (min-width: 900px) { .sec-head--split .sec-head__aside { align-items: flex-end; text-align: right; } }

/* ══════════════════════════════════════════════════════════════════════════
   CAMPAIGN — full-bleed C'EST LA VIE
   ══════════════════════════════════════════════════════════════════════════ */
.campaign {
  position: relative;
  min-height: min(100svh, 1000px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--plz-ink);
  color: var(--plz-bone);
  isolation: isolate;
}
.campaign__media { position: absolute; inset: 0; z-index: 0; }
.campaign__media svg { width: 100%; height: 100%; }
.campaign__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 18% 50%, rgba(9, 9, 9, 0.86) 0%, rgba(9, 9, 9, 0.35) 55%, rgba(9, 9, 9, 0.72) 100%);
}
@media (max-width: 767px) {
  .campaign__scrim { background: linear-gradient(to top, rgba(9, 9, 9, 0.94) 0%, rgba(9, 9, 9, 0.6) 55%, rgba(9, 9, 9, 0.68) 100%); }
}
.campaign__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: min(100%, 1100px);
}
.campaign__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 1.1rem + 10vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.campaign__copy {
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
  line-height: 1.55;
  max-width: 42ch;
  color: rgba(245, 243, 238, 0.86);
}
.campaign__rule { width: 100%; max-width: 420px; height: 1px; background: rgba(245, 243, 238, 0.28); }

/* ══════════════════════════════════════════════════════════════════════════
   MANIFESTO
   ══════════════════════════════════════════════════════════════════════════ */
.manifesto { display: grid; gap: var(--sp-8); }
@media (min-width: 980px) { .manifesto { grid-template-columns: 1fr 1fr; gap: var(--sp-11); align-items: start; } }

.manifesto__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-3xl);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.manifesto__body {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 46ch;
}
.manifesto__body strong { color: var(--fg); font-weight: 500; }

.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); }
.fact { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line-strong); }
.fact__k { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); }
.fact__v { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); letter-spacing: 0.01em; }

/* ══════════════════════════════════════════════════════════════════════════
   LOOKBOOK — asymmetric editorial grid
   ══════════════════════════════════════════════════════════════════════════ */
.lookbook {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 700px) { .lookbook { gap: var(--sp-4); } }

.lookbook__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--plz-bone-2);
  grid-column: span 6;
}
.lookbook__item svg { width: 100%; height: 100%; display: block; }

@media (max-width: 699px) {
  .lookbook__item { aspect-ratio: 4 / 5; }
  .lookbook__item[data-span="half"] { grid-column: span 3; }
  .lookbook__item[data-span="half"] { aspect-ratio: 3 / 4; }
}
@media (min-width: 700px) {
  .lookbook__item[data-span="full"]  { grid-column: span 6; aspect-ratio: 21 / 9; }
  .lookbook__item[data-span="half"]  { grid-column: span 3; aspect-ratio: 4 / 5; }
  .lookbook__item[data-span="third"] { grid-column: span 2; aspect-ratio: 3 / 4; }
  .lookbook__item[data-span="two-thirds"] { grid-column: span 4; aspect-ratio: 16 / 10; }
  .lookbook__item[data-span="tall"]  { grid-column: span 3; aspect-ratio: 3 / 4.6; }
}

.lookbook__caption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--plz-bone);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.lookbook__caption em { font-family: var(--font-serif); text-transform: none; letter-spacing: 0; font-size: 1.15em; }
.lookbook__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(9, 9, 9, 0.6), transparent);
  pointer-events: none;
}
.lookbook__item--clean::after { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SHOP — filter rail + results
   ══════════════════════════════════════════════════════════════════════════ */
.shop-layout { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
  .shop-layout { grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
}

.filters { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1000px) {
  .filters { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}
.filters[data-mobile-open="false"] { display: none; }
@media (min-width: 1000px) { .filters[data-mobile-open="false"] { display: flex; } }

/* The rail is hidden below 1000px, so this button is the only way in. It is
   deliberately not `.u-show-sm`, which switches off at 600px. */
.shop-filters-toggle { display: none; }
@media (max-width: 999px) { .shop-filters-toggle { display: inline-flex; } }

.filter-group { border-top: 1px solid var(--line); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.filter-group__title {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
}
.filter-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.filter-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  cursor: pointer;
  padding-block: 3px;
  transition: color var(--dur-1) var(--ease-out);
}
.filter-opt:hover { color: var(--fg); }
.filter-opt input {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  flex: none;
  display: grid;
  place-content: center;
}
.filter-opt input::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--bg);
  border-bottom: 1.5px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}
.filter-opt input:checked { background: var(--fg); border-color: var(--fg); }
.filter-opt input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.filter-opt input:checked + span { color: var(--fg); }
.filter-opt__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--fg-subtle); }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.shop-toolbar__count { font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-muted); }
.shop-toolbar__tools { display: flex; align-items: center; gap: var(--sp-3); }
.select--bare {
  border: 0;
  background-color: transparent;
  min-height: 34px;
  padding: 0 var(--sp-8) 0 0;
  background-position: calc(100% - 8px) 50%, calc(100% - 2px) 50%;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  width: auto;
}

.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.page-head { padding-top: var(--sp-8); padding-bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.page-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-4xl);
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.page-head__sub { color: var(--fg-muted); font-size: var(--t-lg); max-width: 52ch; }
.page-head__count { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ══════════════════════════════════════════════════════════════════════════ */
.pdp { display: grid; gap: var(--sp-7); padding-top: var(--sp-6); }
@media (min-width: 1000px) {
  .pdp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
}

.gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 1000px) {
  .gallery { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--plz-bone-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.gallery__slide[data-active="true"] { opacity: 1; }
.gallery__slide svg { width: 100%; height: 100%; }

.gallery__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-3);
  z-index: 3;
  pointer-events: none;
}
.gallery__nav button { pointer-events: auto; }
.gallery__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.gallery__main:hover .gallery__arrow,
.gallery__arrow:focus-visible { opacity: 1; }
.gallery__arrow:hover { background: var(--fg); color: var(--bg); }

.gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.gallery__thumb-slot {
  position: relative;
  aspect-ratio: 1;
  background: var(--plz-bone-2);
  border-radius: var(--r-xs);
  overflow: hidden;
  transition: opacity var(--dur-2) var(--ease-out);
}
.gallery__thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  transition: border-color var(--dur-2) var(--ease-out);
}
.gallery__thumb[aria-current="true"] { border-color: var(--fg); }
.gallery__thumb-slot[data-current="false"] { opacity: 0.62; }
.gallery__thumb-slot:hover { opacity: 1; }
.gallery__thumb:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.gallery__thumb-art,
.gallery__thumb-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.pdp__info { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1000px) { .pdp__info { padding-top: var(--sp-2); } }

.pdp__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-3xl);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.pdp__price-row { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.pdp__desc { color: var(--fg-muted); font-size: var(--t-md); line-height: 1.65; max-width: 52ch; }

.pdp__section { display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.pdp__section-label { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-muted); }
.pdp__selected { font-size: var(--t-2xs); font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

.pdp__buy { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.pdp__buy-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.pdp__buy-row .btn { flex: 1; }

.pdp__notices { display: flex; flex-direction: column; gap: var(--sp-2); }
.pdp__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--t-2xs);
  line-height: 1.55;
  color: var(--fg-muted);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.pdp__notice[data-tone="warn"] { border-color: var(--plz-signal); color: var(--fg); }
.pdp__notice svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.pdp__sticky-bar { display: none; }
@media (max-width: 999px) {
  .pdp__sticky-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sticky);
    padding: var(--sp-3) var(--gutter);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(105%);
    transition: transform var(--dur-3) var(--ease-editorial);
  }
  .pdp__sticky-bar[data-visible="true"] { transform: none; }
  .pdp__sticky-bar__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pdp__sticky-bar__name { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); }
}

/* Product recommendations */
.recs { padding-top: var(--section-y); }

/* ══════════════════════════════════════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.cart-layout { display: grid; gap: var(--sp-7); padding-block: var(--sp-7) var(--section-y); }
@media (min-width: 1000px) { .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; } }

.cart-table { display: flex; flex-direction: column; }
.cart-table__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-muted);
}
@media (max-width: 599px) { .cart-table__head { display: none; } }

.cart-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 600px) { .cart-row { grid-template-columns: 120px 1fr auto; align-items: start; gap: var(--sp-5); } }
.cart-row__media { aspect-ratio: 4 / 5; background: var(--plz-bone-2); border-radius: var(--r-xs); overflow: hidden; }
.cart-row__media svg { width: 100%; height: 100%; }
.cart-row__body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cart-row__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); letter-spacing: var(--track-tight, -0.02em); line-height: 1.15; }
.cart-row__variant { font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }
.cart-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); }
/* On narrow screens the price drops to its own full-width row under the media. */
@media (max-width: 599px) { .cart-row__end { grid-column: 1 / -1; align-items: flex-start; } }

.cart-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--fill-subtle);
}
@media (min-width: 1000px) { .cart-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════════════════════ */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  counter-reset: step;
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--fg-subtle);
}
.checkout-step[data-state="current"] { color: var(--fg); }
.checkout-step[data-state="done"] { color: var(--fg-muted); }
.checkout-step__num {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
}
.checkout-step[data-state="current"] .checkout-step__num { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.checkout-layout { display: grid; gap: var(--sp-7); padding-block: var(--sp-7) var(--section-y); }
@media (min-width: 1000px) { .checkout-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; } }

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .form-grid .span-2 { grid-column: 1 / -1; } }

.choice-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.choice:hover { border-color: var(--line-strong); background: var(--fill-subtle); }
.choice:has(input:checked) { border-color: var(--fg); background: var(--fill-subtle); }
.choice input[type="radio"] {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-content: center;
  flex: none;
}
.choice input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-out);
}
.choice input[type="radio"]:checked { border-color: var(--fg); }
.choice input[type="radio"]:checked::after { transform: scale(1); }
.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__name { font-size: var(--t-sm); }
.choice__meta { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }
.choice__price { font-family: var(--font-mono); font-size: var(--t-sm); white-space: nowrap; }
.choice[disabled] { opacity: 0.5; cursor: not-allowed; }

.review-block { border: 1px solid var(--line); border-radius: var(--r-xs); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.review-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.review-block__title { font-family: var(--font-mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--track-label); }
.review-list { display: grid; gap: var(--sp-3); font-size: var(--t-sm); }
.review-list div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.review-list dt { color: var(--fg-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN
   ══════════════════════════════════════════════════════════════════════════ */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-strong);
}
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); padding-block: var(--sp-6); }
.admin-stat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-xs); }
.admin-stat__k { font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-muted); }
.admin-stat__v { font-family: var(--font-display); font-weight: 800; font-size: var(--t-2xl); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.admin-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { min-width: 860px; }
.admin-table input,
.admin-table select {
  min-height: 34px;
  padding: 5px var(--sp-3);
  font-size: var(--t-2xs);
}
.admin-table input[type="number"] { width: 76px; }
.admin-table .stock-cell { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.admin-table .stock-cell label { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--fg-subtle); align-items: center; }
.admin-table .stock-cell input { width: 52px; text-align: center; }
.admin-row--dirty td { background: color-mix(in srgb, var(--plz-signal) 12%, transparent); }

.gate {
  max-width: 30rem;
  margin: var(--section-y) auto;
  padding: var(--sp-7);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--fill-subtle);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT / ABOUT SPLITS
   ══════════════════════════════════════════════════════════════════════════ */
.split { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
@media (min-width: 900px) { .split--aside { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
@media (min-width: 900px) { .split--wide-aside { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }

.media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--plz-bone-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.media-frame svg { width: 100%; height: 100%; }
.media-frame--wide { aspect-ratio: 16 / 10; }
.media-frame--square { aspect-ratio: 1; }

.prose { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 60ch; }
.prose h2 { font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: -0.03em; margin-top: var(--sp-5); }
.prose h3 { font-size: var(--t-lg); font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--sp-4); }
.prose p, .prose li { color: var(--fg-muted); line-height: 1.7; }
.prose ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose li { position: relative; padding-left: var(--sp-5); }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--fg-subtle); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--fg); }

.spec-list { display: grid; gap: var(--sp-3); font-size: var(--t-sm); }
.spec-list div { display: flex; justify-content: space-between; gap: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-faint); }
.spec-list dt { color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 0.1em; padding-top: 3px; flex: none; }
.spec-list dd { text-align: right; }
.spec-list dd[data-unset="true"] { color: var(--fg-subtle); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   MISC — 404, ticker band, stat band
   ══════════════════════════════════════════════════════════════════════════ */
.band { border-block: 1px solid var(--line); }
.band--pad { padding-block: var(--sp-9); }

.notfound {
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding-block: var(--section-y);
}
.notfound__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-6xl);
  line-height: 0.8;
  letter-spacing: -0.05em;
}

.integration-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--plz-signal);
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  line-height: 1.55;
  max-width: 72ch;
}
.integration-banner svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--plz-signal); }
.integration-banner strong { display: block; margin-bottom: 2px; }

@media (max-width: 599px) {
  .u-hide-sm { display: none !important; }
}
@media (min-width: 600px) {
  .u-show-sm { display: none !important; }
}