/* =============================================================================
   BacWater storefront — generated baseline.
   =============================================================================
   This is a STARTER stylesheet. The palette tokens, typography choices, and
   structural styles below produce a launchable but visually generic brand
   storefront. Hand it to a designer.

   The compliance chassis (age gate, RUO/FDA disclaimer footer, no-therapeutic-
   claims grep, cross-store isolation) is wired automatically and does not
   depend on this stylesheet. You can rewrite this file end-to-end without
   breaking compliance.
   ============================================================================= */

/* Palette tokens — edit these first. The rest of the stylesheet pulls
   from these CSS variables, so a one-line edit at the top changes
   every component. */
.bacwater {
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-accent: #C2185B;
  --color-text: #111111;
  --checkout-accent: #880E4F;
  --checkout-accent-hover: #6D0B3F;
  --checkout-accent-glow: rgba(136, 14, 79, 0.18);
  --brand-accent: #880E4F;
  --checkout-bg: #ffffff;
  --checkout-text: #111111;
  --checkout-success: #047857; /* a PASS, as ink: >=4.74:1 on page, card and summary ground — shared/brand_partials.css */
  --checkout-danger: #B91C1C; /* a refusal, as ink: >=5.59:1 on page, card and summary ground — shared/brand_partials.css */
  --checkout-muted: #6b7280;
  --checkout-border: #e5e7eb;
  --checkout-summary-bg: #faf5f7;
  --checkout-input-bg: #ffffff;
  --checkout-card-bg: #fff;
  --checkout-font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --checkout-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --color-muted: #6b7280;
  --color-subtle: #e5e7eb;
  --color-border: #e5e7eb;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bacwater main { display: block; }

.bacwater a {
  color: var(--color-accent);
  text-decoration: none;
}

.bacwater a:hover { text-decoration: underline; }

.bacwater h1, .bacwater h2, .bacwater h3, .bacwater h4 {
  margin: 0 0 0.5em;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.bacwater h1 { font-size: clamp(36px, 5vw, 48px); }
.bacwater h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 600; }
.bacwater h3 { font-size: clamp(18px, 2.5vw, 22px); font-weight: 600; }

.bacwater p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

.bacwater p.muted { color: var(--color-muted); }

/* ----- Nav header ----------------------------------------------------- */
.bacwater-nav {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.bacwater-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
}
.bacwater-nav__brand {
  font-weight: 800;
  font-size: 20px;
  color: var(--color-text);
}
.bacwater-nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.bacwater-nav__link {
  color: var(--color-text);
  font-weight: 600;
}
.bacwater-nav__cart {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* ----- Hero -----------------------------------------------------------
   Desktop: the copy over the full-bleed photograph with a left scrim —
   the values the inline styles carried until 2026-10-20. Phone: see the
   "Sells on a phone" block at the foot of this file. Every rule names
   the block root and anchors carry `a.` (`.bacwater a` is (0,1,1)). */
.bacwater .bacwater-hero {
  position: relative;
  height: clamp(480px, 56vw, 1080px);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.bacwater .bacwater-hero .bacwater-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.bacwater .bacwater-hero .bacwater-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(250, 251, 252, 0.88) 0%, rgba(250, 251, 252, 0.6) 30%, transparent 58%);
}
.bacwater .bacwater-hero .bacwater-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 24px;
}
.bacwater .bacwater-hero .bacwater-hero__copy { max-width: 520px; }
.bacwater .bacwater-hero .bacwater-hero__eyebrow {
  margin: 0 0 20px;
  color: var(--color-muted, #5B6776);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}
.bacwater .bacwater-hero .bacwater-hero__title {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 54px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--color-text, #0D1521);
}
.bacwater .bacwater-hero .bacwater-hero__lede {
  margin: 0 0 36px;
  color: var(--color-text, #0D1521);
  font-size: 17px;
  line-height: 1.7;
  max-width: 480px;
}
.bacwater .bacwater-hero .bacwater-hero__actions {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.bacwater .bacwater-hero a.bacwater-hero__cta {
  display: inline-block;
  padding: 16px 44px;
  background: var(--color-accent, #C2185B);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bacwater .bacwater-hero a.bacwater-hero__link {
  color: var(--color-accent, #C2185B);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ----- Trust strip ---------------------------------------------------- */
.bacwater-trust-strip {
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
}
.bacwater-trust-strip__inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--color-muted);
}

/* ----- Product grid (home + shop) ------------------------------------ */
.bacwater-grid-section { padding: 64px 24px; }
.bacwater-grid-section__inner { max-width: 1200px; margin: 0 auto; }
.bacwater-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) { .bacwater-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bacwater-grid { grid-template-columns: 1fr; } }

.bacwater-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 24px;
}
.bacwater-card__link { display: block; color: var(--color-text); }
/* Portrait aspect ratio for BacWater vial images — overrides the
   inline 1:1 from brand_product_image_or_placeholder so the full
   vial is visible without tiny whitespace gutters. */
.bacwater .brand-product-img {
  aspect-ratio: 3 / 4 !important;
}
a.bacwater-card-link,
a.bacwater-card-link:hover,
a.bacwater-card-link:focus { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; cursor: pointer; }
.bacwater-card__tagline { font-size: 12px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.bacwater-card__name { font-size: 22px; margin-bottom: 8px; }
.bacwater-card__dose { font-size: 14px; color: var(--color-muted); }
.bacwater-card__view { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--color-accent); }

/* ----- Filter bar ----------------------------------------------------- */
.bacwater-filter-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}
.bacwater-filter-bar__chip {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 14px;
}
.bacwater-filter-bar__chip--active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* ----- PDP ------------------------------------------------------------ */
.bacwater-pdp { padding: 64px 24px; }
.bacwater-pdp__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 800px) { .bacwater-pdp__inner { grid-template-columns: 1fr; } }
.bacwater-pdp__image {
  background: #ffffff;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.bacwater-pdp .pdp-gallery__main img {
  aspect-ratio: 3 / 4;
}
.bacwater-pdp__data { }
/* (0,3,0), because the template's `.proBoxInfo .productType
   { color: #989898 }` is (0,2,0) and painted the badge at 2.88:1 on
   white. --color-muted is 4.83:1. Guarded by pdp_contrast_guard_test. */
.bacwater-pdp .proBoxInfo .bacwater-pdp__ruo-badge { color: var(--color-muted); }
.bacwater-pdp__add {
  display: inline-block;
  background: var(--color-accent) !important;
  color: var(--color-bg) !important;
  padding: 14px 32px !important;
  font-weight: 600;
  border: none !important;
  font-family: inherit;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity 0.2s ease;
}
.bacwater-pdp__add:hover { opacity: 0.85; }
.bacwater-pdp__add:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bacwater-pdp__add:disabled { opacity: 0.6; cursor: wait; }
.bacwater-pdp__qty {
  width: 80px;
  padding: 10px;
  border: 1px solid var(--color-border);
  font-size: 16px;
  font-family: inherit;
}

/* ----- Cart (redesigned — two-column layout) ----------------------------- */
.bacwater-cart { padding: 48px 24px 80px; }
.bacwater-cart__inner { max-width: 1140px; margin: 0 auto; }
.bacwater-cart__heading {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  margin: 0 0 32px;
  letter-spacing: -0.02em;
}

.bacwater-cart__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

/* Header row */
.bacwater-cart__header-row {
  display: flex;
  justify-content: space-between;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 8px;
}
.bacwater-cart__header-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.bacwater-cart__header-label--right { text-align: right; }

/* Line item row */
.bacwater-cart__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.bacwater-cart__item-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
}
.bacwater-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bacwater-cart__item-details { min-width: 0; }
.bacwater-cart__item-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}
.bacwater-cart__item-dose {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 4px;
}
.bacwater-cart__item-price {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.bacwater-cart__item-total {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 2px;
}

/* Qty + remove controls */
.bacwater-cart__item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bacwater-cart__qty-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.bacwater-cart__qty-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.bacwater-cart__qty-input {
  width: 52px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  text-align: center;
}
.bacwater-cart__qty-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(194, 24, 91, 0.12);
}
.bacwater-cart__qty-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.bacwater-cart__qty-btn:hover {
  border-color: var(--color-accent);
}
.bacwater-cart__remove-form { display: inline-block; }
.bacwater-cart__remove-btn {
  background: transparent;
  border: 0;
  color: var(--color-accent);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px; /* a thumb-sized target on a phone */
  padding: 0 4px;
}

