/* ==========================================================================
   ENHANCE — styles for the variant-6 additions
   ==========================================================================
   Loaded after theme.css, so everything resolves against the variant's own
   tokens. Nothing here introduces a colour of its own.

   All of it is photography-led. There is no drawn figure anywhere: the tee
   cut-outs, the model shots, the cut renders and the print crops are the
   merchandising.
   ========================================================================== */

/* ==========================================================================
   CUT COMPARE — four cuts, side by side, as real renders
   ========================================================================== */
.cutc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
}
.cutc__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 var(--s3);
  border: var(--border-w) solid transparent;
  background: none;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.cutc__cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.cutc__shot {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.cutc__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* the renders sit on a studio ground with air around them; a small scale
     crops that away so four cuts read as four garments, not four postcards */
  transform: scale(1.12);
  /* the garments are white on a near-white studio ground, so anything below
     about 0.8 here erases the unselected cuts entirely. Contrast between
     selected and unselected is carried by the inset rule, not by fading. */
  filter: saturate(0.55) opacity(0.82);
  transition: filter 0.28s ease, transform 0.4s var(--ease, ease);
}
.cutc__cell:hover .cutc__shot img { filter: none; }
.cutc__cell[aria-checked='true'] .cutc__shot img { filter: none; transform: scale(1.16); }
.cutc__cell[aria-checked='true'] .cutc__shot { box-shadow: inset 0 0 0 2px var(--text); }

.cutc__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: var(--s2);
  letter-spacing: 0.01em;
}
.cutc__cell[aria-checked='true'] .cutc__name { color: var(--accent-text); }
.cutc__sits {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.35;
}
.cutc__cell[aria-disabled='true'] { cursor: not-allowed; }
.cutc__cell[aria-disabled='true'] .cutc__shot img { filter: grayscale(1) opacity(0.22); }
.cutc__cell[aria-disabled='true'] .cutc__name,
.cutc__cell[aria-disabled='true'] .cutc__sits { color: var(--text-faint); }

@media (max-width: 35rem) {
  .cutc { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   BEFORE / AFTER — flat mockup vs on a person
   The reference board opens with this, and it is the whole argument for
   shooting on a body.
   ========================================================================== */
.ba {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  overflow: hidden;
  background: var(--surface-2);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.ba__after, .ba__before { position: absolute; inset: 0; }
.ba__after img { width: 100%; height: 100%; object-fit: cover; }
/* Revealed with clip-path, NOT by shrinking the box. Narrowing the element
   re-centres its contents, which slides the flat mockup sideways as you drag
   — the comparison then changes two things at once and proves nothing. */
.ba__before { clip-path: inset(0 50% 0 0); }
.ba__flat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--surface-2);
}
.ba__flat img { height: 88%; width: auto; object-fit: contain; }
.ba__lab {
  position: absolute;
  bottom: var(--s4);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 7px 13px;
  white-space: nowrap;
  z-index: 2;
}
.ba__lab--l { left: var(--s4); background: rgba(255, 255, 255, 0.94); color: var(--text); }
.ba__lab--r { right: var(--s4); background: rgba(11, 11, 13, 0.78); color: #fff; }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 44px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
/* the divider lives on the handle, because the panel no longer has an edge */
.ba__handle::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
}
.ba__handle span {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
  display: grid;
  place-items: center;
}
.ba__handle span::before {
  content: '\2039\203A';
  font-size: 20px;
  letter-spacing: -2px;
  color: var(--text);
}
/* the keyboard and screen-reader path to the same control — a drag handle
   on its own is not operable without a mouse */
.ba__range {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 4;
  opacity: 0;
}
.ba__range:focus-visible { opacity: 1; outline: 2px solid var(--focus); }

/* ==========================================================================
   THE VIRTUAL TRY-ON — a wizard, not a control panel
   ==========================================================================
   One question per screen, centred, with room around it. The old version put
   three tabs, eight thumbnails, two sliders, a checkbox and two number fields
   on screen at once; this shows only what the current decision needs.

   Everything resolves against the variant's own tokens — no colour is
   introduced here.
   ========================================================================== */
.tw {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 11, 13, 0.55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: clamp(0px, 3vw, var(--s5));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease, ease), visibility 0.28s;
}
.tw[data-open='true'] { opacity: 1; visibility: visible; }

