/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   pages/product.css — product.html ONLY.
   --------------------------------------------------------------------------
   Everything reusable lives in components.css and is used as-is here:
     .crumbs .spec .prose .tag .note .kv .hgrid .btn .iconrow .sec-head
     .gallery__thumbs .thumb .play-badge .slider .pcard .cta-band .empty
   This file holds ONLY what is genuinely unique to the product datasheet:
     · the media stage (image + click-to-load YouTube)
     · the sticky info rail
     · the 4-cell spec strip under the masthead
     · the artwork-guidance layout
   Every box-model property is LOGICAL. Every corner is square.
   ========================================================================== */


/* ==========================================================================
   01. DATASHEET BAR — breadcrumb + prev/next through the catalogue.
   ========================================================================== */
.pdp-bar {
  border-block-end: var(--bw-hair) solid var(--line);
  background-color: var(--bg);
}
.pdp-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-3);
  min-block-size: 56px;
}

/* Prev / next product — a hairline pager through the real product order. */
.pdp-nav {
  display: flex;
  border: var(--bw-hair) solid var(--line);
  max-inline-size: 100%;
}
.pdp-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 38px;
  padding-inline: var(--s-4);
  min-inline-size: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.pdp-nav__link:last-child { border-inline-end: 0; }
.pdp-nav__link:hover { color: var(--accent-fg); background-color: var(--accent-solid); }
.pdp-nav__link svg { inline-size: 12px; block-size: 12px; flex: none; }
.pdp-nav__ref {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.pdp-nav__link:hover .pdp-nav__ref { color: var(--accent-fg); }
.pdp-nav__name {
  display: none;
  min-inline-size: 0;
  max-inline-size: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.pdp-nav__link:hover .pdp-nav__name { color: var(--accent-fg); }
@media (min-width: 900px) { .pdp-nav__name { display: block; } }


/* ==========================================================================
   02. MASTHEAD — gallery + info rail
   ========================================================================== */
.pdp-lede { padding-block: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); }

.pdp-lede__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .pdp-lede__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: var(--s-10);
  }
}


/* ==========================================================================
   03. MEDIA STAGE  —  the drawing viewport
   --------------------------------------------------------------------------
   file_type IMAGE  → photo, click opens the shared lightbox.
   file_type VIDEO  → poster + play badge. The <iframe> is ONLY ever injected
                      on an explicit click (youtube-nocookie), and only when the
                      page has a real origin (over file:// YouTube refuses any
                      embed — "Error 153" — so the click opens YouTube instead).
                      Nothing is requested from YouTube on page load: the poster
                      is the product's OWN photograph, served locally.

   THE STAGE MUST FIT THE VIEWPORT AT EVERY WIDTH.
     · block-size is capped at min(72vh, 640px) — never taller than the screen.
     · object-fit is CONTAIN — the catalogue photography is SQUARE (1100×1100),
       and a `cover` fit inside a 4:3 box silently guillotined the top and
       bottom off every product. A spec sheet does not crop the specimen.
     · whatever ratio the photo has, the remainder is drafting bed, not a crop.
   ========================================================================== */
.pdp-gallery {
  min-inline-size: 0;

  /* ---- CHROME THAT SITS ON A PHOTOGRAPH -------------------------------------
     The REF chip, the VIEW chip, the video scrim, the play badge and the thumb
     number plate are all stamped ON the image — never on the page surface.

     A photograph is a photograph in BOTH modes, so these are the one part of the
     page that deliberately does NOT flip with paper/graphite: a dark plate with
     white type is correct over an image on bone paper and over the same image on
     graphite alike. Flipping them WOULD be the bug — a bone-coloured chip would
     vanish into the white of this pack's own photograph.

     They are tokens all the same, so the values live in ONE place and no rule
     below hard-codes a colour. (Same principle the shared lightbox states for
     itself: a photo is judged on a dark ground, in either mode.)
     -------------------------------------------------------------------------- */
  --media-plate:      rgba(5, 6, 7, 0.82);   /* the REF / VIEW chip            */
  --media-plate-soft: rgba(5, 6, 7, 0.62);   /* the play badge                 */
  --media-plate-n:    rgba(5, 6, 7, 0.80);   /* the thumbnail number plate     */
  --media-scrim:      rgba(5, 6, 7, 0.46);   /* the video poster scrim         */
  --media-scrim-lift: rgba(5, 6, 7, 0.28);   /* …lifted on hover / focus       */
  --media-plate-fg:   var(--paper-000);      /* white type on those plates     */
  --media-plate-fg-2: var(--paper-100);
  --media-plate-line: rgba(255, 255, 255, 0.42);
  --media-plate-edge: var(--alpha-w-16);
  --media-void:       var(--ink-1000);       /* the player bed — always black  */
}