/* Continue shopping link */
.bacwater-cart__continue {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.bacwater-cart__continue:hover { text-decoration: underline; }

/* Order summary sidebar */
.bacwater-cart__summary {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 28px;
  position: sticky;
  top: 24px;
}
.bacwater-cart__summary-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.bacwater-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 15px;
}
.bacwater-cart__summary-row--muted {
  font-size: 14px;
  color: var(--color-muted);
}
.bacwater-cart__summary-total {
  font-size: 20px;
  font-weight: 700;
  padding: 16px 0 8px;
  margin-top: 8px;
  border-top: 2px solid var(--color-accent);
}
.bacwater-cart__bulk-discount {
  color: #059669;
  font-size: 14px;
}

/* Checkout CTA */
/* Selector carries `a` deliberately.
   `.bacwater a { color: var(--color-accent) }` above is specificity
   (0,1,1); a bare `.bacwater-cart__checkout-btn` is (0,1,0) and LOSES,
   so `color:#fff` was silently discarded and the CTA rendered pink text
   on a pink background — 1:1 contrast, invisible. Measured in a real
   browser 2026-08-29: computed color and background both rgb(194,24,91).
   The cart DRAWER button already carried this workaround; the cart page
   button never got it. Guarded by cta_contrast_guard_test. */
