@import url('/css/2026-home.css?v=20260926');
@import url('/css/2026-shop.css?v=20260926');
@import url('/css/2026-content.css?v=20260926');
@import url('/css/2026-local.css?v=20260926');
/* ═══════════════════════════════════════════════════════════════════
   LONE STAR 2026 REDESIGN LAYER (approved direction: sample E2, 2026-09-26)
   Loaded last on every page, after lspc.css and any inline <style>.
   Style only: it never adds, removes or reorders words, headings or links
   (the SEO guard in the vault checks that on every page).
   Look: off-white lab paper, ink black, Bebas Neue display (the label face),
   Geist body, Geist Mono labels. Gold is retired as an accent.
═══════════════════════════════════════════════════════════════════ */

:root {
  --background: #f2f3f0;
  --foreground: #0e1012;
  --card: #fbfbf9;
  --muted: #e8eae5;
  --muted-foreground: #5d646c;
  --border: #d8dbd6;
  --gold: #0e1012;            /* old accent slot now carries ink */
  --gold-bright: #23272c;
  --gold-muted: rgba(14, 16, 18, 0.06);
  --espresso: #0e1012;
  --parchment: #f2f3f0;
  --rule: #d8dbd6;
  --noise-opacity: 0;
  --vial-bg-tint: rgba(255, 255, 255, 0.5);
  --ok: #1d7a4c;
  --ink2: #2a2f35;
  --line2: #e6e8e4;
  --radius: 14px;
  --display: 'Bebas Neue', Impact, sans-serif;
  --serif: 'Geist', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --bebas: 'Bebas Neue', Impact, sans-serif;
}
.dark {
  --background: #0d0f11;
  --foreground: #eef0ec;
  --card: #15181b;
  --muted: #1c2024;
  --muted-foreground: #9aa1a8;
  --border: rgba(255, 255, 255, 0.12);
  --gold: #eef0ec;
  --gold-bright: #ffffff;
  --gold-muted: rgba(255, 255, 255, 0.08);
  --espresso: #0d0f11;
  --parchment: #eef0ec;
  --rule: rgba(255, 255, 255, 0.12);
  --noise-opacity: 0;
  --ok: #4cc38a;
  --ink2: #c9ced3;
  --line2: rgba(255, 255, 255, 0.08);
}

body { font-family: var(--sans); font-feature-settings: "ss01"; }
body::before { display: none; }

/* ─── Display type: the label face on top-level headings ─────────── */
h1, h2,
.section-title, .hero-title, .page-title, .product-name, .cat-name {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
}
h1 { font-size: clamp(3rem, 6.4vw, 6.6rem); }
h2 { font-size: clamp(2.3rem, 4.2vw, 4.4rem); }
h1 em, h1 i, h2 em, h2 i, .section-title em, .section-title i,
h1 span, h2 span { font-style: normal !important; }
h1 em, h2 em, .section-title em { color: var(--muted-foreground) !important; }

/* long article titles stay readable */
article h1, .article h1, .research-hero h1, .post-hero h1 { font-size: clamp(2.6rem, 5vw, 5rem); }

/* body headings inside long content stay in the reading face */
h3, h4, h5, h6 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  text-transform: none;
}
article h2, .article-body h2, .research-body h2, .prose h2, .post-body h2 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  margin-top: 2.2em;
}

/* ─── Small labels ─────────────────────────────────────────────── */
.eyebrow, .logo-sub, .eyebrow-row .eyebrow {
  font-family: var(--mono) !important;
  color: var(--muted-foreground) !important;
  letter-spacing: 0.1em !important;
  font-size: 0.68rem !important;
}
.gold-rule { background: var(--foreground); }

/* ─── Top compliance strip: ink, like the samples ──────────────── */
.compliance { background: var(--foreground) !important; }
.compliance p { color: var(--background) !important; letter-spacing: 0.08em !important; font-size: 0.62rem !important; }

/* ─── Navigation ───────────────────────────────────────────────── */
.nav { background: color-mix(in srgb, var(--background) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--border); }
.logo-wordmark { font-family: var(--display) !important; font-size: 1.45rem !important; letter-spacing: 0.02em !important; }
.nav-link { font-family: var(--sans) !important; font-size: 0.92rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink2) !important; }
.nav-link:hover, .nav-link.active { color: var(--foreground) !important; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn-primary, a.btn-primary, button.btn-primary {
  background: var(--foreground) !important;
  color: var(--background) !important;
  border: 1px solid var(--foreground) !important;
  border-radius: 12px !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.95rem !important;
}
.btn-primary:hover { background: var(--gold-bright) !important; }
.btn-ghost, a.btn-ghost, button.btn-ghost {
  background: transparent !important;
  color: var(--foreground) !important;
  border: 1px solid var(--foreground) !important;
  border-radius: 12px !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.95rem !important;
}
.btn-ghost:hover { background: var(--foreground) !important; color: var(--background) !important; }

/* ─── Cards and panels ─────────────────────────────────────────── */
.card, .product-card, .cat-card, .trust-cell, .blog-card, .post-card, .coa-card, .faq-item {
  border-radius: var(--radius);
}
.product-card, .cat-card, .blog-card, .post-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 18px 40px -28px rgba(20, 30, 40, 0.25);
}

