/* =============================================================================
   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: #111111;
  --color-text: #111111;
  --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 ----------------------------------------------------------- */
.bacwater-hero {
  padding: 80px 24px;
  text-align: center;
  background: var(--color-surface);
}
.bacwater-hero__inner { max-width: 800px; margin: 0 auto; }
.bacwater-hero__wordmark { margin-bottom: 16px; }
.bacwater-hero__tagline { font-size: 20px; color: var(--color-muted); margin-bottom: 32px; }
.bacwater-hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 14px 32px;
  font-weight: 600;
}
.bacwater-hero__cta:hover { text-decoration: none; opacity: 0.9; }

/* ----- 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); }
.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: var(--color-surface);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}
.bacwater-pdp__data { }
.bacwater-pdp__add {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 14px 32px;
  font-weight: 600;
  border: none;
  font-family: inherit;
  cursor: pointer;
  margin-top: 16px;
}
.bacwater-pdp__qty {
  width: 80px;
  padding: 10px;
  border: 1px solid var(--color-border);
  font-size: 16px;
  font-family: inherit;
}

/* ----- Cart ----------------------------------------------------------- */
.bacwater-cart { padding: 64px 24px; max-width: 1200px; margin: 0 auto; }
.bacwater-cart__items { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.bacwater-cart__items th,
.bacwater-cart__items td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.bacwater-cart__total { font-size: 24px; font-weight: 700; text-align: right; }

/* ----- Cart drawer ---------------------------------------------------- */
.bacwater-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  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: 10px;
  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;
}
.bacwater-cart-drawer__checkout {
  display: block;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.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__hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 64px;
  padding: 32px;
  background: var(--color-surface);
}
@media (max-width: 800px) { .bacwater-coas__hero { grid-template-columns: repeat(2, 1fr); } }
.bacwater-coas__stat { text-align: center; }
.bacwater-coas__stat-value { font-size: 32px; font-weight: 800; }
.bacwater-coas__stat-label { font-size: 12px; text-transform: uppercase; color: var(--color-muted); }

/* ----- 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: 10px;
  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 {
  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__water,
.bacwater-wordmark-link:focus .bacwater-wordmark__water {
  color: #093653;        /* deeper navy on hover */
}
.bacwater-wordmark-link:hover .bacwater-wordmark::after,
.bacwater-wordmark-link:focus .bacwater-wordmark::after {
  right: 18%;            /* underline extends a hair on hover */
  transition: right 200ms ease;
}
@media (max-width: 600px) {
  .bacwater-wordmark { font-size: 26px; }
  .bacwater-wordmark-link { height: 64px; }
}

/* 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;
}