/* ══════════════════════════════════════════════════════════════════
   Medicare Pharmacy — design tokens + shared component set
   "Minimal-lifestyle / quiet-luxury" system (Oura lane): warm oat
   ground, taupe-brown secondary ink, near-black (not pure black) as
   the ONLY accent — used for text, the footer, and the sole CTA fill.
   No saturated color anywhere. Restraint, type, and spacing carry the
   entire page. Tailwind (CDN) supplies layout utilities; this file
   owns brand tokens, typography, and the shared component set.
   ══════════════════════════════════════════════════════════════════ */

:root{
	/* ── Palette — oat / taupe / ink, zero saturated accent ── */
	--oat:#F7F1E8;             /* page ground */
	--oat-deep:#EFE6D6;        /* alt-section ground, one step warmer/deeper */
	--surface:#FCFAF5;         /* card / nav / drawer surface — warm off-white, never stark #fff */
	--ink:#1C1815;             /* primary text, footer ground, CTA fill — near-black, not pure black */
	--ink-soft:#2E2924;        /* ink hover state */
	--taupe:#4A4741;           /* secondary body copy — 8.3:1 on --oat */
	--taupe-2:#635F57;         /* tertiary/muted small type — 5.6:1 on --oat */
	--border:rgba(28,24,21,.14);
	--border-soft:rgba(28,24,21,.08);
	--error:#8A2E22;

	/* ── Legacy token names, repointed so any un-migrated inline
	     var(--x) usage in templates falls back to the new neutral
	     system automatically rather than showing stray color. ── */
	--bg-page:var(--oat);
	--bg:var(--surface);
	--bg-mist:var(--oat-deep);
	--text2:var(--taupe);
	--text3:var(--taupe-2);
	--teal:var(--ink);
	--teal-d:var(--ink);
	--teal-tint:var(--oat-deep);
	--gold:var(--taupe);
	--pastel-rose:var(--oat-deep);
	--pastel-sage:var(--oat-deep);
	--pastel-peach:var(--oat-deep);
	--accent-gradient:var(--ink);

	--r:8px;
	--r-lg:14px;
	--r-xl:20px;
	--r-pill:9999px;
	/* Soft, warm-toned, offset+blur shadows — never a hard/zero-blur block shadow */
	--shadow-sm:0 2px 8px -2px rgba(28,24,21,.10), 0 1px 2px rgba(28,24,21,.06);
	--shadow-md:0 24px 48px -20px rgba(28,24,21,.22), 0 4px 12px -4px rgba(28,24,21,.10);

	--font-display:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-accent:'Fraunces', Georgia, serif;
	--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono:var(--font-body);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--ink);
	background:var(--bg-page);
	-webkit-font-smoothing:antialiased;
	font-size:16px;
	line-height:1.6;
	letter-spacing:-.01em;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;font-weight:600;margin:0}
p{max-width:70ch}

/* Browser surfaces — themed from the palette, not left as browser defaults */
::selection{ background:var(--ink); color:var(--oat); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--oat); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; border:3px solid var(--oat); }
* { scrollbar-color: var(--border) var(--oat); scrollbar-width: thin; }
input, textarea { caret-color: var(--ink); }
table{ font-variant-numeric: tabular-nums; }

.font-display{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.font-accent{font-family:var(--font-accent);font-style:italic;font-weight:500;letter-spacing:-.01em}
.font-mono{font-family:var(--font-mono);font-weight:600}

/* Focus visibility — every interactive element gets a real, themed ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
	outline:2.5px solid var(--ink);
	outline-offset:2px;
	border-radius:2px;
}

/* ── Buttons — full pill, minimal visual weight (the quiet-luxury signal).
     Near-black is the ONLY interactive color in the entire system. ── */
.btn-teal, .btn-ink{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:14px 28px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;
	text-decoration:none;cursor:pointer;border:1px solid var(--ink);
	background:var(--ink);color:var(--oat);
	transition:transform .2s cubic-bezier(.22,.61,.36,1), background-color .2s ease, opacity .2s ease;
	white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){ .btn-teal,.btn-ink{ transition:none } }
.btn-teal:hover, .btn-ink:hover{ background:var(--ink-soft); transform:translateY(-1px); }
.btn-teal:active, .btn-ink:active{ transform:scale(.98); }
.btn-teal:disabled, .btn-ink:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* Secondary action — plain text, underline on hover/focus. No border box,
   no outline chrome; typography alone carries the hierarchy. */
.btn-quiet{
	display:inline-flex;align-items:center;gap:6px;
	font-weight:600;font-size:14.5px;color:var(--ink);
	text-decoration:none;padding:14px 6px;border-bottom:1px solid transparent;
	transition:border-color .2s ease;
}
.btn-quiet:hover{ border-color:var(--ink); }
/* kept for backward compat with any un-migrated markup */
.btn-outline{ display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--border);transition:border-color .2s ease; }
.btn-outline:hover{ border-color:var(--ink); }

/* ── Tags — plain uppercase small type, no fill, no pastel rotation ── */
.badge-teal, .badge-gold, .badge-rose, .badge-sage, .badge-peach{
	display:inline-flex;align-items:center;gap:5px;
	font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
	color:var(--taupe-2);
	background:none;padding:0;border-radius:0;
}

