/* ============================================================
   PRODUCT PAGE (t-shirts.html) — builds on v2.css
   Same tokens, fonts and square 10px-gap tiles as the home page.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pdp { padding-top: 80px; }              /* clears the fixed header */
.pdp em { font-style: italic; }

/* ---------- Shared bits ---------- */
.pdp-section {
  padding: clamp(60px, 9vw, 130px) var(--gutter);
  border-top: 1px solid var(--line);
}
.pdp-section .section-head { max-width: 760px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--indigo); color: #fff;
  font-family: var(--mono); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.22em;
  padding: 18px 26px;
  transition: background .35s var(--ease);
}
.btn-primary:hover { background: var(--charcoal); }
.btn-primary span { transition: transform .4s var(--ease); }
.btn-primary:hover span { transform: translateX(6px); }

/* ============================================================
   HERO — product stage + details
   ============================================================ */
.pdp-hero { padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(70px, 9vw, 130px); }

.pdp-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--narrow); font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--neutral-400);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.pdp-crumbs a { transition: color .3s var(--ease); }
.pdp-crumbs a:hover { color: var(--indigo); }
.pdp-crumbs [aria-current] { color: var(--charcoal); }

.pdp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}

/* Stage: the product photo is recoloured live — tint layer = colour, masked to the
   garment's shape, multiplied over the white photo so folds and shadows stay.
   The page sets the photo and its shading map on the stage: --photo, --photo-shade. */
.pdp-stage {
  --garment: #ffffff;
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 62% at 50% 44%, #ffffff 0%, rgba(255,255,255,0) 72%),
    #ebe9e3;
}
.pdp-stage-tag {
  position: absolute; top: 18px; left: 20px;
  font-size: 10.5px; letter-spacing: 0.2em; color: #77746d;
}
.pdp-photo { position: relative; width: 96%; aspect-ratio: 4 / 3; }
.pdp-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 24px rgba(20, 20, 30, 0.16));
  transition: filter .6s var(--ease);
}
.pdp-photo-tint {
  position: absolute; inset: 0;
  background-color: var(--garment);
  -webkit-mask: var(--photo) center / contain no-repeat;
          mask: var(--photo) center / contain no-repeat;
  mix-blend-mode: multiply;
  transition: background-color .6s var(--ease);
}
/* Dark shades lose the folds under multiply, so a grey shading map made from the
   same photo (mid-grey = flat fabric) is soft-lit on top to bring folds and sheen back. */
