/* ═══════════════════════════════════════════════════════════════
   LONE STAR — product-page.css  (v3 refinements)
   Self-contained stylesheet for /products/[slug]/index.html
   Loaded ONLY on product pages. No reliance on styles.css.

   v3 fixes:
   - Bug 1: html/body now transparent so the paint-blob canvas
     (z-index: -2) shows through. Sectional dark areas use a
     ::before at z-index: -1 to cover the canvas where needed.
   - Bug 2: hero buttons and CTA buttons forced to a single row
     (flex-row, nowrap, inline-flex with width: auto). Only stack
     below 480px.
   - Section background flow: hero/how/recent/why/cta-strip/footer
     = paint-blob (transparent, dark text); whats-included/faq =
     dark slate-950 + radial gradient (sectional, white text).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cream:        #FAFAF7;
  --cream-warm:   #F5F2EB;
  --ink:          #1A1A1A;
  --ink-soft:     #2D2D2D;
  --ink-muted:    #595959;
  --gold:         #C9A961;
  --gold-hi:      #E0C485;
  --gold-soft:    rgba(201, 169, 97, 0.4);
  --gold-shadow:  0 4px 24px rgba(201, 169, 97, 0.08);
  --hairline-dark:  rgba(255, 255, 255, 0.12);
  --hairline-light: rgba(26, 26, 26, 0.12);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "DM Sans", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1320px;
  --gutter:    clamp(1.5rem, 4vw, 4rem);
  --nav-h:     64px;
}

/* ─── Reset + base ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* html / body: TRANSPARENT so paint-blob canvas (z-index: -2) shows through.
   A single cream fallback is set on html via background-color (NOT background
   shorthand) so it sits below the canvas without painting over it. */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: var(--cream);
}
body.product-page {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  padding-top: var(--nav-h);          /* compensate for fixed sticky nav */
}
body.product-page main { background: transparent; }

img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; top: -40px; left: 1rem;
  background: var(--gold); color: var(--ink);
  padding: 0.5rem 1rem; z-index: 10000;
  border-radius: 4px;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ─── PAINT-BLOB CANVAS (from app.js)
   z-index: -2 so sectional dark ::before backgrounds (z-index: -1)
   cover the canvas inside What's Included, Common Questions, and
   Ready When You Are sections. ─── */
canvas.paint-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -2;
  pointer-events: none;
  user-select: none;
  display: block;
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY PRODUCT NAV  (position: fixed for bulletproof anchoring;
   Home chip is first.)
   ═══════════════════════════════════════════════════════════════ */