.tw__panel {
  position: relative;
  background: var(--bg);
  width: min(760px, 100%);
  max-height: min(94vh, 1000px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ---- bar ----------------------------------------------------------------- */
.tw__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s3);
  background: var(--bg);
}
.tw__kick {
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.tw__back, .tw__x {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
}
.tw__back:hover, .tw__x:hover { color: var(--text); }
.tw__back[hidden], .tw__x[hidden] { visibility: hidden; display: grid; }

/* ---- step ---------------------------------------------------------------- */
.tw__body { padding: 0 clamp(var(--s4), 5vw, var(--s7)) clamp(var(--s5), 5vw, var(--s7)); }
.tw__step { display: flex; flex-direction: column; gap: var(--s3); }
.tw__step[hidden] { display: none; }
.tw__step--center { align-items: center; text-align: center; }

.tw__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
.tw__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  text-wrap: balance;
}
.tw__note {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.55;
  text-align: center;
  max-width: 52ch;
  margin: 0 auto;
}
.tw__err {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: #b4443a;
  border-left: 2px solid currentColor;
  padding-left: var(--s3);
  text-align: left;
}
.tw__err[hidden] { display: none; }

.tw__actions { display: flex; justify-content: center; margin-top: var(--s3); }
.tw__actions--pair { gap: var(--s3); }
.tw__cta, .tw__ghost {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--s3) var(--s7);
  min-width: 190px;
  cursor: pointer;
  border: var(--border-w) solid var(--text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tw__cta { background: var(--text); color: var(--bg); }
.tw__cta:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.tw__ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.tw__ghost:hover { border-color: var(--text); }
.tw__cta:disabled, .tw__out:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- 1 · how ------------------------------------------------------------- */
.tw__choices, .tw__models, .tw__outputs {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s3);
}
.tw__choices { grid-template-columns: repeat(3, 1fr); }
.tw__models, .tw__outputs { grid-template-columns: repeat(2, 1fr); }

.tw__choice, .tw__out, .tw__model {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s4);
  text-align: center;
  align-items: center;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tw__choice:hover, .tw__out:hover:not(:disabled), .tw__model:hover { border-color: var(--text); }
.tw__choice[aria-checked='true'], .tw__model[aria-checked='true'] {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.tw__choice:focus-visible, .tw__out:focus-visible, .tw__model:focus-visible,
.tw__segBtn:focus-visible, .tw__swatch:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* the silhouettes are SVG, so they stay crisp and can inherit colour */
.tw__choiceArt {
  width: 44px; height: 57px;
  margin-bottom: var(--s2);
  fill: var(--text);
  color: var(--text);
  opacity: 0.88;
  display: block;
}
.tw__choice[aria-checked='true'] .tw__choiceArt { opacity: 1; }
.tw__choiceName { font-size: var(--fs-sm); font-weight: 600; }
.tw__choiceNote, .tw__outNote {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.45;
  text-wrap: balance;
}

/* ---- 2a · models --------------------------------------------------------- */
.tw__model { padding: 0; overflow: hidden; gap: 0; }
.tw__model img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.tw__model span {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--s3);
}

/* ---- 2b · the photo ------------------------------------------------------ */
.tw__seg {
  display: inline-flex;
  gap: 0;
  align-self: center;
  border: var(--border-w) solid var(--line-strong);
}
.tw__segBtn {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--s2) var(--s5);
  background: var(--surface);
  color: var(--text-muted);
  border: 0;
  cursor: pointer;
  min-width: 110px;
}
.tw__segBtn[aria-selected='true'] { background: var(--text); color: var(--bg); }

