/* ═════════════════════════════════════════════════════════════════
   WP-body article pages — /product/* detail pages + /shop-beauty/.

   Scoped via `.bmb-article-preview` class on <article class="wp-content"
   bmb-article-preview"> (see ARTICLE_PAGES set + render_page in
   _src/build.py). Loads only on slugs listed in PAGE_CSS_MAP.

   These pages render WP-imported content (markup we don't control) so
   selectors target semantic elements inside the article rather than
   bespoke class hooks. Tokens inherited from style.css :root.
   ═════════════════════════════════════════════════════════════════ */

/* Page-wide tonal wash — EXACT 10-stop gradient from home.css */
html,body{overflow-x:clip;max-width:100vw}
body:has(.bmb-article-preview){
  background:linear-gradient(
    180deg,
    #fbf4f5   0%,
    #fdfaf8  10%,
    #fdf8f1  22%,
    #fbf9f4  36%,
    #faf5f3  52%,
    #fbf6f2  65%,
    #fbf7f2  78%,
    #faf8f3  88%,
    #fbf6ed  95%,
    #fbf4f5 100%
  );
}

/* Article wrapper — generous reading max-width, centred */
.bmb-article-preview{
  font-family:var(--sans);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  max-width:780px;
  margin:0 auto;
  padding:3rem 1.5rem 2rem;
  background:transparent;
}

/* ─── Typography ──────────────────────────────────────────────── */
/* H1 — Cormorant Garamond display title.
   WP-imported bodies sometimes have multiple H1s (one canonical page
   title + extra ones used as marketing-callout headings). Only the
   FIRST h1 gets the full display treatment; subsequent h1s render at
   H2 scale so the page isn't dominated by competing focal points. */
.bmb-article-preview 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.6rem;
  text-align:center;
}
/* Second and later H1s — treat like H2 (drop scale + alignment). */
.bmb-article-preview h1 ~ h1{
  font-size:clamp(1.55rem, 3vw, 2rem);
  line-height:1.2;
  letter-spacing:-.005em;
  margin:2.6rem 0 1rem;
  text-align:left;
}

/* H2 — Cormorant Garamond, smaller than H1, used for major sections */
.bmb-article-preview h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.55rem, 3vw, 2rem);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:2.6rem 0 1rem;
}

/* H3 — sub-sections inside H2 blocks */
.bmb-article-preview h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.2rem, 2.2vw, 1.45rem);
  line-height:1.25;
  letter-spacing:-.003em;
  color:var(--ink);
  margin:1.8rem 0 .6rem;
}

/* H4 — minor headings */
.bmb-article-preview h4{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:1.4rem 0 .4rem;
}

/* Paragraphs */
.bmb-article-preview p{
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 1.1rem;
}

/* Links inside body — soft brand-coloured underline */
.bmb-article-preview p a,
.bmb-article-preview li a{
  color:var(--brand-dk);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:color .15s ease;
}
.bmb-article-preview p a:hover,
.bmb-article-preview li a:hover{
  color:var(--brand);
}

/* Lists */
.bmb-article-preview ul,
.bmb-article-preview ol{
  margin:0 0 1.4rem;
  padding-left:1.4rem;
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.7;
  color:var(--ink-2);
}
.bmb-article-preview li{margin:.4rem 0}
.bmb-article-preview ul{list-style:disc}
.bmb-article-preview ol{list-style:decimal}

/* Blockquotes */
.bmb-article-preview blockquote{
  margin:1.8rem 0;
  padding:1.2rem 1.5rem;
  border-left:3px solid var(--brand-200);
  background:rgba(248, 235, 232, 0.35);
  border-radius:0 var(--r) var(--r) 0;
  font-family:var(--serif);
  font-size:1.18rem;
  font-style:italic;
  line-height:1.55;
  color:var(--ink);
}
.bmb-article-preview blockquote p{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  margin:0;
}

/* Images — keep the WP-declared dimensions; only cap when wider than
   the article column. Do NOT force display:block / margin:auto on
   every <img> — that turns embedded icons + logos into massive
   centered feature blocks. Only <figure>-wrapped images get the
   feature-photo chrome. */
.bmb-article-preview img{
  max-width:100%;
  height:auto;
  vertical-align:middle;
}
/* Feature image — wrapped in <figure>. Gets the rounded corners,
   shadow, and breathing room. WP wraps inline content in <figure> only
   when the editor chose "feature image" / aligncenter — exactly when we
   want the hero treatment. */
.bmb-article-preview figure{
  margin:2rem 0;
  text-align:center;
}
.bmb-article-preview figure > img,
.bmb-article-preview figure > a > img{
  display:block;
  margin:0 auto;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.bmb-article-preview figcaption{
  margin-top:.6rem;
  font-family:var(--sans);
  font-size:.86rem;
  color:var(--muted);
  font-style:italic;
}
/* Respect WP alignment classes */
.bmb-article-preview .alignleft,
.bmb-article-preview img.alignleft{float:left;margin:.3rem 1.2rem .6rem 0}
.bmb-article-preview .alignright,
.bmb-article-preview img.alignright{float:right;margin:.3rem 0 .6rem 1.2rem}
.bmb-article-preview .aligncenter,
.bmb-article-preview img.aligncenter{display:block;margin:1.4rem auto;text-align:center}
.bmb-article-preview .alignnone,
.bmb-article-preview img.alignnone{margin:.6rem 0}

/* Strong / emphasis — keep readable */
.bmb-article-preview strong,
.bmb-article-preview b{font-weight:600;color:var(--ink)}
.bmb-article-preview em,
.bmb-article-preview i{font-style:italic}

/* HR — soft brand divider */
.bmb-article-preview hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--brand-200), transparent);
  margin:2.4rem auto;
  max-width:240px;
}

/* Tables (if any) */
.bmb-article-preview table{
  width:100%;
  border-collapse:collapse;
  margin:1.8rem 0;
  font-family:var(--sans);
  font-size:.95rem;
}
.bmb-article-preview th,
.bmb-article-preview td{
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.bmb-article-preview th{
  font-weight:600;
  color:var(--ink);
  background:rgba(248, 235, 232, 0.4);
}
.bmb-article-preview td{color:var(--ink-2)}

/* ═════════════════════════════════════════════════════════════════
   /product/sweet-bundles/ — bundle/benefit sections for the
   MANUAL_BODIES restructure. Only used when slug is in MANUAL_BODIES
   and renders the new structured layout.
   ═════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────── */
.bmb-article-preview .bmb-bundles-hero{
  text-align:center;
  max-width:680px;
  margin:0 auto 2.4rem;
}
.bmb-article-preview .bmb-bundles-hero h1{
  margin:0 0 1rem;
  text-align:center;
}
.bmb-article-preview .bmb-bundles-lead{
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}

/* ── Shared section head pattern (matches homepage) ───────────── */
/* These two sections break out of the 780px article column so the
   card grids have room to breathe. Article body text stays at 780px
   (good for prose reading), but the bundle + benefits grids span
   wider via the position:relative + left:50% + translateX(-50%) trick. */
.bmb-article-preview .bmb-bundles-packages,
.bmb-article-preview .bmb-bundles-benefits{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1080px, calc(100vw - 3rem));
  margin:3rem 0;
}
.bmb-article-preview .bmb-section-head{
  text-align:center;
  margin-bottom:1.8rem;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}
.bmb-article-preview .bmb-section-head .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  display:inline-block;
  margin:0 0 .6rem;
}
.bmb-article-preview .bmb-section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0;
  text-align:center;
}

/* ── Package card grid (2 cards side by side by default) ─────── */
.bmb-article-preview .bmb-bundles-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 340px));
  justify-content:center;
  gap:1.4rem;
}
/* 3-up variant for promos that offer 3 choices (e.g. /product/
   happy-hour-massage-promotion/). Same card style, wider grid. */
.bmb-article-preview .bmb-bundles-grid.bmb-bundles-grid--3up{
  grid-template-columns:repeat(3, minmax(0, 320px));
}
.bmb-article-preview .bmb-bundle-card{
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  padding:1.8rem 1.6rem 1.6rem;
  box-shadow:var(--shadow-sm);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.bmb-article-preview .bmb-bundle-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-bundle-eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:0;
}
.bmb-article-preview .bmb-bundle-price{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem, 5vw, 3rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:.2rem 0 .4rem;
}
.bmb-article-preview .bmb-bundle-price .bmb-bundle-currency{
  font-size:.55em;
  color:var(--muted);
  vertical-align:.4em;
  margin-right:.05em;
}
.bmb-article-preview .bmb-bundle-subtitle{
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink-2);
  line-height:1.5;
  margin:0 0 .8rem;
}
.bmb-article-preview .bmb-bundle-included{
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:.8rem 0 .4rem;
}
/* "Best for" / "What you'll get" list — editorial centred treatment.
   Drops the utilitarian divider lines for a soft brand-dot accent
   between items; duration tags swap to serif italic so "(60 min)"
   reads as a quiet flourish instead of a parenthetical. */
