/* The Peptide Store — static site stylesheet (self-contained, no build step) */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/newsreader@latest/latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/newsreader@latest/latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/newsreader@latest/latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/newsreader@latest/latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-700-normal.woff2) format('woff2'); }

:root {
  --ink-900:#1C1815; --ink-700:#443C35; --ink-500:#766A5F;
  --stone-400:#9C9184; --stone-300:#C2B7A9; --stone-200:#DCD3C4; --stone-100:#EAE3D6;
  --bone-50:#F6F1E8; --paper:#FFFDF9;
  --copper-700:#7E4620; --copper-600:#A15C2E; --copper-500:#BE7A46; --copper-200:#E9CDAE; --copper-100:#F3E2CB;
  --state-success:#4F6F52; --state-success-tint:#E4EBE1;
  --state-warning:#A9791E; --state-warning-tint:#F3E9D1;
  --state-error:#A13F3F; --state-error-tint:#F2E1DF;
  --line-rx:#5B6B58; --line-rx-tint:#E7EBE3;
  --line-supplements:var(--copper-600); --line-supplements-tint:var(--copper-100);
  --line-skincare:#8A6E76; --line-skincare-tint:#EFE3E2;

  --surface-page:var(--bone-50); --surface-card:var(--paper); --surface-sunken:var(--stone-100);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500); --text-inverse:var(--bone-50);
  --border-default:var(--stone-300); --border-subtle:var(--stone-200);
  --accent:var(--copper-600); --accent-hover:var(--copper-700); --accent-tint:var(--copper-100); --focus-ring:rgba(161,92,46,.35);

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:22px; --radius-full:999px;
  --shadow-card: 0 1px 2px rgba(28,24,21,.04), 0 8px 24px rgba(28,24,21,.06);
  --shadow-elevated: 0 4px 8px rgba(28,24,21,.06), 0 24px 48px rgba(28,24,21,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background: var(--surface-page); font-family: var(--font-sans); color: var(--text-primary); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { font-family: var(--font-serif); margin: 0; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 40px; }

/* Nav */
.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 40px; border-bottom:1px solid var(--border-subtle); background:var(--surface-page); }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand span { font: 500 1.05rem var(--font-serif); color:var(--text-primary); }
.nav-links { display:flex; gap:32px; }
.nav-links a { font:500 .9375rem/1.3 var(--font-sans); color:var(--text-secondary); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent; }
.nav-links a.active { color:var(--text-primary); border-bottom-color:var(--accent); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-full); cursor:pointer; border:1px solid transparent; font:500 .9375rem var(--font-sans); padding:12px 22px; text-decoration:none; transition:background .2s var(--ease), border-color .2s var(--ease); white-space:nowrap; }
.btn-lg { padding:15px 28px; font-size:1.0625rem; }
.btn-sm { padding:8px 16px; font-size:.875rem; }
.btn-primary { background:var(--ink-900); color:var(--text-inverse); border-color:var(--ink-900); }
.btn-primary:hover { background:var(--ink-700); }
.btn-accent { background:var(--accent); color:var(--text-inverse); border-color:var(--accent); }
.btn-accent:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--surface-card); color:var(--text-primary); border-color:var(--border-default); }
.btn-secondary:hover { background:var(--surface-sunken); }
.btn-ghost { background:transparent; color:var(--text-primary); }
.btn-ghost:hover { background:var(--surface-sunken); }

/* Badge */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-full); font:500 .75rem/1.4 var(--font-sans); letter-spacing:.02em; white-space:nowrap; }
.badge-neutral { background:var(--surface-sunken); color:var(--text-secondary); }
.badge-accent { background:var(--accent-tint); color:var(--copper-700); }
.badge-rx { background:var(--line-rx-tint); color:var(--line-rx); }
.badge-supplements { background:var(--line-supplements-tint); color:var(--line-supplements); }
.badge-skincare { background:var(--line-skincare-tint); color:var(--line-skincare); }

/* Card */
.card { background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:24px; }
.card-elevated { box-shadow:var(--shadow-elevated); }

/* Hero */
.hero { padding:88px 40px 56px; text-align:center; }
.eyebrow { font:600 .75rem/1.2 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.display-xl { font:600 4.5rem/1.04 var(--font-serif); letter-spacing:-.01em; margin:0 0 20px; }
.display-lg { font:500 3.25rem/1.08 var(--font-serif); letter-spacing:-.01em; margin:0 0 16px; }
.display-md { font:500 2.25rem/1.15 var(--font-serif); margin:0 0 12px; }
.display-sm { font:500 1.75rem/1.2 var(--font-serif); }
.body-lg { font:400 1.25rem/1.5 var(--font-sans); color:var(--text-secondary); }
.body { font:400 1rem/1.6 var(--font-sans); color:var(--text-secondary); }
.body-sm { font:400 .875rem/1.5 var(--font-sans); color:var(--text-secondary); }
.caption { font:500 .75rem/1.4 var(--font-sans); color:var(--text-muted); }
.ui-label { font:500 .9375rem/1.3 var(--font-sans); color:var(--text-primary); }
.quote { font:italic 500 1.75rem/1.35 var(--font-serif); color:var(--text-primary); }

/* Stat strip */
.stats { display:flex; gap:48px; justify-content:center; flex-wrap:wrap; padding:0 40px 40px; }
.stat { text-align:center; }

/* Grid */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:860px) { .grid-3, .grid-2 { grid-template-columns:1fr; } .nav-links { display:none; } .display-xl { font-size:2.75rem; } }

/* Mobile nav toggle */
.nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:0; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text-primary); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-mobile-panel { display:none; }
@media (max-width:860px) {
  .nav-toggle { display:flex; }
  .nav-cta { display:none; }
  .nav-mobile-panel.open { display:flex; flex-direction:column; gap:18px; position:absolute; top:100%; left:0; right:0; background:var(--surface-page); border-bottom:1px solid var(--border-subtle); padding:24px 40px 32px; z-index:20; }
  .nav-mobile-panel a { font:500 1rem var(--font-sans); color:var(--text-secondary); text-decoration:none; }
  .nav-mobile-panel a.active { color:var(--text-primary); }
  .nav { position:relative; }
}

.product-card { display:flex; flex-direction:column; gap:12px; }
.product-card .badges { display:flex; gap:6px; flex-wrap:wrap; }
.product-card .row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border-subtle); padding-top:12px; margin-top:auto; }

/* Forms */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label { font:var(--font-sans); font-weight:500; font-size:.9375rem; color:var(--text-primary); }
.field input, .field select { font:1rem var(--font-sans); color:var(--text-primary); background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:11px 14px; }
.field input:focus, .field select:focus { outline:3px solid var(--focus-ring); border-color:var(--ink-700); }
.help { font:.75rem var(--font-sans); color:var(--text-muted); }
.radio-row { display:flex; gap:24px; align-items:center; }
.radio-row label { display:flex; align-items:center; gap:8px; font:1rem var(--font-sans); color:var(--text-primary); cursor:pointer; }

/* Footer */
.footer { padding:48px 40px 32px; border-top:1px solid var(--border-subtle); display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-links { display:flex; gap:24px; font:.875rem var(--font-sans); color:var(--text-secondary); }