/* ============================================================================
   BA Pages — Aguastatic  ·  v1.0 design system
   ----------------------------------------------------------------------------
   Scoped under `body.stasis-active`, `body.stasis-about-body`, and
   `body.stasis-contact-body` so styles never leak into other pages, the
   admin, or the active theme.

   TABLE OF CONTENTS
     01. Reset & base
     02. NUCLEAR GoDaddy MWP kill (top bar + bottom footer) — same as ba-landing
     03. Full-bleed override
     04. Theme chrome suppression
     05. Design tokens
     06. Typography
     07. Layout primitives
     08. Buttons
     09. Promo bar
     10. Header
     11. Breadcrumb
     12. Product layout (gallery + info)
     13. Bundle selector
     14. Subscribe block
     15. Add to cart + sticky buy
     16. Trust split (lab scene + copy)
     17. FAQ
     18. Tagline marquee
     19. Footer
     20. Toast
     21. Reveal / motion
     22. Scroll progress
     23. Responsive (mobile / tablet / desktop)
     24. Reduced motion
   ============================================================================ */

/* ── 01. Reset & base ───────────────────────────────────────────────── */
/* Defensive belt-and-suspenders reset: the bare full-page.php template
   (see ba_pages_template_override() in ba-pages.php) should mean the
   theme's header.php/footer.php never run at all on a BA page, so
   there should be no wrapper left to create top/bottom whitespace.
   This rule is a safety net for the (rare) case a caching layer or a
   theme filter still manages to keep a wrapper alive — it costs
   nothing when everything's working normally, and it's what closes
   the gap if it ever isn't. */
html:has(body.stasis-active),
body.stasis-active {
    margin: 0 !important;
    padding: 0 !important;
}
body.stasis-active #page,
body.stasis-active #content,
body.stasis-active .site,
body.stasis-active .site-content,
body.stasis-active .site-main,
body.stasis-active main.site-main,
body.stasis-active .content-area,
body.stasis-active #primary,
body.stasis-active .ast-container,
body.stasis-active .hfeed {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.stasis, .stasis * { box-sizing: border-box; }
.stasis {
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ink);
    background: var(--paper-2);
}
.stasis img { max-width: 100%; display: block; }
.stasis a { color: inherit; text-decoration: none; }
.stasis button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.stasis ul, .stasis ol { margin: 0; padding: 0; list-style: none; }
.stasis h1, .stasis h2, .stasis h3, .stasis h4, .stasis h5, .stasis h6 { margin: 0; font-weight: 600; }
.stasis p { margin: 0; }
.stasis ::selection { background: var(--cryo); color: var(--void); }
.stasis .ba-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── 02. NUCLEAR GoDaddy MWP kill ───────────────────────────────────── */
body.stasis-active #mwp-admin-bar,
body.stasis-active #mwp-toolbar,
body.stasis-active #mwp-banner,
body.stasis-active #mwp-footer,
body.stasis-active .mwp-admin-bar,
body.stasis-active .mwp-toolbar,
body.stasis-active .mwp-banner,
body.stasis-active .mwp-footer,
body.stasis-active .mwp-quick-links,
body.stasis-active .mwp-notification,
body.stasis-active .mwp-account-bar,
body.stasis-active .gd-admin-bar,
body.stasis-active .gd-notification-bar,
body.stasis-active .gd-toolbar,
body.stasis-active .godaddy-bar,
body.stasis-active .gwbar,
body.stasis-active [class*="mwp-"],
body.stasis-active [id*="mwp-"],
body.stasis-active [class*="GoDaddy"],
body.stasis-active [id*="GoDaddy"],
body.stasis-active [class*="godaddy"],
body.stasis-active [id*="godaddy"],
body.stasis-active [class*="gd-"],
body.stasis-active [id*="gd-"],
body.stasis-active [class*="quick-links"],
body.stasis-active [class*="quicklinks"],
body.stasis-active [id*="quick-links"],
body.stasis-active [class*="leave-feedback"],
body.stasis-active [id*="leave-feedback"],
body.stasis-active [class*="managed-wordpress"],
body.stasis-active [id*="managed-wordpress"],
body.stasis-active iframe[src*="myftpupload"],
body.stasis-active iframe[src*="secureserver"],
body.stasis-active iframe[src*="godaddy"],
body.stasis-active iframe[id*="mwp"],
body.stasis-active iframe[class*="mwp"],
body.stasis-active iframe[id*="godaddy"],
body.stasis-active iframe[title*="GoDaddy"],
body.stasis-active iframe[title*="Managed"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}
/* v2.1.2 — kill the GoDaddy THEME's actual site-header on every BA
   page. The rules above only target the MWP bar classes (mwp-*,
   godaddy, gd-, etc.) — the ones GoDaddy MWP injects. But the
   GoDaddy Starter Theme (or Twenty Twenty-Four/Five, or any
   block theme) ALSO renders its own <header> with site title +
   primary nav, and that one is NOT in the MWP class list. Hide
   every common shape of theme header here. We deliberately
   whitelist our own .ba-header so the BA luxury header keeps
   rendering. */
body.stasis-active > header:not(.ba-header),
body.stasis-active > #masthead,
body.stasis-active > .site-header:not(.ba-header),
body.stasis-active > nav:not(.ba-nav-mobile),
body.stasis-active > div > header:not(.ba-header),
body.stasis-active > div > #masthead,
body.stasis-active > div > .site-header:not(.ba-header),
body.stasis-active > div > nav:not(.ba-nav-mobile),
body.stasis-active > main > header:not(.ba-header),
body.stasis-active > main > #masthead,
body.stasis-active > main > .site-header:not(.ba-header),
body.stasis-active > main > nav:not(.ba-nav-mobile),
body.stasis-active header#masthead,
body.stasis-active header.site-header:not(.ba-header),
body.stasis-active .site-header:not(.ba-header),
body.stasis-active .site-branding,
body.stasis-active .site-title,
body.stasis-active .site-description,
body.stasis-active .main-navigation,
body.stasis-active .site-navigation,
body.stasis-active #site-navigation,
body.stasis-active .primary-menu,
body.stasis-active .nav-menu,
body.stasis-active .header,
body.stasis-active .top-bar,
body.stasis-active .navbar,
body.stasis-active .header-wrap,
body.stasis-active .header-inner,
body.stasis-active .wp-block-template-part.site-header,
body.stasis-active .wp-block-template-part > header:not(.ba-header),
body.stasis-active .wp-block-site-header,
body.stasis-active .wp-block-site-title,
body.stasis-active .wp-block-site-tagline,
body.stasis-active .wp-block-site-logo,
body.stasis-active .wp-block-navigation,
body.stasis-active .has-site-logo,
body.stasis-active .has-site-title,
body.stasis-active .has-site-tagline,
body.stasis-active > footer:not(.ba-footer),
body.stasis-active > #colophon,
body.stasis-active > .site-footer:not(.ba-footer),
body.stasis-active > div > footer:not(.ba-footer),
body.stasis-active > div > #colophon,
body.stasis-active > main > footer:not(.ba-footer),
body.stasis-active > main > #colophon,
body.stasis-active > main > .site-footer:not(.ba-footer),
body.stasis-active footer#colophon,
body.stasis-active .site-footer:not(.ba-footer),
body.stasis-active .colophon,
body.stasis-active .site-info,
body.stasis-active .wp-block-site-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* v2.1.2 — ASTRA-SPECIFIC KILL. The user is on Astra (a hybrid
   block theme) with Header Layout set to "None" in the Customizer,
   but Astra still injects its own header markup via the
   `ast-header` / `ast-above-header` / `ast-main-header` block group
   on every page. The customizer setting only affects whether
   Astra's header builder is rendered — it doesn't affect what the
   block template loader outputs. Hide every Astra-specific
   header / nav / brand container here. Whitelist the .ba-* so our
   luxury chrome keeps showing. */
body.stasis-active .ast-header,
body.stasis-active .ast-above-header,
body.stasis-active .ast-main-header,
body.stasis-active .ast-below-header,
body.stasis-active .ast-header-sections,
body.stasis-active .ast-above-header-section,
body.stasis-active .ast-main-header-section,
body.stasis-active .ast-below-header-section,
body.stasis-active .ast-site-header,
body.stasis-active .ast-site-identity,
body.stasis-active .ast-site-title,
body.stasis-active .ast-site-description,
body.stasis-active .ast-logo-container,
body.stasis-active .ast-builder-layout-element.ast-site-header,
body.stasis-active .ast-builder-layout-element.ast-above-header,
body.stasis-active .ast-builder-layout-element.ast-main-header,
body.stasis-active .ast-builder-layout-element.ast-below-header,
body.stasis-active .ast-builder-menu-1,
body.stasis-active header.ast-header,
body.stasis-active [class*="ast-"]:not(.stasis):not(.ba-header):not(.ba-promo):not(.ba-footer):not(.ba-hero):not(.ba-btn):not(.ba-tagline-marquee):not(.ba-progress):not(.ba-chatbot) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
}

html body.stasis-active,
body.stasis-active { margin-top: 0 !important; padding-top: 0 !important; }
#wpadminbar { display: none !important; }

/* ── 03. Full-bleed override ────────────────────────────────────────── */
body.stasis-active .stasis,
body.stasis-active .stasis > * {
    width: 100%;
    max-width: none;
}
body.stasis-active #content,
body.stasis-active .site-content,
body.stasis-active .content-area,
body.stasis-active .site-main,
body.stasis-active .entry-content,
body.stasis-active .page-content,
body.stasis-active article.page,
body.stasis-active article,
body.stasis-active .wp-block-post-content,
body.stasis-active main,
body.stasis-active .ast-container,
body.stasis-active .container,
body.stasis-active #page,
body.stasis-active .site {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
body.stasis-active .stasis { position: relative; overflow-x: clip; }

/* ── 04. Theme chrome suppression ───────────────────────────────────── */
body.stasis-active .site-title,
body.stasis-active .site-description,
body.stasis-active .site-branding,
body.stasis-active .site-name,
body.stasis-active header.site-header,
body.stasis-active .site-header,
body.stasis-active .ast-site-header,
body.stasis-active header#masthead,
body.stasis-active .page-header,
body.stasis-active .entry-header,
body.stasis-active .entry-title,
body.stasis-active h1.page-title,
body.stasis-active .post-title,
body.stasis-active .page-title,
body.stasis-active .breadcrumb,
body.stasis-active .breadcrumbs,
body.stasis-active .site-footer,
body.stasis-active footer.site-footer,
body.stasis-active #colophon,
body.stasis-active .comments-area,
body.stasis-active #comments,
body.stasis-active .post-navigation,
body.stasis-active .pagination,
body.stasis-active a[href*="myftpupload"],
body.stasis-active a[href*="secureserver"] {
    display: none !important;
}
html body.stasis-active { margin-top: 0 !important; }

/* ── 05. Design tokens ─────────────────────────────────────────────── */
:root {
    --void:       #04081A;
    --abyss:      #0A1024;
    --ink:        #0B1524;
    --ink-soft:   #4A5868;
    --graphite:   #6E7D8C;
    --mist:       #93A6BA;
    --paper:      #F6F3EC;
    --paper-2:    #FBFAF6;
    --paper-warm: #EFE7D8;
    --cream:      #F1ECDF;
    --line-light: rgba(11, 21, 36, 0.08);
    --line-dark:  rgba(255, 255, 255, 0.10);

    --cryo:       #5EC8F2;
    --cryo-soft:  #9FE0FF;
    --cryo-deep:  #2461FF;
    --mint:       #2BE9D4;
    --brass:      #CBA05B;

    --violet:     #8B5CF6;
    --violet-2:   #6D28D9;
    --green:      #17B26A;
    --green-soft: #1FCB7A;
    --brass-deep: #B8791E;

    --ease:       cubic-bezier(.16, .8, .24, 1);
    --ease-out:   cubic-bezier(.22, 1, .36, 1);
    --ease-bounce:cubic-bezier(.34, 1.56, .64, 1);

    --maxw:       1240px;
    --pad:        clamp(20px, 4vw, 48px);
    --section:    clamp(48px, 6vw, 80px);
}

/* ── 06. Typography ────────────────────────────────────────────────── */
.stasis, .stasis button, .stasis input, .stasis textarea, .stasis select {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
}
.stasis .ba-display {
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    letter-spacing: -0.022em;
    font-weight: 700;
    line-height: 1.1;
}
.stasis .ba-green { color: var(--green); font-style: normal; }
.stasis .ba-mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.06em; }
.stasis p { color: var(--ink-soft); line-height: 1.7; }

/* ── 07. Layout primitives ─────────────────────────────────────────── */
.stasis .ba-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--pad);
    position: relative;
    z-index: 1;
}
.stasis .ba-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cryo-deep);
    margin-bottom: 12px;
    font-weight: 600;
}
.stasis .ba-section-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}
.stasis .ba-section-head h2 {
    font-size: clamp(26px, 3vw, 38px);
    margin: 0 0 12px;
    line-height: 1.12;
}
.stasis .ba-section-head p {
    font-size: 14.5px;
}

