@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --bg:#ffffff;
  --text:#141414;
  --muted:#616161;
  --line:#e8e8e8;

  --brand:#14b8a6;
  --announce:#dff3fb;
  --announce-text:#1c3d57;

  --hero-overlay: rgba(5, 27, 33, .62);
  --hero-overlay2: rgba(20, 184, 166, .28);

  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow2: 0 18px 50px rgba(0,0,0,.14);

  --radius:18px;
  --radius-lg:22px;

  --btn-dark:#2c1f1b;
  --btn-dark-hover:#3a2a24;
  --featured:#0ea5e9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, calc(100% - 56px)); margin:0 auto}

/* announce */
.announce{background:var(--announce);color:var(--announce-text);border-bottom:1px solid #c9e7f3;font-weight:600;}
.announce .inner{display:flex;justify-content:center;align-items:center;padding:10px 0;gap:10px;text-align:center;font-size:14px;}
.announce .inner strong{font-weight:800}

/* header */
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;}
.brand-badge{width:42px;height:42px;border-radius:12px;background:var(--brand-grad);display:grid;place-items:center;box-shadow:0 8px 20px rgba(20,184,166,.25);}
.brand-badge svg{width:22px;height:22px;color:#fff}
.brand-name{font-size:20px}
.nav{display:flex;align-items:center;gap:28px;font-weight:600;color:#3a3a3a;}
.nav a{padding:8px 10px;border-radius:12px;}
.nav a.active{color:var(--brand);}
.nav a:hover{background:#f6f6f6}
.cart-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;position:relative;}
.cart-btn:hover{background:#f6f6f6}
.cart-btn svg{width:18px;height:18px}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--brand-grad);color:#fff;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:800;border:2px solid #fff;}

/* hero */
.hero{min-height:520px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12);}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--hero-overlay), rgba(28,10,10,.45) 55%, rgba(28,10,10,.15)),
    radial-gradient(900px 600px at 75% 60%, var(--hero-overlay2), transparent 60%),
    url("./images/hero.jpg");
  background-size:cover;background-position:center;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));}
.hero .content{position:relative;padding:72px 0 54px;color:#fff;}
.pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(20,184,166,.18);color:rgba(255,255,255,.82);font-weight:700;font-size:13px;}
.hero h1{margin:14px 0 10px;font-size:clamp(44px, 5vw, 72px);line-height:1.02;letter-spacing:-0.03em;}
.hero .accent{color:#2dd4bf}
.hero p{margin:0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.55;max-width:62ch;}
.hero .actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.btn{border-radius:10px;padding:12px 18px;font-weight:700;border:1px solid rgba(0,0,0,.08);cursor:pointer;display:inline-flex;align-items:center;gap:10px;}
.btn.primary{background:#fff;color:#111;box-shadow:var(--shadow2);}
.btn.primary:hover{transform:translateY(-1px)}
.btn.secondary{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22);}
.btn.secondary:hover{background:rgba(255,255,255,.14)}

/* features on hero bottom */
.hero-features{position:absolute;left:0;right:0;bottom:0;padding:16px 0;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28));}
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.feature-pill{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(6px);}
.feature-pill .ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(20,184,166,.22);border:1px solid rgba(255,255,255,.14);}
.feature-pill svg{width:18px;height:18px;color:rgba(255,255,255,.82)}
.feature-pill .t1{font-weight:800}
.feature-pill .t2{color:rgba(255,255,255,.68);font-size:13px;margin-top:2px}

