/* =========================================================================
   Public SHOP — "the vitrine".
   Scope: body.site-shop, #siteRoot .shop-* / .pc / .pd / .lightbox ONLY.
   Extends the Light Organism system in css/site.css; adds no parallel system
   and overrides no existing selector.

   The problem this file solves: the night is the identity, but product
   photography arrives on its own backdrop — the bracelets on white, the books
   on near-black. A bright photo dropped straight onto #0a0d18 reads as a hole.
   So every photograph sits on a PLATE with a hairline, a warm bounce and a
   vignette: glass in a dark room. The plate colour follows the MEASURED
   background of each file (.pc-bg-light / .pc-bg-dark), so both kinds of
   photography belong to the same page without touching --lo-canvas.

   All content is visible by CSS default; motion is enhancement only.
   ========================================================================= */
:root {
  --lo-plate: #f4efe3;            /* the lit ivory plate — the only bright surface on the page */
  --lo-plate-deep: #e6ddc9;
  --lo-plate-dark: #12172a;       /* plate for photography already shot on near-black */
  --lo-plate-line: rgba(201, 162, 75, 0.30);
  --r-plate: 14px;
  --r-plate-in: 11px;
  --facet-cut: 14px;
  --track-card: 0.22em;           /* --track-label (0.34em) breaks inside a narrow card */
}

/* ---- page state: solid night, no organism, no map ------------------------ */
body.site-shop #heroCanvas { opacity: 1; }
body.site-shop #siteRoot { background: var(--lo-canvas); }
body.site-shop #siteHeader {
  background: rgba(9, 12, 22, 0.9);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--hairline);
}
body.lb-open #siteRoot { overflow: hidden; }

.shop-body { color: var(--lo-body); }
.shop-body a { color: inherit; }

/* ---- the shared rule (facet-cut hairline broken by a light point) -------- */
.sh-rule {
  position: relative; width: min(300px, 56vw); height: 0.5px; opacity: 0.55;
  margin: clamp(20px, 2.6vh, 30px) 0;
  background: linear-gradient(90deg, transparent, var(--lo-gold) 26%, transparent 45%, transparent 55%, var(--lo-gold) 74%, transparent);
}
.sh-rule::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
  margin: -2px 0 0 -2px; background: var(--lo-gold-bright); transform: rotate(45deg);
  box-shadow: 0 0 9px 1px rgba(227, 184, 79, 0.5);
}

/* =========================================================================
   SHOP hero — a lintel, not a stage. Deliberately ~60% of the home display
   size so it can never compete with the homepage hero.
   ========================================================================= */
.shop-hero {
  position: relative; min-height: 46svh; display: flex; align-items: flex-end;
  padding: clamp(132px, 17vh, 190px) clamp(20px, 4vw, 34px) clamp(44px, 6vh, 76px);
  overflow: hidden;
}
.shop-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/assets/hero-atmosphere.webp') center / cover no-repeat;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 92%);
}
.sh-hero-inner { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; }
.sh-eyebrow {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--lo-muted);
}
.sh-title {
  font-family: var(--lo-display); font-weight: 500; color: var(--lo-ivory);
  font-size: clamp(34px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -0.008em;
  margin: 16px 0 0; max-width: 26ch; text-wrap: balance;
}
.sh-title:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 8px; }
.sh-lead {
  font-family: var(--lo-display); color: var(--lo-spark-dim);
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; max-width: 44ch; margin: 0;
}
.sh-free {
  color: var(--lo-faint); font-size: 13.5px; line-height: 1.8; max-width: 56ch;
  margin: 18px 0 0;
}
.sh-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }
.sh-chips a {
  display: inline-block; text-decoration: none; border: 0.5px solid var(--lo-line);
  border-radius: 999px; padding: 10px 17px; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-card); text-transform: uppercase; color: var(--lo-spark);
  transition: border-color 0.3s var(--ease-organic), color 0.3s var(--ease-organic), background 0.3s var(--ease-organic);
}
.sh-chips a:hover { border-color: var(--lo-gold); color: var(--lo-gold-bright); background: rgba(201, 162, 75, 0.05); }
.sh-chips a:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }

/* ---- the Diamond ID promise — a quiet instrument note, never a sales badge */
.did-note {
  display: flex; align-items: flex-start; gap: 13px; margin: 26px 0 0;
  max-width: 62ch; padding: 14px 0 0; border-top: 0.5px solid rgba(201, 162, 75, 0.16);
}
.did-note .did-ic { flex: none; margin-top: 1px; color: var(--lo-gold); }
.did-note .did-t { margin: 0; color: var(--lo-spark-dim); font-size: 13px; line-height: 1.75; }
.did-note .did-t b { color: var(--lo-gold-bright); font-weight: 600; }
.did-inline {
  margin: 16px 0 0; padding: 13px 15px; border: 0.5px solid rgba(201, 162, 75, 0.2);
  border-radius: 9px; background: rgba(201, 162, 75, 0.035);
  display: flex; align-items: flex-start; gap: 11px;
}
.did-inline .did-ic { flex: none; margin-top: 1px; color: var(--lo-gold); }
.did-inline p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--lo-spark-dim); }
.did-inline p b { color: var(--lo-gold-bright); font-weight: 600; }

/* =========================================================================
   The plate — one component, two grounds
   ========================================================================= */
.pc-frame {
  position: relative; display: block; border-radius: var(--r-plate);
  box-shadow:
    0 0 0 0.5px var(--lo-plate-line),
    0 26px 62px -26px rgba(3, 5, 12, 0.92),
    0 16px 40px -30px rgba(227, 184, 79, 0.2);   /* warm bounce — never a bloom */
  transition: transform 0.6s var(--ease-organic), box-shadow 0.5s var(--ease-organic);
}
.pc-plate {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: var(--r-plate-in);
  clip-path: polygon(var(--facet-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--facet-cut));
}
.pc-bg-light { background: radial-gradient(120% 104% at 50% 34%, var(--lo-plate) 0%, #efe8d9 54%, var(--lo-plate-deep) 100%); }
.pc-bg-dark { background: radial-gradient(120% 104% at 50% 34%, #1a2136 0%, var(--lo-plate-dark) 58%, #0d1220 100%); }
/* Aspect sits on the frame so the plate can fill it with zero layout shift. */
.pc-square { aspect-ratio: 1; }
.pc-portrait { aspect-ratio: 4 / 5; }

.pc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 8%;
  transition: transform 0.9s var(--ease-organic), opacity 0.6s var(--ease-organic);
}
/* Multiply erases a pure-white studio backdrop against the ivory plate, so the object floats
   on the plate instead of sitting in a white box. Dark-ground photography is left untouched. */
.pc-bg-light > .pc-img { mix-blend-mode: multiply; }
.pc-portrait .pc-img { padding: 6%; }
.pc-square .pc-img { padding: 10%; }
/* A photo that fails to load leaves a quiet plate — the product stays fully usable. */
.pc-plate.is-broken > .pc-img, .pg-thumb-plate.is-broken > img { opacity: 0; }

/* the plate settles into the night rather than ending on a hard edge */
.pc-plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(122% 118% at 50% 40%, transparent 44%, rgba(10, 13, 24, 0.05) 74%, rgba(10, 13, 24, 0.15) 100%),
    linear-gradient(180deg, transparent 68%, rgba(10, 13, 24, 0.09) 100%);
}
.pc-bg-dark::after { background: radial-gradient(122% 118% at 50% 40%, transparent 52%, rgba(4, 6, 14, 0.34) 100%); }

/* =========================================================================
   Product card — no box, no padding. The plate is the only surface.
   ========================================================================= */
.pgrid {
  display: grid; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(34px, 4vh, 54px) clamp(20px, 2.6vw, 32px);
}
.pgrid-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc { min-width: 0; }
.pc-link { display: block; text-decoration: none; border-radius: var(--r-plate); }
.pc-link:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 6px; }
.pc-body { display: block; padding-top: 20px; }
.pc-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 16px; }
.pc-col {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-card);
  text-transform: uppercase; color: var(--lo-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-name {
  display: block; margin-top: 10px; font-family: var(--lo-display); font-weight: 500;
  font-size: clamp(19px, 1.55vw, 23px); line-height: 1.22; color: var(--lo-ivory);
  text-wrap: balance;
}
.pc-rule {
  display: block; width: 34px; height: 0.5px; margin: 14px 0 0; opacity: 0.5;
  background: linear-gradient(90deg, var(--lo-gold), transparent);
  transition: width 0.5s var(--ease-organic), opacity 0.4s var(--ease-organic);
}
.pc-price {
  display: block; margin-top: 12px; font-family: var(--lo-sans); font-size: 15px; font-weight: 600;
  letter-spacing: 0.05em; color: var(--lo-body);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1;
  unicode-bidi: isolate;
}
.pc-from { font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lo-faint); }
.pc-cta {
  display: block; margin-top: 12px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lo-faint);
  transition: color 0.3s var(--ease-organic);
}

/* the alternate frame appears on hover, on devices that actually hover */
.pc-img-alt { opacity: 0; }
@media (hover: hover) {
  .pc-link:hover .pc-frame,
  .pc-link:focus-visible .pc-frame {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 0.5px rgba(201, 162, 75, 0.46),
      0 34px 74px -26px rgba(3, 5, 12, 0.95),
      0 18px 44px -30px rgba(227, 184, 79, 0.26);
  }
  .pc-link:hover .pc-img { transform: scale(1.035); }
  .pc-link:hover .pc-img-alt { opacity: 1; }
  .pc-link:hover .pc-rule { width: 56px; opacity: 0.85; }
  .pc-link:hover .pc-cta { color: var(--lo-gold-bright); }
}

/* Sold out: the warm bounce goes out — the piece has stopped being lit. */
.pc.is-sold .pc-frame { box-shadow: 0 0 0 0.5px var(--lo-line), 0 20px 50px -28px rgba(3, 5, 12, 0.85); }
.pc.is-sold .pc-img { filter: saturate(0.5) brightness(0.9); opacity: 0.84; }
.pc.is-sold .pc-name { color: var(--lo-spark-dim); }
.pc.is-sold .pc-price { color: var(--lo-faint); }
@media (hover: hover) {
  .pc.is-sold .pc-link:hover .pc-frame { transform: none; box-shadow: 0 0 0 0.5px var(--lo-line), 0 20px 50px -28px rgba(3, 5, 12, 0.85); }
  .pc.is-sold .pc-link:hover .pc-img { transform: none; }
}

/* ---- state tag: one glyph, two states (lit facet / dark facet) ---------- */
.tag-state {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 0.5px solid var(--lo-line);
  color: var(--lo-faint); white-space: nowrap;
}
.tag-state::before {
  content: ''; width: 3px; height: 3px; transform: rotate(45deg);
  border: 0.5px solid currentColor;
}
.tag-state.is-on { color: var(--lo-gold); border-color: rgba(201, 162, 75, 0.34); }
.tag-state.is-on::before { background: var(--lo-gold-bright); border-color: var(--lo-gold-bright); }

/* =========================================================================
   Collection bands on the shop index
   ========================================================================= */
.col-band { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vh, 110px) clamp(20px, 4vw, 34px); }
.col-band + .col-band { border-top: 0.5px solid rgba(201, 162, 75, 0.1); }
.cb-head { display: flex; align-items: baseline; gap: clamp(12px, 1.6vw, 22px); }
.cb-idx {
  font-family: var(--lo-display); font-weight: 600; font-size: 17px; color: var(--lo-gold);
  font-variant-numeric: lining-nums tabular-nums; flex: none;
}
.cb-name {
  font-family: var(--lo-display); font-weight: 500; color: var(--lo-ivory);
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; margin: 0; text-wrap: balance;
}
.cb-line { flex: 1; height: 0.5px; background: var(--hairline); opacity: 0.35; min-width: 20px; }
.cb-count {
  flex: none; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-card);
  text-transform: uppercase; color: var(--lo-faint);
  font-variant-numeric: lining-nums tabular-nums;
}
.cb-body {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px); align-items: center; margin-top: clamp(26px, 3.4vh, 40px);
}
.cb-figure { display: block; text-decoration: none; }
.cb-range {
  font-family: var(--lo-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--lo-spark-dim); font-variant-numeric: lining-nums tabular-nums;
  margin: 0; unicode-bidi: isolate;
}
.cb-explore {
  display: inline-block; margin-top: 18px; text-decoration: none;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lo-gold-bright); border-bottom: 0.5px solid rgba(201, 162, 75, 0.4);
  padding-bottom: 5px; transition: border-color 0.3s var(--ease-organic), color 0.3s var(--ease-organic);
}
.cb-explore:hover { color: var(--lo-ivory); border-bottom-color: var(--lo-gold); }
.cb-explore:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }

/* =========================================================================
   Grid page furniture — toolbar, empty state, disclosure
   ========================================================================= */
.shop-all { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vh, 110px) clamp(20px, 4vw, 34px) clamp(70px, 10vh, 120px); border-top: 0.5px solid rgba(201, 162, 75, 0.1); }
.sa-lead { color: var(--lo-muted); font-size: 15px; margin: 16px 0 0; }
.col-page { max-width: 1240px; margin: 0 auto; padding: clamp(112px, 14vh, 150px) clamp(20px, 4vw, 34px) clamp(70px, 10vh, 120px); min-height: 100svh; }
.cp-head { margin-bottom: clamp(26px, 3.4vh, 40px); }
.cp-title { font-family: var(--lo-display); font-weight: 500; color: var(--lo-ivory); font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin: 14px 0 0; text-wrap: balance; }
.cp-title:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 8px; }
.cp-count { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-card); text-transform: uppercase; color: var(--lo-faint); margin: 0; unicode-bidi: isolate; }

.shop-crumbs { margin-bottom: 22px; }
.shop-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.shop-crumbs li { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lo-faint); min-width: 0; }
.shop-crumbs a { color: var(--lo-muted); text-decoration: none; transition: color 0.3s var(--ease-organic); }
.shop-crumbs a:hover { color: var(--lo-gold-bright); }
.shop-crumbs a:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 3px; }
.shop-crumbs [aria-current='page'] { color: var(--lo-spark-dim); display: inline-block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-crumbs .sb-sep { color: var(--lo-line); }

.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 22px;
  padding: 14px 0; margin: clamp(22px, 3vh, 34px) 0 clamp(30px, 4vh, 44px);
  border-top: 0.5px solid var(--lo-line); border-bottom: 0.5px solid var(--lo-line);
}
.st-count { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-card); text-transform: uppercase; color: var(--lo-muted); }
.st-of { color: var(--lo-faint); }
.st-controls { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.st-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; color: var(--lo-muted); padding: 8px 0; }
.st-check input { width: 15px; height: 15px; accent-color: var(--lo-gold); cursor: pointer; }
.st-check:hover { color: var(--lo-spark); }
.st-sort { display: inline-flex; align-items: center; gap: 10px; }
.st-sort-k { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-card); text-transform: uppercase; color: var(--lo-faint); }
.st-sort select {
  appearance: none; background: transparent; color: var(--lo-spark); cursor: pointer;
  border: 0.5px solid var(--lo-line); border-radius: 7px; padding: 10px 34px 10px 13px;
  font-family: var(--lo-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
  background-image: linear-gradient(45deg, transparent 50%, var(--lo-gold) 50%), linear-gradient(135deg, var(--lo-gold) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% - 1px), calc(100% - 12px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color 0.3s var(--ease-organic);
}
html[dir='rtl'] .st-sort select { padding: 10px 13px 10px 34px; background-position: 12px calc(50% - 1px), 17px calc(50% - 1px); }
.st-sort select:hover { border-color: var(--lo-gold); }
.st-sort select:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 3px; }
.st-sort select option { background: var(--lo-raised); color: var(--lo-body); }

.shop-empty { text-align: center; padding: clamp(50px, 8vh, 90px) 20px; border: 0.5px solid var(--lo-line); border-radius: 12px; background: var(--lo-raised); }
.se-title { font-family: var(--lo-display); font-size: clamp(20px, 2.2vw, 26px); color: var(--lo-ivory); margin: 0; }
.se-body { color: var(--lo-muted); font-size: 14.5px; line-height: 1.8; max-width: 46ch; margin: 14px auto 0; }
.se-btn {
  margin-top: 22px; cursor: pointer; background: none; border: 0.5px solid var(--lo-line);
  border-radius: 7px; padding: 11px 20px; color: var(--lo-spark); font-family: var(--lo-sans);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  transition: border-color 0.3s var(--ease-organic), color 0.3s var(--ease-organic);
}
.se-btn:hover { border-color: var(--lo-gold); color: var(--lo-gold-bright); }
.se-btn:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }

.col-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.col-list a { text-decoration: none; color: var(--lo-spark); font-size: 14.5px; border-bottom: 0.5px solid var(--lo-line); padding-bottom: 4px; transition: color 0.3s var(--ease-organic), border-color 0.3s var(--ease-organic); }
.col-list a:hover { color: var(--lo-gold-bright); border-bottom-color: var(--lo-gold); }
.col-list a:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }

.shop-disclosure { margin: clamp(40px, 6vh, 70px) 0 0; color: var(--lo-faint); font-size: 12px; line-height: 1.8; max-width: 64ch; }
.shop-backlink { margin: 30px 0 0; }
.shop-backlink a { text-decoration: none; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lo-muted); transition: color 0.3s var(--ease-organic); }
.shop-backlink a:hover { color: var(--lo-gold-bright); }
.shop-backlink a:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }
.shop-nf { text-align: center; }
.shop-nf .sh-rule { margin-inline: auto; }
.shop-nf .shop-crumbs ol { justify-content: center; }
.nf-body { color: var(--lo-muted); font-size: 15px; line-height: 1.85; max-width: 48ch; margin: 20px auto 0; }

/* ---- the bridge: story -> acquisition, and the FAQ ---------------------- */
.shop-bridge {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(70px, 10vh, 120px) clamp(20px, 4vw, 34px);
  border-top: 0.5px solid rgba(201, 162, 75, 0.1);
}
.sb-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 78px); align-items: start; }
.sb-kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--lo-gold); margin: 0; }
.sb-title { font-family: var(--lo-display); font-weight: 500; color: var(--lo-ivory); font-size: clamp(24px, 2.9vw, 36px); line-height: 1.18; margin: 14px 0 0; text-wrap: balance; }
.sb-prose { max-width: 54ch; }
.sb-prose p { font-family: var(--lo-display); font-size: clamp(16px, 1.45vw, 18px); line-height: 1.9; color: var(--lo-body); margin: 0 0 16px; }
.sb-prose p:last-child { margin-bottom: 0; }
.faq { margin: 0; }
.faq details {
  border-top: 0.5px solid var(--lo-line); padding: 0;
}
.faq details:last-child { border-bottom: 0.5px solid var(--lo-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 30px 17px 0; position: relative;
  font-size: 14.5px; font-weight: 600; color: var(--lo-spark); letter-spacing: 0.01em;
  transition: color 0.3s var(--ease-organic);
}
html[dir='rtl'] .faq summary { padding: 17px 0 17px 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; inset-inline-end: 4px; top: 50%; width: 8px; height: 8px;
  margin-top: -5px; border-inline-end: 1px solid var(--lo-gold); border-bottom: 1px solid var(--lo-gold);
  transform: rotate(45deg); transition: transform 0.35s var(--ease-organic);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--lo-gold-bright); }
.faq summary:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 3px; }
.faq .faq-a { margin: 0 0 20px; padding-inline-end: 30px; font-size: 13.5px; line-height: 1.85; color: var(--lo-muted); max-width: 56ch; }

/* =========================================================================
   Product detail
   ========================================================================= */
.pd { max-width: 1240px; margin: 0 auto; padding: clamp(112px, 14vh, 150px) clamp(20px, 4vw, 34px) clamp(70px, 10vh, 120px); }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(340px, 0.68fr); gap: clamp(36px, 5vw, 84px); align-items: start; }
.pd-info { position: sticky; top: 118px; min-width: 0; }
.pd-col { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-card); text-transform: uppercase; color: var(--lo-muted); margin: 0; }
.pd-name { font-family: var(--lo-display); font-weight: 500; color: var(--lo-ivory); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; margin: 12px 0 0; text-wrap: balance; }
.pd-name:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 8px; }
.pd-state { margin: 16px 0 0; }
.pd-rule { margin: clamp(18px, 2.4vh, 26px) 0; }

/* price as an instrument reading, in the same voice the site measures distance */
.pd-price { margin: 0; }
.pd-price-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lo-faint); }
.pd-price-v {
  font-family: var(--lo-sans); font-size: 23px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--lo-ivory); margin-top: 7px; unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.pd-price-from { font-size: 0.6em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lo-faint); margin-inline-end: 7px; }
.pd-price-note { color: var(--lo-faint); font-size: 12px; line-height: 1.7; margin: 10px 0 0; max-width: 44ch; }

