/*
 * product.css — product-page styles (PLAN Step 8, Massage Gun; shared with the
 * Step 9 Red Light Panel). Consumes tokens.css only; zero literals outside the
 * sanctioned @media breakpoints (each commented with its --bp-* token name).
 * Enqueued only on the product pages (see functions.php).
 *
 * Sub-step 1: hero · full specs · science · certifications. Reviews + cross-sell
 * (sub-step 2) extend this file. Reuses the shared components (.btn, .price,
 * .media-placeholder, .build-note) from components.css.
 */

/* — Section rhythm — every product-page section shares one vertical cadence
     (mirrors home.css's .home-section). — */
.product-section {
  padding-block: var(--space-80);
}

/* — Shared section head — eyebrow + title, the sitewide pattern. — */
.product-section__head {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-48);
}

.product-section__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-section__title {
  letter-spacing: var(--tracking-tight);
}

/* ============================================================
 * Hero (sub-step 1) — dark, composed: media | copy. Mobile-first
 * single column (media first, then buy details); two-up split at
 * --bp-lg. ref-01 composure + ref-06 floating spec highlight.
 * ============================================================ */
.product-hero {
  padding-block: var(--space-96);
}

.product-hero__inner {
  display: grid;
  gap: var(--space-48);
  align-items: center;
}

.product-hero__media {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.product-hero__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-20);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-hero__title {
  margin-block-end: var(--space-24);
  letter-spacing: var(--tracking-tight);
}

.product-hero__lead {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-32);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* — Spec highlight (ref-06 floating spec card) — a compact stat chip that
     surfaces the confirmed amplitude figure in the hero. — */
.product-hero__highlights {
  list-style: none;
  margin: 0 0 var(--space-32);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.spec-chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
}

.spec-chip__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  color: var(--color-text);
}

.spec-chip__label {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-hero__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

/* Dual CTA row (UI-rework Phase 4) — Buy now (primary) + Add to cart (ghost).
   Mobile-first: stacked + full-width so neither button is cramped; becomes a
   side-by-side row from --bp-sm up. */
.product-hero__actions {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--space-16);
}

.product-hero__actions .product-hero__cta {
  width: 100%;
}

@media (min-width: 640px) /* --bp-sm */ {
  .product-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: auto;
  }

  .product-hero__actions .product-hero__cta {
    width: auto;
  }
}

.product-hero__note {
  margin-block-start: var(--space-16);
}

@media (min-width: 1024px) /* --bp-lg */ {
  .product-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }

  .product-hero__media {
    margin-inline: 0;
  }
}

/* ============================================================
 * Full specs (sub-step 1) — a clinical spec list. Each row is a
 * name | value pair under a hairline rule. Confirmed values read
 * bright; pending values render muted + marked (never invented).
 * 1-up → 2-up at --bp-md.
 * ============================================================ */
.spec-list {
  margin: 0;
  display: grid;
  gap: 0;
}

.spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-20);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.spec__name {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.spec__value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: end;
}

/* Pending spec — quietly marked as not-final (mirrors the price placeholder tag). */
.spec__value--tbd {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-bg));
}

.product-specs__note {
  margin-block-start: var(--space-24);
}

@media (min-width: 768px) /* --bp-md */ {
  .spec-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-64);
  }
}

/* ============================================================
 * Science (sub-step 1) — editorial two-up: section head | prose.
 * Mobile-first single column; split from --bp-md (mirrors About).
 * ============================================================ */
.product-science__inner {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}

.product-science__inner .product-section__head {
  margin-block-end: 0;
}

.product-science__body {
  max-width: var(--container-narrow);
  color: var(--color-text-muted);
}

.product-science__body p {
  margin-block-end: var(--space-20);
  line-height: var(--leading-normal);
}

.product-science__body .build-note {
  margin-block-start: var(--space-4);
}

@media (min-width: 768px) /* --bp-md */ {
  .product-science__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }
}

/* ============================================================
 * Certifications (sub-step 1) — tokenized placeholder slots until
 * the real marks land. Sharp-edged surface tiles with a label,
 * mirroring the media-placeholder treatment. 2-up → 4-up at --bp-md.
 * ============================================================ */
.cert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

.cert-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: var(--border-hairline) dashed var(--color-border);
  border-radius: var(--radius-none);
}