/* ── 08. Buttons ───────────────────────────────────────────────────── */
.stasis .ba-btn {
    --mx: 50%; --my: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 0;
    overflow: hidden;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
    will-change: transform;
    text-decoration: none;
}
.stasis .ba-btn--xl { padding: 16px 28px; font-size: 14px; }
.stasis .ba-btn--primary {
    background: var(--cryo-deep);
    color: #fff;
    box-shadow: 0 12px 28px -14px rgba(36, 97, 255, 0.5);
}
.stasis .ba-btn--primary:hover { background: var(--cryo); }
.stasis .ba-btn--aqua {
    background: var(--brass);
    color: var(--void);
}
.stasis .ba-btn--aqua:hover { background: #d4ab63; }
.stasis .ba-btn--brass {
    background: var(--cryo-deep);
    color: #fff;
    box-shadow: 0 12px 28px -14px rgba(36, 97, 255, 0.5);
}
.stasis .ba-btn--brass:hover { background: var(--cryo); }
.stasis .ba-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-light);
}
.stasis .ba-btn--ghost:hover {
    border-color: var(--cryo-deep);
    color: var(--cryo-deep);
}
.stasis .ba-btn--add-to-cart {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}
.stasis .ba-btn--subscribe-full {
    width: 100%;
    justify-content: center;
    background: var(--green);
    color: #fff;
    box-shadow: 0 8px 20px -10px rgba(23, 178, 106, 0.4);
}
.stasis .ba-btn--subscribe-full:hover { background: var(--green-soft); }

/* ── 09. Promo bar ─────────────────────────────────────────────────── */
.stasis .ba-promo {
    background: linear-gradient(90deg, #0B1B4E 0%, #1230A0 50%, #0B1B4E 100%);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.02em;
    overflow: hidden;
    height: 34px;
    position: relative;
    z-index: 70;
}
.stasis .ba-promo-track {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    animation: ba-marquee 36s linear infinite;
}
.stasis .ba-promo-item {
    padding-inline: 28px;
    flex-shrink: 0;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stasis .ba-promo-item strong { color: var(--cryo-soft); font-weight: 700; }
@keyframes ba-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 10. Header (white, sticky) ───────────────────────────────────── */
.stasis .ba-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* v2.5.57 — bumped 0.92 → 0.98 so the new client logo's pure
       #fff white blends into the header (the 0.92 left a ~5%
       brightness gap between the logo and the frosted header,
       creating a visible "logo on a white box" effect). 0.98
       is still slightly transparent so the frosted-glass look
       is preserved, but the white is now close enough to #fff
       that the logo reads as part of the header instead of
       sitting on top of it. */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid var(--line-light);
}
.stasis .ba-header-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    /* v2.5.57 — reduced 12px → 10px so the bigger logo (56-72px)
       doesn't push the header to 96px tall. With 10px padding the
       header maxes at ~92px, which still feels generous around
       the 72px logo but doesn't dominate the page. */
    padding: 10px var(--pad);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.stasis .ba-nav-left {
    display: flex; align-items: center; gap: 26px;
    font-size: 13.5px;
}
.stasis .ba-nav-link {
    color: var(--ink);
    font-weight: 500;
    padding: 6px 4px;
    position: relative;
    transition: color .2s ease;
}
.stasis .ba-nav-link:hover { color: var(--green); }
.stasis .ba-nav-link.is-active { color: var(--green); }
.stasis .ba-nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px; bottom: 0;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
}
.stasis .ba-brand {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    color: var(--ink);
}
.stasis .ba-brand-mark {
    width: auto;
    height: 38px;
    display: inline-block;
    vertical-align: middle;
    transition: opacity .2s var(--ease, ease);
}
.stasis .ba-brand-mark:hover { opacity: 0.78; }
/* Note: we DO NOT also have ".stasis .ba-brand img.ba-brand-mark { height: 100% }" —
   that rule (left over from when the brand mark was a <span> wrapping an <img>)
   collapsed the new <img class="ba-brand-mark"> to 0px tall because the parent
   <a class="ba-brand"> has no explicit height. */
.stasis .ba-brand-word {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.stasis .ba-brand-word em { font-style: italic; color: var(--green); }
.stasis .ba-header-actions {
    display: flex; align-items: center; gap: 4px; justify-content: flex-end;
}
.stasis .ba-icon-btn {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: background .2s ease, color .2s ease;
}
.stasis .ba-icon-btn:hover { background: var(--paper-warm); color: var(--violet); }
.stasis .ba-cart-count {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--violet);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}

.stasis .ba-nav-toggle {
    display: none;
    width: 42px; height: 42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    z-index: 5;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.stasis .ba-nav-toggle:hover { background: var(--paper-warm, #F5F1E8); }
.stasis .ba-nav-toggle:focus-visible { outline: 2px solid var(--cryo, #5EC8F2); outline-offset: 2px; }
.stasis .ba-nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s ease;
}
.stasis .ba-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.stasis .ba-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.stasis .ba-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.stasis .ba-nav-mobile {
    display: none;
    flex-direction: column;
    padding: 12px var(--pad) 20px;
    background: #fff;
    border-top: 1px solid var(--line-light);
    gap: 4px;
}
.stasis .ba-nav-mobile .ba-nav-link { color: var(--ink); padding: 10px 12px; border-radius: 8px; }
.stasis .ba-nav-mobile .ba-nav-link.is-active {
    background: rgba(23, 178, 106, 0.08);
    color: var(--green);
}
.stasis .ba-nav-mobile.is-open { display: flex !important; }

/* ── 11. Breadcrumb ───────────────────────────────────────────────── */
.stasis .ba-breadcrumb {
    padding: 18px 0 0;
    font-size: 12px;
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
}
.stasis .ba-breadcrumb a { color: var(--cryo-deep); }
.stasis .ba-breadcrumb a:hover { color: var(--green); }

/* ── 12. Product layout (gallery + info) ──────────────────────────── */
.stasis .ba-product-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 5vw, 64px);
    padding: 20px 0 48px;
    align-items: start;
}
.stasis .ba-product-gallery { position: sticky; top: 110px; }
.stasis .ba-product-thumbs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.stasis .ba-product-thumbs button {
    width: 56px; height: 64px;
    border-radius: 8px;
    border: 1px solid var(--line-light);
    background: #EDF3FB;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
}
.stasis .ba-product-thumbs button:hover { border-color: var(--cryo); }
.stasis .ba-product-thumbs button.is-active {
    border-color: var(--cryo-deep);
    box-shadow: 0 0 0 2px rgba(36, 97, 255, 0.2);
}
.stasis .ba-product-thumbs button img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.stasis .ba-thumb-inner {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.stasis .ba-thumb-vial {
    width: 16px; height: 40px;
    background: linear-gradient(180deg, #5A95FF 0%, #2461FF 50%, #0a3ab0 100%);
    border-radius: 2px 2px 50% 50% / 2px 2px 30% 30%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    position: relative;
}
.stasis .ba-thumb-vial::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 10%; right: 10%;
    bottom: 10%;
    background: rgba(43, 233, 212, 0.6);
    border-radius: 2px;
}
.stasis .ba-thumb-vial--5 { width: 38px; }
.stasis .ba-thumb-vial--10 { width: 56px; }
.stasis .ba-thumb-vial--1 { width: 12px; }

.stasis .ba-product-main {
    position: relative;
    /* v2.1.1 — was #EDF3FB (light blue) which mixed with the
       product image's black background to create the dark
       "bottle in a black void" look the client flagged.
       White background + the multiply blend on the image
       cleanly removes the black backdrop. */
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    padding: 32px;
    text-align: center;
}
.stasis .ba-product-main__promo {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--green);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 100px;
    letter-spacing: 0.08em;
    z-index: 2;
}
.stasis .ba-product-main__img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    /* v2.1.1 — strip the black background that was baked into the
       product/bundle photos. The src PNGs had a black backdrop;
       the images should sit on a clean white/transparent
       background. mix-blend-mode: multiply removes the black
       while preserving the subject; the parent container
       background is forced to white. */
    background: #fff;
    mix-blend-mode: multiply;
    transition: opacity .35s var(--ease);
}
.stasis .ba-product-main__rating {
    margin-top: 14px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px;
}
.stasis .ba-stars { color: var(--brass); letter-spacing: 0.1em; }
.stasis .ba-rating-strong { font-weight: 700; color: var(--ink); }
.stasis .ba-rating-meta { color: var(--ink-soft); }

.stasis .ba-product-info h1 {
    font-size: clamp(24px, 2.6vw, 34px);
    margin: 0 0 14px;
    line-height: 1.2;
    color: var(--ink);
}
.stasis .ba-product-desc {
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 22px;
    color: var(--ink-soft);
}
.stasis .ba-product-features {
    display: flex; flex-direction: column;
    gap: 9px;
    margin-bottom: 26px;
}
.stasis .ba-product-features .ba-check {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px;
    color: var(--ink);
}
.stasis .ba-check__icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.stasis .ba-choose-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-bottom: 12px;
    font-weight: 600;
}

/* ── 13. Bundle selector ──────────────────────────────────────────── */
.stasis .ba-bundle-stack {
    display: flex; flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.stasis .ba-bundle-row {
    position: relative;
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    width: 100%;
}
.stasis .ba-bundle-row:hover {
    border-color: var(--cryo);
}
.stasis .ba-bundle-row.is-selected {
    border-color: var(--green);
    background: rgba(23, 178, 106, 0.04);
    box-shadow: 0 0 0 2px rgba(23, 178, 106, 0.15);
}
.stasis .ba-bundle-row__radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--line-light);
    background: #fff;
    flex-shrink: 0;
    transition: border-color .2s ease;
    position: relative;
}
.stasis .ba-bundle-row.is-selected .ba-bundle-row__radio {
    border-color: var(--green);
    background: var(--green);
}
.stasis .ba-bundle-row.is-selected .ba-bundle-row__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}
.stasis .ba-bundle-row__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    grid-column: 2;
    grid-row: 1;
}
.stasis .ba-bundle-row__save {
    font-size: 11.5px;
    color: var(--ink-soft);
    grid-column: 2;
    grid-row: 2;
}
.stasis .ba-bundle-row__price {
    text-align: right;
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.stasis .ba-was {
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: line-through;
}
.stasis .ba-now {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stasis .ba-bundle-tag {
    position: absolute;
    top: -8px; right: 14px;
    background: var(--green);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.08em;
    z-index: 1;
}

/* ── 14. Subscribe block ───────────────────────────────────────────── */
.stasis .ba-subscribe-block {
    background: rgba(43, 233, 212, 0.06);
    border: 1px solid rgba(43, 233, 212, 0.20);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.stasis .ba-subscribe-block__title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 6px;
}
.stasis .ba-subscribe-block__icon {
    color: var(--brass-deep);
    display: inline-flex;
}
.stasis .ba-save-pill {
    margin-left: auto;
    background: var(--brass);
    color: var(--void);
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.06em;
}
/* v2.4.0 — "Coming soon" pill. Sits next to the save pill in the
   subscribe block. The subscribe UI works without WC Subscriptions
   (shows a friendly toast), but the real recurring billing needs
   the plugin. The pill auto-disappears when WC_Subscriptions is
   detected. */
.stasis .ba-coming-soon-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(94, 200, 242, 0.14);
    color: var(--cryo-deep, #2461FF);
    border: 1px solid rgba(94, 200, 242, 0.32);
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 6px;
    position: relative;
}
.stasis .ba-coming-soon-pill::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cryo, #5EC8F2);
    box-shadow: 0 0 0 3px rgba(94, 200, 242, 0.18);
    animation: ba-coming-soon-pulse 2s ease-in-out infinite;
}
@keyframes ba-coming-soon-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
    .stasis .ba-coming-soon-pill::before { animation: none; }
}
.stasis .ba-subscribe-desc {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.stasis .ba-subscribe-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--ink);
}
.stasis .ba-subscribe-list li::before {
    content: "✓ ";
    color: var(--green);
    font-weight: 800;
}

/* v2.2.7 — Subscription frequency selector.
   Three radio cards: every month / 2 months / 3 months.
   Each card has a label, a hint, and a savings pill.
   Pure CSS — no JS needed for the visual state. The JS reads the
   selected radio's value + per-vial savings % to update the
   price text on the subscribe button. */
