/* ═══════════════════════════════════════════════════════════════════
   BeautinMed — tokens, base, shell.
   Every hue derives from the brand mark. Product pages override --accent
   and its pair from the plugin's fields; nothing else needs to change.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fonts ──────────────────────────────────────────────────────────
   Both files ship inside the theme; nothing is fetched from a third party
   and there is no build step to forget. Fraunces carries a SOFT axis, which
   rounds the terminals and is the difference between a headline that reads
   clinical and one that reads cosmetic — see --soft below. Latin subset,
   variable weight, 62 KB + 25 KB, preloaded from functions.php.         */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brand — sampled from the logo itself */
  --brand:        #188DD6;
  --brand-deep:   #053F63;

  /* accent — overridden per product by the inline block in wp_head */
  --accent:       var(--brand);
  --accent-deep:  var(--brand-deep);
  --accent-2:     var(--brand);
  --accent-tint:  color-mix(in srgb, var(--accent) 12%, #FFFFFF);
  --accent-line:  color-mix(in srgb, var(--accent) 26%, #FFFFFF);

  /* grounds — cool neutrals, biased toward the brand rather than flat grey */
  --bg:           #F7FAFC;
  --bg-2:         #ECF3F8;
  --surface:      #FFFFFF;
  --surface-2:    #F3F8FB;

  --ink:          #0A2233;
  --ink-soft:     #42606F;
  --ink-mute:     #7A98A8;
  --hair:         #DCE8EF;
  --hair-soft:    #EAF1F6;

  --ok:           #0F7A6E;
  --ok-tint:      #E0F0ED;
  --warn:         #9A5B08;

  --wa:           #1FA855;

  --r-sm: 8px;  --r: 14px;  --r-lg: 22px;  --r-xl: 32px;

  --shadow:       0 1px 2px rgba(10,34,51,.05), 0 10px 26px -14px rgba(5,63,99,.22);
  --shadow-lift:  0 2px 4px rgba(10,34,51,.06), 0 26px 54px -24px rgba(5,63,99,.30);

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  /* SOFT rounds the stroke ends. 52 is the point where Fraunces stops looking
     like a newspaper and starts looking like a cosmetics counter. */
  --soft: "SOFT" 52;

  /* Fluid type scale. Every heading in the build pulls from these rather than
     inventing its own clamp, so the rhythm holds from 320px to 1600px. */
  --t-hero:  clamp(2.35rem, 1.35rem + 4.4vw, 4.4rem);
  --t-sec:   clamp(1.85rem, 1.25rem + 2.5vw, 3rem);
  --t-sub:   clamp(1.28rem, 1.06rem + .9vw, 1.65rem);
  --t-lead:  clamp(1.06rem, 1rem + .35vw, 1.22rem);
  --t-eye:   .72rem;

  --gut: clamp(16px, 4vw, 28px);
  --stack: clamp(48px, 7vw, 92px);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--disp);
  font-variation-settings: var(--soft);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); font-weight: 600; letter-spacing: -.028em; }
h2 { font-size: var(--t-sec); }
h3 { font-size: var(--t-sub); }

/* An eyebrow is the smallest piece of type on a page and does the most work:
   it tells the reader what kind of thing they are about to read. */
.bm-eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eye);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* Lead paragraph — one notch up from body, used directly under a heading. */
.bm-lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 62ch;
}

/* Figures set in the display face read as a designed number rather than a
   data point. Tabular so columns of them do not jitter. */