.bacwater a.bacwater-cart__checkout-btn,
.bacwater-cart__checkout-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bacwater-cart__checkout-btn:hover { opacity: 0.9; }

/* Empty state */
.bacwater-cart__empty {
  text-align: center;
  padding: 80px 24px;
  max-width: 400px;
  margin: 0 auto;
}
.bacwater-cart__empty-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
.bacwater-cart__empty-body {
  font-size: 15px;
  color: var(--color-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}

/* Mobile — stack to single column */
@media (max-width: 768px) {
  /* minmax(0, 1fr), never bare 1fr: a 1fr track will not shrink below
     its widest child's min-content, so with an item in the cart the
     column sized itself to 396px and the page ran 420px wide in a 390px
     phone — sideways scroll on the Google Ads landing domain
     (2026-10-04, every_brand_page_fits_a_phone_test). */
  .bacwater-cart__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .bacwater-cart__item {
    grid-template-columns: 64px 1fr;
    gap: 12px;
  }
  .bacwater-cart__item-total {
    grid-column: 2;
    font-size: 16px;
  }
  .bacwater-cart__summary {
    position: static;
  }
  .bacwater-cart__header-row { display: none; }
}

/* ----- Cart drawer ---------------------------------------------------- */
.bacwater-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
}
.bacwater-cart-drawer--open { pointer-events: auto; }
.bacwater-cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bacwater-cart-drawer--open .bacwater-cart-drawer__scrim { opacity: 1; }
.bacwater-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}
.bacwater-cart-drawer--open .bacwater-cart-drawer__panel { transform: translateX(0); }
.bacwater-cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}
.bacwater-cart-drawer__close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
}
.bacwater-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
.bacwater-cart-drawer__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}
.bacwater-cart-drawer__row-thumb {
  width: 64px;
  height: 64px;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bacwater-cart-drawer__row-thumb-name {
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
  padding: 4px;
}
.bacwater-cart-drawer__footer {
  padding: 24px;
  border-top: 1px solid var(--color-border);
}
.bacwater-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 18px;
}
/* WHY !important: `.bacwater a { color: var(--color-accent) }` (0,1,1
   specificity) overrides this class selector (0,1,0), painting pink text
   on the pink button — invisible. Must win the cascade explicitly. */
.bacwater a.bacwater-cart-drawer__checkout,
.bacwater a.bacwater-cart-drawer__checkout:hover,
.bacwater a.bacwater-cart-drawer__checkout:focus {
  display: block;
  text-align: center;
  background: var(--color-accent) !important;
  color: #ffffff !important;
  padding: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-decoration: none !important;
}
.bacwater-cart-drawer__view-cart {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
}
.bacwater-cart-drawer__empty {
  padding: 48px 24px;
  text-align: center;
}

/* ----- Age gate modal ------------------------------------------------- */
.bacwater-age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bacwater-age-gate__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bacwater-age-gate__card {
  position: relative;
  background: var(--color-bg);
  padding: 40px;
  max-width: 480px;
  width: calc(100% - 32px);
  text-align: center;
  border: 1px solid var(--color-border);
}
.bacwater-age-gate__heading { margin-bottom: 16px; }
.bacwater-age-gate__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
}
.bacwater-age-gate__btn {
  padding: 12px 24px;
  border: 1px solid var(--color-accent);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bacwater-age-gate__btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}
.bacwater-age-gate__btn--ghost {
  background: transparent;
  color: var(--color-text);
}
.bacwater-age-gate__legal {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 16px;
}

/* ----- Compliance footer (shared partial — shape) -------------------- */
.bacwater .brand-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 48px 24px;
  margin-top: 64px;
}
.bacwater .brand-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.bacwater .brand-footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.bacwater .brand-footer__nav a {
  color: var(--color-text);
  font-size: 14px;
}
.bacwater .brand-footer__ruo,
.bacwater .brand-footer__fda,
.bacwater .brand-footer__copy {
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 8px;
}

/* ----- Content pages -------------------------------------------------- */
.bacwater-content { padding: 64px 24px; max-width: 800px; margin: 0 auto; }
.bacwater-content h1 { margin-bottom: 32px; }
.bacwater-content h2 { margin-top: 48px; margin-bottom: 16px; }

/* ----- Lab Results (COAs) -------------------------------------------- */
.bacwater-coas { padding: 64px 24px; max-width: 1200px; margin: 0 auto; }
.bacwater-coas__header { margin-bottom: 40px; }
.bacwater-coas__header h1 { margin-bottom: 8px; }
.bacwater-coas__header p { color: var(--color-muted); font-size: 16px; }

