/* ==========================================================================
   SUPREME LUXE — PAGE COMPOSITION
   Desktop compositions transcribed from the approved .dc.html files.
   Mobile compositions transcribed from Homepage-Mobile / Product-Detail-Mobile
   — art direction, not a scaled-down desktop.
   Viewport units use dvh so a phone's collapsing browser chrome never pushes a
   CTA off-screen (regression case 11).
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE — 01 THE ENTRANCE
   ========================================================================== */

.hero { display: flex; min-height: 94dvh; }
.hero__panel {
  flex: 0 0 46%;
  background: var(--onyx);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 5vw 60px;
  box-sizing: border-box;
}
.hero__eyebrow { margin-bottom: 28px; }
.hero__title { font-size: var(--h1-hero); margin-bottom: 28px; color: var(--bone); }
.hero__sub {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--bone-68);
  max-width: 440px;
  margin-bottom: 44px;
}
.hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero__note { font-size: 12px; color: var(--bone-45); margin-top: 36px; }
/* The mobile composition moves this line out of the hero panel and centres it
   beneath the image, so it is a separate element rather than a restyled one. */
.hero-note-mobile { display: none; }

.hero__media { flex: 1; position: relative; overflow: hidden; }
/* object-position per the approved design — desktop 50% 20%, mobile 50% 12%.
   Set here rather than inline so the two canvases can differ. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--onyx) 0%, rgba(10, 10, 10, 0) 14%);
}
/* Anchored to the left edge of the hero image rather than the right. It is
   static text that never scrolls clear, and the bottom-right corner belongs to
   the Concierge control and the cart pill — on the right it would sit under
   one of them permanently. Still bottom-aligned on the image, as approved. */
.hero__handle {
  position: absolute;
  bottom: 24px; left: 28px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(245, 242, 235, 0.55);
}

/* ==========================================================================
   HOMEPAGE — 02 THE SUPREME EDIT
   Asymmetric grid: a span-2 lead, then a tall single, then three shorter.
   ========================================================================== */

.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.edit-grid .product-card--wide { grid-column: span 2; }
.edit-grid .product-card--tall .product-card__media { height: 520px; }
.edit-grid .product-card--short .product-card__media { height: 400px; }

/* ==========================================================================
   HOMEPAGE — 03 THE SIGNATURE
   ========================================================================== */

.signature {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--onyx);
}
.signature__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signature__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--onyx) 22%, rgba(10,10,10,0.62) 46%, rgba(10,10,10,0.12) 72%);
}
.signature__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-home);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--pad-x-fixed);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}
.signature__copy { max-width: 480px; }
.signature__title { font-size: var(--h2-split); margin: 18px 0 22px; line-height: 1.12; color: var(--bone); }
.signature__body { font-size: var(--fs-body); line-height: 1.65; color: var(--bone-68); margin-bottom: 30px; }
.signature__video {
  flex: 0 0 260px;
  height: 400px;
  border: 1px solid var(--line-25);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.signature__video video,
.signature__video img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   HOMEPAGE — 04 SHOP THE MOMENT
   ========================================================================== */

.occasion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.occasion-grid .tile { height: 340px; }

/* ==========================================================================
   HOMEPAGE — 05 BUILD YOUR SUPREME (teaser)
   ========================================================================== */

.build-teaser { display: flex; gap: 80px; align-items: center; }
.build-teaser__copy { flex: 1; }
.build-teaser__eyebrow { color: var(--bone); opacity: 0.75; }
.build-teaser__title { font-size: var(--h2-split); margin: 18px 0 22px; color: var(--bone); }
.build-teaser__body { font-size: var(--fs-body); line-height: 1.65; color: var(--bone-72); max-width: 460px; margin-bottom: 34px; }
.build-teaser__steps {
  flex: 0 0 400px;
  background: var(--onyx);
  padding: 36px;
  border: 1px solid var(--line-12);
}
.step-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-10);
}
.step-row:last-child { border-bottom: none; }
.step-row__n { font-family: var(--font-display); font-size: 20px; color: var(--crimson); }
.step-row__title { font-size: 15px; color: var(--bone); }
.step-row__sub { font-size: 12px; color: var(--bone-50); margin-top: 2px; }

/* ==========================================================================
   HOMEPAGE — 06 THE CAMPAIGN CHAPTER
   ========================================================================== */

