/* ============================================================
   CLASE — global stylesheet
   All design tokens, layout and components live here.
   Pages link this file as ../css/styles.css (or assets/css/styles.css from root).
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* color */
  --c-ink: #141414;
  --c-black: #0a0a0a;
  --c-paper: #ffffff;
  --c-card: #efefee;        /* product card / grey product bg */
  --c-card-warm: #efeeec;   /* warm grey (pdp/bag thumbs) */
  --c-muted: #6a6a6a;
  --c-faint: #767676;        /* WCAG AA on white (4.5:1); was #9a9a9a (2.85:1) */
  --c-line: #ededed;
  --c-line-2: #e2e2e2;
  --c-line-3: #cfcfcf;
  --c-swatch-border: #d6d6d6;
  --c-overlay: rgba(10,10,10,0.5);
  --c-overlay-strong: rgba(10,10,10,0.6);

  /* swatch colors */
  --sw-white: #f4f3ef;
  --sw-navy: #232a3d;
  --sw-black: #141414;

  /* type */
  --font: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* F2 — legibility floor: the two smallest tokens are retired to 11px so no
     store text renders below a comfortable size (tracking stays tight to keep
     the ultra-dense look). Kept as named tokens so all call sites are unchanged. */
  --fs-9: 11px;
  --fs-10: 11px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-30: 30px;
  --fs-46: 46px;

  /* tracking */
  --ls-1: 0.04em;
  --ls-2: 0.08em;
  --ls-3: 0.1em;
  --ls-4: 0.12em;
  --ls-5: 0.14em;
  --ls-6: 0.16em;
  --ls-7: 0.18em;
  --ls-logo: 0.5em;

  /* spacing */
  --pad-x: 32px;
  --pad-x-mobile: 16px;
  --maxw: 1360px;

  /* misc */
  --nav-h: 80px;
  --ann-h: 32px;
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--c-paper); }
body {
  font-family: var(--font);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
::selection { background: #111; color: #fff; }
input, select, textarea, button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- UTILITIES ---------- */
.u-px { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.u-hidden { display: none !important; }

.btn-reset {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; color: inherit; line-height: 1;
}

/* uppercase tracked nav/label text */
.btn-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; color: inherit;
  font-size: var(--fs-11); letter-spacing: var(--ls-5);
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
}

/* underlined CTA label */
.btn-underline {
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: inherit;
  font-size: var(--fs-12); letter-spacing: var(--ls-6);
  text-transform: uppercase; font-weight: 500;
  padding: 0 0 4px 0; border-bottom: 1px solid currentColor; white-space: nowrap;
}
.btn-underline--sm { font-size: var(--fs-11); letter-spacing: var(--ls-5); padding-bottom: 3px; }

/* solid black button */
.btn-primary {
  background: var(--c-black); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-12); letter-spacing: var(--ls-6);
  text-transform: uppercase; font-weight: 500; padding: 19px;
}
.btn-primary--pad { padding: 18px 44px; }
.btn-primary--block { width: 100%; }

.btn-outline {
  background: none; border: 1px solid var(--c-ink); cursor: pointer;
  font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-6);
  text-transform: uppercase; font-weight: 500; padding: 14px 26px; color: var(--c-ink);
}