/* ── Cards — used sparingly (product tiles only), thin hairline, no heavy border ── */
.card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); }

/* ── Fields ── */
.field{
	width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r);
	background:var(--surface);font-family:inherit;font-size:14px;color:var(--ink);outline:none;
	transition:border-color .15s ease;
}
.field:focus{ border-color:var(--ink); }

/* ── Spec rows (product spec sheet, dotted leader) ── */
.spec-row{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border); }
.spec-row .k{ font-size:12.5px;color:var(--taupe-2);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0; }
.spec-row .v{ font-size:13.5px;color:var(--ink);font-weight:600;text-align:right; }

/* ── Related-products mini table ── */
.spec-table{ width:100%;border-collapse:collapse; }
.spec-table td{ padding:12px 14px;border-bottom:1px solid var(--border-soft);font-size:13.5px; }
.spec-table tr:last-child td{ border-bottom:none; }
.spec-thumb{ width:44px;height:44px;object-fit:cover;border-radius:var(--r);flex-shrink:0; }
.spec-name{ font-weight:600;color:var(--ink); }
.spec-cat{ color:var(--taupe-2);font-size:12.5px; }
.spec-price{ font-weight:700;color:var(--ink); }

/* ── Catalogue (shop archive) row list ── */
.catalogue-grid{ display:flex;flex-direction:column;border-top:1px solid var(--border-soft); }
.catalogue-row{
	display:grid;grid-template-columns:76px 1fr;gap:16px;padding:18px 4px;
	text-decoration:none;color:inherit;border-bottom:1px solid var(--border-soft);
	transition:background-color .15s ease;
}
.catalogue-row:hover{ background:var(--oat-deep); }
.catalogue-row-img{ width:76px;height:76px;object-fit:cover;border-radius:var(--r); background:var(--oat-deep); }
.catalogue-row-body{ min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px; }
.catalogue-row-top{ display:flex;align-items:center;gap:8px; }
.catalogue-row-cat{ font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--taupe-2);font-weight:600; }
.catalogue-row-name{ font-weight:600;font-size:15px;color:var(--ink);font-family:var(--font-display); }
.catalogue-row-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; }
.catalogue-row-price{ font-weight:600;color:var(--ink);font-size:14px; }

/* ── Pack-size / variation rows (variable products) ── */
.pack-pill{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:16px 4px;border-bottom:1px solid var(--border-soft);
	transition:opacity .15s ease;
}
.pack-pill.is-first{ }
.pack-pill:last-child{ border-bottom:none; }

.bracket{ border-radius:var(--r-lg); }

/* ── Compliance / HIPAA notice — understated small type, never a boxed callout ── */
.mp-compliance-note{
	display:block;
	font-size:12px;line-height:1.6;color:var(--taupe-2);
	max-width:480px;
}
.mp-compliance-note i{ display:none; } /* icon-as-callout removed — quiet type only */
.mp-compliance-note a{ color:var(--taupe);text-decoration:underline;text-underline-offset:2px; }

/* ── Quiet divider-list row (stat bar, press bar, category list, process rail) ── */
.mp-quiet-row{
	display:flex;flex-wrap:wrap;
}
.mp-quiet-row > *{
	padding:20px 28px;
	border-left:1px solid var(--border-soft);
}
.mp-quiet-row > *:first-child{ border-left:none;padding-left:0; }
@media (max-width:760px){
	.mp-quiet-row{ flex-direction:column; }
	.mp-quiet-row > *{ border-left:none;border-top:1px solid var(--border-soft);padding:16px 0; }
	.mp-quiet-row > *:first-child{ border-top:none;padding-top:0; }
}

/* ── Subscription-mechanics transparency box — real trust device, quiet chrome ── */
.mp-transparency-box{
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	padding:32px;
	background:var(--surface);
}
.mp-transparency-box dl{ display:grid;grid-template-columns:1fr;gap:16px;margin:0; }
@media (min-width:640px){ .mp-transparency-box dl{ grid-template-columns:1fr 1fr; } }
.mp-transparency-box dt{ font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--taupe-2);margin-bottom:5px; }
.mp-transparency-box dd{ margin:0;font-size:14.5px;color:var(--ink);line-height:1.55; }

/* ── Entrance reveal (data-aos) — the single authored motion moment sitewide ── */
[data-aos]{ opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-aos="right"]{ transform:translateX(20px); }
[data-aos].aos-in{ opacity:1;transform:none; }
@media (prefers-reduced-motion: reduce){
	[data-aos]{ opacity:1!important;transform:none!important;transition:none!important; }
}

@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── Mobile bottom nav ── */
.bottom-nav{
	display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
	background:var(--surface);border-top:1px solid var(--border);
	padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
@media (max-width:900px){ .bottom-nav{ display:flex;justify-content:space-around; } }
.bn-btn{
	display:flex;flex-direction:column;align-items:center;gap:3px;
	text-decoration:none;color:var(--taupe-2);font-size:10px;font-weight:600;
	position:relative;padding:4px 10px;
}
.bn-btn.active{ color:var(--ink); }
.bn-btn i{ font-size:18px; }