.sticky-product-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--nav-h);
  z-index: 100;
  background: #0A0A0A;
  border-bottom: 1px solid var(--hairline-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.sticky-nav-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.875rem, 2vw, 2rem);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: var(--container);
  width: 100%;
}
.sticky-nav-chips::-webkit-scrollbar { display: none; }
.sticky-nav-chips li { flex-shrink: 0; }
.sticky-nav-chips a {
  display: block;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 1rem 0.25rem;
  position: relative;
  transition: color 200ms var(--ease-out);
  white-space: nowrap;
}
.sticky-nav-chips a:hover { color: #FFFFFF; }
.sticky-nav-chips a.is-active,
.sticky-nav-chips a[aria-current="page"] {
  color: var(--gold);
}
.sticky-nav-chips a.is-active::after,
.sticky-nav-chips a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  height: 2px;
  background: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   COMMON TYPE PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.h-hero {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.h-section {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.intro {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-soft);
}
.section-head {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head h2 { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — single solid gold-filled variant; used identically
   on both hero buttons AND Ready When You Are buttons.
   Forced inline-flex + width: auto so flex containers can lay
   them out side-by-side.
   ═══════════════════════════════════════════════════════════════ */
.btn-gold-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1.5px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.30);
  transition: background-color 250ms var(--ease-out),
              border-color 250ms var(--ease-out),
              transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  min-height: 52px;
}
.btn-gold-filled:hover {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(201, 169, 97, 0.42);
}

/* ═══════════════════════════════════════════════════════════════
   GOLD-BORDERED CARD UTILITY
   used on: hero image, gallery figures, why-cards, how-we-do-it cards
   ═══════════════════════════════════════════════════════════════ */
.gold-card {
  border: 1.5px solid var(--gold-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--gold-shadow);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════════════════
   1. PRODUCT HERO  (paint-blob bg; 2 cols: image-card left, content right)
   ═══════════════════════════════════════════════════════════════ */
.product-hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: transparent;
}
.product-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.product-hero-figure {
  position: relative;
  border: 1.5px solid var(--gold-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--gold-shadow);
  background: var(--cream-warm);
  line-height: 0;
}
.product-hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.product-hero-figure img[src*="drapes.png"] {
  object-fit: cover !important;
}
.product-hero-text > * + * { margin-top: 1.25rem; }
.product-hero-text h1 {
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.product-hero-text .intro {
  max-width: 52ch;
  color: var(--ink-soft);
}
.product-hero-text .body {
  max-width: 52ch;
  color: #3A3A3A;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.spec-list {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0 1.5rem;
  border-top: 1px solid var(--hairline-light);
  padding-top: 1.5rem;
  margin: 1.75rem 0 2rem;
  max-width: 520px;
}
.spec-list dt,
.spec-list dd {
  border-bottom: 1px solid var(--hairline-light);
  padding: 0.85rem 0;
}
.spec-list dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.spec-list dd {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink);
}
.spec-list > dt:last-of-type,
.spec-list > dd:last-of-type {
  border-bottom: 0;
}

/* HERO BUTTONS — forced single row at all widths >= 480px.
   nowrap prevents stacking when the right column gets narrow. */
.product-hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   2. HOW WE DO IT  (4 cards on paint-blob bg)
   ═══════════════════════════════════════════════════════════════ */
.how-we-do-it {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: transparent;
}
.how-we-do-it-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.how-we-do-it-header {
  text-align: center;
  margin-bottom: 3rem;
}
.how-we-do-it-header .eyebrow { margin-bottom: 1.25rem; }
.how-we-do-it-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.expect-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--gold-soft);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--gold-shadow);
  transition: transform 350ms var(--ease-out), border-color 350ms var(--ease-out);
}
.expect-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.expect-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.15);
  color: var(--gold);
  margin-bottom: 1rem;
}
.expect-card-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.expect-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.expect-card-desc {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   3. RECENT INSTALLATIONS  (paint-blob bg, 3×2 grid, gold-bordered figures)
   ═══════════════════════════════════════════════════════════════ */
.recent-installations {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: transparent;
}
.install-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.install-grid figure {
  margin: 0;
}
.install-grid .gallery-card {
  position: relative;
  border: 1.5px solid var(--gold-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--gold-shadow);
  background: var(--cream-warm);
  line-height: 0;
  transition: transform 600ms var(--ease-out), border-color 350ms var(--ease-out);
}
.install-grid figure:hover .gallery-card {
  border-color: var(--gold);
}
.install-grid figure:hover img { transform: scale(1.02); }
.install-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
  cursor: zoom-in;
}
.install-grid figcaption {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: italic;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   4. WHAT'S INCLUDED  (SECTIONAL dark bg: slate-950 + radial gradient)
      Section-only ::before at z-index: -1 covers the paint-blob (-2).
   ═══════════════════════════════════════════════════════════════ */
.whats-included {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: #FFFFFF;
}
.whats-included::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #020617;
  background-image: radial-gradient(circle 560px at 50% 200px, #525252, transparent);
  pointer-events: none;
}
.whats-included .section-head h2 { color: #FFFFFF; }
.included-list {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 0 var(--gutter);
  display: grid;
  gap: 1.25rem;
}
.included-list li {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline-dark);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.included-list li:last-child { border-bottom: 0; }
.included-list strong {
  color: #FFFFFF;
  font-weight: 600;
  display: inline;
}

/* ═══════════════════════════════════════════════════════════════
   5. WHY CHOOSE  (paint-blob bg, 3 gold-bordered cards)
   ═══════════════════════════════════════════════════════════════ */
.why-choose {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: transparent;
}
.why-choose .section-head { margin-bottom: 2.5rem; }
.why-choose .section-head h2 { color: var(--ink); }
.why-choose .section-head p {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.why-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid var(--gold-soft);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: var(--gold-shadow);
}
.why-card .num {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.85rem;
}
.why-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.65rem;
}
.why-card p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   6. COMMON QUESTIONS  (SECTIONAL dark bg: slate-950 + radial gradient)
   ═══════════════════════════════════════════════════════════════ */
.faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: #FFFFFF;
}
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #020617;
  background-image: radial-gradient(circle 560px at 50% 200px, #525252, transparent);
  pointer-events: none;
}
.faq .section-head h2 { color: #FFFFFF; }
.faq-list {
  max-width: 800px;
  margin: 2rem auto 0;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--hairline-dark);
}
.faq-item {
  border-bottom: 1px solid var(--hairline-dark);
}
.faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 1rem;
  align-items: center;
  text-align: left;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  list-style: none;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger:hover { color: var(--gold); }