.campaign { position: relative; height: 92dvh; min-height: 680px; overflow: hidden; }
.campaign img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.05) 55%, rgba(10,10,10,0.75) 100%);
}
.campaign__line {
  position: absolute;
  bottom: 70px; left: var(--pad-x-fixed); right: var(--pad-x-fixed);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--campaign-line);
  color: var(--bone);
}

/* ==========================================================================
   HOMEPAGE — 07 SUPREME BESPOKE (teaser)
   ========================================================================== */

.bespoke-teaser { display: flex; min-height: 78dvh; background: var(--onyx); }
.bespoke-teaser__media { flex: 0 0 42%; position: relative; overflow: hidden; }
.bespoke-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.bespoke-teaser__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6vw;
  box-sizing: border-box;
}
.bespoke-teaser__title { font-size: var(--h2-split); margin: 18px 0 22px; max-width: 520px; line-height: 1.15; color: var(--bone); }
.bespoke-teaser__body { font-size: var(--fs-body); line-height: 1.65; color: var(--bone-68); max-width: 460px; margin-bottom: 34px; }

/* ==========================================================================
   HOMEPAGE — 08 SUPREME MOMENTS
   ========================================================================== */

.moments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 20px;
}

/* ==========================================================================
   HOMEPAGE — 09 DELIVERED WITH CONFIDENCE
   ========================================================================== */

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

/* ==========================================================================
   HOMEPAGE — 10 SUPREME FOR BUSINESS
   ========================================================================== */

.business {
  position: relative;
  min-height: 60dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--onyx);
}
.business img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.business__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--onyx) 32%, rgba(10,10,10,0.25) 75%);
}
.business__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-home);
  margin: 0 auto;
  width: 100%;
  padding: 60px var(--pad-x-fixed);
  box-sizing: border-box;
}
.business__title { font-size: var(--h2-business); margin: 18px 0 22px; max-width: 560px; color: var(--bone); }
.business__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--bone-70); max-width: 460px; margin-bottom: 32px; }

/* ==========================================================================
   HOMEPAGE — 11 REMEMBER THE MOMENT
   ========================================================================== */

.reminder {
  border-top: 1px solid var(--line-12);
  border-bottom: 1px solid var(--line-12);
  padding: 56px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}
.reminder__copy { max-width: 440px; }
.reminder__title { font-size: var(--h2-reminder); margin-bottom: 12px; color: var(--bone); }
.reminder__body { font-size: 14.5px; line-height: var(--lh-body); color: var(--bone-60); }
.reminder__form { display: flex; flex-wrap: wrap; min-width: 360px; }
.reminder__input {
  flex: 1;
  min-width: 260px;
  background: transparent;
  border: 1px solid var(--line-30);
  border-right: none;
  color: var(--bone);
  padding: 16px 18px;
  font-size: 14px;
  font-family: var(--font-ui);
}
.reminder__submit {
  background: var(--bone);
  color: var(--onyx);
  padding: 16px 26px;
  font-size: var(--fs-btn);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-button);
}
.reminder__submit:hover { background: #fff; }
.reminder__sent { font-size: 14px; color: var(--crimson); }
.social-line { display: flex; justify-content: flex-end; }
.social-line a { color: var(--bone-60); font-size: 13px; transition: color var(--t-button); }
.social-line a:hover { color: var(--bone); }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */

.pdp-crumb { padding: 22px var(--pad-x-fixed) 0; max-width: var(--max-product); margin: 0 auto; box-sizing: border-box; }
.pdp-crumb a { font-size: 12px; color: var(--bone-50); transition: color var(--t-button); }
.pdp-crumb a:hover { color: var(--bone); }

.pdp {
  max-width: var(--max-product);
  margin: 0 auto;
  padding: 28px var(--pad-x-fixed) 100px;
  box-sizing: border-box;
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

.pdp__gallery { flex: 1 1 640px; min-width: 0; }
.pdp__stage { position: relative; height: 720px; background: var(--surface); overflow: hidden; }
.pdp__stage img,
.pdp__stage video { width: 100%; height: 100%; object-fit: cover; }
.pdp__stage video { position: absolute; inset: 0; }
.pdp__badge {
  position: absolute;
  top: 18px; left: 18px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--onyx);
  color: var(--bone);
  padding: 7px 12px;
}
.pdp__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pdp__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 84px; height: 104px;
  overflow: hidden;
  border: 1px solid var(--line-15);
  opacity: 0.6;
  transition: opacity var(--t-hover), border-color var(--t-hover);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--bone); opacity: 1; }