.bmb-article-preview .bmb-bundle-list{
  list-style:none;
  padding:0;
  margin:0 0 1.6rem;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-2);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.bmb-article-preview .bmb-bundle-list li{
  padding:0;
  border:none;
  position:relative;
}
.bmb-article-preview .bmb-bundle-list li + li::before{
  content:"";
  display:block;
  width:4px;
  height:4px;
  background:var(--brand);
  border-radius:50%;
  margin:0 auto .8rem;
  opacity:.55;
}
.bmb-article-preview .bmb-bundle-duration{
  display:inline-block;
  margin-left:.2em;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.92em;
  color:var(--brand-dk);
  letter-spacing:.005em;
}
/* Spec-sheet variant of the "Best for" bullet list — used on voucher
   cards where the items are factual product attributes (Format /
   Delivery / Ideal for) rather than time-based duration tags.
   Editorial treatment: italic serif labels in brand-dk + clean sans
   values, with a subtle brand-color dot between rows (matches the
   .bmb-bundle-list rhythm so the whole card system feels cohesive). */
.bmb-article-preview .bmb-bundle-specs{
  margin:1.2rem 0 1.6rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  text-align:center;
}
.bmb-article-preview .bmb-bundle-spec-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
}
.bmb-article-preview .bmb-bundle-spec-row + .bmb-bundle-spec-row::before{
  content:"";
  display:block;
  width:4px;
  height:4px;
  background:var(--brand);
  border-radius:50%;
  margin:0 auto .8rem;
  opacity:.55;
}
.bmb-article-preview .bmb-bundle-specs dt{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.005em;
  color:var(--brand-dk);
  margin:0 0 .15rem;
}
.bmb-article-preview .bmb-bundle-specs dd{
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:500;
  line-height:1.45;
  color:var(--ink);
  margin:0;
  max-width:24ch;
}

.bmb-article-preview .bmb-bundle-card .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:auto auto 0;
  align-self:center;
  font-family: var(--sans);
  font-size:1rem;
  font-weight:500;
  padding:.7rem 1.6rem;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
  transition:transform .15s ease, background .15s, box-shadow .15s;
}
.bmb-article-preview .bmb-bundle-card .bmb-cta:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

/* ── Benefits grid (3 columns default) ──────────────────────── */
.bmb-article-preview .bmb-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.4rem;
}
/* 2-up variant for pages that pair two long lists side-by-side
   (e.g. /product/membership/ — Maternity & Baby + General Wellness). */
.bmb-article-preview .bmb-benefits-grid.bmb-benefits-grid--2up{
  grid-template-columns:repeat(2, minmax(0, 520px));
  justify-content:center;
}

/* ═════════════════════════════════════════════════════════════════
   /contact-us/ — editorial hero, quicklink chips, 2-up location cards.
   Each location card has photo, address, hours, CTA + embedded map.
   ═════════════════════════════════════════════════════════════════ */
.bmb-article-preview .bmb-contact-hero{
  text-align:center;
  max-width:920px;
  margin:0 auto 3rem;
}
.bmb-article-preview .bmb-contact-hero .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1rem;
}
.bmb-article-preview .bmb-contact-hero .bmb-eyebrow::before,
.bmb-article-preview .bmb-contact-hero .bmb-eyebrow::after{
  content:"";
  width:24px;
  height:1px;
  background:var(--brand);
  display:inline-block;
}
.bmb-article-preview .bmb-contact-hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.bmb-article-preview .bmb-contact-lead{
  font-family:var(--sans);
  font-size:1.08rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:60ch;
  margin:0 auto 2rem;
}
.bmb-article-preview .bmb-contact-lead a{
  color:var(--brand-dk);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--brand-100);
  transition:border-color .15s, color .15s;
}
.bmb-article-preview .bmb-contact-lead a:hover{
  color:var(--brand);
  border-bottom-color:var(--brand);
}
.bmb-article-preview .bmb-contact-quicklinks{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:stretch;
  gap:1rem;
  margin-top:1.6rem;
}
.bmb-article-preview .bmb-contact-chip{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem 1.2rem;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.bmb-article-preview .bmb-contact-chip:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-contact-chip-label{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin-bottom:.4rem;
}
.bmb-article-preview .bmb-contact-chip-value{
  /* Sans-serif for legibility — Cormorant's digit shapes are too
     stylised for phone numbers / emails. Tabular numerals keep
     digits in even columns. */
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  line-height:1.25;
  font-weight:500;
  letter-spacing:.01em;
  font-feature-settings:"tnum" 1, "lnum" 1;
  font-variant-numeric:tabular-nums lining-nums;
  /* Email is long — allow it to wrap or break gracefully inside
     the equal-width chip column. */
  word-break:break-word;
  overflow-wrap:anywhere;
}
@media (max-width:680px){
  /* At narrow widths the three chips can't fit in one row without
     squashing the long email. Stack them so each gets full width. */
  .bmb-article-preview .bmb-contact-quicklinks{
    flex-direction:column;
    align-items:stretch;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ── Location cards (2-up) ─────────────────────────────────────── */
.bmb-article-preview .bmb-contact-locations{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px, calc(100vw - 3rem));
  margin:3rem 0;
}
/* Parent grid has 3 explicit rows (img / body / map) so each child
   card can use subgrid and pin its internal sections to the same
   horizontal track across the row. End result: the "Book at …"
   button + the map iframe start at the same Y position on both
   cards regardless of how many hours rows each card has. */
.bmb-article-preview .bmb-locations-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 520px));
  grid-template-rows:auto 1fr auto;
  align-items:stretch;
  justify-content:center;
  gap:2rem;
  margin:0 auto;
}
.bmb-article-preview .bmb-location-card{
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:1 / span 3;
  box-shadow:var(--shadow-sm);
}
.bmb-article-preview .bmb-location-img{
  display:block;
  aspect-ratio:16 / 11;
  overflow:hidden;
}
.bmb-article-preview .bmb-location-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.bmb-article-preview .bmb-location-card:hover .bmb-location-img img{
  transform:scale(1.03);
}
.bmb-article-preview .bmb-location-body{
  padding:1.6rem 1.8rem 1.4rem;
  /* Stretch to fill the subgrid row; push the CTA group to the
     bottom so both cards' Book buttons align horizontally. */
  display:flex;
  flex-direction:column;
}
.bmb-article-preview .bmb-location-body .bmb-location-ctas{
  margin-top:auto;
}
.bmb-article-preview .bmb-location-eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:0 0 .4rem;
}
.bmb-article-preview .bmb-location-name{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.55rem;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 1rem;
}
.bmb-article-preview .bmb-location-address{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 1.2rem;
}
.bmb-article-preview .bmb-location-hours{
  margin:0 0 1.4rem;
  padding:1rem 0;
  border-top:1px solid var(--brand-100);
  border-bottom:1px solid var(--brand-100);
}
.bmb-article-preview .bmb-location-hours-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.3rem 0;
}
.bmb-article-preview .bmb-location-hours dt{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
}
.bmb-article-preview .bmb-location-hours dd{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--brand-dk);
  margin:0;
}
.bmb-article-preview .bmb-location-ctas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
}
.bmb-article-preview .bmb-location-card .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--sans);
  font-size:1rem;
  font-weight:500;
  padding:.7rem 1.4rem;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.bmb-article-preview .bmb-location-card .bmb-cta:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-location-link{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--brand-dk);
  text-decoration:none;
}
.bmb-article-preview .bmb-location-link:hover{
  text-decoration:underline;
}
.bmb-article-preview .bmb-location-map{
  border-top:1px solid var(--brand-100);
}
.bmb-article-preview .bmb-location-map iframe{
  display:block;
  width:100%;
  height:300px;
  border:0;
}

/* Enquiry form — sits BELOW the location cards. */
.bmb-article-preview .enquiry-form{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(720px, calc(100vw - 3rem));
  margin:3rem auto;
  padding:2rem;
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.bmb-article-preview .enquiry-form h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.8rem;
  margin:0 0 .6rem;
  text-align:center;
}
.bmb-article-preview .enquiry-form > p{
  text-align:center;
  color:var(--muted);
  margin:0 0 1.6rem;
}
.bmb-article-preview .enquiry-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.bmb-article-preview .enquiry-form label{
  display:block;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:.9rem;
}
.bmb-article-preview .enquiry-form input[type="text"],
.bmb-article-preview .enquiry-form input[type="tel"],
.bmb-article-preview .enquiry-form input[type="email"],
.bmb-article-preview .enquiry-form select,
.bmb-article-preview .enquiry-form textarea{
  width:100%;
  margin-top:.3rem;
  padding:.65rem .9rem;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--brand-100);
  border-radius:.5rem;
  transition:border-color .15s, box-shadow .15s;
}
.bmb-article-preview .enquiry-form input:focus,
.bmb-article-preview .enquiry-form select:focus,
.bmb-article-preview .enquiry-form textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(186,143,149,0.2);
}
.bmb-article-preview .enquiry-form .form-consent{
  font-size:.88rem;
  color:var(--muted);
  font-weight:400;
}
.bmb-article-preview .enquiry-form .form-consent input{
  width:auto;
  margin-right:.4rem;
}
.bmb-article-preview .enquiry-form button[type=submit]{
  display:block;
  width:100%;
  padding:.95rem 1.6rem;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:500;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s;
}
.bmb-article-preview .enquiry-form button[type=submit]:hover{
  background:var(--brand-dk);
}
.bmb-article-preview .enquiry-form .form-status{
  margin:1rem 0 0;
  text-align:center;
  color:var(--muted);
  font-style:italic;
}