.bacwater-coas__hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
  padding: 28px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
}
@media (max-width: 800px) { .bacwater-coas__hero { grid-template-columns: repeat(2, 1fr); } }
.bacwater-coas__stat {
  text-align: center;
  padding: 8px;
}
/* The band is a NAVY gradient, so its ink is a literal, never a page
   token — and the rules carry the block root: `.bacwater p` sets
   `color` at (0,1,1), which beat these lone classes and painted the
   numbers and labels in the page's dark ink on navy (operator, reading
   the dossier's screenshot of the live page, 2026-10-21). Guard:
   bacwater_coas_band_is_legible_test. */
.bacwater .bacwater-coas__stat-value {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.bacwater .bacwater-coas__stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  font-weight: 600;
  margin-top: 4px;
}

.bacwater-coas__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-muted);
}

/* COA-specific card styling */
.bacwater-card--coa {
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}
.bacwater-card--coa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(194, 24, 91, 0.15);
}
.bacwater-card--coa::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
}
.bacwater-card--coa .bacwater-card__link {
  text-decoration: none;
}
.bacwater-card--coa .bacwater-card__link:hover {
  text-decoration: none;
}

.bacwater-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(194, 24, 91, 0.1);
  color: var(--color-accent);
  margin-bottom: 12px;
}

.bacwater-card__metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.bacwater-card__metric {
  font-size: 13px;
  color: var(--color-muted);
}

.bacwater-card__metric strong {
  color: var(--color-text);
  font-weight: 700;
}

.bacwater-card__metric--pass strong {
  color: #2d8a4e;
}

.bacwater-card__meta {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 8px;
}

.bacwater-card__cta {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}

/* ----- Age gate defensive overrides ---------------------------------
 * Forces the 21+ age gate buttons to be unmissable. Earlier ingestion
 * left them present in the HTML but operator reported "no button to
 * click" — likely an interaction between Vela's button reset rules
 * and our ghost button styling. These rules use !important to win
 * any cascade fight unambiguously.
 */
