/* ═══════════════════════════════════════════════
   KINOTYPE V6 — WHITE THEME
   ═══════════════════════════════════════════════ */
:root {
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe;
  --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6;
  --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af;
  --blue-900: #1e3a8a; --blue-950: #172554;
  --cyan-400: #22d3ee; --cyan-500: #06b6d4;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
  --slate-900: #0f172a; --slate-950: #020617;
  --bg-body: #f8fafc; --bg-section: rgba(255,255,255,0.7); --bg-card: rgba(255,255,255,0.85);
  --bg-card-hover: #f1f5f9; --bg-input: #f1f5f9;
  --primary: var(--blue-600); --primary-light: var(--blue-600);
  --primary-glow: rgba(37,99,235,0.15); --accent: var(--cyan-500);
  --text: var(--slate-900); --text-muted: var(--slate-500);
  --text-dim: var(--slate-400); --border: var(--slate-200);
  --border-subtle: rgba(148,163,184,0.12);
  --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 24px;
  --font: 'Inter', -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --nav-h: 72px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg-body); color: var(--text); line-height: 1.6; overflow-x: hidden; position: relative; }

/* ANIMATED BLUE GRADIENT BACKGROUND — spans entire page
   2026-10-04: switched from animating background-position to translating an
   oversized (200vw x 200vh) box, so this repaints never instead of every
   frame - background-position is a paint-triggering property, transform is
   GPU-compositable. Same visual drift: this box is the same 2x-viewport
   canvas the old background-size:200% 200% trick was implicitly painting,
   expressed as real element size, so the radial-gradient at-X%-Y% positions
   land on identical pixels; only the animated property changed.
   Honesty note on WHY this was touched: an initial rAF+scroll probe on
   /catalog/ seemed to show this animation costing ~19ms/frame (35ms vs
   16ms avg, 86/90 vs 0/90 dropped frames). A follow-up controlled retest -
   idle, no scroll, freshly settled page, same probe toggling JUST this
   animation on vs off - found NO measurable difference between the old and
   new technique (~33.2ms avg both ways): the first result was confounded by
   residual work from filter/search/sort interactions run moments earlier,
   not by this animation. The ~33ms (~30fps) floor present in both runs is
   consistent with headless/automated-browser rAF throttling, not a real
   page defect. Net: this change is a correct best-practice swap (compositable
   property, verified pixel-identical output, zero regression) but should NOT
   be cited as a fix for measured catalog-page jank - that claim did not hold
   up under a cleaner retest. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  height: 200vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(37,99,235,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(6,182,212,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(59,130,246,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 70% 20%, rgba(34,211,238,0.07) 0%, transparent 50%);
  background-size: 100% 100%;
  will-change: transform;
  animation: bg-drift 20s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  0%   { transform: translate(0%, 0%); }
  25%  { transform: translate(-25%, -15%); }
  50%  { transform: translate(-50%, -25%); }
  75%  { transform: translate(-15%, -40%); }
  100% { transform: translate(0%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transform: translate(-25%, -25%); }
}
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
input, select { font-family: var(--font); }

/* UTILITIES */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 120px 0; position: relative; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-label::before { content: ''; width: 20px; height: 2px; background: var(--primary); }
/* 2026-10-06 staging: standardized to the homepage hero's font-family + size (was Space Grotesk @ clamp(32,5vw,48) - mismatched the hero's Inter). Drives .section-title AND (via cascade, since .kthr-h2 doesn't set its own font-family) the "Most Requested Research Compounds" home section heading. */
.section-title { font-family: var(--font); font-size: clamp(33px, 4.6vw, 49px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; }
.section-sub { font-size: 17px; color: var(--text-muted); max-width: 560px; line-height: 1.7; }
/* 2026-10-06 staging: COA page title is a plain Gutenberg heading block with no
   theme class (WP core block-library default: 28px/750), so it didn't match the
   hero at all. Scoped to the COA page via its body class (kt-coa-page, added
   elsewhere) and :first-of-type so later in-page headings are untouched. */
body.kt-coa-page .wp-block-heading:first-of-type { font-family: var(--font); font-size: clamp(33px, 4.6vw, 49px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.gradient-text { background: linear-gradient(135deg, var(--blue-600), var(--cyan-500)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.mono { font-family: var(--mono); }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* SCROLL PROGRESS BAR (V3) */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue-600), var(--cyan-400)); z-index: 9999; width: 0; transition: width 0.05s linear; }

/* ANIMATIONS */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px var(--primary-glow); } 50% { box-shadow: 0 0 40px var(--primary-glow), 0 0 60px rgba(37,99,235,0.05); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes typewriter-cursor { 0%, 100% { border-color: var(--accent); } 50% { border-color: transparent; } }

/* NEW: shimmer sweep on hero h1 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* MORPHING BLOBS (V3) */
@keyframes morph-blue { 0%,100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; } }
@keyframes morph-cyan { 0%,100% { border-radius: 40% 60% 50% 50%/40% 50% 60% 50%; } 50% { border-radius: 50% 40% 60% 50%/60% 40% 50% 60%; } }

/* ═══════════════════════════════════════════════
   NAVBAR (V2 glass-morphism — light)
   ═══════════════════════════════════════════════ */
.nav { position: fixed; top: 3px; left: 0; right: 0; height: var(--nav-h); z-index: 1000; transition: all var(--transition); display: flex; align-items: center; }
.nav.scrolled { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-logo { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); display: flex; align-items: center; gap: 8px; }
.nav-logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulse-glow 3s infinite; }
.nav-logo .nav-mark { width: 22px; height: 22px; flex: 0 0 22px; display: inline-block;
  vertical-align: -4px; overflow: visible; }
