/* ==========================================================================
   STUDIO — pages/product.css
   The product detail page. Everything reusable (gal, specs, panel, note,
   cards, badge, tag, crumbs) comes from components.css — this file only adds
   what the PDP genuinely needs and nothing else:

     · the media column (the stage + the lazy video poster)
     · the info column (title, actions, trust rows, share row)
     · the spec / description split
     · the closing quote band

   Every class here is namespaced .pdp-* / .pdp__* so it can never collide
   with another page's kit. Hairlines, flat colour, 8–12px radii, 150–220ms
   ease-out. No gradients, no lift, no spring.
   ========================================================================== */

/* ==========================================================================
   1. THE TOP SPLIT — media on the start, the decision on the end
   ========================================================================== */
.pdp { padding-block-end: var(--section-y); }

.pdp__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}
@media (min-width: 960px) {
  .pdp__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    column-gap: var(--sp-10);
  }
}
@media (min-width: 1200px) {
  .pdp__grid { column-gap: var(--sp-12); }
}

/* The gallery holds still while the info column scrolls past it. */
@media (min-width: 960px) {
  .pdp__media {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-6));
  }
}

/* ==========================================================================
   2. GALLERY — main stage + thumbnail rail
   The stage is a real <button>: click or Enter opens the focus-trapped
   lightbox. Video entries never load an iframe until they are asked to.
   ========================================================================== */
.pdp-gal__stage {
  inline-size: 100%;
  padding: 0;
  cursor: zoom-in;
  color: var(--text);
}
/* NO crop and NO blow-up on the stage. .gal__img is `object-fit: contain`
   inside a stage that is capped against the VIEWPORT (min(72vh, 640px)) — so a
   tall or square shot is shown whole at every width. The old scale(1.1) here
   cropped the bottom strip out of the frame; it is gone. Studio's hover is a
   hairline that firms up, not a photo that lurches. */
.pdp-gal__stage:hover,
.pdp-gal__stage:focus-visible { border-color: var(--border-strong); }

/* the quiet "click to enlarge" chip */
.pdp-gal__hint {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-end: var(--sp-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: var(--bg);
  border: var(--border-1);
  border-radius: var(--r-xs);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--t-color);
}
[dir="rtl"] .pdp-gal__hint { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.pdp-gal__hint svg { inline-size: 14px; block-size: 14px; flex: none; }
.pdp-gal__stage:hover .pdp-gal__hint { border-color: var(--border-strong); color: var(--text); }

/* --- the VIDEO stage -----------------------------------------------------
   A poster and a play badge inside a 16:9 frame, centred on the grey tile.
   The youtube-nocookie iframe is injected into .pdp-gal__frame ONLY on click.
   ------------------------------------------------------------------------ */
.pdp-gal__video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
}
.pdp-gal__frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-ink);
  border-block: var(--border-1);
}
.pdp-gal__poster {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* The play control. It is a <button> over http (it injects the nocookie
   iframe) and an <a> to YouTube on file:// — YouTube refuses to embed into a
   null origin, so off-http we send the visitor to the real video instead of
   painting a player that can only show Error 153. Both wear this class. */
.pdp-gal__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-4);
  /* a flat scrim from the token set (dark in BOTH themes — it sits on a
     photograph, not on the page), never a gradient */
  background: transparent;
  transition: background-color var(--dur-2) var(--ease);
}
.pdp-gal__play:hover,
.pdp-gal__play:focus-visible { background: var(--backdrop); }

/* The file:// form (the <a>) carries a line of copy, so unlike the bare play
   BUTTON it needs its scrim at rest — a caption laid straight onto a busy
   video frame is unreadable at any weight. Both scrim values are dark in both
   themes: this sits on a photograph, not on the page. */
a.pdp-gal__play { background: var(--backdrop); }
a.pdp-gal__play:hover,
a.pdp-gal__play:focus-visible { background: var(--backdrop-heavy); }

/* the file:// note, under the badge */
.pdp-gal__filenote {
  max-inline-size: 30ch;
  padding-inline: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-align: center;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);   /* it lies on a photograph */
}
.pdp-gal__playmark {
  display: grid;
  place-items: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--c-white);
  transition: background-color var(--dur-2) var(--ease);
}
.pdp-gal__play:hover .pdp-gal__playmark { background: var(--accent-fill-hov); }
.pdp-gal__playmark svg {
  inline-size: 24px;
  block-size: 24px;
  margin-inline-start: 3px;   /* optical centring of the triangle */
}
[dir="rtl"] .pdp-gal__playmark svg { transform: scaleX(-1); margin-inline-start: 3px; }
.pdp-gal__frame iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* --- thumbnails ---------------------------------------------------------- */
.pdp-gal .gal__thumb { position: relative; }
.pdp-gal .gal__thumb img {
  transform: scale(1.12);
  transform-origin: center 32%;
}
.pdp-gal__thumbplay {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--c-white);
}
.pdp-gal__thumbplay svg { inline-size: 11px; block-size: 11px; margin-inline-start: 1px; }
[dir="rtl"] .pdp-gal__thumbplay svg { transform: scaleX(-1); }