@media (max-width:840px){
  .bmb-article-preview .bmb-locations-grid{
    grid-template-columns:1fr;
    max-width:520px;
  }
}
@media (max-width:600px){
  .bmb-article-preview .enquiry-form .form-row{
    grid-template-columns:1fr;
  }
}

/* ═════════════════════════════════════════════════════════════════
   /contact-us/ — homepage editorial style.
   Photo-background hero with serif display + italic em accent +
   locked H1 as smaller italic tagline. Quick-contact band, 2-up
   location cards with subgrid map alignment, and styled enquiry
   form below. Scoped via .contact-preview wrapper.
   ═════════════════════════════════════════════════════════════════ */

/* Page-wide tonal gradient (matches the rest of the article system) */
body:has(.contact-preview){
  background:linear-gradient(
    180deg,
    #fbf4f5   0%,
    #fdfaf8  10%,
    #fdf8f1  22%,
    #fbf9f4  36%,
    #faf5f3  52%,
    #fbf6f2  65%,
    #fbf7f2  78%,
    #faf8f3  88%,
    #fbf6ed  95%,
    #fbf4f5 100%
  );
}
body:has(.contact-preview) main{
  padding-top:0;
}
body:has(.contact-preview) .bmb-article-preview{
  padding-top:0;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.contact-preview .contact-hero{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  margin:0 0 3rem;
  padding:5rem 1.5rem 4.5rem;
  background:
    linear-gradient(180deg, rgba(251,244,245,0.78), rgba(253,250,248,0.62) 50%, rgba(251,244,245,0.78)),
    url('/img/hero-bg-2.webp') center/cover no-repeat;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height:min(72vh, 720px);
}
.contact-preview .contact-hero-inner{
  max-width:780px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}
.contact-preview .contact-hero-eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.85rem;
}
.contact-preview .contact-hero-eyebrow::before,
.contact-preview .contact-hero-eyebrow::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--brand);
}
.contact-preview .contact-hero-display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.2rem, 4.6vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}
.contact-preview .contact-hero-display em{
  font-style:italic;
  color:var(--brand);
  font-weight:400;
}
.contact-preview .contact-hero-h1{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:1.25rem;
  line-height:1.4;
  color:var(--ink-2);
  margin:.4rem 0 0;
  letter-spacing:0;
}
.contact-preview .contact-hero-lead{
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:58ch;
  margin:0;
}

/* ── Quick contact band (3 icon cards) ─────────────────────────── */
.contact-preview .contact-quick{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1080px, calc(100vw - 3rem));
  margin:2rem auto 3.5rem;
}
.contact-preview .contact-quick-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.4rem;
}
.contact-preview .contact-quick-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
  padding:2rem 1.6rem;
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.contact-preview .contact-quick-card:hover{
  border-color:var(--brand);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.contact-preview .contact-quick-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--brand-50);
  color:var(--brand-dk);
  margin-bottom:.5rem;
}
.contact-preview .contact-quick-icon svg{
  width:24px;
  height:24px;
}
.contact-preview .contact-quick-label{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:.3rem 0 0;
}
.contact-preview .contact-quick-value{
  font-family:var(--sans);
  font-size:1.08rem;
  font-weight:500;
  color:var(--ink);
  margin:.2rem 0;
  letter-spacing:.005em;
  font-variant-numeric:tabular-nums lining-nums;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.contact-preview .contact-quick-meta{
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  color:var(--muted);
  margin:.2rem 0 0;
}

/* ── Locations (2-up with subgrid map alignment) ───────────────── */
.contact-preview .contact-locations{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px, calc(100vw - 3rem));
  margin:3rem auto;
}
.contact-preview .contact-locations .bmb-section-head{
  text-align:center;
  margin-bottom:2rem;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}
.contact-preview .contact-locations .bmb-section-head .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  display:inline-block;
  margin:0 0 .6rem;
}
.contact-preview .contact-locations .bmb-section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.8rem, 3.2vw, 2.4rem);
  line-height:1.15;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0 0 .8rem;
}
.contact-preview .contact-locations-lead{
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}
.contact-preview .contact-locations-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 520px));
  align-items:stretch;
  justify-content:center;
  gap:2rem;
  margin:0 auto;
}
/* Flex-column layout per card. Subgrid wasn't an option because the
   card has 6 children and the parent only has 3 row tracks — the
   children collapsed into overlapping cells. */
.contact-preview .contact-location{
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.contact-preview .contact-location > h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.55rem;
  line-height:1.2;
  color:var(--ink);
  margin:0;
  padding:1.6rem 1.8rem 0;
}
.contact-preview .contact-location-tag{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:.4rem 0 0;
  padding:0 1.8rem;
}
.contact-preview .contact-location address{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-2);
  font-style:normal;
  margin:1rem 0 0;
  padding:0 1.8rem;
}
.contact-preview .contact-location-meta{
  margin:1.2rem 0 0;
  padding:1rem 1.8rem 0;
  border-top:1px solid var(--brand-100);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.6rem 1rem;
}
.contact-preview .contact-location-meta dt{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-dk);
  align-self:start;
  padding-top:.15rem;
}
.contact-preview .contact-location-meta dd{
  font-family:var(--sans);
  font-size:.96rem;
  color:var(--ink);
  margin:0;
  line-height:1.5;
}
.contact-preview .contact-location-meta dd a{
  color:var(--brand-dk);
  text-decoration:none;
  border-bottom:1px solid var(--brand-100);
  transition:border-color .15s;
}
.contact-preview .contact-location-meta dd a:hover{
  border-color:var(--brand);
}
.contact-preview .contact-location-map{
  margin:1.4rem 0 0;
  border-top:1px solid var(--brand-100);
  line-height:0;
}
.contact-preview .contact-location-map iframe{
  display:block;
  width:100%;
  height:280px;
  border:0;
}
.contact-preview .contact-location .bmb-cta{
  margin:1.2rem 1.8rem 1.6rem;
  align-self:flex-start;
  font-family: var(--sans);
  font-style:italic;
  font-size:1rem;
  color:var(--brand-dk);
  text-decoration:none;
  background:transparent;
  border:none;
  padding:0;
}
.contact-preview .contact-location .bmb-cta:hover{
  text-decoration:underline;
}

/* ── Enquiry form ──────────────────────────────────────────────── */
.contact-preview .contact-form-section{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 3rem));
  margin:3rem auto;
  padding:2.4rem 2.2rem;
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.contact-preview .contact-form-section .bmb-section-head{
  text-align:center;
  margin-bottom:1.6rem;
}
.contact-preview .contact-form-section .bmb-section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.8rem;
  line-height:1.2;
  margin:.4rem 0 .6rem;
  color:var(--ink);
}
.contact-preview .contact-form-section .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  display:inline-block;
  margin:0 0 .4rem;
}
.contact-preview .contact-form-lead{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}
.contact-preview .contact-form-lead a{
  color:var(--brand-dk);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--brand-100);
}
.contact-preview .contact-form-lead a:hover{
  border-color:var(--brand);
}
.contact-preview .contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.contact-preview .contact-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.contact-preview .contact-form-field{
  display:flex;
  flex-direction:column;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink);
}
.contact-preview .contact-form-field > span{
  font-weight:500;
  margin-bottom:.3rem;
}
.contact-preview .contact-form input[type="text"],
.contact-preview .contact-form input[type="tel"],
.contact-preview .contact-form input[type="email"],
.contact-preview .contact-form select,
.contact-preview .contact-form textarea{
  padding:.7rem .95rem;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--brand-100);
  border-radius:.5rem;
  transition:border-color .15s, box-shadow .15s;
}
.contact-preview .contact-form input:focus,
.contact-preview .contact-form select:focus,
.contact-preview .contact-form textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(186,143,149,0.18);
}
.contact-preview .contact-form-consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--muted);
  margin-top:.5rem;
}
.contact-preview .contact-form-consent input{
  margin-top:.25rem;
}
.contact-preview .contact-form-consent a{
  color:var(--brand-dk);
}
.contact-preview .contact-form-submit{
  display:block;
  width:100%;
  margin-top:.6rem;
  padding:1rem 1.6rem;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:500;
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.contact-preview .contact-form-submit:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
}
.contact-preview .contact-form-status{
  margin:1rem 0 0;
  text-align:center;
  color:var(--muted);
  font-family:var(--serif);
  font-style:italic;
}

/* ── Final "Not sure where to start?" CTA section ──────────────── */
.contact-preview .contact-cta{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(720px, calc(100vw - 3rem));
  margin:3rem auto;
  padding:2.6rem 2.2rem;
  background:linear-gradient(135deg, var(--brand-50), var(--surface) 70%);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.contact-preview .contact-cta-inner{
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}
.contact-preview .contact-cta .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:0;
}
.contact-preview .contact-cta h2{
  font-family: var(--sans);
  font-weight:500;
  font-size:clamp(1.8rem, 3vw, 2.2rem);
  line-height:1.15;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0;
}
.contact-preview .contact-cta > .contact-cta-inner > p{
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}
.contact-preview .contact-cta-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:.6rem;
}
.contact-preview .contact-cta-actions .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--sans);
  font-size:1.05rem;
  font-weight:500;
  padding:.85rem 1.8rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .15s, background .15s, box-shadow .15s, border-color .15s;
}
.contact-preview .contact-cta-actions .bmb-cta--primary{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
}
.contact-preview .contact-cta-actions .bmb-cta--primary:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.contact-preview .contact-cta-actions .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--brand-100);
}
.contact-preview .contact-cta-actions .bmb-cta--ghost:hover{
  border-color:var(--brand);
  background:var(--surface);
}

@media (max-width:880px){
  .contact-preview .contact-quick-grid{
    grid-template-columns:1fr;
    max-width:380px;
    margin:0 auto;
  }
  .contact-preview .contact-locations-grid{
    grid-template-columns:1fr;
    max-width:520px;
  }
}
@media (max-width:600px){
  .contact-preview .contact-form-row{
    grid-template-columns:1fr;
  }
  .contact-preview .contact-hero{
    padding:3.5rem 1rem 3rem;
    min-height:min(80vh, 600px);
  }
}

/* ═════════════════════════════════════════════════════════════════
   /shop-beauty/ hero — mirrors the homepage editorial style.
   Photo background, centered serif title with italic em accents,
   dual CTAs, microcopy below. Sits at full viewport width with
   cream scrim for legibility, matching .bmb-hero on home.css.
   ═════════════════════════════════════════════════════════════════ */
/* When the shop hero is on the page, kill <main>'s 2rem top padding
   AND the article wrapper's 3rem top padding so the hero butts up
   against the header bar with no cream gap. */
body:has(.bmb-shop-hero) main{
  padding-top:0;
}
body:has(.bmb-shop-hero) .bmb-article-preview{
  padding-top:0;
}
.bmb-article-preview .bmb-shop-hero{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  margin:0 0 3rem;
  padding:6rem 1.5rem 5rem;
  background:var(--bg);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
/* Soft rose ambient blob top-left + soft gold blob bottom-right
   (matches the editorial hero pattern from about.css / portfolio.css). */
.bmb-article-preview .bmb-shop-hero::before{
  content:"";
  position:absolute;
  top:-25%;
  left:-10%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(170, 127, 134, 0.30) 0%, rgba(170, 127, 134, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:shopAmbientA 24s ease-in-out infinite;
}
.bmb-article-preview .bmb-shop-hero::after{
  content:"";
  position:absolute;
  bottom:-30%;
  right:-15%;
  width:55%;
  height:120%;
  background:radial-gradient(circle, rgba(179, 149, 85, 0.28) 0%, rgba(179, 149, 85, 0) 65%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  animation:shopAmbientB 28s ease-in-out infinite;
}
@keyframes shopAmbientA{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(40px,20px) scale(1.05)}
}
@keyframes shopAmbientB{
  0%, 100% {transform:translate(0,0) scale(1)}
  50%      {transform:translate(-40px,-30px) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .bmb-article-preview .bmb-shop-hero::before,
  .bmb-article-preview .bmb-shop-hero::after{animation:none}
}
.bmb-article-preview .bmb-shop-hero-core{
  position:relative;
  z-index:1;
  max-width:780px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}
.bmb-article-preview .bmb-shop-hero .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.bmb-article-preview .bmb-shop-hero .bmb-eyebrow::before,
.bmb-article-preview .bmb-shop-hero .bmb-eyebrow::after{
  content:"";
  width:38px;
  height:1px;
  background:var(--gold);
}
.bmb-article-preview .bmb-shop-hero-display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}
.bmb-article-preview .bmb-shop-hero-display em{
  font-style:italic;
  color:var(--brand);
  font-weight:400;
}
.bmb-article-preview .bmb-shop-hero-h1{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.15rem, 1.6vw, 1.4rem);
  line-height:1.4;
  color:var(--ink-2);
  max-width:62ch;
  margin:.4rem 0 0;
  letter-spacing:0;
}
.bmb-article-preview .bmb-shop-hero-sub{
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:58ch;
  margin:0;
}
.bmb-article-preview .bmb-shop-hero-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:.6rem;
}
.bmb-article-preview .bmb-shop-hero-ctas .bmb-cta{
  font-family: var(--sans);
  font-size:1.05rem;
  font-weight:500;
  padding:.95rem 2rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .15s, background .15s, box-shadow .15s, border-color .15s;
}
.bmb-article-preview .bmb-shop-hero-ctas .bmb-cta--primary{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
}
.bmb-article-preview .bmb-shop-hero-ctas .bmb-cta--primary:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-shop-hero-ctas .bmb-cta--ghost{
  background:rgba(255,255,255,0.55);
  color:var(--ink);
  border:1px solid var(--brand-100);
  backdrop-filter:blur(2px);
}
.bmb-article-preview .bmb-shop-hero-ctas .bmb-cta--ghost:hover{
  border-color:var(--brand);
  background:rgba(255,255,255,0.78);
}
.bmb-article-preview .bmb-shop-hero-microcopy{
  font-family:var(--serif);
  font-style:italic;
  font-size:.98rem;
  color:var(--muted);
  margin:.4rem 0 0;
  letter-spacing:.01em;
}

@media (max-width:680px){
  .bmb-article-preview .bmb-shop-hero{
    padding:3.5rem 1rem 3rem;
    min-height:min(80vh, 640px);
  }
  .bmb-article-preview .bmb-shop-hero-core{
    gap:1rem;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Shop showcase grid — used on /shop-beauty/ for the curated
   featured-products section. Image-dominant card with title +
   was-/now-price + view-details link. Sits inside the article wrap.
   ═════════════════════════════════════════════════════════════════ */
.bmb-article-preview .bmb-shop-showcase{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px, calc(100vw - 3rem));
  margin:3rem 0;
}
/* Container for the carousel — no edge fades, the page background
   already shows the scroll edges naturally. */
.bmb-article-preview .bmb-shop-grid-wrap{
  position:relative;
}
/* Horizontal scroll-snap carousel — swipe/drag left & right. Each
   card is fixed-width and snaps cleanly to the start. Custom thin
   scrollbar styled in brand tones so users without trackpads can
   drag the thumb to browse. */
.bmb-article-preview .bmb-shop-grid{
  display:flex;
  gap:1.6rem;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding:1.5rem;
  padding:.5rem 1.5rem 1rem;
  margin:0 -1.5rem;
  /* Firefox */
  scrollbar-width:thin;
  scrollbar-color:var(--brand) var(--brand-100);
}
/* WebKit (Chrome / Safari) thin styled scrollbar */
.bmb-article-preview .bmb-shop-grid::-webkit-scrollbar{
  height:8px;
}
.bmb-article-preview .bmb-shop-grid::-webkit-scrollbar-track{
  background:var(--brand-100);
  border-radius:999px;
  margin:0 1.5rem;
}
.bmb-article-preview .bmb-shop-grid::-webkit-scrollbar-thumb{
  background:var(--brand);
  border-radius:999px;
  transition:background .15s;
}
.bmb-article-preview .bmb-shop-grid::-webkit-scrollbar-thumb:hover{
  background:var(--brand-dk);
}
.bmb-article-preview .bmb-shop-card{
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
  /* Carousel sizing: fixed-width snap targets */
  flex:0 0 320px;
  scroll-snap-align:start;
}
.bmb-article-preview .bmb-shop-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-shop-card-img{
  display:block;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--brand-50);
  position:relative;
}
.bmb-article-preview .bmb-shop-card-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.bmb-article-preview .bmb-shop-card:hover .bmb-shop-card-img img{
  transform:scale(1.04);
}
/* Badge — top-left pill over the photo */
.bmb-article-preview .bmb-shop-card-badge{
  position:absolute;
  top:.8rem;
  left:.8rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .75rem;
  background:rgba(255,255,255,0.94);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  backdrop-filter:blur(4px);
  z-index:1;
}
.bmb-article-preview .bmb-shop-card-badge svg{
  width:13px;
  height:13px;
  fill:#e0a93e;
  flex-shrink:0;
}
.bmb-article-preview .bmb-shop-card-body{
  padding:1.2rem 1.4rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  flex:1;
  text-align:center;
}
.bmb-article-preview .bmb-shop-card-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.18rem;
  line-height:1.3;
  margin:0;
  min-height:calc(2 * 1.3 * 1.18rem);  /* reserve 2 lines so prices align */
  display:flex;
  align-items:center;
  justify-content:center;
}
.bmb-article-preview .bmb-shop-card-title a{
  color:var(--ink);
  text-decoration:none;
}
.bmb-article-preview .bmb-shop-card-title a:hover{
  color:var(--brand-dk);
}
.bmb-article-preview .bmb-shop-card-title em{
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
  font-weight:400;
  margin-left:.35em;
  font-size:.88em;
  display:inline;
}
.bmb-article-preview .bmb-shop-card-price{
  font-family:var(--serif);
  font-size:1.25rem;
  margin:0;
  line-height:1.2;
}
.bmb-article-preview .bmb-shop-card-was{
  color:var(--muted);
  text-decoration:line-through;
  font-size:.85em;
  margin-right:.55em;
  font-weight:400;
}
.bmb-article-preview .bmb-shop-card-now{
  color:var(--brand-dk);
  font-weight:500;
}
.bmb-article-preview .bmb-shop-card-period{
  color:var(--muted);
  font-style:italic;
  font-size:.78em;
  font-weight:400;
  margin-left:.25em;
}
/* Brand-rose pill CTA — full-width inside the card body. Matches
   the site's primary action colour (same as "Join membership" on
   the membership page) so the whole card system shares one CTA
   language. */
