/* No Brainer Water Co. - shared PDP styles (all products/*.html + filter-plan.html). Agent B. */

/* gallery + title/price top block */
.pdp-top {
  display: grid; gap: 2.4rem; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pdp-top { grid-template-columns: 1fr 1fr; align-items: start; } }

.pdp-gallery img { border-radius: var(--radius-media); width: 100%; object-fit: cover; }
/* Containers take each photo's own ratio (Mason, 17 Aug: letterboxing on a
   painted navy read cheap). The row's columns are proportioned to the two
   images' aspect ratios (2:3 portrait next to 3:2 landscape = 4fr 9fr), so
   both render at identical height with zero cropping and zero bars. The wide
   comparison panel gets its own full-width slot at natural ratio. */
.pdp-gallery__main { overflow: hidden; border-radius: var(--radius-media); }
.pdp-gallery__main img { width: 100%; height: auto; display: block; }
.pdp-gallery__row { display: grid; grid-template-columns: 4fr 9fr; gap: 0.9rem; margin-top: 0.9rem; }
.pdp-gallery__row .media-rounded { overflow: hidden; }
.pdp-gallery__row img { width: 100%; height: auto; display: block; }
.pdp-gallery__wide { margin-top: 0.9rem; overflow: hidden; }
.pdp-gallery__wide img { width: 100%; height: auto; display: block; }
.pdp-gallery__caption { font-size: var(--text-xs); opacity: 0.55; margin-top: 0.6rem; }

.pdp-info .kicker { margin-bottom: 0.7rem; }
.pdp-info h1 { font-weight: var(--w-medium); font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 0.6rem; }
.pdp-price { font-size: 1.5rem; font-weight: var(--w-medium); margin: 0 0 1rem; }
.pdp-price .unit { font-size: var(--text-sm); font-weight: var(--w-regular); opacity: 0.65; }
.pdp-dek { opacity: 0.82; max-width: 42em; margin: 0 0 1.6rem; }

/* spec table - reuses .ladder from layout.css for row rhythm */
.spec-table th, .spec-table td { padding: 0.7rem 0; }
.spec-table th { width: 40%; opacity: 0.6; font-weight: var(--w-regular); }

/* purchase module - the load-bearing spec */
.purchase-module { margin: 2.2rem 0; }
.tiles { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative;
  border-radius: var(--radius-card);
  border: 1.5px solid rgb(var(--ink) / 0.12);
  padding: 1.5rem 1.4rem 1.4rem;
  background: rgb(var(--paper));
}
.sec--dark .tile, .sec--dark2 .tile { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.14); }
.tile--recommended { border-color: rgb(var(--accent)); box-shadow: 0 0 0 2px rgb(var(--accent) / 0.4); }
.tile__badge {
  position: absolute; top: -0.7rem; left: 1.2rem;
  background: rgb(var(--accent)); color: rgb(var(--accent-ink));
  font-size: var(--text-xs); font-weight: var(--w-medium);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.28rem 0.75rem; border-radius: 999px;
}
.tile h3 { margin-bottom: 0.25rem; font-size: 1.1rem; }
.tile__price { font-weight: var(--w-medium); margin: 0.15rem 0 0.7rem; }
.tile ul { margin: 0 0 1.1rem; padding-left: 1.1rem; font-size: var(--text-sm); opacity: 0.85; }
.tile ul li { margin-bottom: 0.4rem; }
.tile .btn { width: 100%; text-align: center; }
.tile__micro { font-size: var(--text-xs); opacity: 0.65; margin-top: 0.8rem; }

/* cadence explainer - the working, shown, never a dropdown */
.cadence {
  background: rgb(var(--paper-dim));
  border-radius: var(--radius-card);
  padding: 1.4rem 1.6rem;
  margin: 1.6rem 0;
  font-size: var(--text-sm);
}
.sec--dark .cadence, .sec--dark2 .cadence { background: rgb(255 255 255 / 0.06); }
.cadence strong { font-weight: var(--w-medium); }
.cadence__working { opacity: 0.75; margin-top: 0.5rem; }