/* variant axes — facet swatches, never a select */
.vaxis { margin-top: clamp(22px, 3vh, 30px); }
.va-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lo-faint); }
.va-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.vopt {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  cursor: pointer; background: none; border: 0.5px solid var(--lo-line); border-radius: 8px;
  padding: 11px 15px; min-height: 44px; color: var(--lo-spark); font-family: var(--lo-sans);
  text-align: start;
  transition: border-color 0.3s var(--ease-organic), background 0.3s var(--ease-organic), color 0.3s var(--ease-organic);
}
.vopt .vo-v { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.vopt .vo-p { font-size: 11.5px; color: var(--lo-faint); font-variant-numeric: lining-nums tabular-nums; unicode-bidi: isolate; }
.vopt:hover { border-color: var(--lo-gold); background: rgba(201, 162, 75, 0.05); }
.vopt.is-on { border-color: var(--lo-gold); box-shadow: inset 0 0 0 0.5px var(--lo-gold); color: var(--lo-ivory); }
.vopt.is-on .vo-p { color: var(--lo-gold-bright); }
.vopt:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }
/* unavailable: dimmed, still reachable, still explains itself — never hidden, never disabled */
.vopt.is-off { color: var(--lo-faint); border-style: dashed; }
.vopt.is-off .vo-p { color: var(--lo-faint); }
.vo-hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--lo-spark-dim); }
.vo-fix {
  display: inline-block; margin-inline-start: 8px; cursor: pointer; background: none;
  border: 0; padding: 0; color: var(--lo-gold-bright); font-family: var(--lo-sans);
  font-size: 12.5px; font-weight: 700; border-bottom: 0.5px solid rgba(201, 162, 75, 0.5);
}
.vo-fix:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 3px; }

.pd-selection { margin: clamp(20px, 2.6vh, 28px) 0 0; font-size: 13px; }
.pd-selection .ps-k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lo-faint); margin-inline-end: 8px; }
.pd-selection .ps-v { color: var(--lo-spark); }
/* Announcements are for assistive tech only: sighted readers already see the price change and,
   for an unavailable pair, the .vo-hint explanation under the axis. Showing both would print the
   same sentence twice. The element lives on <body>, outside every subtree the screens repaint —
   a live region inserted together with its text is not announced by most screen readers. */
.shop-sr-only {
  position: fixed; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pd-act { margin-top: clamp(22px, 3vh, 30px); }
.pd-buy { text-decoration: none; width: 100%; }
.pd-buy-note { color: var(--lo-faint); font-size: 11.5px; line-height: 1.7; margin: 14px 0 0; max-width: 44ch; }
.pd-cta-off {
  margin: 0; padding: 17px 20px; text-align: center; border: 0.5px dashed var(--lo-line);
  border-radius: 9px; color: var(--lo-spark-dim); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
}
.pd-note { color: var(--lo-faint); font-size: 12px; line-height: 1.75; margin: clamp(20px, 2.6vh, 28px) 0 0; max-width: 46ch; }

/* ---- gallery ---- */
.pg-main {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  position: relative;
}
.pg-main:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 6px; }
.pg-zoom-ic {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  color: var(--lo-ivory); background: rgba(9, 12, 22, 0.62); border: 0.5px solid rgba(201, 162, 75, 0.34);
  backdrop-filter: blur(6px); opacity: 0.75; transition: opacity 0.3s var(--ease-organic);
}
.pg-main:hover .pg-zoom-ic { opacity: 1; }
.pg-thumbs { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pg-thumbs::-webkit-scrollbar { display: none; }
.pg-thumb {
  position: relative; flex: none; cursor: pointer; padding: 0; background: none;
  border: 0.5px solid var(--lo-line); border-radius: 8px; overflow: hidden;
  width: 66px; height: 66px; transition: border-color 0.3s var(--ease-organic);
}
.pg-thumb-plate { display: block; width: 100%; height: 100%; }
.pg-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pg-thumb-plate.pc-bg-light > img { mix-blend-mode: multiply; }
.pg-thumb:hover { border-color: var(--lo-gold); }
.pg-thumb.is-on { border-color: var(--lo-gold); }
.pg-thumb.is-on::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--lo-gold-bright); box-shadow: 0 0 7px 1px rgba(227, 184, 79, 0.6);
}
.pg-thumb:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 3px; }
.pg-count { margin: 12px 0 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.24em; color: var(--lo-faint); unicode-bidi: isolate; }

