/* High Jewellery — Gem Experience
   Ported 1:1 from the Claude Design prototype `High Jewellery.dc.html`.
   Every colour, size, letter-spacing and clamp() below is taken from the
   prototype's inline styles. */

:root {
  --ink: #000;
  --ink-soft: #201e1d;
  --muted: #6b7280;
  --rule: #e5e7eb;
  --tile: #f9f8f3;
  --shell: #e9e7e2;
  --cta-alt: #f4f2ee;
  --cta-alt-hover: #ece9e2;
  --swatch-rule: #d8d5cf;
  /* Matches the home page, so one serif runs across the whole site. */
  --serif: Tinos, "Liberation Serif", "Times New Roman", Times, serif;
  --gutter: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-family: Jost, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }

img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
  cursor: pointer;
}

.page { background: var(--shell); min-height: 100vh; }

.shell {
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.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;
}

/* ---------------------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--gutter);
  gap: 16px;
}

.hdr-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 92px;
}

.hdr-side--end { gap: 20px; justify-content: flex-end; }

.hdr-brand {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 5.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.icon-btn { display: flex; }
.icon-btn:hover { color: var(--muted); }

/* --------------------------------------------------------------- listing */

.intro { padding: 28px var(--gutter) 56px; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .crumbs-here { color: var(--ink); }

.intro-title {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: 6px;
  text-transform: uppercase;
}

.intro-lede {
  margin: 20px 0 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-soft);
}

/* toolbar */

.toolbar {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
}

.toolbar-count {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  min-height: 64px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.toolbar-sort { position: relative; flex: 0 0 auto; border-left: 1px solid var(--rule); }

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(18px, 3vw, 40px);
  min-height: 64px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.toolbar-btn:hover { color: var(--ink); }

.toolbar-filter { flex: 0 0 auto; border-left: 1px solid var(--rule); }
.toolbar-active { color: var(--ink); }

.sort-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--rule);
  min-width: 240px;
  display: flex;
  flex-direction: column;
}

.sort-opt {
  padding: 16px 20px;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.sort-opt:hover { background: var(--tile); }
.sort-opt[aria-checked="true"] { color: var(--ink); }

/* active filter chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ink-soft);
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.chip:hover { background: var(--tile); }
.chip span:last-child { color: var(--muted); }

.chips-clear {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* product grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(150px, 23%), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(10px, 1.6vw, 24px);
  padding: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 32px) 96px;
}

/* Full row height so the booking button can sit on a common baseline even when
   product names wrap to different depths. */
.cell { display: flex; flex-direction: column; height: 100%; }

.card { display: flex; flex-direction: column; }

/* Applied only when PRODUCT_PAGE_ENABLED is false: the card keeps its exact
   look but offers no affordance — no pointer cursor, no hover motion. */
.card--inert { cursor: default; }

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

.card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  padding-bottom: 14px;
}

.card-name {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  line-height: 18px;
}

/* Held to a single line at every width: it shrinks with the viewport and
   ellipsises rather than wrapping. Full string stays available via title. */
.card-materials {
  font-weight: 300;
  font-size: clamp(10px, 0.86vw + 7px, 13px);
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Quiet secondary CTA under each product — a hairline outline that fills on
   hover, so it reads as an invitation rather than a shop button. */
.card-book {
  align-self: flex-start;
  margin-top: auto;
  padding: 11px 16px;
  border: 1px solid rgba(32, 30, 29, 0.2);
  background: transparent;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.card-book:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}

/* editorial banner tile */

.banner {
  position: relative;
  background: var(--ink-soft);
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.05) 62%);
  pointer-events: none;
}
.banner-body { position: relative; z-index: 1; padding: clamp(20px, 2vw, 34px); display: flex; }
.banner-link {
  align-self: flex-start;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  padding-bottom: 6px;
}
.banner-link:hover { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.85); padding-bottom: 5px; }

/* empty state */