/* monthly/annual toggle - CSS-only, no extra JS (main.js is Fable-owned) */
.freq { margin: 0.9rem 0 0.4rem; }
.toggle { display: inline-flex; background: rgb(var(--ink) / 0.07); border-radius: 999px; padding: 3px; }
.sec--dark .toggle, .sec--dark2 .toggle { background: rgb(255 255 255 / 0.12); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle label {
  padding: 0.45rem 1rem; border-radius: 999px; font-size: var(--text-xs);
  font-weight: var(--w-medium); cursor: pointer; display: inline-block;
}
.toggle input:checked + label { background: rgb(var(--ink)); color: #fff; }
.sec--dark .toggle input:checked + label, .sec--dark2 .toggle input:checked + label { background: #fff; color: rgb(var(--ink)); }
.freq-panel--monthly { display: none; }
.freq-panel { font-size: var(--text-sm); margin-top: 0.6rem; }
/* scoped via :has() since the panels sit outside .toggle, not as direct siblings of the inputs */
.freq:has(.toggle__input--monthly:checked) .freq-panel--annual { display: none; }
.freq:has(.toggle__input--monthly:checked) .freq-panel--monthly { display: block; }
.needs-mason { opacity: 0.6; font-style: italic; }

/* cancel line */
.cancel-line {
  font-size: var(--text-sm); opacity: 0.85; margin: 1.2rem 0 0;
  padding-top: 1.2rem; border-top: 1px solid rgb(var(--ink) / 0.12);
}
.sec--dark .cancel-line, .sec--dark2 .cancel-line { border-color: rgb(255 255 255 / 0.14); }

/* trust row */
.trust-row {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem;
  margin: 1.6rem 0; font-size: var(--text-xs); opacity: 0.75;
}
.trust-row span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* install block */
.install-block {
  border-radius: var(--radius-card);
  border: 1px solid rgb(var(--ink) / 0.12);
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0;
  font-size: var(--text-sm);
}
.sec--dark .install-block, .sec--dark2 .install-block { border-color: rgb(255 255 255 / 0.14); }
.install-block p { margin: 0 0 0.7rem; }
.install-block p:last-child { margin-bottom: 0; }
.install-block a { text-decoration: underline; }

/* reviews slot - empty, honest, no fake reviews */
.reviews-slot {
  border: 1px dashed rgb(var(--ink) / 0.25);
  border-radius: var(--radius-card);
  padding: 2rem; text-align: center; font-size: var(--text-sm); opacity: 0.65;
}

/* cross-sell - a visible card, so the label and pills read as one unit
   instead of floating at opposite edges of an invisible box */
.crosssell {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; border-radius: var(--radius-card); padding: 1.5rem 1.8rem;
  background: #fff; border: 1px solid rgb(var(--ink) / 0.1);
  box-shadow: 0 6px 22px rgb(2 28 70 / 0.05);
}
.sec--dark .crosssell, .sec--dark2 .crosssell { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.14); box-shadow: none; }
.crosssell p { margin: 0; font-size: var(--text-sm); opacity: 0.85; }

/* honesty note under how-it-works - a quiet card, not an orphan paragraph */
.pdp-note {
  margin-top: 2rem; padding: 1.1rem 1.4rem; border-radius: var(--radius-card);
  background: #fff; border: 1px solid rgb(var(--ink) / 0.1);
  font-size: var(--text-sm); line-height: 1.6;
}
.pdp-note p { margin: 0; }

/* claim gate note - visible but quiet, marks unverified data */
.verify-note { font-size: var(--text-xs); opacity: 0.5; margin-top: 0.5rem; }

/* tier cards - filter-plan.html flagship + reused inline on plan mentions */
.tier-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
.tier {
  position: relative; border-radius: var(--radius-card);
  border: 1.5px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.04);
  padding: 1.8rem 1.6rem 1.6rem;
  display: flex; flex-direction: column;
}
.tier--recommended { border-color: rgb(var(--accent)); box-shadow: 0 0 0 2px rgb(var(--accent) / 0.4); }
.tier__badge {
  position: absolute; top: -0.75rem; left: 1.3rem;
  background: rgb(var(--accent)); color: rgb(var(--accent-ink));
  font-size: var(--text-xs); font-weight: var(--w-medium);
  padding: 0.28rem 0.8rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
}
.tier__name { font-size: 1.2rem; margin: 0.3rem 0 0.2rem; }
.tier__price { font-size: 1.7rem; font-weight: var(--w-medium); margin: 0.2rem 0 0.3rem; }
.tier__cadence { font-size: var(--text-sm); opacity: 0.7; margin-bottom: 0.9rem; }
.tier__copy { font-size: var(--text-sm); opacity: 0.85; margin: 0 0 1.3rem; flex-grow: 1; }
.tier .btn { width: 100%; text-align: center; }

/* how-it-works strip - columns adapt to the number of stages, so two
   stages fill the row instead of leaving a dead third column */
.strip { display: grid; gap: 2rem 2.4rem; grid-template-columns: 1fr; counter-reset: step; margin-top: 0.6rem; }
@media (min-width: 800px) { .strip { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.strip__step { position: relative; padding-left: 2.6rem; }
.strip__step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: rgb(var(--accent)); color: rgb(var(--accent-ink));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--w-medium);
}
.strip__step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.strip__step p { font-size: var(--text-sm); opacity: 0.8; margin: 0; }
.plan-hero__media { max-width: 860px; margin: 2.5rem auto 0; }
.plan-hero__media img { width: 100%; height: 340px; object-fit: cover; }

/* borrowed-trust strip: real marks, exact scope, per product */
.cert-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.cert { display: flex; align-items: center; gap: 0.7rem; background: #fff; border: 1px solid rgb(var(--ink) / 0.12); border-radius: 12px; padding: 0.65rem 1rem; }
.sec--dark .cert, .sec--dark2 .cert { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.15); }
.cert img { height: 44px; width: auto; border-radius: 6px; }
.cert span { font-size: 0.78rem; line-height: 1.3; opacity: 0.85; }
.cert b { display: block; font-size: 0.9rem; }

.pay-4 { font-size: var(--text-sm); opacity: 0.75; margin: -0.5rem 0 1rem; }
.pay-4 b { font-weight: var(--w-semibold); }

/* Full-image rule (Mason, 14 Aug): every gallery image displays complete -
   contain, never cover-crop. Navy ground so letterboxing reads intentional.
   Click still magnifies via the lightbox. */


/* ---- Cold-traffic conversion block (Mason, 16 Aug 2026) ----
   58 cold visitors read the ES60 page on night one and zero added to cart.
   Diagnosis: the video that earned the 11.7% click vanished at the moment of
   decision, there was nothing telling a stranger who we are, and the price
   arrived before any reason to want it. Order is now:
   video -> trust -> value -> objections -> price -> buy. */

.founder { margin: 1.2rem 0 1.4rem; }
.founder__vid {
  width: 100%; max-width: 420px; display: block;
  border-radius: var(--radius-card, 14px); background: #05173a;
}
.founder__cap { font-size: var(--text-xs); opacity: 0.6; margin-top: 0.5rem; }

.trust-strip {
  list-style: none; margin: 0 0 1.4rem; padding: 1rem 1.2rem;
  background: rgb(var(--paper-dim, 244 246 249)); border-radius: var(--radius-card, 14px);
  display: grid; gap: 0.75rem;
}
.trust-strip li { font-size: var(--text-sm); line-height: 1.45; opacity: 0.85; }
.trust-strip b { display: block; opacity: 1; margin-bottom: 0.1rem; }

.objections { display: grid; gap: 0.9rem; margin: 1.4rem 0; }
.objections > div {
  font-size: var(--text-sm); line-height: 1.5; opacity: 0.85;
  padding-top: 0.9rem; border-top: 1px solid rgb(var(--ink) / 0.12);
}
.objections b { display: block; opacity: 1; margin-bottom: 0.2rem; }

.buy-early { margin: 0.4rem 0 1.6rem; }
.buy-early .btn { width: 100%; text-align: center; }
@media (min-width: 640px) { .buy-early .btn { width: auto; min-width: 320px; } }

.buy-again {
  margin: 2.4rem 0 0; padding: 1.6rem; text-align: center;
  background: rgb(var(--paper-dim, 244 246 249)); border-radius: var(--radius-card, 14px);
}
.buy-again p { margin: 0 0 0.9rem; font-size: var(--text-sm); opacity: 0.8; }
.buy-again .btn { min-width: 300px; }

/* On a phone the four gallery images cost 620px before the heading, so a cold
   visitor scrolls a full screen before reading a word. Same images, one
   swipeable strip, ~210px. Desktop keeps the stacked grid. */
@media (max-width: 899px) {
  .pdp-gallery {
    display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-bottom: 1.1rem; padding-bottom: 0.2rem;
  }
  .pdp-gallery::-webkit-scrollbar { display: none; }
  .pdp-gallery__main { flex: 0 0 auto; height: 300px; scroll-snap-align: start; }
  .pdp-gallery__main img { width: auto; height: 100%; }
  .pdp-gallery__row {
    display: flex; gap: 0.7rem; margin-top: 0; grid-template-columns: none;
  }
  .pdp-gallery__row .media-rounded {
    flex: 0 0 auto; height: 300px; scroll-snap-align: start;
    border-radius: var(--radius-media);
  }
  .pdp-gallery__row img { width: auto; height: 100%; }
  .pdp-gallery__wide { flex: 0 0 auto; height: 300px; margin-top: 0; scroll-snap-align: start; border-radius: var(--radius-media); }
  .pdp-gallery__wide img { width: auto; height: 100%; }
}

/* Reclaim the hero's top padding on a phone - every pixel above the fold is
   paid for at $0.60 a click. */
@media (max-width: 899px) {
  .sec[data-hero] { padding-top: 20px; }
  .pdp-info .kicker { margin-bottom: 0.45rem; }
}

.crosssell__note { font-size: var(--text-sm); opacity: 0.7; margin: 0.4rem 0 1rem; max-width: 46ch; }
.buy-again { border: 1px solid rgb(var(--ink) / 0.1); }

/* The quiz link the video promises. Ghost and small on purpose - it sits on a
   purchase page and must not out-shout the buy button. */
.video-quiz { margin: 0.9rem 0 1.3rem; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--text-sm); }