.bmb-article-preview .bmb-shop-card-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto 0 0;
  padding:.85rem 1.4rem;
  font-family: var(--sans);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.01em;
  color:#fff;
  background:var(--brand);
  border-radius:999px;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:background .15s, transform .15s, box-shadow .15s;
}
.bmb-article-preview .bmb-shop-card-cta:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

@media (max-width:680px){
  /* Slightly narrower cards on phones so two peek into view */
  .bmb-article-preview .bmb-shop-card{
    flex:0 0 280px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Service-style hero — used on /product/membership/. 2-column with
   body left + image right. Dual eyebrow, large serif title with an
   italic accent word, lead paragraph, 3 spec chips, dual CTAs.
   Stacks below 880px.
   ═════════════════════════════════════════════════════════════════ */
.bmb-article-preview .bmb-service-hero{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1100px, calc(100vw - 3rem));
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:3rem;
  align-items:center;
  margin:2rem 0 4rem;
}
/* Product/service hero eyebrow — palette aligned with the T&C
   editorial theme (navy text + gold leading hairline) so all hero
   eyebrows on the site read as one family. Layout untouched. */
.bmb-article-preview .bmb-service-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 1rem;
}
.bmb-article-preview .bmb-service-eyebrow::before{
  content:"";
  width:36px;
  height:1px;
  background:var(--gold);
  display:inline-block;
}
.bmb-article-preview .bmb-service-eyebrow-kicker{
  color:var(--navy);
}
.bmb-article-preview .bmb-service-eyebrow-sep{
  color:var(--gold);
  opacity:.8;
  font-weight:400;
}
.bmb-article-preview .bmb-service-eyebrow-name{
  color:var(--navy);
}
.bmb-article-preview .bmb-service-hero-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem, 4.8vw, 3.8rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 1.4rem;
  text-align:left;
}
.bmb-article-preview .bmb-service-hero-title em{
  font-style:italic;
  color:var(--brand);
  font-weight:400;
}
.bmb-article-preview .bmb-service-hero-desc{
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.7;
  color:var(--ink-2);
  max-width:50ch;
  margin:0 0 2rem;
}
.bmb-article-preview .bmb-service-specs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.8rem;
  margin:0 0 2rem;
  padding:0;
}
.bmb-article-preview .bmb-service-spec{
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  padding:.9rem 1.05rem;
}
.bmb-article-preview .bmb-service-spec dt{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-dk);
  margin:0 0 .4rem;
}
.bmb-article-preview .bmb-service-spec dd{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  margin:0;
  line-height:1.35;
}
.bmb-article-preview .bmb-service-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.bmb-article-preview .bmb-service-ctas .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--sans);
  font-size:1.05rem;
  font-weight:500;
  padding:.85rem 1.8rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .15s, background .15s, box-shadow .15s, border-color .15s;
}
.bmb-article-preview .bmb-service-ctas .bmb-cta--primary{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
}
.bmb-article-preview .bmb-service-ctas .bmb-cta--primary:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-service-ctas .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--brand-100);
}
.bmb-article-preview .bmb-service-ctas .bmb-cta--ghost:hover{
  border-color:var(--brand);
  background:var(--surface);
}
.bmb-article-preview .bmb-service-cta-note{
  font-family: var(--sans);
  font-style:italic;
  font-size:1rem;
  color:var(--ink-2);
  margin:.9rem 0 0;
  text-align:center;
}
.bmb-article-preview .bmb-service-hero-img{
  position:relative;
  aspect-ratio:4 / 5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--brand-50);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-service-hero-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (max-width:880px){
  .bmb-article-preview .bmb-service-hero{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .bmb-article-preview .bmb-service-hero-img{
    aspect-ratio:5 / 3;
    max-width:520px;
    margin:0 auto;
  }
}
@media (max-width:560px){
  .bmb-article-preview .bmb-service-specs{
    grid-template-columns:1fr;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Membership privilege trio — scoped to /product/membership/ only.
   Replaces the 3-card grid pattern with a unified 3-column feature
   layout (no card backgrounds), one big shared "Join membership"
   CTA at the bottom. One section, one decision point.
   ═════════════════════════════════════════════════════════════════ */
.bmb-article-preview .bmb-membership-privileges{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1080px, calc(100vw - 3rem));
  margin:3rem 0;
}
.bmb-article-preview .bmb-feature-trio{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:2.4rem 2rem;
  margin:0 auto 2.4rem;
  max-width:980px;
}
.bmb-article-preview .bmb-feature{
  text-align:center;
  padding:0 .6rem;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* Subtle vertical divider between columns — only between, not on
   outer edges. */
.bmb-article-preview .bmb-feature + .bmb-feature::before{
  content:"";
  position:absolute;
  left:-1rem;
  top:1.4rem;
  bottom:1.4rem;
  width:1px;
  background:var(--brand-100);
}
.bmb-article-preview .bmb-feature-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  font-weight:400;
  color:var(--brand-dk);
  margin:0 0 .8rem;
  letter-spacing:.04em;
  opacity:.9;
}
.bmb-article-preview .bmb-feature-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.35rem;
  line-height:1.25;
  color:var(--ink);
  margin:0 0 .9rem;
}
.bmb-article-preview .bmb-feature-desc{
  font-family:var(--sans);
  font-size:1.02rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
  max-width:34ch;
}

/* Shared CTA below the trio — single decision point */
.bmb-article-preview .bmb-membership-cta{
  text-align:center;
  margin-top:1rem;
}
.bmb-article-preview .bmb-membership-cta .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--sans);
  font-size:1.1rem;
  font-weight:500;
  padding:.95rem 2.2rem;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
  transition:transform .15s ease, background .15s, box-shadow .15s;
}
.bmb-article-preview .bmb-membership-cta .bmb-cta:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-membership-cta-note{
  font-family: var(--sans);
  font-style:italic;
  font-size:1.02rem;
  color:var(--ink-2);
  margin:.9rem 0 0;
}

@media (max-width:960px){
  .bmb-article-preview .bmb-feature-trio{
    grid-template-columns:1fr;
    gap:2.4rem;
    max-width:480px;
  }
  .bmb-article-preview .bmb-feature + .bmb-feature::before{
    display:none;
  }
}

/* Editorial restaurant-menu variant for benefit columns that list
   treatments with times. Each row gets the name on the left and
   the duration on the right (italic serif brand-dk), with a thin
   dotted leader line between them — classy spa-menu feel. */
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-list{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  font-family:var(--sans);
}
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-list li{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--brand-100);
  font-size:.96rem;
  line-height:1.35;
  color:var(--ink);
}
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-list li:last-child{
  border-bottom:none;
}
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-list li::before{
  display:none !important;          /* drop the inherited brand-dot bullet */
}
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-name{
  flex:1;
  font-weight:500;
}
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-name em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--ink-2);
  margin-left:.4em;
  font-size:1rem;
}
.bmb-article-preview .bmb-benefit-col--menu .bmb-menu-time{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--brand-dk);
  font-size:1.05rem;
  letter-spacing:.005em;
  white-space:nowrap;
}
.bmb-article-preview .bmb-benefit-col{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:2rem 1.8rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.bmb-article-preview .bmb-benefit-col h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.4rem;
  line-height:1.25;
  margin:0 0 1rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--brand-100);
  color:var(--ink);
  text-align:center;
}
.bmb-article-preview .bmb-benefit-intro{
  font-family:var(--sans);
  font-size:.92rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 1rem;
}
.bmb-article-preview .bmb-benefit-col ul{
  list-style:none;
  padding:0;
  margin:0;
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
}
.bmb-article-preview .bmb-benefit-col ul li{
  padding:.55rem 0 .55rem 1.4rem;
  position:relative;
}
.bmb-article-preview .bmb-benefit-col ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.92rem;
  width:6px;
  height:6px;
  background:var(--brand);
  border-radius:50%;
}

