/* ==========================================================================
   VIVID — PRODUCT DETAIL (PDP)
   --------------------------------------------------------------------------
   Only what this page needs. Everything else (buttons, badges, tags, table,
   gallery thumbs, product cards, section heads) comes from components.css.
   Logical properties only — the whole page mirrors in RTL.

   RHYTHM:  white (hero) → INK (spec sheet) → white (details) → INK (related)
            → RED (the one funnel).
   ========================================================================== */


/* ==========================================================================
   1. HERO — the stage on the reading side, the pitch on the other.
   ========================================================================== */
.pdp {
  padding-block: var(--sp-6) var(--section-y);
}

/* A slim rule under the crumbs — the same hard 2px line .phead closes with. */
.pdp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block-end: var(--sp-4);
  margin-block-end: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border-block-end: var(--bw) solid var(--line-bold);
}
.pdp__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 32px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t-fast);
}
.pdp__back:hover { color: var(--brand-text); }
.pdp__back svg { inline-size: 15px; block-size: 15px; transition: transform var(--t-fast); }
[dir="rtl"] .pdp__back svg { transform: scaleX(-1); }
.pdp__back:hover svg { transform: translateX(-3px); }
[dir="rtl"] .pdp__back:hover svg { transform: scaleX(-1) translateX(-3px); }

.pdp__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3.4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .pdp__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
}


/* ---- 1a. THE STAGE -------------------------------------------------------
   Hard-edged solid red offset block behind the photo. box-shadow, so it can
   never add a pixel of scrollable overflow. Mirrored by hand in RTL.

   IT MUST FIT THE VIEWPORT AT EVERY WIDTH. The frame is a 4:3 box, but it is
   CAPPED against the viewport — on a short window an uncapped stage pushes the
   whole info column (and the quote CTA with it) below the fold. The cap is
   anchored in vh because that always resolves; a percentage max-height here
   would compute and constrain nothing.

   And the photograph is CONTAINED, never covered: these are packs shot at
   whatever aspect the factory sent them in, and a tall or square shot must be
   shown whole, not cropped through the middle or blown up.
   ------------------------------------------------------------------------- */
.pdp__stage {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  max-block-size: min(72vh, 640px);
  min-block-size: 220px;
  background: var(--media-bed);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 0 var(--red-500);
}
[dir="rtl"] .pdp__stage { box-shadow: -10px 10px 0 0 var(--red-500); }

.pdp__stage-btn {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* It is a <button> when the film can embed, and a real <a> to YouTube when it
   cannot (file://) — both wear the same face. */
.pdp__stage-btn--play { cursor: pointer; }
.pdp__stage-btn img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pdp__stage-btn:hover img { transform: scale(1.03); }
.pdp__stage-btn:focus-visible { outline-offset: -6px; }

/* Only on file://, under the video poster: says why the player is not inline. */
.pdp__stage-note {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  padding: var(--sp-7) var(--sp-4) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  text-align: center;
  color: var(--white);
  /* A scrim over an unknown photograph — theme-independent by nature. */
  background: linear-gradient(to top, rgba(8, 9, 13, 0.92), rgba(8, 9, 13, 0));
}

/* The overlay category badge — the same solid pill the product cards carry. */
.pdp__cat {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink-900);
  border-radius: var(--r-xs);
  pointer-events: none;
}

.pdp__zoom {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-900);
  background: var(--white);
  border-radius: var(--r-sm);
  pointer-events: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.pdp__stage-btn:hover .pdp__zoom { background: var(--red-500); color: var(--white); }
.pdp__zoom svg { inline-size: 19px; block-size: 19px; }

/* The play badge: a solid red block, never a soft glow. */
.pdp__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  inline-size: 74px;
  block-size: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--red-500);
  border: var(--bw) solid var(--white);
  border-radius: var(--r-md);
  pointer-events: none;
  transition: transform var(--t-base), background-color var(--t-fast);
}
[dir="rtl"] .pdp__play { transform: translate(50%, -50%); }
.pdp__stage-btn:hover .pdp__play { transform: translate(-50%, -50%) scale(1.08); }
[dir="rtl"] .pdp__stage-btn:hover .pdp__play { transform: translate(50%, -50%) scale(1.08); }
.pdp__play svg { inline-size: 30px; block-size: 30px; }

