/* ROSHEN DENTAL LAB — Products page
   Page-specific rules only. Reuses design-system tokens and components
   from styles.css (wrap, pill, section, section-head, ticker, tiles). */

/* ---------- Anchor targets: clear the sticky header ---------- */
#all-on, #guides, #crowns, #milling, #dentures, #dentists, #denturists, #labs {
  scroll-margin-top: 4.5rem;
}

/* ---------- Flagship variant of the canonical .page-band (styles.css):
   the catalog opens taller, with a fact ticker on its floor ---------- */
.page-band--flagship { padding-top: clamp(6.5rem, 15vw, 8.75rem); padding-bottom: clamp(2.6rem, 6vw, 3.6rem); }
.page-band--flagship h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); max-width: 13ch; margin-bottom: 1.1rem; }
.page-band--flagship .sub { font-size: 1.18rem; max-width: 58ch; margin-bottom: 1.9rem; }
.page-band--flagship .ticker { border-top: 1px solid var(--hairline-d); padding-top: 1.15rem; }

/* ---------- Audience sections: hairline between consecutive blocks ---------- */
.aud-section + .aud-section { border-top: 1px solid var(--line); }

/* ---------- Flagship feature (All-On) ---------- */
.prod-flagship {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem);
  border-bottom: 1px solid var(--line);
}
.prod-flagship-media { border-radius: 16px; overflow: hidden; aspect-ratio: 3/2; }
.prod-flagship-media img { width: 100%; height: 100%; object-fit: cover; }
.prod-flagship-copy h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 500; margin-bottom: .7rem; }
.prod-flagship-copy p { color: var(--gray); font-size: 1.05rem; }

.prod-check { list-style: none; margin: 1.1rem 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.prod-check li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .6rem; align-items: baseline; font-size: 1rem; color: var(--ink); }
.prod-check svg { position: relative; top: .15rem; color: var(--gray); }

/* ---------- Medium feature blocks (guides / wax-ups / denturists / labs) ---------- */
.prod-feature {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.prod-feature.reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.prod-feature--text { grid-template-columns: 1fr; }
.prod-feature--text > div { max-width: 62ch; }
.prod-feature.reverse .prod-feature-media { order: 2; }
.prod-feature-media { display: flex; gap: .8rem; }
.prod-feature-media img { flex: 1; min-width: 0; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 16px; }
.prod-feature-media.single img { aspect-ratio: 4/3; }
.prod-feature h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; margin-bottom: .55rem; }
.prod-feature > div > p:not(.prod-feature-note) { color: var(--gray); margin: 0; }
.prod-feature-note { color: var(--gray); margin-top: 1rem; font-size: .97rem; }

/* ---------- Clusters and plain rows ---------- */
.prod-cluster { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.prod-cluster > h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; }
.prod-rows { border-top: 1px solid var(--line); margin-top: 1rem; }
.prod-feature .prod-rows { margin-top: 0; }
.prod-row { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: .5rem 2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.prod-row h3, .prod-row h4 { font-size: 1.25rem; font-weight: 600; }
.prod-row p { margin: 0; color: var(--gray); font-size: .97rem; }

/* ---------- Block-ending CTA (light-weight, not a repeated pill) ---------- */
.block-cta { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); }
.block-cta a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; text-decoration-color: #cfd3cd; }
.block-cta a:hover { text-decoration-color: var(--ink); }

/* ---------- Closing offer (light — dark stays reserved for header/band/footer) ---------- */
.prod-close-section { background-color: var(--paper-2); }
.prod-close-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.prod-close-grid h2 { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 500; margin-bottom: .9rem; }
.prod-close-grid h2 b { font-weight: 600; }
.prod-close-grid p { color: var(--gray); font-size: 1.1rem; }
.prod-close-cta { display: grid; gap: .9rem; justify-items: start; }
.prod-close-cta .alt { color: var(--gray); font-size: .97rem; }
.prod-close-cta .alt a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .prod-flagship { grid-template-columns: 1fr; }
  .prod-flagship-media { order: -1; aspect-ratio: 16/10; }
  .prod-feature, .prod-feature.reverse { grid-template-columns: 1fr; }
  .prod-feature-media, .prod-feature.reverse .prod-feature-media { order: -1; }
  .prod-close-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .prod-row { grid-template-columns: 1fr; gap: .3rem; }
  .prod-feature-media { flex-direction: column; }
  .prod-feature-media img { aspect-ratio: 4/3; }
}