.bacwater-age-gate {
  display: flex !important;
}
.bacwater-age-gate__card {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.bacwater-age-gate__heading,
.bacwater-age-gate__body {
  color: #111111 !important;
}
.bacwater-age-gate__btn {
  display: inline-block !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  min-width: 140px !important;
  border-radius: 4px !important;
  border: 2px solid #111111 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.bacwater-age-gate__btn--primary {
  background: #111111 !important;
  color: #ffffff !important;
}
.bacwater-age-gate__btn--primary:hover {
  background: #0d4f7a !important;
  border-color: #0d4f7a !important;
}
.bacwater-age-gate__btn--ghost {
  background: #ffffff !important;
  color: #111111 !important;
}
.bacwater-age-gate__btn--ghost:hover {
  background: #f3f4f6 !important;
}

/* =========================================================================
   BacWater shop overrides (2026-05-04)
   =========================================================================
   Operator: 'the entire bacwater store is fucked.'

   Two issues:
   1. The "All" filter chip rendered as a tiny dark square because
      `.bacwater a { color: ... }` (specificity 0,1,1) was winning over
      `.bacwater-filter-bar__chip--active { color: ... }` (0,1,0),
      painting the chip text the same color as its background — invisible.
   2. Card chrome was bare text-on-page, no hover treatment.
   ========================================================================= */

/* Filter chip text visibility — bumped specificity with `a` qualifier. */
.bacwater a.bacwater-filter-bar__chip,
.bacwater a.bacwater-filter-bar__chip:hover,
.bacwater a.bacwater-filter-bar__chip:focus {
  color: var(--color-text) !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}
.bacwater a.bacwater-filter-bar__chip--active,
.bacwater a.bacwater-filter-bar__chip--active:hover {
  background: var(--color-accent) !important;
  color: var(--color-bg) !important;
  border-color: var(--color-accent) !important;
}

/* Card chrome — clean hospital-clinical aesthetic. */
.bacwater .bacwater-card.velaProBlock {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease;
  position: relative;
}
.bacwater .bacwater-card.velaProBlock:hover,
.bacwater .bacwater-card.velaProBlock:focus-within {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 36px rgba(13, 79, 122, 0.12);
}
.bacwater .bacwater-card .velaProBlockInner > .proHImage,
.bacwater .bacwater-card .velaProBlockInner > .proContent {
  padding: 0 16px;
}
.bacwater .bacwater-card .proContent {
  padding: 16px;
  text-align: center;
}
.bacwater .bacwater-card__name {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--color-text);
}
.bacwater .bacwater-card__name a {
  color: inherit !important;
  text-decoration: none !important;
}
.bacwater .bacwater-card__price {
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: 0.02em !important;
}
.bacwater .bacwater-card__view {
  display: inline-block;
  margin-top: 10px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =============================================================================
   BacWater — Safety Data Sheet pages
   =============================================================================
   Per-chemistry SDS library. BacWater is the utilitarian ancillary brand
   (bacteriostatic water, swabs, syringes) so the SDS treatment is
   intentionally neutral chrome — minimal color, structural lines,
   document-grade type. No accent color, no visual ornament.
   ============================================================================= */
body.bacwater .bacwater-sds-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}
body.bacwater .bacwater-sds h1,
body.bacwater .bacwater-sds-detail h1 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
}
body.bacwater .bacwater-sds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
body.bacwater .bacwater-sds__card {
  background: #ffffff;
  border: 1px solid #d4d4d8;
  padding: 18px;
}
body.bacwater .bacwater-sds__card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}
body.bacwater .bacwater-sds__card-meta dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
}
body.bacwater .bacwater-sds__card-meta dd {
  margin: 0 0 4px;
  color: #1a1a1a;
}
body.bacwater .bacwater-sds__card-cta,
body.bacwater .bacwater-sds-detail__pdf-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid #1a1a1a;
  background: #ffffff;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.bacwater .bacwater-sds-detail__meta {
  font-family: "Inter", monospace;
  font-size: 12px;
  color: #6b7280;
  border-top: 1px solid #d4d4d8;
  border-bottom: 1px solid #d4d4d8;
  padding: 6px 0;
  display: inline-block;
  margin: 12px 0;
}
body.bacwater .bacwater-sds-detail__body section {
  margin: 18px 0;
  padding: 16px 18px;
  background: #fafafa;
  border-left: 2px solid #1a1a1a;
}
body.bacwater .bacwater-sds-detail__body section h3 {
  color: #1a1a1a;
  font-size: 14px;
  margin: 0 0 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.bacwater .bacwater-sds-detail__body p {
  font-size: 13px;
  line-height: 1.65;
  color: #1a1a1a;
}
body.bacwater .bacwater-sds__empty,
body.bacwater .bacwater-sds__note,
body.bacwater .bacwater-sds-detail__note {
  color: #6b7280;
  font-size: 11px;
}

/* =============================================================================
   BacWater wordmark — operator (2026-05-05): "fix bac water logo".
   Utilitarian register: condensed mono-leaning sans, dark slate accent
   on the "Water" half so the brand mark splits visually into "Bac" +
   "Water" (bacteriostatic + water). Ember-blue underline reinforces
   the clinical hardware-store voice without adding decorative bling.
   ============================================================================= */
.bacwater-wordmark-frame { margin: 0; }
.bacwater-wordmark-link {
  width: auto;
  /* Operator (2026-05-05): "increase bacwater logo size and move it
     inward from the edge left margin increase". Height bumped 60→84;
     header `padding-left` moved 24→64 in the header partial. */
  height: 84px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
}

/* Operator (2026-05-07): "logo is trashed, too small, but now it is
   also overlayed upon itself". Root cause: vela-site.css applies
   `.velaLogoLink span { position: absolute; }` to EVERY span inside
   the logo link — Glam dodges this because its logo is an <img>, but
   BacWater's text wordmark has multiple spans (`bacwater-wordmark`
   container + `__bac` + `__water` + `__tm` super), so they all
   collapse to the same absolute position and stack. The override
   below restores normal flow for the wordmark spans while keeping
   the `.text-hide` screen-reader span absolutely positioned (it
   carries inline `position: absolute` so a parent `static` doesn't
   override it). The font-size bump uses higher specificity so the
   2.15rem rule wins over Vela's `.velaLogoLink` 21px floor. */
.bacwater-wordmark-link .bacwater-wordmark {
  position: relative;       /* anchor for the ::after underline */
  font-size: 36px;          /* explicitly beat .velaLogoLink 21px */
}
.bacwater-wordmark-link .bacwater-wordmark__bac,
.bacwater-wordmark-link .bacwater-wordmark__water,
.bacwater-wordmark-link .bacwater-wordmark__tm {
  position: static;         /* defeat .velaLogoLink span { absolute } */
}
.bacwater-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  /* WHY absolute px not rem: vela-site.css sets `html { font-size: 10px }`
     so 1rem = 10px, not 16px. The earlier 2.15rem rule painted at 21.5px,
     way too small for a brand mark. Using 36px directly so the logo size
     stops being coupled to whatever theme tokens.css was loaded last. */
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
}
.bacwater-wordmark__bac {
  color: #5B6776;        /* utilitarian slate — recessive */
  letter-spacing: 0.04em;
}
.bacwater-wordmark__water {
  color: #0D4F7A;        /* clinical navy — the brand anchor */
  letter-spacing: 0.04em;
}
.bacwater-wordmark__tm {
  font-family: "Inter", sans-serif;
  font-size: 0.4em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 0.18em;
  letter-spacing: 0;
  color: #5B6776;
}
.bacwater-wordmark::after {
  display: none;         /* operator: remove mouseover underline on logo */
  content: "";
  position: absolute;
  left: 0;
  right: 24%;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, #0D4F7A 0%, #0D4F7A 60%, transparent 100%);
  border-radius: 1px;
}
.bacwater-wordmark-link:hover,
.bacwater-wordmark-link:focus {
  text-decoration: none;
}
.bacwater-wordmark-link:hover .bacwater-wordmark__water,
.bacwater-wordmark-link:focus .bacwater-wordmark__water {
  color: #093653;        /* deeper navy on hover */
}
@media (max-width: 600px) {
  .bacwater-wordmark { font-size: 26px; }
  .bacwater-wordmark-link { height: 64px; }
}

