/* R3vive.me shop — light theme matching the r3vive.me main site (spec §5). No inline styles anywhere (CSP). */

@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #151515;         /* r3vive.me near-black: headings, primary buttons, footer */
  --text: #2b3438;        /* body copy */
  --muted: #5a666e;       /* secondary copy (5.4:1 on --bg) */
  --bg: #f2f5f8;          /* page background */
  --surface: #ffffff;     /* header, cards, panels */
  --tint: #eef3f7;        /* soft fills */
  --line: #dde4ea;        /* hairlines */
  --field: #c3cdd5;       /* form field borders */
  --accent: #4ec1b8;      /* r3vive.me teal: fills and decoration only (too light for text on white) */
  --accent-ink: #0a6f67;  /* teal for text, links and focus rings (6:1 on white) */
  --accent-tint: #e3f5f3;
  --warn-bg: #fff7e6;
  --warn-line: #efc46b;
  --warn-ink: #7a4b00;
  --danger: #c0392b;
  --radius: 20px;         /* cards, panels, sheets */
  --radius-sm: 12px;      /* fields, notices, framed images */
  --shadow: 0 1px 2px rgba(21, 21, 21, 0.04), 0 18px 40px -22px rgba(21, 21, 21, 0.22);
  --wrap: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-behavior: smooth; } /* keep focused elements clear of the sticky header */

[hidden] { display: none !important; } /* e.g. .layout sets display: grid, which would otherwise override [hidden] */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* The r3vive.me molecule artwork across the top of every page, fading into the page background.
   The home hero covers it with the full-strength version. */
main {
  flex: 1;
  background:
    linear-gradient(to bottom, rgba(242, 245, 248, 0.15), var(--bg) 420px),
    url('/img/hero-molecules.jpg') top center / max(1920px, 100%) auto no-repeat;
  background:
    linear-gradient(to bottom, rgba(242, 245, 248, 0.15), var(--bg) 420px),
    image-set(url('/img/webp/hero-molecules-1152-15c7bee4.webp') type('image/webp'), url('/img/hero-molecules.jpg') type('image/jpeg')) top center / max(1920px, 100%) auto no-repeat;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(78, 193, 184, 0.35); }