.bm-num {
  font-family: var(--disp);
  font-variation-settings: var(--soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
p { margin: 0; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.bm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.bm-skip:focus { left: 0; }

.bm-wrap { width: min(1200px, 100% - (var(--gut) * 2)); margin-inline: auto; }
.bm-main { padding-block: var(--stack); min-height: 40vh; }

/* ── section rhythm ──
   Shared by the product landing pages and the home page, so it lives here rather
   than in either of their stylesheets. */
.bm-sec { padding-block: clamp(46px, 7vw, 84px); }
.bm-sec--tint { background: var(--surface-2); }
.bm-sec--flush { padding-block: clamp(22px, 3vw, 34px); }
.bm-sec__h { font-size: var(--t-sec); margin-bottom: 28px; max-width: 22ch; }
.bm-sec__h + .bm-lead { margin-top: -12px; }
.bm-narrow { max-width: 760px; }

/* ── icons ── */
.bm-ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.bm-ico--lg { width: 26px; height: 26px; stroke-width: 1.5; }

/* ── logo ──
   Layer classes come from the traced SVG. Recolouring is pure CSS, which is
   what makes a per-product logo cost nothing at runtime. */
.bm-brand__logo { height: 42px; width: auto; }
.bm-brand__logo .bm-mark  { fill: var(--accent); }
.bm-brand__logo .bm-glyph { fill: #fff; }
.bm-brand__logo .bm-word  { fill: var(--ink); }
.bm-brand__logo .bm-word2 { fill: var(--accent); }
.bm-brand__logo .bm-tag   { fill: var(--ink); }
@media (max-width: 600px) { .bm-brand__logo { height: 34px; } }

/* ── buttons ── */
.bm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: .938rem; letter-spacing: .01em;
  padding: 13px 24px; border-radius: 100px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.bm-btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.bm-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.bm-btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.bm-btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.bm-btn--wa { background: var(--wa); color: #fff; }
.bm-btn--wa:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.bm-btn--block { width: 100%; }
/* Buttons that sit on a filled accent panel rather than on the page ground. */
.bm-btn--onaccent { background: #fff; color: var(--accent-deep); border: 0; }
.bm-btn--onaccent:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(0,0,0,.45); }
.bm-btn--onaccent-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.bm-btn--onaccent-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.7); transform: translateY(-2px); }

/* ── header ── */
.bm-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.bm-head[data-stuck="true"] { border-bottom-color: var(--hair); }
.bm-head__inner { display: flex; align-items: center; gap: 22px; padding-block: 14px; }
.bm-brand { flex: none; text-decoration: none; }

.bm-nav { margin-inline: auto; }
.bm-nav__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.bm-nav__list a {
  text-decoration: none; font-size: .938rem; font-weight: 500;
  color: var(--ink-soft); position: relative; padding-block: 5px; display: block;
}
.bm-nav__list a::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.bm-nav__list a:hover { color: var(--ink); }
.bm-nav__list a:hover::after { transform: scaleX(1); }
.bm-nav__list .current-menu-item > a { color: var(--ink); }
.bm-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* ── products panel ──
   A hover/focus panel rather than a nested list: five products with their own
   colour and pack size is a better answer to "what do you sell" than five words. */
.bm-nav__has-panel { position: relative; }
.bm-nav__caret {
  display: inline-block; width: 6px; height: 6px; margin-left: 7px; vertical-align: 2px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
.bm-nav__has-panel:hover .bm-nav__caret,
.bm-nav__has-panel:focus-within .bm-nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.bm-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  width: min(680px, 92vw); padding: 18px; z-index: 70;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.4,0,.2,1), visibility .2s;
}
/* The gap between trigger and panel would drop the hover, so bridge it. */
.bm-nav__has-panel::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 16px; }
.bm-nav__has-panel:hover .bm-panel,
.bm-nav__has-panel:focus-within .bm-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.bm-panel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bm-panel__item {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--r); text-decoration: none;
  transition: background .18s ease;
}
.bm-panel__item:hover { background: var(--surface-2); }
.bm-panel__thumb {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--surface-2); position: relative; overflow: hidden;
}
.bm-panel__thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--card-accent, var(--brand));
}
.bm-panel__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.bm-panel__text b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.bm-panel__text small { display: block; margin-top: 2px; font-size: .75rem; color: var(--ink-mute); }
.bm-panel__all {
  display: block; margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--hair-soft);
  text-align: center; font-size: .813rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.bm-panel__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.bm-head__actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* Cart. The glyph is a bag at 22px — the previous 18px banknote read as a
   credit card and disappeared into the header. */
.bm-cart {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.bm-cart .bm-ico { width: 22px; height: 22px; stroke-width: 1.7; }
.bm-cart:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.bm-cart:active { transform: translateY(0); }
.bm-cart__n {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
  border: 2px solid var(--bg);
  display: grid; place-items: center; padding: 0 5px;
  background: var(--accent); color: #fff; font-size: .688rem; font-weight: 700;
  border-radius: 99px;
}

.bm-burger { display: none; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; padding: 11px 9px; }
.bm-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .28s ease, opacity .2s ease; }
.bm-burger span + span { margin-top: 5px; }
.bm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bm-mobile-nav { border-top: 1px solid var(--hair); background: var(--surface); }
.bm-mobile-nav__list { list-style: none; margin: 0; padding: 8px var(--gut) 18px; }
.bm-mobile-nav__list a {
  display: flex; align-items: center; gap: 11px; padding: 14px 0;
  text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--hair-soft);
}
.bm-mobile-nav__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--card-accent, var(--hair));
}
.bm-mobile-nav__cta { margin: 16px var(--gut) 20px; width: calc(100% - var(--gut) * 2); }

@media (max-width: 900px) {
  .bm-nav { display: none; }
  .bm-burger { display: block; }
  .bm-head__inner { justify-content: space-between; }
}