.pdp__thumb-play {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.28);
}

/* The mobile snap-scroller is a separate element from the desktop stage +
   thumb rail, so it must be explicitly hidden on desktop — otherwise its five
   slides stack below the gallery. */
.pdp__scroller { display: none; }

.pdp__panel { flex: 0 0 420px; }
.pdp__title { font-size: var(--h1-pdp); margin: 14px 0 8px; color: var(--bone); }
.pdp__variant { font-size: 14px; color: var(--bone-60); margin-bottom: 16px; }
.pdp__price { font-size: var(--fs-price); color: var(--bone); font-weight: 500; margin-bottom: 22px; }
.pdp__blurb { font-size: 15px; line-height: 1.65; color: var(--bone-70); margin-bottom: 32px; max-width: 400px; }
.pdp__delivery {
  border-top: 1px solid var(--line-12);
  border-bottom: 1px solid var(--line-12);
  padding: 16px 0;
  margin-bottom: 26px;
  font-size: 13px;
  color: var(--bone-60);
  line-height: var(--lh-body);
}
.pdp__add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--crimson);
  color: var(--bone);
  padding: 18px 24px;
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  margin-bottom: 12px;
  transition: background var(--t-button);
}
.pdp__add:hover { background: var(--crimson-hover); }
.pdp__concierge { margin-bottom: 28px; }
.pdp__trust { display: flex; flex-direction: column; gap: 14px; }

.included { display: grid; grid-template-columns: 340px 1fr; gap: 80px; }
.included__title { font-size: 32px; margin-top: 14px; color: var(--bone); }
.included__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; }
.included__item { border-top: 1px solid var(--line-12); padding-top: 16px; }
.included__item dt { font-size: 15px; color: var(--bone); margin-bottom: 6px; }
.included__item dd { margin: 0; font-size: 13px; color: var(--bone-55); line-height: 1.55; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related-grid .product-card__media { height: 420px; }
.related-head__title { font-size: 38px; margin-top: 14px; color: var(--bone); }

/* Mobile sticky purchase bar */
.buy-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-float);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: var(--onyx);
  border-top: 1px solid var(--line-12);
}
.buy-bar__label { font-size: 10.5px; color: var(--bone-50); text-transform: uppercase; letter-spacing: 0.05em; }
.buy-bar__value { font-size: 17px; color: var(--bone); }
.buy-bar__cta { flex: 1; justify-content: center; padding: 15px; }

/* ==========================================================================
   BUILD YOUR SUPREME
   ========================================================================== */

.build-head {
  padding: clamp(48px, 7vw, 90px) var(--pad-x-fluid) clamp(32px, 5vw, 50px);
  max-width: var(--max-product);
  margin: 0 auto;
  box-sizing: border-box;
}
.build-head__title { font-size: var(--h1-build); margin: 16px 0 14px; line-height: 1.08; max-width: 680px; color: var(--bone); }
.build-head__body { font-size: 15.5px; line-height: var(--lh-body); color: var(--bone-68); max-width: 520px; margin-bottom: 34px; }

.quicklinks {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  border-top: 1px solid var(--line-14);
  border-bottom: 1px solid var(--line-14);
  padding: 16px 0;
}
.quicklinks a { display: flex; align-items: baseline; gap: 8px; color: var(--bone); }
.quicklinks__n { font-family: var(--font-display); font-size: 14px; color: var(--crimson); }
.quicklinks__label { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }
.quicklinks a:hover .quicklinks__label { opacity: 1; }

.builder {
  max-width: var(--max-product);
  margin: 0 auto;
  padding: 0 var(--pad-x-fluid) 100px;
  box-sizing: border-box;
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.builder__steps { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 56px; }

.build-step { scroll-margin-top: 24px; }
.build-step__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.build-step__n { font-family: var(--font-display); font-size: 22px; color: var(--crimson); }
.build-step__title { font-size: 20px; font-weight: 600; margin: 0; color: var(--bone); }

.size-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.size-row__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1 1 320px; }
.size-row__chips .chip { padding: 14px 8px; }
.size-row__chips .chip__label { font-size: 14px; }
.size-row__scale { flex: 0 0 140px; }
.size-row__scale img { width: 100%; border: 1px solid var(--line-15); }
.size-row__scale figcaption { font-size: 10.5px; color: var(--bone-45); margin-top: 6px; }