h1, h2, h3 { color: var(--ink); line-height: 1.1; margin: 0 0 0.5em; font-weight: 500; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }
main > .wrap > h1 { margin-top: 44px; }
.wrap > .notice { margin-bottom: 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(21, 21, 21, 0.07); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
@media (max-width: 599px) { .site-header { position: static; } } /* the nav wraps on phones; a tall sticky header would cover focused fields */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.logo img { width: 170px; height: auto; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 0.95rem; font-weight: 500; }
.site-nav a { color: var(--text); text-decoration: none; padding: 6px 0; }
.site-nav a:hover { color: var(--accent-ink); }
.site-nav a[aria-current='page'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav .cart-link { color: #fff; background: var(--ink); padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.site-nav .cart-link:hover { color: #fff; background: #2f3a3f; }
.site-nav .cart-link[aria-current='page'] { color: #fff; box-shadow: 0 0 0 3px var(--accent); } /* beats the aria-current colour above */

/* Home hero: the molecule still from the r3vive.me hero, drifting slowly */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; background: #eef2f5; padding: clamp(80px, 12vw, 148px) 0 clamp(80px, 11vw, 136px); }
.hero::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  background:
    radial-gradient(ellipse 44% 56% at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%),
    url('/img/hero-molecules.jpg') center / cover no-repeat;
  background:
    radial-gradient(ellipse 44% 56% at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%),
    image-set(url('/img/webp/hero-molecules-1152-15c7bee4.webp') type('image/webp'), url('/img/hero-molecules.jpg') type('image/jpeg')) center / cover no-repeat;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.07) translate3d(-1.2%, -1.6%, 0); }
}
.hero h1 { max-width: 14ch; margin: 22px auto 18px; font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; }
.hero .lead { margin: 0 auto 32px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.eyebrow { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 0.85rem; font-weight: 600; line-height: 1.4; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--muted); max-width: 50ch; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 999px; padding: 14px 26px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: #2f3a3f; border-color: #2f3a3f; color: #fff; }
.btn img { width: 22px; height: 22px; }
.btn[disabled] { background: #d9e0e5; border-color: #d9e0e5; color: var(--muted); cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--field); }
.btn.secondary:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn.link { background: none; border: 0; border-radius: 0; padding: 0; color: var(--accent-ink); font-weight: 500; text-decoration: underline; }
.btn.link:hover { background: none; color: var(--ink); }
.btn.wide { width: 100%; }
.btn.small { padding: 6px 14px; font-size: 0.9rem; color: #fff; } /* white: the grey .small print rule comes later in this file */
.message .btn { margin: 0 8px 0 4px; vertical-align: middle; }

.message { min-height: 1.5em; margin: 12px 0; }
.message.error { color: var(--danger); }
.message.ok { color: var(--accent-ink); }

/* Notices */
.notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; color: var(--muted); font-size: 0.95rem; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--ink); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice.warn strong, .notice.warn a { color: var(--warn-ink); }

/* Product grid */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section h2 { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid rgba(21, 21, 21, 0.05); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(21, 21, 21, 0.05), 0 26px 48px -22px rgba(21, 21, 21, 0.3); }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: #f4f4f2; }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-title { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); } /* the whole card is the link */
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { outline: 3px solid var(--accent-ink); outline-offset: -3px; }
.card-title .strength { display: block; margin-top: 4px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 0.82rem; font-weight: 500; color: var(--accent-ink); background: var(--accent-tint); border-radius: 8px; padding: 4px 10px; }
.card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-cta { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.card:hover .card-cta { color: var(--accent-ink); }
.meta { color: var(--muted); font-size: 0.92rem; margin: 0; }
.price { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--muted); }
.badge.sold-out { background: #fdecea; color: var(--danger); }

/* Home: research-use band, laid out like the Power of Peptides section on r3vive.me */
.research-band { background: var(--surface); padding: clamp(56px, 8vw, 104px) 0; overflow: hidden; }
.research { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .research { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); } }
.research-art { position: relative; display: grid; place-items: center; width: 100%; max-width: 480px; margin: 0 auto; }
.research-art::before { content: ''; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--tint); }
.research-art img { position: relative; width: 100%; }
.research-copy { position: relative; isolation: isolate; }
.research-copy::before { content: ''; position: absolute; z-index: -1; width: 540px; height: 540px; right: -160px; top: 50%; transform: translateY(-50%); background: url('/img/glow.webp') center / contain no-repeat; opacity: 0.5; pointer-events: none; }
.research-copy > p { color: var(--muted); max-width: 50ch; }
.checks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before { content: ''; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 10px var(--accent); }

/* Product page */
.breadcrumb { padding-top: 20px; font-size: 0.92rem; color: var(--muted); } /* static product pages: Home › category › product */
.product { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); padding: 40px 0 48px; }
@media (min-width: 860px) { .product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } }
.product-media { background: var(--surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.product-media img { border-radius: var(--radius-sm); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: #f4f4f2; }
.product-media .thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product-media .thumb { width: 96px; padding: 0; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; overflow: hidden; }
.product-media .thumb img { display: block; border-radius: 0; }
.product-media .thumb[aria-pressed='true'] { border-color: var(--accent-ink); }
.product-media .thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.product h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 16px 0 8px; }
.product h1 .strength { display: block; margin-top: 8px; font-size: 0.45em; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); }
.product .price { font-size: 1.6rem; margin-bottom: 22px; }
.facts { margin: 0 0 22px; display: grid; grid-template-columns: max-content minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.facts dt, .facts dd { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.facts dt:first-of-type, .facts dd:first-of-type { border-top: 0; }
.facts dt { background: var(--tint); color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.facts dd { color: var(--ink); font-size: 0.95rem; }
@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { background: none; padding-bottom: 2px; }
  .facts dd { border-top: 0; padding-top: 0; }
}
/* Blend component table (inside the facts list) and the typical-price note under the price. */
.facts .components { width: 100%; border-collapse: collapse; }
.facts .components th { text-align: left; color: var(--muted); font-weight: 500; font-size: 0.88rem; }
.facts .components th, .facts .components td { padding: 4px 8px 4px 0; }
.facts .components td:last-child, .facts .components th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.price-compare { color: var(--muted); font-size: 0.9rem; margin: -6px 0 14px; }
.buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 18px 0 6px; }
.buy .btn { flex: 1 1 200px; }
.product ~ .notice { margin-bottom: 56px; }

/* Forms */
label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--ink); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.field small { color: var(--muted); font-weight: 400; }
input[type='text'], input[type='email'], input[type='tel'], input[type='search'], select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 12px 14px;
}
input[readonly] { background: var(--tint); color: var(--muted); }
select { width: auto; min-width: 5.5rem; cursor: pointer; }
input:focus-visible, select:focus-visible { border-color: var(--accent-ink); outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Peptide calculator */
.calc { max-width: 560px; }
.calc small { display: block; margin-top: 4px; }
.calc select { max-width: 100%; }
.calc-error { display: block; color: var(--danger); font-size: 0.9rem; }
.calc input[aria-invalid='true'] { border-color: var(--danger); }
.calc-out { margin: 0; }
.calc-out dt { font-weight: 600; font-size: 0.92rem; }
.calc-out dd { margin: 0 0 12px; font-size: 1.15rem; }
.row { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check label { font-weight: 500; margin: 0; }
.check input { flex: none; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent-ink); }
.age-gate { width: min(420px, calc(100% - 32px)); margin: 8vh auto auto; border: 0; border-radius: var(--radius); padding: 32px 28px 28px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); text-align: center; }
.age-gate::backdrop { background: rgba(21, 21, 21, 0.6); backdrop-filter: blur(6px); }
.age-gate img { display: block; margin: 0 auto 20px; height: auto; }
.age-gate h2 { margin: 0 0 8px; color: var(--ink); }
.age-gate p { margin: 0 0 20px; }
.age-gate .statement { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.45; text-align: left; }
.age-gate .btn { margin-top: 6px; }