/* ── Terms & conditions callout (for happy-hour-massage-promotion).
   Sits between the offer grid and the first-trials CTA. Matches the
   bundles-packages width breakout so it doesn't read as cramped. */
.bmb-article-preview .bmb-terms-callout{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(720px, calc(100vw - 3rem));
  margin:3rem auto;
  padding:2rem 2rem 1.6rem;
  background:var(--surface);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.bmb-article-preview .bmb-terms-callout .bmb-section-head{
  margin-bottom:1.2rem;
}
.bmb-article-preview .bmb-terms-list{
  list-style:none;
  padding:0;
  margin:0;
  font-family:var(--sans);
  font-size:.96rem;
  line-height:1.6;
  color:var(--ink-2);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.bmb-article-preview .bmb-terms-list li{
  padding:.55rem 0 .55rem 1.6rem;
  position:relative;
  border-bottom:1px solid var(--brand-100);
}
.bmb-article-preview .bmb-terms-list li:last-child{border-bottom:none}
.bmb-article-preview .bmb-terms-list li::before{
  content:"";
  position:absolute;
  left:.2rem;
  top:1rem;
  width:6px;
  height:6px;
  background:var(--brand);
  border-radius:50%;
}

/* Defensive: any stray inline SVG that survived a WP-body scrape
   (footer social icons, contact icons, etc.) renders at its native
   viewBox size — i.e. enormous. Cap them so they read as inline
   glyphs at most. Anything we genuinely want to size (FAQ accordion
   carets, first-trials icons) is wrapped in a known class with its
   own width:.. height:.. and beats this on specificity. */
.bmb-article-preview .wp-content > svg,
.bmb-article-preview .wp-content p > svg,
.bmb-article-preview .wp-content li > svg,
.bmb-article-preview .wp-content span > svg,
.bmb-article-preview .wp-content a > svg:not(:where(.bmb-faq svg, .bmb-first-trials-cta svg)){
  max-width:1.1em;
  max-height:1.1em;
  vertical-align:middle;
}

@media (max-width:1100px){
  .bmb-article-preview .bmb-benefits-grid.bmb-benefits-grid--2up{
    grid-template-columns:1fr;
    max-width:520px;
    margin:0 auto;
  }
}
@media (max-width:960px){
  .bmb-article-preview .bmb-bundles-grid.bmb-bundles-grid--3up{
    grid-template-columns:repeat(2, minmax(0, 340px));
  }
}
@media (max-width:720px){
  .bmb-article-preview .bmb-bundles-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .bmb-article-preview .bmb-bundles-grid.bmb-bundles-grid--3up{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .bmb-article-preview .bmb-benefits-grid{grid-template-columns:1fr;gap:1rem}
  .bmb-article-preview .bmb-terms-callout{padding:1.6rem 1.4rem 1.2rem}
}

/* ─── "First time with us?" CTA section — transformed from the WP
   bare-image WhatsApp promo by transform_first_trials_cta() in
   build.py. Replaces an image-only clickable banner with a proper
   two-column layout: image on the left as visual, real headline +
   body copy on the right, primary Book Now + secondary WhatsApp
   buttons as the actual CTAs. Stacks at narrow widths. */
.bmb-article-preview .bmb-first-trials-cta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.8rem;
  align-items:center;
  margin:3rem auto 2rem;
  padding:1.8rem;
  max-width:720px;
  background:linear-gradient(135deg, var(--brand-50), #fff 70%);
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.bmb-article-preview .bmb-first-trials-cta-visual{
  flex-shrink:0;
}
.bmb-article-preview .bmb-first-trials-cta-visual img{
  display:block;
  width:180px;
  height:180px;
  object-fit:cover;
  border-radius:var(--r-lg);
  margin:0;
  box-shadow:none;
}
.bmb-article-preview .bmb-first-trials-cta-body{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.bmb-article-preview .bmb-first-trials-cta-body .bmb-eyebrow{
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 .2rem;
}
.bmb-article-preview .bmb-first-trials-cta-body h3{
  font-family: var(--sans);
  font-weight:500;
  font-size:clamp(1.4rem, 2.4vw, 1.7rem);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0 0 .3rem;
}
.bmb-article-preview .bmb-first-trials-cta-body p{
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 .8rem;
}
.bmb-article-preview .bmb-first-trials-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.3rem;
}
.bmb-article-preview .bmb-first-trials-cta-actions .bmb-cta{
  display:inline-flex;
  align-items:center;
  font-family: var(--sans);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.005em;
  padding:.6rem 1.4rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.bmb-article-preview .bmb-first-trials-cta-actions .bmb-cta--primary{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
}
.bmb-article-preview .bmb-first-trials-cta-actions .bmb-cta--primary:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.bmb-article-preview .bmb-first-trials-cta-actions .bmb-cta--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-rose);
}
.bmb-article-preview .bmb-first-trials-cta-actions .bmb-cta--ghost:hover{
  border-color:var(--brand);
  color:var(--brand-dk);
}

@media (max-width:640px){
  .bmb-article-preview .bmb-first-trials-cta{
    grid-template-columns:1fr;
    gap:1.2rem;
    padding:1.4rem;
    text-align:center;
  }
  .bmb-article-preview .bmb-first-trials-cta-visual img{
    width:140px;
    height:140px;
    margin:0 auto;
  }
  .bmb-article-preview .bmb-first-trials-cta-actions{
    justify-content:center;
  }
}

/* ─── FAQ accordion — transformed from WP <h4>FAQ</h4> + <a>Q?</a>
   pattern by transform_faq() in build.py. Uses native <details> so
   it works without JS and is accessibility-clean. */
.bmb-article-preview .bmb-faq{
  margin:3rem auto 2rem;
  padding:0;
  max-width:680px;
}
.bmb-article-preview .bmb-faq-heading{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2rem);
  line-height:1.2;
  text-align:center;
  margin:0 0 1.6rem;
  color:var(--ink);
}
.bmb-article-preview .bmb-faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  margin:0 0 .8rem;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.bmb-article-preview .bmb-faq-item:hover{
  border-color:var(--brand-200);
}
.bmb-article-preview .bmb-faq-item[open]{
  border-color:var(--brand-200);
  box-shadow:0 4px 14px rgba(120,80,90,.08);
}
.bmb-article-preview .bmb-faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1.1rem 3rem 1.1rem 1.4rem;
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-.003em;
  position:relative;
  user-select:none;
  outline:none;
}
.bmb-article-preview .bmb-faq-item summary::-webkit-details-marker{display:none}
.bmb-article-preview .bmb-faq-item summary::marker{content:""}
/* Chevron indicator on the right */
.bmb-article-preview .bmb-faq-item summary::after{
  content:"";
  position:absolute;
  right:1.4rem;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid var(--brand-dk);
  border-bottom:2px solid var(--brand-dk);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.bmb-article-preview .bmb-faq-item[open] summary::after{
  transform:translateY(-30%) rotate(-135deg);
}
.bmb-article-preview .bmb-faq-item summary:hover{
  color:var(--brand-dk);
}
.bmb-article-preview .bmb-faq-item summary:focus-visible{
  outline:2px solid var(--brand-200);
  outline-offset:-2px;
}
.bmb-article-preview .bmb-faq-answer{
  padding:0 1.4rem 1.2rem;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-2);
  border-top:1px solid var(--brand-100);
}
.bmb-article-preview .bmb-faq-answer p{
  margin:0 0 .8rem;
  padding:0;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
.bmb-article-preview .bmb-faq-answer p:first-child{margin-top:1rem}
.bmb-article-preview .bmb-faq-answer p:last-child{margin-bottom:0}

/* Mobile */
@media (max-width:640px){
  .bmb-article-preview .bmb-faq-item summary{
    font-size:1.05rem;
    padding:.95rem 2.6rem .95rem 1.1rem;
  }
  .bmb-article-preview .bmb-faq-answer{padding:0 1.1rem 1rem}
}

/* ─── Related Products section (auto-appended on /product/*).
   Mirror the polished card style from products.css so the section
   reads as a curated suggestion strip, not a generic WC widget. */
.bmb-article-preview .related-products{
  margin:4rem auto 2rem;
  text-align:center;
}
.bmb-article-preview .related-products h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.55rem, 3vw, 2rem);
  letter-spacing:-.005em;
  margin:0 0 1.6rem;
  text-align:center;
}
/* Related Products always renders exactly 3 cards. Cards use flex-
   column layout internally; alignment across cards is enforced by
   fixed-height title slot (line-clamped to 2 lines), so price + CTA
   sit at the exact same y-position on all three cards regardless of
   title length. */
.bmb-article-preview .related-products .product-grid{
  grid-template-columns:repeat(3, minmax(0, 220px));
  justify-content:center;
  gap:1rem;
}