.cert-slot__label {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* Confirmed marks (Phase 5, C) — text tiles for FCC · CE · RoHS · Patent: solid
   hairline instead of the placeholder dash, display face, no uppercase tracking
   (the marks are proper names). */
.cert-slot--mark {
  border-style: solid;
}

.cert-slot--mark .cert-slot__label {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--color-text);
}

.product-certs__note {
  margin-block-start: var(--space-24);
}

@media (min-width: 768px) /* --bp-md */ {
  .cert-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-24);
  }
}

/* ============================================================
 * Wavelength breakdown (Step 9, panel only) — the panel's signature
 * data section: three cards, one per band (red / near-infrared / infrared),
 * each a big Manrope figure + uppercase depth label + a sentence on
 * what it reaches. Reuses the spec-chip surface idiom (ref-06 spec
 * cards) as full cards. 1-up → 2-up at --bp-md.
 * ============================================================ */
.wavelength-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-24);
}

.wavelength {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
}

.wavelength__value {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.wavelength__label {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand);
}

.wavelength__copy {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.product-wavelengths__note {
  margin-block-start: var(--space-24);
}

@media (min-width: 768px) /* --bp-md */ {
  .wavelength-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
}

/* Three bands (Phase 5, C): 1-up → 2-up at --bp-md → 3-up at --bp-lg. */
@media (min-width: 1024px) /* --bp-lg */ {
  .wavelength-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
 * Reviews (sub-step 2) — empty state until the product ships and
 * collects verified reviews (ref-05 review layout, deferred). A
 * quiet, tokenized placeholder panel, not invented testimonials.
 * ============================================================ */
.reviews-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-48) var(--space-24);
  text-align: center;
  background-color: var(--color-surface);
  border: var(--border-hairline) dashed var(--color-border);
  border-radius: var(--radius-none);
}

.reviews-empty__title {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.reviews-empty__copy {
  max-width: var(--container-narrow);
  margin-inline: auto;
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ============================================================
 * Cross-sell (sub-step 2) — "complete the stack": the panel +
 * the bundle. Reuses the home showcase's stack-card idiom (surface
 * panel, hairline edge, bottom-aligned price/CTA foot); the bundle
 * is the featured, brand-edged card and the one you buy. 1-up →
 * 2-up at --bp-md.
 * ============================================================ */
.crosssell-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-24);
}

.crosssell-card {
  position: relative; /* anchors a .card-link stretched overlay (the bundle card) */
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
  /* Tactile hover cue (Step 14) — matches the shop cards: border + surface shift,
     flat/clinical, no shadow. Reduced-motion drops the transition below. */
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.crosssell-card:hover,
.crosssell-card:focus-within {
  border-color: var(--color-text-muted);
  background-color: var(--color-surface-2);
}

/* Featured (bundle): brand-red edge marks the one you buy — accent, no fill. */
.crosssell-card--featured {
  border-color: var(--color-brand);
}

/* Featured keeps its brand edge on hover (still lifts the surface). */
.crosssell-card--featured:hover,
.crosssell-card--featured:focus-within {
  border-color: var(--color-brand);
  background-color: var(--color-surface-2);
}

@media (prefers-reduced-motion: reduce) {
  .crosssell-card {
    transition: none;
  }
}

.crosssell-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Pill badge — sanctioned pill shape; brand fill marks the featured card. */
.crosssell-card__badge {
  align-self: flex-start;
  padding: var(--space-4) var(--space-12);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-brand);
  border-radius: var(--radius-pill);
}

.crosssell-card__copy {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Foot bottom-aligns the price + CTA across cards of differing copy length. */
.crosssell-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.crosssell-card__cta {
  position: relative; /* above a card's stretched .card-link overlay (z-index 1) */
  z-index: 2;
  align-self: flex-start;
}

/* A visual-only CTA pill on a fully-linked card (the article cross-sell): it
   mirrors a button but the card's .card-link is the one real link, so clicks
   must pass straight through to the overlay beneath. */
.crosssell-card__cta--cue {
  pointer-events: none;
}

/* A card whose title is the .card-link (the bundle → /recovery-routine/): the
   title keeps the heading colour, not the brand-red base <a>. */
.crosssell-card__title .card-link,
.crosssell-card__title .card-link:hover {
  color: inherit;
}

@media (min-width: 768px) /* --bp-md */ {
  .crosssell-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
}

/* ============================================================
 * The Recovery Routine (bundle PDP, page-recovery-routine.php) — the bundle-only
 * pieces on top of the shared PDP sections above: an index label on the two
 * "in the stack" cards, the indexed protocol steps (ref-04 numbered sections),
 * and the side-by-side spec columns.
 * ============================================================ */

/* Index label on the contents cards — brand micro-label, ref-04 "(1) (2)". */
.stack-index {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-brand);
}