.colour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.builder__rail { flex: 0 0 320px; position: sticky; top: 24px; }
.summary { border: 1px solid var(--line-14); }
.summary__preview { height: 340px; overflow: hidden; background: var(--surface); position: relative; display: flex; align-items: center; justify-content: center; }
.summary__preview img { width: 100%; height: 100%; object-fit: cover; }
.summary__pending { font-size: 12px; color: var(--bone-40); }
.summary__caption {
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--bone);
}
.summary__body { padding: 22px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-10); }
.summary__row dt { font-size: 12.5px; color: var(--bone-55); }
.summary__row dd { margin: 0; font-size: 12.5px; color: var(--bone); text-align: right; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 20px; }
.summary__total dt { font-size: 13px; color: var(--bone-60); }
.summary__total dd { margin: 0; font-size: var(--fs-price); color: var(--bone); }

/* ==========================================================================
   SUPREME BESPOKE
   ========================================================================== */

.bespoke-hero {
  position: relative;
  min-height: 84dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bespoke-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bespoke-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--onyx) 20%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.25) 100%);
}
.bespoke-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-product);
  margin: 0 auto;
  width: 100%;
  padding: 120px var(--pad-x-fluid) 60px;
  box-sizing: border-box;
}
.bespoke-hero__title { font-size: var(--h1-bespoke); margin: 18px 0 22px; line-height: 1.08; max-width: 640px; color: var(--bone); }
.bespoke-hero__body { font-size: var(--fs-body); line-height: 1.65; color: var(--bone-72); max-width: 460px; margin-bottom: 36px; }

.covers {
  padding: clamp(60px, 8vw, 110px) var(--pad-x-fluid);
  background: var(--surface);
  border-top: 1px solid var(--line-08);
  border-bottom: 1px solid var(--line-08);
}
.covers__grid {
  max-width: var(--max-bespoke);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
}
.covers__item { border-top: 1px solid var(--line-15); padding-top: 18px; }
.covers__item dt { font-size: 16px; color: var(--bone); margin-bottom: 8px; }
.covers__item dd { margin: 0; font-size: 13px; color: var(--bone-72); line-height: 1.55; }

.request { padding: clamp(70px, 9vw, 120px) var(--pad-x-fluid); }
.request__inner { max-width: var(--max-bespoke); margin: 0 auto; display: flex; gap: 64px; flex-wrap: wrap; }
.request__media { flex: 1 1 320px; min-height: 480px; overflow: hidden; background: var(--surface); }
.request__media img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.request__form { flex: 1 1 420px; }
.request__title { font-size: var(--h2-bespoke); margin: 14px 0 28px; color: var(--bone); }
.request__fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.request__submit { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; margin-bottom: 16px; }
.request__foot { font-size: 12px; color: var(--bone-50); }

/* Concept-boundary panel used where a production system is deliberately absent */
.concept-note {
  margin-top: 16px;
  border: 1px solid var(--line-22);
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bone-60);
}
.concept-note strong { color: var(--bone); font-weight: 500; }
.concept-note pre {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--bone-70);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   FIXED-UTILITY LANE
   GVisuals final decision: the Concierge control sits bottom-right on every
   page. On the two screens with a right-hand column of controls — the PDP
   purchase panel and the Build summary rail — that corner is exactly where the
   controls live, and no vertical offset can fix it, because the panel fills the
   lower viewport before it becomes sticky.

   So those two screens reserve a lane on the right wide enough for the control
   AND the (wider) cart pill. The panel shifts left; nothing else changes.
   These rules must live here: they override a `padding` shorthand set earlier
   in this file, and this file loads after components.css.

   Below 1200 both screens are single column, the panel is full width, and no
   lane exists — so the two floating utilities stand down there and the header
   Concierge pill and cart button carry the same actions.
   ========================================================================== */

@media (min-width: 1200px) {
  .page--product .pdp    { padding-right: calc(var(--pad-x-fixed) + 240px); }
  .page--build  .builder { padding-right: calc(var(--pad-x-fluid) + 240px); }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .page--product .wa-float,   .page--build .wa-float,
  .page--product .reopen-pill, .page--build .reopen-pill { display: none; }
}

/* Supreme Bespoke has no floating Concierge control by design — the page is
   the Concierge flow. The cart pill would land on the occasion chips, and the
   header cart button already reopens the drawer, so it stands down here. */