/* Top-END, so the file:// note owns the bottom of the poster outright. Like the
   zoom chip, it sits ON a photograph — a hard white plate in BOTH themes. */
.pdp__vidtag {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--white);
  border-radius: var(--r-xs);
  pointer-events: none;
}
.pdp__vidtag svg { inline-size: 13px; block-size: 13px; }

/* The lazily-injected iframe. It only ever exists after a click. */
.pdp__iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
  background: var(--invert-bg);
}


/* ---- 1b. THUMB RAIL (extends .gal__thumbs / .gal__thumb) ----------------- */
.pdp__thumbs { margin-block-start: var(--sp-4); }
.pdp .gal__thumb { position: relative; }
.pdp .gal__thumb[aria-current="true"] {
  border-color: var(--red-500);
  box-shadow: var(--hard-ink-sm);
}
[dir="rtl"] .pdp .gal__thumb[aria-current="true"] { box-shadow: -4px 4px 0 0 var(--block); }
.pdp__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  background: rgba(14, 16, 22, 0.5);
}
.pdp__thumb-play svg { inline-size: 24px; block-size: 24px; }


/* The escape hatch under a video: YouTube itself, in a new tab. */
.pdp__watch:empty { display: none; }
.pdp__watch a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t-fast);
}
.pdp__watch a:hover { color: var(--brand-text); }
.pdp__watch svg { inline-size: 16px; block-size: 16px; color: var(--brand-text); }


/* ---- 1c. THE INFO COLUMN ------------------------------------------------- */
.pdp__info { min-inline-size: 0; }

.pdp__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-tight);
  color: var(--text);
  text-wrap: balance;
}
.pdp__lead {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
  max-inline-size: 48ch;
}

.pdp__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
}

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-7);
}
@media (max-width: 419px) {
  .pdp__actions .btn { inline-size: 100%; }
}

.pdp__noprice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
  line-height: var(--lh-normal);
}
.pdp__noprice svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--brand-text); }

.pdp__trust {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-7);
  border-block-start: var(--bw) solid var(--line-bold);
  list-style: none;
}
.pdp__trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  min-inline-size: 0;
}
.pdp__trust-ico {
  flex: none;
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-sm);
}
.pdp__trust-ico svg { inline-size: 19px; block-size: 19px; }
.pdp__trust-k {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
}
.pdp__trust-v {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--text);
}


/* ==========================================================================
   2. SPEC SHEET — INK BAND. The white table blocks hard against the dark.
   ========================================================================== */
.specs .table-wrap {
  border-color: var(--surface);
  box-shadow: 6px 6px 0 0 var(--red-500);
}
[dir="rtl"] .specs .table-wrap { box-shadow: -6px 6px 0 0 var(--red-500); }
/* An ink header row would dissolve into the ink band — so it goes solid red. */
.specs .table thead th { background: var(--red-500); color: var(--white); }
.specs .table th[scope="row"] { white-space: normal; }
.specs__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink-subtle);
}
/* Red ON the band. The band is the one surface whose luminance MOVES between the
   themes, so this red has to move with it: --red-400 is 5.3:1 on the light-mode
   band but only 3.88:1 on the dark one. --brand-on-ink is the token that tracks. */
.specs__foot svg { inline-size: 15px; block-size: 15px; flex: none; color: var(--brand-on-ink); }


/* ==========================================================================
   3. DETAILS — the rich description body + the aside (tags, share, contact).
   ========================================================================== */