/* — Protocol — three indexed steps. Each step is a hairline-topped column with
     a large counter figure; 1-up → 3-up at --bp-md. — */
.protocol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-24);
  counter-reset: protocol;
}

.protocol-step {
  counter-increment: protocol;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
}

/* The step number — a big Manrope figure; the red X's accent at display size. */
.protocol-step::before {
  content: counter(protocol, decimal-leading-zero);
  margin-block-end: var(--space-12);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand);
}

.protocol-step__when {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.protocol-step__title {
  font-size: var(--type-subheading);
  line-height: var(--leading-snug);
}

.protocol-step__copy {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.protocol-note {
  margin-block-start: var(--space-32);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.protocol-note a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.protocol-note a:hover,
.protocol-note a:focus-visible {
  color: var(--color-brand-hover);
}

@media (min-width: 768px) /* --bp-md */ {
  .protocol-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
  }
}

/* — Spec at a glance — one column per tool, each a single-column spec list
     under the product name; 1-up → 2-up at --bp-md. — */
.stack-specs {
  display: grid;
  gap: var(--space-48);
}

.stack-specs__name {
  margin-block-end: var(--space-16);
  font-size: var(--type-subheading);
}

/* Each column is already half-width — keep its rows single-column (overrides
   the 2-up .spec-list at --bp-md). */
.stack-specs__list {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) /* --bp-md */ {
  .stack-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-64);
  }

  .stack-specs__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Gallery (Phase 6, C4) — the PDP hero media on Pulse + Glow
 * (template-parts/gallery.php + assets/js/gallery.js). A 3:2 main
 * viewport that is a native, scroll-snapped track of full-width
 * slides, and a row of 1:1 thumbnail links underneath. Works with
 * no JS (swipe + anchor links); the hero grid is unchanged.
 * ============================================================ */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Track — one slide per view; scrollbar hidden, corners follow the media radius.
   position: relative so each slide's offsetLeft is measured from the track (gallery.js). */
.gallery__track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-none);
  scrollbar-width: none; /* Firefox */
}

.gallery__track::-webkit-scrollbar {
  display: none; /* WebKit */
}

.gallery__track:focus-visible {
  outline: var(--border-thin) solid var(--color-brand);
  outline-offset: var(--space-4);
}

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Thumbnails — a single row; on narrow screens it scrolls sideways (with a peek
   of the next thumb) instead of wrapping. --thumbs is a structural count (thumbs
   visible across the row), like .home-slider__track's --peek. */
.gallery__thumbs {
  --thumbs: 4.5;
  display: flex;
  gap: var(--space-12);
  overflow-x: auto;
  list-style: none;
  margin: 0;
  /* Room for the focus ring inside the scroll box, which would otherwise clip it. */
  padding: var(--space-4);
  margin-inline: calc(-1 * var(--space-4));
  scrollbar-width: none; /* Firefox */
}

.gallery__thumbs::-webkit-scrollbar {
  display: none; /* WebKit */
}

.gallery__thumbs-item {
  flex: 0 0 calc((100% - (var(--thumbs) - 1) * var(--space-12)) / var(--thumbs));
}

.gallery__thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-none);
}

/* Ring drawn over the image: hairline at rest, brighter on hover, a thin
   near-white ring on the current photo. The focus ring (base.css) stays brand red. */
.gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.gallery__thumb:hover::after {
  border-color: var(--color-text-muted);
}

.gallery__thumb[aria-current="true"]::after {
  border: var(--border-thin) solid var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .gallery__thumb::after {
    transition: none;
  }
}

@media (min-width: 640px) /* --bp-sm */ {
  .gallery__thumbs {
    --thumbs: 5;
    gap: var(--space-16);
  }

  .gallery__thumbs-item {
    flex-basis: calc((100% - (var(--thumbs) - 1) * var(--space-16)) / var(--thumbs));
  }
}