/* section header */
.section{padding:54px 0}
.hgroup .tag{display:inline-flex;padding:4px 10px;border-radius:10px;border:1px solid #e5e5e5;background:#fafafa;font-weight:700;font-size:13px;}
.hgroup h2{margin:12px 0 10px;font-size:44px;letter-spacing:-.02em;}
.hgroup p{margin:0;color:var(--muted);max-width:70ch;line-height:1.6}

/* filters */
.filters{margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:#fff;}
.filter-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.input, .select{height:44px;border-radius:10px;border:1px solid #e3e3e3;background:#fff;padding:0 14px;font-size:14px;min-width:240px;}
.select{min-width:180px}
.clear-btn{height:44px;border-radius:10px;border:1px solid transparent;background:transparent;color:#666;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:10px;}
.clear-btn:hover{background:#f7f7f7;border-color:#eee}

/* product grid */
.meta-line{margin-top:18px;color:#6b6b6b;font-size:14px;}
.grid{margin-top:18px;display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;}
.card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid #efefef;transition:transform .12s ease, box-shadow .12s ease;}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(0,0,0,.10);}
.imgbox{height:210px;background:#f7f2ee;display:grid;place-items:center;position:relative;}
.imgbox img{width:100%;height:100%;object-fit:cover;}
.placeholder-ico{width:64px;height:64px;opacity:.35}
.featured{position:absolute;top:12px;right:12px;background:var(--featured);color:#fff;font-weight:800;font-size:12px;padding:5px 10px;border-radius:8px;box-shadow:0 10px 20px rgba(22,119,255,.18);}
.card-body{padding:16px 16px 14px}
.cat-pill{display:inline-flex;padding:4px 10px;border-radius:10px;border:1px solid #e9e1df;background:#fbf8f7;font-weight:700;font-size:12px;color:#6a5c58;}
.pname{margin:10px 0 8px;font-size:18px;font-weight:800;letter-spacing:-.01em;}
.pname a:hover{color:var(--brand)}
.pdesc{margin:0;color:#6a6a6a;font-size:14px;line-height:1.45;min-height:40px;}
.card-bottom{padding:12px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.price{font-size:24px;font-weight:900;letter-spacing:-.02em;}
.add-btn{border-radius:10px;border:0;background:var(--btn-dark);color:#fff;height:38px;padding:0 14px;font-weight:800;display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
.add-btn:hover{background:var(--btn-dark-hover)}
.add-btn svg{width:16px;height:16px}

/* product detail */
.detail{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;margin-top:26px;}
.detail .imgbox{height:380px;border-radius:var(--radius-lg);overflow:hidden}
.detail-card{border-radius:var(--radius-lg);border:1px solid #eee;box-shadow:var(--shadow);padding:18px;background:#fff;}
.detail-card h1{margin:0 0 8px;font-size:36px;letter-spacing:-.02em}
.detail-card .sub{color:#666;margin-bottom:14px;line-height:1.55}
.kv{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kv span{display:inline-flex;padding:6px 10px;border-radius:10px;border:1px solid #eee;background:#fafafa;font-weight:700;font-size:13px;color:#555;}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn-outline{border-radius:10px;height:44px;padding:0 14px;border:1px solid #e3e3e3;background:#fff;font-weight:800;cursor:pointer;}
.btn-outline:hover{background:#f7f7f7}

/* CTA + footer */
.cta{padding:52px 0;background:radial-gradient(900px 420px at 55% 0%, rgba(20,184,166,.34), transparent 60%),linear-gradient(180deg, rgba(5,27,33,1), rgba(3,17,21,1));color:#fff;text-align:center;}
.cta h3{margin:0 0 8px;font-size:30px;letter-spacing:-.02em;}
.cta p{margin:0;color:rgba(255,255,255,.75)}
.cta .row{margin-top:18px;display:flex;justify-content:center}
.footer{background:radial-gradient(900px 520px at 55% 0%, rgba(14,165,233,.22), transparent 60%),linear-gradient(180deg, rgba(5,27,33,1), rgba(3,17,21,1));color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:26px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer h4{margin:0 0 12px;color:#fff}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:#fff;text-decoration:underline}
.footer .small{color:rgba(255,255,255,.55);font-size:13px;line-height:1.55}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:16px;color:rgba(255,255,255,.55);font-size:13px}

/* drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:80;}
.overlay.open{display:block}
.drawer{position:fixed;top:0;right:0;height:100%;width:390px;background:#fff;border-left:1px solid #eee;transform:translateX(100%);transition:transform .2s ease;z-index:90;display:flex;flex-direction:column;}
.drawer.open{transform:translateX(0)}
.drawer .dhead{padding:18px 18px 12px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;}
.drawer .dhead h3{margin:0;font-size:20px}
.drawer .close{width:34px;height:34px;border-radius:10px;border:1px solid #eee;background:#fff;cursor:pointer;}
.drawer .close:hover{background:#f7f7f7}
.drawer .body{padding:18px;overflow:auto;flex:1}
.empty{text-align:center;padding:56px 0;color:#6a6a6a;}
.empty .circle{width:64px;height:64px;border-radius:999px;background:#f6eeec;margin:0 auto 14px;display:grid;place-items:center;border:1px solid #efe0dd;}
.empty .circle svg{width:26px;height:26px;opacity:.55}
.continue{margin-top:16px;height:40px;padding:0 14px;border-radius:10px;border:1px solid #e6e6e6;background:#fff;font-weight:800;cursor:pointer;}
.continue:hover{background:#f7f7f7}
.cart-item{border:1px solid #eee;border-radius:16px;padding:12px;margin-bottom:12px;}
.cart-item .top{display:flex;justify-content:space-between;gap:12px}
.cart-item .nm{font-weight:900}
.cart-item .sub{color:#6a6a6a;font-size:13px;margin-top:2px}
.cart-item .row{display:flex;align-items:center;gap:10px;margin-top:10px}
.qty{width:76px;height:38px;border-radius:10px;border:1px solid #e6e6e6;padding:0 10px;}
.rm{margin-left:auto;height:38px;padding:0 12px;border-radius:10px;border:1px solid #eee;background:#fff;font-weight:800;cursor:pointer;}
.rm:hover{background:#f7f7f7}
.drawer .foot{padding:16px 18px;border-top:1px solid #eee;background:#fff;}
.subtotal{display:flex;justify-content:space-between;font-weight:900;margin-bottom:12px}
.checkout{width:100%;height:44px;border-radius:10px;border:0;background:var(--btn-dark);color:#fff;font-weight:900;cursor:pointer;}
.checkout:hover{background:var(--btn-dark-hover)}

@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2, 1fr);}
  .feature-row{grid-template-columns:repeat(2, 1fr);}
  .detail{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .container{width:calc(100% - 32px)}
  .grid{grid-template-columns:1fr;}
  .drawer{width:100%;}
  .nav{gap:10px}
}

.brand-logo{height: 500px;width:auto;display:block;}
/* --- Logo size override (bigger logo, same header height) --- */
.header .inner{ overflow: visible; }
.brand{ overflow: visible; }
.brand-logo{
  height: 200px;      /* change this bigger/smaller */
  width: auto;
  display: block;
  margin-top: -44px; /* pulls logo up so header height stays the same */
}

/* --- HARD DETACH LOGO FROM HEADER LAYOUT --- */
.header{
  height: 64px;              /* header stays this tall */
}
.header .inner{
  height: 64px;              /* match header height */
  padding: 0;                /* prevents header growth */
  overflow: visible;         /* allow big logo to overflow */
  align-items: center;
}
.brand{
  position: relative;        /* anchor for absolute logo */
  height: 64px;              /* keeps link/header height fixed */
  display: flex;
  align-items: center;
  overflow: visible;
  padding-left: 92px;        /* space so nav doesn't overlap logo; adjust if needed */
}
.brand-logo{
  position: absolute;        /* removes logo from layout */
  left: 0;
  top: 120%;
  transform: translateY(-50%);
  height: 160px;              /* BIG LOGO size */
  width: auto;
  display: block;
  pointer-events: auto;
}

.footer-logo{height:140px;width:auto;display:block;}

/* --- FDA / Research Use Only Disclaimer --- */
.legal-disclaimer{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.legal-disclaimer h3{
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.legal-disclaimer p{ margin: 0 0 10px 0; }
.legal-disclaimer ul{
  margin: 0 0 10px 18px;
  padding: 0;
}
.legal-disclaimer li{ margin: 0 0 6px 0; }

/* --- Disclaimer as a distinct subsection card (different color + tighter spacing) --- */
.legal-disclaimer{
  margin-top: 22px;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-size: 12px;
  line-height: 1.32;
  color: rgba(255,255,255,.82);
}
.legal-disclaimer h3{
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(255,255,255,.92);
}
.legal-disclaimer p{ margin: 0 0 7px 0; }
.legal-disclaimer ul{ margin: 0 0 7px 18px; padding: 0; }
.legal-disclaimer li{ margin: 0 0 5px 0; }

/* --- Disclaimer color tweak: logo-accent background + softer text --- */
.legal-disclaimer{
  background: rgba(24,122,147,.20);         /* logo-ish teal */
  border: 1px solid rgba(24,122,147,.35);
  color: rgba(255,255,255,.72);            /* softer grey-white */
}
.legal-disclaimer h3{
  color: rgba(255,255,255,.86);            /* slightly muted title */
}
.legal-disclaimer strong{
  color: rgba(255,255,255,.82);            /* less “pop” on bold */
}

/* ===== Blue-Green Gradient Theme Override ===== */
:root{
  --accentA: #14b8a6;   /* teal */
  --accentB: #0ea5e9;   /* sky blue */
  --accentSolid: #14b8a6;
  --accentGrad: linear-gradient(135deg, var(--accentA), var(--accentB));
}

/* buttons / primary CTAs */
button.primary,
.btn.primary,
.btn-primary,
.add-btn{
  background: var(--accentGrad) !important;
  border-color: rgba(20,184,166,.55) !important;
  color: #fff !important;
}

/* chips / tags */
.tag,
.cat-pill,
.pill,
.badge{
  background: rgba(20,184,166,.16) !important;
  border-color: rgba(20,184,166,.32) !important;
  color: rgba(255,255,255,.88) !important;
}

.tag {
  color: black !important;
}

/* links / accents */
a:hover{
  color: var(--accentSolid) !important;
}

/* focus rings (inputs/buttons) */
:focus-visible{
  outline: 2px solid rgba(14,165,233,.55) !important;
  outline-offset: 2px;
}

/* subtle accent borders */
hr,
.divider,
.card:hover{
  border-color: rgba(20,184,166,.22) !important;
}


/* ===== MATCH CTA + FOOTER (teal/blue gradient) ===== */
.cta{
  background:
    radial-gradient(900px 420px at 55% 0%, rgba(20,184,166,.30), transparent 60%),
    radial-gradient(900px 520px at 45% 0%, rgba(14,165,233,.22), transparent 60%),
    linear-gradient(180deg, rgba(5,27,33,1), rgba(3,17,21,1)) !important;
}

.footer{
  background:
    radial-gradient(900px 520px at 55% 0%, rgba(20,184,166,.22), transparent 60%),
    radial-gradient(900px 520px at 45% 0%, rgba(14,165,233,.16), transparent 60%),
    linear-gradient(180deg, rgba(5,27,33,1), rgba(3,17,21,1)) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* ===== DISCLAIMER: LIGHT GREY CARD + DARK TEXT ===== */
.legal-disclaimer{
  background: #f1f3f5 !important;
  border: 1px solid #d9dee3 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
  color: #222 !important;
}

.legal-disclaimer h3{
  color: #111 !important;
}

.legal-disclaimer p,
.legal-disclaimer li{
  color: #2b2b2b !important;
}

.legal-disclaimer strong{
  color: #111 !important;
}

/* ensure disclaimer stays dark even inside footer */
.footer .legal-disclaimer,
.footer .legal-disclaimer *{
  color: inherit !important;
}

/* ===== DISCLAIMER: DARK GREY CARD ===== */
.legal-disclaimer{
  background: #1f2429 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.78) !important;
}

.legal-disclaimer h3{
  color: rgba(255,255,255,.92) !important;
}

.legal-disclaimer p,
.legal-disclaimer li{
  color: rgba(255,255,255,.72) !important;
}

.legal-disclaimer strong{
  color: rgba(255,255,255,.88) !important;
}

/* --- Top bar "See disclaimer" button --- */
.see-disclaimer{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.60);
  color: rgba(0,0,0,.70);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.see-disclaimer:hover{
  background: rgba(255,255,255,.78);
  color: rgba(0,0,0,.85);
}

/* smooth jump to disclaimer */
html{ scroll-behavior: smooth; }

/* allow hero buttons to be clickable (overlay shouldn't capture clicks) */
.hero::before,
.hero::after{
  pointer-events:none;
}
.hero .content{
  position: relative;
  z-index: 2;
}

/* --- Feature pill text: solid (no transparency) --- */
.feature-pill .t1{ color: #ffffff !important; }
.feature-pill .t2{ color: #e9eef2 !important; opacity: 1 !important; }

/* --- Center button text --- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- Center text inside primary buttons --- */
.btn.primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- Center CTA Browse Products button text --- */
.cta .btn.primary{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* --- Center CTA Browse Products button text --- */
.cta .btn.primary{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* --- Center the button element within the CTA row (if it stretches) --- */
.cta .row{
  display: flex !important;
  justify-content: center !important;
}
.cta .row .btn{
  width: auto !important;
  min-width: 220px;          /* optional: keeps it boxy */
}

/* --- Center the button itself inside the CTA row --- */
.cta .row{
  display:flex !important;
  justify-content:center !important;
}
.cta .row .btn.primary{
  width: auto !important;
  min-width: 240px;
}

/* FIX: center buttons only in detail-actions */
.detail-actions .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}