/* pages/product.css (P2) — product detail + print spec sheet.
   Tokens only; mobile-first; components from components.css. */

.product-page .alert {
  margin-bottom: var(--sp-8);
}
.gallery__main > img {
  display: block;
}
.gallery__main .media-fallback {
  height: 100%;
}
.product-panel__desc .small {
  font-weight: var(--fw-medium);
}
.product-panel .notice {
  margin-top: var(--sp-4);
}

/* Colour card + product film next to the colour grid */
.product-media {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--sp-32);
}
@media (min-width: 820px) {
  .product-media--two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .product-media:not(.product-media--two) {
    max-width: 30rem;
  }
}
.product-card-figure {
  display: grid;
  gap: var(--sp-16);
  margin: 0;
}
.product-card-figure__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-tint);
  cursor: zoom-in;
}
.product-card-figure__btn picture,
.product-card-figure__btn img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}
.product-card-figure figcaption {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.product-card-figure figcaption strong {
  color: var(--text);
}
.product-media .video--portrait {
  max-width: 22rem;
}

/* Tests: verified values (only when testVerification is true) */
.test__value {
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
}

/* Ordering heading with its decorative number */
#ordering-title {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

/* ── Print spec sheet ─────────────────────────────────────────────── */
@media print {
  .breadcrumbs,
  .swatch-picker,
  .product-actions,
  .help-link,
  .colour-grid,
  .gallery__counter,
  .gallery__logo,
  .lightbox,
  .cta-band,
  .site-footer,
  .video {
    display: none;
  }
  .product-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-16);
  }
  .gallery__main {
    height: 70mm;
    border-radius: 0;
  }
  .product-panel__code {
    font-size: 28pt;
  }
  .section {
    padding-top: var(--sp-16);
  }
  .section-head {
    margin-bottom: var(--sp-8);
  }
  .product-media {
    margin-top: 0;
  }
  .product-card-figure__btn img {
    max-height: 60mm;
  }
  .test .chip {
    white-space: normal;
  }
  .product-print-foot {
    margin-top: var(--sp-16);
    font-size: 9pt;
  }
}