/* ============================================================
   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: var(--header-h, 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"] .art-artwork-row,
.pdp-art[data-count="0"] .art-save,
.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-artwork-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }   /* the logos, and "Remove" for the one selected */
.art-artwork-row .art-list { flex: 1; min-width: 0; }
.art-artwork-row .art-remove { flex: 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-finish-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }   /* print or embroidery */
.pdp-art:not(.is-embroidery) .art-finish-tip { display: none; }
.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-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; }
/* the panel's foot: "Save mockup" beside "Request a quote" */
.art-cta { display: flex; gap: 8px; }
.art-cta .art-save { flex: none; justify-content: center; padding: 0 10px; letter-spacing: 0.12em; }
.art-cta .btn-primary {
  flex: 1; min-width: 0; justify-content: center;
  padding: 15px 10px; font-size: 11px; letter-spacing: 0.14em;
}
.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;
  max-height: calc(100% - 24px);             /* on a short view the buttons shrink to fit */
  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;
  flex: 0 1 auto; min-height: 0;
  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;
  flex: 0 1 auto; min-height: 16px;          /* the picture gives way first */
  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: var(--header-h, 80px); right: 0; bottom: 0; left: 0; z-index: 90;
  --panel-w: clamp(340px, 25vw, 420px);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w);
  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; container: stage / size; }
.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); }
}
/* short or narrow screens: the tools tighten up so they all fit */
@media (max-width: 720px), (max-height: 760px) {
  .pdp-hero.is-editing .art-head { padding: 8px 16px; }
  .pdp-hero.is-editing .art-section { padding: 10px 16px; }
  .pdp-hero.is-editing .art-colour .pdp-note,
  .pdp-hero.is-editing .art-tip { display: none; }
  .pdp-hero.is-editing .art-field-head { margin-bottom: 6px; }
  .pdp-hero.is-editing .art-thumb { width: 44px; height: 44px; padding: 5px; }
  .pdp-hero.is-editing .art-chip span { padding: 8px 4px; font-size: 0.8rem; }
  .pdp-hero.is-editing .art-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .pdp-hero.is-editing .art-sliders .art-field { padding-top: 10px; }
  .pdp-hero.is-editing .art-sliders .art-field-head { margin-bottom: 4px; line-height: 1.2; }
  .pdp-hero.is-editing .art-check { margin-top: 8px; }
}
/* phones (either way up) and short screens: smaller view buttons */
@media (max-width: 720px), (max-height: 500px) {
  .pdp-views { left: 6px; gap: 2px; padding: 3px; max-height: calc(100% - 12px); }
  .view-pick { width: 50px; gap: 2px; padding: 4px 2px 3px; }
  .view-pick-pic { width: 30px; height: 30px; min-height: 12px; }
  .view-pick-label { font-size: 8.5px; letter-spacing: 0.1em; }
  .pdp-hero.is-editing .pdp-3d { left: 64px; }        /* keeps the garment clear of the view buttons */
  .pdp-hero.is-editing .art-hint { left: calc(50% + 32px); }
}
/* a very short 3D view: the view buttons keep just their names */
@container stage (max-height: 230px) {
  .view-pick-pic { display: none; }
}
/* phones, either way up (and very short windows): tighter still. "Done" moves onto the
   3D view (top right), the hint sits beside it, AR shrinks to its icon, and labels the
   controls don't need are kept for screen readers only */
@media (max-width: 720px) and (orientation: portrait), (max-height: 500px) {
  .pdp-hero.is-editing .art-head {
    position: absolute; top: 10px; right: calc(var(--panel-w) + 10px); z-index: 6;
    padding: 0; border: 0; background: none;
  }
  .pdp-hero.is-editing .art-title { display: none; }
  .pdp-hero.is-editing .art-done { padding: 10px 16px; background: #fff; }
  .pdp-hero.is-editing .art-done:hover { background: var(--charcoal); }
  .pdp-hero.is-editing .art-hint {
    top: 10px; left: 70px; right: 92px; width: fit-content; max-width: none; margin: 0 auto;
    white-space: normal; text-align: center; transform: translateY(-8px);
  }
  .pdp-hero.is-editing .art-hint.is-on { transform: none; }
  .pdp-hero.is-editing .ar-btn { right: 10px; bottom: 10px; width: 40px; height: 40px; padding: 0; }
  .pdp-hero.is-editing .pdp-credit { left: 70px; right: 58px; bottom: 6px; font-size: 10px; }
  .pdp-hero.is-editing .ar-btn-text,
  .pdp-hero.is-editing .art-colour .pdp-opt-label,
  .pdp-hero.is-editing .art-tools legend.art-field-head {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; float: none;
  }
  .pdp-hero.is-editing .art-artwork > .art-field-head { display: none; }
  .pdp-hero.is-editing .art-section { padding: 8px 12px; }
  .pdp-hero.is-editing .art-colour .swatch-row { max-width: 420px; }
  .pdp-hero.is-editing .art-thumb { width: 40px; height: 40px; padding: 4px; }
  .pdp-hero.is-editing .art-tools > .art-field + .art-field { padding-top: 6px; }   /* finish, then position */
}
/* phones held upright: the 3D view on top, the tools underneath. The tools take the
   height they need, so every setting is in view at once; the 3D view gets the rest
   (never under 200px; on a very short screen the tools scroll instead) */
@media (max-width: 720px) and (orientation: portrait) {
  .pdp-hero.is-editing .pdp-hero-grid {
    --panel-w: 0px;                                     /* no side panel: "Done" goes to the right edge */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(200px, 1fr) minmax(0, auto);
  }
  .pdp-hero.is-editing .pdp-info { border-left: 0; border-top: 1px solid var(--line); }
}
/* small phones with the browser bars showing, or turned sideways: tighter again */
@media (max-width: 720px) and (orientation: portrait) and (max-height: 620px), (max-height: 400px) {
  .pdp-hero.is-editing .art-section { padding: 6px 12px; }
  .pdp-hero.is-editing .art-colour .swatch-row { max-width: 320px; }
  .pdp-hero.is-editing .art-thumb { width: 36px; height: 36px; padding: 3px; }
  .pdp-hero.is-editing .art-chip span { padding: 6px 4px; }
  .pdp-hero.is-editing .art-sliders .art-field { padding-top: 6px; }
}
@media (max-width: 720px) and (orientation: portrait) and (max-height: 620px) {
  .pdp-hero.is-editing .pdp-hero-grid { grid-template-rows: minmax(180px, 1fr) minmax(0, auto); }
}

/* 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-svg .t  { fill: none; stroke: var(--indigo); stroke-width: 1.6; stroke-linecap: round; }   /* contrast tipping */
.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; }
}