/* the video thumb keeps its poster dark so the badge reads */
.pdp-gal__thumb--video img { opacity: 0.86; }

/* ==========================================================================
   3. THE IMAGE VIEWER
   There is nothing to style here. Studio.lightbox() builds the whole viewer —
   the hairline toolbar (zoom out · % · zoom in · fit · rotate · full screen ·
   download · close), the stage, the nav and the caption — and components.css
   owns .lb*. The page-local .pdp-lb__* chrome that used to live here belonged
   to a #lightbox dialog that no longer exists; it was dead CSS and is gone.
   ========================================================================== */

/* ==========================================================================
   4. INFO COLUMN
   ========================================================================== */
.pdp__info { display: grid; gap: var(--sp-5); min-inline-size: 0; }

.pdp__title {
  /* a product name is a name, not a manifesto — one step down from --fs-h1 */
  font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.5rem);
  letter-spacing: var(--ls-display);
  max-inline-size: 18ch;
}

.pdp__lead { max-inline-size: 46ch; }

.pdp__cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block-start: var(--sp-1);
}
.pdp__cats-label { flex: none; color: var(--text-muted); }

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}
.pdp__actions .btn { flex: 1 1 210px; }

.pdp__wa svg { inline-size: 18px; block-size: 18px; flex: none; }

/* --- trust meta — three hairline rows, no icons shouting ----------------- */
.pdp__trust {
  display: grid;
  margin-block-start: var(--sp-3);
  border-block-start: var(--border-1);
}
.pdp__trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: var(--border-1);
}
.pdp__trust-ico {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  color: var(--text-accent);
}
.pdp__trust-t {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: var(--ls-body);
}
.pdp__trust-d {
  display: block;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-block-start: 2px;
}

/* --- share row ----------------------------------------------------------- */
.pdp__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block-start: var(--sp-2);
}
.pdp__share-label { flex: none; margin-inline-end: var(--sp-2); }
/* .btn--icon zeroes its border-color; this file loads after components.css,
   so the hairline here wins the tie on source order. */
.pdp__share .pdp-share__btn {
  border-color: var(--border);
  color: var(--text-secondary);
}
.pdp__share .pdp-share__btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-surface);
  color: var(--text);
}
.pdp__share .pdp-share__btn svg { inline-size: 17px; block-size: 17px; }

/* ==========================================================================
   5. SPEC + DESCRIPTION SPLIT
   Spec panel on the inline-start (it is what a buyer scans first), the long
   description on the end. The panel sticks while the prose scrolls.
   ========================================================================== */
.pdp__detail {
  display: grid;
  gap: var(--sp-9);
  align-items: start;
}
@media (min-width: 960px) {
  .pdp__detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    column-gap: var(--sp-10);
  }
  .pdp__specs { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-6)); }
}

.pdp__specs .panel { background: var(--bg); }
.pdp__specs .specs { border-block-start: 0; }
.pdp__specs .spec:last-child { border-block-end: 0; padding-block-end: 0; }
.pdp__specs .spec__value { min-inline-size: 0; overflow-wrap: anywhere; }
.pdp__specs .note { margin-block-start: var(--sp-6); }
.pdp__specs .btn { margin-block-start: var(--sp-5); }

.pdp__body-title { margin-block-end: var(--sp-6); }
.pdp__prose h4:first-child { margin-block-start: 0; }

.pdp__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border-1);
}
.pdp__tags-label { flex: none; margin-inline-end: var(--sp-2); }

/* ==========================================================================
   6. RELATED — exactly three, so give it three columns and no ragged auto-fill
   ========================================================================== */
@media (min-width: 900px) {
  .pdp-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   7. CLOSING QUOTE BAND — the page's one dark moment
   ========================================================================== */
.pdp-cta {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .pdp-cta { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--sp-10); }
}
.pdp-cta__title { font-size: var(--fs-h2); max-inline-size: 18ch; }
.pdp-cta__lead {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-on-ink-mut);
  max-inline-size: 52ch;
}
.pdp-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 900px) {
  .pdp-cta__actions { justify-content: flex-end; }
}
.pdp-cta__note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-on-ink-mut);
}
@media (min-width: 900px) {
  .pdp-cta__note { justify-content: flex-end; }
}
.pdp-cta__note svg { inline-size: 15px; block-size: 15px; flex: none; }
.pdp-cta__note a { color: var(--text-on-ink); text-decoration: underline; text-underline-offset: 3px; }