@media (max-width: 640px) { .nav-logo .nav-mark { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: -3px; } }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; transition: color var(--transition); position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { padding: 8px 20px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); transition: all var(--transition); }
.nav-cta:hover { background: var(--blue-700); transform: translateY(-1px); box-shadow: 0 4px 20px var(--primary-glow); color: #fff; }

/* ═══════════════════════════════════════════════
   HERO — particle canvas + gradient orbs + grid
   ═══════════════════════════════════════════════ */
.hero { min-height: 110vh; display: flex; align-items: center; position: relative; overflow: visible; padding-top: var(--nav-h); padding-bottom: 80px; }
#particle-canvas { position: absolute; top: -5%; left: -5%; width: 110%; height: 115%; z-index: 1; opacity: 0.85; }

/* V2 background layers — light */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg::before { content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(37,99,235,0.15) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(6,182,212,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 50% 80%, rgba(59,130,246,0.10) 0%, transparent 65%);
  animation: gradient-shift 12s ease infinite; background-size: 200% 200%;
}
.hero-grid { position: absolute; inset: 0; background-image:
  linear-gradient(rgba(37,99,235,0.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(37,99,235,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.25; animation: float 8s ease-in-out infinite; }
.hero-orb-1 { width: 500px; height: 500px; background: var(--blue-300); top: 5%; left: -8%; animation-delay: 0s; }
.hero-orb-2 { width: 400px; height: 400px; background: var(--cyan-400); bottom: 5%; right: -8%; animation-delay: -3s; }
.hero-orb-3 { width: 300px; height: 300px; background: var(--blue-200); top: 45%; left: 35%; animation-delay: -5s; }

.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 720px; margin: 0 auto; text-align: center; }

/* V3 hero badge with pulse dot */
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.2); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--primary); margin-bottom: 32px; font-family: var(--mono); }
.hero-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-glow 2s infinite; }

/* Hero h1 with shimmer sweep */
.hero h1 { font-size: clamp(44px, 7vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 24px; position: relative; }
.hero h1 .shimmer-text {
  background: linear-gradient(
    90deg,
    var(--text) 0%,
    var(--text) 40%,
    rgba(37,99,235,0.9) 50%,
    var(--text) 60%,
    var(--text) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s ease-in-out infinite;
}

.hero-tagline { font-size: clamp(20px, 3vw, 28px); font-weight: 400; color: var(--text-muted); letter-spacing: -0.01em; margin-bottom: 14px; }
/* the shipping promise, directly under the hero tagline */
.hero-ship { font-size: clamp(14px, 1.5vw, 16px); font-weight: 600; color: var(--primary); letter-spacing: .01em; margin-bottom: 26px; }

/* V3 typewriter subtitle */
.hero-subtitle { font-size: 18px; color: var(--text-muted); line-height: 1.7; max-width: 540px; margin: 0 auto 40px; min-height: 52px; }
.hero-subtitle .typewriter { border-right: 2px solid var(--accent); animation: typewriter-cursor 0.8s infinite; padding-right: 2px; }

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary { padding: 14px 32px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); transition: all var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.btn-primary:hover { background: var(--blue-500); transform: translateY(-2px); box-shadow: 0 8px 30px var(--primary-glow); color: #fff; }
.btn-outline { padding: 14px 32px; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); transition: all var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,0.05); }

/* ═══════════════════════════════════════════════
   TRUST BAR (V2 style — light)
   ═══════════════════════════════════════════════ */
.trust-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; overflow: hidden; background: var(--bg-section); }
.trust-track { display: flex; animation: marquee 30s linear infinite; width: max-content; }
.trust-item { display: flex; align-items: center; gap: 10px; padding: 20px 48px; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--slate-600); letter-spacing: 0.04em; }
.trust-item .icon { font-size: 18px; }
.trust-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--slate-300); flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   PRODUCTS — V2 grid layout with V3 tilt (light)
   ═══════════════════════════════════════════════ */
.products-section { background: var(--bg-body); }
.products-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 24px; }
.product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03); }
.product-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 20px 60px rgba(37,99,235,0.12), 0 0 30px rgba(37,99,235,0.08); }
.product-img { height: 220px; background: none; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
/* 2026-10-04: the slate-gradient background above was the placeholder box
   behind products with no photo. It is the main offender for "background box
   behind the transparent vial" - with a real transparent PNG on top it shows
   as a solid light-gray rounded box. Dropped to none so the vial sits right on
   the card's own white/light surface (.product-card's own background), per
   the "no visible background box at all" direction. */
.product-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--bg-card)); }
.product-vial { width: 60px; height: 120px; background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02)); border: 1px solid rgba(37,99,235,0.15); border-radius: 6px 6px 4px 4px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 15px; transition: transform 0.4s ease; }
/* 2026-10-04: v3-transparent product photos. .product-vial's background/border
   above was a CSS-drawn placeholder box for products with no photo yet (see the
   "else" branch in kt_render_product_card()). Every product now ships a real
   transparent PNG, so when a real <img class="product-vial-img"> is present,
   kill the placeholder box/border/fixed-size entirely - otherwise that pale
   blue gradient square shows straight through the new transparent pixels and
   reads as a background box behind the floating vial, which is exactly what
   this pass was asked to remove. The no-photo fallback keeps its box. */
.product-vial:has(.product-vial-img) {
  background: none;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  padding-bottom: 0;
}
/* The ::after fade-to-card-bg below (next rule) was built for opaque photos
   with their own background, blending the bottom edge into the card. Applied
   to a transparent PNG it paints a soft white gradient wash across the lower
   part of the vial - a second, subtler background box. Neutralize it so the
   vial sits on nothing but the card's own surface. */
.product-img::after { background: none; }
.product-card:hover .product-vial { transform: scale(1.08); }
.product-vial::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 40px; height: 10px; background: var(--slate-300); border-radius: 2px 2px 0 0; }
/* Same reasoning as the .product-vial rule above: this little gray rectangle
   was the placeholder "cap" drawn above the fake vial box. With a real photo
   it has no part to play - it would float as a small gray chip above the
   actual vial photo, so hide it when there's a real image. */