.pdp-stage {
  position: relative;
  /* The source photography is square; a square viewport shows it WHOLE with no
     letterbox. `contain` still protects any other ratio that lands here. */
  aspect-ratio: 1 / 1;
  max-block-size: min(72vh, 640px);
  overflow: hidden;
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
}
/* The bed under a contained photo reads as drafting board, not a dead grey
   hole — a faint grid, from the mode's own token. */
.pdp-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
  pointer-events: none;
}
/* A playing video wants its native 16:9 — a player squeezed into a square box
   letterboxes itself twice. */
.pdp-stage.is-playing { aspect-ratio: 16 / 9; }

.pdp-stage__img {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
}
.pdp-stage__frame {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
  background-color: var(--media-void);
}

/* REF chip — the DB row id. Traceability, same device as the product card. */
.pdp-stage__ref {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--media-plate-fg-2);
  background-color: var(--media-plate);
  border-inline-end: var(--bw-hair) solid var(--media-plate-edge);
  border-block-end: var(--bw-hair) solid var(--media-plate-edge);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* The whole photo is the lightbox trigger — one control, keyboard operable. */
.pdp-stage__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  inline-size: 100%;
  background-color: transparent;
  border: 0;
  cursor: zoom-in;
}
.pdp-stage__zoom {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--media-plate-fg-2);
  background-color: var(--media-plate);
  border: var(--bw-hair) solid var(--media-plate-edge);
  transition: var(--t-color);
}
.pdp-stage__zoom svg { inline-size: 12px; block-size: 12px; }
.pdp-stage__hit:hover .pdp-stage__zoom,
.pdp-stage__hit:focus-visible .pdp-stage__zoom {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}

/* Video poster → play. */
.pdp-stage__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  inline-size: 100%;
  background-color: var(--media-scrim);
  border: 0;
  color: var(--media-plate-fg-2);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease);
}
.pdp-stage__play:hover,
.pdp-stage__play:focus-visible { background-color: var(--media-scrim-lift); }
.pdp-stage__badge {
  display: grid;
  place-items: center;
  inline-size: clamp(60px, 12vw, 82px);
  block-size: clamp(60px, 12vw, 82px);
  color: var(--media-plate-fg);
  background-color: var(--media-plate-soft);
  border: var(--bw-hair) solid var(--media-plate-line);
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.pdp-stage__badge svg {
  inline-size: 24px;
  block-size: 24px;
  /* The play triangle points at the reading direction. */
  fill: currentColor;
  stroke: none;
}
[dir="rtl"] .pdp-stage__badge svg { transform: scaleX(-1); }
.pdp-stage__play:hover .pdp-stage__badge,
.pdp-stage__play:focus-visible .pdp-stage__badge {
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.pdp-stage__playlabel {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--media-plate-fg-2);
}

/* -- Thumbnail rail: .gallery__thumbs / .thumb / .play-badge come from the
      kit. Only the numbering plate is new. ---------------------------------- */
.pdp-thumbs { scrollbar-width: thin; }
.pdp-thumbs .thumb { cursor: pointer; padding: 0; }
.thumb__n {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: 2px 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.3;
  color: var(--media-plate-fg-2);
  background-color: var(--media-plate-n);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.thumb[aria-current="true"] .thumb__n {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
}

/* Media manifest: how many images, how many videos. */
.pdp-manifest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: var(--bw-hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.pdp-manifest__group { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.pdp-manifest__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.pdp-manifest__item b {
  color: var(--accent);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.pdp-manifest__yt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-subtle);
  transition: var(--t-color);
}
.pdp-manifest__yt:hover { color: var(--accent); }
.pdp-manifest__yt svg { inline-size: 13px; block-size: 13px; }


/* ==========================================================================
   04. INFO RAIL
   ========================================================================== */
.pdp-info {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .pdp-info {
    position: sticky;
    inset-block-start: calc(var(--masthead-h-sm) + var(--s-5));
    align-self: start;
  }
}

.pdp-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}
.pdp-cats__label { color: var(--fg-subtle); }
.pdp-cats__link { color: var(--accent); }
.pdp-cats__link:hover { color: var(--fg-strong); }
.pdp-cats__sep { color: var(--line-contrast); user-select: none; }

.pdp-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: var(--track-none);
  color: var(--fg-strong);
  text-wrap: balance;
}
[dir="rtl"] .pdp-title { text-transform: none; line-height: 1.28; }

.pdp-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}