.tw__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 48vh;
  margin: var(--s3) auto 0;
  width: min(360px, 100%);
  background: var(--surface-2);
  overflow: hidden;
}
/* the preview is the photo, and only the photo */
.tw__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw__shot[hidden] { display: none; }
video.tw__shot[data-cam] { transform: scaleX(-1); }   /* a mirror behaves like a mirror */
video.tw__shot[data-clip] { object-fit: contain; background: #000; }

.tw__drop {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
  padding: var(--s5);
  cursor: pointer;
  border: 1px dashed var(--line-strong);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tw__drop[hidden] { display: none; }
.tw__drop:hover, .tw__drop[data-over='true'] { border-color: var(--text); background: var(--surface); }
.tw__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tw__dropIcon {
  width: 34px; height: 26px;
  border: 1.5px solid var(--text-muted);
  position: relative;
}
.tw__dropIcon::after {
  content: '';
  position: absolute;
  left: 5px; right: 5px; bottom: 4px;
  height: 11px;
  background: var(--text-muted);
  clip-path: polygon(0 100%, 32% 34%, 54% 68%, 72% 46%, 100% 100%);
}
.tw__dropName { font-size: var(--fs-sm); font-weight: 600; }
.tw__dropHint { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.45; }

.tw__camoff {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
  padding: var(--s5);
  background: var(--surface-2);
}
.tw__camoff[hidden] { display: none; }
.tw__camoff b { font-size: var(--fs-sm); }
.tw__camoff span { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; max-width: 30ch; }
.tw__camoff small { font-size: var(--fs-micro); color: #b4443a; line-height: 1.45; max-width: 34ch; }
.tw__camoff .tw__ghost { min-width: 0; padding: var(--s2) var(--s4); margin-top: var(--s2); }

.tw__shutter, .tw__retake {
  position: absolute;
  left: 50%;
  bottom: var(--s3);
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--s2) var(--s5);
  border: 0;
  cursor: pointer;
  background: var(--text);
  color: var(--bg);
}
.tw__retake { background: rgba(255, 255, 255, 0.92); color: var(--text); }
.tw__shutter[hidden], .tw__retake[hidden] { display: none; }
.tw__grab { align-self: center; margin-top: var(--s3); }
.tw__grab[hidden] { display: none; }

/* ---- 3 · profile --------------------------------------------------------- */
.tw__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s3);
}
.tw__field { display: flex; flex-direction: column; gap: var(--s2); }
.tw__field span {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.tw__field select {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: var(--s3);
  border: var(--border-w) solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  width: 100%;
}

/* ---- 4 · output ---------------------------------------------------------- */
.tw__garment {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3);
  margin-top: var(--s3);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
}
.tw__garmentShot {
  width: 76px; height: 76px;
  flex: none;
  background: var(--surface-2);
  overflow: hidden;
}
.tw__garmentShot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.tw__garmentMeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tw__garmentMeta b { font-size: var(--fs-sm); font-weight: 600; }
.tw__garmentMeta > span { font-size: var(--fs-micro); color: var(--text-muted); }
.tw__swatches { display: flex; gap: 7px; margin-top: var(--s2); flex-wrap: wrap; }
.tw__swatch {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--dot);
  cursor: pointer;
  padding: 0;
  min-height: 0;
}
.tw__swatch[aria-checked='true'] {
  box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--text);
}

.tw__out { padding: var(--s5) var(--s4); }
.tw__outName { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: var(--display-weight); }
.tw__outCost {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 600;
  margin-top: var(--s2);
}

/* ---- 5 · working --------------------------------------------------------- */
.tw__working {
  position: relative;
  width: min(300px, 80%);
  aspect-ratio: 3 / 4;
  margin: var(--s4) auto 0;
  overflow: hidden;
  background: var(--surface-2);
}
.tw__working img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
/* a line that sweeps the frame — it reads as "being worked on" without a
   spinner, and it is the only thing moving on the screen */