/* ---- sections ---- */
.pd-sec { margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(30px, 4vh, 44px); border-top: 0.5px solid rgba(201, 162, 75, 0.12); }
.pd-h { font-family: var(--lo-display); font-weight: 500; color: var(--lo-ivory); font-size: clamp(21px, 2.3vw, 28px); margin: 0 0 22px; }
.pd-prose { max-width: 68ch; }
.pd-prose p { font-family: var(--lo-display); font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.9; color: var(--lo-body); margin: 0 0 18px; }
.pd-prose p:last-child { margin-bottom: 0; }
.pd-spec { margin: 0; max-width: 640px; }
.ps-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: baseline; padding: 13px 0; border-top: 0.5px solid var(--lo-line); }
.ps-row:first-child { border-top: 0; }
.ps-row dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lo-muted); }
.ps-row dd { margin: 0; font-size: 14.5px; color: var(--lo-spark); text-align: end; unicode-bidi: isolate; }
.pd-source { margin: 26px 0 0; }
.pd-source a { text-decoration: none; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lo-gold-bright); border-bottom: 0.5px solid rgba(201, 162, 75, 0.4); padding-bottom: 4px; }
.pd-source a:hover { color: var(--lo-ivory); }
.pd-source a:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 4px; }

/* =========================================================================
   Lightbox — the only modal in the shop, and always reader-initiated
   ========================================================================= */
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.lb-shade { position: absolute; inset: 0; background: rgba(4, 6, 13, 0.94); backdrop-filter: blur(6px); border: 0; cursor: zoom-out; }
.lb-stage { position: relative; z-index: 1; display: grid; place-items: center; gap: 14px; padding: clamp(52px, 8vh, 80px) clamp(52px, 9vw, 110px); max-width: 100vw; }
.lb-img { max-width: min(92vw, 1100px); max-height: 78svh; object-fit: contain; border-radius: 10px; }
.lb-bg-light { background: var(--lo-plate); padding: 2%; }
.lb-count { margin: 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.24em; color: var(--lo-faint); }
.lb-btn {
  position: absolute; z-index: 2; display: grid; place-items: center; cursor: pointer;
  width: 46px; height: 46px; border-radius: 999px; color: var(--lo-ivory);
  background: rgba(14, 19, 34, 0.8); border: 0.5px solid var(--lo-line);
  transition: border-color 0.3s var(--ease-organic), color 0.3s var(--ease-organic);
}
.lb-btn:hover { border-color: var(--lo-gold); color: var(--lo-gold-bright); }
.lb-btn:focus-visible { outline: 1px solid var(--lo-gold); outline-offset: 3px; }
.lb-close { top: clamp(14px, 3vh, 26px); inset-inline-end: clamp(14px, 3vw, 26px); }
.lb-prev { inset-inline-start: clamp(10px, 2.4vw, 26px); top: 50%; margin-top: -23px; }
.lb-next { inset-inline-end: clamp(10px, 2.4vw, 26px); top: 50%; margin-top: -23px; }
html[dir='rtl'] .lb-prev svg, html[dir='rtl'] .lb-next svg { transform: scaleX(-1); }

/* =========================================================================
   RTL — Hebrew is a first-class voice here too
   ========================================================================= */