/* -- Trust meta: the three things every enquiry asks before anything else. -- */
.pdp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--bw-hair);
  background-color: var(--line);
  border: var(--bw-hair) solid var(--line);
}
.pdp-trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  background-color: var(--surface);
}
.pdp-trust__item svg {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  margin-block-start: 2px;
  color: var(--accent);
}
.pdp-trust__body { min-inline-size: 0; }
.pdp-trust__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-strong);
}
.pdp-trust__v {
  display: block;
  margin-block-start: 5px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-subtle);
}

/* -- Actions: quote is primary, WhatsApp is the fast lane. NO PRICE. ------- */
.pdp-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.pdp-actions__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 520px) {
  .pdp-actions__row { grid-template-columns: 1fr 1fr; }
}
.pdp-actions__note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}

/* -- Share row ------------------------------------------------------------ */
.pdp-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-start: var(--s-5);
  border-block-start: var(--bw-hair) solid var(--line);
}


/* ==========================================================================
   05. SPEC STRIP — the four headline facts, straight off `specs`.
   --------------------------------------------------------------------------
   Deliberately NOT the shared .specstrip: that renders its value in the
   condensed DISPLAY face at --fs-xl with line-height 1, which is right for
   "20+ YEARS" and wrong for "PET / MET-PET / PE laminate". Same anatomy,
   monospace value, so long technical strings wrap instead of colliding.
   ========================================================================== */
.pdp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--bw-hair);
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  background-color: var(--line);
  border: var(--bw-hair) solid var(--line);
}
.pdp-strip__cell {
  padding: var(--s-5) var(--s-6);
  background-color: var(--surface);
}
.pdp-strip__k {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.pdp-strip__n {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pdp-strip__v {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-strong);
}


/* ==========================================================================
   06. DATASHEET — tabs (description / specification / artwork)
   ========================================================================== */
.pdp-doc__tabs { margin-block-start: calc(var(--s-2) * -1); }
.pdp-doc .tabpanel { padding-block-start: var(--s-9); }

/* -- Description ---------------------------------------------------------- */
.pdp-desc {
  display: grid;
  /* minmax(0, …) so the nowrap CTA in the aside cannot widen the track. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 960px) {
  .pdp-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--s-10); }
}
.pdp-desc__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-slab) solid var(--accent);
}
.pdp-desc__aside-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .pdp-desc__aside-title { text-transform: none; line-height: 1.4; }
.pdp-desc__aside-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* -- Specification -------------------------------------------------------- */
.pdp-spec {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 960px) {
  .pdp-spec { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-8); }
}
.pdp-spec__aside { display: flex; flex-direction: column; gap: var(--s-5); }
.pdp-spec__table-wrap { min-inline-size: 0; overflow-x: auto; }

/* -- Artwork & files ------------------------------------------------------ */
.pdp-art {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 960px) {
  .pdp-art { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-9); }
}
.pdp-art__head { margin-block-end: var(--s-7); }
.pdp-art__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block: var(--s-3) var(--s-4);
}
[dir="rtl"] .pdp-art__title { text-transform: none; line-height: 1.35; }
.pdp-art__lead {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}
.pdp-art__item { padding: var(--s-5); }
.pdp-art__n {
  display: block;
  margin-block-end: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pdp-art__t {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block-end: var(--s-2);
}
[dir="rtl"] .pdp-art__t { text-transform: none; line-height: 1.4; }
.pdp-art__d {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-muted);
}
.pdp-art__side { display: flex; flex-direction: column; gap: var(--s-5); }
.pdp-art__panel {
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
}
.pdp-art__panel-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
  padding-block-end: var(--s-4);
  border-block-end: var(--bw-hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--fg-strong);
}
.pdp-art__panel-title::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  background-color: var(--accent);
  flex: none;
}
.pdp-art__panel .kv__v a { color: var(--accent); }
.pdp-art__panel .kv__v a:hover { text-decoration: underline; }


/* ==========================================================================
   07. TAGS ROW
   ========================================================================== */
.pdp-tags {
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  flex-wrap: wrap;
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}
.pdp-tags__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }


/* ==========================================================================
   08. RELATED PRODUCTS
   ========================================================================== */
.pdp-related__slider { margin-block-start: var(--s-2); }
.pdp-related__slider .slider__chrome {
  justify-content: space-between;
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: var(--bw-hair) solid var(--line);
}
.pdp-related__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
}


/* ==========================================================================
   09. NOT FOUND — a bad ?slug= must never render a blank datasheet.
   ========================================================================== */
.pdp-missing { display: block; }