/* 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: #17140f;
  --ink-soft: #2b2620;
  --muted: #6b6259;
  --rule: #e3ddd0;
  --tile: #f5f1e8;
  --shell: #ece7db;
  --cta-alt: #f4f0e6;
  --cta-alt-hover: #ebe5d7;
  --swatch-rule: #ddd6c8;
  /* Matches the home page, so one serif runs across the whole site. EB Garamond
     Garamond has real lower-case letterforms, which is what lets headlines
     run in mixed case instead of a permanent shout of tracked capitals. */
  --serif: "EB Garamond", Garamond, Georgia, 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(32px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.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-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* 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-weight: 500; font-size: 24px; letter-spacing: -0.01em; }
.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: 500;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  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-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.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; }
/* On a phone every frame is a square, whatever the photograph's own shape.
   The gallery mixes square plates with portrait model frames, and letting
   each keep its proportions made the carousel change height under the thumb
   as it was swiped — the piece jumped, and the page jumped with it. One
   shape holds still.

   `cover` rather than `contain`: a square plate is already square and is not
   touched, while a portrait model frame loses a sixth from top and bottom
   instead of being matted into bands of empty ground. The jewellery in these
   frames is worn at the ear, the throat and the wrist, and the shots run from
   a tight crop on a collarbone to a full-length figure, so no single crop
   position suits them all — one value framed one shot and cut the necklace
   off the next. Each photograph carries its own, measured from where the
   stones actually are; the fallback only applies to a frame without one. */
.gal-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
}
.gal-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center var(--focal, 60%);
}

.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; }
  /* A mosaic, not a stack: the opening frame runs the full column width and
     everything after it pairs off two across. Pieces now carry their whole
     shoot — as many as eight stills — and a single column of those towered
     past the pinned info column by several screens. Paired, the same set
     reads as one spread and the two columns finish together. */
  .gal-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
  }
  .gal-slide { aspect-ratio: auto; max-height: none; }
  /* The lead still opens wide; a piece photographed only once keeps the
     full-width frame rather than sitting in a half-empty row. */
  .gal-slide:first-child { grid-column: 1 / -1; }
  /* An even tail would otherwise leave the last frame orphaned beside white,
     so an odd remainder closes the set at full width too. */
  .gal-slide:last-child:nth-child(even) { grid-column: 1 / -1; }
  /* Desktop keeps each photograph's own proportions in the mosaic, so the
     square crop the phone applies is undone here rather than left to depend
     on the box happening to match the image. */
  .gal-slide img { height: auto; object-fit: fill; object-position: center; }
  .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: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.01em;
}
.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: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.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: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.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 */

/* This page mounts the shared footer (GemFooter), so its styles come from
   css/site-footer.css. The block that used to sit here styled a footer this
   page stopped rendering, and its .ftr / .ftr-top / .ftr-cols rules landed
   on the shared markup instead. */

/* --------------------------------------------------------------- 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; }
  /* The editorial rows run edge to edge on a phone. Inset by the page gutter
     they read as four cards in a product listing; full width they read as a
     spread, which is the difference between a catalogue and a story. Only the
     photograph breaks out — the copy keeps the gutter so the measure holds. */
  .story { gap: 56px; padding: 56px 0 8px; }
  .story-block { grid-template-columns: 1fr; gap: 20px; }
  .story-block--right .story-shot { order: 0; }
  .story-text { padding: 0 20px; }
  .story-p { max-width: none; }
  .faq { padding: 0 20px 48px; }
  .concierge { padding: 40px 20px; }
  .specs { padding: 40px 20px; gap: 32px 20px; }
  .concierge-cta { align-self: stretch; text-align: center; }

}

/* 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: 500;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.01em;
}
.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; }
}

/* Link out to a piece's own editorial page, where one exists. */
.pdp-story-link {
  display: inline-block;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.pdp-story-link:hover { opacity: 0.66; }

/* A story that has not been written yet. Same shape as the link beside it so
   the grid keeps its rhythm, but plainly not clickable: no border, no hover,
   and the cursor never changes. */
.card-book--soon {
  display: inline-block;
  border-color: transparent;
  color: var(--ink-faint, #a29c94);
  cursor: default;
}
.card-book--soon:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint, #a29c94);
}
.pdp-story-link--soon {
  border-bottom-color: transparent;
  color: var(--ink-faint, #a29c94);
  cursor: default;
}
.pdp-story-link--soon:hover { opacity: 1; }