/* No Brainer Water Co. - shop page only. Agent B. */

/* water-source fork - the page opens on this, not the grid */
.fork__lead { max-width: 42em; }
.fork-grid {
  display: grid; gap: 1.4rem; grid-template-columns: 1fr;
  margin-top: 2.2rem;
}
@media (min-width: 700px) { .fork-grid { grid-template-columns: 1fr 1fr; } }
.fork__tile {
  display: block;
  border-radius: var(--radius-card);
  padding: 2.2rem 2rem;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.14);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fork__tile:hover { border-color: rgb(var(--accent) / 0.6); transform: translateY(-2px); }
.fork__tile .kicker { margin-bottom: 0.6rem; }
.fork__tile h3 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.fork__tile p { margin: 0; opacity: 0.78; font-size: var(--text-sm); }
.fork__tile .arrow { display: inline-block; margin-top: 1.1rem; font-size: var(--text-sm); color: rgb(var(--accent)); }

/* shelf groups */
.shelf-group + .shelf-group { margin-top: var(--section-pad-block); }
.shelf-group__head { max-width: 46em; margin-bottom: 2.2rem; }

.shelf-grid {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .shelf-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .shelf-grid { grid-template-columns: repeat(3, 1fr); } }

.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card__media {
  border-radius: var(--radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgb(var(--paper-dim));
  margin: -1.6rem -1.6rem 1.2rem;
}
.product-card__media { background: #05173a; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__tag {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--w-medium);
  letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.4rem;
}
.product-card h3 { margin-bottom: 0.3rem; }
.product-card__price { font-weight: var(--w-medium); font-size: 1.1rem; margin: 0.1rem 0 0.7rem; }
.product-card__note { font-size: var(--text-sm); opacity: 0.78; margin: 0 0 1.2rem; flex-grow: 1; }
.product-card .btn { align-self: flex-start; }

/* filter plan card gets a slightly different treatment - it's the flagship */
.product-card--plan { background: rgb(var(--ink)); color: #fff; border-color: transparent; }
.product-card--plan .product-card__price { color: rgb(var(--accent)); }
.product-card--plan .product-card__note { opacity: 0.82; }

.shelf-attach-note {
  margin-top: 2.4rem; font-size: var(--text-sm); opacity: 0.7; max-width: 42em;
}
.fork__img { width: 100%; height: 260px; object-fit: cover; border-radius: calc(var(--radius-card) - 6px); margin-bottom: 0.8rem; }

.cert-strip--band { margin-top: 2rem; }
.card-certs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.15rem 0 0.55rem; }
.card-certs span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: var(--w-semibold); opacity: 0.75; border: 1px solid rgb(var(--ink) / 0.14); border-radius: 999px; padding: 0.14rem 0.55rem; }
.card-certs img { height: 14px; width: auto; }

.product-card--featured { border: 2px solid #37d6e5; position: relative; }
.product-card--featured::before { content: 'MOST POPULAR'; position: absolute; top: 10px; left: 10px; z-index: 2; background: #37d6e5; color: #021c46; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; border-radius: 999px; padding: 0.2rem 0.6rem; }

/* job chip - what it does and who it's for, on every card (18 Aug 2026) */
.product-card__job { font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--chip-blue, #2354B4); font-weight: 600; margin: 0 0 .35rem; }

.product-card__bestfor { font-size: 0.875rem; font-weight: 600; color: rgb(var(--ink, 2 28 70));
  margin: .5rem 0 .15rem; }

/* single-product shelf (19 Aug 2026): two cards, centred pair */
.shelf-grid--pair { max-width: 900px; }
@media (min-width: 1100px) { .shelf-grid--pair { grid-template-columns: 1fr 1fr; } }
.product-card__pay { font-size: var(--text-xs); opacity: 0.65; margin: -0.5rem 0 0.6rem; }
@media (min-width: 1000px) { .fork-grid { grid-template-columns: repeat(3, 1fr); } }
.fork-grid .fork__tile:hover { transform: none; border-color: rgb(255 255 255 / 0.14); }

/* AquaTru card anatomy (20 Aug 2026): one-liner, exactly three features,
   price, Afterpay figure, one button. No stars - we have no reviews yet. */
.product-card__line { margin: 0 0 0.8rem; font-size: var(--text-sm); opacity: 0.8; }
.product-card__features { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; font-size: var(--text-sm); flex-grow: 1; align-content: start; }
.product-card__features li { padding-left: 1.3rem; position: relative; opacity: 0.85; }
.product-card__features li::before { content: "\2713"; position: absolute; left: 0; color: #37d6e5; font-weight: 800; }
.product-card--plan .product-card__features li::before { color: rgb(var(--accent)); }
.product-card__unit { font-size: var(--text-sm); font-weight: var(--w-regular); opacity: 0.65; }
.product-card__addon { font-size: var(--text-xs); opacity: 0.7; margin: -0.2rem 0 0.8rem; }
.product-card .btn { align-self: stretch; text-align: center; margin-top: auto; }
.product-card__price { margin-top: 0.2rem; }