/*
Theme Name: VYTAL Research
Description: Custom WooCommerce theme for VYTAL Research — converted from the original static site design.
Version: 1.0
Author: VYTAL Research
*/
/* VYTAL Research — white theme, science blue (pink limited)
   Single shared stylesheet. Accent colors live in :root. */

:root {
  --bg: #ffffff;
  --bg-soft: #f4f8ff;
  --surface: #ffffff;
  --surface-2: #eaf1fe;
  --border: #e0e8f5;
  --text: #0f1a33;
  --muted: #57617a;
  --accent: #2348e0;        /* science blue (primary) */
  --accent-dim: #1933b8;
  --accent-2: #14b3d6;      /* cyan secondary */
  --accent-glow: rgba(35, 72, 224, 0.22);
  --grad: linear-gradient(100deg, #2f5cff 0%, #2348e0 52%, #14b3d6 100%);
  --grad-soft: linear-gradient(100deg, rgba(47,92,255,0.12) 0%, rgba(35,72,224,0.10) 52%, rgba(20,179,214,0.12) 100%);
  --radius: 16px;
  --maxw: 1180px;
  --font: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.25rem; }
.muted { color: var(--muted); }
.accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fill-blank { letter-spacing: 0.04em; }
section { padding: 96px 0; }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--grad); color: #fff; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 42px; }
.topbar-social { display: flex; gap: 14px; align-items: center; flex: 1; }
.topbar-social a { display: inline-flex; color: #fff; opacity: .9; transition: opacity .2s; }
.topbar-social a:hover { opacity: 1; }
.topbar-social svg { width: 16px; height: 16px; fill: currentColor; }
.topbar-tag { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; white-space: nowrap; text-align: center; }
.topbar-links { display: flex; gap: 22px; flex: 1; justify-content: flex-end; }
.topbar-links a { color: #fff; opacity: .92; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; font-weight: 600; white-space: nowrap; transition: opacity .2s; }
.topbar-links a:hover { opacity: 1; }

/* ---------- Scrolling promo marquee ---------- */
.marquee { background: var(--accent); color: #fff; overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; padding: 9px 0; animation: marquee 30s linear infinite; }
.marquee span { font-size: .77rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 0 24px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(255,255,255,0.85); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo .logo-mark { width: 42px; height: 42px; flex: none; color: var(--accent); }
.logo .wordmark { display: flex; flex-direction: column; line-height: 1; }
.logo .wordmark b { font-size: 1.45rem; font-weight: 800; letter-spacing: .14em; color: var(--text); }
.logo .wordmark span { font-size: 0.7rem; font-weight: 600; letter-spacing: .36em; color: var(--muted); margin-top: 4px; }
.nav-links { display: flex; gap: 48px; align-items: center; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 1.06rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.6rem; cursor: pointer; }
.nav-icons { display: flex; gap: 20px; align-items: center; margin-left: 26px; }
.nav-icons .nicon { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); transition: color .2s; }
.nav-icons .nicon:hover { color: var(--accent); }
.nav-icons svg { width: 23px; height: 23px; }
@media (max-width: 900px) { .nav-icons { gap: 16px; margin-left: 0; margin-right: 14px; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--accent-glow); }
.btn-ghost { border-color: var(--border); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 0 0 96px; }
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 46vh; pointer-events: none;
  background: url("dna-bg.jpg") no-repeat center 30%; background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
  background:
    radial-gradient(520px 300px at 15% 70%, rgba(35,72,224,0.07), transparent 62%),
    radial-gradient(560px 320px at 85% 80%, rgba(20,179,214,0.08), transparent 60%); }
.hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding-top: 40vh; }
.hero-loc { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.brand-title { font-size: clamp(2.6rem, 7.2vw, 5.5rem); font-weight: 800; letter-spacing: 0.005em; line-height: 0.96; text-transform: uppercase; color: var(--text); margin: 0 0 28px; }
.hero-promo { font-size: clamp(1.1rem, 2.2vw, 1.45rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text); margin: 0 0 16px; }
.hero-headline { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); margin: 0 0 28px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; margin-bottom: 26px; background: var(--surface-2); }
.hero p.lead { font-size: 1.08rem; color: var(--muted); line-height: 1.75; max-width: 720px; margin: 0 auto 40px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-trust { margin-top: 30px; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.hero-trust span b { color: var(--accent); font-weight: 800; }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding: 90px 0 30px; position: relative; overflow: hidden; }
.page-head::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(480px 300px at 12% 10%, rgba(35,72,224,0.10), transparent 60%), radial-gradient(520px 320px at 86% 20%, rgba(20,179,214,0.10), transparent 60%); }
.page-head .wrap { position: relative; z-index: 1; }
.page-head .eyebrow { margin-bottom: 18px; }
.page-head p { color: var(--muted); max-width: 620px; margin-top: 16px; font-size: 1.1rem; }

/* ---------- Cards / features ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: 0 1px 2px rgba(15,26,51,0.04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 40px rgba(35,72,224,0.14); }
.card .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--grad-soft); border: 1px solid var(--border); margin-bottom: 18px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.96rem; }
.section-head { max-width: 620px; margin-bottom: 48px; }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.05rem; }

/* ---------- Product cards ---------- */
.product { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(15,26,51,0.04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.product:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 46px rgba(35,72,224,0.16); }
.product .thumb { min-height: 210px; height: auto; padding: 22px 0; position: relative; display: grid; place-items: center; background: var(--grad-soft); border-bottom: 1px solid var(--border); }
.product .thumb .pvial { width: 104px; }
.product .bottle { width: 86px; height: 150px; border-radius: 14px; background: linear-gradient(180deg, #ffffff, #eef3fe); border: 1px solid #d6e1f4; position: relative; box-shadow: 0 16px 32px rgba(35,72,224,0.16); }
.product .bottle::before { content: ""; position: absolute; left: 12px; right: 12px; top: 36px; bottom: 22px; border-radius: 8px; background: var(--grad); opacity: 0.85; }
.product .bottle::after { content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 34px; height: 20px; border-radius: 4px 4px 0 0; background: #d6e1f4; border: 1px solid #c2d2ee; border-bottom: 0; }
.product .tag { position: absolute; top: 14px; left: 14px; font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--grad); color: #fff; padding: 5px 10px; border-radius: 999px; font-weight: 700; }
.product .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.product .cat { font-size: 0.78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.product h3 { margin: 8px 0 6px; }
.product .desc { color: var(--muted); font-size: 0.93rem; flex: 1; }
.product .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.product .price { font-size: 1.4rem; font-weight: 800; }
.product .price small { font-size: 0.8rem; color: var(--muted); font-weight: 400; }

/* ---------- About split + bulk pricing + vial ---------- */
.about-section { background: linear-gradient(135deg, var(--bg-soft), var(--bg)); }
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.about-visual { position: relative; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(160deg, #eef3fe, #ffffff); padding: 34px 24px 40px; overflow: hidden; min-height: 480px; box-shadow: 0 12px 36px rgba(35,72,224,0.08); }
.about-visual::before { content: ""; position: absolute; inset: 0; background: url("dna-bg.jpg") center/cover; opacity: .12; }
.about-visual > * { position: relative; z-index: 1; }
.about-photo { padding: 0; min-height: 0; }
.about-photo::before { display: none; }
.about-photo img { display: block; width: 100%; height: auto; }
.tiers { text-align: center; color: var(--muted); font-size: 0.98rem; line-height: 1.7; }
.tiers .pop { color: var(--text); font-weight: 800; }
.tiers .small { display: block; font-size: 0.85rem; margin-top: 12px; }
.vial { width: 132px; margin: 28px auto 0; }
.vial .cap { height: 26px; background: #d6e1f4; border: 1px solid #c2d2ee; border-radius: 8px 8px 3px 3px; }
.vial .neck { height: 12px; width: 58%; margin: 0 auto; background: #eef3fe; border-left: 1px solid #c2d2ee; border-right: 1px solid #c2d2ee; }
.vial .vbody { border: 1px solid #c2d2ee; border-radius: 6px 6px 14px 14px; background: linear-gradient(180deg, rgba(35,72,224,0.14), rgba(20,179,214,0.08)); padding: 22px 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.vial .vlabel { background: #ffffff; border: 1px solid #d6e1f4; border-radius: 5px; width: 88%; padding: 11px 6px; text-align: center; }
.vial .vlabel .vn { color: var(--text); font-weight: 800; letter-spacing: .06em; font-size: 1.05rem; }
.vial .vlabel .vmg { display: inline-block; margin-top: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.66rem; padding: 2px 8px; border-radius: 4px; letter-spacing: .05em; }
.vial .vfine { color: var(--muted); font-size: 0.58rem; letter-spacing: .06em; text-align: center; line-height: 1.5; }
.about-copy .kicker { color: var(--accent); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; font-size: 0.85rem; }
.about-copy h2 { text-transform: uppercase; font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.08; margin: 16px 0 20px; }
.about-copy p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; max-width: 560px; }
.about-copy .btn { margin-top: 28px; }

/* ---------- FAQ accordion ---------- */
.faq-section { background: var(--bg-soft); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.faq-visual { border-radius: var(--radius); border: 1px solid var(--border); min-height: 440px; background: url("lab-vytal.jpg") center/cover; box-shadow: 0 12px 36px rgba(35,72,224,0.08); }
.faq-head .kicker { color: var(--accent); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; font-size: 0.85rem; }
.faq-head h2 { text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 3rem); margin-top: 12px; }
.faq-list { margin-top: 26px; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .pm { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; color: var(--muted); transition: .2s; }
.faq-item .pm::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.faq-item[open] .pm { border-color: var(--accent); color: var(--accent); }
.faq-item[open] .pm::before { content: "\2013"; }
.faq-item p { color: var(--muted); line-height: 1.8; padding: 0 0 22px; max-width: 640px; }

/* ---------- Trust / social proof section ---------- */
.trust-section { text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(720px 380px at 50% -12%, rgba(35,72,224,0.12), transparent 62%), var(--bg); }
.trust-section .kicker { color: var(--accent); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; font-size: 0.9rem; }
.trust-section h2 { text-transform: uppercase; font-size: clamp(2.1rem, 5.2vw, 3.8rem); line-height: 1.06; max-width: 920px; margin: 18px auto 0; }
.trust-section p { color: var(--muted); font-size: 1.12rem; margin: 22px auto 0; max-width: 640px; }
.trust-section .btn { margin-top: 32px; }

/* ---------- Split / about page ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.split p { color: var(--muted); margin-top: 16px; }
.media-box { border-radius: var(--radius); border: 1px solid var(--border); min-height: 360px; position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: 0 12px 36px rgba(35,72,224,0.08); }
.media-box::before { content: ""; position: absolute; inset: 0; background: url("dna-bg.jpg") center/cover; }
.media-box .media-cap { position: relative; z-index: 1; align-self: end; justify-self: start; margin: 0 0 20px 20px; padding: 8px 16px; border-radius: 999px; background: rgba(15,26,51,0.6); backdrop-filter: blur(6px); color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: .02em; }
.value-list { list-style: none; margin-top: 26px; display: grid; gap: 16px; }
.value-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.value-list .chk { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; margin-top: 3px; }
.value-list strong { color: var(--text); display: block; }

/* ---------- CTA band (legacy) ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--grad-soft), var(--surface-2); border: 1px solid var(--border); border-radius: 24px; padding: 64px 48px; text-align: center; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band p { color: var(--muted); margin: 16px auto 30px; max-width: 520px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.field textarea { resize: vertical; min-height: 130px; }
.contact-info .row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.contact-info .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border); font-size: 1.2rem; }
.contact-info .row strong { display: block; }
.contact-info .row span { color: var(--muted); font-size: 0.95rem; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

/* ---------- Support band (pre-footer CTA) ---------- */
.support-band { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(234,241,254,0.92), rgba(234,241,254,0.96)), url("dna-bg.jpg") center/cover; border-bottom: 3px solid var(--accent); }
.support-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 0; flex-wrap: wrap; }
.support-inner h2 { color: var(--text); text-transform: uppercase; font-size: clamp(1.3rem, 2.8vw, 1.95rem); letter-spacing: .01em; }

/* ---------- Footer (dark gradient) ---------- */
.footer { background: linear-gradient(180deg, #2b3a5c 0%, #16213c 55%, #0c1426 100%); color: #c2cbdd; padding: 64px 0 0; border-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-logo { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.footer-logo .logo-mark { width: 46px; height: 46px; flex: none; color: #8ea6ff; }
.footer-logo .wordmark { display: flex; flex-direction: column; line-height: 1; }
.footer-logo .wordmark b { color: #ffffff; font-size: 1.5rem; font-weight: 800; letter-spacing: .1em; }
.footer-logo .wordmark span { color: #aab4c8; font-size: 0.78rem; font-weight: 600; letter-spacing: .42em; margin-top: 4px; }
.footer .blurb { color: #a9b4c9; max-width: 340px; font-size: 0.95rem; line-height: 1.7; margin: 0; }
.footer-sep { height: 1px; background: rgba(255,255,255,0.16); margin: 28px 0 18px; max-width: 340px; }
.footer .copy { color: #94a0b8; font-size: 0.85rem; margin: 0; }
.footer-col h4 { color: #ffffff; text-transform: uppercase; letter-spacing: .06em; font-size: 0.98rem; font-weight: 700; margin-bottom: 20px; }
.footer-col ul { list-style: none; display: grid; gap: 13px; }
.footer-col li { position: relative; padding-left: 18px; }
.footer-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #8ea6ff; }
.footer-col a { color: #c2cbdd; font-size: 0.95rem; transition: color .2s; }
.footer-col a:hover { color: #ffffff; }
.footer-contact .crow { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.footer-contact .ci { flex: none; color: #8ea6ff; margin-top: 2px; }
.footer-contact .ci svg { width: 22px; height: 22px; display: block; }
.footer-contact a, .footer-contact span { color: #c2cbdd; font-size: 0.95rem; line-height: 1.55; }
.footer-contact a:hover { color: #ffffff; }
.footer-disclaimer { color: #8c98b3; font-size: 0.78rem; line-height: 1.6; max-width: 980px; margin: 40px auto 0; padding-bottom: 40px; }
.footer-support { background: #05070d; text-align: center; padding: 20px 16px; color: #c2cbdd; font-size: 0.95rem; }
.footer-support a { color: #ffffff; font-weight: 700; text-decoration: underline; }

/* ---------- FDA disclaimer band ---------- */
.fda-band { background: #0c1430; color: #93a0bb; padding: 52px 0 60px; }
.fda-band h4 { color: #d7deeb; text-transform: uppercase; letter-spacing: .1em; font-size: 0.9rem; font-weight: 700; margin-bottom: 22px; }
.fda-band p { font-size: 0.92rem; line-height: 1.85; margin-bottom: 20px; max-width: 1080px; }
.fda-band p:last-child { margin-bottom: 0; text-transform: uppercase; font-size: 0.82rem; letter-spacing: .02em; }

/* ---------- Hover price overlay ---------- */
.price-hover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(2px);
  font-weight: 800; font-size: 1.35rem; color: var(--text); letter-spacing: .01em;
  opacity: 0; transition: opacity .2s ease; pointer-events: none; border-radius: inherit; }
.pthumb:hover .price-hover { opacity: 1; }

/* ---------- Product photo fill ---------- */
.pthumb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.shop-card .badge, .pdp-imgpanel .badge, .product .tag { z-index: 1; }

/* ---------- Terms & Conditions ---------- */
.tc-hero { background: #2a4a80; color: #fff; text-align: center; padding: 72px 0 56px; }
.tc-hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.tc-hero .crumbs { color: #c9d6ec; margin-top: 14px; font-size: 1rem; }
.tc-hero .crumbs a:hover { color: #fff; }
.tc-intro { padding: 72px 0 24px; }
.tc-intro h2 { text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 22px; }
.tc-intro p { color: var(--muted); font-size: 1.12rem; line-height: 1.8; max-width: 1040px; }
.tc-section { padding: 40px 0 80px; position: relative; }
.tc-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(360px 260px at 12% 12%, rgba(35,72,224,0.05), transparent 60%),
    radial-gradient(420px 300px at 88% 45%, rgba(20,179,214,0.05), transparent 60%),
    radial-gradient(380px 280px at 18% 85%, rgba(35,72,224,0.05), transparent 60%); }
.tc-list { position: relative; z-index: 1; }
.tc-item { display: grid; grid-template-columns: 120px 1fr; gap: 0 16px; margin-bottom: 58px; align-items: start; }
.tc-num { width: 88px; height: 88px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; color: var(--accent); background: var(--bg); }
.tc-item h3 { text-transform: uppercase; font-size: 1.65rem; font-weight: 800; margin-bottom: 12px; }
.tc-item p { color: var(--muted); font-size: 1.08rem; line-height: 1.85; margin-bottom: 12px; }
.tc-item p strong { color: var(--text); }
.tc-item ol { margin: 14px 0 0 22px; color: var(--muted); font-size: 1.08rem; line-height: 1.85; display: grid; gap: 8px; }

/* ---------- Policy pages (privacy / shipping / refunds) ---------- */
.tc-item ul { margin: 14px 0 0 22px; color: var(--muted); font-size: 1.08rem; line-height: 1.85; display: grid; gap: 8px; }
.pol-h1 { text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 20px; }
.pol-body p { color: var(--muted); font-size: 1.1rem; line-height: 1.85; margin-bottom: 20px; max-width: 1080px; }
.pol-body h2 { text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 46px 0 16px; }
.pol-body h3 { text-transform: uppercase; font-size: 1.08rem; font-weight: 800; margin: 30px 0 12px; }
.pol-body ul { margin: 0 0 20px 24px; color: var(--muted); font-size: 1.1rem; line-height: 1.9; display: grid; gap: 6px; }
.pol-body strong { color: var(--text); }

/* ---------- Track your order ---------- */
.track-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.track-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.track-fields label { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.track-fields input { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 0.98rem; color: var(--text); }
.track-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.track-btn { width: 100%; margin-top: 26px; border: 0; background: var(--accent); color: #fff; font-family: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; padding: 18px; border-radius: 10px; cursor: pointer; transition: background .2s, transform .15s; }
.track-btn:hover { background: var(--accent-dim); transform: translateY(-1px); }
@media (max-width: 900px) {
  .track-grid { grid-template-columns: 1fr; gap: 32px; }
  .track-fields { grid-template-columns: 1fr; }
}

/* ---------- Confidence band (pre-footer) ---------- */
.confidence-band { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(rgba(9,14,28,0.78), rgba(9,14,28,0.84)), url("dna-bg.jpg") center/cover;
  border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent); }
.confidence-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 64px 0; flex-wrap: wrap; }
.confidence-inner .kick { font-size: 0.85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d7deeb; margin-bottom: 14px; }
.confidence-inner h2 { color: #fff; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.05; }
.confidence-inner .sub { margin-top: 16px; font-size: 0.95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9d3e6; }
.btn-white { background: #fff; color: #0f1a33; border: 0; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.35); }

/* ---------- About page (clone) ---------- */
.ab-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 60px; align-items: center; }
.ab-photo { border-radius: 22px; overflow: hidden; line-height: 0; box-shadow: 0 14px 40px rgba(35,72,224,0.10); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; }
.ab-title { font-size: clamp(2rem, 4.4vw, 3.3rem); text-transform: uppercase; line-height: 1.12; margin: 14px 0 26px; }
.ab-copy p { color: var(--muted); font-size: 1.1rem; line-height: 1.85; margin-bottom: 20px; }
.mission-band { background: #1e3a96; color: #fff; clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); padding: 150px 24px; text-align: center; }
.mission-band h2 { color: #fff; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 30px; }
.mission-band p { max-width: 1180px; margin: 0 auto; font-size: 1.13rem; line-height: 1.85; color: #e8edf8; }
@media (max-width: 900px) {
  .ab-split { grid-template-columns: 1fr; gap: 34px; }
  .mission-band { clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%); padding: 110px 20px; }
}

/* ---------- Contact page (clone) ---------- */
.contact2-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: start; }
.c2-kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; }
.c2-title { font-size: clamp(2.4rem, 5vw, 3.7rem); text-transform: uppercase; margin: 12px 0 20px; line-height: 1; }
.c2-sub { text-transform: uppercase; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; margin-bottom: 24px; }
.c2-div { height: 1px; background: var(--border); margin-bottom: 38px; }
.c2-row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 34px; }
.c2-ico { color: var(--accent); flex: none; margin-top: 2px; }
.c2-ico svg { width: 38px; height: 38px; display: block; }
.c2-row strong { display: block; font-size: 1.2rem; margin-bottom: 6px; }
.c2-row span { color: var(--text); font-size: 1.08rem; line-height: 1.65; }
.msg-card { background: #1e3a96; border-radius: 26px; padding: 52px 46px; color: #fff; }
.msg-card h2 { color: #fff; text-transform: uppercase; font-size: clamp(1.6rem, 3.1vw, 2.4rem); line-height: 1.3; margin-bottom: 36px; }
.msg-card .mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.msg-card input, .msg-card textarea { width: 100%; background: transparent; border: 1.5px solid rgba(255,255,255,0.9); border-radius: 10px; padding: 17px 18px; color: #fff; font-family: inherit; font-size: 1rem; margin-bottom: 20px; }
.msg-card input::placeholder, .msg-card textarea::placeholder { color: rgba(255,255,255,0.92); }
.msg-card input:focus, .msg-card textarea:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.msg-card textarea { min-height: 150px; resize: vertical; }
.msg-submit { width: 100%; background: #fff; color: #0f1a33; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border: 0; border-radius: 8px; padding: 18px; font-size: 1.05rem; font-family: inherit; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.msg-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
.msg-note { color: #fff; font-size: .9rem; margin-top: 14px; }
.contact-map { margin-top: 72px; line-height: 0; }
.contact-map iframe { width: 100%; height: 520px; border: 0; }
@media (max-width: 900px) {
  .contact2-grid { grid-template-columns: 1fr; gap: 40px; }
  .msg-card { padding: 38px 26px; }
  .msg-card .mrow { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.co-step { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.co-stepnum { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); display: grid; place-items: center; font-weight: 700; flex: none; }
.co-stepnum.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.co-h { font-size: 1.35rem; }
.co-note { color: var(--muted); margin: 0 0 18px 46px; font-size: 0.95rem; }
.co-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 2px rgba(15,26,51,0.04); }
.co-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.co-locked { color: var(--muted); text-align: center; padding: 18px; font-size: 0.98rem; }
.co-done-row { display: flex; align-items: center; gap: 14px; }
.co-check { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.co-done-row strong { display: block; }
.upsell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.up-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 14px; text-align: center; transition: border-color .2s, box-shadow .2s; }
.up-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(35,72,224,0.10); }
.up-card .uico { font-size: 1.9rem; }
.up-name { font-weight: 700; margin: 10px 0 4px; font-size: 0.98rem; }
.up-sub { color: var(--muted); font-size: 0.8rem; line-height: 1.5; min-height: 38px; }
.up-price { font-weight: 800; margin: 10px 0 12px; font-size: 1.05rem; }
.up-btn { width: 100%; border: 1.5px solid var(--accent); color: var(--accent); background: var(--bg); border-radius: 999px; padding: 9px; font-weight: 700; font-family: inherit; font-size: 0.88rem; cursor: pointer; transition: background .15s, color .15s; }
.up-btn.on { background: var(--accent); color: #fff; }
@media (max-width: 560px) { .upsell-grid { grid-template-columns: 1fr; } }
.co-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; position: sticky; top: 96px; }
.co-summary h3 { margin-bottom: 18px; }
.ship-note { background: var(--grad-soft); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 0.86rem; color: var(--text); margin-bottom: 16px; font-weight: 600; line-height: 1.5; }
.co-line { display: flex; justify-content: space-between; padding: 10px 0; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.co-line.promo { color: var(--accent); font-weight: 600; }
.co-line.co-total { color: var(--text); font-weight: 800; font-size: 1.15rem; border-bottom: 0; padding-top: 14px; }
.co-fine { color: var(--muted); font-size: 0.76rem; margin-top: 14px; }

/* ---------- Product detail page ---------- */
.pdp-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: start; }
.pdp-imgpanel { position: relative; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #f7faff, #eaf1fe); min-height: 500px; display: flex; align-items: center; justify-content: center; }
.pdp-imgpanel .badge { position: absolute; top: 16px; left: 16px; color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: .04em; padding: 7px 14px; border-radius: 8px; background: var(--accent); text-transform: uppercase; }
.pdp-imgpanel .badge.best { background: var(--text); }
.pdp-imgpanel .pvial { width: 175px; }
.pdp-imgpanel .plabel .pname { font-size: 1.25rem; }
.pdp-imgpanel .plabel .plogo svg { width: 20px; height: 20px; }
.pdp-imgpanel .plabel .plogo b { font-size: 0.78rem; }
.pdp-imgpanel .plabel .pmg { font-size: 0.7rem; }
.pdp-imgpanel .plabel .pfine { font-size: 0.58rem; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pdp-thumb { width: 86px; height: 86px; border: 1px solid var(--border); border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); cursor: pointer; transition: border-color .2s; }
.pdp-thumb:hover, .pdp-thumb.active { border-color: var(--accent); }
.pdp-thumb .doc { width: 40px; height: 52px; border: 1px solid var(--border); border-radius: 3px; background: repeating-linear-gradient(180deg, #fff 0 5px, #e8edf6 5px 8px); }
.pdp-thumb small { font-size: 0.52rem; letter-spacing: .04em; text-transform: uppercase; }
.pdp-title { font-size: clamp(2rem, 4.5vw, 3.2rem); text-transform: uppercase; line-height: 1.04; }
.pdp-price { font-size: 1.7rem; font-weight: 600; margin: 16px 0 22px; }
.pdp-desc { color: var(--text); font-weight: 600; line-height: 1.75; font-size: 1.04rem; }
.ptable { width: 100%; border-collapse: collapse; margin: 28px 0 6px; border: 1px solid var(--border); }
.ptable th, .ptable td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 0.98rem; }
.ptable th { background: var(--surface-2); font-weight: 700; }
.ptable td + td, .ptable th + th { border-left: 1px solid var(--border); }
.ptable tr:last-child td { border-bottom: 0; }
.pdp-points { margin: 20px 0 4px; font-size: 1rem; }
.pdp-label { font-weight: 700; margin: 20px 0 10px; font-size: 1.05rem; }
.pdp-select { padding: 13px 16px; border: 1px solid var(--border); border-radius: 10px; min-width: 240px; background: var(--surface); font-family: inherit; font-size: 0.96rem; color: var(--text); }
.pdp-select:focus { outline: none; border-color: var(--accent); }
.qty-row { display: flex; gap: 16px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.qty { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty button { width: 44px; height: 48px; border: 0; background: var(--surface-2); cursor: pointer; font-size: 1.15rem; color: var(--text); font-family: inherit; }
.qty button:hover { background: var(--border); }
.qty input { width: 56px; text-align: center; border: 0; font-family: inherit; font-size: 1rem; color: var(--text); }
.qty input:focus { outline: none; }

/* ---------- Shop layout (sidebar + grid) ---------- */
.shop-title { font-size: clamp(2.6rem, 6vw, 4rem); text-transform: uppercase; }
.crumbs { color: var(--muted); margin-top: 8px; font-size: 0.95rem; }
.crumbs a:hover { color: var(--accent); }
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
.shop-side .sblock { margin-bottom: 36px; }
.shop-side h4 { text-transform: uppercase; font-size: 1rem; letter-spacing: .04em; margin-bottom: 14px; }
.srow { display: flex; gap: 10px; }
.srow input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-family: inherit; font-size: .92rem; color: var(--text); }
.srow input:focus { outline: none; border-color: var(--accent); }
.srow .btn { border-radius: 10px; padding: 12px 18px; font-size: .85rem; }
.price-range { width: 100%; accent-color: var(--accent); }
.prow { display: flex; justify-content: space-between; margin-top: 10px; }
.pbox { border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; color: var(--muted); font-size: 0.9rem; background: var(--surface); }
.chk-row { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 10px; cursor: pointer; font-size: .95rem; }
.chk-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.cat-row { display: flex; justify-content: space-between; align-items: center; color: var(--muted); padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: .95rem; }
.cat-row .cnt { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; padding: 2px 10px; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.filters-btn { display: none; align-items: center; gap: 9px; padding: 14px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-family: inherit; font-weight: 600; font-size: 1rem; color: var(--text); cursor: pointer; }
.results-bar select { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-family: inherit; font-size: .92rem; }
.shop-main .shop-grid { grid-template-columns: repeat(3, 1fr); }
.shop-card .pts { margin-top: 8px; color: var(--text); font-size: 0.92rem; }
.pthumb.sq { aspect-ratio: 1 / 1; min-height: 0; }
a.shop-card { display: block; color: var(--text); }

/* ---------- Shop grid (products page) ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.shop-card { text-align: center; }
.shop-card .pthumb { position: relative; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #f7faff, #eaf1fe); padding: 28px 18px; display: flex; align-items: center; justify-content: center; min-height: 300px; box-shadow: 0 1px 2px rgba(15,26,51,0.04); transition: transform .2s, box-shadow .2s, border-color .2s; }
.shop-card:hover .pthumb { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(35,72,224,0.14); border-color: var(--accent); }
.shop-card .badge { position: absolute; top: 14px; left: 14px; color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: .04em; padding: 6px 12px; border-radius: 8px; background: var(--accent); text-transform: uppercase; }
.shop-card .badge.best { background: var(--text); }
.shop-card h3 { margin-top: 18px; font-size: 0.98rem; text-transform: uppercase; letter-spacing: .02em; }
.shop-card .cta { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 0.8rem; }
.shop-card .cta:hover { text-decoration: underline; }
.shop-foot { text-align: center; margin-top: 48px; }

/* VYTAL vial mockup with label */
.pvial { width: 122px; }
.pvial .pcap { height: 24px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #ccd6e8 0%, #aebcd6 55%, #c2cee4 100%); }
.pvial .pneck { height: 8px; width: 64%; margin: 0 auto; background: linear-gradient(180deg, #dde6f3, #cdd9ee); }
.pvial .pglass { position: relative; border: 1px solid #cdd9ee; border-top: 0; border-radius: 3px 3px 13px 13px; background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(223,231,245,0.9)); padding: 9px 0 0; box-shadow: inset 0 -10px 18px rgba(35,72,224,0.05); }
.pvial .plabel { margin: 8px 7px 16px; border-radius: 3px; padding: 10px 7px 12px; background: linear-gradient(180deg, #1b2748, #0f1a33); color: #fff; }
.pvial .plabel .plogo { display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; }
.pvial .plabel .plogo svg { width: 15px; height: 15px; }
.pvial .plabel .plogo b { font-size: 0.6rem; letter-spacing: .12em; font-weight: 800; }
.pvial .plabel .pname { font-size: 0.92rem; font-weight: 800; margin-top: 9px; line-height: 1.15; }
.pvial .plabel .pmg { display: inline-block; margin-top: 8px; border: 1px solid rgba(255,255,255,0.32); font-size: 0.56rem; padding: 2px 8px; border-radius: 3px; letter-spacing: .05em; }
.pvial .plabel .pfine { font-size: 0.45rem; color: #9fabc6; margin-top: 9px; line-height: 1.55; letter-spacing: .05em; }

/* ---------- Disclaimer (legacy) ---------- */
.disclaimer { font-size: 0.78rem; color: var(--muted); max-width: 760px; margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .support-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .about-grid, .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .shop-layout { display: block; }
  .shop-side { display: none; margin-bottom: 30px; }
  .shop-side.open { display: block; }
  .filters-btn { display: inline-flex; flex: 1; justify-content: center; }
  .results-bar { justify-content: flex-start; }
  .results-bar .muted { display: none; }
  .results-bar select { flex: 1; }
  .shop-main .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-grid { grid-template-columns: 1fr; gap: 36px; }
  .pdp-imgpanel { min-height: 400px; }
  .checkout-grid { grid-template-columns: 1fr; gap: 32px; }
  .co-summary { position: static; }
  .about-visual { min-height: 380px; }
  .faq-visual { min-height: 260px; order: 2; }
  .hero::before { height: 34vh; }
  .hero-inner { padding-top: 30vh; }
  .nav-links { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 0; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 24px; width: 100%; }
  .nav-toggle { display: block; }
}
@media (max-width: 760px) {
  .topbar-tag { display: none; }
  .topbar-social, .topbar-links { flex: 0 0 auto; }
  .topbar-inner { justify-content: space-between; }
}
@media (max-width: 480px) {
  .topbar-links a:first-child { display: none; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  section { padding: 64px 0; }
  .cta-band { padding: 44px 24px; }
}
@media (max-width: 900px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---- Related products band (PDP bottom) ---- */
.related { padding: 28px 0 96px; border-top: 1px solid var(--border); margin-top: 8px; background: var(--bg); }
.related-title { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; margin: 34px 0 26px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.related .pthumb { min-height: 0; aspect-ratio: 1 / 1; padding: 14px; }
.related h3 { font-size: 1rem; margin: 14px 0 4px; }
.related .pts { margin-bottom: 12px; }
@media (max-width: 980px) { .related-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ============================================================
   WORDPRESS / WOOCOMMERCE OVERRIDES (appended for theme build)
   ============================================================ */
img { max-width: 100%; height: auto; }
.pthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* shop sidebar category list */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.cat-list li a { color: var(--text); text-decoration: none; }
.cat-list li a:hover { color: var(--accent); }

/* woocommerce result bar + ordering */
.results-bar .woocommerce-result-count { margin: 0; color: var(--muted); font-size: 0.95rem; }
.results-bar .woocommerce-ordering select { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-family: inherit; color: var(--text); background: #fff; }

/* woo buttons → brand gradient pill */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wp-element-button, button[type=submit],
.woocommerce button.button.alt {
  background: var(--grad) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; font-weight: 700 !important; font-family: inherit !important;
  padding: 13px 26px !important; cursor: pointer; text-decoration: none !important;
}
.woocommerce .button:hover { filter: brightness(1.06); }

/* single product */
.woocommerce div.product { color: var(--text); }
.woocommerce div.product .product_title { color: var(--text); font-weight: 700; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent); font-size: 1.5rem; font-weight: 700; }
.woocommerce div.product form.cart .variations select { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; min-width: 220px; }
.woocommerce div.product form.cart div.quantity .qty { border: 1px solid var(--border); border-radius: 10px; padding: 10px; width: 70px; }
.woocommerce span.onsale { background: var(--accent); color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; min-height: 0; line-height: 1.4; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--accent); }
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2 { font-size: 1.5rem; text-transform: uppercase; }

/* forms (checkout, account, contact) */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; color: var(--text);
}
.woocommerce form.checkout h3, .woocommerce-account h2 { color: var(--text); }
.woocommerce-info, .woocommerce-message { border-top-color: var(--accent); }

/* pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; color: var(--text);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* page template banner */
.tc-hero h1 { margin: 0; }
.pol-wrap { padding: 48px 0 80px; }

/* ===== AGE GATE PLUGIN → match original JS gate ===== */
.age-gate-wrapper { background: rgba(15,26,51,.55) !important; backdrop-filter: blur(8px); }
.age-gate, .age-gate * { font-family: "Poppins", sans-serif !important; }
.age-gate { background: #fff !important; max-width: 440px !important; margin: auto; border-radius: 18px !important; padding: 44px 38px !important; box-shadow: 0 30px 80px rgba(15,26,51,.35); }
.age-gate-heading, .age-gate h1, .age-gate h2 { color: #0f1a33 !important; font-weight: 700 !important; font-size: 26px !important; }
.age-gate p, .age-gate-subheading { color: #57617a !important; font-size: 15px !important; }
.age-gate-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.age-gate-buttons button { width: 100%; border-radius: 999px !important; padding: 14px 26px !important; font-weight: 700 !important; font-size: 16px !important; cursor: pointer; }
.age-gate-submit-yes { order: -1; background: linear-gradient(100deg,#2f5cff,#2348e0 52%,#14b3d6) !important; color: #fff !important; border: 0 !important; }
.age-gate-submit-no { background: #fff !important; color: #0f1a33 !important; border: 1px solid #e0e8f5 !important; }
.age-gate-remember-wrapper, .age-gate-remember-wrapper label { color: #57617a !important; }

/* ===== POPUP MAKER + MAILPOET → match original promo ===== */
.pum-container, .pum-container * { font-family: "Poppins", sans-serif !important; }
.pum-container { max-width: 470px !important; border-radius: 18px !important; padding: 40px 34px !important; box-shadow: 0 30px 80px rgba(15,26,51,.35) !important; }
.pum-overlay { background: rgba(15,26,51,.55) !important; backdrop-filter: blur(8px); }
.pum-container .pum-close { background: none !important; border: 0 !important; color: #9aa3b8 !important; font-size: 20px !important; top: 14px !important; right: 16px !important; }
.pum-container .mailpoet_text { width: 100% !important; border: 1px solid #e0e8f5 !important; border-radius: 12px !important; padding: 15px 18px !important; font-size: 16px !important; text-align: center; color: #0f1a33 !important; }
.pum-container .mailpoet_submit { width: 100% !important; background: linear-gradient(100deg,#2f5cff,#2348e0 52%,#14b3d6) !important; color: #fff !important; font-weight: 700 !important; border: 0 !important; border-radius: 999px !important; padding: 16px 20px !important; font-size: 17px !important; margin-top: 12px; cursor: pointer; }
.pum-container .mailpoet_paragraph { margin: 0 !important; }
.pum-container .mailpoet_validate_success { color: #1b8a4a !important; font-weight: 700; }

/* sidebar product search form */
.sblock .woocommerce-product-search { display: flex; gap: 8px; }
.sblock .woocommerce-product-search .search-field { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: inherit; }
.sblock .woocommerce-product-search button { white-space: nowrap; }

/* WP admin bar offset for sticky nav (logged-in view only) */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* fix: no forced min-height on the about photo card on mobile (kills white gap under image) */
@media (max-width: 900px) {
  .about-visual.about-photo { min-height: 0; }
}

/* ============ SINGLE PRODUCT PAGE LAYOUT (match original pdp-grid) ============ */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product div.entry-summary { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images img { width: 100%; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, #f7faff, #eaf1fe); }
.woocommerce div.product .onsale { z-index: 5; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none !important; }
@media (max-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr; gap: 28px; } }

/* product grids (related products + any ul.products) */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 24px !important; }
.woocommerce ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; text-align: left; }
.woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, #f7faff, #eaf1fe); margin: 0 0 12px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 700; color: var(--text); }
.woocommerce ul.products li.product .price { color: var(--accent); font-weight: 700; }
.woocommerce .related.products > h2 { margin-bottom: 22px; }
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* kill stray focus outlines / blue page border */
main :focus { outline: none; }
.woocommerce, .woocommerce div.product, main, article { outline: none !important; box-shadow: none !important; }

/* ============ FIX: static-site .product card class collides with Woo's div.product/li.product ============ */
.woocommerce div.product, .woocommerce li.product,
.woocommerce div.product:hover, .woocommerce li.product:hover {
  border: 0 !important; padding: 0 !important; background: transparent !important;
  transform: none !important; box-shadow: none !important; border-radius: 0 !important;
}

/* Woo clearfix pseudo-elements become phantom grid cells — remove them */
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none !important; }
.woocommerce ul.products li.product { clear: none !important; }

/* stray focus rings */
:focus { outline: none; }
:focus-visible { outline: none; }

/* gallery figure tightening */
.woocommerce div.product div.images figure { margin: 0; }

/* mobile PDP breathing room */
@media (max-width: 760px) {
  .woocommerce div.product { gap: 22px; }
  .woocommerce div.product div.images img { border-radius: 14px; }
  .woocommerce div.product .product_title { font-size: 1.7rem; }
  .woocommerce div.product .summary, .woocommerce div.product .entry-summary { padding: 0 2px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
}

/* equal-height product cards: button always pinned to bottom of card */
.woocommerce ul.products li.product { display: flex !important; flex-direction: column; }
.woocommerce ul.products li.product .button { margin-top: auto !important; align-self: stretch; text-align: center; }
.woocommerce ul.products li.product .price { margin: 4px 0 16px !important; }

/* ============ COA: gallery thumbnails + "View Certificate of Analysis" link ============ */
/* Product gallery thumbnails — uploaded gallery images (incl. COA scans) render here, styled to match the original pdp-thumb look */
.woocommerce div.product .flex-control-thumbs { display: flex; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.woocommerce div.product .flex-control-thumbs li { width: 86px; margin: 0; }
.woocommerce div.product .flex-control-thumbs img { width: 86px; height: 86px; object-fit: cover; border: 1px solid var(--border); border-radius: 10px; background: #fff; opacity: .72; cursor: pointer; transition: border-color .2s, opacity .2s; }
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--accent); }

/* "View Certificate of Analysis →" button under add-to-cart */
.vytal-coa-link { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 4px; font-weight: 700; font-size: .98rem; color: var(--accent); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 12px 22px; transition: background .2s, border-color .2s; }
.vytal-coa-link:hover { background: var(--bg-soft); border-color: var(--accent); }

/* ============ CART COUNT BADGE ============ */
.nicon { position: relative; }
.cart-count { position: absolute; top: -7px; right: -9px; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }

/* ============ SLIDE-OUT CART DRAWER ============ */
#vcart-overlay { position: fixed; inset: 0; background: rgba(15,26,51,.45); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 9998; }
#vcart-overlay.open { opacity: 1; pointer-events: auto; }
#vcart { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 94vw); background: #fff; z-index: 9999; transform: translateX(105%); transition: transform .3s ease; box-shadow: -20px 0 60px rgba(15,26,51,.22); display: flex; flex-direction: column; }
#vcart.open { transform: none; }
.vcart-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--border); }
.vcart-head h3 { margin: 0; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; }
#vcart-close { background: none; border: 0; font-size: 26px; color: var(--muted); cursor: pointer; line-height: 1; }
#vcart .widget_shopping_cart_content { flex: 1; overflow-y: auto; padding: 18px 26px 26px; display: flex; flex-direction: column; }
#vcart ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; flex: 1; }
#vcart li.woocommerce-mini-cart-item { display: flex; gap: 14px; align-items: center; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--border); position: relative; margin: 0; }
#vcart li.woocommerce-mini-cart-item a { color: var(--text); font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 14px; }
#vcart li.woocommerce-mini-cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); float: none !important; margin: 0 !important; }
#vcart li.woocommerce-mini-cart-item a.remove { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #c0392b !important; font-size: 20px; font-weight: 400; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
#vcart .quantity { color: var(--muted); font-size: .92rem; display: block; margin-top: 4px; }
#vcart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; padding: 18px 0 14px; border-top: 2px solid var(--border); margin: auto 0 0; color: var(--text); }
#vcart .woocommerce-mini-cart__buttons { display: flex; gap: 10px; margin: 0; }
#vcart .woocommerce-mini-cart__buttons a { flex: 1; text-align: center; }
#vcart .woocommerce-mini-cart__empty-message { color: var(--muted); text-align: center; margin-top: 40px; }

/* ============ CART PAGE ============ */
.woocommerce-cart table.shop_table { border: 1px solid var(--border); border-radius: 14px; }
.woocommerce-cart table.shop_table th { color: var(--text); }
.woocommerce-cart table.shop_table img { width: 72px; border-radius: 10px; border: 1px solid var(--border); }
.woocommerce-cart .cart_totals { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.woocommerce-cart .cart_totals h2 { margin-top: 0; font-size: 1.25rem; }
.woocommerce-cart .quantity .qty { border: 1px solid var(--border); border-radius: 10px; padding: 8px; width: 64px; }

/* ============ CHECKOUT PAGE (two-column like the original) ============ */
/* Explicit grid rows so the Order Summary sits at the TOP of the right column and
   stays in view, instead of being pushed to the bottom of the long left column. */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: auto 1fr;
  column-gap: 44px;
  row-gap: 14px;
  align-items: start;
}
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 14px; font-size: 1.25rem; align-self: start; }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 24px 26px 26px; position: sticky; top: 100px; }
.woocommerce-checkout #order_review table.shop_table { background: transparent; border: 0; }
.woocommerce-checkout form .form-row label { color: var(--text); font-weight: 600; font-size: .92rem; }

/* tighten vertical spacing so the form is compact, not half-empty */
.woocommerce-checkout #customer_details .form-row { margin: 0 0 12px; }
.woocommerce-checkout #customer_details h3 { margin: 4px 0 14px; font-size: 1.25rem; }
.woocommerce-checkout #customer_details .woocommerce-additional-fields { margin-top: 6px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { margin-top: 4px; }
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-info { margin: 0 0 16px; }

/* new-customer account helper note near the email/billing fields */
.vytal-acct-note { background: var(--grad-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px; font-size: 0.88rem; color: var(--text); margin: 0 0 18px; line-height: 1.55; }

/* constrain oversized payment-method logos (e.g. NOWPayments crypto) */
.woocommerce-checkout .wc_payment_methods img,
.woocommerce-checkout li.wc_payment_method img,
.woocommerce-checkout .payment_methods label img { max-width: 130px !important; width: auto !important; height: auto !important; display: inline-block; vertical-align: middle; }

@media (max-width: 900px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; grid-template-rows: none; }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: auto; }
  .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
}

/* checkout intro step header */
.co-intro { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 20px; }
.co-title { margin: 0 0 6px; font-size: 1.8rem; }
.co-sub { margin: 0; color: var(--muted); max-width: 560px; }
.vytal-age-confirm { margin: 14px 0 !important; }
.vytal-age-confirm label { color: var(--text); font-size: .95rem; }
/* place order button full width */
.woocommerce-checkout #place_order { width: 100%; font-size: 1.05rem; padding: 16px !important; }