.stasis .ba-sub-freq {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin: 12px 0 14px;
}
.stasis .ba-sub-freq__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 12px 10px;
    background: #fff;
    border: 1.5px solid var(--line-light, #E5EAF1);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.stasis .ba-sub-freq__opt:hover {
    border-color: var(--cryo, #5EC8F2);
    transform: translateY(-1px);
}
.stasis .ba-sub-freq__opt.is-selected {
    border-color: var(--cryo-deep, #2461FF);
    background: linear-gradient(135deg, rgba(94, 200, 242, 0.06), rgba(36, 97, 255, 0.04));
    box-shadow: 0 4px 14px -6px rgba(36, 97, 255, 0.25);
}
.stasis .ba-sub-freq__opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.stasis .ba-sub-freq__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink, #0B1524);
    line-height: 1.3;
}
.stasis .ba-sub-freq__hint {
    font-size: 10.5px;
    color: var(--graphite, #6B7B8E);
    line-height: 1.3;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.02em;
}
.stasis .ba-sub-freq__save {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--green, #17B26A);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 100px;
    letter-spacing: 0.04em;
}
.stasis .ba-sub-fineprint {
    font-size: 11px;
    color: var(--graphite, #6B7B8E);
    margin: 6px 0 0;
    line-height: 1.4;
    text-align: center;
}
.stasis .ba-btn--subscribe-full {
    width: 100%;
    height: 52px;
    font-size: 14px;
    margin-top: 6px;
}
.stasis .ba-btn--aqua {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 18px -6px rgba(6, 182, 212, 0.45);
}
.stasis .ba-btn--aqua:hover {
    background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .stasis .ba-sub-freq { grid-template-columns: 1fr; gap: 6px; }
    .stasis .ba-sub-freq__opt { padding: 10px 12px 8px; }
    .stasis .ba-sub-freq__label { font-size: 12px; }
}

/* ── 15. Add to cart + sticky buy ──────────────────────────────────── */
.stasis .ba-restock {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--ink);
}
.stasis .ba-restock__live {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--green);
    font-weight: 700;
}
.stasis .ba-restock__dot {
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.7);
    animation: ba-pulse-dot 2s infinite;
}
@keyframes ba-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(23, 178, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(23, 178, 106, 0); }
}
.stasis .ba-restock__meta { color: var(--ink-soft); }

.stasis .ba-lab-cert {
    display: flex; gap: 12px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line-light);
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.stasis .ba-lab-cert strong {
    color: var(--ink);
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}
.stasis .ba-lab-cert__icon {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── 16. Trust split (lab scene + copy) ───────────────────────────── */
.stasis .ba-section { padding: var(--section) 0; }
.stasis .ba-section--mist { background: var(--paper-2); }
.stasis .ba-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.stasis .ba-split--reverse { direction: rtl; }
.stasis .ba-split--reverse > * { direction: ltr; }
.stasis .ba-split__copy h2 {
    font-size: clamp(26px, 3vw, 38px);
    margin: 0 0 14px;
    line-height: 1.12;
}
.stasis .ba-split__copy p { font-size: 14.5px; line-height: 1.7; margin-bottom: 18px; max-width: 56ch; }
.stasis .ba-mini-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 22px;
}
.stasis .ba-mini-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 100px;
    padding: 5px 12px 5px 8px;
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
}
.stasis .ba-mini-badge::before {
    content: "✓";
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

/* Lab scene (rebuilt in HTML + CSS — no external SVG). */
.stasis .ba-lab-scene {
    background: #EDF3FB;
    border: 1px solid var(--line-light);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 50px -28px rgba(11, 21, 36, 0.18);
    position: relative;
    overflow: hidden;
}
.stasis .ba-lab-shelf {
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
}
.stasis .ba-lab-shelf__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.stasis .ba-lab-vials {
    display: flex; gap: 8px;
}
.stasis .ba-lab-vial {
    width: 22px; height: 56px;
    background: linear-gradient(180deg, #5A95FF 0%, #2461FF 50%, #0a3ab0 100%);
    border-radius: 2px 2px 6px 6px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.stasis .ba-lab-vial__cap {
    position: absolute;
    top: -4px; left: 0; right: 0;
    height: 8px;
    background: #2461FF;
    border-radius: 1px;
}
.stasis .ba-lab-vial__body {
    position: absolute;
    inset: 30% 8% 8% 8%;
    background: rgba(43, 233, 212, 0.6);
    border-radius: 2px;
}
.stasis .ba-lab-box {
    position: absolute;
    top: 14px; right: 16px;
    width: 100px;
    background: #fff;
    border: 1px solid var(--cryo-deep);
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    font-size: 8px;
}
.stasis .ba-lab-box__band {
    background: var(--cryo-deep);
    color: #fff;
    padding: 2px;
    font-weight: 800;
    font-size: 8px;
    margin: -4px -4px 4px -4px;
    border-radius: 3px 3px 0 0;
}
.stasis .ba-lab-box__line { color: var(--ink); font-weight: 700; }
.stasis .ba-lab-box__small { color: var(--ink-soft); font-size: 7px; }
.stasis .ba-lab-box__check { color: var(--green); font-weight: 700; font-size: 8px; }
.stasis .ba-lab-box--incoming { right: 90px; }
.stasis .ba-lab-box--incoming .ba-lab-box__band { background: var(--green); }
.stasis .ba-lab-box--qa { right: 175px; }
.stasis .ba-lab-microscope {
    position: absolute;
    bottom: 14px; right: 16px;
    width: 56px;
    text-align: center;
}
.stasis .ba-lab-microscope__lens {
    width: 40px; height: 40px;
    border: 2px solid var(--cryo-deep);
    border-radius: 50%;
    margin: 0 auto 4px;
    background: radial-gradient(circle, rgba(43, 233, 212, 0.4) 0%, transparent 60%);
    position: relative;
}
.stasis .ba-lab-microscope__lens::before {
    content: "";
    position: absolute;
    inset: 30%;
    background: var(--cryo-deep);
    border-radius: 50%;
}
.stasis .ba-lab-microscope__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 7px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}
.stasis .ba-lab-monitor {
    position: absolute;
    bottom: 14px; right: 90px;
    width: 70px;
}
.stasis .ba-lab-monitor__screen {
    background: #0E1830;
    color: var(--mint);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 6px 0;
    border-radius: 3px;
}
.stasis .ba-lab-monitor__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 7px;
    color: var(--ink-soft);
    text-align: center;
    margin-top: 2px;
}
.stasis .ba-lab-tech {
    position: absolute;
    bottom: 14px; right: 200px;
    width: 36px;
    text-align: center;
}
.stasis .ba-lab-tech__head {
    width: 18px; height: 18px;
    background: var(--cryo-deep);
    border-radius: 50%;
    margin: 0 auto 4px;
}
.stasis .ba-lab-tech__body {
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 8px 8px 4px 4px;
    margin: 0 auto;
}
.stasis .ba-lab-tech__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 7px;
    color: var(--ink-soft);
    margin-top: 4px;
}
.stasis .ba-lab-spec {
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    color: var(--ink-soft);
    position: relative;
}
.stasis .ba-lab-spec__band {
    background: var(--cryo-deep);
    color: #fff;
    text-align: center;
    padding: 4px;
    font-weight: 800;
    font-size: 9px;
    margin: -12px -14px 8px -14px;
    border-radius: 9px 9px 0 0;
}
.stasis .ba-lab-spec__row {
    display: flex; justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid var(--line-light);
}
.stasis .ba-lab-spec__row:last-of-type { border-bottom: 0; }
.stasis .ba-lab-spec__row--ok span:last-child { color: var(--green); font-weight: 700; }
.stasis .ba-lab-spec__row--ok:first-of-type { color: var(--ink); }
.stasis .ba-lab-spec__seal {
    position: absolute;
    top: 30px; right: 12px;
    width: 24px; height: 24px;
    border: 1.5px solid var(--green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--green);
    font-size: 7px;
    font-weight: 800;
}

/* ── 17. FAQ ───────────────────────────────────────────────────────── */
.stasis .ba-faq {
    max-width: 820px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 0;
}
.stasis .ba-faq-item {
    border-bottom: 1px solid var(--line-light);
}
.stasis .ba-faq-item:first-child { border-top: 1px solid var(--line-light); }
.stasis .ba-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 18px 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    display: flex; align-items: center; gap: 16px;
    position: relative;
    line-height: 1.4;
}
.stasis .ba-faq-q::-webkit-details-marker { display: none; }
.stasis .ba-faq-q::after {
    content: "+";
    margin-left: auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cryo-deep);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    flex-shrink: 0;
    transition: transform .25s var(--ease), background .25s var(--ease);
}
.stasis .ba-faq-item[open] .ba-faq-q::after {
    content: "−";
    background: var(--violet);
    transform: rotate(180deg);
}
.stasis .ba-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--ease);
}
.stasis .ba-faq-item[open] .ba-faq-a {
    grid-template-rows: 1fr;
}
.stasis .ba-faq-a-inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 4px 18px;
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.7;
}
.stasis .ba-faq-a-inner p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .stasis .ba-faq-a { transition: none; }
}

/* ── 18. Tagline marquee ──────────────────────────────────────────── */
.stasis .ba-tagline-marquee {
    background: #fff;
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
    overflow: hidden;
    height: 64px;
    display: flex; align-items: center;
}
.stasis .ba-tagline-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ba-marquee 32s linear infinite;
    gap: 24px;
    padding-inline: 24px;
}
.stasis .ba-tagline-item {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(11, 21, 36, 0.55);
    flex-shrink: 0;
}
.stasis .ba-tagline-sep {
    color: var(--cryo-deep);
    opacity: 0.45;
    font-size: 11px;
    flex-shrink: 0;
}

/* ── 19. Footer ────────────────────────────────────────────────────── */
.stasis .ba-footer {
    background: #0B1B4E;
    color: #fff;
    padding: 48px 0 22px;
    font-size: 13px;
}
.stasis .ba-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
.stasis .ba-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.stasis .ba-footer-brand-row { display: flex; align-items: center; gap: 10px; }
.stasis .ba-footer-brand .ba-brand-mark { color: #fff; width: auto; height: 50px; }
.stasis .ba-footer-brand .ba-brand-word { font-size: 18px; color: #fff; }
.stasis .ba-footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 320px;
}
.stasis .ba-footer h5 {
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.stasis .ba-footer ul { display: flex; flex-direction: column; gap: 7px; }
.stasis .ba-footer a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color .2s ease;
}
.stasis .ba-footer a:hover { color: #fff; }
.stasis .ba-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.stasis .ba-footer-legal { display: flex; gap: 20px; }
.stasis .ba-footer-legal a { color: rgba(255,255,255,0.6); }
.stasis .ba-footer-legal a:hover { color: #fff; }

/* ── 20. Toast ─────────────────────────────────────────────────────── */
.stasis .ba-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--green);
    color: #fff;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 14px 40px -14px rgba(23, 178, 106, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    z-index: 200;
    white-space: nowrap;
}
.stasis .ba-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── 21. Reveal / motion ──────────────────────────────────────────── */
.stasis .reveal, .stasis .reveal-left, .stasis .reveal-right {
    opacity: 0;
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.stasis .reveal { transform: translateY(22px); filter: blur(6px); }
.stasis .reveal-left { transform: translateX(-30px); }
.stasis .reveal-right { transform: translateX(30px); }
.stasis .is-visible.reveal,
.stasis .is-visible.reveal-left,
.stasis .is-visible.reveal-right,
.stasis .reveal.is-visible,
.stasis .reveal-left.is-visible,
.stasis .reveal-right.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
.stasis .reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.stasis .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.stasis .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.stasis .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.stasis .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.stasis .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.22s; }

/* ── 22. Scroll progress ──────────────────────────────────────────── */
.stasis .ba-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 90;
    background: transparent; pointer-events: none;
}
.stasis .ba-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--cryo-deep), var(--cryo) 60%, var(--cryo-soft));
    box-shadow: 0 0 10px 1px rgba(94, 200, 242, 0.6);
    transition: width .08s linear;
}

/* ── 23. Responsive ───────────────────────────────────────────────── */
@media (max-width: 920px) {
    .stasis .ba-product-layout { grid-template-columns: 1fr; gap: 32px; }
    .stasis .ba-product-gallery { position: relative; top: 0; }
    .stasis .ba-split { grid-template-columns: 1fr; gap: 32px; }
    .stasis .ba-split--reverse { direction: ltr; }
    .stasis .ba-subscribe-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .stasis .ba-header-inner { grid-template-columns: 1fr auto 1fr; }
    .stasis .ba-nav-left { display: none; }
    .stasis .ba-nav-toggle { display: inline-flex; justify-self: end; }
    .stasis .ba-brand { justify-self: start; }
    .stasis .ba-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .stasis .ba-footer-brand { grid-column: auto; }
    .stasis .ba-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .stasis .ba-product-main { padding: 18px; }
    .stasis .ba-product-main__img { max-height: 360px; }
    .stasis .ba-bundle-row { padding: 12px 14px; }
    .stasis .ba-now { font-size: 19px; }
}

/* ── 24. Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stasis *, .stasis *::before, .stasis *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .stasis .reveal, .stasis .reveal-left, .stasis .reveal-right,
    .stasis .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   v1.1 — NEW COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* ── 25. EN/ES language toggle (header) ────────────────────────────── */