/* Cart and checkout */
.layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 40px 0 64px; } /* minmax(0, …) lets wide tables scroll inside .table-wrap instead of widening the page */
.layout.checkout { padding-top: 8px; }
@media (min-width: 900px) { .layout.checkout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.panel, .summary { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 3vw, 32px); }
.panel > :last-child, .summary > :last-child { margin-bottom: 0; }
.panel h2, .summary h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.table-wrap { overflow-x: auto; margin-bottom: 18px; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table th { color: var(--muted); font-weight: 500; font-size: 0.88rem; }
.cart-table td { color: var(--ink); }
.cart-table td.num, .cart-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cart-table select { min-width: 4.5rem; }
.cart-table .problem { color: var(--danger); font-size: 0.9rem; }
.cart-table .strength { color: var(--muted); font-size: 0.88rem; }
@media (max-width: 480px) { .cart-table th, .cart-table td { padding: 10px 4px; } .cart-table select { min-width: 0; } } /* the cart table fits at 360px without sideways scrolling */
.summary-lines { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.summary-lines li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totals { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals .grand { font-size: 1.25rem; font-weight: 600; color: var(--ink); padding-top: 4px; }
.small { font-size: 0.88rem; color: var(--muted); }

/* Referral scheme (js/checkout.js, js/referrals.js, js/office.js; design 2026-10-13) */
.referral { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 14px; }
.referral-row { display: flex; gap: 8px; align-items: stretch; }
.referral-row input { flex: 1; min-width: 0; }
.referral-row .btn { padding: 10px 18px; white-space: nowrap; }
.totals .referral-line span:last-child { color: var(--accent-ink); font-weight: 600; }
.refer-strip { background: var(--accent-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.refer-strip p { margin: 0; padding: 14px 0; text-align: center; font-weight: 600; color: var(--ink); }
.refer-strip a { color: var(--accent-ink); }
.referral-box { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.referral-box form { margin-bottom: 8px; }
.office-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.office-table th, .office-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.office-table th.num, .office-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cap-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; } /* a code's monthly cap: field, Save, Clear */
.cap-edit input { width: 7.5em; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 6px 8px; }
@media (max-width: 480px) {
  .office-table thead { display: none; }
  .office-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .office-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
  .office-table td::before { content: attr(data-label); color: var(--muted); }
  .office-table td.num { text-align: right; }
  .office-table td:not([data-label]) { justify-content: flex-start; gap: 8px; flex-wrap: wrap; } /* the buttons cell: its buttons sit together, no label */
  .office-table td:not([data-label])::before { content: none; }
  .office-table td:not([data-label]):empty { display: none; } /* live: no buttons, no gap */
}

/* Prose (legal and policy pages): a white sheet from tablet width up */
.prose { max-width: 820px; padding-top: 40px; padding-bottom: 64px; } /* keep .wrap's side padding on phones */
@media (min-width: 760px) {
  .prose { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 56px 64px; margin-top: 44px; margin-bottom: 72px; }
}
main > .prose > h1 { margin-top: 0; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose .form-text { background: var(--tint); border-radius: var(--radius-sm); padding: 16px 18px; white-space: pre-line; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.66); padding: 44px 0 32px; font-size: 0.9rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--accent); }
.site-footer :focus-visible { outline-color: var(--accent); }
.research-notice { color: rgba(255, 255, 255, 0.86); max-width: 72ch; }
.research-notice strong { color: var(--accent); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.trader, .copyright { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { animation: none; }
  .btn, .card { transition: none; }
  .card:hover { transform: none; }
}

/* Offers, the featured row and "Not available" (js/offers.js). */
.featured-section { padding-bottom: 0; }
/* The discount badge is a small sticker on the card's top edge, half above the card, so it never hides the pack's text.
   The card stops clipping its contents for that, and the picture rounds its own top corners instead. */
.card { overflow: visible; }
.card img { border-radius: var(--radius) var(--radius) 0 0; }
.card .sale-badge { position: absolute; top: 0; left: 18px; z-index: 2; transform: translateY(-50%); padding: 4px 11px; border-radius: 999px; background: #b42318; color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.3; box-shadow: 0 4px 10px -4px rgba(180, 35, 24, 0.55); pointer-events: none; }
.price .was { margin-left: 10px; font-size: 0.8em; font-weight: 500; color: var(--muted); }
.sale-sign { display: inline-block; margin: 0 0 12px; padding: 10px 18px; border-radius: 999px; background: #b42318; color: #fff; font-size: 1.25rem; font-weight: 700; }
.badge.not-yet { background: var(--tint); color: var(--ink); }
.product .status { margin: 0 0 22px; }
.cart-table .sale-note { color: #b42318; font-size: 0.85rem; font-weight: 600; }
.cart-table .was, .summary .was { margin-right: 6px; color: var(--muted); font-weight: 400; }
.cart-table .now { color: var(--ink); font-weight: 600; }
.totals .before-discount span:last-child { color: var(--muted); }
.totals .saving span { color: #b42318; font-weight: 600; }

/* The Directory page (js/directory.js): one row per product, wrapping to two lines on a phone. */
.directory { padding: 40px 0 64px; }
.directory h1 { margin-bottom: 8px; }
.directory .lead { margin-bottom: 22px; }
.directory-search { max-width: 420px; }
.directory-search input { width: 100%; }
.dir-list { display: block; width: 100%; border-collapse: collapse; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.dir-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.dir-item:first-child { border-top: 0; }
.dir-list tbody { display: block; }
.dir-item th, .dir-item td { padding: 0; font-weight: inherit; text-align: left; }
.dir-item .what { flex: 1 1 220px; min-width: 0; }
.dir-item .what a { font-weight: 600; color: var(--ink); text-decoration: none; }
.dir-item .what a:hover { color: var(--accent-ink); text-decoration: underline; }
.dir-strength { margin-left: 8px; font-size: 0.88rem; color: var(--muted); }
.dir-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-left: auto; }
.dir-price { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--ink); }
.dir-price .was { color: var(--muted); font-size: 0.88rem; }
.dir-sale { padding: 1px 8px; border-radius: 999px; background: #b42318; color: #fff; font-size: 0.75rem; font-weight: 700; }
.btn.small-btn { padding: 7px 16px; font-size: 0.9rem; }
.spec-table { width: 100%; border-collapse: collapse; } /* category pages: the generated comparison table */
.spec-table th, .spec-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--muted); font-weight: 500; font-size: 0.88rem; }
.spec-table .price { margin: 0; }

/* Trust bar under the header, the delivery promise and the contact line (src/site/pages.js) */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; list-style: none; margin: 0; padding: 8px 16px; background: var(--accent-tint); border-bottom: 1px solid var(--line); color: var(--accent-ink); font-size: 0.88rem; font-weight: 600; }
.trust-bar a { color: inherit; }
.basket-banner { margin: 0; padding: 8px 16px; background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 0.92rem; font-weight: 600; text-align: center; }
.basket-banner a { color: inherit; text-decoration: underline; }
.delivery { margin: 10px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--accent-ink); }
.contact-line { margin: 10px 0 0; font-size: 0.9rem; color: var(--muted); }

/* Order confirmation, payment help and the "Have a code?" fold (Task 17) */
.referral > summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.referral:not([open]) > summary { margin-bottom: 0; }
.order-total { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); padding-top: 8px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.causes { padding-left: 1.2em; }
.causes .cause { margin-bottom: 10px; }
@media print { .site-header, .order-actions, .btn { display: none; } }