/* A range's own store page (src/site/productPages.js STORE_RANGE_PAGES):
   /health-tests/genetic/, /health-tests/microbiome/, /wearables/ring/,
   /wearables/band/. The store's category page (shop.css, laid out as
   /supplements/) with, on the two test ranges, a compare and More to explore
   (public/site/products/range-*.html). One ink, the navy pair for accents. */

.shop.is-range-store {
  --rs-ink: #1d1d1f;
  --rs-ink-2: #6e6e73;
  --rs-navy: #0a1e57;
  --rs-accent: #203a85;
  --rs-line: rgba(16, 33, 75, .08);
  --rs-sunk: #f5f5f7;
  --rs-tint: #eef1f8;
}

.shop .rs-h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; font-weight: 600;
  letter-spacing: -.02em; color: var(--rs-ink);
}

/* ---- compare ----------------------------------------------------------------
   /testing/compare/'s form (2026-10-09, by request), with this page's own
   words: each column headed by its kit, name, price and Add to bag; then one
   pill per fact on a hairline, and under it every column's answer as a small
   drawing over a line of text, centred, so a difference shows before it is
   read. The drawings are assets/icons/compare.svg, the same set /testing/
   compare/ draws with, black on a pale fill. Four columns slide sideways on
   a phone with the pills held; two fit. */
.shop .rs-cmp {
  background: #fff;
  --rx-gap: clamp(16px, 2.6vw, 48px);
  --rx-rule: rgba(16, 33, 75, .12);
  margin-top: 24px;
  padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 4vw, 64px);
}
.shop .rs-cmp .rs-h2 { text-align: left; margin-bottom: clamp(28px, 3vw, 48px); }
.shop .rx-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
.shop .rx-scroll:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 6px; border-radius: 12px; }
.shop .rx-grid { min-width: calc(var(--n) * 180px); }
.shop .rx-heads,
.shop .rx-lines { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--rx-gap); }

/* the head: kit, name, price, Add to bag, centred over its answers */
.shop .rx-head { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.shop .rx-fig { display: block; width: 100%; max-width: 340px; aspect-ratio: 16 / 11; margin-bottom: clamp(14px, 1.6vw, 22px); }
.shop .rx-fig img {
  display: block; width: 100%; height: 100%; object-fit: contain; padding: 4% 10% 2%; box-sizing: border-box;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.shop .rx-head:hover .rx-fig img { transform: translateY(-4px); }
.shop .rx-name { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.shop .rx-name a { color: var(--rs-ink); text-decoration: none; transition: color .2s; }
.shop .rx-name a:hover { color: var(--rs-accent); }
.shop .rx-price { margin: 6px 0 16px; font-size: 17px; line-height: 24px; color: var(--rs-ink-2); font-variant-numeric: tabular-nums; }
.shop .rx-head .rg-add { width: 100%; max-width: 280px; justify-content: center; }

/* the facts: a pill on a hairline, the answers under it */
.shop .rx-grp { padding: clamp(36px, 3.6vw, 56px) 0 clamp(4px, .6vw, 10px); }
.shop .rx-pill {
  position: relative; display: flex; justify-content: center;
  margin: 0 0 clamp(24px, 2.6vw, 34px); font: inherit;
}
.shop .rx-pill::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rx-rule); }
.shop .rx-pill-in {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 18px 7px 15px; border-radius: 99px; background: var(--rs-tint);
  font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; color: var(--rs-accent);
}
.shop .rx-pill-ic {
  width: 20px; height: 20px; flex: none; overflow: visible;
  color: #000; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  --ic-a: transparent; --ic-b: #000;
}
.shop .rx-ln {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0; min-width: 0; padding-inline: clamp(0px, 1.2vw, 18px);
  font-size: 17px; line-height: 24px; color: var(--rs-ink); text-align: center; text-wrap: balance;
}
.shop .rx-ic {
  display: block; flex: none; width: 40px; height: 40px; overflow: visible;
  color: #000; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  --ic-a: #ececee; --ic-b: #000;
}
/* "Included" is a tick in the same drawing weight, on the same pale fill. */
.shop .rx-ic.is-yes circle { fill: #ececee; stroke: none; }
.shop .rx-ic.is-yes { width: 40px; height: 40px; }
.shop .rx-ic.is-yes path { stroke: #000; stroke-width: 1.6; }

.shop .rs-explore-go i {
  width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.shop .rs-explore-card:hover .rs-explore-go i { transform: translateX(3px) rotate(45deg); }



/* ---- More to explore ------------------------------------------------------ */
.shop .rs-explore { padding: clamp(64px, 7vw, 104px) 0 8px; }
.shop .rs-explore .rs-h2 { margin-bottom: clamp(24px, 2.6vw, 36px); }
.shop .rs-explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.shop .rs-explore-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 28px 30px; border-radius: 22px;
  background: var(--rs-sunk); color: var(--rs-ink); text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .35s ease;
}
.shop .rs-explore-card:hover { transform: translateY(-3px); background: var(--rs-tint); }
.shop .rs-explore-ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px;
  border-radius: 12px; background: #fff; color: var(--rs-accent);
}
.shop .rs-explore-ic svg { width: 24px; height: 24px; }
.shop .rs-explore-t { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.shop .rs-explore-d { font-size: 15px; line-height: 1.5; color: var(--rs-ink-2); }
.shop .rs-explore-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px;
  font-size: 15px; font-weight: 600; color: var(--ph-accent-link, #2457c5);
}

.shop .rs-explore + [data-ph-store-notes] .st-home { padding-top: 24px; }

/* Words for screen readers only (the word Price beside each price). */
.shop .rs-cmp .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1068px) {
  .shop .rs-explore-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .shop .rx-fig img, .shop .rs-explore-card { transition: none; }
}

@media (max-width: 760px) {
  .shop .rx-pill { justify-content: flex-start; }
  .shop .rx-pill-in { position: sticky; left: 0; }
  .shop .rx-ln { font-size: 15px; line-height: 21px; }
  .shop .rx-ic { width: 34px; height: 34px; }
}
/* Two tests fit a phone without sliding sideways. */
@media (max-width: 600px) {
  .shop .rx[style*="--n: 2"] .rx-grid { min-width: 0; }
  .shop .rx[style*="--n: 2"] { --rx-gap: 14px; }
  .shop .rx[style*="--n: 2"] .rx-pill { justify-content: center; }
  .shop .rx[style*="--n: 2"] .rx-name { font-size: 18px; }
  .shop .rx[style*="--n: 2"] .rx-price { font-size: 15px; margin-bottom: 12px; }
  .shop .rx[style*="--n: 2"] .rg-add { padding-inline: 10px; font-size: 14px; white-space: nowrap; }
}