/* ----- Home page card hover + responsive grid ----------------------------- */
.bacwater-home-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
@media (max-width: 1000px) {
  /* 3-col on tablets, 2-col on small tablets, 1-col on phones */
  ul:has(.bacwater-home-card) { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  ul:has(.bacwater-home-card) { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  /* Two to a row on a phone, like the shop (2026-10-23): one card a row
     was ~650px each, six packs four screens long on the Ads landing page.
     The card's spacing is inline, so the overrides carry !important. */
  .bacwater ul:has(.bacwater-home-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .bacwater .bacwater-home-card a.bacwater-card-link > div:first-child { padding: 10px !important; }
  .bacwater .bacwater-home-card a.bacwater-card-link > div:last-child { padding: 10px 8px 14px !important; }
  .bacwater .bacwater-home-card img { width: 100%; max-height: 150px; object-fit: contain; }
  .bacwater .bacwater-home-card h3 { font-size: 14px !important; }
}

/* Trust strip responsive — stack on mobile */
@media (max-width: 700px) {
  .bacwater section:first-of-type + section > div { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Newsletter section — light surface, dark accent CTA. */
body.bacwater .brand-newsletter-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 80px 24px;
}
body.bacwater .brand-newsletter-section__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
body.bacwater .brand-newsletter-section__heading {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-text);
}
body.bacwater .brand-newsletter-section__body {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted);
}
body.bacwater .brand-newsletter-section .field__input {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 14px 16px;
  width: 100%;
  font-size: 15px;
  border-radius: 0;
}
body.bacwater .brand-newsletter-section .newsletter-form__button {
  background: var(--color-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  margin-top: 12px;
  padding: 14px 22px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
body.bacwater .brand-newsletter-section .newsletter-form__message--success {
  color: #2C6E5C;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 14px;
}
body.bacwater .brand-newsletter-section .newsletter-form__message--error {
  color: #B5443A;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 14px;
}

/* =============================================================================
   The theme footer's quiet copy — the brand line and the copyright.
   Vela paints them in its footer grey (#B39AA3, 2.60:1 on the white
   footer, measured 2026-10-03). --color-muted is 5.91:1 on white.
   ============================================================================= */
body.bacwater #velaFooter .contacinfo-desc,
body.bacwater #velaFooter .velaCopyRight {
  color: var(--color-muted);
}

/* The PDP trust row (shared/_pdp_trust_badges) is quiet by colour, not
   opacity — --color-muted is 5.91:1 on white. */
.bacwater .sr-trust-row { color: var(--color-muted); }

/* =============================================================================
   The header on a phone — nothing sits on top of anything (2026-10-04).
   At 360–414px the Bootstrap grid gave the burger, the wordmark and the
   account + cart cluster 25% / 50% / 25% of the row, and the wordmark
   column carried an inline 64px left indent on top of that. The cluster
   could not fit its quarter, so "Sign In" and the cart spilled LEFT
   across the wordmark. Below 768px (where the nav is already behind the
   burger) the burger and the cluster take their natural width and the
   wordmark takes what is left; the 64px indent the operator asked for
   (2026-05-04) is a desktop margin and stays there.
   Guard: test/system/every_brand_header_controls_do_not_overlap_test.rb
   ============================================================================= */
@media (min-width: 768px) {
  .bacwater .velaHeader .velaHeaderLeft { padding-left: 64px; }
}
@media (max-width: 767.98px) {
  .bacwater .velaHeader .velaHeaderMobile,
  .bacwater .velaHeader .velaHeaderRight {
    flex: 0 0 auto;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
  }
  .bacwater .velaHeader .velaHeaderRight { gap: 0.25rem !important; }
  .bacwater .velaHeader .velaHeaderLeft {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
  }
  .bacwater .velaHeader .velaCartIcon { padding: 0.4rem 0.25rem !important; }
}
@media (max-width: 420px) {
  .bacwater .velaHeader .bacwater-wordmark-link .bacwater-wordmark { font-size: 21px; }
}

/* =============================================================================
   bacwater.bio sells on a phone — 2026-10-20.
   Operator: "all sites need to be fucking sexy and sleek and work super
   well on mobile … 83 percent [of BacWater's ad clicks] are on mobile."
   Measured live at 390x844 before this: ~330px of banners and header
   before any content; the hero headline one word per line with its
   subtitle printed across the vial label; on the PDP (the Ads landing
   page) the title, price and Add to Cart a full screen down.
   Every claim and disclaimer is still on the page — only the layout moved.
   Guard: test/system/bacwater_sells_on_a_phone_test.rb (and the fits-a-
   phone, header-overlap, contrast and COA-badge sweeps).
   ============================================================================= */

/* The sticky buy bar is a phone affordance; it never draws on a desktop. */
.bacwater .bacwater-buybar { display: none; }

@media (max-width: 767.98px) {
  /* ── Top chrome ───────────────────────────────────────────────── */
  /* WELCOME10: same words, a slimmer bar (inline styles, hence !important). */
  body.bacwater #sr-welcome-banner,
  body.bacwater #sr-campaign-banner {
    padding: 6px 40px 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  /* The RUO strip is ONE line: the two product facts drop (they are on
     every product page), "Research use only — not for human
     consumption" stays. */
  body.bacwater #velaTopbar { padding: 6px 0; font-size: 11px; line-height: 1.4; }
  body.bacwater #velaTopbar .bacwater-topbar__fact { display: none; }
  body.bacwater #velaTopbar .bacwater-topbar__ruo { white-space: nowrap; letter-spacing: 0.02em; }
  /* Header: one compact row. */
  .bacwater .velaHeader .headerContent { padding: 4px 0; }
  .bacwater .velaHeader .velaLogo { margin: 0; }
  .bacwater .velaHeader .bacwater-wordmark-link { height: 48px; }
  .bacwater .velaHeader .btnMenuMobile,
  .bacwater .velaHeader .velaCartIcon { min-width: 44px; min-height: 44px; }
  .bacwater .velaHeader button.btnMenuMobile {
    border: 1px solid var(--color-border, #E8EEF2);
    border-radius: 8px;
    background: transparent;
  }

  /* ── Hero: photo, then words — never words on the photo ───────── */
  .bacwater .bacwater-hero {
    display: block;
    height: auto;
    background: var(--color-bg, #FFFFFF);
  }
  .bacwater .bacwater-hero .bacwater-hero__img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: 72% 50%;
  }
  .bacwater .bacwater-hero .bacwater-hero__scrim { display: none; }
  .bacwater .bacwater-hero .bacwater-hero__inner { padding: 22px 20px 28px; }
  .bacwater .bacwater-hero .bacwater-hero__copy { max-width: none; }
  .bacwater .bacwater-hero .bacwater-hero__eyebrow {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.2em;
  }
  .bacwater .bacwater-hero .bacwater-hero__title {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .bacwater .bacwater-hero .bacwater-hero__break { display: none; }
  .bacwater .bacwater-hero .bacwater-hero__lede {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
    max-width: none;
  }
  .bacwater .bacwater-hero .bacwater-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .bacwater .bacwater-hero a.bacwater-hero__cta {
    display: block;
    width: 100%;
    padding: 16px 12px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.16em;
    font-size: 14px;
  }
  .bacwater .bacwater-hero a.bacwater-hero__link {
    display: flex;
    align-self: center;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ── PDP: the image card fits the image; the buy box comes up ─── */
  .bacwater .bacwater-pdp { padding-top: 12px; padding-bottom: 24px; }
  .bacwater .bacwater-pdp .proBoxPrimary { margin-top: 12px; }
  .bacwater .bacwater-pdp .proBoxPrimary > .row { margin-left: 0; margin-right: 0; }
  .bacwater .bacwater-pdp .bacwater-pdp__image {
    aspect-ratio: auto;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #F4F4F5;
  }
  .bacwater .bacwater-pdp .bacwater-pdp__image .pdp-gallery__main { margin-bottom: 0; }
  .bacwater .bacwater-pdp .bacwater-pdp__image .brand-product-img {
    aspect-ratio: auto !important;
    max-height: 300px;
    object-fit: contain;
  }
  .bacwater .bacwater-pdp .bacwater-pdp__name { font-size: 28px; margin: 4px 0 8px; }
  .bacwater .bacwater-pdp .bacwater-pdp__cart-form .proQuantity { margin-bottom: 4px; }
  .bacwater .bacwater-pdp .bacwater-pdp__cart-form .proButtons { display: block; width: 100%; }
  .bacwater .bacwater-pdp .bacwater-pdp__add {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 6px;
  }

  /* The sticky bar: the same form's second submit button. */
  .bacwater .bacwater-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800; /* under the COA badge (900) and the cart drawer (1050) */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid var(--color-border, #E8EEF2);
    box-shadow: 0 -6px 24px rgba(13, 21, 33, 0.10);
  }
  .bacwater .bacwater-buybar .bacwater-buybar__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .bacwater .bacwater-buybar .bacwater-buybar__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #0D1521);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bacwater .bacwater-buybar .bacwater-buybar__price {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text, #0D1521);
  }
  .bacwater .bacwater-buybar button.bacwater-buybar__add {
    flex: 0 0 auto;
    min-height: 48px;
    min-width: 150px;
    padding: 0 22px;
    border: 0;
    border-radius: 6px;
    background: var(--color-accent, #C2185B);
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .bacwater .bacwater-buybar button.bacwater-buybar__add:active { background: #880E4F; }
  /* Room at the foot of the page so the bar never hides the footer's
     last line, and the COA badge rides ABOVE the bar, not under it. */
  body.bacwater:has(.bacwater-buybar) { padding-bottom: 76px; }
  body.bacwater:has(.bacwater-buybar) #coa-trust-badge {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Shop: products in the first screen, two to a row ─────────── */
  .bacwater .bacwater-shop .bacwater-shop__flow { display: flex; flex-direction: column; }
  .bacwater .bacwater-shop .bacwater-shop__header { padding: 18px 0 8px !important; }
  .bacwater .bacwater-shop .bacwater-shop__heading { font-size: 28px; margin-bottom: 6px; }
  .bacwater .bacwater-shop .bacwater-shop__subhead { font-size: 14px; line-height: 1.5; margin: 0; }
  .bacwater .bacwater-shop .bacwater-shop__filters {
    order: 1;
    justify-content: flex-start !important;
    margin: 0 0 12px !important;
    padding: 8px 0;
  }
  .bacwater .bacwater-shop .bacwater-shop__filters--solo { display: none !important; }
  .bacwater .bacwater-shop a.bacwater-shop__subscribe-jump {
    order: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #166534;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .bacwater .bacwater-shop .collBoxProducts { order: 2; }
  .bacwater .bacwater-shop .bacwater-shop__subscribe { order: 3; margin-top: 24px; }
  .bacwater .bacwater-shop .bacwater-shop__ruo-note { order: 4; }
  .bacwater .bacwater-shop .bacwater-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bacwater .bacwater-shop .bacwater-card.velaProBlock { padding: 0; }
  .bacwater .bacwater-shop .bacwater-card .velaProBlockInner > .proHImage { padding: 8px 8px 0; }
  .bacwater .bacwater-shop .bacwater-card .proContent { padding: 10px 8px 14px; }
  .bacwater .bacwater-shop .bacwater-card__name { font-size: 15px; line-height: 1.25; }
  .bacwater .bacwater-shop .bacwater-card__tagline,
  .bacwater .bacwater-shop .bacwater-card__dose { font-size: 12px; margin: 0 0 2px; }
  .bacwater .bacwater-shop .bacwater-card__price { font-size: 18px !important; }
  .bacwater .bacwater-shop .bacwater-card__view { margin-top: 6px; font-size: 11px; }
  .bacwater .bacwater-shop .brand-product-img { aspect-ratio: 1 / 1 !important; }
}
/* Desktop never shows the jump: the box it points to is right there. */
@media (min-width: 768px) {
  .bacwater .bacwater-shop a.bacwater-shop__subscribe-jump { display: none; }
}

/* The paused-Subscribe waitlist form (shared/_subscription_maintenance)
   is a flex ROW of label, input, label, input and a 100%-wide button —
   on /shop the button ran past the right edge at every width (measured
   2026-10-20). On BacWater it is a grid: label beside its field, the
   button across the bottom. Scoped to .bacwater; the shared sheet is
   another brand's concern. */
.bacwater .sr-widget--subscribe .sr-widget__form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
}
.bacwater .sr-widget--subscribe .sr-widget__form .sr-widget__note { margin: 0; }
.bacwater .sr-widget--subscribe .sr-widget__form input.sr-widget__input { width: 100%; min-width: 0; }
.bacwater .sr-widget--subscribe .sr-widget__form button.sr-widget__button--block {
  grid-column: 1 / -1;
  margin-top: 4px;
  min-height: 44px;
}
@media (min-width: 768px) {
  .bacwater .bacwater-shop .sr-widget--subscribe .sr-widget__form {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

/* ── No text under 12px on a phone — 2026-10-23 ─────────────────────────
   Measured live at 390px: the research-use note on /shop at 8.5px, the
   card's "View →" and the hero eyebrow at 11px. Guard:
   test/system/storefront_text_is_readable_on_a_phone_test.rb. */
@media (max-width: 767.98px) {
  .bacwater .bacwater-hero .bacwater-hero__eyebrow,
  .bacwater .bacwater-shop .bacwater-shop__ruo-note,
  .bacwater .bacwater-shop .bacwater-card__view,
  .bacwater .bacwater-card__view {
    font-size: 12px;
  }
}