.details__grid {
  display: grid;
  gap: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .details__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

/* The CKEditor HTML from data.js lands here. */
.pdp-prose { min-inline-size: 0; }
.pdp-prose h4 {
  margin-block-start: var(--sp-10);
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text);
}
.pdp-prose > *:first-child { margin-block-start: 0; }
.pdp-prose p {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relax);
  color: var(--text-muted);
}
.pdp-prose strong { color: var(--text); font-weight: var(--fw-heavy); }
.pdp-prose ul {
  margin-block-start: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  list-style: none;
}
.pdp-prose li {
  position: relative;
  padding-inline-start: var(--sp-7);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.pdp-prose li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 16px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--red-brand);
}

/* --- the aside ------------------------------------------------------------ */
.pdp-aside { display: grid; gap: var(--sp-8); min-inline-size: 0; }
@media (min-width: 960px) {
  .pdp-aside {
    position: sticky;
    inset-block-start: calc(var(--hdr-h) + var(--sp-5));
  }
}
.pdp-aside__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-block-end: var(--sp-4);
}

.share { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding-inline: var(--sp-4);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.share__btn:hover {
  background: var(--invert-bg);
  color: var(--invert-fg);
  transform: translate(-2px, -2px);
  box-shadow: var(--hard-red-sm);
}
[dir="rtl"] .share__btn:hover { box-shadow: -4px 4px 0 0 var(--red-500); }
.share__btn svg { inline-size: 16px; block-size: 16px; flex: none; }

/* The quiet ink card at the foot of the aside. */
.pdp-help {
  padding: var(--sp-6);
  color: var(--text-on-ink);
  background: var(--surface-ink);
  border-radius: var(--r-lg);
}
.pdp-help__title {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text-on-ink);
}
.pdp-help__body {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-on-ink-muted);
}
.pdp-help__links { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.pdp-help__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink);
  border: var(--bw-hair) solid var(--line-on-ink);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
/* The band carries white text in BOTH themes (it is #0E1016 in light and #262C3C
   in dark), so a white wash is the correct hover on it in both — --overlay-2
   would flip to a DARK wash in light and vanish into the band. */
.pdp-help__link:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--text-on-ink); }
.pdp-help__link svg { inline-size: 17px; block-size: 17px; flex: none; color: var(--brand-on-ink); }


/* ==========================================================================
   4. THE IMAGE VIEWER
   --------------------------------------------------------------------------
   There is nothing here on purpose. The viewer is the SHARED .lightbox from
   components.css, driven by VIVID.lightbox(items, index) in app.js: the full
   toolbar (zoom out · zoom % · zoom in · fit · rotate · full screen · download
   · close), wheel-zoom at the cursor, drag-to-pan, double-click, the keyboard
   (+ − 0 F Esc ← →, RTL-aware), close on the backdrop AND on the empty space
   around the picture — but never on the picture itself. Duplicating any of it
   here is how the two copies drift apart.
   ========================================================================== */


/* ==========================================================================
   5. CLOSING CTA — the RED band. The one funnel.
   ========================================================================== */
.pdp-close__in {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .pdp-close__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.pdp-close__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text-on-red);
  max-inline-size: 18ch;
}
.pdp-close__body {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-red);
  max-inline-size: 54ch;
}
.pdp-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
.pdp-close__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-red);
}
.pdp-close__note svg { inline-size: 15px; block-size: 15px; flex: none; }

/* The pack itself, on a hard block. The frame sits on the RED band, so its edge
   must stay white in BOTH themes — --surface would flip to near-black in dark
   and paint a dark hairline onto the red. */
.pdp-close__shot {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  border: var(--bw) solid var(--text-on-red);
  border-radius: var(--r-lg);
  box-shadow: -8px 8px 0 0 var(--block);
}
[dir="rtl"] .pdp-close__shot { box-shadow: 8px 8px 0 0 var(--block); }
.pdp-close__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 899px) {
  .pdp-close__shot { display: none; }
}


/* ==========================================================================
   6. NOT FOUND — a bad ?slug= must never render a broken page.
   ========================================================================== */
.pdp-404 { padding-block: var(--section-y); }
.pdp-404 .empty { max-inline-size: 720px; margin-inline: auto; }
.pdp-404__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }