/* ==========================================================================
   Product detail, wave 3: responsive pass for 320 to 1920.
   Scoped to body.route-product (templates/product.php) only.
   ========================================================================== */

/* ---------- global guards ---------- */
.route-product .band { overflow-x: clip; }
.route-product .pdp-info, .route-product .gallery, .route-product .prose, .route-product .spec-card { min-width: 0; }
.route-product .pdp-info h1.display { overflow-wrap: break-word; hyphens: manual; }
.route-product .crumbs { overflow-wrap: anywhere; }

/* Spec sheet: style code reads as a document number */
.route-product .pdp-sheet-head { align-items: baseline; }
.route-product .pdp-facts dt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; background: var(--accent); }

/* ---------- materials and spec card: long values wrap instead of squeezing ---------- */
.route-product .spec-card .kv div { flex-wrap: wrap; align-items: baseline; }
.route-product .spec-card .kv dt { flex: 0 0 auto; }
.route-product .spec-card .kv dd { flex: 1 1 50%; min-width: 0; overflow-wrap: anywhere; }

/* ---------- tables (price + size charts): contained horizontal scroll ---------- */
.route-product .tiers-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
.route-product .sizechart .seg { max-width: 100%; }

/* ---------- calculator: no iOS zoom on focus, range takes the free width ---------- */
.route-product .qty-row input[type="number"] { font-size: 16px; min-height: 44px; }
.route-product .qty-row input[type="range"] { flex: 1 1 auto; min-width: 0; min-height: 44px; }

/* ---------- decoration pricing form ---------- */
/* html scroll-padding (20-product) already clears the header and index; a second offset here doubled the gap. */
.route-product .deco-price { scroll-margin-top: 0; }
.route-product .deco-opt input { width: 20px; height: 20px; }