.tw__scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px 3px var(--accent);
  animation: tw-scan 2.4s ease-in-out infinite;
}
@keyframes tw-scan { 0%, 100% { top: 4%; } 50% { top: 96%; } }

/* ---- 6 · result ---------------------------------------------------------- */
.tw__result {
  width: min(380px, 100%);
  margin: var(--s4) auto 0;
  background: var(--surface-2);
  overflow: hidden;
}
.tw__result img, .tw__result video { width: 100%; height: auto; display: block; }
.tw__result img[hidden], .tw__result video[hidden] { display: none; }

/* ---- narrow -------------------------------------------------------------- */
@media (max-width: 40rem) {
  .tw { padding: 0; }
  .tw__panel { max-height: 100vh; height: 100vh; width: 100%; }
  .tw__choices, .tw__fields { grid-template-columns: 1fr; }
  .tw__outputs { grid-template-columns: 1fr; }
  .tw__cta, .tw__ghost { min-width: 0; width: 100%; }
  .tw__actions, .tw__actions--pair { flex-direction: column; width: 100%; }
  .tw__frame { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .tw { transition: none; }
  .tw__scan { animation: none; top: 50%; }
}

/* ==========================================================================
   ARRIVAL DATE — a concrete date under the CTA
   ========================================================================== */
.arrive {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-top: var(--s3);
  color: var(--text-muted);
}
.arrive strong { color: var(--text); font-weight: 600; }
.arrive__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  transform: translateY(-1px);
}

/* ==========================================================================
   QUICK-ADD SIZE RUN
   `.pcard__title a::after` covers the whole card, so anything clickable in
   the card body needs the same z-index: 2 escape `.swatch-dot` uses.
   ========================================================================== */
.pcard__sizes {
  display: flex;
  gap: 4px;
  margin-top: var(--s3);
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.pcard:hover .pcard__sizes,
.pcard:focus-within .pcard__sizes { opacity: 1; transform: none; }
@media (hover: none) { .pcard__sizes { opacity: 1; transform: none; } }

.pcard__size {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 2px;
  border: var(--border-w) solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.pcard__size:hover:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); }
.pcard__size:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  /* struck through rather than hidden, so the run never reflows */
  background: linear-gradient(to bottom left,
    transparent calc(50% - 0.5px), var(--line-strong) 50%, transparent calc(50% + 0.5px));
}

/* ==========================================================================
   PRINT MACRO — gallery slot 3, from the real cropped shot
   ========================================================================== */
.qv__stage[data-macro='true'] img { object-fit: cover; }
.qv__macroTag {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: rgba(11, 11, 13, 0.72);
  color: #fff;
}
.qv__thumb[data-macro='true'] img { object-fit: cover; }

/* ==========================================================================
   LOOKBOOK BAND — the street shots, used as a section rather than a card
   ========================================================================== */
.lookbook { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.lookbook__fig { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.lookbook__fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease, ease);
}
.lookbook__fig:hover img { transform: scale(1.04); }
.lookbook__cap {
  position: absolute;
  left: var(--s4); bottom: var(--s4);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.lookbook__cap b { display: block; font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 400; }
.lookbook__cap span { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
@media (max-width: 40rem) { .lookbook { grid-template-columns: 1fr; } }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pcard__sizes { opacity: 1; transform: none; transition: none; }
  .cutc__shot img, .lookbook__fig img { transition: none; }
  .lookbook__fig:hover img { transform: none; }
}



/* ==========================================================================
   THE PDP'S TRY-ON ROW
   "See it on" is the entry point to the wizard, so it carries the weight of
   a primary action rather than sitting in a row of equal-looking buttons.
   ========================================================================== */
.qv__share { display: flex; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }
.qv__share .btn { flex: 1 1 auto; }

/* the "opened from disk" / "no key" notice — this is the difference between a
   working setup and a broken one, so it does not read as fine print */
.tw__note[data-warn='true'] {
  color: var(--text);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  padding: var(--s3);
  text-align: left;
  max-width: none;
}