/* ═══════════════════════════════════════════════════════════════════════════
   ETHOS AURUM MAISON — THE PIECE (piece.html)
   The dossier, not a listing. Gallery left, the verdict right. Added 29 Aug 2026.
   Loaded after eam-tokens.css, commerce.css and store.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.pdp {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);   /* Figma: main photo 238 wide */
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

/* ── gallery ─────────────────────────────────────────────────────────── */

.pdp-gallery { position: sticky; top: 96px; }

.pdp-frame {
  position: relative;
  aspect-ratio: 238 / 292;   /* Figma 238 × 292 */
  overflow: hidden;
  background: var(--eam-panel);
  border: 2px solid var(--eam-aurum);
  display: grid;
  place-items: center;
}
.pdp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hover zoom: on a mouse, resting on the photo magnifies it about the cursor so the
   stitching, hardware and grain read. Touch screens keep the plain image. */
@media (hover: hover) and (pointer: fine) {
  .pdp-frame { cursor: zoom-in; }
  .pdp-frame img:not(.is-mark) { transition: transform .35s cubic-bezier(.16,.84,.32,1); will-change: transform; }
  .pdp-frame:hover img:not(.is-mark) { transform: scale(1.9); }
}
.pdp-frame img.is-mark { width: 44%; height: auto; object-fit: contain; opacity: .38; }

.pdp-thumbs {
  /* Was a fixed 3-column grid, sized for the old fixed-at-3 thumbnail count.
     Now that the count is whatever the piece actually has (js/piece.js), the
     columns size to the tiles themselves — one photo sits full width rather
     than a third of a row, four sit four-across, and so on. */
  display: grid;
  grid-template-columns: repeat(auto-fill, 75px);   /* Figma thumbs 75 × 91 */
  gap: 6.5px;
  margin-top: 12px;
}
.pdp-thumb {
  aspect-ratio: 75 / 91;
  background: var(--eam-panel);
  border: 2px solid var(--eam-aurum);
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color .3s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb img.is-mark { width: 46%; height: auto; object-fit: contain; opacity: .3; }
.pdp-thumb[aria-current="true"] { border-color: var(--eam-oxblood); }
.pdp-thumb:hover { border-color: var(--eam-bordeaux); }
.pdp-thumb:focus-visible { outline: 2px solid var(--eam-aurum); outline-offset: 2px; }

.pdp-shotnote {
  margin-top: 14px;
  font-family: var(--eam-font-proof);
  font-size: 9px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  opacity: .4;
}

/* ── detail column ───────────────────────────────────────────────────── */

.pdp-house {
  display: block;
  font-family: var(--eam-font-proof);
  font-size: 11px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 14px;
}

.pdp-name {
  font-family: var(--eam-font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  margin: 0 0 18px;
}

.pdp-cat {
  display: block;
  margin: 6px 0 14px;
  opacity: .55;
}

.pdp-note {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  opacity: .85;
  max-width: 46ch;
}

.pdp-fav {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 2px;
  font-family: var(--eam-font-proof);
  font-size: 11px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  opacity: .6;
  cursor: pointer;
}
.pdp-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pdp-fav:hover { opacity: 1; }
.pdp-fav.is-on { color: var(--eam-bordeaux); opacity: 1; }
.pdp-fav.is-on svg { fill: currentColor; }

.pdp-price {
  font-family: var(--eam-font-display);
  font-size: clamp(26px, 3vw, 36px);
  margin: 4px 0 10px;
}
.pdp-price .approx {
  font-family: var(--eam-font-body);
  font-size: 15px;
  opacity: .5;
  margin-left: 10px;
}

.pdp-add {
  display: inline-flex;
  margin: 6px 0 14px;
  min-width: 220px;
}

.pdp-cta-note {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: .65;
  max-width: 44ch;
}

.pdp-lead {
  display: block;
  margin: 0 0 34px;
  opacity: .55;
}

/* facts list — House / Condition / Delivery */
.pdp-facts { margin: 0; }
.pdp-facts > div {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgb(from var(--eam-oxblood) r g b / .12);
}
.pdp-facts > div:first-child { border-top: 0; }
.pdp-facts dt {
  font-family: var(--eam-font-proof);
  font-size: 9px;
  letter-spacing: var(--eam-track-proof);
  text-transform: uppercase;
  opacity: .5;
  padding-top: 2px;
}
.pdp-facts dd { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ── the rest of the room ────────────────────────────────────────────── */

.pdp-more { margin-top: clamp(70px, 12vh, 130px); }
.pdp-more-head { margin-bottom: 26px; }
.pdp-more-head h2 {
  font-family: var(--eam-font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  margin: 0;
}
.pdp-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 194px);   /* Figma cards 194 × 238 */
  gap: 22px 18px;
}
.pdp-more-grid .piece-card-plate { aspect-ratio: 194 / 238; }

/* not found */
.pdp-missing { text-align: center; padding: clamp(60px, 14vh, 140px) 0; }
.pdp-missing h1 {
  font-family: var(--eam-font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 14px;
}
.pdp-missing p { opacity: .7; margin: 0 0 30px; }

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