/* ---------- KEYFRAMES ---------- */
@keyframes clsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes clsSlideR { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes clsPop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clsBootLogo { 0% { opacity: 0; letter-spacing: 1.5em; } 45%,100% { opacity: 1; letter-spacing: 0.5em; } }
@keyframes clsBootBar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes clsBootTag { 0%,30% { opacity: 0; } 60%,100% { opacity: 1; } }

/* ---------- LOADING SPLASH ---------- */
.splash {
  position: fixed; inset: 0; z-index: 2000; background: var(--c-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transition: opacity 0.6s ease;
}
.splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash__logo {
  color: #fff; font-size: var(--fs-30); letter-spacing: var(--ls-logo);
  font-weight: 600; padding-left: 0.5em; animation: clsBootLogo 0.6s cubic-bezier(.2,.7,.2,1) forwards;
}
.splash__bar { width: 170px; height: 1px; background: rgba(255,255,255,0.18); overflow: hidden; }
.splash__bar span { display: block; width: 100%; height: 100%; background: #fff; transform-origin: left center; animation: clsBootBar 0.7s cubic-bezier(.5,0,.2,1) forwards; }
.splash__tag {
  color: rgba(255,255,255,0.82); font-size: var(--fs-9); letter-spacing: 0.34em; text-transform: uppercase;
  animation: clsBootTag 0.75s ease forwards;
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.ann {
  background: var(--c-black); color: #fff; height: var(--ann-h);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ann__text { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; white-space: nowrap; }
.ann__close {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; cursor: pointer; font-size: var(--fs-13); line-height: 1; padding: 6px;
}
body.ann-hidden .ann { display: none; }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: relative; height: var(--nav-h);
  display: flex; align-items: center; padding: 0 var(--pad-x);
  color: var(--c-ink); background: var(--c-paper); z-index: 20;
}
.site-header__links { flex: 1; display: flex; align-items: center; gap: 42px; }
.site-header__right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 38px; }
.site-header__logo {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: var(--fs-22); letter-spacing: var(--ls-logo); font-weight: 600; padding: 0 0 0 0.5em;
  font-family: inherit;
}
.site-header__burger {
  display: none; align-items: center; background: none; border: none; cursor: pointer;
  color: inherit; font-size: 18px; line-height: 1; padding: 0;
}

/* solid variant (product, cart) */
.site-header--solid { border-bottom: 1px solid var(--c-line); }

/* overlay variant (home, shop) — transparent, white, over the hero */
.site-header--overlay {
  position: absolute; top: var(--ann-h); left: 0; right: 0;
  background: transparent; color: #fff; border-bottom: none;
}
body.ann-hidden .site-header--overlay { top: 0; }

/* checkout variant — centered logo only */
.site-header--checkout {
  height: auto; padding: 30px 0 26px; justify-content: center; border-bottom: none;
}
.site-header--checkout .site-header__logo { font-size: var(--fs-20); }
.site-header--checkout .site-header__links,
.site-header--checkout .site-header__right { display: none; }

/* ---------- HERO (home) ---------- */
.hero {
  position: relative; width: 100%; height: 90vh; min-height: 620px;
  overflow: hidden; background: var(--c-black);
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__veil { position: absolute; inset: 0; background: rgba(0,0,0,0.42); }
.hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.15) 30%,rgba(0,0,0,0.2) 55%,rgba(0,0,0,0.7) 100%); }
.hero__cap { position: absolute; left: 0; right: 0; bottom: 46px; padding: 0 var(--pad-x); z-index: 5; color: #fff; }
.hero__cap-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero__cap-text { max-width: 520px; }
.hero__eyebrow { font-size: var(--fs-11); letter-spacing: var(--ls-7); text-transform: uppercase; opacity: 0.8; margin-bottom: 14px; }
.hero__title { font-size: var(--fs-15); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 500; line-height: 1.5; }
.hero__sub { font-size: var(--fs-13); letter-spacing: var(--ls-1); line-height: 1.7; opacity: 0.85; margin-top: 12px; max-width: 430px; }

/* ---------- PRODUCT REEL (home) ---------- */
.reel { padding: 52px 0 64px; }
.reel__head { padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.reel__head-title { font-size: var(--fs-12); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 500; }
.reel__controls { display: flex; align-items: center; gap: 26px; }
.reel__ctrl { background: none; border: none; cursor: pointer; font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 500; padding: 0; display: flex; align-items: center; gap: 8px; color: inherit; font-family: inherit; }
.reel__arrow { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; line-height: 1; color: inherit; }
.reel__wrap { width: 100%; overflow: hidden; padding: 0 var(--pad-x); }
.reel__track { display: flex; width: max-content; will-change: transform; }

.reel-card { flex: 0 0 auto; width: 300px; margin-right: 22px; transition: opacity 0.35s ease; }
/* display:block is load-bearing: aspect-ratio does NOT apply to inline boxes
   (this is an <a>), and without it the box inflates past 300/372 and cover
   crops the garment. contain guarantees no product flat can ever overflow the
   frame, whatever its margins — the strip crop matches this ratio exactly, so
   in-frame art renders identically to cover. */
.reel-card__media { display: block; width: 100%; aspect-ratio: 300 / 372; background: var(--c-card-warm); overflow: hidden; cursor: pointer; }
.reel-card__img { width: 100%; height: 100%; object-fit: contain; }
.reel-card__bar { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.reel-card__sign { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; color: var(--c-ink); flex: 0 0 auto; }
.reel-card__name { flex: 1; min-width: 0; text-align: left; font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: 700; opacity: 0; transition: opacity 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-card__price { flex: 0 0 auto; text-align: right; font-size: var(--fs-11); letter-spacing: var(--ls-3); font-weight: 500; opacity: 0; transition: opacity 0.3s ease; white-space: nowrap; }
.reel-card.is-active .reel-card__name,
.reel-card.is-active .reel-card__price { opacity: 1; }
.reel-card__detail { padding-top: 6px; }
.reel-card__detail-name { font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 500; }
.reel-card__detail-desc { font-size: var(--fs-11); letter-spacing: var(--ls-1); line-height: 1.6; color: var(--c-muted); margin-top: 8px; }
.reel-card__detail-price { font-size: var(--fs-11); letter-spacing: var(--ls-4); font-weight: 500; margin-top: 12px; }

/* ---------- LIFESTYLE REEL ---------- */
.life { width: 100%; background: #000; overflow: hidden; }
.life__track { display: flex; width: max-content; will-change: transform; }
.life-card { flex: 0 0 auto; width: 46vw; aspect-ratio: 3 / 4; position: relative; overflow: hidden; }
.life-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.life-card__veil { position: absolute; inset: 0; background: rgba(0,0,0,0.32); }
.life-card__grad { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.15) 40%,rgba(0,0,0,0.2) 60%,rgba(0,0,0,0.75) 100%); }
.life-card__label { position: absolute; left: 24px; bottom: 74px; color: #fff; font-size: var(--fs-13); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; }
.life-card__cta { position: absolute; left: 24px; bottom: 32px; background: none; border: none; cursor: pointer; color: #fff; font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 500; padding: 0 0 3px 0; border-bottom: 1px solid #fff; font-family: inherit; }

/* ---------- SHOP HERO ---------- */
.shop-hero { position: relative; width: 100%; height: 56vh; min-height: 420px; overflow: hidden; background: var(--c-black); }
.shop-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.shop-hero__veil { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.shop-hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.6) 100%); }
.shop-hero__back { position: absolute; left: 32px; top: 108px; z-index: 5; color: #fff; }
.shop-hero__intro { position: absolute; left: 32px; bottom: 48px; z-index: 5; color: #fff; max-width: 560px; }
.shop-hero__intro-title { font-size: var(--fs-15); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 500; }
.shop-hero__intro-text { font-size: var(--fs-13); letter-spacing: var(--ls-1); line-height: 1.7; opacity: 0.85; margin-top: 14px; max-width: 500px; }

/* ---------- FILTER BAR / PANELS ---------- */
.filter-bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--pad-x); border-bottom: 1px solid var(--c-line); }
.filter-bar__btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; color: var(--c-ink); padding: 0; display: flex; align-items: center; gap: 8px; }
.filter-bar__btn .sign { font-size: var(--fs-13); }

.refine-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border-bottom: 1px solid var(--c-ink); box-shadow: 0 24px 40px rgba(0,0,0,0.08); animation: clsFade 0.2s ease; }
.refine-panel__cols { display: flex; gap: 80px; padding: 34px var(--pad-x) 40px; }
.refine-panel__col-title { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; margin-bottom: 20px; }
.refine-panel__opts { display: flex; flex-direction: column; gap: 16px; }
.refine-opt { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: var(--fs-12); letter-spacing: var(--ls-1); color: var(--c-ink); }
.refine-opt input { width: 13px; height: 13px; accent-color: var(--c-ink); cursor: pointer; }
.refine-opt__swatch { width: 34px; height: 18px; flex: 0 0 auto; border: 1px solid var(--c-swatch-border); }
.refine-panel__foot { display: flex; align-items: stretch; justify-content: flex-end; border-top: 1px solid var(--c-line); }
.refine-panel__clear { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; color: var(--c-ink); padding: 0 36px; }
.refine-panel__apply { background: var(--c-black); color: #fff; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 500; padding: 22px 48px; }

.sort-panel { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 300px; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 24px 40px rgba(0,0,0,0.1); padding: 26px 30px; animation: clsFade 0.2s ease; }
.sort-panel__opts { display: flex; flex-direction: column; gap: 18px; }
.sort-opt { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: var(--fs-13); letter-spacing: var(--ls-1); color: var(--c-ink); }
.sort-opt input { width: 14px; height: 14px; accent-color: var(--c-ink); cursor: pointer; }

.shop-count { padding: 26px var(--pad-x) 8px; }
.shop-count span { font-size: var(--fs-12); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; }

/* ---------- PRODUCT GRID ---------- */
.grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 36px 22px; padding: 18px var(--pad-x) 80px; }
.product-card__media { width: 100%; aspect-ratio: 1 / 1.18; background: var(--c-card); overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.product-card__img { width: 86%; height: 86%; object-fit: contain; }
.product-card__name { font-size: var(--fs-15); letter-spacing: var(--ls-2); text-transform: uppercase; font-weight: 700; margin-top: 18px; }
.product-card__desc { font-size: var(--fs-13); letter-spacing: 0.02em; line-height: 1.55; color: var(--c-muted); margin-top: 10px; min-height: 40px; }
.product-card__price { font-size: var(--fs-16); letter-spacing: var(--ls-2); font-weight: 700; margin-top: 16px; }
.product-card__atc { background: none; border: none; cursor: pointer; font-size: var(--fs-13); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 500; padding: 0 0 3px 0; border-bottom: 1px solid var(--c-ink); margin-top: 16px; color: inherit; font-family: inherit; }
.atc-sizes { margin-top: 14px; }
.atc-sizes__label { font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--c-muted); }
.atc-sizes__row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.atc-size { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-12); letter-spacing: var(--ls-2); color: var(--c-ink); padding: 2px 0; border-bottom: 1px solid transparent; }
.atc-size:hover { border-bottom: 1px solid var(--c-ink); }

/* ---------- PDP ---------- */
.pdp { display: flex; align-items: flex-start; gap: 0; }
.pdp__gallery { flex: 1.55; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.pdp__media { width: 100%; aspect-ratio: 4/5; background: var(--c-card-warm); overflow: hidden; }
.pdp__media img { width: 100%; height: 100%; object-fit: cover; }
.pdp__media--ph { display: flex; align-items: center; justify-content: center; }
.pdp__media-ph-text { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; color: #a8a8a8; text-align: center; padding: 0 20px; }
.pdp__cap { font-size: var(--fs-10); letter-spacing: var(--ls-5); color: #8a8a8a; padding: 10px 0 0 12px; }
.pdp__info { flex: 1; min-width: 0; position: sticky; top: 24px; align-self: flex-start; padding: 40px 44px 60px; }
.pdp__crumb { background: none; border: none; cursor: pointer; color: var(--c-ink); font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; padding: 0; white-space: nowrap; font-family: inherit; }
.pdp__name { font-size: var(--fs-13); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 600; margin-top: 30px; }
.pdp__desc { font-size: var(--fs-12); letter-spacing: var(--ls-1); color: var(--c-muted); margin-top: 8px; }
.pdp__detail { font-size: var(--fs-12); letter-spacing: 0.02em; line-height: 1.8; color: var(--c-ink); margin-top: 24px; }
.pdp__detail-link { background: none; border: none; border-bottom: 1px solid var(--c-ink); cursor: pointer; color: inherit; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; margin-top: 24px; padding: 0 0 3px; display: inline-block; white-space: nowrap; }
.pdp__price { font-size: var(--fs-15); letter-spacing: var(--ls-2); font-weight: 500; margin-top: 32px; }
.pdp__colour { font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; margin-top: 30px; }
.pdp__swatch { width: 64px; height: 22px; margin-top: 12px; border: 1px solid #d8d8d8; }
.pdp__size-row { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.pdp__size-label { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 600; }
.pdp__size-link { background: none; border: none; border-bottom: 1px solid var(--c-ink); cursor: pointer; font-family: inherit; color: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; padding: 0 0 3px; white-space: nowrap; }
.pdp__select-wrap { position: relative; margin-top: 14px; }
.select {
  width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--c-line-3);
  background: #fff; padding: 16px 18px; font-family: inherit; font-size: var(--fs-12);
  letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--c-ink); cursor: pointer; border-radius: 0;
}
.select-caret { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: var(--fs-11); color: var(--c-ink); }
.pdp__fit { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-muted); margin-top: 16px; }
.pdp__fit b { font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-4); }
.pdp__buy { display: flex; gap: 10px; margin-top: 28px; }
.pdp__buy .btn-primary { flex: 1; padding: 20px; }
.pdp__wish { width: 58px; border: 1px solid var(--c-line-3); background: #fff; cursor: pointer; font-size: 16px; color: var(--c-ink); }
.pdp__links { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
.pdp__links .btn-underline--sm,
.pdp__links > * { align-self: flex-start; }

/* ---------- CART ---------- */
.page-wrap { padding: 48px var(--pad-x) 90px; max-width: var(--maxw); margin: 0 auto; }
.cart-tabs { display: flex; align-items: center; gap: 34px; border-bottom: 1px solid var(--c-line); padding-bottom: 18px; }
.cart-tabs__tab { font-size: var(--fs-13); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 700; padding-bottom: 18px; margin-bottom: -19px; border-bottom: 2px solid var(--c-ink); }
.cart-tabs__tab--off { color: var(--c-faint); font-weight: 500; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.cart-row { display: flex; gap: 48px; align-items: flex-start; margin-top: 36px; }
.cart-items { flex: 1.7; min-width: 0; }
.cart-line { display: flex; gap: 34px; padding: 34px 0; border-top: 1px solid var(--c-line); }
.cart-line__media { width: 240px; flex: 0 0 auto; aspect-ratio: 4/5; background: var(--c-card); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-line__top { display: flex; justify-content: space-between; gap: 20px; }
.cart-line__name { font-size: var(--fs-13); letter-spacing: var(--ls-2); text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--c-ink); display: inline-block; padding-bottom: 2px; }
.cart-line__desc { font-size: var(--fs-12); letter-spacing: 0.02em; color: var(--c-muted); margin-top: 10px; }
.cart-line__price { font-size: var(--fs-13); letter-spacing: var(--ls-1); font-weight: 700; white-space: nowrap; }
.cart-line__qty { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: var(--fs-12); letter-spacing: var(--ls-2); text-transform: uppercase; }
.cart-line__qty b { font-weight: 700; }
.qty-btn { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; color: var(--c-ink); }
.qty-val { min-width: 18px; text-align: center; }
.cart-line__meta { font-size: var(--fs-12); letter-spacing: var(--ls-1); text-transform: uppercase; margin-top: 16px; }
.cart-line__meta--gap { margin-top: 10px; }
.cart-line__meta b { font-weight: 700; }
.cart-line__actions { display: flex; gap: 20px; margin-top: 30px; }
.cart-line__icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; color: var(--c-ink); }

/* ---------- ORDER SUMMARY ---------- */
.summary { flex: 0 0 380px; border: 1px solid var(--c-line-2); padding: 30px 30px 34px; }
.summary--checkout { }
.summary__head { display: flex; align-items: center; justify-content: space-between; }
.summary__head--ruled { padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
.summary__title { font-size: var(--fs-12); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; }
.summary__count { font-size: var(--fs-12); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: 700; }
.summary__edit { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--c-ink); text-decoration: underline; padding: 14px 0 0; }
.summary__items { max-height: 300px; overflow-y: auto; margin-top: 18px; border-top: 1px solid var(--c-line); }
.summary-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.summary-line__media { width: 74px; flex: 0 0 auto; aspect-ratio: 4/5; background: var(--c-card); overflow: hidden; }
.summary-line__media img { width: 100%; height: 100%; object-fit: cover; }
.summary-line__body { flex: 1; min-width: 0; }
.summary-line__top { display: flex; justify-content: space-between; gap: 10px; }
.summary-line__name { font-size: var(--fs-10); letter-spacing: var(--ls-2); text-transform: uppercase; font-weight: 700; line-height: 1.5; }
.summary-line__price { font-size: var(--fs-10); font-weight: 500; white-space: nowrap; }
.summary-line__meta { font-size: var(--fs-10); letter-spacing: var(--ls-1); text-transform: uppercase; color: var(--c-muted); margin-top: 8px; }
.summary-line__meta--gap { margin-top: 4px; }
.summary-line__meta b { font-weight: 700; color: var(--c-ink); }
.summary__row { display: flex; justify-content: space-between; font-size: var(--fs-12); letter-spacing: var(--ls-1); text-transform: uppercase; margin-top: 16px; }
.summary__row--first { margin-top: 24px; }
.summary__row--muted { color: var(--c-muted); margin-top: 12px; }
.summary__row span:first-child { color: var(--c-muted); }
.summary__row--muted span { color: var(--c-muted); }
.summary__promo-title { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 700; margin-top: 28px; }
.summary__promo-title .x { color: var(--c-faint); }
.summary__promo { display: flex; gap: 10px; margin-top: 14px; }
.input-line { flex: 1; min-width: 0; border: none; border-bottom: 1px solid var(--c-ink); outline: none; background: none; padding: 8px 0; font-family: inherit; font-size: var(--fs-13); }
.summary__promo button { background: var(--c-black); color: #fff; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; padding: 12px 22px; }
.summary__total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--c-ink); margin-top: 28px; padding-top: 22px; }
.summary__total--tight { margin-top: 24px; padding-top: 20px; }
.summary__total-label { font-size: var(--fs-12); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; }
.summary__total-val { font-size: var(--fs-16); letter-spacing: var(--ls-1); font-weight: 700; }
.summary__cta { width: 100%; margin-top: 20px; }
.summary__pay-title { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 700; margin-top: 26px; }
.pay-badges { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pay-badge { font-size: var(--fs-9); letter-spacing: var(--ls-2); border: 1px solid var(--c-swatch-border); padding: 5px 8px; color: var(--c-muted); }

/* empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 90px 0; text-align: center; }
.empty-state__text { font-size: var(--fs-12); letter-spacing: var(--ls-5); text-transform: uppercase; color: var(--c-muted); }

/* ---------- CHECKOUT / PAYMENT ---------- */
.checkout-steps { display: flex; align-items: center; justify-content: space-between; padding: 0 40px 18px; border-bottom: 1px solid var(--c-line); position: relative; }
.checkout-steps__label { font-size: var(--fs-12); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; }
.checkout-steps__nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 30px; }
.step { font-size: var(--fs-12); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 700; padding-bottom: 18px; margin-bottom: -19px; border-bottom: 2px solid var(--c-ink); background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; color: var(--c-ink); font-family: inherit; }
.step--off { color: #bdbdbd; font-weight: 500; border-bottom: none; padding-bottom: 0; margin-bottom: 0; cursor: default; }
.step--link { color: var(--c-faint); font-weight: 500; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.checkout-row { display: flex; gap: 56px; align-items: flex-start; padding: 44px 40px 90px; max-width: var(--maxw); margin: 0 auto; }
.checkout-col { flex: 1.5; min-width: 0; }
.section-title { font-size: var(--fs-12); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; }
.section-note { font-size: var(--fs-12); letter-spacing: 0.02em; color: var(--c-muted); margin-top: 16px; }
.field { margin-top: 26px; }
.field__label, .field label { font-size: var(--fs-11); color: var(--c-muted); letter-spacing: var(--ls-1); }
.field__input, .input-underline {
  display: block; width: 100%; border: none; border-bottom: 1px solid var(--c-ink); outline: none;
  background: none; padding: 10px 0; margin-top: 8px; font-family: inherit; font-size: var(--fs-13); color: var(--c-ink);
}
.field--email .input-underline { width: 60%; }
.tabs-row { display: flex; gap: 34px; border-bottom: 1px solid var(--c-line); margin-top: 44px; padding-bottom: 16px; }
.tabs-row__tab { font-size: var(--fs-12); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 700; padding-bottom: 16px; margin-bottom: -17px; border-bottom: 2px solid var(--c-ink); }
.tabs-row__tab--off { color: var(--c-faint); font-weight: 500; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.ship-note { font-size: var(--fs-12); letter-spacing: 0.02em; color: var(--c-muted); margin-top: 22px; }
.ship-note a, .inline-link { color: var(--c-ink); text-decoration: underline; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; margin-top: 20px; }
.form-grid__full { grid-column: 1 / -1; }
.required-note { font-size: var(--fs-11); color: var(--c-faint); margin-top: 14px; }
.section-title--gap { margin-top: 38px; }

/* payment methods */
.pay-method { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 24px 0; border-bottom: 1px solid var(--c-ink); margin-top: 18px; }
.pay-method--last { border-bottom: 1px solid var(--c-line); margin-top: 0; }
.pay-method__left { display: flex; align-items: center; gap: 16px; }
.pay-method__left input { width: 14px; height: 14px; accent-color: var(--c-ink); cursor: pointer; }
.pay-method__name { font-size: var(--fs-13); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: 500; }
.pay-method__badges { display: flex; gap: 7px; }
.pay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; padding: 28px 0 8px; }
.crypto-fields { padding: 28px 0 8px; }
.crypto-fields__label { font-size: var(--fs-11); color: var(--c-muted); letter-spacing: var(--ls-1); }
.crypto-nets { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.crypto-net { font-size: var(--fs-11); letter-spacing: var(--ls-2); text-transform: uppercase; border: 1px solid var(--c-line-2); padding: 10px 18px; color: var(--c-muted); }
.crypto-net--on { border-color: var(--c-ink); color: var(--c-ink); }
.crypto-fields__note { font-size: var(--fs-12); letter-spacing: 0.02em; line-height: 1.7; color: var(--c-muted); margin-top: 20px; }
.check-row { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: var(--fs-12); letter-spacing: 0.02em; color: var(--c-ink); cursor: pointer; }
.check-row input { accent-color: var(--c-ink); }
.consent { display: flex; gap: 12px; margin-top: 22px; font-size: var(--fs-11); letter-spacing: 0.02em; line-height: 1.6; color: var(--c-muted); cursor: pointer; }
.consent--gap { margin-top: 16px; }
.consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--c-ink); }
.consent u, .consent .ul { text-decoration: underline; color: var(--c-ink); }
.pay-foot { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.pay-foot .btn-underline--sm { color: var(--c-ink); }
.pay-foot .btn-primary { flex: 1; }
.payment-to { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--c-line); padding-bottom: 26px; }
.payment-to__lines { font-size: var(--fs-12); letter-spacing: var(--ls-1); line-height: 2.2; }
.payment-to__lines b { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-3); }
.payment-to__edit { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--c-ink); text-decoration: underline; padding: 4px 0 0; }

/* ---------- THANK YOU ---------- */
.thanks { max-width: 620px; margin: 0 auto; padding: 90px var(--pad-x) 110px; text-align: center; }
.thanks__eyebrow { font-size: var(--fs-11); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-faint); }
.thanks__title { font-size: var(--fs-46); letter-spacing: var(--ls-1); text-transform: uppercase; font-weight: 600; margin-top: 22px; line-height: 1.05; }
.thanks__msg { font-size: var(--fs-13); letter-spacing: 0.02em; line-height: 1.8; color: var(--c-muted); margin-top: 24px; }
.thanks__order { display: inline-flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-ink); padding: 22px 44px; margin-top: 40px; }
.thanks__order-label { font-size: var(--fs-10); letter-spacing: var(--ls-7); text-transform: uppercase; color: var(--c-faint); }
.thanks__order-no { font-size: var(--fs-18); letter-spacing: var(--ls-5); font-weight: 700; }
.thanks__items { border-top: 1px solid var(--c-line); margin-top: 48px; padding-top: 8px; }
.thanks-line { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--c-line); text-align: left; }
.thanks-line__media { width: 62px; flex: 0 0 auto; aspect-ratio: 4/5; background: var(--c-card); overflow: hidden; }
.thanks-line__media img { width: 100%; height: 100%; object-fit: cover; }
.thanks-line__body { flex: 1; min-width: 0; }
.thanks-line__name { font-size: var(--fs-11); letter-spacing: var(--ls-2); text-transform: uppercase; font-weight: 700; }
.thanks-line__meta { font-size: var(--fs-11); letter-spacing: var(--ls-1); text-transform: uppercase; color: var(--c-muted); margin-top: 6px; }
.thanks-line__price { font-size: var(--fs-12); letter-spacing: var(--ls-1); font-weight: 600; }
.thanks__total { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }

/* ---------- FOOTER ---------- */
.site-footer { border-top: 1px solid var(--c-line); padding: 64px var(--pad-x) 40px; }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 40px; }
.site-footer__col-title { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
.site-footer__list { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: var(--fs-11); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--c-muted); }
.site-footer__list a, .site-footer__link { background: none; border: none; cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.site-footer__join-note { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-muted); line-height: 1.7; margin-bottom: 16px; }
.site-footer__form { display: flex; align-items: center; border-bottom: 1px solid var(--c-ink); max-width: 320px; }
.site-footer__form input { flex: 1; border: none; outline: none; background: none; padding: 8px 0; font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; font-family: inherit; }
.site-footer__form button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0 0 0 12px; }
.site-footer__joined { font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--c-muted); line-height: 1.7; }
.site-footer__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: var(--fs-10); letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--c-faint); }

/* ---------- DRAWERS (login / bag) ---------- */
.overlay { position: fixed; inset: 0; z-index: 70; background: var(--c-overlay); animation: clsFade 0.25s ease; }
.overlay--modal { z-index: 80; background: var(--c-overlay-strong); display: flex; align-items: center; justify-content: center; padding: 24px; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; background: #fff; box-shadow: -1px 0 50px rgba(0,0,0,0.2); display: flex; flex-direction: column; animation: clsSlideR 0.35s cubic-bezier(.4,0,.2,1); overflow-y: auto; }
.drawer--bag { width: 460px; overflow: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--c-line); flex: 0 0 auto; }
.drawer__title { font-size: var(--fs-12); letter-spacing: var(--ls-7); text-transform: uppercase; font-weight: 600; }
.drawer__close, .modal__close { background: none; border: none; cursor: pointer; font-size: var(--fs-15); line-height: 1; padding: 4px; color: var(--c-ink); }
.drawer__body { padding: 34px 28px 44px; }
.login__lead { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 600; }
.login__form { margin-top: 30px; }
.login__form label { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-muted); }
.login__sso { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.sso-btn { display: flex; align-items: center; gap: 14px; background: none; border: 1px solid var(--c-line-2); cursor: pointer; padding: 14px 16px; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; color: var(--c-ink); }
.sso-btn__icon { width: 22px; height: 22px; flex: 0 0 auto; border: 1px solid var(--c-ink); display: flex; align-items: center; justify-content: center; font-size: var(--fs-11); font-weight: 700; }
.login__reg { border: 1px solid var(--c-line); padding: 22px; margin-top: 30px; }
.login__reg-title { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 600; }
.login__reg-text { font-size: var(--fs-11); letter-spacing: var(--ls-1); line-height: 2; color: var(--c-muted); margin-top: 12px; }
.login__form .btn-primary { width: 100%; margin-top: 34px; padding: 18px; }

/* bag drawer */
.bag__count { text-align: right; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; padding: 18px 0 4px; }
.bag__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px; }
.bag-line { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--c-line); }
.bag-line__media { width: 92px; flex: 0 0 auto; aspect-ratio: 4/5; background: var(--c-card-warm); overflow: hidden; }
.bag-line__media img { width: 100%; height: 100%; object-fit: cover; }
.bag-line__body { flex: 1; min-width: 0; }
.bag-line__top { display: flex; justify-content: space-between; gap: 12px; }
.bag-line__name { font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: 600; line-height: 1.5; }
.bag-line__price { font-size: var(--fs-11); letter-spacing: var(--ls-1); font-weight: 500; white-space: nowrap; }
.bag-line__meta { font-size: var(--fs-11); letter-spacing: var(--ls-1); text-transform: uppercase; color: var(--c-muted); margin-top: 12px; }
.bag-line__meta--gap { margin-top: 6px; }
.bag-line__meta b { font-weight: 600; color: var(--c-ink); }
.bag-line__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.bag-line__qty { font-size: var(--fs-11); letter-spacing: var(--ls-1); text-transform: uppercase; color: var(--c-muted); }
.bag-line__qty b { font-weight: 600; color: var(--c-ink); }
.bag-line__remove { background: none; border: none; cursor: pointer; font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; color: var(--c-muted); padding: 0 0 2px; border-bottom: 1px solid var(--c-line-3); }
.bag__foot { flex: 0 0 auto; border-top: 1px solid var(--c-ink); padding: 22px 28px 28px; }
.bag__subtotal { display: flex; justify-content: space-between; align-items: center; }
.bag__subtotal-label { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 600; }
.bag__subtotal-val { font-size: var(--fs-15); letter-spacing: var(--ls-1); font-weight: 600; }
.bag__foot .btn-primary { width: 100%; margin-top: 18px; }
.bag__view { width: 100%; background: none; border: none; cursor: pointer; padding: 16px 0 0; font-family: inherit; font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; color: var(--c-ink); text-decoration: underline; }
.bag__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px; text-align: center; }