/* ── Individual card: flex-column with fixed-height title slot so
   price + CTA sit on the same horizontal baseline across all cards
   regardless of how many lines the title actually wraps to. */
.bmb-article-preview .related-products .product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  text-align:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.bmb-article-preview .related-products .product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(120,80,90,.10), 0 30px 60px rgba(120,80,90,.08);
}
/* DOM structure emitted by product_card() in build.py:
     <article.product-card>
       <a.product-card-thumb><img/></a>
       <div.bmb-product-card-body>
         <h3>title</h3>
         <p.product-card-price>$x</p>
         <a.product-card-cta>View details →</a>
       </div>
     </article>

   h3 is NOT a direct child of .product-card (there's a wrapper div),
   so selectors below use DESCENDANT combinator (space) not child (>).
   Earlier > selectors silently didn't match — that's why h3 height
   stayed auto and prices/CTAs didn't align. */

.bmb-article-preview .related-products .product-card{
  text-align:center;
}
/* Body wrapper: flex column that fills remaining card height. Lets
   the CTA's margin-top:auto inside actually push it to the bottom. */
.bmb-article-preview .related-products .product-card .bmb-product-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:0;
}
/* Title: FIXED 2-line slot inside the body div so single-line titles
   reserve the same vertical space as two-liners. line-clamp:2 caps
   long titles to 2 lines so they fit the slot. Result: prices below
   sit at the SAME y across all 3 cards. */
.bmb-article-preview .related-products .product-card .bmb-product-card-body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.1rem;
  line-height:1.3;
  height:calc(2 * 1.3 * 1.1rem + 2rem);
  padding:1.6rem 1rem .4rem;
  margin:0;
  text-align:center;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  box-sizing:border-box;
  color:var(--ink);
  letter-spacing:-.003em;
}
.bmb-article-preview .related-products .product-card .bmb-product-card-body h3 a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
}
/* Price: sits right after the fixed-height title (same y on all cards) */
.bmb-article-preview .related-products .product-card .bmb-product-card-body .product-card-price{
  padding:0 1rem 1.2rem;
  margin:0;
  text-align:center;
  flex-shrink:0;
}

/* Image area — real <img> when product body has one, monogram
   placeholder otherwise (.bmb-product-card-img--empty). */
.bmb-article-preview .related-products .product-card-thumb,
.bmb-article-preview .related-products .bmb-product-card-img{
  display:block;
  position:relative;
  aspect-ratio:4/3;
  width:100%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--brand-50), var(--brand-100));
}
.bmb-article-preview .related-products .product-card-thumb img,
.bmb-article-preview .related-products .bmb-product-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
  margin:0;
  box-shadow:none;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.bmb-article-preview .related-products .product-card:hover .product-card-thumb img,
.bmb-article-preview .related-products .product-card:hover .bmb-product-card-img img{
  transform:scale(1.05);
}
/* Empty/no-image card — render the BMB monogram placeholder so the
   card has visual structure instead of a blank white block */
.bmb-article-preview .related-products .bmb-product-card-img--empty{
  position:relative;
  aspect-ratio:4/3;
}
.bmb-article-preview .related-products .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:2rem;
  font-weight:500;
  color:var(--brand-200);
  letter-spacing:.02em;
}

/* Title link styles only — the box rules (height, padding, display,
   line-height) for h3 are defined earlier with the fixed-height slot
   selector `.product-card > h3`. This stale rule was overriding those
   because it came later in the cascade with the same specificity. */
.bmb-article-preview .related-products .product-card h3 a{
  color:inherit;
  text-decoration:none;
  letter-spacing:-.005em;
}
.bmb-article-preview .related-products .product-card h3 a:hover{
  color:var(--brand-dk);
}

/* Price — small, brand-dk for emphasis */
.bmb-article-preview .related-products .product-card-price{
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink-2);
}
.bmb-article-preview .related-products .product-card-price strong{
  color:var(--brand-dk);
  font-weight:600;
}
.bmb-article-preview .related-products .product-card-price del{
  color:var(--muted);
  margin-right:.4rem;
  font-weight:400;
}

/* CTA — outlined pill, pinned to the bottom of the card via
   margin-top:auto on this flex item. Because the title is fixed
   height and the price comes right after it, the CTA's y-position
   = card_height - 1.2rem - cta_height — identical on all 3 cards. */
.bmb-article-preview .related-products .product-card-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  align-self:center;
  margin:auto 0 1.2rem;
  padding:.5rem .9rem;
  background:none !important;
  border:1px solid var(--line-rose);
  border-radius:999px;
  text-align:center;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:500;
  color:var(--brand-dk) !important;
  text-decoration:none;
  letter-spacing:.005em;
  opacity:1 !important;
  transition:border-color .2s ease, background .2s ease;
}
.bmb-article-preview .related-products .product-card-cta:hover{
  background:var(--brand-50) !important;
  border-color:var(--brand-200);
  color:var(--brand-dk) !important;
  text-decoration:none;
  opacity:1 !important;
}
/* Arrow comes from the inline <span> the build emits (no ::after) */
.bmb-article-preview .related-products .product-card-cta span{
  display:inline-block;
  transition:transform .25s ease;
}
.bmb-article-preview .related-products .product-card:hover .product-card-cta span{
  transform:translateX(4px);
}

@media (max-width:640px){
  .bmb-article-preview .related-products .product-grid{
    grid-template-columns:1fr;
    max-width:320px;
    margin:0 auto;
  }
}

/* ─── Book Now CTA block (auto-appended after every WP body) ───── */
.bmb-article-preview + .cta-block,
.cta-block:has(+ .bmb-article-preview),
.cta-block{
  text-align:center;
  margin:3rem auto 0;
  max-width:780px;
}
body:has(.bmb-article-preview) .cta-block .cta{
  display:inline-flex;
  align-items:center;
  font-family: var(--sans);
  font-size:1.05rem;
  font-weight:500;
  padding:.75rem 1.8rem;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s;
}
body:has(.bmb-article-preview) .cta-block .cta:hover{
  background:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width:720px){
  .bmb-article-preview{
    padding:2rem 1.1rem 1.5rem;
    font-size:16px;
  }
  .bmb-article-preview p,
  .bmb-article-preview ul,
  .bmb-article-preview ol{font-size:1rem}
  .bmb-article-preview h2{margin-top:2rem}
  .bmb-article-preview img{margin:1.4rem auto}
}

/* ════════════════════════════════════════════════════════════════════
   Magazine-style blog article (.bmb-magazine-preview)
   Pilot layout introduced 2026-06-05 for the blog redesign sprint.
   Reference: tech-magazine article layout (category pill → big serif
   headline → byline + date → full-width hero → social rail sidebar +
   body column → pull-quote → continue → CTA).

   Scoped to .bmb-magazine-preview so it doesn't leak.
   ═══════════════════════════════════════════════════════════════════ */
html:has(.bmb-magazine-preview),
body:has(.bmb-magazine-preview){overflow-x:clip}
main:has(.bmb-magazine-preview){background:var(--bg);max-width:none;padding:0;width:100%}
.bmb-magazine-preview{
  --mag-max: 980px;
  --mag-rail: 80px;
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.7;
  overflow-x:clip;
  max-width:100vw;
  padding:3rem max(1.5rem, calc((100vw - var(--mag-max)) / 2)) 5rem;
}