.stasis .ba-lang-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--paper-soft, #F5F7FB);
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 100px;
    padding: 3px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    height: 30px;
}
.stasis .ba-lang-toggle__opt {
    background: transparent;
    border: 0;
    padding: 0 10px;
    height: 24px;
    border-radius: 100px;
    color: var(--ink-soft, #4A5568);
    cursor: pointer;
    font: inherit;
    transition: background .2s ease, color .2s ease;
    line-height: 1;
}
.stasis .ba-lang-toggle__opt:hover { color: var(--ink, #0B1220); }
.stasis .ba-lang-toggle__opt.is-active {
    background: var(--ink, #0B1220);
    color: #fff;
}
@media (max-width: 760px) {
    .stasis .ba-lang-toggle { margin-right: 0; }
}

/* ── 26. Savings callout (meaningful bundle animation) ─────────────── */
.stasis .ba-savings-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(23, 178, 106, 0.08) 0%, rgba(36, 97, 255, 0.05) 100%);
    border: 1px solid rgba(23, 178, 106, 0.25);
    color: var(--ink, #0B1220);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .25s ease, background .25s ease;
    transform: translateY(0);
}
.stasis .ba-savings-callout.is-pop {
    animation: ba-savings-pulse .6s cubic-bezier(.34, 1.56, .64, 1);
}
.stasis .ba-savings-callout.is-savings { border-color: rgba(23, 178, 106, 0.5); }
.stasis .ba-savings-callout.is-best { background: linear-gradient(135deg, rgba(23, 178, 106, 0.18) 0%, rgba(36, 97, 255, 0.10) 100%); border-color: var(--green, #17B26A); }
.stasis .ba-savings-callout.is-popular { background: linear-gradient(135deg, rgba(36, 97, 255, 0.10) 0%, rgba(23, 178, 106, 0.08) 100%); border-color: rgba(36, 97, 255, 0.45); }
@keyframes ba-savings-pulse {
    0%   { transform: translateY(0)   scale(1);    box-shadow: 0 0 0 0   rgba(23,178,106,0.0); }
    40%  { transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 24px 0 rgba(23,178,106,0.25); }
    100% { transform: translateY(0)   scale(1);    box-shadow: 0 0 0 0   rgba(23,178,106,0.0); }
}
.stasis .ba-savings-callout__icon {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--green, #17B26A);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(23, 178, 106, 0.35);
}
.stasis .ba-savings-callout__body { flex: 1; min-width: 0; }
.stasis .ba-savings-callout__line1 {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: 14px;
}
.stasis .ba-savings-callout__amount {
    font-weight: 800;
    color: var(--green, #17B26A);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.stasis .ba-savings-callout__verb {
    color: var(--ink-soft, #4A5568);
}
.stasis .ba-savings-callout__line2 {
    font-size: 12.5px;
    color: var(--ink-soft, #4A5568);
    margin-top: 2px;
}

/* ── 27. COA card (clickable, opens lightbox) ──────────────────────── */
.stasis .ba-coa-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
    background: linear-gradient(135deg, #F5F9FF 0%, #EDF3FB 100%) !important;
}
.stasis .ba-coa-card:hover {
    border-color: var(--green, #17B26A) !important;
    background: linear-gradient(135deg, #ECFDF3 0%, #F5F9FF 100%) !important;
    transform: translateY(-1px);
}
.stasis .ba-coa-card:focus-visible {
    outline: 2px solid var(--green, #17B26A);
    outline-offset: 2px;
}
.stasis .ba-coa-card__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.stasis .ba-coa-card__body strong {
    font-size: 14px;
    color: var(--ink, #0B1220);
}
.stasis .ba-coa-card__meta {
    font-size: 12px;
    color: var(--ink-soft, #4A5568);
    line-height: 1.45;
}
.stasis .ba-coa-card__chev {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--green, #17B26A);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .2s ease;
}
.stasis .ba-coa-card:hover .ba-coa-card__chev { transform: translateX(2px); }

/* ── 28. COA lightbox (full-screen modal) ─────────────────────────── */
.stasis .ba-coa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.stasis .ba-coa-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.stasis .ba-coa-lightbox__backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 18, 36, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.stasis .ba-coa-lightbox__panel {
    position: relative;
    background: #fff;
    border-radius: 18px;
    max-width: min(900px, 100%);
    max-height: 92vh;
    overflow: auto;
    padding: 28px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
    transform: scale(.94);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.stasis .ba-coa-lightbox.is-open .ba-coa-lightbox__panel {
    transform: scale(1);
}
.stasis .ba-coa-lightbox__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border: 0; background: rgba(8, 18, 36, 0.05);
    border-radius: 50%;
    color: var(--ink, #0B1220);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.stasis .ba-coa-lightbox__close:hover { background: rgba(8, 18, 36, 0.12); }
.stasis .ba-coa-lightbox__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #0B1220);
    margin: 0 44px 6px 0;
}
.stasis .ba-coa-lightbox__sub {
    font-size: 13px;
    color: var(--ink-soft, #4A5568);
    margin: 0 0 18px;
}
.stasis .ba-coa-lightbox__img-wrap {
    background: #F5F7FB;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}
.stasis .ba-coa-lightbox__img {
    max-width: 100%;
    max-height: 64vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.stasis .ba-coa-lightbox__actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 18px;
    justify-content: center;
}
.stasis .ba-coa-lightbox__actions .ba-btn--ghost {
    background: transparent;
    color: var(--ink, #0B1220);
    border: 1px solid var(--line-light, #E5EAF1);
}
.stasis .ba-coa-lightbox__actions .ba-btn--ghost:hover {
    background: var(--paper-soft, #F5F7FB);
}

/* ── 29. Floating Chatbot widget (AquaBot) ─────────────────────────── */
.ba-chatbot {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.ba-chatbot__bubble {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(36, 97, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
    padding: 0;
    overflow: visible;
}
.ba-chatbot__bubble:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 38px rgba(36, 97, 255, 0.55);
}
.ba-chatbot__avatar {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.ba-chatbot__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(79, 139, 255, 0.6);
    animation: ba-chatbot-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes ba-chatbot-pulse {
    0%   { transform: scale(.9);  opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.ba-chatbot__panel {
    position: absolute;
    right: 0; bottom: 76px;
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 110px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(12px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
}
.ba-chatbot__panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.ba-chatbot__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    color: #fff;
}
.ba-chatbot__head-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.4);
}
.ba-chatbot__name { font-weight: 700; font-size: 14px; }
.ba-chatbot__status {
    font-size: 11px;
    opacity: .9;
    display: flex; align-items: center; gap: 5px;
}
.ba-chatbot__status-dot {
    width: 7px; height: 7px;
    background: #5AE3A2;
    border-radius: 50%;
    box-shadow: 0 0 6px #5AE3A2;
}
.ba-chatbot__close {
    margin-left: auto;
    width: 30px; height: 30px;
    border: 0; background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.ba-chatbot__close:hover { background: rgba(255,255,255,0.24); }
.ba-chatbot__body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 14px;
    background: #F7F9FD;
    display: flex; flex-direction: column; gap: 8px;
}
.ba-chatbot__msg {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ba-chatbot__msg--bot {
    background: #fff;
    color: var(--ink, #0B1220);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.ba-chatbot__msg--user {
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}
.ba-chatbot__msg a { color: var(--cryo-deep, #1E40AF); text-decoration: underline; }
.ba-chatbot__human-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--green, #17B26A);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
    margin-top: -2px;
}
.ba-chatbot__human-btn:hover { background: #129456; transform: translateY(-1px); }
.ba-chatbot__chips {
    padding: 8px 12px 0;
    background: #F7F9FD;
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 96px; overflow-y: auto;
}
.ba-chatbot__chip {
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 100px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cryo-deep, #1E40AF);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    line-height: 1.2;
}
.ba-chatbot__chip:hover {
    background: var(--cryo, #2461FF);
    border-color: var(--cryo, #2461FF);
    color: #fff;
}
.ba-chatbot__form {
    display: flex; gap: 6px;
    padding: 10px 12px 12px;
    background: #F7F9FD;
    border-top: 1px solid var(--line-light, #E5EAF1);
}
.ba-chatbot__input {
    flex: 1; min-width: 0;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink, #0B1220);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ba-chatbot__input:focus {
    border-color: var(--cryo, #2461FF);
    box-shadow: 0 0 0 3px rgba(36, 97, 255, 0.15);
}
.ba-chatbot__send {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border: 0;
    background: var(--green, #17B26A);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, transform .15s ease;
}
.ba-chatbot__send:hover { background: #129456; transform: translateY(-1px); }
@media (max-width: 480px) {
    .ba-chatbot { right: 14px; bottom: 14px; }
    .ba-chatbot__panel {
        right: -6px; bottom: 70px;
        width: calc(100vw - 28px);
    }
}

/* v1.1 — Reduced-motion: stop the bubble pulse + chat panel bounce */
@media (prefers-reduced-motion: reduce) {
    .ba-chatbot__pulse { animation: none !important; }
    .ba-chatbot__panel { transition: opacity .15s ease; }
    .stasis-products .ba-savings-callout.is-pop { animation: none !important; }
}

/* v1.2 — Toast variants + add-to-cart loading state */
.stasis-products .ba-toast {
    background: var(--ink, #0B1220);
    color: #fff;
    border-radius: 100px;
    padding: 12px 22px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.stasis-products .ba-toast.is-success {
    background: var(--green, #17B26A);
}
.stasis-products .ba-toast.is-error {
    background: #DC2626;
}
.stasis-products .ba-btn--add-to-cart.is-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.stasis-products .ba-btn--add-to-cart.is-loading::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    width: 14px; height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ba-spin 0.7s linear infinite;
}
@keyframes ba-spin { to { transform: rotate(360deg); } }


/* -- 30. About page ------------------------------------------------ */
.stasis-about .ba-about-hero {
    position: relative;
    height: 70vh;
    min-height: 480px;
    max-height: 720px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    margin-top: 0;
    padding: 80px 0 56px;
}
.stasis-about .ba-about-hero__bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.stasis-about .ba-about-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}
.stasis-about .ba-about-hero__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 18, 36, 0.45) 0%, rgba(8, 18, 36, 0.20) 40%, rgba(8, 18, 36, 0.85) 100%),
        linear-gradient(90deg, rgba(8, 18, 36, 0.55) 0%, rgba(8, 18, 36, 0.20) 60%);
    z-index: 1;
}
.stasis-about .ba-about-hero__inner {
    position: relative; z-index: 2;
    width: 100%;
    max-width: var(--wrap, 1280px);
    margin: 0 auto;
    padding: 0 24px;
}
.stasis-about .ba-eyebrow--on-photo {
    color: #CFE0FF;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 100px;
    display: inline-block;
    font-size: 11px;
    margin-bottom: 16px;
}
.stasis-about .ba-about-hero__title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    max-width: 880px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.stasis-about .ba-about-hero__title .ba-green { color: #5AE3A2; font-style: italic; }
.stasis-about .ba-about-hero__lede {
    max-width: 640px;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 28px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.stasis-about .ba-about-hero__ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.stasis-about .ba-btn--ghost-on-photo {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease;
}
.stasis-about .ba-btn--ghost-on-photo:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
}
.stasis-about .ba-about-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(8, 18, 36, 0.12);
}
.stasis-about .ba-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 32px;
}
.stasis-about .ba-quality-card {
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 14px;
    padding: 22px 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stasis-about .ba-quality-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(8, 18, 36, 0.08);
    border-color: var(--cryo, #2461FF);
}
.stasis-about .ba-quality-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4F8BFF 0%, #2461FF 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.stasis-about .ba-quality-card h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink, #0B1220);
}
.stasis-about .ba-quality-card p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft, #4A5568);
    margin: 0;
}
.stasis-about .ba-facility-cta {
    background: linear-gradient(135deg, #0B1220 0%, #1a2440 100%);
    color: #fff;
    padding: 64px 0;
    margin-top: 0;
}
.stasis-about .ba-facility-cta__inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
    align-items: center;
}
.stasis-about .ba-facility-cta__inner .ba-eyebrow {
    color: #CFE0FF;
}
.stasis-about .ba-facility-cta__inner .ba-display {
    color: #fff;
}
.stasis-about .ba-facility-cta__inner p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    max-width: 520px;
}
.stasis-about .ba-facility-cta__ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 22px;
}
.stasis-about .ba-facility-cta__media img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
}
@media (max-width: 920px) {
    .stasis-about .ba-quality-grid { grid-template-columns: repeat(2, 1fr); }
    .stasis-about .ba-facility-cta__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .stasis-about .ba-quality-grid { grid-template-columns: 1fr; }
    .stasis-about .ba-about-hero { min-height: 540px; height: 75vh; }
}

/* -- 31. Contact page ---------------------------------------------- */
.stasis-contact .ba-contact-hero {
    padding: 80px 0 40px;
    background: linear-gradient(180deg, #F5F9FF 0%, #ffffff 100%);
}
.stasis-contact .ba-section--tight { padding: 40px 0 80px; }
.stasis-contact .ba-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    align-items: start;
}
.stasis-contact .ba-contact-form-card,
.stasis-contact .ba-contact-info__card {
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 28px rgba(8, 18, 36, 0.05);
}
.stasis-contact .ba-contact-form-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink, #0B1220);
    margin: 0 0 6px;
}
.stasis-contact .ba-contact-form-card__sub {
    color: var(--ink-soft, #4A5568);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 22px;
}
.stasis-contact .ba-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.stasis-contact .ba-field { display: flex; flex-direction: column; gap: 6px; }
.stasis-contact .ba-field:nth-child(5), .stasis-contact .ba-field:last-child { grid-column: 1 / -1; }
.stasis-contact .ba-field > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stasis-contact .ba-field input,
.stasis-contact .ba-field select,
.stasis-contact .ba-field textarea {
    background: #F7F9FD;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--ink, #0B1220);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.stasis-contact .ba-field input:focus,
.stasis-contact .ba-field select:focus,
.stasis-contact .ba-field textarea:focus {
    border-color: var(--cryo, #2461FF);
    box-shadow: 0 0 0 3px rgba(36, 97, 255, 0.15);
    background: #fff;
}
.stasis-contact .ba-field textarea { resize: vertical; min-height: 120px; }
.stasis-contact .ba-contact-form .ba-btn {
    grid-column: 1 / -1;
    justify-content: center;
}
.stasis-contact .ba-contact-info {
    display: flex; flex-direction: column; gap: 18px;
}
.stasis-contact .ba-contact-info__email {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--cryo-deep, #1E40AF);
    margin-top: 10px;
    text-decoration: none;
    word-break: break-all;
    transition: color .2s ease;
}
.stasis-contact .ba-contact-info__email:hover { color: var(--green, #17B26A); }
.stasis-contact .ba-contact-info__small {
    font-size: 12.5px;
    color: var(--ink-soft, #4A5568);
    margin-top: 6px;
    line-height: 1.5;
}
.stasis-contact .ba-contact-info__rule {
    border: 0;
    border-top: 1px solid var(--line-light, #E5EAF1);
    margin: 16px 0;
}
.stasis-contact .ba-contact-info__quick {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.stasis-contact .ba-contact-info__quick a {
    color: var(--ink, #0B1220);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    display: inline-block;
}
.stasis-contact .ba-contact-info__quick a:hover {
    color: var(--green, #17B26A);
    border-color: var(--green, #17B26A);
}
.stasis-contact .ba-contact-info__card .ba-faq-item {
    border-color: var(--line-light, #E5EAF1);
}
@media (max-width: 920px) {
    .stasis-contact .ba-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .stasis-contact .ba-contact-form { grid-template-columns: 1fr; }
    .stasis-contact .ba-contact-form-card, .stasis-contact .ba-contact-info__card { padding: 22px; }
}

/* v1.3 — Header cart pill (icon + count badge + live subtotal) */
/* The cart trigger lives in the header itself now (.ba-icon-btn--cart,
   see template/*.php) — no more floating button injected over the
   page content. This block turns that one icon into a small pill so
   it reads as a real "Cart" control, with a green count badge and a
   subtotal that appears once something is in the cart. */
.stasis .ba-icon-btn--cart {
    width: auto;
    min-width: 38px;
    padding: 0 10px 0 9px;
    border-radius: 100px;
    gap: 6px;
    background: var(--paper-warm, #F5F1EA);
}
.stasis .ba-icon-btn--cart:hover { background: var(--violet, #6C5CE7); color: #fff; }
.stasis .ba-cart-count {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--green, #17B26A);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.stasis .ba-cart-count.is-pulse { animation: ba-count-pulse .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes ba-count-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.stasis .ba-cart-amount {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink, #0B1220);
    line-height: 1;
    white-space: nowrap;
}
.stasis .ba-icon-btn--cart:hover .ba-cart-amount { color: #fff; }
.stasis .ba-cart-amount:empty { display: none; }
@media (max-width: 640px) {
    .stasis .ba-cart-amount { display: none; } /* keep the mobile header tight */
}

/* Mini-cart side panel */
.ba-minicart {
    position: fixed;
    inset: 0;
    z-index: 9500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.ba-minicart.is-open {
    opacity: 1;
    pointer-events: auto;
}
.ba-minicart__backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 18, 36, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ba-minicart__panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(420px, 100vw);
    background: #fff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.ba-minicart.is-open .ba-minicart__panel { transform: translateX(0); }
.ba-minicart__head {
    display: flex; align-items: center; gap: 8px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-light, #E5EAF1);
}
.ba-minicart__head h3 {
    margin: 0; font-size: 17px; font-weight: 700; color: var(--ink, #0B1220);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -0.01em;
    flex: 1;
}
.ba-minicart__close {
    width: 32px; height: 32px;
    border: 0; background: transparent;
    color: var(--ink-soft, #4A5568);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.ba-minicart__close:hover { background: var(--paper-soft, #F5F7FB); color: var(--ink, #0B1220); }
.ba-minicart__body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 12px 20px 20px;
    background: #FAFBFD;
}
.ba-minicart__loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-soft, #4A5568);
    font-size: 14px;
}
.ba-minicart__spinner {
    width: 28px; height: 28px;
    margin: 0 auto 12px;
    border: 3px solid var(--line-light, #E5EAF1);
    border-top-color: var(--green, #17B26A);
    border-radius: 50%;
    animation: ba-spin 0.7s linear infinite;
}
.ba-minicart__empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--ink-soft, #4A5568);
}
.ba-minicart__empty svg { color: var(--line-light, #E5EAF1); }
.ba-minicart__empty h4 {
    font-size: 16px; color: var(--ink, #0B1220);
    margin: 14px 0 6px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.ba-minicart__empty p { margin: 0 0 18px; font-size: 13.5px; }
.ba-minicart__list { list-style: none; padding: 0; margin: 0; }
.ba-minicart__item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line-light, #E5EAF1);
    width: 100% !important;
    box-sizing: border-box !important;
}
.ba-minicart__item:last-child { border-bottom: 0; }
.ba-minicart__thumb {
    width: 84px !important; min-width: 84px !important; height: 84px !important;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    overflow: hidden;
    flex: 0 0 84px;
    display: flex !important; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    visibility: visible !important;
    opacity: 1 !important;
}
.ba-minicart__thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ba-minicart__thumb-icon { color: #B0B7C3; }
.ba-minicart__meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ba-minicart__name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ba-minicart__meta { flex: 1; min-width: 0; }
.ba-minicart__name a {
    color: var(--ink, #0B1220) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ba-minicart__name a:hover { color: var(--green, #17B26A); }
.ba-minicart__badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--paper-warm, #F5F1EA);
    color: var(--ink-soft, #4A5568);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ba-minicart__price {
    color: var(--ink-soft, #4A5568);
    font-size: 12.5px;
    margin-top: 4px;
}
.ba-minicart__stepper {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--line-light, #E5EAF1);
    border-radius: 100px;
    overflow: hidden;
    margin-top: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
}
.ba-minicart__step {
    width: 34px; height: 34px;
    border: 0; background: transparent;
    color: var(--ink, #0B1220);
    font-size: 18px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ba-minicart__step:hover { background: var(--paper-soft, #F5F7FB); }
.ba-minicart__step:active { background: var(--line-light, #E5EAF1); }
.ba-minicart__qty-value {
    min-width: 32px; text-align: center;
    font-size: 14px; font-weight: 800;
    color: var(--ink, #0B1220);
    border-left: 1px solid var(--line-light, #E5EAF1);
    border-right: 1px solid var(--line-light, #E5EAF1);
    padding: 4px 0;
    line-height: 1;
}
.ba-minicart__subtotal {
    color: var(--ink, #0B1220);
    font-weight: 700;
    font-size: 14px;
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    align-self: flex-start;
    margin-top: 2px;
}
.ba-minicart__line-total { white-space: nowrap; }
/* v2.5.50 — Make the mini-cart "remove" button a clear labeled
   pill (not just a tiny ×). Same shape as the cart-screen pill
   so the pattern is consistent across the cart + mini-cart. */
.ba-minicart__remove {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #b3261e !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 5px 10px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap !important;
}
.ba-minicart__remove::before {
    content: "🗑" !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
.ba-minicart__remove:hover,
.ba-minicart__remove:focus-visible { color: #fff !important; background: #b3261e !important; border-color: #b3261e !important; }
.ba-minicart__remove:focus-visible { outline: 2px solid #b3261e !important; outline-offset: 2px; }

/* v2.5.50 — Shipping protection upsell removed (admin-only product,
   caused an error on toggle if the product hadn't been created yet). */

.ba-minicart__coupon {
    display: flex; gap: 6px;
    margin: 10px 0 0;
}
.ba-minicart__coupon-input {
    flex: 1; min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: var(--ink, #0B1220);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ba-minicart__coupon-input:focus {
    outline: none;
    border-color: var(--green, #17B26A);
    box-shadow: 0 0 0 3px rgba(23, 178, 106, 0.18);
}
.ba-minicart__coupon-btn {
    height: 36px;
    padding: 0 14px;
    border: 0;
    background: var(--ink, #0B1220);
    color: #fff;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background .15s ease;
}
.ba-minicart__coupon-btn:hover { background: #1a253b; }
.ba-minicart__coupon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ba-minicart__coupons {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 8px 0 0;
}

/* v2.5.53 — Inline coupon-success card. Replaces the input
   row once a coupon is applied, so the user has a persistent
   visual confirmation of which code is on the order + the
   discount amount. The "Remove" button restores the input. */
.ba-minicart__coupon-success {
    display: flex; align-items: center; gap: 10px;
    background: rgba(23, 178, 106, 0.10);
    border: 1px solid rgba(23, 178, 106, 0.30);
    border-radius: 10px;
    padding: 8px 10px;
    color: #0b8a52;
    width: 100%;
    box-sizing: border-box;
}
.ba-minicart__coupon-success svg { flex: 0 0 16px; color: #17B26A; }
.ba-minicart__coupon-success-body { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.ba-minicart__coupon-success-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; color: #0b8a52;
}
.ba-minicart__coupon-success-code {
    font-family: Menlo, Consolas, monospace; font-size: 12px;
    color: #064e2a; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ba-minicart__coupon-undo {
    flex: 0 0 auto;
    background: transparent; border: 1px solid rgba(23, 178, 106, 0.35);
    color: #0b8a52; border-radius: 100px;
    padding: 4px 10px; font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ba-minicart__coupon-undo:hover { background: #b3261e; color: #fff; border-color: #b3261e; }

/* v2.5.56 — Shipping line "Free" state. Mirrors the discount-
   row "green" treatment so the user gets the same "we applied
   this for you" feedback when the cart crosses the free-
   shipping threshold. */
.ba-minicart__total--free .ba-minicart__total-label { color: #0b8a52; }
.ba-minicart__total--free .ba-minicart__total-value { color: #0b8a52; font-weight: 800; }
.ba-minicart__total--shipping .ba-minicart__total-value.is-free { color: #0b8a52; font-weight: 800; }
.ba-minicart__coupon-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(23, 178, 106, 0.1);
    color: var(--green, #17B26A);
    border: 1px solid rgba(23, 178, 106, 0.25);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ba-minicart__coupon-pill button {
    background: transparent; border: 0; padding: 0 0 0 2px;
    color: var(--green, #17B26A);
    font-size: 14px; line-height: 1; cursor: pointer;
}
.ba-minicart__foot {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line-light, #E5EAF1);
    background: #fff;
    display: flex; flex-direction: column; gap: 10px;
    flex-shrink: 0;  /* never let the body push the buttons off-screen */
}
.ba-minicart__total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 4px;
}
.ba-minicart__total-label {
    color: var(--ink-soft, #4A5568);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.ba-minicart__total-value {
    color: var(--ink, #0B1220);
    font-size: 22px;
    font-weight: 800;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -0.01em;
}
.ba-minicart .ba-minicart__checkout,
.ba-minicart .ba-minicart__view {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 100px;
    padding: 13px 22px;
    font-size: 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ba-minicart .ba-minicart__checkout {
    background: linear-gradient(135deg, #17B26A 0%, #129456 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(23, 178, 106, 0.35);
}
.ba-minicart .ba-minicart__checkout:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(23, 178, 106, 0.45); }

/* BA Square pay button (gradient + subtle pulse + sliding arrow) */
.ba-minicart .ba-minicart__checkout {
    background: #0b1220;
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 18, 32, 0.18);
}
.ba-minicart .ba-minicart__checkout:hover { background: #1a2333; transform: translateY(-1px); }
.ba-minicart .ba-minicart__pay {
    position: relative !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #17b26a 0%, #0b63d5 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(23, 178, 106, 0.38), 0 4px 10px rgba(11, 99, 213, 0.22) !important;
    animation: ba-minicart-pay-pulse 2.4s ease-in-out infinite;
}
.ba-minicart .ba-minicart__pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(23, 178, 106, 0.50), 0 6px 14px rgba(11, 99, 213, 0.30);
    animation: none;
}
.ba-minicart .ba-minicart__pay-icon { flex-shrink: 0; }
.ba-minicart .ba-minicart__pay-arrow { transition: transform .2s ease; }
.ba-minicart .ba-minicart__pay:hover .ba-minicart__pay-arrow { transform: translateX(4px); }
@keyframes ba-minicart-pay-pulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(23, 178, 106, 0.38), 0 4px 10px rgba(11, 99, 213, 0.22); }
    50%      { box-shadow: 0 14px 32px rgba(23, 178, 106, 0.55), 0 6px 14px rgba(11, 99, 213, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
    .ba-minicart .ba-minicart__pay { animation: none; }
}

/* Per-vial price + savings callout inside the cart item */
.ba-minicart__meta-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
}
.ba-minicart__pervial {
    color: #4a5568;
    font-weight: 600;
    background: #f6f8fb;
    padding: 2px 8px;
    border-radius: 999px;
}
.ba-minicart__pervial-suffix { color: #6b7280; font-weight: 500; }
.ba-minicart__savings {
    color: #0f8a52;
    font-weight: 700;
    background: rgba(23, 178, 106, 0.10);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(23, 178, 106, 0.25);
}

.ba-minicart .ba-minicart__view {
    background: #F5F7FB;
    color: var(--ink, #0B1220);
}
.ba-minicart .ba-minicart__view:hover { background: #E8EDF4; }

@media (max-width: 480px) {
    .ba-minicart__panel { width: 100vw; }
}

/* Sticky mobile CTA on products page */
@media (max-width: 760px) {
    .stasis-products .ba-product-info {
        padding-bottom: 110px;  /* room for the sticky CTA */
    }
}
.stasis-products .ba-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 7000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-light, #E5EAF1);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -10px 30px rgba(8, 18, 36, 0.08);
}
@media (max-width: 760px) {
    .stasis-products .ba-sticky-cta { display: flex; }
}
.stasis-products .ba-sticky-cta__price {
    display: flex; flex-direction: column;
    line-height: 1.1;
    flex: 1; min-width: 0;
}
.stasis-products .ba-sticky-cta__price small {
    color: var(--ink-soft, #4A5568);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.stasis-products .ba-sticky-cta__price strong {
    color: var(--ink, #0B1220);
    font-size: 20px;
    font-weight: 800;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.stasis-products .ba-sticky-cta__btn {
    background: linear-gradient(135deg, #17B26A 0%, #129456 100%);
    color: #fff;
    border: 0;
    border-radius: 100px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(23, 178, 106, 0.4);
    flex: 0 0 auto;
}

/* v2.5.44 — the AquaBot chatbot bubble (.ba-chatbot, defined in
   section 29 below) is fixed at bottom:22px/14px on every page with
   no awareness of this bar. On the products page at <=760px this bar
   is also fixed to the bottom and sits at a higher z-index than the
   chatbot, so the bubble visually overlapped the sticky CTA's price
   and button (confirmed on a live screenshot). Lift the bubble clear
   of the bar's height + safe-area on mobile product pages only. */
@media (max-width: 760px) {
    .stasis-products .ba-chatbot { bottom: calc(92px + env(safe-area-inset-bottom, 0)); }
}
@media (max-width: 480px) {
    .stasis-products .ba-chatbot { bottom: calc(86px + env(safe-area-inset-bottom, 0)); }
}

/* v2.2.6 — About page testimonials (moved from Shop)
   ─────────────────────────────────────────────────────────────────
   The trust story on the About page. Three parts:
     1. .ba-about-trust-strip   — 1-line scannable stats ribbon
     2. .ba-about-featured-testi— large editorial featured quote
     3. .ba-about-testi-grid    — 3-col grid of remaining reviews
   Mobile: ribbon stacks vertically, featured keeps the quote but
   tightens padding, grid collapses to 1 column. */

.stasis-about .ba-about-testimonials {
    background: var(--paper-2, #F8F6F0);
    padding: 96px 0;
}

/* 1. Trust strip */
.stasis-about .ba-about-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px 44px;
    padding: 22px 28px;
    margin: 0 auto 56px;
    max-width: 920px;
    background: linear-gradient(135deg, rgba(11, 21, 36, 0.96) 0%, rgba(17, 31, 56, 0.96) 100%);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px -22px rgba(11, 21, 36, 0.45);
    position: relative;
    overflow: hidden;
}
.stasis-about .ba-about-trust-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(203, 160, 91, 0.18), transparent 50%),
        radial-gradient(circle at 88% 100%, rgba(94, 200, 242, 0.10), transparent 50%);
    pointer-events: none;
}
.stasis-about .ba-about-trust-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    position: relative;
}
.stasis-about .ba-about-trust-strip__num {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
}
.stasis-about .ba-about-trust-strip__num small {
    font-size: 0.55em;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 2px;
    letter-spacing: 0;
}
.stasis-about .ba-about-trust-strip__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
.stasis-about .ba-about-trust-strip__sep {
    color: rgba(203, 160, 91, 0.7);
    font-size: 14px;
    line-height: 1;
    align-self: center;
}

/* 2. Featured editorial testimonial */
.stasis-about .ba-about-featured-testi {
    position: relative;
    max-width: 980px;
    margin: 0 auto 64px;
    padding: 56px 64px 48px;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(11, 21, 36, 0.04),
        0 24px 60px -28px rgba(11, 21, 36, 0.20);
    overflow: hidden;
}
.stasis-about .ba-about-featured-testi::before {
    /* Gold accent line — the brand mark of the section */
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold, #C9A961) 50%, transparent);
}
.stasis-about .ba-about-featured-testi__quote-mark {
    /* v2.2.7 — moved to the upper-LEFT corner so it never overlaps
       the body text. Was at top: 18px left: 32px (sitting BEHIND
       the start of the quote), now floats above the top edge
       and slightly to the left so it reads as a decorative motif
       rather than colliding with the copy. */
    position: absolute;
    top: -12px; left: 18px;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 110px;
    line-height: 1;
    color: rgba(203, 160, 91, 0.16);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.stasis-about .ba-about-featured-testi__body {
    position: relative;
    z-index: 1;
    margin: 0 0 28px;
    /* v2.2.7 — left padding so the body text starts AFTER the
       decorative quote mark. The quote mark is 110px tall, floats
       above the card top edge, and is positioned at left: 18px.
       We give the body a comfortable 24px left padding so the
       first character of the quote never sits next to a glyph. */
    padding-left: 24px;
}
.stasis-about .ba-about-featured-testi__body p {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    /* v2.2.7 — reduced from clamp(20px, 2.2vw, 26px) so the
       featured quote doesn't dominate the page. 18-22px is the
       sweet spot for a Playfair quote inside a 980px card. */
    font-size: clamp(17px, 1.85vw, 22px);
    line-height: 1.55;
    color: var(--ink, #0B1524);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.stasis-about .ba-about-featured-testi__foot {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "author  rating"
        "verified verified";
    align-items: center;
    gap: 8px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line-light, #E5EAF1);
}
.stasis-about .ba-about-featured-testi__author {
    grid-area: author;
    display: flex;
    align-items: center;
    gap: 14px;
    /* v2.2.8 — name + role wrapper needs an explicit min-width:0
       so long names + roles wrap inside the card and never push
       the avatar outside the card edge. */
    min-width: 0;
}
.stasis-about .ba-about-featured-testi__author > div {
    min-width: 0;
    flex: 1 1 auto;
}
.stasis-about .ba-about-featured-testi__avatar {
    /* v2.2.8 — reduced from 48 to 44 + flex-shrink:0 so the avatar
       never collapses, never overlaps the card border, and reads
       as a small elegant chip next to the name. */
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6, #4F46E5);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.5);
}
.stasis-about .ba-about-featured-testi__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #0B1524);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.stasis-about .ba-about-featured-testi__role {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--graphite, #6B7B8E);
    letter-spacing: 0.04em;
    margin-top: 2px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.stasis-about .ba-about-featured-testi__rating {
    grid-area: rating;
    color: var(--gold, #C9A961);
    font-size: 22px;
    letter-spacing: 0.12em;
    line-height: 1;
}
.stasis-about .ba-about-featured-testi__verified {
    grid-area: verified;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--green, #17B26A);
    font-weight: 700;
}

/* 3. 3-col grid of remaining testimonials */
.stasis-about .ba-about-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* v2.2.7 — align-items: start so each card sizes to its CONTENT
       instead of stretching to match the tallest sibling. A 1-line
       review now reads as a compact card; a 4-line review gets a
       taller card. The columns stay equal width; only the heights
       are independent. */
    align-items: start;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
}
/* Override the default ba-testimonial padding/colors inside the about
   section so the cards match the rest of the page palette. */
.stasis-about .ba-about-testi-grid .ba-testimonial {
    background: #fff !important;
    border: 1px solid var(--line-light, #E5EAF1) !important;
    border-radius: 16px !important;
    /* v2.2.7 — tighter padding (24px 28px instead of 32px 36px)
       so compact reviews don't waste space. Cards still expand
       with content because the inner elements are flex/auto. */
    padding: 24px 28px !important;
    /* v2.2.7 — display:flex column + gap so the author block
       (name + role + verified) sticks to the bottom of the card
       even when the quote is short. Without this, a 1-line
       review + author block has 40px of empty space between them. */
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-shadow: 0 6px 18px -12px rgba(11, 21, 36, 0.08);
    transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.stasis-about .ba-about-testi-grid .ba-testimonial:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(11, 21, 36, 0.18);
}
.stasis-about .ba-about-testi-grid .ba-testimonial__rating { color: var(--gold, #C9A961); font-size: 16px; }
.stasis-about .ba-about-testi-grid .ba-testimonial__star.is-on { color: var(--gold, #C9A961); }
.stasis-about .ba-about-testi-grid .ba-testimonial__quote {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink, #0B1524);
    margin: 0;
    flex: 0 0 auto;
}
.stasis-about .ba-about-testi-grid .ba-testimonial__name {
    font-weight: 600;
    color: var(--ink, #0B1524);
    font-size: 14px;
}
.stasis-about .ba-about-testi-grid .ba-testimonial__role {
    color: var(--graphite, #6B7B8E);
    font-size: 11.5px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.02em;
}
.stasis-about .ba-about-testi-grid .ba-testimonial__verified {
    color: var(--green, #17B26A);
    font-size: 10.5px;
    letter-spacing: 0.04em;
}
/* v2.2.7 — author block at the bottom of the card so a 2-line
   review doesn't leave a 60px gap before the name. The flex
   direction on the parent (column) + the margin-top:auto on
   the author block pushes it to the bottom. */
.stasis-about .ba-about-testi-grid .ba-testimonial__author {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line-light, #E5EAF1);
}

/* Tablet */
@media (max-width: 920px) {
    .stasis-about .ba-about-testimonials { padding: 72px 0; }
    .stasis-about .ba-about-trust-strip { margin-bottom: 44px; gap: 18px 28px; padding: 20px 22px; }
    .stasis-about .ba-about-featured-testi { padding: 40px 32px 36px; margin-bottom: 48px; }
    .stasis-about .ba-about-featured-testi__quote-mark { font-size: 100px; top: 8px; left: 18px; }
    .stasis-about .ba-about-featured-testi__body p { font-size: 18px; line-height: 1.55; }
    .stasis-about .ba-about-testi-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .stasis-about .ba-about-testi-grid .ba-testimonial { padding: 24px 26px !important; }
}

/* Mobile */
@media (max-width: 560px) {
    .stasis-about .ba-about-testimonials { padding: 56px 0; }
    .stasis-about .ba-about-trust-strip {
        flex-direction: column;
        gap: 14px;
        padding: 20px 18px;
        border-radius: 14px;
    }
    .stasis-about .ba-about-trust-strip__sep { display: none; }
    .stasis-about .ba-about-featured-testi { padding: 32px 22px 28px; border-radius: 18px; }
    .stasis-about .ba-about-featured-testi__quote-mark { font-size: 80px; top: 4px; left: 12px; }
    .stasis-about .ba-about-featured-testi__body { margin-bottom: 24px; }
    .stasis-about .ba-about-featured-testi__body p { font-size: 16.5px; line-height: 1.55; }
    .stasis-about .ba-about-featured-testi__foot {
        grid-template-columns: 1fr;
        grid-template-areas: "author" "rating" "verified";
        text-align: left;
    }
    .stasis-about .ba-about-featured-testi__rating { font-size: 18px; }
    .stasis-about .ba-about-testi-grid { grid-template-columns: 1fr; gap: 14px; }
    .stasis-about .ba-about-testi-grid .ba-testimonial { padding: 22px 22px !important; }
}

/* v2.2.6 — Testimonial submission form (Share your story) */

.ba-testi-form-wrap {
    max-width: 780px;
    margin: 48px auto 0;
    padding: 40px 44px;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 18px;
    box-shadow: 0 18px 44px -22px rgba(11, 21, 36, 0.14);
    position: relative;
    overflow: hidden;
}
.ba-testi-form-wrap::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold, #C9A961) 50%, transparent);
}
.ba-testi-form__title {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--ink, #0B1524);
    text-align: center;
}
.ba-testi-form__sub {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--graphite, #6B7B8E);
    margin: 0 0 24px;
    text-align: center;
}
.ba-testi-form__notice {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.ba-testi-form__notice--ok {
    background: #ECFDF5;
    border: 1px solid rgba(23, 178, 106, 0.25);
    color: #065F46;
}
.ba-testi-form__notice--err {
    background: #FEF2F2;
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #991B1B;
}
.ba-testi-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.ba-testi-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ba-testi-form__field--full { margin-bottom: 14px; }
.ba-testi-form__label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink, #0B1524);
}
.ba-testi-form__field input[type="text"],
.ba-testi-form__field input[type="email"],
.ba-testi-form__field textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #0B1524);
    font: inherit;
    font-size: 14.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.ba-testi-form__field textarea {
    height: auto;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
    min-height: 110px;
}
.ba-testi-form__field input:focus,
.ba-testi-form__field textarea:focus {
    outline: none;
    border-color: var(--cryo, #5EC8F2);
    box-shadow: 0 0 0 3px rgba(94, 200, 242, 0.18);
}
.ba-testi-form__hint {
    font-size: 11.5px;
    color: var(--graphite, #6B7B8E);
    margin-top: 2px;
}
/* Honeypot — invisible to humans, irresistible to bots. */
.ba-testi-form__hp {
    position: absolute;
    left: -10000px; top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}
/* Star rating — pure CSS, no JS needed. */
.ba-testi-form__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    height: 44px;
    align-items: center;
}
.ba-testi-form__stars input { position: absolute; opacity: 0; pointer-events: none; }
.ba-testi-form__stars label {
    font-size: 28px;
    color: var(--line-light, #E5EAF1);
    cursor: pointer;
    line-height: 1;
    transition: color .15s ease, transform .15s ease;
    padding: 4px 2px;
}
.ba-testi-form__stars label:hover,
.ba-testi-form__stars label:hover ~ label,
.ba-testi-form__stars input:checked ~ label {
    color: var(--gold, #C9A961);
}
.ba-testi-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink, #0B1524);
    margin: 8px 0 22px;
    cursor: pointer;
}
.ba-testi-form__consent input {
    margin-top: 3px;
    width: 16px; height: 16px;
    flex: 0 0 16px;
    accent-color: var(--cryo, #5EC8F2);
}
.ba-testi-form button[type="submit"] {
    width: 100%;
    height: 52px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

@media (max-width: 760px) {
    .ba-testi-form-wrap { padding: 28px 20px; border-radius: 14px; margin-top: 32px; }
    .ba-testi-form__row { grid-template-columns: 1fr; gap: 12px; }
    .ba-testi-form__field input,
    .ba-testi-form__field textarea { font-size: 16px; /* iOS no-zoom */ }
    .ba-testi-form__stars { height: 40px; }
    .ba-testi-form__stars label { font-size: 26px; }
}
@media (max-width: 480px) {
    .ba-testi-form-wrap { padding: 24px 16px; }
    .ba-testi-form__title { font-size: 20px; }
    .ba-testi-form__sub { font-size: 13.5px; margin-bottom: 18px; }
}

/* v1.2.4 — About page photo (better proportion + soft frame) */
.stasis-about .ba-about-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(8, 18, 36, 0.14),
                0 0 0 1px rgba(8, 18, 36, 0.04);
}
@media (min-width: 920px) {
    .stasis-about .ba-about-photo {
        max-height: 620px;
        aspect-ratio: 3 / 4;
    }
}
@media (max-width: 560px) {
    .stasis-about .ba-about-photo { aspect-ratio: 1 / 1; max-height: 480px; }
}

/* v1.2.4 � Performance: image-rendering hint, content-visibility for long sections */
.stasis-products .ba-section,
.stasis-about .ba-section,
.stasis-contact .ba-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}
.stasis-products img,
.stasis-about img,
.stasis-contact img { image-rendering: -webkit-optimize-contrast; }

/* v1.3 — Header cart pill: mobile already handled via the
   .ba-cart-amount { display:none } rule above (min-width: 640px
   breakpoint); nothing extra needed since it's a normal header
   icon now, not a floating overlay. */

/* v1.2.4 — Reduced-motion respect for new components */
@media (prefers-reduced-motion: reduce) {
    .ba-cart-count.is-pulse { animation: none !important; }
    .ba-minicart__panel { transition: opacity .15s ease; transform: none; }
    .ba-minicart.is-open .ba-minicart__panel { transform: none; }
}

/* =====================================================================
   v1.5.1 — Mobile responsive pass
   ---------------------------------------------------------------------
   Mobile-first adjustments for the BA shell. Targets the new header
   (rendered on every front-end page via ba_pages_render_header_on_woo_pages),
   the cart page 2-col layout, and the mini-cart drawer.

   Breakpoints used:
   - 920px : tablet (landscape) — 2-col → 1-col for cart + pay pages
   - 760px : tablet (portrait)  — desktop nav hides, hamburger shows
   - 480px : phone             — tighter padding, smaller hero
   ===================================================================== */

/* BA header hamburger — hidden on desktop, shown on mobile */
.ba-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.ba-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #0b1220;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.ba-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ba-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ba-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.ba-nav-mobile {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e5eaf1;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}
.ba-nav-mobile.is-open { display: flex; }
.ba-nav-mobile .ba-nav-link {
    color: #0b1220;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.ba-nav-mobile .ba-nav-link:hover,
.ba-nav-mobile .ba-nav-link.is-active {
    background: rgba(23, 178, 106, 0.08);
    color: #17b26a;
}
.ba-nav-mobile__lang {
    display: inline-flex;
    background: #f6f8fb;
    border: 1px solid #e5eaf1;
    border-radius: 999px;
    padding: 2px;
    margin-top: 8px;
    align-self: flex-start;
}
.ba-nav-mobile__lang .ba-lang-toggle__opt {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.ba-nav-mobile__lang .ba-lang-toggle__opt.is-active {
    background: #17b26a;
    color: #ffffff;
}

/* Sticky mobile pay bar: hidden on desktop, shown via the media query below.
   Without this default, the bar (injected to <body> by JS) renders as
   unstyled plain text at the bottom of the page on viewports > 920px. */
.ba-cart-sticky-bar { display: none; }

/* ── 920px (tablet) ────────────────────────────────────────────────── */
@media (max-width: 920px) {
    .ba-cart-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .ba-pay-grid  { grid-template-columns: 1fr !important; gap: 24px !important; }
    .ba-cart-summary-col,
    .ba-pay-summary-col { position: static !important; }
}

/* ── 760px (mobile) ────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* BA header: hide desktop nav + lang toggle, show hamburger */
    .ba-header-inner { grid-template-columns: auto 1fr auto !important; gap: 12px !important; }
    .ba-nav-left { display: none !important; }
    .ba-lang-toggle { display: none !important; }
    .ba-nav-toggle { display: inline-flex !important; }
    .ba-brand { justify-self: start !important; }
    .ba-brand-word { font-size: 16px !important; }
    .ba-header-actions { gap: 6px !important; }
    .ba-icon-btn { width: 40px !important; height: 40px !important; }
    .ba-promo-item { font-size: 11px !important; }

    /* Cart page */
    .ba-cart-hero { padding: 40px 20px 28px !important; }
    .ba-cart-hero__title { font-size: 32px !important; }
    .ba-cart-hero__spiral { width: 80px !important; height: 80px !important; }
    .ba-cart-main { padding: 32px 16px 64px !important; }
    .ba-cart-summary__card { padding: 20px !important; }
    .ba-cart-summary__title { font-size: 16px !important; }
    .ba-cart-summary__trust { flex-wrap: wrap; gap: 6px !important; padding: 10px !important; }
    .ba-cart-summary__trust-item { font-size: 10.5px !important; }
    .ba-cart-summary__help { font-size: 11.5px !important; }

    /* Pay page */
    .ba-pay-hero { padding: 40px 20px 28px !important; }
    .ba-pay-hero__title { font-size: 32px !important; }
    .ba-pay-hero__spiral { width: 80px !important; height: 80px !important; }
    .ba-pay-main { padding: 32px 16px 64px !important; }
    .ba-pay-summary { padding: 20px !important; }
    .ba-sq-wrap { padding: 22px 18px !important; }
    .ba-pay-summary__trust { flex-wrap: wrap; gap: 6px !important; padding: 10px !important; }
    .ba-pay-summary__trust-item { font-size: 10.5px !important; }

    /* Footer */
    .ba-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
    .ba-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
    .ba-footer-col p { font-size: 12px !important; }
    .ba-footer-col li { font-size: 13px !important; }

    /* Mini-cart becomes a bottom sheet on mobile (full width, pinned to bottom) */
    .ba-minicart__panel {
        position: fixed !important;
        left: 0 !important; right: 0 !important;
        bottom: 0 !important; top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 90vh !important;
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
    }
    .ba-minicart.is-open .ba-minicart__panel { transform: translateY(0) !important; }

    /* Pay button on cart page: full width, prominent */
    .ba-cart-summary__pay { padding: 18px 18px !important; font-size: 15px !important; }

    /* ═══ STICKY BOTTOM PAY BAR ═══════════════════════════════════════
       On mobile, the cart page's right-column summary collapses below
       the form. Without help, the user has to scroll a long way to find
       the Pay button. Pin it to the bottom of the screen so it's
       always one tap away.

       Implementation: clone the Pay button into a fixed bottom bar
       (done by JS) and show it only on mobile.
       Here we just style the fixed bar — the JS that injects it lives
       in ba-pages.js (see baCartStickyBarInit).
    */
    .ba-cart-sticky-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        background: #ffffff;
        border-top: 1px solid #e5eaf1;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .ba-cart-sticky-bar__total {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .ba-cart-sticky-bar__label {
        font-size: 11px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 700;
    }
    .ba-cart-sticky-bar__value {
        font-size: 17px;
        font-weight: 800;
        color: #0b1220;
    }
    .ba-cart-sticky-bar__pay {
        flex: 1;
        background: linear-gradient(135deg, #17b26a 0%, #0b63d5 100%);
        color: #ffffff;
        border: 0;
        border-radius: 10px;
        padding: 14px 18px;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 8px 20px rgba(23, 178, 106, 0.40);
        letter-spacing: 0.01em;
    }
    .ba-cart-sticky-bar__pay:hover { color: #fff; }

    /* Add bottom padding to the cart main so the sticky bar doesn't
       cover the last line of the summary card on small screens. */
    body.woocommerce-cart .ba-cart-main,
    body.stasis-cart-body .ba-cart-main { padding-bottom: 120px !important; }

    /* When the sticky bar is visible on mobile, the in-card Pay button
       is redundant. Hide it. */
    .ba-cart-sticky-bar ~ .ba-cart-summary__card .ba-cart-summary__pay,
    body.has-ba-sticky-bar .ba-cart-summary__pay { display: none !important; }
}

/* ── 480px (small phone) ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .ba-cart-hero__title { font-size: 28px !important; }
    .ba-pay-hero__title { font-size: 28px !important; }
    .ba-pay-hero__sub { font-size: 14px !important; }
    .ba-sq-wrap { padding: 18px 14px !important; }
    .ba-pay-form-col .ba-sq-form .ba-sq-field-row-3 { grid-template-columns: 1fr !important; gap: 12px !important; }
    .ba-pay-form-col .ba-sq-pay-tabs { gap: 4px !important; }
    .ba-pay-form-col .ba-sq-pay-tab { font-size: 12px !important; padding: 10px 6px !important; }

    /* Footer collapses to 1 col on small phones */
    .ba-footer-cols { grid-template-columns: 1fr !important; }
}

/* Print: hide BA chrome (header, footer, mini-cart) */
@media print {
    .ba-header, .ba-footer, .ba-promo, .ba-minicart, .ba-nav-mobile { display: none !important; }
}

/* ============================================================================
   v2.1.3 — Brand mark (v3 SVG with embedded spiral + wordmark + tagline)
   ----------------------------------------------------------------------------
   The header and footer now use a single self-contained SVG that
   embeds the original spiral photo plus the BACTERIOSTATIC AGUA
   wordmark and the LAB GRADE · TRUSTED QUALITY tagline. The SVG
   handles all colors internally; CSS just controls the rendered
   size and any contextual theming.
   ============================================================================ */

/* ── 31. Header brand mark ────────────────────────────────────── */
.stasis .ba-header .ba-brand-mark {
    display: block;
    height: clamp(56px, 6.5vw, 72px);
    width: auto;
    transition: opacity .2s var(--ease, ease);
}
.stasis .ba-header .ba-brand-mark:hover { opacity: 0.78; }
/* v2.5.57 — The new header logo is a <picture><source>…<img></picture>
   stack. Without `display: contents` on the <picture>, the picture
   element gets its own anonymous box and the existing `.ba-brand-mark`
   rules (which target the inner <img>) would render the img inside a
   separate, unstyled container. contents erases the picture's box so
   the <img> is a direct flex child of `.ba-brand` for layout
   purposes — same as the old SVG-only case. Well-supported
   (Chrome 65+, Firefox 37+, Safari 11.1+, Edge 79+). */
.stasis .ba-header picture { display: contents; }

/* ── 32. Footer brand mark (vertical stack) ────────────────────── */
.stasis .ba-footer .ba-brand-mark,
.stasis .ba-footer .ba-brand-mark-footer {
    display: block;
    height: auto;
    width: clamp(180px, 16vw, 240px);
    margin: 0 auto 8px;
    filter: drop-shadow(0 0 18px rgba(94, 200, 242, 0.18));
}
.stasis .ba-footer .ba-footer-brand-row {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 8px;
}

/* ── 33. COA showcase (about page) — luxury split layout ─────────── */
.stasis .ba-coa-showcase {
    background: var(--cream, #F8F5EE);
    padding: var(--section) 0;
}
.stasis .ba-coa-showcase__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}
.stasis .ba-coa-showcase__doc-frame {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 36px 70px -36px rgba(11, 21, 36, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.stasis .ba-coa-showcase__doc-frame:hover {
    transform: translateY(-3px);
    box-shadow:
        0 44px 80px -32px rgba(11, 21, 36, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.stasis .ba-coa-showcase__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 255 / 330;     /* matches the rendered PDF page */
    object-fit: cover;
    object-position: top center;
    background: #fff;
}
.stasis .ba-coa-showcase__overlay {
    position: absolute;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: rgba(11, 21, 36, 0.85);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 100px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}
.stasis .ba-coa-showcase__doc-frame:hover .ba-coa-showcase__overlay,
.stasis .ba-coa-showcase__doc-frame:focus-visible .ba-coa-showcase__overlay {
    opacity: 1;
}
.stasis .ba-coa-showcase__seal {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px 6px 8px;
    background: var(--green, #17B26A);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 8px 18px -8px rgba(23, 178, 106, 0.5);
}
.stasis .ba-coa-showcase__seal-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
}
.stasis .ba-coa-spec-list {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: flex; flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 12px;
    overflow: hidden;
}
.stasis .ba-coa-spec-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-light, #E5EAF1);
    font-size: 13.5px;
}
.stasis .ba-coa-spec-list li:last-child { border-bottom: 0; }
.stasis .ba-coa-spec-list__label {
    color: var(--ink-soft, #475569);
    font-weight: 500;
}
.stasis .ba-coa-spec-list__value {
    color: var(--ink, #0B1220);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.stasis .ba-coa-showcase__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.stasis .ba-coa-showcase__meta-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 10px;
}
.stasis .ba-coa-showcase__meta-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    color: var(--graphite, #6B7B8E);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.stasis .ba-coa-showcase__meta-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #0B1220);
}
.stasis .ba-coa-showcase__actions {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.stasis .ba-coa-showcase__actions .ba-btn { flex: 1 1 auto; justify-content: center; }

/* Mobile: COA showcase stacks */
@media (max-width: 920px) {
    .stasis .ba-coa-showcase__grid { grid-template-columns: 1fr; gap: 28px; }
    .stasis .ba-coa-showcase__doc { max-width: 480px; margin: 0 auto; }
    .stasis .ba-coa-showcase__meta { grid-template-columns: 1fr; }
}

/* ── 34. COA lightbox PDF overlay (products page) ───────────────── */
.stasis .ba-coa-lightbox__pdf-link {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}
.stasis .ba-coa-lightbox__pdf-overlay {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(11,21,36,0) 60%, rgba(11,21,36,0.78) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}
.stasis .ba-coa-lightbox__pdf-link:hover .ba-coa-lightbox__pdf-overlay,
.stasis .ba-coa-lightbox__pdf-link:focus-visible .ba-coa-lightbox__pdf-overlay {
    opacity: 1;
}

/* ── 35. Reduced motion: turn off the new showcase animations ────── */
@media (prefers-reduced-motion: reduce) {
    .stasis .ba-coa-showcase__doc-frame,
    .stasis .ba-coa-showcase__overlay { transition: none !important; }
    .stasis .ba-coa-showcase__doc-frame:hover { transform: none !important; }
}

/* ── 36. Products page — split media: real COA image (replaces v3 ── */
/*      HTML "lab scene" mock-up which showed a fake "CERTIFICATE OF      */
/*      ANALYSIS" inset. v4 replaces the entire .ba-lab-scene block     */
/*      with the actual signed COA image, framed and clickable to       */
/*      open the real PDF.                                            */
.stasis .ba-product-split__media { width: 100%; }
.stasis .ba-product-split__doc {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--line-light, #E5EAF1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 32px 64px -32px rgba(11, 21, 36, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.stasis .ba-product-split__doc:hover {
    transform: translateY(-3px);
    box-shadow:
        0 40px 72px -28px rgba(11, 21, 36, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.stasis .ba-product-split__doc img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 255 / 330;
    object-fit: cover;
    object-position: top center;
}
.stasis .ba-product-split__seal {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex; align-items: center;
    padding: 6px 11px;
    background: var(--green, #17B26A);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 8px 18px -8px rgba(23, 178, 106, 0.5);
}
.stasis .ba-product-split__cta {
    position: absolute;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: rgba(11, 21, 36, 0.85);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 100px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}
.stasis .ba-product-split__doc:hover .ba-product-split__cta,
.stasis .ba-product-split__doc:focus-visible .ba-product-split__cta {
    opacity: 1;
}

/* ============================================================================
   v2.5.0 — Exit-intent email capture modal
   Injected at runtime by ba-pages.js. No HTML in templates — the modal
   is created on demand so it doesn't appear in the DOM on first paint
   (zero LCP / CLS impact). Only ever shown once per session via
   sessionStorage. Skipped on /checkout/, /cart/, /my-account/.
   ============================================================================ */
.ba-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}
.ba-modal.is-open {
    pointer-events: auto;
    opacity: 1;
}
.ba-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 26, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ba-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 44px 40px 36px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 32px 80px -20px rgba(4, 8, 26, 0.45), 0 8px 20px -8px rgba(4, 8, 26, 0.25);
    transform: translateY(16px) scale(0.96);
    transition: transform .35s cubic-bezier(.16, .8, .24, 1);
    overflow: hidden;
}
.ba-modal.is-open .ba-modal__panel {
    transform: translateY(0) scale(1);
}
.ba-modal__panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #17b26a 0%, #0b63d5 50%, #5EC8F2 100%);
}
.ba-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ba-modal__close:hover { background: #f3f4f6; color: #0b1220; }
.ba-modal__icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(23, 178, 106, 0.14), rgba(11, 99, 213, 0.10));
    color: #0b63d5;
    display: flex; align-items: center; justify-content: center;
}
.ba-modal__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0b1220;
    margin: 0 0 8px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.ba-modal__sub {
    font-size: 14.5px;
    color: #4a5568;
    line-height: 1.55;
    margin: 0 0 22px;
}
.ba-modal__form { margin: 0 0 12px; }
.ba-modal__label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7b8e;
    margin: 0 0 8px;
    text-align: left;
}
.ba-modal__row {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
}
.ba-modal__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 15px;
    color: #0b1220;
    font-family: 'IBM Plex Sans', sans-serif;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.ba-modal__input:focus {
    outline: none;
    border-color: #0b63d5;
    box-shadow: 0 0 0 3px rgba(11, 99, 213, 0.18);
}
.ba-modal__submit {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 22px;
    background: linear-gradient(135deg, #17b26a 0%, #0b63d5 100%);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 8px 20px -8px rgba(23, 178, 106, 0.5);
    white-space: nowrap;
}
.ba-modal__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -8px rgba(23, 178, 106, 0.6);
    filter: brightness(1.04);
}
.ba-modal__submit:disabled { opacity: 0.7; cursor: progress; }
.ba-modal__submit.is-loading {
    background: #6b7b8e;
    box-shadow: none;
}
.ba-modal__fineprint {
    font-size: 11.5px;
    color: #9ca3af;
    line-height: 1.45;
    margin: 0;
}
.ba-modal__decline {
    background: transparent;
    border: 0;
    color: #9ca3af;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    margin-top: 4px;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.ba-modal__decline:hover { color: #4a5568; background: #f3f4f6; }
.ba-modal__success {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    color: #0b8a52;
    font-weight: 600;
    margin: 8px 0 0;
}
/* v2.5.50 — inline coupon code display on the exit-intent success
   state. The modal already disappeared on success before; now the
   user actually sees the code, can copy it, and we also keep the
   auto-hide a few seconds longer. */
.ba-modal__code {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin: 14px auto 10px;
    padding: 14px 12px;
    background: #F5F7FB;
    border: 2px dashed #C9D5E6;
    border-radius: 12px;
    max-width: 280px;
}
.ba-modal__code-label {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #64748b; font-weight: 700;
}
.ba-modal__code-value {
    font-family: Menlo, Consolas, 'Courier New', monospace;
    font-size: 22px; font-weight: 800; color: #0B1220;
    letter-spacing: 0.08em;
    user-select: all;
    -webkit-user-select: all;
    background: transparent;
    border: 0;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    font-family: Menlo, Consolas, 'Courier New', monospace;
}
.ba-modal__code-value:hover { background: #EEF2F7; }
.ba-modal__code-value.is-copied {
    background: rgba(23, 178, 106, 0.18);
    color: #0b8a52;
}
.ba-modal__success-sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 4px 0 0;
}
/* Honeypot field — hidden from sighted users, still in the DOM so
   bots that auto-fill all fields will trip it. */
.ba-modal__honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
@media (max-width: 480px) {
    .ba-modal__panel { padding: 36px 24px 28px; border-radius: 18px; }
    .ba-modal__title { font-size: 20px; }
    .ba-modal__row { flex-direction: column; }
    .ba-modal__submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ba-modal, .ba-modal__panel { transition: none; }
}

/* ============================================================================
   v2.5.0 — Recently viewed products strip
   Injected at runtime by ba-pages.js when there's a `ba_recent` cookie
   with at least 2 product IDs. Sits above the footer on non-product,
   non-checkout pages. Horizontal scroller on mobile.
   ============================================================================ */
.ba-recent {
    background: linear-gradient(180deg, transparent 0%, #f8fafc 100%);
    border-top: 1px solid #e5eaf1;
    border-bottom: 1px solid #e5eaf1;
    padding: 36px var(--pad);
    margin: 0;
}
.ba-recent__inner {
    max-width: var(--maxw, 1240px);
    margin: 0 auto;
}
.ba-recent__title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b7b8e;
    margin: 0 0 16px;
}
.ba-recent__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ba-recent__item { min-width: 0; }
.ba-recent__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    text-decoration: none;
    color: #0b1220;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ba-recent__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(11, 18, 32, 0.15);
    border-color: #5EC8F2;
}
.ba-recent__img {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 8px;
    background: #f5f7fb;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.ba-recent__img img { width: 100%; height: 100%; object-fit: cover; }
.ba-recent__body { min-width: 0; flex: 1 1 auto; }
.ba-recent__name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ba-recent__price {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0b8a52;
    margin-top: 2px;
}
@media (max-width: 760px) {
    .ba-recent__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .ba-recent__list { grid-template-columns: 1fr; }
}

/* ============================================================================
   v2.5.0 — Site search overlay (Cmd/Ctrl-K)
   Full-screen modal with instant search across products + pages + FAQ.
   Index fetched once per session, filtered in-memory.
   ============================================================================ */
.ba-search {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(60px, 10vh, 120px) 20px 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.ba-search.is-open { pointer-events: auto; opacity: 1; }
.ba-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 26, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ba-search__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px -16px rgba(4, 8, 26, 0.35);
    overflow: hidden;
    transform: translateY(-12px);
    transition: transform .25s cubic-bezier(.16, .8, .24, 1);
}
.ba-search.is-open .ba-search__panel { transform: translateY(0); }
.ba-search__inputwrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5eaf1;
    background: #fafbfd;
}
.ba-search__icon { color: #6b7b8e; flex-shrink: 0; }
.ba-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 17px;
    font-family: 'IBM Plex Sans', sans-serif;
    color: #0b1220;
    outline: none;
    padding: 4px 0;
}
.ba-search__input::placeholder { color: #9ca3af; }
.ba-search__esc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7b8e;
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 4px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.ba-search__results {
    max-height: min(60vh, 480px);
    overflow-y: auto;
    padding: 8px 0;
}
.ba-search__group {
    margin: 12px 20px 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7b8e;
}
.ba-search__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: #0b1220;
    text-decoration: none;
    transition: background .12s ease;
    cursor: pointer;
}
.ba-search__item:hover, .ba-search__item:focus { background: #f5f7fb; outline: none; }
.ba-search__item img, .ba-search__thumb {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(94, 200, 242, 0.14), rgba(36, 97, 255, 0.10));
    color: #0b63d5;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
}
.ba-search__body { min-width: 0; flex: 1 1 auto; }
.ba-search__title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #0b1220;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ba-search__sub {
    display: block;
    font-size: 12.5px;
    color: #6b7b8e;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ba-search__price {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: #0b8a52;
}
.ba-search__loading, .ba-search__empty {
    padding: 28px 20px;
    text-align: center;
    color: #6b7b8e;
    font-size: 13.5px;
    margin: 0;
}
.ba-search__hint {
    margin: 0;
    padding: 10px 20px;
    text-align: center;
    font-size: 11.5px;
    color: #9ca3af;
    background: #fafbfd;
    border-top: 1px solid #e5eaf1;
}
@media (prefers-reduced-motion: reduce) {
    .ba-search, .ba-search__panel { transition: none; }
}