.product-vial:has(.product-vial-img)::before { content: none; }
.product-vial .vial-label { font-size: 7px; font-weight: 600; color: var(--primary); letter-spacing: 0.05em; text-align: center; line-height: 1.2; }
.product-vial .vial-mg { font-size: 10px; font-weight: 600; color: var(--text); margin-top: 2px; }
.product-tags { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.product-tag { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.tag-recovery { background: rgba(16,185,129,0.1); color: #059669; }
.tag-fat-loss { background: rgba(59,130,246,0.1); color: #2563eb; }
.tag-anti-aging { background: rgba(168,85,247,0.1); color: #7c3aed; }
.tag-growth { background: rgba(245,158,11,0.1); color: #d97706; }
.tag-supply { background: rgba(100,116,139,0.1); color: #475569; }
.tag-cognitive { background: rgba(99,102,241,0.1); color: #4f46e5; }
.tag-sleep { background: rgba(99,102,241,0.1); color: #6366f1; }
.tag-immune { background: rgba(16,185,129,0.1); color: #047857; }
.tag-longevity { background: rgba(236,72,153,0.1); color: #db2777; }
.product-info { padding: 20px; }
.product-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.product-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--text); }
.product-price span { font-size: 13px; color: var(--text-dim); font-weight: 400; }
.btn-add { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all var(--transition); }
.btn-add:hover { background: var(--blue-500); transform: scale(1.1); box-shadow: 0 4px 15px var(--primary-glow); }

/* ═══════════════════════════════════════════════
   TOOLS — V2 gradient-top-border + V3 morph blob (light)
   ═══════════════════════════════════════════════ */
.tools-section { background: var(--bg-section); position: relative; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tools-section .blob { position: absolute; width: 500px; height: 500px; background: rgba(34,211,238,0.12); filter: blur(90px); animation: morph-cyan 12s ease-in-out infinite; z-index: 0; top: 10%; right: -100px; }
.tool-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; cursor: pointer; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.tool-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 16px 48px rgba(37,99,235,0.1); }
/* V2 animated gradient top border */
.tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0; transition: opacity var(--transition); }
.tool-card:hover::before { opacity: 1; }
.tool-icon { width: 48px; height: 48px; border-radius: var(--radius); background: rgba(37,99,235,0.08); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px; }
.tool-name { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.tool-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.tool-link { font-size: 13px; font-weight: 500; color: var(--primary); display: flex; align-items: center; gap: 6px; transition: gap var(--transition); }
.tool-card:hover .tool-link { gap: 10px; }

/* ═══════════════════════════════════════════════
   CALCULATOR PANELS (V2 structured style — light)
   ═══════════════════════════════════════════════ */
.calc-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 24px; }
.calc-overlay.open { display: flex; }
.calc-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: calc-enter 0.4s ease; box-shadow: 0 25px 60px rgba(0,0,0,0.12); }
@keyframes calc-enter { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.calc-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--slate-100); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 1; transition: all var(--transition); }
.calc-close:hover { background: var(--slate-200); color: var(--text); }
.calc-header { padding: 32px 32px 0; }
.calc-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.calc-header p { font-size: 14px; color: var(--text-muted); }
.calc-body { padding: 24px 32px 32px; }
.calc-step { margin-bottom: 24px; }
.calc-step-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.calc-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all var(--transition); background: var(--bg-card); }
.chip:hover { border-color: var(--primary); color: var(--text); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.calc-input { width: 100%; padding: 12px 16px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; transition: border-color var(--transition); }
.calc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.calc-input::placeholder { color: var(--text-dim); }
.calc-results { background: var(--slate-50); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 24px; }
.calc-result-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.calc-result-row:last-child { border-bottom: none; }
.calc-result-label { font-size: 14px; color: var(--text-muted); }
.calc-result-value { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--text); }
.calc-result-value .unit { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.calc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; margin-top: 16px; }
.calc-badge.good { background: rgba(16,185,129,0.08); color: #059669; border: 1px solid rgba(16,185,129,0.2); }
.calc-badge.warn { background: rgba(245,158,11,0.08); color: #d97706; border: 1px solid rgba(245,158,11,0.2); }

/* Syringe visual (V2 — light) */
.syringe-visual { margin-top: 20px; padding: 20px; background: var(--bg-input); border-radius: var(--radius-sm); text-align: center; border: 1px solid var(--border); }
.syringe-svg { max-width: 100%; }
.syringe-label { font-family: var(--mono); font-size: 13px; color: var(--primary); margin-top: 8px; }

/* Protocol planner */
.protocol-row { display: grid; grid-template-columns: 1fr 100px 120px 80px 40px; gap: 12px; align-items: center; margin-bottom: 12px; }
.protocol-row select, .protocol-row input { padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; }
.protocol-row select:focus, .protocol-row input:focus { outline: none; border-color: var(--primary); }
.btn-remove { width: 32px; height: 32px; border-radius: 50%; background: rgba(239,68,68,0.08); color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all var(--transition); }
.btn-remove:hover { background: rgba(239,68,68,0.15); }
.btn-add-row { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--primary); font-size: 13px; font-weight: 500; transition: all var(--transition); width: 100%; justify-content: center; margin-top: 8px; }
.btn-add-row:hover { border-color: var(--primary); background: rgba(37,99,235,0.04); }

/* Shelf life bar */
.life-bar { height: 12px; border-radius: 6px; background: var(--slate-200); overflow: hidden; margin-top: 12px; position: relative; }
.life-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--success), var(--warning), var(--danger)); transition: width 0.6s ease; }

/* ═══════════════════════════════════════════════
   BLOG PREVIEW (V2 style — light)
   ═══════════════════════════════════════════════ */
.blog-section { background: var(--bg-section); border-top: 1px solid var(--border); }
.blog-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.4s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.blog-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,0.2); box-shadow: 0 12px 36px rgba(37,99,235,0.08); }
.blog-img { height: 180px; background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(6,182,212,0.04)); position: relative; }
.blog-img .blog-tag { position: absolute; bottom: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(37,99,235,0.1); color: var(--primary); }
.blog-content { padding: 20px; }
.blog-date { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.blog-title { font-size: 16px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ═══════════════════════════════════════════════
   FOOTER (V2 4-column grid — light)
   ═══════════════════════════════════════════════ */
.footer { background: var(--bg-section); border-top: 1px solid var(--border); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 280px; }
.footer-col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; transition: color var(--transition); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-bottom p { font-size: 12px; color: var(--text-dim); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 12px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════
   TILT CARD (V3) — smooth snap-back
   ═══════════════════════════════════════════════ */
.tilt-card { transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }

/* ═══════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════ */
.about-section { background: var(--bg-body); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.about-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.about-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero h1 { font-size: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .protocol-row { grid-template-columns: 1fr 1fr; }
  .section { padding: 80px 0; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- mobile nav: keep the burger off the wordmark -------------------------
   .nav .container is space-between and still counts .nav-links / .nav-cta as
   flex items at zero width on mobile, so the distributed space fell between
   the hidden items and the burger landed flush against the logo. */
@media (max-width: 900px) {
  .nav .container { justify-content: flex-start; }
  .nav-logo { margin-right: auto; }
  .nav-cart { order: 8; }
  .nav-burger { order: 9; margin-left: 10px; }
}

/* ---- mobile: no micro-label under 11px ----------------------------------- */
@media (max-width: 640px) {
  .kt-pclass-eyebrow,
  .aka-lbl,
  .kt-cs-eyebrow,
  .kt-cs-code-lbl,
  .kt2-ck,
  .kcmp-eyebrow,
  .kt-coa-eyebrow { font-size: 11px !important; }
}

/* ---- mobile: readable product cards -------------------------------------- */
@media (max-width: 640px) {
  .products-section .product-card .product-desc,
  .products-section .grid .product-card .product-desc {
    font-size: 12.5px !important; line-height: 1.5 !important;
  }
  .products-section .product-card .product-price span,
  .products-section .product-card .kt-badge-t { font-size: 11px !important; }
}

/* ---- class eyebrow on cards: never clip, never double -------------------- */
.product-card .kt-ceb {
  max-width: 100%;
  min-width: 0;
  white-space: normal;          /* wrap rather than run past the card edge */
  line-height: 1.28;
  text-align: left;
  align-items: flex-start;
}
.product-card .kt-ceb .kt-ceb-dot { margin-top: 4px; }
/* A compound in two classes shows both of them. The second chip pushes the
   product name down about 25px, but .kt-dose-select carries margin-top:auto, so
   the price, the dose picker and the Add button still line up across the row —
   that is the alignment a shopper actually reads. Hiding the second class was
   cheaper, and it told anyone who searched for that class that this product was
   about something else. */
.product-card .kt-ceb-stack { margin-bottom: 7px; }
.product-card .kt-ceb-stack .kt-ceb { margin-bottom: 0; }


/* ═══════════════════════════════════════════════
   FOCUS-VISIBLE PASS — added 2026-09-30
   Gus: "hover and focus states that feel responsive". Sitewide hover states
   already existed (nav, buttons, cards); keyboard/touch FOCUS states did not -
   browsers fall back to inconsistent default outlines, several of which get
   clipped by overflow:hidden ancestors (.product-card, .nav). This adds one
   consistent accent-coloured focus ring to every interactive element, additive
   only — no existing rule is modified or removed.
   ═══════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-add:focus-visible,
.product-card:focus-visible,
.tool-card:focus-visible,
.chip:focus-visible,
.kt-cf-pill:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Buttons/cards that are themselves rounded pills or circles want a matching
   ring radius rather than the generic 4px above. */
.btn-primary:focus-visible, .btn-outline:focus-visible { border-radius: var(--radius-sm); }
.btn-add:focus-visible { border-radius: 50%; }
.product-card:focus-visible, .tool-card:focus-visible { border-radius: var(--radius-lg); }


/* ═══════════════════════════════════════════════
   HOME-PAGE SECTION RHYTHM — added 2026-09-30
   Gus: "section rhythm... pages read as one continuous column of similar
   blocks". A first attempt at fixing this added a new copy section between
   hero and products, but on inspection every phrase in it duplicated facts
   already stated in the sitewide shipping bar above the nav AND in the hero
   itself (same shipping/Texas/sealed-vial facts stated three times above the
   fold) — reverted that attempt rather than ship more repetition. This is the
   copy-free fix instead: alternate the products section to the same
   --bg-section tint + border already used site-wide for exactly this purpose
   (.tools-section, .blog-section), so the hero and the product grid read as
   two distinct bands instead of one undifferentiated scroll. No text added. */
#home-products {
  background: var(--bg-section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* 2026-10-02 staging: bigger top-left logo with the hero shimmer (metallic glare) sweep */
.nav .nav-logo { font-size: 36px; gap: 12px; }
.nav .nav-logo .nav-mark { width: 40px; height: 40px; flex: 0 0 40px; vertical-align: -8px; }
.nav .nav-logo .nav-word {
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, rgba(37,99,235,0.9) 50%, var(--text) 60%, var(--text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s ease-in-out infinite;
}
@media (max-width: 640px) {
  .nav .nav-logo { font-size: 27px; gap: 9px; }
  .nav .nav-logo .nav-mark { width: 30px; height: 30px; flex: 0 0 30px; vertical-align: -5px; }
}
@media (prefers-reduced-motion: reduce) { .nav .nav-logo .nav-word { animation: none; } }
/* tagline is now the homepage h1 (keeps an h1 for SEO); keep its original look */
.hero h1.hero-tagline { font-size: clamp(20px, 3vw, 28px); font-weight: 400; color: var(--text-muted); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 14px; }
/* 2026-10-02 staging: logo shifted left, no forced lowercase */
.nav .nav-logo { margin-left: -24px; text-transform: none; }
@media (max-width: 1260px) { .nav .nav-logo { margin-left: -12px; } }
@media (max-width: 640px)  { .nav .nav-logo { margin-left: -4px; } }

/* 2026-10-02 staging: logo text larger than mark, so the chevron no longer dominates */
.nav .nav-logo { gap: 10px !important; line-height: 1 !important; }
.nav .nav-logo .nav-word { font-size: 48px !important; line-height: 1 !important; font-weight: 600; letter-spacing: -0.03em; }
.nav .nav-logo .nav-mark { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; vertical-align: middle !important; }
@media (max-width: 640px) {
  .nav .nav-logo { gap: 8px !important; }
  .nav .nav-logo .nav-word { font-size: 30px !important; }
  .nav .nav-logo .nav-mark { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 2026-10-02 staging: no scroll effects - nothing slides up, no progress bar */
.reveal, .kt-reveal, .reveal.active, .kt-reveal.active { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
#scroll-progress { display: none !important; }

/* 2026-10-02 staging: hero watermark removed (was snippet 11 .hero::after) */
.hero::after { content: none !important; display: none !important; background: none !important; }

/* 2026-10-02 staging v6: logo fits fully (descenders were clipped), then 15% smaller */
.nav .nav-logo { overflow: visible !important; }
.nav .nav-logo .nav-word { font-size: 41px !important; line-height: 1.25 !important; display: inline-block; padding: 0 0.02em 0.08em; }
.nav .nav-logo .nav-mark { width: 31px !important; height: 31px !important; flex: 0 0 31px !important; }
@media (max-width: 640px) {
  .nav .nav-logo .nav-word { font-size: 26px !important; }
  .nav .nav-logo .nav-mark { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; }
}

/* 2026-10-02 staging v8 original logo: original markup + look restored, 25% smaller than v6 (text 31px, mark 23px) */
html body .nav a.nav-logo { font-size: 31px !important; gap: 8px !important; line-height: 1.2 !important; }
html body .nav a.nav-logo .nav-mark { width: 23px !important; height: 23px !important; flex: 0 0 23px !important; vertical-align: -4px !important; }
@media (max-width: 640px) {
  html body .nav a.nav-logo { font-size: 20px !important; gap: 6px !important; }
  html body .nav a.nav-logo .nav-mark { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; vertical-align: -2px !important; }
}

/* 2026-10-03 staging: logo one constant size - no shrink on scroll (between the old big 31px and scrolled 15px) */
html body .nav a.nav-logo, html body .nav.scrolled a.nav-logo, html body.scrolled .nav a.nav-logo { font-size: 23px !important; gap: 7px !important; line-height: 1.2 !important; transition: none !important; }
html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; vertical-align: -3px !important; transition: none !important; }
@media (max-width: 640px) {
  html body .nav a.nav-logo, html body .nav.scrolled a.nav-logo, html body.scrolled .nav a.nav-logo { font-size: 18px !important; gap: 6px !important; }
  html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; }
}

.kt-legal-strip { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; align-items:center; padding:18px 24px; font-size:12px; color:var(--text-muted,#64748b); border-top:1px solid rgba(37,99,235,.12); }
.kt-legal-strip a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
body.home footer.footer { display:none !important; }

/* 2026-10-03 staging: Account button styled like the cart button (outlined, transparent, person icon) */
html body .nav a.nav-cta.nav-cta-desktop { display: inline-flex !important; align-items: center; height: 40px; box-sizing: border-box;
  padding: 0 14px 0 36px !important; background: transparent !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; transform: none !important;
  font-weight: 500; transition: border-color .2s, color .2s, background .2s !important; }
html body .nav a.nav-cta.nav-cta-desktop:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--bg-input) !important; }
html body .nav a.nav-cta.nav-cta-desktop::before { background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/></svg>") center / 16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/></svg>") center / 16px no-repeat; }

/* 2026-10-03 staging: nav glass bar - more see-through, slightly thinner (72px -> 60px), content evenly centred, same look scrolled or not */
:root { --nav-h: 60px; }
html body .nav, html body .nav.scrolled, html body.scrolled .nav, html body.scrolled .nav.scrolled {
  height: var(--nav-h) !important; padding: 0 !important; box-sizing: border-box !important;
  display: flex !important; align-items: center !important;
  background: rgba(248, 250, 252, 0.72) !important;
  backdrop-filter: blur(10px) saturate(1.4) !important; -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.10) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important; }
html body .nav > .container { height: 100%; display: flex; align-items: center; }
html body .nav > .container > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* 2026-10-03 staging: "Show" (All / Peptides / Ancillaries) filter removed from the store sidebar. Hidden rather than deleted so the filter script keeps its default "All". */
.kt-side-group:has(#kt-cf-typeh) { display: none !important; }

/* 2026-10-03 staging: nav full width - logo far left, cart/account far right, same side padding as the banner */
#nav > .container { max-width: none !important; width: 100% !important; padding: 0 clamp(16px, 3vw, 48px) !important; box-sizing: border-box !important; }
#nav .nav-logo { margin-left: 0 !important; }


/* ═══════════════════════════════════════════════
   HOME-REDESIGN 2026-10-03 — clinical-minimal homepage
   Scoped to the front page via .kthr-* classes and the
   .hero.kthr-hero modifier. Introduces no new colours, fonts,
   radii or button styles: every value below resolves to an
   existing :root variable or an existing component.
   The shipping bar (.ktsb) and nav (.nav) are untouched.
   Previous kinotype.css backed up as
   kinotype.css.bak-homeredesign-20261003.
   ═══════════════════════════════════════════════ */

/* --- HERO: same background layers, thin clinical proportions --- */
.hero.kthr-hero {
  min-height: 0;
  display: block;
  padding-top: calc(var(--nav-h) + 52px);
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.hero.kthr-hero .hero-content {
  max-width: 760px;
  margin: 0;
  text-align: left;
}
/* the established effects stay, dialled back for a 300px band */
.hero.kthr-hero #particle-canvas { opacity: 0.45; }
.hero.kthr-hero .hero-orb { opacity: 0.16; }
.hero.kthr-hero .section-label { margin-bottom: 14px; }
.hero.kthr-hero h1 {
  font-family: var(--font);
  font-size: clamp(33px, 4.6vw, 49px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 15px;
}
.kthr-lede {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 610px;
  margin-bottom: 24px;
}
.kthr-cta { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 34px; }

/* --- FOUR-FACT STRIP --- */
.kthr-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  border-top: 1px solid var(--border);
  padding: 20px 0 26px;
}
.kthr-ft-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.kthr-ft-v { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.kthr-ft-v b { font-weight: 600; color: var(--text); }

/* --- SECTION RHYTHM: tight vertically, generous horizontally --- */
.kthr-sec { padding: 56px 0 0; }
.kthr-sec-last { padding-bottom: 8px; }
/* 2026-10-03: raise the "Most Requested Research Compounds" heading slightly.
   Scoped to #home-catalog only (ID beats .kthr-sec class) so home-docs and
   home-library keep their original 56px/40px top padding. 56px -> 42px is a
   25% reduction -- subtle raise, not flush against the hero above it. */
#home-catalog.kthr-sec { padding-top: 42px; }
.kthr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* 2026-10-06 staging: size matched to the homepage hero (was clamp(22,2.6vw,29) - visibly smaller AND, via .section-title's old font-family, a different font than the hero). font-family now inherits Inter from the .section-title fix above. */
.kthr-h2 {
  font-size: clamp(33px, 4.6vw, 49px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 0;
  margin-top: 2px;
}
.kthr-more { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.kthr-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 16px; }

/* --- CATALOGUE: existing .chip pills + a 4-up product grid --- */
.kthr-chips { margin-bottom: 24px; }
.kthr-chips .chip { font-size: 12.5px; padding: 7px 14px; border-radius: 999px; }
.kthr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* 2026-10-03: 6-up row is narrower per-card, so the vial image and
   product name are scaled down to match (was 220px / 16px). Scoped to
   #home-catalog only -- the /catalog/ store grid is untouched. */
#home-catalog .kthr-grid .product-img { height: 160px; }
#home-catalog .kthr-grid .product-name { font-size: 14px; }

/* --- DOCUMENTATION BAND --- */
.kthr-band-label { margin-bottom: 16px; }
.kthr-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kthr-band > div { padding: 26px 26px 24px; border-left: 1px solid var(--border); }
.kthr-band > div:first-child { border-left: none; }
.kthr-band h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 9px; }
.kthr-band p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: 13px; }
.kthr-link { font-size: 13.5px; font-weight: 500; }

/* --- FROM THE LIBRARY --- */
.kthr-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kthr-art { display: block; border-top: 2px solid var(--border); padding-top: 14px; color: inherit; transition: border-color var(--transition); }
.kthr-art:hover { border-top-color: var(--primary); color: inherit; }
.kthr-art-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.kthr-art-t { font-size: 15.5px; font-weight: 600; line-height: 1.35; margin: 7px 0 6px; letter-spacing: -0.01em; }
.kthr-art:hover .kthr-art-t { color: var(--primary); }
.kthr-art-d { font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* --- RUO block above the legal strip --- */
.kthr-ruo {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  max-width: 92ch;
}
.kthr-ruo b { color: var(--text); font-weight: 600; }

/* --- RESPONSIVE --- */
/* 2026-10-03: intermediate step between the 6-up wide-desktop row and
   the existing 3-up tablet row below, so medium-wide screens don't
   jump straight from 6 to 3 columns. */
@media (max-width: 1200px) {
  .kthr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 1000px) {
  .kthr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kthr-facts { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
}
@media (max-width: 780px) {
  .kthr-band { grid-template-columns: 1fr; }
  .kthr-band > div { border-left: none; border-top: 1px solid var(--border); }
  .kthr-band > div:first-child { border-top: none; }
  .kthr-arts { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .hero.kthr-hero { padding-top: calc(var(--nav-h) + 30px); }
  .hero.kthr-hero h1 { font-size: 30px; }
  .kthr-lede { font-size: 15px; margin-bottom: 20px; }
  .kthr-cta { padding-bottom: 26px; }
  .kthr-cta .btn-primary, .kthr-cta .btn-outline { padding: 12px 20px; font-size: 13px; }
  .kthr-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .kthr-sec { padding-top: 40px; }
  #home-catalog.kthr-sec { padding-top: 30px; } /* 2026-10-03: same ~25% reduction on mobile */
  .kthr-head { margin-bottom: 14px; }
  .kthr-ft-v { font-size: 12.5px; }
  .kthr-ruo { margin-top: 30px; }
}
/* ═══════════ end HOME-REDESIGN 2026-10-03 ═══════════ */

/* ═══════════════════════════════════════════════
   HOME-VISUAL-POLISH 2026-10-03 — approved refinements on top of
   HOME-REDESIGN 2026-10-03. Scoped to the front page only, via the
   .kthr-* prefix and the #home-catalog / .kthr-grid ancestors, so the
   catalog page, product pages and the store grid are all unaffected.
   Every colour resolves from an existing :root variable (--primary,
   --accent, --primary-glow, --slate-*, --text*, --border) through
   color-mix(); no new palette entries are introduced.
   The shipping bar (.ktsb / kt-shipbar.php) and the nav (.nav /
   header.php) are not referenced here and were not edited.
   Previous kinotype.css backed up as
   kinotype.css.bak-visualpolish-20261003.
   ═══════════════════════════════════════════════ */

/* --- 2. HERO FOCAL POINT: soft blurred blobs + line-art molecule -------
   Pure CSS/inline-SVG, no image requests. Deliberately low opacity so the
   headline keeps the contrast hierarchy. */
.hero.kthr-hero { position: relative; }
.hero.kthr-hero .kthr-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.kthr-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
}
.kthr-blob-1 {
  width: 420px; height: 420px;
  right: -70px; top: -150px;
  background: radial-gradient(circle at 50% 50%, var(--primary-glow) 0%, transparent 68%);
}
.kthr-blob-2 {
  width: 320px; height: 320px;
  right: 230px; top: 20px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
}
/* hero text must stay above the decoration */
.hero.kthr-hero > .container { position: relative; z-index: 3; }

/* --- 3. PRODUCT CARDS: resting shadow, vial glow, hover lift ----------- */
/* NOTE: a bundled kt-*.css block (built from inline kt-* <style> blocks, see
   kt-css-bundle.php) flattens cards site-wide with
   "body .product-card{box-shadow:none !important}" and kills the vial
   pseudo-element with "body .product-card .product-img::before
   {background:none !important;content:none !important}". ID specificity is
   not enough to beat !important, so the declarations below are marked
   !important too. They stay scoped to #home-catalog, so the store/catalog
   grid keeps its existing flat treatment. */
#home-catalog .kthr-grid .product-card {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--slate-900) 6%, transparent),
              0 1px 2px color-mix(in srgb, var(--slate-900) 4%, transparent) !important;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
#home-catalog .kthr-grid .product-card:hover {
  box-shadow: 0 18px 38px color-mix(in srgb, var(--slate-900) 11%, transparent),
              0 6px 14px color-mix(in srgb, var(--primary) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
/* The site-wide 3D tilt script (footer.php) writes an inline transform on
   mousemove. !important is the only way to express the approved "gentle
   lift" without editing that shared script, and it is scoped to the home
   catalog so the tilt still behaves normally everywhere else. */
#home-catalog .kthr-grid .product-card:hover {
  transform: translateY(-4px) !important;
}
/* soft circular glow behind the vial image (::after is already used by the
   theme for the bottom fade, so this uses ::before) */
/* 2026-10-04: this soft circular glow was tuned for opaque real-background
   photos, where it never actually showed (the photo's own background covered
   it). Every product photo is now a true transparent PNG, so this blue haze
   is visible behind/around the vial on the homepage - reintroducing exactly
   the "background color behind the floating vial" look this whole pass was
   asked to remove, and makes products with more transparent edge area read
   bluer than products with less. Disabled rather than deleted, in case a
   future non-transparent image type wants it back. */
#home-catalog .kthr-grid .product-img::before {
  content: none !important;
}
/* Keep the vial painted above the glow. Deliberately z-index only: an earlier
   revision of this block also set position:relative here, which knocked
   .kt-img-pins out of its absolute positioning — the tag pins then became an
   in-flow flex item of .product-img, dropping to the bottom of the image and
   squeezing the vial to ~20px wide. .product-vial is already
   position:relative in the theme and .kt-img-pins is already
   position:absolute with z-index:8, so neither needs a position override. */
#home-catalog .kthr-grid .product-img .product-vial { z-index: 2; }

/* --- 4. CATEGORY TAGS as rounded-full pills ----------------------------
   Shape/padding/weight only: the per-class accent (--kc, set inline by
   kt-class-colors.php) is kept, because that colour coding is an existing
   deliberate system and flattening every tag to one blue would lose it. */
#home-catalog .kthr-grid .kt-imgtag {
  border-radius: 999px;
  padding: 3.5px 9px 3.5px 7px;
  gap: 5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--slate-900) 10%, transparent);
}

/* --- 5. FACT STRIP ICONS ----------------------------------------------- */
.kthr-ft-i {
  display: block;
  width: 23px; height: 23px;
  margin-bottom: 9px;
  color: var(--text-dim);
}

/* --- 6. DOCUMENTATION BAND ICONS --------------------------------------
   Chosen over a 3-4px left-border accent: the band's columns already use a
   1px left border as their divider, so a thick accent would read as a
   broken divider and would need the first/last-child exceptions reworked.
   Icons drop into the existing 26px padding without changing any metrics. */
.kthr-band-i {
  display: block;
  width: 23px; height: 23px;
  margin-bottom: 12px;
  color: var(--primary);
  opacity: 0.85;
}

/* --- 7. PRICE CONTRAST -------------------------------------------------
   Was mono 20px/500 in --text, which read as a secondary grey next to the
   product name. Heavier weight + marginally larger makes it the primary
   number; the "USD" suffix is pushed further back for contrast. */
#home-catalog .kthr-grid .product-price {
  color: var(--slate-900);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
}
#home-catalog .kthr-grid .product-price span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* --- fallback for engines without color-mix() -------------------------- */
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  #home-catalog .kthr-grid .product-card { box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important; }
  #home-catalog .kthr-grid .product-card:hover { box-shadow: 0 18px 38px rgba(15,23,42,0.11), 0 6px 14px rgba(37,99,235,0.12) !important; border-color: rgba(37,99,235,0.28); }
  #home-catalog .kthr-grid .product-img::before { background: radial-gradient(circle at 50% 50%, rgba(37,99,235,0.15) 0%, transparent 68%) !important; }
  .kthr-blob-2 { background: radial-gradient(circle at 50% 50%, rgba(6,182,212,0.18) 0%, transparent 70%); }
}

/* --- RESPONSIVE ------------------------------------------------------- */
@media (max-width: 1100px) {
  .kthr-blob-2 { right: 140px; }
}
@media (max-width: 780px) {
  .kthr-band-i { margin-bottom: 10px; }
}
@media (max-width: 520px) {
  /* kt-product-card.php already tightens .kt-imgtag below 520px for the 2-up
     mobile grid. Our pill rule carries ID specificity, which beats that media
     rule regardless of order, so the tighter metrics are restated here --
     otherwise the wider pills truncate more of the longer class labels. */
  #home-catalog .kthr-grid .kt-imgtag {
    padding: 2px 7px 2px 6px;
    gap: 4px;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 640px) {
  /* decoration would crowd a 390px hero, and the lift/tilt is pointless on touch */
  .kthr-blob-1 { width: 300px; height: 300px; right: -110px; top: -130px; }
  .kthr-blob-2 { display: none; }
  .kthr-ft-i { width: 20px; height: 20px; margin-bottom: 7px; }
  #home-catalog .kthr-grid .product-img::before { width: 150px; height: 150px; }
  #home-catalog .kthr-grid .product-price { font-size: 19px; }
}
@media (hover: none) {
  #home-catalog .kthr-grid .product-card:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #home-catalog .kthr-grid .product-card { transition: none; }
  #home-catalog .kthr-grid .product-card:hover { transform: none !important; }
}
/* ═══════════ end HOME-VISUAL-POLISH 2026-10-03 ═══════════ */



/* ═══════════════════════════════════════════════
   SITEWIDE DEFAULT BACKGROUND (2026-10-05)
   Consolidates the homepage hero's background treatment (.hero-bg /
   .hero-grid gradient + dot-grid, plus the .kthr-blob floating watermark
   blobs) into ONE sitewide system, printed once near <body> in header.php
   and fixed behind all page content. Opacity is reduced here so it reads
   as a subtle ambient backdrop on text-heavy pages (catalog, product,
   cart, account, contact, etc.) rather than a bold hero.
   The homepage (.hero.kthr-hero) and the Library hub (#library-hub) keep
   their own stronger, page-scoped instances of .hero-bg/.hero-grid/
   .kthr-blob and skip this wrapper (see the is_front_page()/is_page('articles')
   guard around .site-bg in header.php) so the pattern never renders twice
   on the same page.
   ═══════════════════════════════════════════════ */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
}
.site-bg .kthr-blob { position: absolute; border-radius: 50%; filter: blur(44px); }
.site-bg .kthr-blob-1 {
  width: 420px; height: 420px; right: -70px; top: -150px;
  background: radial-gradient(circle at 50% 50%, var(--primary-glow) 0%, transparent 68%);
}
.site-bg .kthr-blob-2 {
  width: 320px; height: 320px; right: 230px; top: 20px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
}
@media (max-width: 640px) {
  .site-bg .kthr-blob-1 { width: 300px; height: 300px; right: -110px; top: -130px; }
  .site-bg .kthr-blob-2 { display: none; }
}
@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
  .site-bg .kthr-blob-2 { background: radial-gradient(circle at 50% 50%, rgba(6,182,212,0.18) 0%, transparent 70%); }
}


/* ═══════════════════════════════════════════════
   TECHNICAL DATA TYPOGRAPHY — added 2026-10-05
   Lab/technical feel: monospace (JetBrains Mono - already loaded sitewide
   via header.php's Google Fonts <link> and set as --mono above) applied to
   numeric/technical data only. Names, headings and category labels stay on
   --font (Inter) - untouched.
   Scope note: this pass only touches kinotype.css + font loading, so other
   files were not edited. Most technical fields were already correct from
   earlier work and needed nothing:
     - CAS number / molecular formula / molecular weight / sequence
       (.kt2-ck / .kt2-cv, content-single-product.php) - already var(--mono).
     - COA batch number (.kt-coa-meta code, kt-coa.php) - already
       'JetBrains Mono'.
   The one real gap: dose chips on catalog cards. .kt-dose-select (the size
   dropdown) and .kt-dose-static (the no-choice label for one-size products)
   are defined in a bundled inline stylesheet (kt-product-card.php's
   <style id="kt-card-css">, folded into kt-css-bundle.php's cache) that
   prints AFTER this file at the same specificity and without !important -
   so !important is required here to actually win, not just preference. */
.kt-dose-select,
.kt-dose-static {
  font-family: var(--mono) !important;
}
/* numeric mg readout on the catalog-card vial graphic - same reasoning,
   just technical data, not a heading/name */
.product-vial .vial-mg { font-family: var(--mono); }

/* 2026-10-05 staging: two-tone wordmark + bigger chevron (Gus request)
   - "Kino" stays bold/dark (unchanged weight/color), "type" takes the same
     blue as the chevron gradient (var(--primary) = #2563eb) at a lighter
     weight (500 vs Kino's 700) -- ties the chevron color into the text and
     gives the mark/word more visual distinction. Capitalized "Kinotype".
   - Chevron (.nav-mark) sized up ~18% over the last effective rule
     (desktop 17px -> 20px, mobile <=640px 13px -> 15px), same selector
     specificity + source order as the prior override block so this wins
     the cascade without touching the historical rules above. */
html body .nav a.nav-logo .nav-kino, html body .nav.scrolled a.nav-logo .nav-kino, html body.scrolled .nav a.nav-logo .nav-kino {
  color: var(--text) !important; font-weight: 700 !important;
}
html body .nav a.nav-logo .nav-type, html body .nav.scrolled a.nav-logo .nav-type, html body.scrolled .nav a.nav-logo .nav-type {
  color: var(--primary) !important; font-weight: 700 !important;
}
html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark {
  width: 20px !important; height: 20px !important; flex: 0 0 20px !important; vertical-align: -3.5px !important;
}
@media (max-width: 640px) {
  html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark {
    width: 15px !important; height: 15px !important; flex: 0 0 15px !important;
  }
}

/* 2026-10-06 staging: rebalance logo visual weight (Gus request)
   - The wordmark read oversized vs. the chevron and the pair felt cramped;
     shrink "Kinotype" slightly so icon + text carry more even visual
     weight and breathe in their container.
   - CORRECTION (same day): Gus's "more balanced" feedback meant the
     chevron (.nav-mark) should read slightly BOLDER, not bigger. Reverted
     width/height/flex back to the original 20px/15px (desktop/mobile) and
     vertical-align back to -3.5px everywhere; added a stroke-width bump
     on the mark's inner <g> (SVG presentation attribute stroke-width="45"
     in header.php) from 45 to 52 (~+0.44px of effective rendered stroke
     at 20px display size) for a modestly thicker line instead of a larger
     icon. Gap dialed back from 9px/7px to the pre-10-06 7px/6px since it
     was only widened to make room for the now-reverted bigger icon.
   - Same selector specificity + source order as the prior 2026-10-05
     override block (right above) so this wins the cascade without
     touching any historical rule. */
html body .nav a.nav-logo, html body .nav.scrolled a.nav-logo, html body.scrolled .nav a.nav-logo {
  gap: 7px !important;
}
html body .nav a.nav-logo .nav-word, html body .nav.scrolled a.nav-logo .nav-word, html body.scrolled .nav a.nav-logo .nav-word {
  font-size: 34px !important;
}
html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark {
  width: 20px !important; height: 20px !important; flex: 0 0 20px !important; vertical-align: -3.5px !important;
}
html body .nav a.nav-logo .nav-mark g, html body .nav.scrolled a.nav-logo .nav-mark g, html body.scrolled .nav a.nav-logo .nav-mark g {
  stroke-width: 52 !important;
}
@media (max-width: 640px) {
  html body .nav a.nav-logo, html body .nav.scrolled a.nav-logo, html body.scrolled .nav a.nav-logo {
    gap: 6px !important;
  }
  html body .nav a.nav-logo .nav-word, html body .nav.scrolled a.nav-logo .nav-word, html body.scrolled .nav a.nav-logo .nav-word {
    font-size: 22px !important;
  }
  html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark {
    width: 15px !important; height: 15px !important; flex: 0 0 15px !important; vertical-align: -3.5px !important;
  }
}

/* 2026-10-05: "From the blog" teaser section (eyebrow, heading, 3 cards)
   was removed from front-page.php but the compliance disclaimer paragraph
   (.kthr-ruo) was kept in place unconditionally so it is not lost. Without
   the cards above it, the original spacing (56px section padding + 42px
   margin + 18px padding + border-top) left an oversized empty gap. Tighten
   this one section only, scoped by ID so no other .kthr-sec section is
   affected. */
#home-library.kthr-sec { padding-top: 22px; padding-bottom: 22px; }
#home-library .kthr-ruo { margin-top: 0; padding-top: 0; border-top: none; }

/* 2026-10-06 staging: FINAL logo pass (Gus request)
   - Wordmark text slightly smaller than the prior rebalance step
     (desktop 34px -> 31px, mobile <=640px 22px -> 20px).
   - Chevron (.nav-mark) slightly bigger than the prior rebalance step
     (desktop 26px -> 28px, mobile <=640px 19px -> 20px), vertical-align
     nudged to keep it centred against the smaller text.
   - Same selector specificity + source order as the prior 2026-10-06
     rebalance block (directly above) so this wins the cascade without
     touching any historical rule. */
html body .nav a.nav-logo, html body .nav.scrolled a.nav-logo, html body.scrolled .nav a.nav-logo {
  gap: 9px !important;
}
html body .nav a.nav-logo .nav-word, html body .nav.scrolled a.nav-logo .nav-word, html body.scrolled .nav a.nav-logo .nav-word {
  font-size: 31px !important;
}
html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark {
  width: 28px !important; height: 28px !important; flex: 0 0 28px !important; vertical-align: -5.5px !important;
}
@media (max-width: 640px) {
  html body .nav a.nav-logo, html body .nav.scrolled a.nav-logo, html body.scrolled .nav a.nav-logo {
    gap: 7px !important;
  }
  html body .nav a.nav-logo .nav-word, html body .nav.scrolled a.nav-logo .nav-word, html body.scrolled .nav a.nav-logo .nav-word {
    font-size: 20px !important;
  }
  html body .nav a.nav-logo .nav-mark, html body .nav.scrolled a.nav-logo .nav-mark, html body.scrolled .nav a.nav-logo .nav-mark {
    width: 20px !important; height: 20px !important; flex: 0 0 20px !important; vertical-align: -3.75px !important;
  }
}