.faq-icon {
  position: relative;
  width: 18px; height: 18px;
  color: var(--gold);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 240ms var(--ease-out);
}
.faq-icon::before { top: 8px; left: 0; right: 0; height: 1.5px; }
.faq-icon::after  { left: 8px; top: 0; bottom: 0; width: 1.5px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-answer {
  padding: 0 0 1.75rem;
  max-width: 64ch;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

/* ═══════════════════════════════════════════════════════════════
   7. READY WHEN YOU ARE  (paint-blob bg, dark charcoal text)
      Two IDENTICAL gold-filled buttons side by side. Buttons are
      unchanged — they don't depend on the section background.
   ═══════════════════════════════════════════════════════════════ */
.cta-strip {
  background: transparent;
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(5rem, 8vw, 7rem);
  text-align: center;
  color: var(--ink);
}
.cta-strip::before {
  content: none;
  display: none;
}
.cta-strip .eyebrow { color: var(--gold); }
.cta-strip h2 {
  color: var(--ink);
  max-width: 20ch;
  margin: 0 auto 1rem;
}
.cta-strip-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0 var(--gutter);
}

/* ═══════════════════════════════════════════════════════════════
   8. FOOTER  (paint-blob bg, dark text, dark hairlines, 4 cols)
      No plaque image.
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: transparent;
  color: var(--ink);
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
  border-top: 1px solid var(--hairline-light);
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.footer-brand p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 32ch;
}
.footer-col h4 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col a {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  transition: color 200ms var(--ease-out);
}
.footer-col a:hover { color: var(--gold); }
.footer-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.8;
}
.footer-bottom {
  max-width: var(--container);
  margin: 3.5rem auto 0;
  padding: 1.5rem var(--gutter) 0;
  border-top: 1px solid var(--hairline-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p,
.footer-bottom a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.footer-bottom a:hover { color: var(--gold); }
.footer-legal a + a { margin-left: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 768px) {
  .product-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .how-grid { grid-template-columns: 1fr; }
  .install-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .spec-list { grid-template-columns: 100px 1fr; gap: 0 1rem; }
  .sticky-nav-chips { justify-content: flex-start; padding: 0 1rem; }
}

/* Only at narrow phone widths do we allow the two-button rows
   to wrap (and even then they keep auto width — never width:100%). */
@media (max-width: 480px) {
  .product-hero-actions,
  .cta-strip-actions {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .install-grid figure:hover img { transform: none; }
  /* Battery + accessibility: kill paint-blob canvas entirely. */
  canvas.paint-bg { display: none !important; }
  html { background-color: var(--cream); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE REPAIR — hardening pass for phones and tablets.
   All rules below override earlier 768px / 480px declarations
   via cascade order.
   ═══════════════════════════════════════════════════════════════ */

/* Touch behavior (global) */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a, button, summary, .btn-gold-filled, .sticky-nav-chips a {
  -webkit-tap-highlight-color: rgba(201, 169, 97, 0.2);
}

/* Sticky nav: scroll-snap + iOS momentum + safe-area insets */
.sticky-product-nav {
  position: -webkit-sticky;
  position: fixed;             /* unchanged from base — bulletproof fixed */
  z-index: 100;
  -webkit-overflow-scrolling: touch;
  padding-top: max(0px, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
.sticky-nav-chips {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.sticky-nav-chips li {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.sticky-nav-chips a.is-active,
.sticky-nav-chips a[aria-current="page"] {
  scroll-margin-inline-start: 1rem;
}

/* Paint-blob: lower opacity on mobile so heavy renders feel lighter. */
@media (max-width: 768px) {
  canvas.paint-bg { opacity: 0.5; }
}

/* ─── TABLET TIER (769px–1024px refinements) ──────────────────── */
@media (max-width: 1024px) {
  .install-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── LARGE MOBILE / SMALL TABLET (≤768px) ────────────────────── */
@media (max-width: 768px) {
  /* Section padding: trim generous desktop padding for screen real estate */
  .how-we-do-it,
  .recent-installations,
  .whats-included,
  .why-choose,
  .faq,
  .cta-strip {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .product-hero { padding: 2.5rem 0 2rem; }
  .site-footer { padding-top: 3rem; padding-bottom: 1.5rem; }

  /* How We Do It: 2×2 on tablet/large phone (not 1-col yet) */
  .how-grid { grid-template-columns: repeat(2, 1fr); }

  /* Recent Installations: still 1 col at this tier (intermediate is 2-col above) */
  .install-grid { grid-template-columns: 1fr; }

  /* Why Choose: 1 col (text-heavy) */
  .why-grid { grid-template-columns: 1fr; }

  /* Hero + CTA buttons: keep side-by-side but trim padding to fit */
  .product-hero-actions,
  .cta-strip-actions {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }
  .product-hero-actions .btn-gold-filled,
  .cta-strip-actions .btn-gold-filled {
    padding: 0.875rem 1.25rem;
    font-size: 0.8rem;
  }

  /* FAQ tap target */
  .faq-trigger {
    min-height: 56px;
    padding-block: 1rem;
  }
}

/* ─── PHONE (≤480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Tighter section padding on phones */
  .how-we-do-it,
  .recent-installations,
  .whats-included,
  .why-choose,
  .faq,
  .cta-strip {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* How We Do It: now stacks to 1 col on phones */
  .how-grid { grid-template-columns: 1fr; }

  /* Hero + CTA buttons: STACK full-width on phones for thumb-friendly tap */
  .product-hero-actions,
  .cta-strip-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }
  .product-hero-actions .btn-gold-filled,
  .cta-strip-actions .btn-gold-filled {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.8rem;
  }

  /* Footer tighter on phones */
  .footer-grid { gap: 1.5rem; }

  /* Eyebrow min readable */
  .eyebrow { font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SCROLL FIX — iOS scroll snap-back repair
   Prior MOBILE REPAIR added `html, body { overflow-x: hidden;
   max-width: 100vw }`. The `max-width: 100vw` fights iOS Safari's
   rubber-band momentum scroll and causes mid-scroll snap-back.
   - drop max-width: 100vw entirely
   - prefer overflow-x: clip (iOS 16+, doesn't break scroll context)
   - fall back to overflow-x: hidden on older iOS via @supports
   Same selector specificity as earlier rules; later cascade wins.
   ═══════════════════════════════════════════════════════════════ */
html {
  overflow-x: clip;
  max-width: none;
}
body.product-page {
  overflow-x: clip;
  max-width: none;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; max-width: none; }
  body.product-page { overflow-x: hidden; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY NAV — HOME CHIP NEVER GOLD
   The HOME chip (href="/") must remain white on every product page,
   even if anything accidentally marks it active. Overrides the
   .is-active / [aria-current="page"] gold rules at lines 148-159.
   ═══════════════════════════════════════════════════════════════ */
.sticky-product-nav a[href="/"],
.sticky-product-nav a[href="/"].is-active,
.sticky-product-nav a[href="/"][aria-current="page"],
.sticky-nav-chips a[href="/"],
.sticky-nav-chips a[href="/"].is-active,
.sticky-nav-chips a[href="/"][aria-current="page"] {
  color: rgba(255, 255, 255, 0.72) !important;
}
.sticky-product-nav a[href="/"]:hover,
.sticky-nav-chips a[href="/"]:hover {
  color: #FFFFFF !important;
}
.sticky-nav-chips a[href="/"]::after,
.sticky-nav-chips a[href="/"].is-active::after,
.sticky-nav-chips a[href="/"][aria-current="page"]::after {
  display: none !important;
  content: none !important;
}

/* ============================================== */
/* PROMISE STRIP — Direction A Editorial          */
/* Transparent background, blends into paint-blob */
/* ============================================== */
.promise-strip {
  width: 100% !important;
  padding: 4rem 1.5rem !important;
  background: transparent !important;
  text-align: center !important;
}

.promise-strip-inner {
  max-width: 760px !important;
  margin: 0 auto !important;
  position: relative !important;
}

.promise-rule {
  width: 80% !important;
  max-width: 600px !important;
  height: 1px !important;
  background: #C9A961 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  animation: promise-rule-fade 800ms ease-out forwards !important;
}

.promise-rule-top {
  margin-bottom: 1.75rem !important;
  animation-delay: 100ms !important;
}

.promise-rule-bottom {
  margin-top: 1.75rem !important;
  animation-delay: 1400ms !important;
}

.promise-eyebrow {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  letter-spacing: 0.4em !important;
  color: #C9A961 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
  opacity: 1 !important;
  animation: promise-fade-up 1000ms ease-out 400ms forwards !important;
}

.promise-headline {
  font-family: var(--serif, "Cormorant Garamond", Georgia, "Times New Roman", serif) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.4 !important;
  color: #1A1A1A !important;
  font-weight: 400 !important;
  margin: 0 !important;
  letter-spacing: 0.005em !important;
  opacity: 1 !important;
  animation: promise-fade-up 1000ms ease-out 700ms forwards !important;
}

.promise-accent {
  color: #C9A961 !important;
  font-style: italic !important;
}

.promise-ornament-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 1.25rem !important;
  opacity: 1 !important;
  animation: promise-fade-up 1000ms ease-out 1100ms forwards !important;
}

.promise-mini-line {
  width: 60px !important;
  height: 1px !important;
  background: #C9A961 !important;
  opacity: 0.5 !important;
}

.promise-glyph {
  color: #C9A961 !important;
  font-size: 14px !important;
  opacity: 0.7 !important;
}

@keyframes promise-fade-up {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes promise-rule-fade {
  0% { opacity: 0; transform: scaleX(0.6); }
  100% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 768px) {
  .promise-strip {
    padding: 2.5rem 1rem !important;
  }
  .promise-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 1rem !important;
  }
  .promise-headline {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
  }
  .promise-rule {
    width: 90% !important;
  }
  .promise-rule-top {
    margin-bottom: 1.25rem !important;
  }
  .promise-rule-bottom {
    margin-top: 1.25rem !important;
  }
  .promise-mini-line {
    width: 40px !important;
  }
}
/* END PROMISE STRIP =============================== */

/* ============================================== */
/* LIGHTBOX MODAL                                  */
/* ============================================== */
.lightbox-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,0.92) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 300ms ease !important;
  padding: 2rem !important;
}
.lightbox-overlay.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.lightbox-image {
  max-width: 90vw !important;
  max-height: 90vh !important;
  object-fit: contain !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6) !important;
}
.lightbox-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: transparent !important;
  color: #FAFAF7 !important;
  border: 1px solid #C9A961 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Georgia, serif !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.lightbox-close:hover,
.lightbox-close:focus {
  background: rgba(201,169,97,0.15) !important;
  outline: none !important;
}
/* END LIGHTBOX ================================== */

/* ============================================== */
/* PROMISE STRIP — TYPEWRITER UPGRADE              */
/* ============================================== */
.promise-headline {
  font-family: var(--serif, "Cormorant Garamond", Georgia, "Times New Roman", serif) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.3 !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
  margin: 0 !important;
  letter-spacing: 0.005em !important;
  opacity: 1 !important;
  min-height: 1.5em !important;
  text-align: center !important;
}

.promise-cursor {
  display: inline-block !important;
  color: #C9A961 !important;
  font-weight: 400 !important;
  animation: promise-cursor-blink 0.8s steps(2) infinite !important;
  margin-left: 0.05em !important;
}

@keyframes promise-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.promise-ornament-row,
.promise-rule-top,
.promise-rule-bottom {
  opacity: 0 !important;
  transition: opacity 1s ease-out !important;
}

.promise-strip.typewriter-complete .promise-ornament-row {
  opacity: 1 !important;
  transition-delay: 0.3s !important;
}

.promise-strip.typewriter-complete .promise-rule-top {
  opacity: 1 !important;
}

.promise-strip.typewriter-complete .promise-rule-bottom {
  opacity: 1 !important;
  transition-delay: 0.5s !important;
}

.promise-strip.typewriter-complete .promise-glyph {
  animation: promise-glyph-pulse 2.5s ease-in-out infinite !important;
}

@keyframes promise-glyph-pulse {
  0%, 100% {
    text-shadow: 0 0 0 rgba(201,169,97,0);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(201,169,97,0.8), 0 0 24px rgba(201,169,97,0.4);
    transform: scale(1.15);
  }
}

@media (max-width: 768px) {
  .promise-headline {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
}
/* END PROMISE STRIP TYPEWRITER ==================== */

/* ============================================== */
/* VIDEO DEMO SECTION (home page only)             */
/* ============================================== */
.video-demo {
  width: 100% !important;
  padding: 4rem 1.5rem !important;
  background: transparent !important;
  text-align: center !important;
}

.video-demo-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.video-demo-eyebrow {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  letter-spacing: 0.4em !important;
  color: #C9A961 !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

.video-demo-heading {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
  margin: 0 0 2rem 0 !important;
  letter-spacing: 0.005em !important;
}

.video-player {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #0A0A0A !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
}

.vp-video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.vp-play-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  color: #FAFAF7 !important;
  transition: opacity 400ms ease, background 300ms ease !important;
  z-index: 5 !important;
}

.vp-play-overlay:hover {
  background: rgba(0,0,0,0.55) !important;
}

.vp-play-overlay svg {
  width: 80px !important;
  height: 80px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
}

.vp-play-overlay.vp-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.vp-controls {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  opacity: 0 !important;
  transition: opacity 300ms ease !important;
  z-index: 4 !important;
}

.video-player.vp-started:hover .vp-controls,
.video-player.vp-started .vp-controls:focus-within {
  opacity: 1 !important;
}

.vp-btn {
  background: transparent !important;
  border: none !important;
  color: #FAFAF7 !important;
  cursor: pointer !important;
  padding: 0.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: background 200ms ease !important;
}

.vp-btn:hover {
  background: rgba(201,169,97,0.2) !important;
}

.vp-btn svg:not([style*="display:none"]):not([style*="display: none"]) {
  display: block !important;
}

.vp-progress-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.vp-progress-bar {
  position: relative !important;
  width: 100% !important;
  height: 4px !important;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
}

.vp-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 0 !important;
  background: #C9A961 !important;
  border-radius: 2px !important;
}

.vp-progress-handle {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background: #C9A961 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

.vp-time {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #FAFAF7 !important;
  letter-spacing: 0.1em !important;
}

@media (max-width: 768px) {
  .video-demo {
    padding: 2.5rem 1rem !important;
  }
  .vp-controls {
    gap: 0.4rem !important;
    padding: 0.6rem !important;
  }
  .vp-btn {
    padding: 0.3rem !important;
  }
  .vp-time {
    font-size: 10px !important;
  }
  .vp-progress-handle {
    width: 10px !important;
    height: 10px !important;
  }
}
/* END VIDEO DEMO ================================== */

/* ============================================== */
/* VOLUME SLIDER POPUP                             */
/* ============================================== */
.vp-volume-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.vp-volume-slider-popup {
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
  background: rgba(10,10,10,0.92) !important;
  padding: 0.75rem 0.5rem !important;
  border-radius: 6px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 200ms ease !important;
  z-index: 10 !important;
}

.vp-volume-wrap:hover .vp-volume-slider-popup,
.vp-volume-wrap:focus-within .vp-volume-slider-popup,
.vp-volume-slider-popup:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.vp-volume-slider {
  -webkit-appearance: slider-vertical !important;
  appearance: slider-vertical !important;
  width: 8px !important;
  height: 80px !important;
  background: rgba(255,255,255,0.2) !important;
  cursor: pointer !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  accent-color: #C9A961 !important;
}

.vp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #C9A961 !important;
  cursor: pointer !important;
}

.vp-volume-slider::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #C9A961 !important;
  border: none !important;
  cursor: pointer !important;
}
/* END VOLUME SLIDER ============================== */

/* ===================================================================
   Sale text (product page) — plain styled text below the CTA buttons.
   =================================================================== */
.sale-text {
  margin-top: 1.5rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #1A1A1A);
  text-align: left;
}


/* ===================================================================
   4-up gallery — used where a section has exactly four photos.
   The shared .install-grid is 3-up, which would strand the 4th card
   alone in a mostly empty second row. Two columns gives a clean 2x2.
   =================================================================== */
@media (min-width: 769px) {
  .install-grid--4up {
    grid-template-columns: repeat(2, 1fr);
    max-width: 980px;
  }
}


/* ===================================================================
   Centered trailing row — for counts that don't divide evenly into
   the grid (e.g. 11 photos, 3-up). Doubling the track count and
   spanning each card two tracks reproduces the same card width, but
   lets a short final row start on a half-column offset so it sits
   centered instead of stranded against empty space on the right.
   =================================================================== */
@media (min-width: 1025px) {
  /* 3-up: 11 photos leave two over — inset the pair by half a column */
  .install-grid--center-tail { grid-template-columns: repeat(6, 1fr); }
  .install-grid--center-tail > figure { grid-column: span 2; }
  .install-grid--center-tail > figure:nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* 2-up at tablet: 11 photos leave one over — center it */
  .install-grid--center-tail { grid-template-columns: repeat(4, 1fr); }
  .install-grid--center-tail > figure { grid-column: span 2; }
  .install-grid--center-tail > figure:last-child { grid-column: 2 / span 2; }
}