.pdp-photo-shade {
  position: absolute; inset: 0;
  background: var(--photo-shade) center / contain no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.pdp-stage.is-dark .pdp-photo-shade { opacity: 1; }
.pdp-stage.is-dark .pdp-photo img { filter: drop-shadow(0 26px 24px rgba(20, 20, 30, 0.2)); }

/* ---------- Photo / 3D switch + 3D layer (product-3d.js) ---------- */
.pdp-stage-tag { z-index: 4; }
.pdp-view-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: flex;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.view-btn {
  padding: 9px 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #6b6b6b;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.view-btn:hover { color: var(--charcoal); }
.view-btn.is-active { background: var(--charcoal); color: #fff; }
.view-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pdp-stage.is-3d-failed .pdp-view-toggle { display: none; }   /* no WebGL or failed load: photo only */

.pdp-3d { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .6s var(--ease); }
.pdp-3d model-viewer { display: block; width: 100%; height: 100%; --poster-color: transparent; }
.pdp-3d model-viewer::part(default-progress-bar) { background-color: var(--indigo); height: 2px; }
.pdp-photo { transition: opacity .6s var(--ease); }
.pdp-stage.is-3d.is-3d-ready .pdp-3d { opacity: 1; }
.pdp-stage.is-3d.is-3d-ready .pdp-photo { opacity: 0; }

/* while the 3D viewer loads: a thin bar sweeping the top of the stage */
.pdp-stage.is-loading::after {
  content: ''; position: absolute; top: 0; left: 0; z-index: 5;
  width: 32%; height: 2px; background: var(--indigo);
  animation: pdpLoad 1.1s var(--ease) infinite;
}
@keyframes pdpLoad { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

/* AR button — a bar under the stage, shown (product-3d.js) only in 3D on phones that can do AR */
.ar-btn {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  width: 100%;                     /* buttons shrink to their text unless told otherwise */
  padding: 17px 18px;
  background: var(--charcoal); color: #fff; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .3s var(--ease);
}
.ar-btn[hidden] { display: none; }
.ar-btn:hover { background: var(--indigo); }
.ar-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.pdp-credit { margin-top: 12px; font-size: 12px; color: #8a8780; }
.pdp-credit a { border-bottom: 1px solid currentColor; transition: color .3s var(--ease); }
.pdp-credit a:hover { color: var(--indigo); }

/* Colour swatches */
.pdp-swatches { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.pdp-opt-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; padding: 0; }
.pdp-opt-label .mono { font-size: 10.5px; letter-spacing: 0.2em; color: var(--neutral-400); }
#pdpColourName { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: block; cursor: pointer; }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch-chip {
  display: block; width: 34px; height: 34px;
  background: var(--c);
  border: 1px solid rgba(0, 0, 0, 0.14);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.swatch:hover .swatch-chip { transform: translateY(-2px); }
.swatch input:checked + .swatch-chip { box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--charcoal); }
.swatch input:focus-visible + .swatch-chip { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--indigo); }
.pdp-note { margin-top: 14px; font-size: 0.92rem; color: #6b6b6b; }

/* Wider screens: swatches become a vertical rail beside the stage
   (the colour name already shows in the stage's corner tag) */
@media (min-width: 601px) {
  .pdp-media {
    container-type: inline-size;      /* lets the swatch size follow the space available */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "viewer rail" "note ." "design ." "credit .";
    column-gap: 14px;
    align-items: start;
  }
  .pdp-viewer { grid-area: viewer; min-width: 0; }   /* stage + AR button stay together */
  .pdp-art { grid-area: design; min-width: 0; }
  .pdp-swatches {
    grid-area: rail; margin: 0;
    /* largest swatch (max 34px) that keeps all nine within the stage's height */
    --sw: clamp(22px, calc(8.89cqi - 13.2px), 34px);
  }
  .swatch-chip { width: var(--sw); height: var(--sw); }
  .pdp-note { grid-area: note; }
  .pdp-credit { grid-area: credit; }
  .pdp-swatches .pdp-opt-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .swatch-row { flex-direction: column; flex-wrap: nowrap; }
  .swatch:hover .swatch-chip { transform: translateX(-2px); }
}

/* ---------- Artwork on the garment (product-design.js) ---------- */
.pdp-art { margin-top: 18px; }
.pdp-art [hidden] { display: none !important; }
/* empty = nothing added yet · summary = artwork on, not editing · editing = the editor */
.pdp-art[data-state="empty"] .art-summary,
.pdp-art[data-state="empty"] .art-editor,
.pdp-art[data-state="summary"] > .art-drop,
.pdp-art[data-state="summary"] .art-editor,
.pdp-art[data-state="editing"] > .art-drop,
.pdp-art[data-state="editing"] .art-summary,
.pdp-art[data-count="0"] .art-tools,
.pdp-art[data-count="0"] #artList,
.pdp-art:not([data-count="0"]) .art-drop-inline { display: none; }

/* before any artwork: one wide button (the panel and the garment also take dropped files) */
.art-drop {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 14px 20px 14px 14px;
  background: #f4f3ef; border: 1px dashed #c4c0b6; color: var(--charcoal);
  text-align: left; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.art-drop:hover, .pdp-art.is-drop .art-drop { border-color: var(--indigo); background: #efeefa; }
.art-drop:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.art-drop-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--charcoal); color: #fff;
  transition: background .3s var(--ease);
}
.art-drop:hover .art-drop-icon { background: var(--indigo); }
.art-drop-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.art-drop strong { font-family: var(--display); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.01em; }
.art-drop .mono { font-size: 10.5px; letter-spacing: 0.16em; color: #8a8780; }
.art-drop-arrow { margin-left: auto; font-size: 1.1rem; transition: transform .4s var(--ease); }
.art-drop:hover .art-drop-arrow { transform: translateX(5px); }
.pdp-art.is-busy .art-drop { pointer-events: none; opacity: 0.6; }
.art-drop-inline { padding: 10px 14px 10px 10px; background: #fff; }
.art-drop-inline .art-drop-icon { width: 38px; height: 38px; }

/* summary: the artwork on the garment, and the way back into the editor */
.art-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 12px 12px 14px; background: #f4f3ef;
}
.art-edit span { transition: transform .4s var(--ease); }
.art-edit:hover span { transform: translateX(4px); }

/* the editor */
.art-editor { background: #f4f3ef; }
.art-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.art-title { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.art-done { padding: 10px 16px; }
.art-section { padding: 14px 16px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.art-section:last-child { border-bottom: 0; }

.art-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.art-thumb {
  display: grid; place-items: center; width: 54px; height: 54px; padding: 6px;
  background: var(--art-bg, #fff);           /* the garment colour, so the thumbnail reads as printed */
  border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.art-thumb img { max-width: 100%; max-height: 100%; }
.art-thumb[aria-pressed="true"] { border-color: var(--charcoal); box-shadow: 0 0 0 1px var(--charcoal); }
.art-summary .art-thumb[aria-pressed="true"] { border-color: rgba(0, 0, 0, 0.12); box-shadow: none; }
.art-thumb:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.art-add { background: transparent; border-style: dashed; border-color: #b9b5ab; color: var(--charcoal); }
.art-add:hover { border-color: var(--indigo); color: var(--indigo); }

.art-field { border: 0; margin: 0; padding: 14px 0 0; min-width: 0; }
.art-tools > .art-field:first-child { padding-top: 0; }
.art-field-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; margin-bottom: 10px; padding: 0;
}
legend.art-field-head { float: left; }                      /* a legend otherwise sits on the fieldset's edge */
legend.art-field-head + * { clear: both; }
.art-field-head .mono { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--neutral-400); }
.art-field-value { font-family: var(--display); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--charcoal); }

.art-pos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.art-chip { position: relative; display: block; cursor: pointer; }
.art-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.art-chip span {
  display: block; padding: 10px 6px;
  font-size: 0.86rem; line-height: 1.2; text-align: center;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.art-chip:hover span { border-color: var(--charcoal); }
.art-chip input:checked + span { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.art-chip input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.art-tip { margin-top: 9px; font-size: 0.84rem; color: #77746d; }

.art-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.art-range {
  display: block; width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.art-range::-webkit-slider-runnable-track { height: 2px; background: #cdc9bf; }
.art-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px;
  background: var(--charcoal); border: 2px solid #f4f3ef; box-shadow: 0 0 0 1px var(--charcoal);
}
.art-range:hover::-webkit-slider-thumb { background: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.art-range::-moz-range-track { height: 2px; background: #cdc9bf; }
.art-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 0;
  background: var(--charcoal); border: 2px solid #f4f3ef; box-shadow: 0 0 0 1px var(--charcoal);
}
.art-range:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }

.art-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.9rem; cursor: pointer; }
.art-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--charcoal); }

.art-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.art-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  background: transparent; border: 1px solid var(--charcoal); color: var(--charcoal); cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.art-btn:hover { background: var(--charcoal); color: #fff; }
.art-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.art-btn:disabled { opacity: 0.5; cursor: progress; }
.art-remove { border-color: transparent; padding-inline: 0; color: #77746d; }
.art-remove:hover { background: none; color: #b42318; }
.art-cta .btn-primary { width: 100%; justify-content: center; }
.art-msg { margin-top: 10px; font-size: 0.88rem; color: #b42318; }
.art-msg:empty { display: none; }

/* the colour swatches move into the editor while it's open */
.art-colour:empty { display: none; }
.art-colour .pdp-swatches { margin: 0; }
.art-colour .pdp-opt-label {
  position: static; width: 100%; height: auto; margin: 0 0 10px; overflow: visible; clip: auto; white-space: normal;
  display: flex; justify-content: space-between; align-items: baseline; float: left;
}
.art-colour .pdp-opt-label + * { clear: both; }
.art-colour .pdp-opt-label .mono { text-transform: uppercase; }
.art-colour #pdpColourName { font-size: 0.95rem; }
.art-colour .swatch-row {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; max-width: 360px;
}
.art-colour .swatch-chip { width: 100%; height: auto; aspect-ratio: 1; }
.art-colour .swatch:hover .swatch-chip { transform: translateY(-2px); }
.art-colour .swatch input:checked + .swatch-chip { box-shadow: 0 0 0 2px #f4f3ef, 0 0 0 3px var(--charcoal); }
.art-colour .swatch input:focus-visible + .swatch-chip { box-shadow: 0 0 0 2px #f4f3ef, 0 0 0 4px var(--indigo); }
.art-colour .pdp-note { margin-top: 10px; font-size: 0.84rem; color: #77746d; }

/* on the stage: a one-off gesture hint, and the drop target */
.art-hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 4;
  max-width: calc(100% - 28px); padding: 9px 14px;
  background: rgba(23, 23, 23, 0.86); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translate(-50%, 8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.art-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.pdp-stage.is-drop::before {
  content: ''; position: absolute; inset: 10px; z-index: 5; pointer-events: none;
  border: 2px dashed var(--indigo); background: rgba(67, 56, 202, 0.06);
}

/* view buttons: a picture of the garment from each side, tinted with the chosen colour —
   a column down the left of the builder's 3D view */
.pdp-views {
  position: absolute; left: clamp(12px, 2vw, 32px); top: 50%; z-index: 4; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 6px; padding: 6px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.view-pick {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 76px; padding: 10px 4px 8px;
  background: none; border: 1px solid transparent; color: #6b6b6b; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.view-pick:hover { color: var(--charcoal); border-color: rgba(0, 0, 0, 0.12); }
.view-pick[aria-pressed="true"] { background: #fff; border-color: var(--charcoal); color: var(--charcoal); }
.view-pick:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.view-pick-pic {
  position: relative; display: block; width: 54px; height: 54px;
  background: var(--garment, #fff);
  -webkit-mask: var(--pic) center / contain no-repeat;
          mask: var(--pic) center / contain no-repeat;
}
.view-pick-pic::after {                     /* the picture's shading, multiplied over the colour */
  content: ''; position: absolute; inset: 0;
  background: var(--pic) center / contain no-repeat;
  mix-blend-mode: multiply;
}
.view-pick-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- The builder: once a logo is on, the page becomes a full-screen editor ---------- */
html.pdp-building, html.pdp-building body { overflow: hidden; }   /* the page stays put underneath */
.pdp-hero.is-editing .pdp-hero-grid {
  position: fixed; top: 80px; right: 0; bottom: 0; left: 0; z-index: 90;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 25vw, 420px);
  grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 0;
  background: var(--cream);
}
/* left: the 3D view, edge to edge, with the view buttons down its side */
.pdp-hero.is-editing .pdp-media { position: relative; display: block; min-width: 0; min-height: 0; }
.pdp-hero.is-editing .pdp-viewer { position: absolute; inset: 0; margin: 0; padding: 0; }
.pdp-hero.is-editing .pdp-stage { height: 100%; aspect-ratio: auto; margin: 0; }
.pdp-hero.is-editing .pdp-views { display: flex; }
.pdp-hero.is-editing .pdp-view-toggle,
.pdp-hero.is-editing .pdp-stage-tag { display: none; }          /* 3D only; the colour shows in the panel */
.pdp-hero.is-editing .art-hint { top: 16px; bottom: auto; transform: translate(-50%, -8px); }
.pdp-hero.is-editing .art-hint.is-on { transform: translate(-50%, 0); }
.pdp-hero.is-editing .ar-btn {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  width: auto; margin: 0; padding: 13px 18px;
}
.pdp-hero.is-editing .pdp-credit {
  position: absolute; left: clamp(12px, 2vw, 32px); bottom: 12px; z-index: 4;
  margin: 0; font-size: 11px;
}
/* right: the tools, docked at full height; only the panel scrolls, and only if it must */
.pdp-hero.is-editing .pdp-info {
  min-width: 0; min-height: 0;
  background: #f4f3ef; border-left: 1px solid var(--line);
}
.pdp-hero.is-editing .pdp-info > :not(.pdp-art) { display: none; }
.pdp-hero.is-editing .pdp-art { display: flex; flex-direction: column; height: 100%; margin: 0; }
.pdp-hero.is-editing .art-editor {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #cdc9bf transparent;
}
.pdp-hero.is-editing .art-editor::-webkit-scrollbar { width: 6px; }
.pdp-hero.is-editing .art-editor::-webkit-scrollbar-thumb { background: #cdc9bf; }
.pdp-hero.is-editing .art-head { position: sticky; top: 0; z-index: 2; background: #f4f3ef; }
.pdp-hero.is-editing .art-cta {
  position: sticky; bottom: 0; z-index: 2;
  background: #f4f3ef; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pdp-hero.is-editing .art-msg { margin: 0; padding: 10px 16px; }

/* mid-size screens: keep the garment clear of the view buttons */
@media (max-width: 1100px) {
  .pdp-hero.is-editing .pdp-3d { left: 112px; }
  .pdp-hero.is-editing .art-hint { left: calc(50% + 56px); }
}
/* narrow screens: the 3D view on top, the tools underneath */
@media (max-width: 720px) {
  .pdp-hero.is-editing .pdp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 46fr) minmax(0, 54fr);
  }
  .pdp-hero.is-editing .pdp-info { border-left: 0; border-top: 1px solid var(--line); }
  .pdp-hero.is-editing .pdp-3d { left: 62px; }        /* keeps the garment clear of the view buttons */
  .pdp-hero.is-editing .art-hint { left: calc(50% + 31px); max-width: calc(100% - 80px); white-space: normal; text-align: center; }
  .pdp-hero.is-editing .pdp-credit { left: auto; right: 10px; bottom: 6px; font-size: 10px; text-align: right; }
  .pdp-views { left: 8px; gap: 3px; padding: 4px; }
  .view-pick { width: 50px; gap: 3px; padding: 5px 2px 4px; }
  .view-pick-pic { width: 32px; height: 32px; }
  .view-pick-label { font-size: 8.5px; letter-spacing: 0.1em; }
}

/* Details column */
.pdp-info .eyebrow { color: var(--indigo); margin-bottom: 18px; }
.pdp-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 1; letter-spacing: -0.035em;
}
.pdp-lead { margin-top: 22px; font-size: 1.1rem; color: #555; max-width: 36em; }
.pdp-specs { margin-top: 34px; border-top: 1px solid var(--line); }
.pdp-specs > div {
  display: grid; grid-template-columns: 8.5em 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.pdp-specs dt { font-size: 10.5px; letter-spacing: 0.18em; color: var(--neutral-400); padding-top: 3px; }
.pdp-specs dd { color: var(--charcoal); }
.pdp-specs dd span { white-space: nowrap; }   /* wrap only between items */
.pdp-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }

/* ============================================================
   01 — STYLES (line drawings)
   ============================================================ */
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.style-tile {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.4vw, 32px);
  background: #f4f3ef;
}
.style-num { position: absolute; top: 18px; left: 20px; font-size: 10.5px; color: var(--neutral-400); letter-spacing: 0.2em; }
.style-svg {
  display: block; width: 100%; max-width: 250px; aspect-ratio: 1;
  margin: 8px auto 18px;
  color: var(--charcoal);
  transition: transform .8s var(--ease);
}
.style-svg .o  { fill: #fff; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.style-svg .o2 { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.style-svg .s  { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.style-svg .dash { stroke-dasharray: 3 3; opacity: 0.7; }
.style-svg .f2 { fill: #d9d7cf; stroke: none; }
.style-tile h3 { font-size: clamp(1.4rem, 1.8vw, 1.8rem); }
.style-tile p { margin-top: 8px; color: #555; font-size: 0.98rem; }
@media (hover: hover) {
  .style-tile:hover .style-svg { transform: translateY(-6px) rotate(-2deg); }
}

/* ============================================================
   02 — FABRIC & WEIGHT
   ============================================================ */
.fab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fab-tile { background: #f4f3ef; display: grid; grid-template-rows: auto 1fr; }
.fab-media { aspect-ratio: 16 / 9; overflow: hidden; background: #d9d7cf; }
.fab-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fab-copy { padding: clamp(20px, 2.4vw, 32px); }
.fab-copy h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
.fab-copy p { margin-top: 8px; color: #555; }
.fab-copy .fab-tags { margin-top: 16px; color: var(--indigo); font-size: 10px; letter-spacing: 0.15em; line-height: 1.8; }

.fab-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.fab-more li { background: #f4f3ef; padding: 20px 24px; color: #555; }
.fab-more .mono { display: block; margin-bottom: 8px; font-size: 10.5px; letter-spacing: 0.18em; color: var(--charcoal); }

.weight-guide { margin-top: clamp(44px, 6vw, 72px); }
.weight-title { margin-bottom: 16px; font-size: 10.5px; letter-spacing: 0.2em; color: var(--neutral-400); }
.weight-bar { display: grid; grid-template-columns: 2fr 2fr 3fr; height: 10px; }
.weight-bar span:nth-child(1) { background: #c7d2fe; }
.weight-bar span:nth-child(2) { background: #818cf8; }
.weight-bar span:nth-child(3) { background: var(--indigo); }
.weight-scale { display: grid; grid-template-columns: 2fr 2fr 3fr; margin-top: 16px; list-style: none; }
.weight-scale li { padding: 2px 18px 0 16px; border-left: 1px solid var(--line); }
.weight-scale .mono { display: block; font-size: 10px; letter-spacing: 0.15em; color: var(--indigo); }
.weight-scale strong { display: block; margin-top: 8px; font-family: var(--display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; }
.weight-scale p { margin-top: 4px; color: #555; font-size: 0.95rem; }

/* ============================================================
   03 — BRANDING: print positions + methods
   ============================================================ */
.place-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: 10px; }
.place-figure {
  margin: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px, 3vw, 44px);
  background: #f4f3ef;
}
.place-svg { display: block; width: 100%; height: auto; color: var(--charcoal); }
.place-svg .o { fill: #fff; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.place-svg .s { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.place-svg .dash { stroke-dasharray: 3 3; opacity: 0.6; }
.place-svg .view-label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.25em; text-transform: uppercase;
  fill: var(--neutral-400); text-anchor: middle;
}
.zone {
  fill: rgba(67, 56, 202, 0.04);
  stroke: rgba(67, 56, 202, 0.45); stroke-width: 0.9; stroke-dasharray: 2.5 2.5;
  cursor: pointer;
  transition: fill .4s var(--ease), stroke .4s var(--ease);
}
.zone:hover { fill: rgba(67, 56, 202, 0.12); }
.zone.is-active { fill: rgba(67, 56, 202, 0.26); stroke: var(--indigo); stroke-width: 1.3; stroke-dasharray: none; }

.place-caption { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.place-caption .mono { font-size: 10.5px; letter-spacing: 0.2em; color: var(--indigo); }
.place-caption strong { font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; }
.place-caption span:last-child { color: #555; }

.place-list { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-auto-rows: 1fr; gap: 10px; }   /* options share the diagram's height */
.place-opt { position: relative; display: block; cursor: pointer; }
.place-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.place-opt-body {
  height: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 17px 18px;
  background: #f4f3ef;
  font-family: var(--display); font-weight: 500; letter-spacing: -0.01em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.place-opt-body .mono { font-size: 10px; letter-spacing: 0.15em; color: var(--neutral-400); transition: color .3s var(--ease); }
.place-opt:hover .place-opt-body { background: #ebe9e3; }
.place-opt input:checked + .place-opt-body { background: var(--charcoal); color: #fff; }
.place-opt input:checked + .place-opt-body .mono { color: #a5b4fc; }
.place-opt input:focus-visible + .place-opt-body { outline: 2px solid var(--indigo); outline-offset: 2px; }

.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.method-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 230px;
  padding: clamp(20px, 2.4vw, 30px);
  background: #f4f3ef;
}
.method-tile > .mono { position: absolute; top: 18px; left: 20px; font-size: 10.5px; letter-spacing: 0.2em; color: var(--neutral-400); }
.method-tile h3 { font-size: clamp(1.3rem, 1.6vw, 1.6rem); }
.method-tile p { margin-top: 6px; color: #555; font-size: 0.95rem; }
.method-photo { color: #fff; background: #1a1a1a; }
.method-photo picture { position: absolute; inset: 0; z-index: -2; }
.method-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.method-photo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12,12,16,0.88) 0%, rgba(12,12,16,0.35) 55%, rgba(12,12,16,0.15) 100%);
}
.method-photo p { color: rgba(255, 255, 255, 0.85); }
.method-photo > .mono { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   04 — PRODUCTION photos
   ============================================================ */
.made-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.made-tile { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; background: #1a1a1a; }
.made-tile picture, .made-tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.made-tile img { object-fit: cover; transition: transform .9s var(--ease); }
.made-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,16,0.72) 0%, rgba(12,12,16,0) 46%);
}
.made-tile figcaption {
  position: absolute; left: 20px; bottom: 16px; z-index: 1;
  display: flex; align-items: baseline; gap: 10px;
  color: #fff; font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em;
}
.made-tile figcaption .mono { font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.75); }
@media (hover: hover) {
  .made-tile:hover img { transform: scale(1.05); }
}

/* ============================================================
   05 — ORDER STEPS
   ============================================================ */
.step-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; }
.step-card {
  display: flex; flex-direction: column;
  min-height: 250px;
  padding: clamp(20px, 2.2vw, 28px);
  background: #f4f3ef;
}
.step-n { font-size: 10.5px; letter-spacing: 0.2em; color: var(--indigo); }
.step-card h3 { margin-top: clamp(32px, 4vw, 56px); font-size: clamp(1.25rem, 1.5vw, 1.5rem); }   /* same height in every card */
.step-card p { margin-top: 8px; margin-bottom: 18px; color: #555; font-size: 0.95rem; }
.step-qc {
  align-self: flex-start; margin-top: auto;   /* pinned to the card's foot */
  padding: 5px 9px;
  font-size: 9.5px; letter-spacing: 0.16em; color: var(--indigo);
  border: 1px solid rgba(67, 56, 202, 0.3);
}

/* ============================================================
   06 — FAQ
   ============================================================ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq-wrap .section-head { margin-bottom: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 22px 0;
  list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none;
  font-family: var(--mono); font-size: 1.2rem; color: var(--indigo);
  transition: transform .4s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }
.faq-item p { max-width: 46em; padding-bottom: 22px; color: #555; }

/* ============================================================
   QUOTE
   ============================================================ */
.quote-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 10px; }
.quote-copy, .quote-summary { background: #f4f3ef; padding: clamp(28px, 4vw, 60px); }
.quote-copy .eyebrow { color: var(--indigo); margin-bottom: 18px; }
.quote-summary { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.quote-summary dl > div {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.quote-summary dt { font-size: 10.5px; letter-spacing: 0.18em; color: var(--neutral-400); }
.quote-summary dd { font-family: var(--display); font-weight: 500; display: flex; align-items: center; text-align: right; }
.quote-summary dl > div[hidden] { display: none; }
.quote-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); }
.quote-summary .btn-primary { align-self: flex-start; }
.quote-mail { font-size: 11px; letter-spacing: 0.15em; color: #6b6b6b; text-transform: none; }
.quote-mail:hover { color: var(--indigo); }

/* ============================================================
   PRODUCTS (products.html) — catalogue of line drawings
   ============================================================ */
.cat-intro { padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(40px, 5vw, 70px); }
.cat-intro .eyebrow { color: var(--indigo); margin-bottom: 18px; }
.cat-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cat-jump a {
  padding: 11px 16px;
  background: #f4f3ef; color: var(--charcoal);
  font-family: var(--narrow); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.cat-jump a:hover { background: var(--charcoal); color: #fff; }

.cat-section { padding: clamp(36px, 5vw, 70px) var(--gutter); border-top: 1px solid var(--line); }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3vw, 36px); }
.cat-title { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -0.03em; }
.cat-count { font-size: 11px; letter-spacing: 0.2em; color: var(--neutral-400); }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cat-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(18px, 2vw, 28px);
  background: #f4f3ef; color: var(--charcoal);
  /* keeps the scroll-in fade (.reveal) alongside the hover colour */
  transition: background .35s var(--ease), opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.cat-card .style-svg { max-width: 220px; margin: 4px auto 16px; }
.cat-card h3 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.cat-card p { flex: 1; margin-top: 6px; color: #555; font-size: 0.95rem; }
.cat-action {
  align-self: flex-start; display: inline-flex; gap: 8px; margin-top: 16px;
  font-size: 10.5px; letter-spacing: 0.18em; color: var(--indigo);
}
.cat-action span { transition: transform .4s var(--ease); }
.cat-card a.cat-action:hover span, .cat-card.is-link:hover .cat-action span { transform: translateX(6px); }
.cat-card.is-link:hover { background: #ebe9e3; }
@media (hover: hover) {
  .cat-card:hover .style-svg { transform: translateY(-6px) rotate(-2deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-hero-grid { grid-template-columns: 1fr; }
  .step-row { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .place-wrap { grid-template-columns: 1fr; }
  .place-list { grid-template-columns: repeat(3, 1fr); }
  .faq-wrap { grid-template-columns: 1fr; }
  .quote-card { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .fab-grid { grid-template-columns: 1fr; }
  .fab-more { grid-template-columns: 1fr; }
  .made-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pdp-stage { aspect-ratio: 1 / 1; margin-inline: calc(10px - var(--gutter)); }   /* near edge-to-edge on phones */
  .tag-style { display: none; }   /* colour name only, so it clears the Photo / 3D switch */
  .ar-btn {   /* same edge-to-edge width as the stage */
    margin-inline: calc(10px - var(--gutter));
    width: calc(100% + 2 * (var(--gutter) - 10px));
  }
  .pdp-photo { width: 100%; }
  .pdp-art { margin-inline: calc(10px - var(--gutter)); }   /* same edges as the stage */
  .art-head { padding: 10px 12px; }
  .art-section { padding: 12px 12px 14px; }
  .art-pos-grid { gap: 5px; }
  .art-chip span { padding: 11px 4px; font-size: 0.82rem; }
  .art-sliders { grid-template-columns: 1fr; }
  .art-hint { font-size: 9.5px; letter-spacing: 0.1em; }
  .swatch-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 7px; max-width: 380px; }   /* one row */
  .swatch-chip { width: 100%; height: auto; aspect-ratio: 1; }
  .pdp-specs > div { grid-template-columns: 1fr; gap: 4px; }

  /* tiles sit 10px from the screen edges; headings and text keep the 20px gutter */
  .style-grid, .fab-grid, .fab-more, .place-wrap, .method-grid, .made-grid, .step-row, .quote-card { margin-inline: calc(10px - var(--gutter)); }
  .style-tile { padding: 14px; }
  .style-num { top: 12px; left: 14px; }
  .style-svg { margin: 10px auto 8px; }
  .style-tile h3 { font-size: 1.15rem; }
  .style-tile p { font-size: 0.88rem; }

  .weight-scale { grid-template-columns: 1fr; gap: 14px; }
  .weight-scale li { border-left-width: 3px; }
  .weight-scale li:nth-child(1) { border-left-color: #c7d2fe; }
  .weight-scale li:nth-child(2) { border-left-color: #818cf8; }
  .weight-scale li:nth-child(3) { border-left-color: var(--indigo); }

  .place-list { grid-template-columns: repeat(2, 1fr); }
  .place-opt-body { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 14px; font-size: 0.95rem; }

  .method-tile { min-height: 200px; padding: 14px; }
  .method-tile > .mono { top: 12px; left: 14px; }
  .method-tile h3 { font-size: 1.15rem; }
  .method-tile p { font-size: 0.88rem; }

  .made-tile { aspect-ratio: 1 / 1; }
  .made-tile figcaption { left: 12px; bottom: 10px; font-size: 1rem; }

  .step-row { grid-template-columns: 1fr; }
  .step-card { min-height: 0; }
  .step-card h3 { margin-top: 22px; }

  .cat-grid { margin-inline: calc(10px - var(--gutter)); }
  .cat-card { padding: 14px; }
  .cat-card .style-svg { margin: 6px auto 8px; }
  .cat-card h3 { font-size: 1.1rem; }
  .cat-card p { font-size: 0.88rem; }
}