/* WaterReady shop pages. Same design tokens as about.html / faq.html. */
:root{
  --ink:#12303A; --ink-soft:#3E5C63; --teal:#1F5D5B; --teal-deep:#123B3A;
  --panel-navy:#0F3049; --aqua-pale:#EAF3F1; --bg:#F6F9F8; --white:#FFFFFF;
  --line:#D8E3E0; --amber:#C97B2A; --amber-pale:#FBF1E4; --ok:#2E7D4F;
  --sans:'IBM Plex Sans', system-ui, sans-serif; --serif:'Fraunces', Georgia, serif;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--serif); color:var(--teal-deep); font-weight:600; line-height:1.25; }
a{ color:var(--teal); }
.wrap{ max-width:760px; margin:0 auto; padding:0 16px; }
header.site{ background:var(--panel-navy); padding:18px 0; }
header.site .wrap{ display:flex; align-items:center; gap:10px; }
header.site a.brand{ color:#fff; text-decoration:none; font-family:var(--serif); font-weight:600; font-size:18px; }
header.site nav{ margin-left:auto; }
header.site nav a{ color:#fff; text-decoration:none; font-size:14px; font-weight:600; margin-left:16px; }
main{ padding:36px 0 56px; }
h1{ font-size:30px; margin:0 0 8px; }
h2{ font-size:21px; margin:32px 0 10px; }
h3{ font-size:17px; margin:20px 0 6px; }
p, li{ font-size:15px; color:var(--ink-soft); }
ul{ padding-left:20px; }
.lede{ font-size:17px; color:var(--ink-soft); margin:0 0 24px; }
.eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
.card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:0 0 20px; }
.card.navy{ background:var(--panel-navy); border-color:var(--panel-navy); color:#fff; }
.card.navy h2, .card.navy h3, .card.navy p, .card.navy li{ color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0; }
.stat{ background:var(--aqua-pale); border-radius:10px; padding:12px 14px; }
.stat b{ display:block; font-family:var(--serif); font-size:24px; color:var(--teal-deep); }
.stat span{ font-size:13px; color:var(--ink-soft); }
.ticks{ list-style:none; padding:0; margin:0; }
.ticks li{ position:relative; padding:6px 0 6px 28px; }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:6px; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.btn{ display:inline-block; border:0; border-radius:10px; padding:14px 22px; font:600 16px var(--sans); cursor:pointer; text-decoration:none; text-align:center; }
.btn.primary{ background:var(--amber); color:#fff; }
.btn.primary:hover{ filter:brightness(.95); }
.btn.secondary{ background:var(--white); color:var(--teal-deep); border:1px solid var(--line); }
.btn.block{ display:block; width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.bump{ border:2px dashed var(--amber); background:var(--amber-pale); border-radius:12px; padding:16px 18px; margin:16px 0; }
.bump label{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.bump input{ width:20px; height:20px; margin-top:3px; flex:none; accent-color:var(--amber); }
.bump .bump-title{ font-weight:700; color:var(--ink); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); margin:14px 0; }
.consent input{ width:18px; height:18px; margin-top:2px; flex:none; }
.price{ font-family:var(--serif); font-size:28px; color:var(--teal-deep); }
.price s{ font-size:18px; color:var(--ink-soft); margin-left:6px; }
.small{ font-size:13px; color:var(--ink-soft); }
.error{ background:#FDECEC; border:1px solid #F3C1C1; color:#8A1F1F; border-radius:10px; padding:12px 14px; font-size:14px; display:none; }
.notice{ background:var(--aqua-pale); border-radius:10px; padding:12px 14px; font-size:14px; }
.sources{ font-size:12px; color:var(--ink-soft); }
.sources li{ font-size:12px; }
table.plain{ width:100%; border-collapse:collapse; font-size:14px; }
table.plain th, table.plain td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
footer.site{ background:var(--panel-navy); color:#B9D2CC; padding:24px 0; font-size:13px; text-align:center; }
footer.site a{ color:#fff; }
@media (max-width:560px){ h1{ font-size:25px; } .card{ padding:16px; } }
@media print{
  header.site, footer.site, .no-print{ display:none !important; }
  body{ background:#fff; }
  main{ padding:0; }
  .card{ break-inside:avoid; border-color:#bbb; }
  .page-break{ break-before:page; }
}