/* ---------- MODALS (community / legal) ---------- */
.modal { background: #fff; animation: clsPop 0.3s cubic-bezier(.4,0,.2,1); position: relative; }
.modal--community { width: 640px; max-width: 100%; max-height: 88vh; overflow-y: auto; padding: 42px 44px 44px; }
.modal--legal { width: 680px; max-width: 100%; max-height: 86vh; display: flex; flex-direction: column; }
.modal__x { position: absolute; top: 22px; right: 24px; background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px; color: var(--c-ink); }
.modal__kicker { font-size: var(--fs-13); letter-spacing: var(--ls-7); text-transform: uppercase; font-weight: 600; }
.modal__lead { font-size: var(--fs-12); letter-spacing: 0.02em; line-height: 1.7; color: var(--c-muted); margin-top: 14px; max-width: 480px; }
.modal__group-title { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 600; margin-top: 34px; }
.modal__details-grid { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 24px; margin-top: 26px; }
.field--select { position: relative; margin-top: 8px; }
.select-line { width: 100%; appearance: none; -webkit-appearance: none; border: none; border-bottom: 1px solid var(--c-ink); background: none; padding: 10px 0; font-family: inherit; font-size: var(--fs-13); color: var(--c-ink); cursor: pointer; border-radius: 0; }
.select-line-caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: var(--fs-11); }
.radio-row { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 16px; }
.radio-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); cursor: pointer; }
.radio-item input { accent-color: var(--c-ink); }
.check-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.check-item { display: flex; align-items: center; gap: 12px; font-size: var(--fs-12); cursor: pointer; }
.check-item input { accent-color: var(--c-ink); }
.modal__consent { display: flex; gap: 12px; margin-top: 30px; font-size: var(--fs-11); letter-spacing: 0.02em; line-height: 1.6; color: var(--c-muted); cursor: pointer; }
.modal__consent input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--c-ink); }
.modal__req { font-size: var(--fs-11); color: var(--c-faint); margin-top: 16px; letter-spacing: var(--ls-1); }
.modal--community .btn-primary { width: 100%; margin-top: 22px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; border-bottom: 1px solid var(--c-line); flex: 0 0 auto; }
.modal__title { font-size: var(--fs-12); letter-spacing: var(--ls-7); text-transform: uppercase; font-weight: 600; }
.modal__scroll { overflow-y: auto; padding: 32px; }
.modal__para { font-size: var(--fs-12); letter-spacing: 0.02em; line-height: 1.9; color: #3a3a3a; margin: 0 0 18px; }

/* ---------- SIZE GUIDE ---------- */
.modal--sizeguide { width: 940px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.modal--sizeguide .modal__x { z-index: 2; }
.sizeguide__tabs { display: flex; justify-content: space-between; gap: 20px; padding: 52px 40px 0; border-bottom: 1px solid var(--c-line); flex: 0 0 auto; }
.sizeguide__tab { background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-12); letter-spacing: var(--ls-5); text-transform: uppercase; color: var(--c-faint); font-weight: 500; padding: 0 0 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sizeguide__tab.is-active { color: var(--c-ink); font-weight: 700; border-bottom-color: var(--c-ink); }
.sizeguide__scroll { overflow-y: auto; padding: 30px 40px 40px; }
.sg-intro { font-size: var(--fs-12); letter-spacing: var(--ls-1); line-height: 1.7; color: var(--c-muted); }
.sg-scrollx { overflow-x: auto; margin-top: 22px; }
.sg-section { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; margin-top: 30px; }
.sg-table { width: 100%; border-collapse: collapse; }
.sg-table th, .sg-table td { text-align: left; font-size: var(--fs-12); letter-spacing: var(--ls-1); padding: 14px 22px 14px 0; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.sg-table th { text-transform: uppercase; font-weight: 700; letter-spacing: var(--ls-2); color: var(--c-ink); vertical-align: bottom; }
.sg-table td { color: #3a3a3a; }
.sg-table th:first-child, .sg-table td:first-child { font-weight: 700; color: var(--c-ink); }
.sg-table--grid { border: 1px solid var(--c-line); }
.sg-table--grid th, .sg-table--grid td { text-align: center; padding: 13px 14px; border: 1px solid var(--c-line); }
.sg-cell-joke { color: var(--c-faint); font-style: italic; }
.sg-model { display: flex; gap: 22px; align-items: center; border: 1px solid var(--c-line-2); padding: 20px 24px; }
.sg-model__img { width: 60px; flex: 0 0 auto; aspect-ratio: 3/4; background: var(--c-card); overflow: hidden; }
.sg-model__img img { width: 100%; height: 100%; object-fit: cover; }
.sg-model__title { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 700; }
.sg-model__stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 14px; }
.sg-model__stat { font-size: var(--fs-12); letter-spacing: var(--ls-1); }
.sg-model__stat b { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-2); margin-right: 7px; }
.sg-units { display: flex; gap: 28px; margin-top: 26px; }
.sg-unit { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); cursor: pointer; }
.sg-unit input { accent-color: var(--c-ink); }
.sg-how { display: flex; flex-direction: column; gap: 22px; }
.sg-how__t { font-size: var(--fs-12); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: 700; }
.sg-how__d { font-size: var(--fs-12); letter-spacing: var(--ls-1); line-height: 1.7; color: var(--c-muted); margin-top: 6px; }
.sg-how__note { font-size: var(--fs-12); letter-spacing: var(--ls-1); line-height: 1.7; color: var(--c-ink); border-top: 1px solid var(--c-line); padding-top: 22px; }

/* ---------- CONTACT ---------- */
.contact { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad-x) 96px; }
.contact__eyebrow { font-size: var(--fs-11); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-faint); }
.contact__title { font-size: var(--fs-46); letter-spacing: var(--ls-1); text-transform: uppercase; font-weight: 600; margin: 16px 0 0; line-height: 1.04; }
.contact__lead { font-size: var(--fs-13); letter-spacing: 0.02em; line-height: 1.8; color: var(--c-muted); margin: 22px 0 0; max-width: 520px; }
.contact__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; margin-top: 52px; border-top: 1px solid var(--c-ink); padding-top: 48px; }
.contact__details { display: flex; flex-direction: column; gap: 32px; }
.contact-block__title { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; }
.contact-block__val { display: inline-block; font-size: var(--fs-13); letter-spacing: var(--ls-1); color: var(--c-muted); margin-top: 12px; }
a.contact-block__val { border-bottom: 1px solid var(--c-line-3); padding-bottom: 2px; }
.contact-form__textarea { width: 100%; border: 1px solid var(--c-ink); background: none; outline: none; padding: 14px; margin-top: 8px; font-family: inherit; font-size: var(--fs-13); color: var(--c-ink); resize: vertical; min-height: 96px; }
.contact-form__submit { margin-top: 34px; padding: 18px 44px; }
.contact-thanks { border: 1px solid var(--c-line-2); padding: 56px 40px; text-align: center; }
.contact-thanks__title { font-size: var(--fs-13); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 700; }
.contact-thanks__text { font-size: var(--fs-13); letter-spacing: var(--ls-1); line-height: 1.8; color: var(--c-muted); margin-top: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------- MOBILE MENU ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--c-black); color: #fff; display: flex; flex-direction: column; padding: 18px 16px 28px; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.mobile-menu__logo { background: none; border: none; cursor: pointer; color: #fff; font-size: var(--fs-18); letter-spacing: 0.34em; font-weight: 600; padding: 0; font-family: inherit; }
.mobile-menu__close { background: none; border: none; cursor: pointer; color: #fff; font-size: 20px; line-height: 1; padding: 6px; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; }
.mobile-menu__link { background: none; border: none; cursor: pointer; color: #fff; text-align: left; font-size: 28px; letter-spacing: var(--ls-1); text-transform: uppercase; font-weight: 600; padding: 14px 0; font-family: inherit; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mobile-menu__foot button { background: none; border: none; cursor: pointer; font-size: var(--fs-13); letter-spacing: var(--ls-5); text-transform: uppercase; color: #fff; padding: 0; font-family: inherit; }

/* swatch color modifiers (shared) */
.sw-white { background: var(--sw-white); }
.sw-navy { background: var(--sw-navy); }
.sw-black { background: var(--sw-black); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .site-header { height: 60px; padding: 0 var(--pad-x-mobile); }
  .site-header--overlay { top: var(--ann-h); }
  .site-header__burger { display: flex; }
  .site-header__links .btn-link,
  .site-header__right .btn-link.is-hide-mobile { display: none; }
  .site-header__logo { font-size: 17px; letter-spacing: 0.34em; }
  .site-header__right { gap: 0; }
  .site-header__links { gap: 16px; }

  .hero { height: 84vh; min-height: 0; }
  .hero__cap { bottom: 30px; padding: 0 var(--pad-x-mobile); }
  .hero__cap-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__title { font-size: var(--fs-13); }
  .hero__sub { font-size: var(--fs-12); }

  .reel { padding: 34px 0 42px; }
  .reel__head { flex-wrap: wrap; gap: 12px 18px; padding: 0 var(--pad-x-mobile); margin-bottom: 22px; }
  .reel__wrap { padding: 0 var(--pad-x-mobile); }
  .reel-card { width: 76vw; margin-right: 14px; }
  .reel-card__name, .reel-card__price { opacity: 1; }

  .life-card { width: 82vw; }

  .u-px, .filter-bar, .shop-count, .grid { padding-left: var(--pad-x-mobile); padding-right: var(--pad-x-mobile); }
  .shop-hero { height: 64vh; min-height: 0; }
  .shop-hero__back { left: var(--pad-x-mobile); }
  .shop-hero__intro { left: var(--pad-x-mobile); right: var(--pad-x-mobile); }
  .grid { grid-template-columns: repeat(2,1fr); gap: 26px 12px; }
  .site-footer { padding: 44px var(--pad-x-mobile) 30px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }

  .pdp { flex-direction: column; }
  .pdp__gallery { grid-template-columns: 1fr; gap: 2px; }
  .pdp__info { position: static; padding: 30px var(--pad-x-mobile) 50px; }

  .cart-row, .checkout-row { flex-direction: column; gap: 36px; }
  .summary, .checkout-col { flex: 1 1 auto; width: 100%; }
  .cart-line__media { width: 140px; }
  .form-grid { grid-template-columns: 1fr; }
  .sizeguide__tabs { padding: 46px 20px 0; gap: 10px; }
  .sizeguide__tab { font-size: var(--fs-10); letter-spacing: var(--ls-2); padding-bottom: 14px; }
  .sizeguide__scroll { padding: 24px 20px 32px; }
  .sg-model { flex-direction: column; align-items: flex-start; }
  .contact { padding: 44px var(--pad-x-mobile) 64px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__title { font-size: 34px; }
}
@media (max-width: 460px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .reel-card { width: 82vw; }
}

/* ---------- LOGO BOARD (brand reference) ---------- */
.board { min-height: 100vh; background: var(--c-paper); padding: 56px var(--pad-x) 90px; }
.board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--c-ink); padding-bottom: 26px; }
.board__title { font-size: var(--fs-30); letter-spacing: var(--ls-6); text-transform: uppercase; font-weight: 600; }
.board__sub { font-size: var(--fs-12); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--c-muted); margin-top: 12px; }
.board__back { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid var(--c-ink); }
.board-section { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; color: var(--c-faint); margin: 52px 0 18px; }
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.logo-tile { background: var(--c-paper); display: flex; flex-direction: column; }
.logo-tile__stage { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; padding: 30px; overflow: hidden; }
.logo-tile__stage--dark { background: var(--c-black); }
.logo-tile__stage--grey { background: var(--c-card); }
.logo-tile__stage--warm { background: var(--c-card-warm); }
.logo-tile__meta { border-top: 1px solid var(--c-line); padding: 15px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.logo-tile__name { font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 600; }
.logo-tile__use { font-size: var(--fs-10); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--c-faint); text-align: right; }

