/* ═════════════════════════════════════════════════════════════════
   Product-listing pages — /product-category/promotions/,
   /store/, /shop-beauty/.

   Scoped via `.products-preview` wrapper (see products_body() in
   _src/build.py). Loads only on slugs listed in PAGE_CSS_MAP, so
   nothing here leaks to service pages, articles, or the homepage.

   Design language MIRRORS public/css/pages/home.css 1:1 for visual
   continuity. Tokens (--brand*, --serif, --sans, --shadow*, etc.)
   are defined globally in style.css :root — this file just consumes
   them, so if homepage tokens shift, this file follows automatically.
   ═════════════════════════════════════════════════════════════════ */

/* ── Page-wide tonal wash — EXACT 10-stop gradient from home.css ─
   Same colours, same percentages, same section bands. The promotions
   page is shorter than the homepage so the band edges land on
   different content, but the temperature progression is identical. */
html,body{overflow-x:clip;max-width:100vw}
body:has(.products-preview){
  background:linear-gradient(
    180deg,
    #fbf4f5   0%,    /* hero — soft rose dawn */
    #fdfaf8  10%,    /* stats — neutral cream pause */
    #fdf8f1  22%,    /* awards — warm ivory */
    #fbf9f4  36%,    /* services — cool paper-cream */
    #faf5f3  52%,    /* trimester — rose mist */
    #fbf6f2  65%,    /* why-BMB — blush ivory */
    #fbf7f2  78%,    /* testimonials — peachy warm cream */
    #faf8f3  88%,    /* blog — cool linen */
    #fbf6ed  95%,    /* locations — warm oat */
    #fbf4f5 100%     /* final CTA — back to rose, closes the loop */
  );
}

/* Header intentionally NOT overridden — the default dark-taupe header
   from style.css provides strong contrast against the rose wash, and
   matches every other inner page. Footer styling lives in style.css
   too so it's identical on every page. */

.products-preview{
  font-family:var(--sans);
  color:var(--ink);
  font-size:16px;line-height:1.65;
  max-width:1180px;
  margin:0 auto;
  padding:2rem 2rem 4rem;
  background:transparent;
}

/* ─── Eyebrow — navy text + gold leading hairline to match the
   Terms-of-Service editorial theme used across the site. Applied to
   /store/ and /product-category/promotions/. */
.products-preview .bmb-eyebrow{
  font-family:var(--sans);font-size:.82rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy);
  display:inline-flex;align-items:center;gap:14px;margin:0;
}
.products-preview .bmb-eyebrow::before{
  content:"";width:36px;height:1px;background:var(--gold);
}

/* ─── Hero — page title is the focal point.
   Homepage's section-head pattern flips the hierarchy (big eyebrow,
   small h2) but on a listing page the H1 IS the page title — it
   should be the focal point, not a muted subtitle. Eyebrow stays
   small, H1 stays display-scale. */
.products-preview .bmb-products-hero{
  text-align:center;
  padding:3.5rem 1rem 2.5rem;
  max-width:780px;
  margin:0 auto;
}
.products-preview .bmb-products-hero .bmb-eyebrow{
  justify-content:center;margin-bottom:1.4rem;
}
.products-preview .bmb-products-hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.products-preview .bmb-products-lead{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 auto;
  max-width:62ch;
}

/* ─── Product grid — image-dominant editorial cards.
   auto-fit + capped max-width + justify-content:center so few cards
   center as a row, and an orphan in the last row centers too. */
.products-preview .bmb-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 300px));
  justify-content:center;
  gap:.9rem;
  margin:0 auto;
  padding:0;
}

.products-preview .bmb-product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:none;                        /* override style.css .product-card border */
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  will-change:transform;
}
/* Neutralise style.css padding rules that target direct children of
   .product-card. The new layout uses .bmb-product-card-body to handle
   padding consistently. */
.products-preview .bmb-product-card > h3,
.products-preview .bmb-product-card > p,
.products-preview .bmb-product-card > a:not(.bmb-product-card-img){
  padding:0;
  margin:0;
}
.products-preview .bmb-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(120,80,90,.10), 0 30px 60px rgba(120,80,90,.08);
}