/* ── USP strip ── */
/* ── utility strip ──
   Trust points and the social row share one dark band under the header. It is the
   only place above the fold that can carry the social marks without them competing
   with the cart: a full band separates the two, and it costs no extra height. */
.bm-usps { background: var(--ink); color: #fff; font-size: .813rem; }
.bm-usps__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 28px; justify-content: center; padding-block: 9px;
}
/* Only when both halves are present: points left, follow right. With one of them
   the flex default centres it, which is what a lone row should do. */
.bm-usps__inner--split { justify-content: space-between; }

.bm-usps__points { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.bm-usps__item { display: inline-flex; align-items: center; gap: 8px; opacity: .88; }
.bm-usps .bm-ico { width: 15px; height: 15px; }

.bm-usps__follow { display: flex; align-items: center; gap: 12px; }
.bm-usps__followlab {
  font-size: .625rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* Smaller and tighter than the footer row — this is a utility strip, not a
   destination, so the marks sit quietly until hovered. */
.bm-social--strip { gap: 2px; }
.bm-social--strip .bm-social__link {
  width: 30px; height: 30px; border-radius: 9px; color: rgba(255,255,255,.62);
}
.bm-social--strip .bm-social__ico { width: 15px; height: 15px; }
.bm-social--strip .bm-social__link:hover { transform: translateY(-1px); color: #fff; }

@media (max-width: 720px) {
  /* Two halves cannot sit side by side at this width, so they stack: trust points
     first because they carry the commercial message, social under a hairline. The
     label goes — four brand marks do not need to be told they are social links —
     and the whole strip is tightened so the hero still reaches the fold. */
  .bm-usps__inner,
  .bm-usps__inner--split {
    flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0; padding-block: 0;
  }
  .bm-usps__points { justify-content: center; gap: 6px 20px; padding-block: 9px; }
  .bm-usps__followlab { display: none; }
  .bm-usps__follow { justify-content: center; padding-block: 4px; }
  .bm-usps__inner--split .bm-usps__follow { border-top: 1px solid rgba(255,255,255,.12); }

  /* Bigger than on desktop: this is now a tap target, not a hover target. */
  .bm-social--strip { gap: 4px; }
  .bm-social--strip .bm-social__link { width: 38px; height: 38px; border-radius: 11px; }
  .bm-social--strip .bm-social__ico { width: 17px; height: 17px; }
  /* Touch has no hover, so the marks carry a little more presence at rest. */
  .bm-social--strip .bm-social__link { color: rgba(255,255,255,.78); }
}

/* ── breadcrumb ── */
.bm-crumbs { padding-block: 14px 0; font-size: .813rem; color: var(--ink-mute); }
.bm-crumbs a { text-decoration: none; }
.bm-crumbs a:hover { color: var(--accent); }
.bm-crumbs span[aria-hidden] { margin-inline: 8px; opacity: .5; }

/* ── prose ── */
.bm-prose { max-width: 68ch; }
.bm-prose > * + * { margin-top: 1.1em; }
.bm-prose h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 1.8em; }
.bm-prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.bm-prose a { color: var(--accent); text-underline-offset: 3px; }
.bm-prose ul, .bm-prose ol { padding-left: 22px; }
.bm-prose li + li { margin-top: .4em; }
.bm-prose img { border-radius: var(--r); }
.bm-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-size: 1.05rem;
}

/* ── article / archive ── */
.bm-article__head { margin-bottom: 28px; }
.bm-article__title { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.bm-article__meta, .bm-post__meta { color: var(--ink-mute); font-size: .813rem; margin-top: 10px; }
.bm-article__img { margin: 0 0 30px; }
.bm-article__img img { border-radius: var(--r-lg); width: 100%; }

.bm-arch__head { margin-bottom: 34px; }
.bm-arch__title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.bm-arch__desc { margin-top: 12px; color: var(--ink-soft); max-width: 60ch; }

.bm-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.bm-post { background: var(--surface); border: 1px solid var(--hair-soft); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.bm-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.bm-post__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.bm-post__body { padding: 20px 22px 24px; }
.bm-post__title { font-size: 1.125rem; line-height: 1.28; }
.bm-post__title a { text-decoration: none; }
.bm-post__excerpt { margin-top: 10px; font-size: .938rem; color: var(--ink-soft); }

.bm-empty { color: var(--ink-mute); }
.bm-404 { text-align: center; max-width: 52ch; margin-inline: auto; }
.bm-404 h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.bm-404 p { margin-top: 14px; color: var(--ink-soft); }
.bm-404 p:last-child { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── pagination ── */
.pagination, .woocommerce-pagination { margin-top: 44px; }
.pagination .nav-links, .woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.pagination a, .pagination span,
.woocommerce-pagination a, .woocommerce-pagination span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  text-decoration: none; font-size: .875rem; background: var(--surface);
}
.pagination .current, .woocommerce-pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── WhatsApp order form (plugin markup, theme styling) ── */
.bm-wa-form {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 24px; margin-top: 28px;
}
.bm-wa-form__hp { position: absolute; left: -9999px; }
.bm-wa-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bm-wa-form__row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bm-wa-form__row--wide { grid-column: 1 / -1; }
.bm-wa-form__row label { font-size: .813rem; font-weight: 600; color: var(--ink-soft); }
.bm-wa-form input, .bm-wa-form select {
  font: inherit; padding: 11px 13px; border: 1px solid var(--hair);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); width: 100%;
}
.bm-wa-form input:focus, .bm-wa-form select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.bm-wa-form .bm-btn--wa { width: 100%; margin-top: 18px; }
.bm-wa-form__note { display: block; margin-top: 12px; font-size: .75rem; color: var(--ink-mute); text-align: center; }
@media (max-width: 560px) { .bm-wa-form__grid { grid-template-columns: 1fr; } }

/* ── order-received handoff ── */
.bm-wa-handoff {
  background: var(--ok-tint); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius: var(--r-lg); padding: 26px; margin-bottom: 28px; text-align: center;
}
.bm-wa-handoff h2 { font-size: 1.3rem; color: var(--ok); }
.bm-wa-handoff p { margin: 10px 0 20px; color: var(--ink-soft); }

/* ── cart delivery note ── */
.bm-nudge {
  background: var(--accent-tint); border: 1px dashed var(--accent-line);
  border-radius: var(--r); padding: 13px 18px; margin-bottom: 22px; font-size: .938rem;
}

/* ── floating WhatsApp ── */
.bm-wa-float {
  position: fixed; right: 16px; z-index: 70;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lift); transition: transform .25s ease;
}
.bm-wa-float:hover { transform: scale(1.06); }
.bm-wa-float .bm-ico { width: 26px; height: 26px; }

/* ── footer ── */
.bm-foot { background: var(--bg-2); border-top: 1px solid var(--hair); padding-block: 54px 28px; margin-top: var(--stack); }
.bm-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px 30px; }
.bm-foot__logo { height: 52px; width: auto; }
.bm-foot__logo .bm-mark { fill: var(--brand); }
.bm-foot__logo .bm-glyph { fill: #fff; }
.bm-foot__logo .bm-word, .bm-foot__logo .bm-tag { fill: var(--ink); }
.bm-foot__logo .bm-word2 { fill: var(--brand); }
.bm-foot__blurb { margin-top: 16px; color: var(--ink-soft); font-size: .938rem; max-width: 36ch; }
.bm-foot__h { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.bm-foot__list, .bm-foot__legal { list-style: none; margin: 0; padding: 0; }
.bm-foot__list li + li { margin-top: 10px; }
.bm-foot a { text-decoration: none; color: var(--ink-soft); font-size: .938rem; }
.bm-foot a:hover { color: var(--accent); }
.bm-foot__contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bm-foot__contact a { display: inline-flex; align-items: center; gap: 9px; }
.bm-foot__base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: .813rem; color: var(--ink-mute);
}
.bm-foot__legal { display: flex; flex-wrap: wrap; gap: 10px 20px; }
@media (max-width: 760px) { .bm-foot__grid { grid-template-columns: 1fr; gap: 32px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── social ──
   Brand marks are solid paths, unlike the rest of the icon set, so they get
   their own class rather than riding on .bm-ico. */
.bm-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bm-social__link {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.bm-social__ico { width: 18px; height: 18px; fill: currentColor; stroke: none; }

/* Each network lights up in its own colour on hover and stays neutral at rest,
   so the row reads as one element rather than four competing logos. */
.bm-social__link:hover { transform: translateY(-2px); color: #fff; }
.bm-social__link--facebook:hover  { background: #1877F2; }
.bm-social__link--instagram:hover { background: linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7); }
.bm-social__link--youtube:hover   { background: #FF0033; }
.bm-social__link--tiktok:hover    { background: #111; }

/* The footer ground is --bg-2, a light tint — not the dark panel these marks
   were first styled for. Neutral on white, coloured only on hover. */
.bm-social--foot { margin-top: 22px; }
.bm-social--foot .bm-social__link {
  background: var(--surface); border: 1px solid var(--hair); color: var(--ink-soft);
}
.bm-social--foot .bm-social__link:hover { border-color: transparent; }

.bm-social--drawer {
  margin: 18px var(--gut) 0; padding-top: 18px;
  border-top: 1px solid var(--hair-soft); justify-content: center; gap: 12px;
}
.bm-social--drawer .bm-social__link { background: var(--surface-2); color: var(--ink-soft); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}