.save-detail { font-size: var(--text-sm); opacity: 0.7; margin: 0.2rem 0 0.5rem; }

/* AquaTru PDP anatomy (20 Aug 2026): one-liner + three bullets above the
   buy box, accordion stack below the trust triple. */
.pdp-oneliner { font-size: var(--text-lg); opacity: 0.85; margin: 0 0 0.9rem; max-width: 34em; }
.pdp-bullets { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.45rem; font-size: var(--text-sm); }
.pdp-bullets li { padding-left: 1.3rem; position: relative; opacity: 0.85; }
.pdp-bullets li::before { content: "\2713"; position: absolute; left: 0; color: #37d6e5; font-weight: 800; }
.pdp-acc { margin: 1.6rem 0 1.4rem; }
.pdp-acc .acc__q { font-size: 1rem; padding: 1.05rem 2.5rem 1.05rem 0; }
.pdp-acc .acc__a { max-width: none; }

/* remineraliser add-on block */
.addon { margin-top: 2rem; border-radius: var(--radius-card); border: 1px solid rgb(var(--ink) / 0.12); background: rgb(var(--paper-dim)); padding: 1.4rem 1.6rem; }
.addon h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.addon p { margin: 0; font-size: var(--text-sm); opacity: 0.85; line-height: 1.55; }

/* Same rows as the objections block up top, so the page has one calm pattern
   for "here is a thing worth knowing" instead of five different boxes. */
.details { display: grid; gap: 0.9rem; margin: 1.3rem 0 0; }
.details > div {
  font-size: var(--text-sm); line-height: 1.55; opacity: 0.85;
  padding-top: 0.9rem; border-top: 1px solid rgb(var(--ink) / 0.12);
}
.details b { display: block; opacity: 1; margin-bottom: 0.2rem; }
.details a { text-decoration: underline; text-underline-offset: 2px; }

/* The lower step. A $1,495 page with only one action - pay now - leaks every
   visitor who is interested but not yet certain. Deliberately quiet styling:
   it must be findable, not compete with the buy button. */
.ask-first {
  font-size: var(--text-sm); line-height: 1.5; opacity: 0.8;
  margin: 0.9rem 0 1.6rem; max-width: 46ch;
}
.ask-first a { text-decoration: underline; text-underline-offset: 2px; }

.ask-first__or { margin-top: 0.9rem; font-size: var(--text-sm); opacity: 0.75; }
.ask-first #cbForm { margin-top: 1rem; max-width: 340px; }
.ask-first #cbForm .quiz__field { margin-bottom: 0.7rem; }

/* "Will it fit MY kitchen" cannot be answered by one photo. Six ordinary NZ
   kitchens answer it by weight of example. The note underneath is not optional:
   these are product visualisations and must never read as customer installs. */
.fits-strip { margin: 2rem 0 1.5rem; }
.fits-strip h3 { font-size: var(--text-lg); margin: 0 0 0.3rem; }
.fits-strip > p { font-size: var(--text-sm); opacity: 0.75; margin: 0 0 1rem; max-width: 52ch; }
.fits-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 640px) { .fits-strip__grid { grid-template-columns: repeat(3, 1fr); } }
.fits-strip__grid img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-media); display: block; background: rgb(var(--paper-dim));
}
.fits-strip__note { font-size: var(--text-xs); opacity: 0.55; margin-top: 0.8rem; max-width: 52ch; }

/* Honest comparison table (17 Aug 2026, from the overseas teardown - every
   competitor runs one; ours stays qualitative except our own price). */
.compare-wrap { overflow-x: auto; margin-top: 1.6rem; }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.compare-table th, .compare-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid rgba(2,28,70,0.1); vertical-align: top; }
.compare-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.compare-table tbody th { font-weight: var(--w-medium); width: 20%; }
.compare-table .compare-hero { background: rgba(55,214,229,0.09); font-weight: var(--w-medium); }
.compare-table thead .compare-hero { opacity: 1; color: #021c46; }