/* ---------- hero price box: "Full table" never splits, the deco link keeps its line height ---------- */
.route-product .pdp-price-head a { flex: none; white-space: nowrap; }
.route-product .pdp-hero .pdp-deco-note a { display: inline; padding-block: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- sticky buy bar must not cover the last footer lines ---------- */
.route-product .foot { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.route-product .sticky-buy-inner { padding-block: 8px; }
.route-product .sticky-buy-inner span { min-width: 0; }
.route-product .sticky-buy-inner .btn { flex: none; min-height: 44px; }

/* ---------- touch: 44px tap targets ---------- */
@media (pointer: coarse), (max-width: 900px) {
  .route-product .pdp-price-head a,
  .route-product .pdp-sublinks a { display: inline-flex; align-items: center; min-height: 44px; }
  .route-product .pdp-price-head { align-items: center; padding-block: 0; min-height: 44px; }
  .route-product .seg button { min-height: 44px; }
  .route-product .faq summary { min-height: 52px; }
  .route-product .chain-mini-item { min-height: 44px; }
  .route-product .more-link a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- tablet portrait (600 to 900): thumbs beside the plate keeps the hero short ---------- */
@media (min-width: 600px) and (max-width: 900px) {
  .route-product .pdp-hero .gallery { grid-template-columns: minmax(0, 1fr) 92px; align-items: start; max-width: 640px; }
  .route-product .pdp-hero .thumbs { grid-template-columns: 1fr; gap: 8px; }
  .route-product .pdp-hero .thumbs button { aspect-ratio: auto; }
  .route-product .pdp-hero .thumbs button img { aspect-ratio: 1; height: auto; }
  .route-product .pdp-hero .product-grid { gap: 28px; }
}

/* ---------- real sticky header height ----------
   --head-h (60px) is the inner row only; the sticky header is taller on desktop (logo row + nav).
   js/parts/30-product.js measures #siteHead into --pdp-head so the sticky gallery and anchor jumps clear it. */
html:has(body.route-product) { scroll-padding-top: calc(var(--pdp-head, var(--head-h)) + 64px); }
.route-product .pdp-hero .gallery { top: calc(var(--pdp-head, var(--head-h)) + 16px); }
/* Short landscape windows: a sticky plate taller than the viewport would hide its own thumbs. */
@media (max-height: 760px) { .route-product .pdp-hero .gallery { position: static; } }

/* ---------- tablet landscape / small desktop (901 to 1100) ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .route-product .pdp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-product .pdp-info .hero-cta .btn { flex-basis: 100%; }
}

/* ---------- large desktop ---------- */
@media (min-width: 1600px) {
  .route-product .pdp-info h1.display { font-size: 3.1rem; }
  .route-product .pdp-tiers b { font-size: 1.3rem; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .route-product .pdp-hero { padding-top: 4px; padding-bottom: 48px; }
  .route-product .pdp-info .pdp-lede,
  .route-product .pdp-who,
  .route-product .pdp-hero .pdp-deco-note,
  .route-product .pdp-price-quote,
  .route-product .prose p,
  .route-product .ticks li,
  .route-product .caveat,
  .route-product .steps4 span,
  .route-product .sample-banner p,
  .route-product .deco-price-head p,
  .route-product .deco-opt { font-size: 1rem; }
  .route-product .pdp-facts dd { font-size: 1.02rem; }
  .route-product .pdp-facts dd.sub { font-size: .875rem; }
  .route-product .pdp-sublinks { gap: 0 24px; font-size: 1rem; }
  .route-product .pdp-custom .custom-strip { font-size: .9rem; }
  .route-product .pdp-certs { font-size: .8rem; }

  .route-product .deco-groups { grid-template-columns: 1fr; gap: 14px; }
  .route-product .deco-price .btn { justify-self: stretch; justify-content: center; }
  .route-product .sample-banner .btn { width: 100%; justify-content: center; }
  .route-product .calc-out b { font-size: 1.3rem; }
  .route-product .sticky-buy-inner span { font-size: .875rem; }
}

@media (max-width: 380px) {
  .route-product .pdp-info h1.display { font-size: 1.7rem; }
  .route-product .pdp-sheet-head { font-size: .66rem; }
  .route-product .pdp-facts > div { padding: 10px 10px 12px; }
  .route-product .thumbs { gap: 6px; }
  .route-product .calc-out { grid-template-columns: 1fr; }
  .route-product .seg button { padding-inline: 10px; }
}

/* ---------- wave 2 additions (20-product): phone sizing ---------- */
@media (max-width: 600px) {
  .route-product .pdp-tier-read,
  .route-product .pdp-deco-status { font: 400 1rem/1.5 var(--f-body); }
  .route-product .pdp-deco-clear { width: 100%; }
  .route-product .pdp-zoom-hint { display: none; }
  .route-product .pdp-gal-count { font-size: .7rem; }
}
@media (max-width: 380px) {
  .route-product .pdp-gal-nav { width: 40px; height: 40px; margin-top: -20px; }
  .route-product .pdp-gal-nav.prev { left: 6px; }
  .route-product .pdp-gal-nav.next { right: 6px; }
}
/* Tablets: tighter index items, and the same "more to swipe" fade phones get when the list overflows. */
@media (min-width: 600px) and (max-width: 900px) {
  .route-product .pdp-index-list a { padding: 0 10px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .route-product .pdp-index-list { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
  .route-product .pdp-index-list.is-end { mask-image: none; -webkit-mask-image: none; }
}

/* Phones: certifications as small spec tags, so a wrapped line never starts with a slash. */
@media (max-width: 600px) {
  .route-product .pdp-certs { gap: 6px; align-items: center; }
  .route-product .pdp-certs .pdp-label { flex-basis: 100%; margin: 0 0 2px; }
  .route-product .pdp-certs > span:not(.pdp-label) { padding: 3px 7px; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--surface); }
  .route-product .pdp-certs > span:not(.pdp-label) + span::before { content: none; }
}