/* ─── Selection + focus ───────────────────────────────────────── */
::selection { background: var(--foreground); color: var(--background); }
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }

/* ─── Phones: the research-use strip must never cover the logo row ─── */
@media (max-width: 640px) {
  :root { --compliance-h: 38px; }
  .compliance { padding: 0.35rem 0.75rem !important; }
  .compliance p { font-size: 0.5rem !important; letter-spacing: 0.03em !important; line-height: 1.35 !important; }
}

/* Dark mode: photos cannot be multiplied into a dark surface (review 2026-09-26) */
.dark img { mix-blend-mode: normal !important; }
.dark .pcard .shot, .dark .product-img-wrap, .dark .shot, .dark .p26-photo { background: #f2f3f0 !important; border-radius: 12px; }

/* Numbered markers must be readable, not ghosted (Adam, 2026-09-26: "I can barely see the numbers") */
html body .cat-num, html body .step-num, html body .landing-shell .step-num, html body.p26-local .step-num, html body .how-step-num, html body .mistake-num, html body .trace-num, html body .process-num,
html body .checklist-num, html body .quality-num, html body .diff-num, html body .steps4 .n {
  color: var(--muted-foreground) !important; opacity: 1 !important;
}
/* category grid: separate cards, no grey filler cell when the last row is short */
html body .cat-grid { background: transparent !important; gap: 12px !important; border: 0 !important; }
html body .compound-grid { background: transparent !important; gap: 12px !important; }

/* QA 2026-09-26: dark boxes and ink buttons must keep readable text */
html body a.cta-button, html body .article-cta a.cta-button, html body .btn-gold, html body a[class*="cta-btn"] { color: var(--background) !important; }
html body div[style*="#0f0f0f"], html body div[style*="#0a0a0a"], html body div[style*="#111111"] { --gold: #eef0ec; --gold-bright: #ffffff; }
html body div[style*="#0f0f0f"] a, html body div[style*="#0a0a0a"] a { color: #eef0ec !important; }
/* wide tables scroll inside their own box on phones */
html body table.peptide-table { display: block; max-width: 100%; overflow-x: auto; }
html body .meta-item { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { html body .meta-strip, html body .article-meta { flex-wrap: wrap; } }

/* ─── Lone Star cursor, 2026: same star, same 26px size and 13 13 hotspot, in ink (Adam 2026-09-26) ─── */
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(-12 13 13)'%3E%3Cpolygon points='13,2 15.8,10.1 24.4,10.3 17.6,15.5 20.1,23.7 13,18.8 5.9,23.7 8.4,15.5 1.6,10.3 10.2,10.1' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpolygon points='13,2 15.8,10.1 24.4,10.3 17.6,15.5 20.1,23.7 13,18.8 5.9,23.7 8.4,15.5 1.6,10.3 10.2,10.1' fill='none' stroke='%230e1012' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 13 13,auto;}
a,button,select,summary,label,[role=button],[onclick],.pcard,input[type=submit],input[type=button]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(-12 13 13)'%3E%3Cpolygon points='13,2 15.8,10.1 24.4,10.3 17.6,15.5 20.1,23.7 13,18.8 5.9,23.7 8.4,15.5 1.6,10.3 10.2,10.1' fill='%230e1012' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 13 13,pointer!important;}
.dark body, body.dark{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(-12 13 13)'%3E%3Cpolygon points='13,2 15.8,10.1 24.4,10.3 17.6,15.5 20.1,23.7 13,18.8 5.9,23.7 8.4,15.5 1.6,10.3 10.2,10.1' fill='none' stroke='%230d0f11' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpolygon points='13,2 15.8,10.1 24.4,10.3 17.6,15.5 20.1,23.7 13,18.8 5.9,23.7 8.4,15.5 1.6,10.3 10.2,10.1' fill='none' stroke='%23eef0ec' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 13 13,auto;}
.dark :is(a,button,select,summary,label,[role=button],[onclick],.pcard,input[type=submit],input[type=button]){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(-12 13 13)'%3E%3Cpolygon points='13,2 15.8,10.1 24.4,10.3 17.6,15.5 20.1,23.7 13,18.8 5.9,23.7 8.4,15.5 1.6,10.3 10.2,10.1' fill='%23eef0ec' stroke='%230d0f11' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 13 13,pointer!important;}
input[type=text],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=password],textarea{cursor:text!important;}

/* Live QA 2026-09-26: readability fixes */
/* trust marquee: ink bar, paper text (inverts cleanly in .dark) */
html body .marquee { background: var(--foreground) !important; }
html body .marquee-item { color: var(--background) !important; }
html body .marquee-item .dot { background: color-mix(in srgb, var(--background) 45%, transparent) !important; }
/* dark "Research documentation" cards on category pages: light labels and text */
html body a[style*="#0f0f0f"] { --gold: #eef0ec; --gold-bright: #ffffff; }
html body a[style*="#0f0f0f"] div[style*="#6b6860"] { color: #a9b0b7 !important; }
html body a[style*="#0f0f0f"] div[style*="#e8e6e0"] { color: #f2f3f0 !important; }
/* breadcrumb separators readable */
html body .breadcrumb-sep, html body .breadcrumb .sep, html body .breadcrumbs .sep { color: var(--muted-foreground) !important; opacity: 1 !important; }