.empty {
  padding: 0 var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.empty-title { font-family: var(--serif); font-size: 20px; letter-spacing: 3px; }
.empty-btn {
  border: 1px solid var(--ink-soft);
  padding: 14px 22px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.empty-btn:hover { background: var(--ink-soft); color: #fff; }

/* ------------------------------------------------------------------- pdp */

/* 60/40 rather than 75/25 — the mosaic was taking three quarters of the width
   and squeezing the copy into a narrow rail. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(400px, 0.8fr); align-items: start; }


.pdp-panel {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  padding: 56px clamp(28px, 4vw, 76px) 72px;
}
/* text stops growing with the column so lines stay readable */
.pdp-panel > * { max-width: 520px; }

.pdp-head {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}

.pdp-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.18;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-wrap: pretty;
}

.pdp-wish { flex: 0 0 auto; margin-top: 6px; display: flex; }
.pdp-wish:hover { color: var(--muted); }
.pdp-wish[aria-pressed="true"] svg { fill: var(--ink-soft); }


.opt-block { display: flex; flex-direction: column; gap: 12px; }
.opt-block--metal { padding-top: 24px; }
.opt-label { font-size: 14px; font-weight: 300; color: var(--ink-soft); }

.finishes { display: flex; gap: 14px; }
.finish { width: 34px; height: 34px; border-radius: 50%; }

.size-guide {
  align-self: flex-start;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 300;
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 2px;
}

.ctas { display: flex; flex-direction: column; gap: 10px; padding-top: 28px; }
.cta {
  padding: 22px 26px;
  font-size: 12px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  text-align: center;
  text-indent: 3.4px;
}
.cta--primary { background: var(--ink-soft); color: #fff; }
.cta--primary:hover { background: #000; color: #fff; }
.cta--ghost { background: var(--cta-alt); color: var(--ink-soft); }
.cta--ghost:hover { background: var(--cta-alt-hover); color: var(--ink-soft); }




/* related */

.related { padding: 96px var(--gutter) 104px; }
.related-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 20px;
}
.related-title { font-size: 12px; letter-spacing: 3.4px; text-transform: uppercase; }
.related-all {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--muted);
  padding-bottom: 3px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(160px, 23%), 1fr));
  gap: 36px 20px;
  padding-top: 48px;
}
.related-name { padding-top: 16px; font-weight: 500; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; }
.related-materials {
  padding-top: 6px; font-weight: 300;
  font-size: clamp(10px, 0.86vw + 7px, 13px); line-height: 18px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}


/* ------------------------------------------------------------ pdp gallery */

.gal { position: relative; }
.gal-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal-track::-webkit-scrollbar { display: none; }
/* The gallery mixes square plates with portrait model frames. A square box
   in a tile-coloured ground matted every portrait in wide cream bands, which
   read as a cutout stuck on the page. The ground is now the page itself, so
   whatever the frame does not fill is invisible, and the box leans portrait
   to leave less of it. `contain` still crops nothing. */
.gal-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
}
.gal-slide img { width: 100%; height: 100%; object-fit: contain; }

.gal-dots { display: flex; justify-content: center; gap: 9px; padding: 22px 0 6px; }
.gal-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(32, 30, 29, 0.22);
  transition: background 200ms ease;
}
.gal-dot.is-on { background: var(--ink-soft); }

/* From tablet up the frames stop sliding and lay out as a two-column mosaic
   that scrolls against the pinned info column — the Paspaley pattern. Same
   markup either way, so there is no duplicate DOM. */
@media (min-width: 901px) {
  .gal { position: relative; }
  /* One frame at a time, stacked — the page scroll moves through them while the
     info column stays pinned. Height is capped against the viewport so a wide
     column cannot make the frames tower. */
  .gal-track { display: flex; flex-direction: column; gap: 2px; overflow: visible; }
  /* Stacked frames are not a carousel, so they need no shared height: each one
     takes the column's full width at its own proportions. Nothing is matted
     and nothing is cropped. */
  .gal-slide { flex: 0 0 auto; aspect-ratio: auto; max-height: none; }
  .gal-slide img { height: auto; }
  .gal-dots {
    position: sticky;
    bottom: 40px;
    margin-top: -68px;
    padding: 0 0 0 34px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;
    z-index: 2;
  }
  .gal-dot { background: rgba(32, 30, 29, 0.28); }
  .gal-dot.is-on { background: var(--ink-soft); }
}

/* ------------------------------------------------------- pdp info column */

.crumbs--pdp { padding: 26px var(--gutter) 22px; }

.pdp-sub {
  margin: 0;
  padding-top: 4px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}

.gem-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  padding-bottom: 6px;
}

.gem-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--tile);
  font-weight: 400;
}

/* accordions */

.acc { display: flex; flex-direction: column; }
.acc--pdp { margin-top: 44px; border-top: 1px solid var(--rule); }
.acc-row { border-bottom: 1px solid var(--rule); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.acc-head:hover { color: var(--muted); }
.acc-chev { flex: 0 0 auto; transition: transform 220ms ease; }
.acc-head[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 0 0 22px; }
.acc-copy {
  margin: 0 0 14px;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-soft);
}
.acc-bullets {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-soft);
}
.spec-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 10px 20px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------- editorial/faq */