.page--bespoke .reopen-pill { display: none; }

/* ==========================================================================
   TABLET — 768 to 1023
   No tablet range exists in the approved files. DESIGN_HANDOFF §13 assigns it
   to Code as an open gap. Desktop compositions, grids stepped down.
   ========================================================================== */

@media (max-width: 1200px) and (min-width: 768px) {
  :root { --pad-x-fixed: 40px; --section-y: 90px; }

  .edit-grid { grid-template-columns: repeat(2, 1fr); }
  .edit-grid .product-card--wide { grid-column: span 2; }
  .occasion-grid { grid-template-columns: repeat(2, 1fr); }
  .moments-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .included { grid-template-columns: 1fr; gap: 36px; }
  .included__list { gap: 24px 32px; }
  .build-teaser { gap: 40px; }
  .build-teaser__steps { flex: 0 0 320px; padding: 24px; }
  .signature__inner { gap: 36px; }
  .signature__video { flex: 0 0 200px; height: 320px; }
}

/* PDP and Build drop to a stacked single column below 1200. The two-column
   layouts need room for the gallery/steps, the right-hand panel AND the clear
   lane the floating Concierge control sits in; below 1200 that no longer fits
   honestly, so the panel goes full width instead of being squeezed. */
@media (max-width: 1199px) {
  .pdp { flex-direction: column; gap: 36px; }
  .pdp__gallery, .pdp__panel { flex: 1 1 auto; width: 100%; }
  .pdp__stage { height: 520px; }
  .pdp__title { font-size: 36px; }

  .builder { gap: 40px; }
  .builder__rail { flex: 1 1 100%; position: static; }
  .summary { display: flex; gap: 24px; }
  .summary__preview { flex: 0 0 280px; height: 280px; }
  .summary__body { flex: 1; }
}

@media (max-width: 900px) {
  .hero { flex-direction: column; min-height: 0; }
  .hero__panel { flex: 1 1 auto; padding: 120px 40px 48px; }
  .hero__media { min-height: 60dvh; }
  .bespoke-teaser { flex-direction: column; }
  .bespoke-teaser__media { flex: 1 1 auto; height: 380px; }
  .bespoke-teaser__copy { padding: 44px 40px; }
  .request__inner { gap: 40px; }
  .summary { display: block; }
  .summary__preview { height: 340px; }
}

