/* ======================================================================
   product.css — the eight gemstone pages
   ======================================================================

   Loaded after maison.css, scoped under .page-product. Deliberately short:
   the rebuilt markup (see initProductPage in script.js) is the shared
   .hm-* vocabulary, so the split, the fact rows, the buttons and the
   related-stone cards all come from maison.css already. What is left is
   the handful of things a product page has that no other page does.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. The stone
   One photograph, square, on marble. Square rather than the 4:5 the
   editorial slots use: the source files are 636x570 and the stone sits
   centred in them, so a tall crop cuts the frame off around it. The same
   ratio the collection grid and the homepage's four stones use, which is
   the point — one stone looks the same everywhere it appears.
   ---------------------------------------------------------------------- */
.page-product .hm-product__figure {
  overflow: hidden;
  background: var(--a-marble);
}
.page-product .hm-product__gem,
.page-product .hm-product__figure .gem-photo {
  display: block;
  margin: 0;
  width: 100%;
}
.page-product .hm-product__figure .gem-photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}
/* The client's own clip (23 October). Square like the still, on the same
   marble ground so the frame does not flash white before the poster
   paints. See renderProductVisual in script.js. */
.page-product .hm-product__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--a-marble);
}

/* The CSS-drawn fallback, for a stone whose photograph fails to load.
   initGemPhotoFallback swaps the figure for a .gem div. */
.page-product .hm-product__figure .gem {
  width: 60%;
  margin: 12% auto;
}

/* The access line under the actions. Not a price and not a promise of
   one — it states who prices are released to and where to ask. */
.page-product .hm-product__access {
  margin: var(--a-s5) 0 0;
  padding-top: var(--a-s4);
  max-width: var(--a-measure);
  border-top: 1px solid var(--a-hairline);
  font-size: var(--a-small);
  line-height: var(--a-lh-body);
  color: var(--a-ink-soft);
}

/* The inquiry control is a <button> wearing .hm-link, which is written
   for anchors. */
.page-product .hm-actions button.hm-link {
  padding-inline: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  cursor: pointer;
}
/* Added state: the gold rule that .hm-link grows on hover, made permanent.
   aria-pressed carries the same fact for anyone not seeing it. */
.page-product .hm-actions button.hm-link.is-added::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ----------------------------------------------------------------------
   2. Specifications
   Twelve rows. Two columns on a wide screen, because twelve stacked rows
   of two words each is a long thin ribbon of nothing.
   ---------------------------------------------------------------------- */
.page-product .hm-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(var(--a-s5), 5vw, var(--a-s8));
  margin: var(--a-s7) 0 0;
  border-top: 1px solid var(--a-hairline);
}
.page-product .hm-specs > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--a-s2) var(--a-s4);
  padding: var(--a-s3) 0;
  border-bottom: 1px solid var(--a-hairline);
}
.page-product .hm-specs dt {
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}
.page-product .hm-specs dd {
  margin: 0;
  font-size: var(--a-small);
  color: var(--a-ink);
}
/* A value that has not been established yet. Set in the muted ink so it
   reads as an open field rather than as data — the same weight the site
   gives "where origin cannot be substantiated, it is left open". */
.page-product .hm-specs dd.is-pending {
  color: var(--a-ink-mute);
  font-style: italic;
}

.page-product .hm-specs__note {
  margin: var(--a-s5) 0 0;
  max-width: var(--a-measure);
  font-size: var(--a-small);
  color: var(--a-ink-mute);
}

/* ----------------------------------------------------------------------
   3. Related stones
   Three, not the four the homepage shows, so the grid is restated. Every
   other property of these cards is .hm-stone from maison.css.
   ---------------------------------------------------------------------- */
.page-product .hm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--a-s8);
}

@media (max-width: 900px) {
  .page-product .hm-specs { grid-template-columns: minmax(0, 1fr); }
  .page-product .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-product .hm-specs > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a-s1);
  }
  .page-product .hm-grid { grid-template-columns: minmax(0, 1fr); }
}