html[dir='rtl'] .sh-title, html[dir='rtl'] .cb-name, html[dir='rtl'] .cp-title,
html[dir='rtl'] .pd-name, html[dir='rtl'] .pd-h, html[dir='rtl'] .se-title,
html[dir='rtl'] .sb-title { font-family: var(--lo-display-he); font-weight: 700; }
html[dir='rtl'] .sh-title { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.16; }
html[dir='rtl'] .pc-name { font-family: var(--lo-display-he); font-weight: 700; font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.34; }
html[dir='rtl'] .pd-prose p, html[dir='rtl'] .sb-prose p { font-family: var(--lo-display-he); font-size: clamp(16px, 1.45vw, 17.5px); line-height: 2; }
html[dir='rtl'] .sh-lead { font-family: var(--lo-display-he); }
/* Hebrew dislikes wide tracking on caps-style labels — same correction site.css makes */
html[dir='rtl'] .sh-eyebrow, html[dir='rtl'] .pc-col, html[dir='rtl'] .cb-count,
html[dir='rtl'] .st-count, html[dir='rtl'] .st-sort-k, html[dir='rtl'] .cp-count,
html[dir='rtl'] .pc-cta, html[dir='rtl'] .tag-state, html[dir='rtl'] .va-k,
html[dir='rtl'] .pd-price-k, html[dir='rtl'] .ps-row dt, html[dir='rtl'] .pd-col,
html[dir='rtl'] .shop-crumbs li, html[dir='rtl'] .sh-chips a, html[dir='rtl'] .sb-kicker,
html[dir='rtl'] .pd-selection .ps-k, html[dir='rtl'] .shop-backlink a,
html[dir='rtl'] .cb-explore, html[dir='rtl'] .pd-source a, html[dir='rtl'] .se-btn { letter-spacing: 0.06em; }
/* the facet cut and the card rule follow the reading direction */
html[dir='rtl'] .pc-plate { clip-path: polygon(0 0, calc(100% - var(--facet-cut)) 0, 100% var(--facet-cut), 100% 100%, 0 100%); }
html[dir='rtl'] .pc-rule { background: linear-gradient(270deg, var(--lo-gold), transparent); }
html[dir='rtl'] .cb-explore span { display: inline-block; transform: scaleX(-1); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1240px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .pd-grid { grid-template-columns: 1fr; gap: 34px; }
  .pd-info { position: static; top: auto; }
  .pd-buy { max-width: 420px; }
  .sb-inner { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 900px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-body { grid-template-columns: 1fr; }
  .cb-figure { max-width: 320px; }
  .cb-head { flex-wrap: wrap; }
  .cb-line { display: none; }
  .shop-hero { min-height: 40svh; padding-top: clamp(118px, 15vh, 160px); }
}
@media (max-width: 640px) {
  /* the mobile header is two rows tall (site.css), so every shop page starts lower */
  .shop-hero { padding: 132px 18px 44px; min-height: auto; }
  .col-page, .pd { padding: 128px 18px 74px; }
  .shop-all, .col-band, .shop-bridge { padding-inline: 18px; }
  .sh-title { font-size: clamp(28px, 8.6vw, 38px); }
  .sh-chips a { padding: 11px 14px; font-size: 10px; }
  .pgrid { gap: 30px 16px; }
  /* On a phone a bracelet still reads as an object on a tray at two-up, but a book cover does
     not — it wants the full column. Portrait plates therefore span the row. */
  .pgrid .pc:has(.pc-portrait) { grid-column: 1 / -1; }
  .pgrid-rel { grid-template-columns: 1fr; }
  .pc-name { font-size: 17.5px; }
  .pc-body { padding-top: 16px; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .st-controls { width: 100%; justify-content: space-between; }
  .pd-buy { max-width: none; }
  .btn-ignite.pd-buy { padding: 17px 20px; font-size: 13.5px; letter-spacing: 0.06em; }
  .ps-row { grid-template-columns: 1fr; }
  .ps-row dd { text-align: start; }
  .pg-thumb { width: 58px; height: 58px; }
  .lb-stage { padding: 62px 14px 74px; }
  .lb-prev { top: auto; bottom: 16px; inset-inline-start: 26%; margin-top: 0; }
  .lb-next { top: auto; bottom: 16px; inset-inline-end: 26%; margin-top: 0; }
  .shop-crumbs [aria-current='page'] { max-width: 22ch; }
}
/* Phones get one piece per row.
   This used to stop at 340px, on the assumption that "375px still reads well two-up". Screenshots
   at 375 and 390 say otherwise: two-up leaves a 157px card, which truncates the collection eyebrow
   to "DIAMOND LIGHT BRA…", wraps the piece name onto three lines, and shrinks the product itself to
   a thumbnail — a dense marketplace grid rather than a considered object. At one-up the same card is
   275–390px wide: the eyebrow fits whole, the name settles on two lines, and the piece is the thing
   you look at. The breakpoint clears the widest phone in portrait (430px) with room to spare, so
   small tablets and landscape phones keep two columns. */
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; gap: 38px; }
  /* one-up needs no row-spanning special case for portrait plates */
  .pgrid .pc:has(.pc-portrait) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-frame, .pc-img, .pc-rule, .pc-cta, .sh-chips a, .vopt, .pg-zoom-ic,
  .faq summary::after { transition: none; }
  .pc-link:hover .pc-frame { transform: none; }
  .pc-link:hover .pc-img { transform: none; }
}