/* ==========================================================================
   MOBILE — under 768
   Transcribed from Homepage-Mobile and Product-Detail-Mobile.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- Hero: portrait, copy over image ---------------------------------- */
  .hero { display: block; min-height: 0; position: relative; height: 560px; }
  .hero__media { position: absolute; inset: 0; }
  .hero__media img { object-position: 50% 12%; }
  /* The copy block sits over the model's beaded dress, which is the brightest
     part of the frame. The approved gradient only reaches ~0.22 opacity behind
     the eyebrow, leaving crimson-on-pale and effectively unreadable. Pulled
     earlier and deeper so the copy always lands on dark ground — the image
     reveal at the top of the hero is unchanged. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(10,10,10,0) 26%,
      rgba(10,10,10,0.55) 50%,
      rgba(10,10,10,0.88) 70%,
      rgba(10,10,10,0.97) 90%);
  }
  .hero__handle { display: none; }
  .hero__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: none;
    padding: 0 var(--pad-x-mobile) 26px;
    justify-content: flex-end;
  }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.14em; margin-bottom: 0; }
  .hero__title { font-size: 32px; line-height: 1.08; margin: 12px 0 10px; }
  .hero__title br { display: none; }
  .hero__sub { font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; color: var(--bone-70); }
  .hero__actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero__actions .btn { padding: 15px; font-size: 13px; letter-spacing: 0.05em; }
  .hero__note { display: none; }
  .hero-note-mobile {
    display: block;
    text-align: center;
    padding: 10px var(--pad-x-mobile);
    font-size: 11px;
    color: var(--bone-45);
  }

  /* --- Edit: snap rail --------------------------------------------------- */
  .edit-grid { display: flex; gap: 14px; overflow-x: auto; padding: 4px var(--pad-x-mobile) 6px;
               scroll-snap-type: x mandatory; scrollbar-width: none; }
  .edit-grid::-webkit-scrollbar { display: none; }
  .edit-grid .product-card { flex: 0 0 76%; scroll-snap-align: start; }
  .edit-grid .product-card--wide { grid-column: auto; }
  .edit-grid .product-card--tall .product-card__media,
  .edit-grid .product-card--short .product-card__media { height: 300px; }
  .product-card__body { padding-top: 12px; }
  .product-card__name { font-size: 19px; margin-bottom: 3px; }
  .product-card__desc { font-size: 12px; }
  .product-card__price { font-size: 14px; }
  .product-card__tag { top: 12px; left: 12px; font-size: 10px; letter-spacing: 0.06em; padding: 5px 9px; }

  /* --- Signature: image only, no video panel ---------------------------- */
  .signature { min-height: 0; height: 420px; display: block; }
  .signature__bg { object-position: 50% 35%; }
  .signature__scrim {
    background: linear-gradient(180deg, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.92) 100%);
  }
  .signature__inner {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    padding: 0 var(--pad-x-mobile) 24px;
  }
  .signature__title { font-size: 23px; margin: 10px 0 8px; line-height: 1.15; }
  .signature__body { display: none; }
  .signature__video { display: none; }

  /* --- Occasions: snap rail --------------------------------------------- */
  .occasion-grid { display: flex; gap: 12px; overflow-x: auto; padding: 4px var(--pad-x-mobile) 6px;
                   scroll-snap-type: x mandatory; scrollbar-width: none; }
  .occasion-grid::-webkit-scrollbar { display: none; }
  .occasion-grid .tile { flex: 0 0 56%; scroll-snap-align: start; height: 220px; }
  .tile__label { bottom: 14px; left: 14px; font-size: 18px; }
  .tile__arrow { display: none; }

  /* --- Build teaser ------------------------------------------------------ */
  .build-teaser { display: block; }
  .build-teaser__title { font-size: 24px; margin: 10px 0; }
  .build-teaser__body { font-size: 13.5px; line-height: 1.55; margin-bottom: 22px; }
  .build-teaser__steps { padding: 6px 18px; margin-bottom: 20px; border: none; }
  .step-row { gap: 14px; padding: 13px 0; }
  .step-row__n { font-size: 17px; }
  .step-row__title { font-size: 14px; }
  .step-row__sub { font-size: 11px; margin-top: 1px; }

  /* --- Campaign ---------------------------------------------------------- */
  .campaign { height: 480px; min-height: 0; }
  .campaign__scrim { background: linear-gradient(180deg, rgba(10,10,10,0.1) 50%, rgba(10,10,10,0.8) 100%); }
  .campaign__line { bottom: 26px; left: var(--pad-x-mobile); right: var(--pad-x-mobile); font-size: 24px; }

  /* --- Bespoke teaser: image above copy --------------------------------- */
  .bespoke-teaser { display: block; min-height: 0; }
  .bespoke-teaser__media { height: 300px; }
  .bespoke-teaser__copy { padding: 32px var(--pad-x-mobile); }
  .bespoke-teaser__title { font-size: 23px; margin: 10px 0; line-height: 1.2; }
  .bespoke-teaser__body { font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }

  /* --- Moments ----------------------------------------------------------- */
  .moments-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px; }
  .moment__caption { bottom: 8px; left: 10px; right: 8px; font-size: 10.5px; }

  /* --- Trust ------------------------------------------------------------- */
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .trust-item__icon { margin-bottom: 10px; }
  .trust-item__title { font-size: 13.5px; margin-bottom: 4px; }
  .trust-item__desc { font-size: 11.5px; line-height: 1.45; }

  /* --- Business: image above copy --------------------------------------- */
  .business { display: block; min-height: 0; }
  .business img { position: relative; height: 240px; opacity: 1; }
  .business__scrim { display: none; }
  .business__inner { padding: 32px var(--pad-x-mobile); }
  .business__title { font-size: 22px; margin: 10px 0; }
  .business__body { font-size: 13.5px; line-height: 1.55; margin-bottom: 20px; }

  /* --- Reminder ---------------------------------------------------------- */
  .reminder { display: block; border: none; padding: 0; margin-bottom: 22px; }
  .reminder__title { font-size: 22px; margin-bottom: 10px; }
  .reminder__body { font-size: 13px; line-height: 1.55; margin-bottom: 20px; }
  .reminder__form { display: flex; flex-direction: column; min-width: 0; gap: 10px; }
  .reminder__input { border-right: 1px solid var(--line-30); padding: 14px; min-width: 0; }
  .reminder__submit { padding: 14px; }
  .social-line { justify-content: flex-start; margin-top: 22px; }

  /* --- PDP --------------------------------------------------------------- */
  .pdp-crumb { display: none; }
  .pdp { display: block; padding: 0 0 30px; }
  .pdp__stage { display: none; }
  .pdp__thumbs { display: none; }
  .pdp__scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pdp__scroller::-webkit-scrollbar { display: none; }
  .pdp__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: 480px;
    background: var(--surface);
  }
  .pdp__slide img, .pdp__slide video { width: 100%; height: 100%; object-fit: cover; }
  .pdp__slide video { position: absolute; inset: 0; }
  .pdp__panel { padding: 22px var(--pad-x-mobile) 0; }
  .pdp__title { font-size: var(--h1-pdp-mobile); margin: 10px 0 6px; }
  .pdp__variant { font-size: 13px; margin-bottom: 10px; }
  .pdp__price { font-size: 22px; margin-bottom: 16px; }
  .pdp__blurb { font-size: 14px; margin-bottom: 26px; }
  .pdp__add { display: none; }              /* replaced by the sticky buy bar */
  .buy-bar { display: flex; }
  .field-group { margin-bottom: 24px; }
  .field-group__legend { font-size: 11px; margin-bottom: 10px; }
  .grid-4 { gap: 7px; }
  .grid-4 .chip { padding: 10px 6px; }
  .grid-4 .chip__label { font-size: 12px; }
  .grid-4 .chip__price { font-size: 11px; }
  .swatch-row { gap: 18px; }
  .swatch__dot { width: 34px; height: 34px; }
  .swatch__label { font-size: 10.5px; margin-top: 7px; }
  .toggle { padding: 13px 14px; }
  .toggle__label { font-size: 13.5px; }
  .toggle__meta { font-size: 11.5px; }
  .pdp__delivery { padding: 14px 0; margin-bottom: 20px; font-size: 12.5px; line-height: 1.55; }
  .pdp__concierge { margin-bottom: 30px; }
  .pdp__trust { display: none; }
  .included { display: block; }
  .included__title { display: none; }
  .included__list { display: flex; flex-direction: column; gap: 14px; }
  .included__item { padding-top: 12px; border-top-color: var(--line-10); }
  .included__item dt { font-size: 13.5px; margin-bottom: 4px; }
  .included__item dd { font-size: 12px; line-height: 1.5; }
  .related-head__title { font-size: 23px; }
  .related-grid { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--pad-x-mobile) 30px;
                  scrollbar-width: none; }
  .related-grid::-webkit-scrollbar { display: none; }
  .related-grid .product-card { flex: 0 0 62%; }
  .related-grid .product-card__media { height: 230px; }

  /* PDP has both a buy bar and the Concierge bar — the buy bar wins on the
     product page, so the Concierge bar is suppressed there (regression case 8). */
  .page--product .concierge-bar { display: none; }
  .page--product { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* --- Build ------------------------------------------------------------- */
  .build-head { padding: 40px var(--pad-x-mobile) 28px; }
  .build-head__body { font-size: 14px; margin-bottom: 24px; }
  .builder { padding: 0 var(--pad-x-mobile) 60px; gap: 40px; }
  .builder__steps { gap: 40px; }
  .size-row { display: block; }
  .size-row__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .size-row__chips .chip { padding: 10px 6px; }
  .size-row__chips .chip__label { font-size: 12px; }
  .size-row__scale { margin-top: 16px; max-width: 160px; }
  .colour-grid { grid-template-columns: repeat(2, 1fr); }
  .finish-grid { grid-template-columns: 1fr; }
  .summary__preview { height: 260px; }

  /* --- Bespoke ----------------------------------------------------------- */
  .bespoke-hero { min-height: 0; height: 520px; }
  .bespoke-hero__inner { padding: 0 var(--pad-x-mobile) 40px; align-self: flex-end; }
  .bespoke-hero__title { font-size: 30px; }
  .bespoke-hero__body { font-size: 14px; margin-bottom: 26px; }
  .covers { padding: 44px var(--pad-x-mobile); }
  .covers__grid { gap: 24px; }
  .request { padding: 44px var(--pad-x-mobile); }
  .request__inner { gap: 32px; }
  .request__media { min-height: 300px; flex-basis: 100%; }
  .request__media img { min-height: 300px; }
  .request__title { font-size: 26px; margin-bottom: 22px; }
  .input--boxed { width: 100%; }
}