/* ── Head: category pill → headline → byline → date ─────────── */
.bmb-magazine-preview .bmb-mag-head{
  text-align:center;
  margin:0 auto 2.5rem;
  max-width:780px;
}
.bmb-magazine-preview .bmb-mag-category{
  display:inline-block;
  padding:.45rem 1.1rem;
  background:var(--navy);
  color:#fff;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  border-radius:4px;
  text-decoration:none;
  margin-bottom:2rem;
  transition:background .2s ease;
}
.bmb-magazine-preview .bmb-mag-category:hover{
  background:var(--navy-dk, #061730);
  text-decoration:none;
}
.bmb-magazine-preview .bmb-mag-title{
  font-family:var(--font-display, var(--serif));
  font-size:clamp(2.2rem, 4.8vw, 3.6rem);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:0 0 1.6rem;
}
.bmb-magazine-preview .bmb-mag-byline{
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:500;
  color:var(--ink-2);
  margin:0 0 .35rem;
}
.bmb-magazine-preview .bmb-mag-byline .bmb-mag-author{
  color:var(--ink);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(170, 127, 134, 0.4);
  text-underline-offset:3px;
}
.bmb-magazine-preview .bmb-mag-byline .bmb-mag-author:hover{
  text-decoration-color:var(--brand);
}
.bmb-magazine-preview .bmb-mag-meta{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.bmb-magazine-preview .bmb-mag-meta-sep{
  display:inline-block;
  margin:0 .55rem;
  color:var(--gold);
  opacity:.8;
}

/* ── Full-width hero image ──────────────────────────────────── */
.bmb-magazine-preview .bmb-mag-hero{
  margin:0 0 2.5rem;
  border-radius:14px;
  overflow:hidden;
  background:rgba(170, 127, 134, 0.06);
}
.bmb-magazine-preview .bmb-mag-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* ── Single-column centred body (share rail removed) ─────── */
.bmb-magazine-preview .bmb-mag-layout{
  max-width:760px;
  margin:0 auto;
}
.bmb-magazine-preview .bmb-mag-share{display:none}

/* ── Main body content ──────────────────────────────────────── */
.bmb-magazine-preview .bmb-mag-body{
  min-width:0;
}
.bmb-magazine-preview .bmb-mag-lead{
  font-family:var(--sans);
  font-size:1.22rem;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 2rem;
}
.bmb-magazine-preview .bmb-mag-body p{
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 1.3rem;
}
.bmb-magazine-preview .bmb-mag-body p a,
.bmb-magazine-preview .bmb-mag-body li a{
  color:var(--brand);
  text-decoration:underline;
  text-decoration-color:rgba(170, 127, 134, 0.4);
  text-underline-offset:3px;
  transition:text-decoration-color .2s ease;
}
.bmb-magazine-preview .bmb-mag-body p a:hover,
.bmb-magazine-preview .bmb-mag-body li a:hover{
  text-decoration-color:var(--brand);
}
.bmb-magazine-preview .bmb-mag-body h2,
.bmb-magazine-preview .bmb-mag-body h3{
  font-family:var(--font-display, var(--serif));
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.012em;
  line-height:1.18;
  margin:3rem 0 1.2rem;
  text-align:center;
  position:relative;
  padding-top:1.4rem;
}
.bmb-magazine-preview .bmb-mag-body h2{font-size:clamp(1.7rem, 2.6vw, 2.3rem)}
.bmb-magazine-preview .bmb-mag-body h3{font-size:clamp(1.45rem, 2vw, 1.8rem)}
/* Gold ornament above each H2/H3 — short hairline */
.bmb-magazine-preview .bmb-mag-body h2::before,
.bmb-magazine-preview .bmb-mag-body h3::before{
  content:"";
  display:block;
  width:32px;
  height:1px;
  background:var(--gold);
  margin:0 auto .9rem;
}
/* When the H3 is immediately preceded by an .bmb-mag-ornament (3-dot
   divider), suppress its leading hairline to avoid the double-ornament
   stack. The ornament alone separates the section. */
.bmb-magazine-preview .bmb-mag-body .bmb-mag-ornament + h3::before,
.bmb-magazine-preview .bmb-mag-body .bmb-mag-ornament + h2::before{
  content:none;
}

/* Drop-cap removed 2026-06-05 — at 4em the letter looked out of
   place when the first body letter was a capital "H" or similar tall
   letter. The lead paragraph alone provides enough hierarchy. */

/* Numbered remedy cards — the 6 home-remedy h4 + p pairs become a
   2-column grid of cards, each with a gold number and a serif title. */
.bmb-magazine-preview .bmb-mag-remedies{
  margin:2rem 0 2.5rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  counter-reset:remedy;
}
.bmb-magazine-preview .bmb-mag-remedy{
  counter-increment:remedy;
  padding:1.8rem 1.6rem 1.6rem;
  background:rgba(255, 250, 248, 0.6);
  border:1px solid rgba(170, 127, 134, 0.16);
  border-radius:16px;
  position:relative;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bmb-magazine-preview .bmb-mag-remedy:hover{
  transform:translateY(-2px);
  border-color:rgba(179, 149, 85, 0.35);
  box-shadow:0 14px 32px -18px rgba(13, 44, 84, 0.15);
}
.bmb-magazine-preview .bmb-mag-remedy::before{
  content:counter(remedy, decimal-leading-zero);
  position:absolute;
  top:1.2rem;
  right:1.4rem;
  font-family:var(--font-display, var(--serif));
  font-size:2.2rem;
  font-weight:500;
  color:var(--gold);
  line-height:1;
  opacity:.4;
}
.bmb-magazine-preview .bmb-mag-remedy h4{
  font-family:var(--font-display, var(--serif));
  font-weight:500;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.008em;
  color:var(--ink);
  margin:0 2.5rem .6rem 0;
  text-align:left;
  padding-top:0;
}
.bmb-magazine-preview .bmb-mag-remedy h4::before{content:none}
.bmb-magazine-preview .bmb-mag-remedy p{
  font-family:var(--sans);
  font-size:.98rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}
@media (max-width: 720px){
  .bmb-magazine-preview .bmb-mag-remedies{grid-template-columns:1fr;gap:1rem}
}

/* "Bottom line" closing card — cream tint with gold accent. */
.bmb-magazine-preview .bmb-mag-bottomline{
  margin:2.6rem 0 0;
  padding:2rem 2.2rem 1.8rem;
  background:linear-gradient(180deg, rgba(247, 240, 240, 0.55), rgba(244, 232, 218, 0.35));
  border:1px solid rgba(179, 149, 85, 0.2);
  border-left:4px solid var(--gold);
  border-radius:14px;
}
.bmb-magazine-preview .bmb-mag-bottomline h3{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  text-align:left;
  margin:0 0 .9rem;
  padding-top:0;
}
.bmb-magazine-preview .bmb-mag-bottomline h3::before{content:none}
.bmb-magazine-preview .bmb-mag-bottomline p{
  font-family:var(--font-display, var(--serif));
  font-size:1.2rem;
  font-style:italic;
  line-height:1.5;
  color:var(--ink);
  margin:0;
}

/* Section ornament — small gold dot trio between major sections,
   used as <hr class="bmb-mag-ornament"> within the body. */
.bmb-magazine-preview .bmb-mag-ornament{
  border:0;
  margin:3rem auto;
  height:auto;
  text-align:center;
  position:relative;
  width:80px;
}
.bmb-magazine-preview .bmb-mag-ornament::before{
  content:"\2022 \2022 \2022";
  letter-spacing:.6em;
  color:var(--gold);
  font-size:.7rem;
}
.bmb-magazine-preview .bmb-mag-body ul,
.bmb-magazine-preview .bmb-mag-body ol{
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 1.3rem;
  padding-left:1.4rem;
}
.bmb-magazine-preview .bmb-mag-body ul li,
.bmb-magazine-preview .bmb-mag-body ol li{margin:0 0 .5rem}
.bmb-magazine-preview .bmb-mag-body strong{
  color:var(--ink);
  font-weight:700;
}
.bmb-magazine-preview .bmb-mag-body em{font-style:italic}
.bmb-magazine-preview .bmb-mag-body img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.8rem auto;
  border-radius:10px;
}

/* ── Pull-quote card ────────────────────────────────────────── */
.bmb-magazine-preview .bmb-mag-pullquote{
  margin:2.4rem auto;
  padding:3.6rem 2.4rem 2rem;
  background:linear-gradient(180deg, rgba(247, 240, 240, 0.6), rgba(244, 232, 218, 0.4));
  border:1px solid rgba(179, 149, 85, 0.18);
  border-radius:18px;
  position:relative;
  text-align:center;
}
.bmb-magazine-preview .bmb-mag-pullquote::before{
  content:"\201C";
  display:block;
  font-family:var(--font-display, var(--serif));
  font-size:3.2rem;
  line-height:.6;
  color:var(--gold);
  opacity:.85;
  margin:0 auto .4rem;
  text-align:center;
}
.bmb-magazine-preview .bmb-mag-pullquote p{
  font-family:var(--font-display, var(--serif));
  font-style:italic;
  font-size:clamp(1.2rem, 2vw, 1.65rem);
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
  text-align:center;
  margin:0;
}

/* ── Footer CTA (replaces auto Book Now) — centred ─────────── */
.bmb-magazine-preview .bmb-mag-footer{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid rgba(170, 127, 134, 0.18);
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  align-items:center;
  text-align:center;
}
.bmb-magazine-preview .bmb-mag-footer .bmb-mag-questions{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-2);
  margin:0;
  max-width:60ch;
}
.bmb-magazine-preview .bmb-mag-footer .bmb-mag-questions a{
  color:var(--brand);
  text-decoration:underline;
  text-decoration-color:rgba(170, 127, 134, 0.4);
  text-underline-offset:3px;
}
.bmb-magazine-preview .bmb-mag-footer .bmb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 2rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-dk, #8f6e69) 100%);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(170, 127, 134, 0.55);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bmb-magazine-preview .bmb-mag-footer .bmb-cta:hover{
  transform:translateY(-2px) scale(1.02);
  text-decoration:none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px){
  .bmb-magazine-preview{padding-top:2rem}
  .bmb-magazine-preview .bmb-mag-pullquote{
    padding:1.8rem 1.4rem 1.6rem;
  }
}
@media (max-width: 600px){
  .bmb-magazine-preview .bmb-mag-title{font-size:1.9rem}
  .bmb-magazine-preview .bmb-mag-lead{font-size:1.1rem}
  .bmb-magazine-preview .bmb-mag-body p,
  .bmb-magazine-preview .bmb-mag-body ul,
  .bmb-magazine-preview .bmb-mag-body ol{font-size:1rem}
}