.products-preview .bmb-product-card-img{
  display:block;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(135deg, var(--brand-50), var(--brand-100));
}
.products-preview .bmb-product-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.products-preview .bmb-product-card:hover .bmb-product-card-img img{
  transform:scale(1.05);
}
.products-preview .bmb-product-card-img--empty{
  position:relative;
}
.products-preview .bmb-product-card-img--empty::after{
  content:"BMB";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:2.4rem;
  font-weight:500;
  color:var(--brand-200);
  letter-spacing:.02em;
}

.products-preview .bmb-product-card-body{
  padding:1.3rem 1.3rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  flex:1;
}
.products-preview .bmb-product-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.35rem;
  line-height:1.25;
  letter-spacing:-.005em;
  margin:0;
  color:var(--ink);
}
.products-preview .bmb-product-card h3 a{
  color:inherit;
  text-decoration:none;
}
.products-preview .bmb-product-card h3 a:hover{
  color:var(--brand-dk);
}
.products-preview .bmb-product-card-price{
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--ink-2);
  margin:0;
}
.products-preview .bmb-product-card-price del{
  color:var(--muted);
  margin-right:.4rem;
  font-weight:400;
}
.products-preview .bmb-product-card-price strong{
  color:var(--brand-dk);
  font-weight:600;
}
/* Reset legacy pill styling from style.css and re-style as a clean
   text link with arrow — matches the homepage's service-card CTA. */
.products-preview .bmb-product-card-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:auto 0 0;
  padding:.4rem 0 0;
  background:none;
  border:none;
  border-radius:0;
  text-align:left;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:500;
  color:var(--brand-dk);
  text-decoration:none;
  letter-spacing:.005em;
  align-self:flex-start;
}
.products-preview .bmb-product-card-cta:hover{
  background:none;
  opacity:1;
  color:var(--brand-dk);
  text-decoration:none;
}
.products-preview .bmb-product-card-cta span{
  display:inline-block;
  transition:transform .25s ease;
}
.products-preview .bmb-product-card:hover .bmb-product-card-cta span{
  transform:translateX(4px);
}

/* ─── Final CTA block — uses the homepage's flipped editorial
   hierarchy: BIG eyebrow as the section label, small muted H2 as
   the secondary line. Matches the visual rhythm of homepage section
   heads. */
.products-preview .bmb-products-final-cta{
  text-align:center;
  padding:4.5rem 1rem 3rem;
  max-width:640px;
  margin:3rem auto 0;
}
.products-preview .bmb-products-final-cta .bmb-eyebrow{
  justify-content:center;
  margin-bottom:1.25rem;
  font-size:clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight:700;
  letter-spacing:.22em;
  gap:0;
  color:var(--navy);
}
/* Hide the leading mini-rule on the big section-head eyebrow so the
   text centres properly. Matches the homepage's treatment — see
   `.home-preview .bmb-section-head .bmb-eyebrow::before {display:none}`
   in home.css. The rule belongs only on the small inline eyebrow at
   the top of the hero, where it reads as editorial punctuation. */
.products-preview .bmb-products-final-cta .bmb-eyebrow::before{
  display:none;
}
.products-preview .bmb-products-final-cta h2{
  font-family:var(--sans);
  font-size:clamp(1rem, 1.3vw, 1.22rem);
  font-weight:400;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 1rem;
  letter-spacing:0;
}
.products-preview .bmb-products-final-cta p{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 auto 1.8rem;
  max-width:52ch;
}
.products-preview .bmb-products-ctas{
  display:flex;
  gap:.7rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* ─── CTAs — EXACT match to home.css .home-preview .bmb-cta
   Cormorant Garamond serif, .7rem 1.5rem padding, gap .5rem. */
.products-preview .bmb-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family: var(--sans);
  font-size:1.05rem;font-weight:500;
  letter-spacing:.005em;padding:.7rem 1.5rem;border-radius:999px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.products-preview .bmb-cta--primary{
  background:var(--brand);color:#fff;box-shadow:var(--shadow-sm);
}
.products-preview .bmb-cta--primary:hover{
  background:var(--brand-dk);transform:translateY(-1px);box-shadow:var(--shadow);
}
.products-preview .bmb-cta--ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line-rose);
}
.products-preview .bmb-cta--ghost:hover{
  border-color:var(--brand);color:var(--brand-dk);
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width:720px){
  .products-preview{
    padding:1.4rem 1rem 3rem;
  }
  .products-preview .bmb-products-hero{
    padding:2.4rem .5rem 1.8rem;
  }
  .products-preview .bmb-product-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .products-preview .bmb-products-final-cta{
    padding:3rem .5rem 2rem;
  }
}