/* marks */
.mark { font-size: 28px; letter-spacing: var(--ls-logo); font-weight: 600; padding-left: 0.5em; color: var(--c-ink); white-space: nowrap; }
.mark--rev { color: #fff; }
.mark--muted { color: #b8b8b8; }
.mark--sm { font-size: 13px; letter-spacing: 0.4em; padding-left: 0.4em; }
.mark--xs { font-size: 9px; letter-spacing: 0.34em; padding-left: 0.34em; }
.monogram { font-size: 72px; letter-spacing: 0; font-weight: 600; color: var(--c-ink); line-height: 1; }
.monogram--rev { color: #fff; }
.app-icon { width: 104px; height: 104px; background: var(--c-black); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 50px; font-weight: 600; }
.app-icon--inv { background: #fff; color: var(--c-black); border: 1px solid var(--c-line-2); }
.lockup-stacked { text-align: center; }
.lockup-stacked__eyebrow { font-size: var(--fs-10); letter-spacing: 0.34em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 14px; }
.lockup-tag { text-align: center; }
.lockup-tag__tag { font-size: var(--fs-9); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-muted); margin-top: 14px; }
.lockup-tag--rev .lockup-tag__tag { color: rgba(255,255,255,0.6); }
.lockup-h { display: flex; align-items: center; gap: 20px; }
.lockup-h__c { font-size: 40px; font-weight: 600; line-height: 1; color: var(--c-ink); }
.lockup-h__divider { width: 1px; height: 34px; background: var(--c-line-3); }
.clearspace { position: relative; padding: 26px 30px; outline: 1px dashed var(--c-line-3); }
.clearspace::before, .clearspace::after { content: "C"; position: absolute; font-size: 11px; color: var(--c-line-3); font-weight: 600; }
.clearspace::before { top: 6px; left: 8px; }
.clearspace::after { bottom: 6px; right: 8px; }
.minsize { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.minsize__note { font-size: var(--fs-9); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--c-faint); }
.palette-row { display: flex; gap: 0; }
.palette-chip { width: 60px; height: 60px; }
.palette-chip--ink { background: var(--c-ink); }
.palette-chip--black { background: var(--c-black); }
.palette-chip--paper { background: #fff; border: 1px solid var(--c-line-2); }
.palette-chip--grey { background: var(--c-card); }
.palette-chip--navy { background: var(--sw-navy); }
.ig-stage { gap: 30px; }
.ig-avatar { width: 152px; height: 152px; border-radius: 50%; object-fit: cover; display: block; }
.ig-square { width: 152px; height: 152px; object-fit: cover; display: block; }
.ig-ring { padding: 4px; border: 1px solid var(--c-line-2); border-radius: 50%; }
@media (max-width: 768px) {
  .board { padding: 44px var(--pad-x-mobile) 60px; }
  .board-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .board-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLASE — THEME OVERRIDES (WooCommerce glue + mobile scale-down)
   Appended to the verbatim prototype stylesheet above.
   ============================================================ */

/* ---- generic page wrap for WP pages ---- */
.entry-content { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad-x) 96px; }
.entry-content h1, .entry-content h2 { letter-spacing: var(--ls-4); text-transform: uppercase; }
@media (max-width:768px){ .entry-content { padding: 44px var(--pad-x-mobile) 64px; } }

/* ---- WooCommerce notices ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
  list-style: none; font-size: var(--fs-12); letter-spacing: var(--ls-1); line-height:1.6;
  border: 1px solid var(--c-ink); background:#fff; color: var(--c-ink);
  padding: 16px 18px; margin: 0 0 24px;
}
.woocommerce-error { border-color:#b00020; color:#b00020; }
.woocommerce-message { border-left: 3px solid var(--c-ink); }
.woocommerce-error li, .woocommerce-message, .woocommerce-info { margin-left:0; }
.demo_store, .woocommerce-store-notice { display:none !important; }

/* ---- WooCommerce buttons → btn-primary ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit {
  background: var(--c-black); color:#fff; border:none; cursor:pointer; border-radius:0;
  font-family: inherit; font-size: var(--fs-12); letter-spacing: var(--ls-6);
  text-transform: uppercase; font-weight:500; padding: 19px 26px; line-height:1;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover { background:#000; }
.woocommerce .button.loading { opacity:.6; }

/* ---- form fields (Woo) → underline style ---- */
.woocommerce form .form-row { padding:0; margin:0 0 22px; }
.woocommerce .form-row label, .woocommerce-checkout label { font-size: var(--fs-11); color: var(--c-muted); letter-spacing: var(--ls-1); display:block; margin-bottom:8px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type=text], .woocommerce-checkout input[type=email],
.woocommerce-checkout input[type=tel], .woocommerce-checkout input[type=password],
.woocommerce input.input-text {
  width:100%; border:none; border-bottom:1px solid var(--c-ink); outline:none; background:none;
  padding:10px 0; font-family: inherit; font-size: var(--fs-13); color: var(--c-ink); border-radius:0;
}
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce select {
  border:none; border-bottom:1px solid var(--c-ink); border-radius:0; background:none;
  font-family:inherit; font-size:var(--fs-13); min-height:40px; padding:8px 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:24px; padding:0; color:var(--c-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top:8px; }
.select2-dropdown { border-color: var(--c-ink); border-radius:0; }
.woocommerce form .form-row .required { color: var(--c-ink); text-decoration:none; }
.woocommerce .woocommerce-input-wrapper { width:100%; }

/* ---- quantity ---- */
.woocommerce .quantity input.qty {
  width:54px; border:1px solid var(--c-line-3); padding:10px 6px; text-align:center;
  font-family:inherit; font-size:var(--fs-13); border-radius:0;
}

/* ============================================================
   MOBILE: product photos SCALE DOWN, never crop (≤768px).
   Heroes/lifestyle stay full-bleed (atmospheric backgrounds).
   ============================================================ */
@media (max-width:768px){
  .pdp__media img,
  .cart-line__media img,
  .bag-line__media img,
  .summary-line__media img,
  .thanks-line__media img,
  .reel-card__img,
  .sg-model__img img,
  .woocommerce-cart-form .product-thumbnail img,
  .mini_cart_item img,
  .product-card__img {
    object-fit: contain !important;
    width:100%; height:100%;
  }
  /* give the contained product images a touch of breathing room on their card */
  .pdp__media, .reel-card__media { padding:0; }
  .pdp__media img, .reel-card__img { padding:6%; }
  .cart-line__media img, .bag-line__media img, .summary-line__media img, .thanks-line__media img { padding:6%; }
}

/* small-screen safety: never allow horizontal overflow from wide tables/rows */
@media (max-width:768px){
  .checkout-steps { padding:0 var(--pad-x-mobile) 18px; }
  .checkout-steps__nav { position:static; transform:none; }
  .checkout-steps { flex-wrap:wrap; gap:10px; }
  .pay-fields { grid-template-columns:1fr; }
  .cart-line { gap:18px; }
  .cart-line__media { width:120px; }
  .thanks { padding:64px var(--pad-x-mobile) 80px; }
  .thanks__title { font-size:34px; }
}

/* WP admin bar offset when logged in (keep overlay header correct) */
body.admin-bar .site-header--overlay { top: calc(var(--ann-h) + 32px); }
body.admin-bar.ann-hidden .site-header--overlay { top: 32px; }
@media screen and (max-width:782px){
  body.admin-bar .site-header--overlay { top: calc(var(--ann-h) + 46px); }
  body.admin-bar.ann-hidden .site-header--overlay { top:46px; }
}

/* hide WP default elements we don't want */
.wp-block-template-part, .skip-link { }
.clase-hidden { display:none !important; }

/* loader/blockUI tidy */
.blockUI.blockOverlay { background:#fff !important; }

/* ============================================================
   CHECKOUT — 2-step panes + WooCommerce payment list styling
   ============================================================ */
form.checkout [data-pane="payment"] { display:none; }
body[data-checkout-step="payment"] form.checkout [data-pane="payment"] { display:block; }
body[data-checkout-step="payment"] form.checkout [data-pane="delivery"] { display:none; }

/* WooCommerce form-row inside the prototype grid */
.form-grid .form-row { margin:0; }
.form-grid .form-row label { font-size: var(--fs-11); color: var(--c-muted); letter-spacing: var(--ls-1); margin-bottom:8px; }
.form-grid > .form-row.form-grid__full { grid-column: 1 / -1; }
.field--email .form-row { margin:0; }
.field--email .form-row label { margin-bottom:8px; }

/* abbr required marker */
.required, .woocommerce form .form-row .required { color: var(--c-ink); text-decoration:none; border:0; }

/* payment methods → prototype pay-method look */
#payment, .woocommerce-checkout-payment { background:none; border-radius:0; }
#payment ul.payment_methods, ul.wc_payment_methods { list-style:none; margin:0; padding:0; border:none; }
#payment ul.payment_methods li, ul.wc_payment_methods li.wc_payment_method {
  list-style:none; padding:0; margin:0; border-bottom:1px solid var(--c-line);
}
#payment ul.payment_methods li > label, ul.wc_payment_methods li label {
  display:flex; align-items:center; gap:16px; cursor:pointer; padding:24px 0;
  font-size: var(--fs-13); letter-spacing: var(--ls-3); text-transform:uppercase; font-weight:500;
}
#payment ul.payment_methods li input[type=radio] { width:14px; height:14px; accent-color:var(--c-ink); }
#payment ul.payment_methods li img { display:none; }
#payment .payment_box { background:none; padding:0 0 22px; margin:0; font-size:var(--fs-12); }
#payment .payment_box::before { display:none; }
#payment .payment_box .pay-fields { padding-top:6px; }
#payment .woocommerce-terms-and-conditions-wrapper { margin:22px 0; font-size:var(--fs-11); color:var(--c-muted); }
#payment .form-row.place-order { padding:0; margin-top:0; }
#payment #place_order, .pay-foot #place_order {
  background:var(--c-black); color:#fff; border:none; cursor:pointer; border-radius:0;
  font-family:inherit; font-size:var(--fs-12); letter-spacing:var(--ls-6); text-transform:uppercase;
  font-weight:500; padding:19px 44px; width:auto; float:none;
}
#payment .wc-terms-and-conditions { margin-bottom:14px; }
.woocommerce-checkout #payment div.form-row { padding:0; }
.woocommerce-privacy-policy-text { font-size:var(--fs-11); color:var(--c-muted); line-height:1.7; }

/* checkout messages spacing */
.woocommerce-NoticeGroup-checkout, .woocommerce-error { margin: 0 var(--pad-x) 24px; }
@media (max-width:768px){ .woocommerce-NoticeGroup-checkout, .woocommerce-error { margin: 0 var(--pad-x-mobile) 18px; } }

/* coupon/disabled promo on checkout aside */
.summary__promo input[disabled], .summary__promo button[disabled] { opacity:.5; cursor:not-allowed; }

/* select2 inside our underline look (country/state if shown) */
.woocommerce-checkout .select2-container { width:100% !important; }

/* ============================================================
   CHECKOUT payment-method polish (match prototype .pay-method)
   ============================================================ */
#payment ul.payment_methods li.wc_payment_method { display:flex; flex-wrap:wrap; align-items:center; }
#payment ul.payment_methods li.wc_payment_method > input[type=radio] { order:0; flex:0 0 auto; margin:0 14px 0 0; }
#payment ul.payment_methods li.wc_payment_method > label {
  order:1; flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 0; margin:0; font-size:var(--fs-13); letter-spacing:var(--ls-3); text-transform:uppercase; font-weight:500;
}
#payment ul.payment_methods li.wc_payment_method > .payment_box { order:2; flex:1 0 100%; }
.pay-method__badges { display:inline-flex; gap:7px; }
.pay-method__badges .pay-badge { font-size:var(--fs-9); letter-spacing:var(--ls-2); border:1px solid var(--c-swatch-border); padding:5px 8px; color:var(--c-muted); text-transform:none; }

/* hide WooCommerce's "Have a coupon?" toggle on checkout (prototype has none) */
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle { display:none !important; }

/* tidy the login/register reminder block spacing on checkout */
.woocommerce-checkout .woocommerce-form-login-toggle { display:none !important; }

/* ============================================================
   MY ACCOUNT / ORDERS — CLASE
   ============================================================ */
.page-wrap.account { padding-top: 48px; }
.account__head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:1px solid var(--c-ink); padding-bottom:22px; }
.account__title { font-size: var(--fs-30); letter-spacing: var(--ls-3); text-transform:uppercase; font-weight:600; margin:0; }
.account__hi { font-size: var(--fs-12); letter-spacing: var(--ls-1); color: var(--c-muted); text-transform:uppercase; }
.account__hi b { color: var(--c-ink); font-weight:600; }
.account__logout { text-decoration:underline; }

.account-row { display:flex; gap:48px; align-items:flex-start; margin-top:36px; }
.account-nav { flex:0 0 220px; display:flex; flex-direction:column; border-top:1px solid var(--c-line); }
.account-nav__link { display:block; padding:16px 0; border-bottom:1px solid var(--c-line); font-size: var(--fs-12); letter-spacing: var(--ls-4); text-transform:uppercase; font-weight:500; color: var(--c-muted); }
.account-nav__link.is-active { color: var(--c-ink); font-weight:700; }
.account-nav__link:hover { color: var(--c-ink); }
.account-nav__link--logout { color: var(--c-faint); }
.account-content { flex:1; min-width:0; }

/* dashboard */
.account-dash__lead { font-size: var(--fs-13); letter-spacing:0.02em; line-height:1.8; color: var(--c-muted); margin:0 0 30px; max-width:560px; }
.account-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.account-card { border:1px solid var(--c-line-2); padding:26px 26px 22px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s ease; }
.account-card:hover { border-color: var(--c-ink); }
.account-card__title { font-size: var(--fs-13); letter-spacing: var(--ls-4); text-transform:uppercase; font-weight:700; }
.account-card__meta { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-muted); text-transform:uppercase; }
.account-card__cta { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform:uppercase; font-weight:500; margin-top:12px; }
.account-card--shop { background: var(--c-card); border-color: var(--c-card); }