.faq { padding: 0 var(--gutter) 72px; max-width: 820px; margin: 0 auto; }
.faq-title {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.acc--faq { border-top: 1px solid var(--rule); }

/* concierge band */

.concierge {
  background: var(--tile);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 64px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.concierge-kicker { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.concierge-copy { margin: 0; font-weight: 300; font-size: 16px; line-height: 26px; max-width: 520px; }
.concierge-cta {
  margin-top: 4px;
  background: var(--ink-soft);
  color: #fff;
  padding: 16px 28px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.concierge-cta:hover { background: #000; color: #fff; }
.concierge-hours { font-size: 12px; font-weight: 300; color: var(--muted); }

/* sticky CTA — mobile only, once the in-panel button scrolls away */

.pdp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
  transition: transform 260ms ease;
}
.pdp-sticky.is-on { transform: translateY(0); }
.pdp-sticky-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  color: var(--ink-soft);
}
.pdp-sticky-icon:hover { color: var(--muted); }
.pdp-sticky-btn {
  flex: 1 1 auto;
  text-align: center;
  background: var(--ink-soft);
  color: #fff;
  padding: 15px 22px;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-indent: 2.6px;
  text-transform: uppercase;
}




/* ------------------------------------------------------------- story rows */

/* Image one side, copy the other, centred against it — alternating down the
   page. The outer flex column keeps one block per row; a grid would let the
   first two share a row. */
.story {
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 96px var(--gutter);
}
.story-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.story-block--right .story-shot { order: 2; }
.story-text { display: flex; flex-direction: column; }
/* The frame takes the photograph's own proportions. A fixed square with
   `contain` letterboxed every portrait shot in tile-coloured bands, which
   read as a cutout pasted onto the page; a square with `cover` would crop
   them instead. Sized by the image, it does neither. */
.story-shot { overflow: hidden; }
.story-shot img { width: 100%; height: auto; }
.story-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.story-p {
  margin: 14px 0 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 26px;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* --------------------------------------------------------------- spec strip */

.specs {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 44px 24px;
  padding: 60px var(--gutter);
}
.spec { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.spec-k {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.spec-v { font-weight: 300; font-size: 14px; line-height: 22px; color: var(--muted); }

/* --------------------------------------------------------- enquiry modal */

.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; }
.modal-scrim {
  position: absolute; inset: 0;
  background: rgba(32, 30, 29, 0.42);
  opacity: 0;
  transition: opacity 240ms ease;
}
.modal.is-on .modal-scrim { opacity: 1; }

.modal-card:focus { outline: none; }
.modal-card {
  position: relative;
  width: min(440px, calc(100% - 32px));
  background: #fff;
  padding: 40px 36px 32px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0, 0.1, 1);
}
.modal.is-on .modal-card { opacity: 1; transform: none; }

.modal-close {
  position: absolute; top: 16px; right: 18px;
  font-size: 22px; line-height: 1; color: var(--muted);
}
.modal-close:hover { color: var(--ink); }

.modal-kicker { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.modal-title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.24;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.modal-sub { margin: 12px 0 0; font-weight: 300; font-size: 14px; line-height: 22px; color: var(--muted); }

.modal-list { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 20px; }
.modal-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: border-color 200ms ease, background 200ms ease;
}
.modal-opt:hover { border-color: var(--ink-soft); background: var(--tile); color: var(--ink-soft); }
.modal-opt-icon { flex: 0 0 auto; display: flex; color: #25d366; }
.modal-opt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.modal-opt-label { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; }
.modal-opt-dial { font-weight: 300; font-size: 14px; color: var(--muted); }
.modal-opt-arrow { flex: 0 0 auto; color: var(--muted); transition: transform 200ms ease; }
.modal-opt:hover .modal-opt-arrow { transform: translateX(3px); }

.modal-foot { font-size: 12px; font-weight: 300; color: var(--muted); }


/* ---------------------------------------------------------------- drawer */

.drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
.drawer-panel {
  position: relative;
  width: min(420px, 100%);
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 28px;
  border-bottom: 1px solid var(--rule);
}
.drawer-title { font-size: 12px; letter-spacing: 3.4px; text-transform: uppercase; }
.drawer-close { font-size: 20px; line-height: 1; color: var(--muted); }
.drawer-close:hover { color: var(--ink); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 28px 32px; }

.fgroup { display: flex; flex-direction: column; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.fgroup-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.fopt { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.fopt-box { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--ink-soft); background: transparent; }
.fopt[aria-checked="true"] .fopt-box { background: var(--ink-soft); }
.fopt-label { font-weight: 300; font-size: 15px; line-height: 22px; }
.fopt-count { font-size: 12px; color: var(--muted); }

.drawer-foot { display: flex; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--rule); }
.drawer-apply {
  flex: 1 1 auto;
  background: var(--ink-soft);
  color: #fff;
  padding: 18px 20px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}
.drawer-apply:hover { background: #000; }
.drawer-clear {
  flex: 0 0 auto;
  border: 1px solid var(--ink-soft);
  padding: 18px 20px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.drawer-clear:hover { background: var(--tile); }

/* ---------------------------------------------------------------- footer */

.ftr {
  margin-top: auto;
  background: var(--tile);
  border-top: 1px solid var(--rule);
  padding: 64px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
}

/* masthead + signup */

.ftr-top {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 64px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.ftr-intro { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.ftr-brand { font-weight: 500; font-size: 13px; letter-spacing: 5.6px; text-transform: uppercase; }
.ftr-tagline { margin: 0; font-weight: 300; font-size: 14px; line-height: 24px; color: var(--muted); }

.ftr-signup { display: flex; flex-direction: column; gap: 14px; width: min(340px, 100%); }
.ftr-signup-label { font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--muted); }
.ftr-field { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--swatch-rule); }
.ftr-field:focus-within { border-bottom-color: var(--ink-soft); }
.ftr-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font: inherit;
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-soft);
}
.ftr-input::placeholder { color: var(--muted); }
.ftr-input:focus { outline: none; }
.ftr-submit { flex: 0 0 auto; display: flex; padding: 8px 0 8px 8px; color: var(--ink-soft); }
.ftr-submit:hover { color: var(--muted); }

/* link columns */

/* client services — the same band the home page footer carries, so the
   invitation to talk to someone reads the same wherever you land */

.ftr-advisor {
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ftr-advisor-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.ftr-advisor-line {
  margin: 18px 0 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--ink);
}

.ftr-advisor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 28px;
}

.ftr-advisor-link {
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.ftr-advisor-link:hover { opacity: 0.6; }

@media (min-width: 901px) {
  .ftr-advisor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 64px;
    padding: 56px 0;
  }
  .ftr-advisor-kicker { grid-column: 1; }
  .ftr-advisor-line { grid-column: 1; max-width: 40ch; font-size: 26px; line-height: 38px; }
  .ftr-advisor-links {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

.ftr-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 36px 40px;
  padding: 48px 0;
}
.ftr-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ftr-col-title { font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--muted); }
.ftr-col a { font-weight: 300; font-size: 14px; line-height: 20px; }

/* legal bar */

.ftr-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.ftr-legal { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.ftr-social { display: flex; gap: 18px; margin-right: auto; }
.ftr-social a { display: flex; color: var(--ink-soft); }
.ftr-social a:hover { color: var(--muted); }
.ftr-legal-links { display: flex; flex-wrap: wrap; gap: 24px; }
.ftr-legal-links a { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.ftr-legal-links a:hover { color: var(--ink); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-panel { position: static; top: auto; }
}

/* Phones and small tablets: two products per row, and the editorial banner
   runs full-bleed across both columns after every fourth product. */
@media (max-width: 700px) {
  .hdr { padding: 18px 20px; }
  .hdr-brand { font-size: 12px; letter-spacing: 4px; }
  .hdr-side, .hdr-side--end { min-width: 0; }
  .hdr-side--end { gap: 18px; }

  /* Breadcrumb and design count are desktop furniture — the mobile header is
     just the title and the lede. */
  .crumbs { display: none; }
  .toolbar-count { display: none; }

  .intro { padding: 26px 20px 30px; }
  .intro-title { margin-top: 0; letter-spacing: 4px; }
  .intro-lede { margin-top: 14px; font-size: 15px; line-height: 24px; }

  /* Sort and Filter split the bar as two equal, centred targets. */
  .toolbar-sort, .toolbar-filter { flex: 1 1 0; }
  .toolbar-sort { border-left: 0; }
  .toolbar-btn { justify-content: center; padding: 0 16px; min-height: 58px; }
  .sort-menu { left: 0; right: 0; min-width: 0; }

  .chips { padding: 16px 20px; }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
    padding: 24px 16px 72px;
  }

  .cell--banner { grid-column: 1 / -1; }
  .cell--banner .banner { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .banner-body { padding: 24px 20px; }

  .card-info { padding-top: 14px; padding-bottom: 12px; gap: 6px; }
  .card-name { font-size: 11px; letter-spacing: 2px; }
  .card-materials { line-height: 17px; }

  /* Spans the column: a comfortable tap target, and the label cannot crowd
     the narrow card. */
  .card-book {
    align-self: stretch;
    text-align: center;
    padding: 11px 8px;
    letter-spacing: 1.4px;
  }

  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }

  .crumbs--pdp { padding: 16px 20px 14px; }
  .pdp-panel { padding: 30px 20px 44px; }
  .modal-card { padding: 32px 22px 26px; }
  .pdp-sticky { display: flex; }
  .story { gap: 52px; padding: 52px 20px; }
  .story-block { grid-template-columns: 1fr; gap: 24px; }
  .story-block--right .story-shot { order: 0; }
  .faq { padding: 0 20px 48px; }
  .concierge { padding: 40px 20px; }
  .specs { padding: 40px 20px; gap: 32px 20px; }
  .concierge-cta { align-self: stretch; text-align: center; }

  .ftr { padding: 44px 20px 28px; }
  .ftr-top { padding-bottom: 36px; gap: 30px; }
  .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; padding: 36px 0; }
  .ftr-signup { width: 100%; }
  .ftr-base { gap: 16px 24px; }
  .ftr-social { margin-right: 0; }
}

/* Smallest phones: the brand lettering was squeezing the icon buttons until the
   menu glyph clipped, so it tightens and the icon groups stop shrinking. */
@media (max-width: 380px) {
  .hdr { padding: 16px 14px; gap: 10px; }
  .hdr-brand { font-size: 11px; letter-spacing: 2.4px; }
  .hdr-side { flex: 0 0 auto; }
  .hdr-side--end { gap: 14px; }
  .grid { gap: 24px 10px; padding: 20px 14px 60px; }
}

@media (prefers-reduced-motion: no-preference) {
  .frame img, .shot img, .banner img { transition: transform 600ms cubic-bezier(0.2, 0, 0.1, 1); }
  .card:not(.card--inert):hover .frame img, .banner:hover img { transform: scale(1.03); }
}

/* -------------------------------------------------------- 360° visualiser */

.viz-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 0;
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 4px;
  transition: color 200ms ease, border-color 200ms ease;
}
.viz-launch:hover { color: var(--muted); border-color: var(--muted); }
.viz-launch svg { flex: 0 0 auto; }

.card-viz {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}

.viz {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 280ms ease;
}
.viz.is-on { opacity: 1; }

.viz-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 17, 0.72);
}

.viz-stage {
  position: relative;
  width: min(920px, calc(100% - 28px));
  height: min(88vh, 760px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, #2a2623 0%, #141210 72%);
  display: flex;
  flex-direction: column;
  color: #f4f2ee;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.viz-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  color: rgba(244, 242, 238, 0.7);
}
.viz-close:hover { color: #fff; }

.viz-head {
  flex: 0 0 auto;
  padding: 28px 28px 8px;
  text-align: center;
}
.viz-kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.55);
}
.viz-title {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.viz-meta {
  margin: 10px 0 0;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(244, 242, 238, 0.58);
}

.viz-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 12px;
}
.viz-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.viz-canvas:active { cursor: grabbing; }

.viz-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 48%, transparent 40%, rgba(10, 9, 8, 0.35) 100%);
}

.viz-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 12px 24px 22px;
}
.viz-hint {
  margin: 0;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.45);
}
.viz-actions { display: flex; gap: 10px; }
.viz-btn {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(244, 242, 238, 0.28);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #f4f2ee;
  transition: background 180ms ease, border-color 180ms ease;
}
.viz-btn:hover { border-color: rgba(244, 242, 238, 0.7); }
.viz-btn--solid {
  background: #f4f2ee;
  border-color: #f4f2ee;
  color: #141210;
}
.viz-btn--solid:hover { background: #fff; }

@media (max-width: 700px) {
  .viz-stage { width: 100%; height: 100%; max-height: none; }
  .viz-head { padding: 56px 20px 4px; }
  .viz-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 10px 16px 28px;
  }
  .viz-actions { justify-content: center; }
  .viz-hint { letter-spacing: 1.6px; }
}

@media (prefers-reduced-motion: reduce) {
  .viz { transition: none; }
}