/* orders list */
.orders-list { display:flex; flex-direction:column; }
.order-card { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:28px 0; border-top:1px solid var(--c-line); }
.order-card:first-child { border-top:none; }
.order-card__main { flex:1; min-width:0; }
.order-card__top { display:flex; align-items:center; gap:16px; }
.order-card__no { font-size: var(--fs-13); letter-spacing: var(--ls-3); text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--c-ink); padding-bottom:2px; }
.order-card__meta { font-size: var(--fs-12); letter-spacing: var(--ls-1); text-transform:uppercase; color: var(--c-muted); margin-top:14px; }
.order-card__thumbs { display:flex; gap:10px; margin-top:18px; }
.order-card__thumb { width:64px; aspect-ratio:4/5; background: var(--c-card); overflow:hidden; flex:0 0 auto; }
.order-card__thumb img { width:100%; height:100%; object-fit:cover; }
.order-card__actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:0 0 auto; }
.order-card__action { font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform:uppercase; color: var(--c-muted); text-decoration:underline; }
.orders-pagination { display:flex; gap:14px; margin-top:30px; }

/* status pill */
.order-status { font-size: var(--fs-10); letter-spacing: var(--ls-3); text-transform:uppercase; font-weight:600; padding:5px 10px; border:1px solid var(--c-line-3); color: var(--c-muted); white-space:nowrap; }
.order-status--processing { border-color:#0a7d33; color:#0a7d33; }
.order-status--completed { border-color: var(--c-ink); color: var(--c-ink); }
.order-status--on-hold { border-color:#b8860b; color:#b8860b; }
.order-status--pending { border-color: var(--c-faint); color: var(--c-faint); }
.order-status--cancelled, .order-status--failed, .order-status--refunded { border-color:#b00020; color:#b00020; }

/* order detail */
.order-detail__back { display:inline-block; margin-bottom:24px; }
.order-detail__head { display:flex; align-items:center; gap:16px; }
.order-detail__no { font-size: var(--fs-22); letter-spacing: var(--ls-3); text-transform:uppercase; font-weight:700; }
.order-detail__meta { font-size: var(--fs-12); letter-spacing: var(--ls-1); text-transform:uppercase; color: var(--c-muted); margin-top:12px; }
.order-detail__items { border-top:1px solid var(--c-line); margin-top:28px; padding-top:6px; }
.order-detail__totals { border-top:1px solid var(--c-ink); margin-top:18px; padding-top:18px; max-width:360px; margin-left:auto; }
.order-detail__totals .summary__row { margin-top:10px; }
.order-detail__grand { border-top:1px solid var(--c-line); margin-top:14px; padding-top:14px; }
.order-detail__grand span { font-weight:700; color: var(--c-ink) !important; font-size: var(--fs-15); }
.order-detail__addresses { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:40px; border-top:1px solid var(--c-line); padding-top:28px; }
.order-detail__addr-title { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform:uppercase; font-weight:700; margin-bottom:12px; }
.order-detail__addr-body { font-size: var(--fs-12); letter-spacing:0.02em; line-height:1.9; color:#3a3a3a; font-style:normal; }
.order-detail__notes { margin-top:36px; }
.order-note { border-top:1px solid var(--c-line); padding:16px 0; }
.order-note__meta { font-size: var(--fs-10); letter-spacing: var(--ls-2); text-transform:uppercase; color: var(--c-faint); }
.order-note__body { font-size: var(--fs-12); line-height:1.7; color: var(--c-ink); margin-top:6px; }

/* login / register */
.account-auth { max-width:920px; }
.account-auth--two { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.account-auth__col--reg { border-left:1px solid var(--c-line); padding-left:56px; }
.account-auth__title { font-size: var(--fs-15); letter-spacing: var(--ls-5); text-transform:uppercase; font-weight:600; }
.account-auth__form { margin-top:24px; }
.account-auth__form label { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-muted); }
.account-auth__lost { display:inline-block; margin-top:16px; font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform:uppercase; color: var(--c-muted); text-decoration:underline; }
.account-auth__reg-note { font-size: var(--fs-11); letter-spacing: var(--ls-1); line-height:1.8; color: var(--c-muted); margin-top:18px; }

/* WooCommerce edit-account / edit-address default forms → CLASE */
.woocommerce-EditAccountForm, .woocommerce-address-fields, .edit-account { max-width:620px; }
.account-content fieldset { border:1px solid var(--c-line); padding:24px; margin:28px 0 0; }
.account-content legend { font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform:uppercase; font-weight:700; padding:0 8px; }
.account-content h3 { font-size: var(--fs-12); letter-spacing: var(--ls-5); text-transform:uppercase; font-weight:700; margin:0 0 18px; }
.woocommerce-MyAccount-content .woocommerce-Address { margin-top:18px; }
.woocommerce-MyAccount-content address { font-style:normal; font-size: var(--fs-12); line-height:1.9; color:#3a3a3a; }
.woocommerce-MyAccount-content .edit { display:inline-block; margin-top:10px; font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform:uppercase; text-decoration:underline; }
.u-columns.addresses .col-1, .u-columns.addresses .col-2 { margin-top:8px; }
.addresses .col-1, .addresses .col-2 { display:inline-block; vertical-align:top; width:48%; }
.password-input { display:block; }

@media (max-width:768px){
  .page-wrap.account { padding-left: var(--pad-x-mobile); padding-right: var(--pad-x-mobile); }
  .account-row { flex-direction:column; gap:24px; }
  .account-nav { flex:1 1 auto; width:100%; flex-direction:row; flex-wrap:wrap; gap:0 18px; border-top:none; }
  .account-nav__link { padding:10px 0; border-bottom:none; }
  .account-cards { grid-template-columns:1fr; }
  .order-card { flex-direction:column; gap:16px; }
  .order-card__actions { flex-direction:row; align-items:center; gap:18px; }
  .order-detail__addresses { grid-template-columns:1fr; gap:24px; }
  .order-detail__totals { max-width:none; }
  .account-auth--two { grid-template-columns:1fr; gap:36px; }
  .account-auth__col--reg { border-left:none; border-top:1px solid var(--c-line); padding-left:0; padding-top:36px; }
  .addresses .col-1, .addresses .col-2 { width:100%; }
}

/* ---- account: heading tags (WooCommerce uses h2/h3), address title row, password toggle ---- */
.account-content h2, .account-content h3 { font-size: var(--fs-13); letter-spacing: var(--ls-5); text-transform:uppercase; font-weight:700; margin:0 0 16px; }
.woocommerce-Address-title.title { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.woocommerce-Address-title.title h2, .woocommerce-Address-title.title h3 { margin:0; }
.woocommerce-Address { margin-bottom:8px; }
.password-input { position:relative; display:block; }
.show-password-input { position:absolute; right:0; top:50%; transform:translateY(-50%); width:auto; height:auto; cursor:pointer; }
.show-password-input::after { content:'Show'; font-size: var(--fs-10); letter-spacing: var(--ls-2); text-transform:uppercase; color: var(--c-muted); }
.show-password-input.display-password::after { content:'Hide'; }

/* ============================================================
   MOBILE — product images on pure white (no grey letterbox/border)
   Applies to cart, mini-cart (bag), checkout summary, thank-you/order,
   PDP gallery and the size-guide model image. Scale-down, never crop.
   ============================================================ */
@media (max-width:768px){
  .pdp__media,
  .cart-line__media,
  .bag-line__media,
  .summary-line__media,
  .thanks-line__media,
  .sg-model__img,
  .order-card__thumb {
    background:#fff !important;
  }
  .pdp__media img,
  .cart-line__media img,
  .bag-line__media img,
  .summary-line__media img,
  .thanks-line__media img,
  .sg-model__img img,
  .order-card__thumb img {
    object-fit:contain !important;
    padding:0 !important;
  }
}

/* ============================================================
   OUT OF STOCK — sold-out badge + states (grid, reel, PDP)
   ============================================================ */
.product-card__media, .reel-card__media, .pdp__media { position: relative; }
.clase-oos-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--c-ink); color: #fff;
  font-size: var(--fs-9); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: 600;
  padding: 5px 9px; white-space: nowrap;
}
/* Coming Soon reads as anticipation, not a dead end — outlined rather than solid. */
.clase-oos-badge--soon { background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
[data-card].is-oos .product-card__img { opacity: 0.5; }
.reel-card .clase-oos-badge + .reel-card__img,
[data-card].is-oos .product-card__img { filter: grayscale(0.1); }
.product-card__oos {
  display: inline-block; margin-top: 16px;
  font-size: var(--fs-13); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 500;
  color: var(--c-faint); border-bottom: 1px solid var(--c-line-2); padding-bottom: 3px;
}
.btn-primary.pdp__soldout { background: #bdbdbd; cursor: not-allowed; }

/* ============================================================
   LIFESTYLE REEL — draggable (click/press-drag + swipe)
   ============================================================ */
.life__track { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.life__track.is-dragging { cursor: grabbing; }
.life__track.is-dragging .life-card__cta { pointer-events: none; }
.life-card__img { -webkit-user-drag: none; user-drag: none; }

/* ============================================================
   SPRINT 1 — UX AUDIT REMEDIATION (accessibility + mobile-first)
   Appended last so mobile/media overrides win the cascade.
   ============================================================ */

/* R11 — Skip to content (bypass blocks / WCAG 2.4.1) */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 3000;
  background: var(--c-black); color: #fff; padding: 10px 16px;
  font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase;
  text-decoration: none; transition: top .16s ease;
}
.skip-link:focus { top: 8px; }
.skip-target { display: block; height: 0; overflow: hidden; }
.skip-target:focus, .skip-target:focus-visible { outline: none !important; }

/* R4 — Visible keyboard focus (keyboard-only; mouse click stays clean).
   !important beats theme/WooCommerce `outline:none` rules that would otherwise
   suppress the ring on higher-specificity selectors (e.g. checkout inputs). */
:focus-visible { outline: 2px solid var(--c-ink) !important; outline-offset: 2px !important; }
.mobile-menu :focus-visible,
.splash :focus-visible,
.site-header--overlay :focus-visible,
.overlay :focus-visible,
.bag-drawer :focus-visible { outline-color: #fff !important; }

/* R1 + F3 — 16px form fields at EVERY width. Stops iOS Safari zoom-on-focus on
   mobile and keeps desktop inputs consistent with mobile (was mobile-only, so
   desktop rendered at 13px). !important is used deliberately to beat
   WooCommerce's higher-specificity `.woocommerce form .form-row input.input-text`
   base rule. Text-entry fields only (checkboxes/radios don't zoom). */
.input-line, .input-underline, .field__input, .select, .select-line,
.contact-form__textarea, .site-footer__form input,
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select,
.woocommerce .quantity input.qty, input[type=number],
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=url], textarea, select { font-size: 16px !important; }

/* PDP — horizontal swipe gallery on mobile (replaces the vertical stack) */
.pdp__dots { display: none; justify-content: center; gap: 8px; margin-top: 12px; }
.pdp__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-3);
  transition: background .2s ease, transform .2s ease; }
.pdp__dot.is-on { background: var(--c-ink); transform: scale(1.15); }
@media (max-width: 768px) {
  .pdp__gallery {
    display: flex; grid-template-columns: none; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .pdp__gallery::-webkit-scrollbar { display: none; }
  .pdp__gallery > div { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; }
  .pdp__dots { display: flex; }
}

/* R8 — respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .splash__logo, .splash__bar span, .splash__tag { animation: none !important; opacity: 1; }
  .pdp__gallery { scroll-snap-type: none; }
}

/* ============================================================
   SPRINT 2 — UX AUDIT REMEDIATION (tap targets, sticky ATC,
   heading semantics, checkout density)
   ============================================================ */

/* R5 — semantic headings retain their exact visual (neutralise UA margins) */
h1.hero__title, h1.shop-hero__intro-title, h2.reel__head-title { margin: 0; }
h1.pdp__name, h2.product-card__name { margin-bottom: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* R3 — sticky mobile Add To Bag (hidden on desktop; slides up on scroll) */
.pdp-sticky { display: none; }
@media (max-width: 768px) {
  .pdp-sticky {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: #fff; border-top: 1px solid var(--c-line-2);
    padding: 10px var(--pad-x-mobile); box-shadow: 0 -8px 22px rgba(0,0,0,0.10);
    transform: translateY(110%); transition: transform .26s ease; pointer-events: none;
  }
  .pdp-sticky.is-on { transform: translateY(0); pointer-events: auto; }
  .pdp-sticky__info { display: flex; flex-direction: column; flex: 0 0 auto; max-width: 34%; }
  .pdp-sticky__name { font-size: var(--fs-10); letter-spacing: var(--ls-1); text-transform: uppercase; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp-sticky__price { font-size: var(--fs-11); font-weight: 500; margin-top: 3px; }
  .pdp-sticky__act { flex: 1; display: flex; gap: 8px; align-items: stretch; }
  .pdp-sticky__select-wrap { position: relative; flex: 0 0 86px; }
  .pdp-sticky__select-wrap .select-caret { right: 10px; }
  .pdp-sticky__size {
    width: 100%; height: 48px; appearance: none; -webkit-appearance: none;
    border: 1px solid var(--c-line-3); background: #fff; padding: 0 22px 0 10px;
    font-family: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: var(--ls-2);
    color: var(--c-ink); border-radius: 0; cursor: pointer;
  }
  .pdp-sticky__add {
    flex: 1; min-height: 48px; background: var(--c-black); color: #fff; border: none;
    font-family: inherit; font-size: var(--fs-12); letter-spacing: var(--ls-3);
    text-transform: uppercase; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  /* keep the fixed bar from covering the footer/last content */
  main[data-shop] { padding-bottom: 0; }
  .pdp { margin-bottom: 8px; }
}

/* R2 — tap targets ≥44px on mobile (hit-area only; glyphs unchanged) */
@media (max-width: 768px) {
  .qty-btn { min-width: 44px; min-height: 44px; padding: 0; }
  .cart-line__qty { gap: 8px; }
  .cart-line__actions { gap: 8px; }
  .cart-line__icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .atc-sizes__row { gap: 4px 6px; }
  .atc-size { min-height: 44px; padding: 10px 10px; display: inline-flex; align-items: center; }
  .product-card__atc { min-height: 44px; padding: 12px 0; display: inline-flex; align-items: center; }
  .filter-bar__btn { min-height: 44px; }
  .reel__ctrl { min-height: 44px; }
  .reel__arrow { min-height: 44px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .pdp__wish { min-height: 52px; }
  .pdp__crumb { min-height: 40px; display: inline-flex; align-items: center; }
  .pdp__size-link { padding: 10px 0; min-height: 40px; display: inline-flex; align-items: center; }
  .bag-line__remove { min-height: 40px; padding: 8px 0; display: inline-flex; align-items: center; }
  .refine-opt, .sort-opt { min-height: 44px; padding: 4px 0; }
  .refine-opt input, .sort-opt input { width: 18px; height: 18px; }
  .site-footer__link { padding: 7px 0; }
  .site-footer__list { gap: 2px; }
  .mobile-menu__link { min-height: 60px; }
}

/* R12 — tighten mobile checkout density (shorter, more scannable form) */
@media (max-width: 768px) {
  .woocommerce form .form-row { margin: 0 0 14px; }
  .field { margin-top: 16px; }
  .form-grid { gap: 16px; }
  .woocommerce .form-row label, .woocommerce-checkout label { margin-bottom: 5px; }
}

/* R2 (cont.) — invisible hit-expanders for visually-constrained controls
   (real ≥44px touch area, no layout change) + header control tap sizing.
   The reel "+" sign gets a real min-size box instead of an upward expander,
   since the product-image link (position:relative) paints above the bar and
   would otherwise capture taps meant for the toggle. */
/* NOTE: .ann__close is deliberately NOT in this list — it is position:absolute
   (pinned right:18px in the announcement bar), which already anchors its
   ::before hit-expander. Setting it relative here knocked it out of the corner
   and left it inline beside the centered text. */
.life-card__cta,
.site-header__burger, .site-header__logo,
.btn-link[data-action="bag"], .btn-link[data-action="login"] { position: relative; }
.reel-card__sign { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -6px 0; }
.life-card__cta::before { content: ""; position: absolute; top: -16px; left: -12px; right: -14px; bottom: -12px; }
@media (max-width: 768px) {
  .ann__close::before,
  .site-header__burger::before,
  .site-header__logo::before,
  .btn-link[data-action="bag"]::before,
  .btn-link[data-action="login"]::before { content: ""; position: absolute; top: -14px; left: -12px; right: -12px; bottom: -14px; }
}

/* ============================================================
   SPRINT 3 — search (R10), breadcrumbs (R13), wishlist (R7)
   ============================================================ */

/* R10 — header search button (inherits header colour: white on overlay) */
.site-header__search { background: none; border: 0; cursor: pointer; color: inherit;
  padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
@media (max-width: 768px) { .site-header__search { min-width: 44px; min-height: 44px; } }

/* R10 — search overlay */
.modal--search { width: 620px; max-width: 100%; padding: 44px 44px 40px; }
.modal__eyebrow { font-size: var(--fs-11); letter-spacing: var(--ls-6); text-transform: uppercase; color: var(--c-muted); margin-bottom: 18px; }
.search-form { display: flex; gap: 12px; align-items: stretch; border-bottom: 1px solid var(--c-ink); }
.search-form__input { flex: 1; border: 0; outline: none; background: none; font-family: inherit;
  font-size: var(--fs-16); letter-spacing: var(--ls-1); color: var(--c-ink); padding: 8px 0; }
.search-form__submit { background: var(--c-black); color: #fff; border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-11); letter-spacing: var(--ls-5); text-transform: uppercase; font-weight: 500; padding: 12px 26px; }
.search-form__hint { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-faint); margin-top: 16px; }

/* R10 — shop search-active chip + empty results */
.shop-search-chip { display: inline-flex; align-items: center; gap: 10px; margin-left: 16px;
  font-size: var(--fs-11); letter-spacing: var(--ls-2); text-transform: uppercase; color: var(--c-muted); }
.shop-search-chip__clear { background: none; border: 0; border-bottom: 1px solid var(--c-line-3); cursor: pointer;
  font-family: inherit; font-size: var(--fs-10); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--c-ink); padding: 0 0 2px; }
.shop-empty { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 70px var(--pad-x) 90px; text-align: center; }

/* R13 — PDP breadcrumbs */
.pdp__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pdp__crumb-link { background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--c-muted);
  font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 500; padding: 4px 0; }
.pdp__crumb-link:hover { color: var(--c-ink); }
.pdp__crumb-sep { color: var(--c-line-3); font-size: var(--fs-11); }
.pdp__crumb-current { color: var(--c-ink); font-size: var(--fs-11); letter-spacing: var(--ls-4); text-transform: uppercase; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* R7 — wishlist ♡ toggles */
[data-card] { position: relative; }
.product-card__wish { position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.86); color: var(--c-ink); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.product-card__wish.is-on { color: var(--c-ink); background: #fff; }
.pdp__wish.is-on { background: var(--c-ink); color: #fff; }

.wishlist-empty { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 70px 0; text-align: center; }
.wishlist-empty__text { font-size: var(--fs-12); letter-spacing: var(--ls-5); text-transform: uppercase; color: var(--c-muted); }

/* R7 — cart "Wish List" tab (now a button) + panel */
.cart-tabs__tab { background: none; border: 0; border-bottom: 2px solid var(--c-ink); font-family: inherit;
  cursor: pointer; color: var(--c-ink); padding: 0 0 18px; margin-bottom: -19px; }
.cart-tabs__tab--off { border-bottom: 0; color: var(--c-faint); font-weight: 500; padding-bottom: 0; margin-bottom: 0; }
.wishlist-panel { margin-top: 40px; }
.wishlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.wishlist-card { display: flex; flex-direction: column; }
.wishlist-card__media { display: block; background: var(--c-card); aspect-ratio: 4/5; overflow: hidden; }
.wishlist-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wishlist-card__name { font-size: var(--fs-13); letter-spacing: var(--ls-2); text-transform: uppercase; font-weight: 700; margin-top: 16px; }
.wishlist-card__price { font-size: var(--fs-11); letter-spacing: var(--ls-1); color: var(--c-muted); margin-top: 6px; }
.wishlist-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.wishlist-card__remove { background: none; border: 0; border-bottom: 1px solid var(--c-line-3); cursor: pointer; font-family: inherit;
  font-size: var(--fs-11); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--c-muted); padding: 0 0 2px; }
.wishlist-card__remove:hover { color: var(--c-ink); }
@media (max-width: 768px) {
  .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .product-card__wish { width: 44px; height: 44px; }
  .search-form__submit { padding: 12px 18px; }
}
@media (max-width: 460px) { .wishlist-grid { grid-template-columns: 1fr; } }

/* ============================================================
   F3 — TAP-TARGET & INPUT SWEEP (AAA target size 2.5.5 + input consistency)
   • Footer links + the join → button get a real ≥44px tap box (were ~14–28px),
     so they clear the target-size floor as measured, not just via a hit-expander.
   • Checkboxes/radios: 18px control inside single-line rows lifted to ≥44px;
     font-size:16px on the control keeps them out of the iOS-zoom heuristic
     without changing their rendered size.
   (The 16px text-input rule above now applies at every width — desktop too.)
   ============================================================ */

/* footer interactive controls → real ≥44px box */
.site-footer__list a, .site-footer__link {
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-footer__form button {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 0 8px;
}

/* checkboxes & radios: 18px control, dark accent, 16px font (zoom heuristic) */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--c-ink); cursor: pointer; font-size: 16px;
}
/* single-line control+label rows → ≥44px tap target */
.refine-opt, .sort-opt, .radio-item, .check-item, .check-row, .sg-unit,
.pay-method__left, .modal__consent, .consent { min-height: 44px; }