/*
Theme Name:  Sentali Labs
Theme URI:   https://sentalilabs.com
Author:      Sentali Labs
Description: Research peptide storefront — HPLC-grade design with COA library, product catalog, and multi-step checkout.
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: sentali-labs
Tags:        custom-menu, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready
*/

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: #ffffff;
  color: #0a2540;
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: #cfe0fd; }

/* ─── CSS VARIABLES ──────────────────────────────────────────── */
:root {
  --navy:       #0a2540;
  --blue:       #1763e0;
  --blue-lt:    #5fa0ff;
  --teal:       #1aa6c4;
  --teal-lt:    #2bb7d6;
  --green:      #3ddc97;
  --border:     #e6eaf0;
  --border-lt:  #eef1f6;
  --muted:      #6b7a8d;
  --muted-lt:   #9aa7b8;
  --bg-off:     #f5f8fc;
  --bg-blue:    #f0f5fe;
  --mono:       'JetBrains Mono', 'Courier New', monospace;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --shadow-sm:  0 4px 20px rgba(10,37,64,.05);
  --shadow-md:  0 16px 44px rgba(10,37,64,.08);
  --shadow-blue:0 8px 24px rgba(23,99,224,.22);
  --max-w:      1240px;
  --px:         32px;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes spinSlow  { to { transform: rotate( 360deg); } }
@keyframes spinRev   { to { transform: rotate(-360deg); } }
@keyframes atomPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes floatY    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes drift     { 0%,100% { transform:translate(0,0); } 50% { transform:translate(8px,-10px); } }
@keyframes slideUp   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes toastIn   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ─── LAYOUT HELPERS ─────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.section-pad { padding: 104px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--light { color: var(--blue-lt); }
.h1 { font-size: clamp(38px,5vw,58px); font-weight:700; letter-spacing:-.025em; line-height:1.04; }
.h2 { font-size: clamp(28px,4vw,40px); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.h3 { font-size: 21px; font-weight:700; letter-spacing:-.01em; }
.lead { font-size: 18px; line-height:1.55; color: var(--muted); }
.body-sm { font-size: 13.5px; color: var(--muted); line-height:1.5; }
.mono-sm { font-family:var(--mono); font-size:12px; }
.ruo-notice {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted-lt);
  text-align: center;
  margin-top: 22px;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items:center; gap:8px;
  font-weight:600; border-radius:var(--radius-sm);
  border:none; cursor:pointer; transition: all .2s;
  text-decoration:none; white-space:nowrap;
}
.btn--primary {
  background:var(--blue); color:#fff; padding:14px 24px; font-size:15px;
  box-shadow:var(--shadow-blue);
}
.btn--primary:hover { background:#1250c0; transform:translateY(-1px); box-shadow:0 12px 28px rgba(23,99,224,.3); }
.btn--secondary {
  background:#fff; color:var(--navy); padding:14px 24px; font-size:15px;
  border:1px solid var(--border);
}
.btn--secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn--sm { padding:9px 16px; font-size:13.5px; }
.btn--full { width:100%; justify-content:center; }
.btn--ghost {
  background:none; border:1px dashed var(--border); color:var(--muted);
  padding:14px 20px; font-size:14px; border-radius:var(--radius-md);
}
.btn--ghost:hover { border-color:var(--blue); color:var(--blue); }
.btn--outline-navy {
  background:#fff; color:var(--navy); border:1px solid var(--border);
  padding:13px; font-size:14px; border-radius:9px;
}
.btn--outline-navy:hover { border-color:var(--navy); }

/* ─── FORM ELEMENTS ──────────────────────────────────────────── */
.form-label {
  display:block;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.form-input {
  width:100%; padding:12px 14px;
  border:1px solid var(--border); border-radius:8px;
  font-size:14.5px; color:var(--navy); outline:none;
  transition:border-color .15s, box-shadow .15s;
  background:#fff;
}
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,99,224,.08); }
.form-group { margin-bottom:16px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ─── BADGES ─────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; padding:3px 8px; border-radius:5px; }
.badge--ruo  { color:var(--muted-lt); border:1px solid var(--border); }
.badge--stock{ color:var(--green); background:#e8faf3; border:1px solid #b5edda; }
.badge--purity{ color:var(--green); background:#e8faf3; border:1px solid #b5edda; }

/* ─── DIVIDER ────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border-lt); margin:20px 0; }

/* ─── CARD ───────────────────────────────────────────────────── */
.card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.card--padded { padding:28px; }

/* ─── RUO BANNER ─────────────────────────────────────────────── */
.ruo-banner {
  background:var(--navy); color:#cfe0fd;
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase;
  text-align:center; padding:9px 16px;
  position:relative; z-index:60;
}
.ruo-banner__dot { color:var(--blue-lt); }

/* ─── NAV ────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-nav {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--px);
  height:66px; display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}
.site-logo { display:flex; align-items:center; gap:11px; }
.site-logo__text { font-weight:700; font-size:18px; letter-spacing:.02em; }
.site-logo__text span { color:var(--blue); }
.nav-links {
  display:flex; align-items:center; gap:34px;
  font-size:14.5px; font-weight:500;
}
.nav-links a { color:var(--muted); transition:color .15s; }
.nav-links a:hover { color:var(--navy); }
.nav-right { display:flex; align-items:center; gap:12px; }
.cart-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff; font-weight:600;
  font-size:13.5px; padding:9px 16px; border-radius:var(--radius-sm);
  border:none; cursor:pointer; transition:background .15s;
}
.cart-btn:hover { background:#0d2f52; }
.cart-badge {
  background:var(--blue); color:#fff;
  font-size:10px; font-weight:700; border-radius:50%;
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.cart-badge.bump { transform:scale(1.4); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:all .2s; }
.mobile-nav { display:none; border-top:1px solid var(--border); background:#fff; padding:16px var(--px); }
.mobile-nav a, .mobile-nav button.nav-link-mob { display:block; padding:12px 0; font-size:15px; font-weight:500; color:var(--muted); border:none; background:none; cursor:pointer; text-align:left; border-bottom:1px solid var(--border-lt); width:100%; }
.mobile-nav a:last-child, .mobile-nav button:last-child { border-bottom:none; }

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  position:relative; border-bottom:1px solid var(--border-lt);
  background:linear-gradient(180deg,#f7faff 0%,#fff 70%);
}
.hero__inner {
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:48px; align-items:center;
  min-height:560px; padding:72px 0;
}
.hero__badge {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue);
  background:#e9f1fe; border:1px solid #d3e3fd;
  padding:6px 12px; border-radius:100px;
}
.hero__badge-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); }
.hero__actions { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__stats { display:flex; gap:36px; margin-top:48px; font-family:var(--mono); }
.hero__stat-val { font-size:26px; font-weight:600; color:var(--navy); }
.hero__stat-lbl { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-lt); margin-top:4px; }
.hero__divider { width:1px; background:var(--border); }
.hero__mol { position:relative; display:flex; justify-content:center; align-items:center; }

/* ─── SPEC STRIP ─────────────────────────────────────────────── */
.spec-strip { border-bottom:1px solid var(--border-lt); background:#fff; }
.spec-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.spec-item {
  padding:28px 0; border-right:1px solid var(--border-lt);
  display:flex; align-items:center; gap:13px;
}
.spec-item:not(:first-child) { padding-left:26px; }
.spec-item:last-child { border-right:none; }
.spec-item__title { font-weight:600; font-size:14.5px; }
.spec-item__sub   { font-size:12.5px; color:var(--muted-lt); }

/* ─── PRODUCT GRID ───────────────────────────────────────────── */
.products-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border);
}
.product-card {
  background:#fff; padding:30px 28px 26px;
  display:flex; flex-direction:column;
  transition:box-shadow .2s;
}
.product-card:hover { box-shadow:inset 0 0 0 2px var(--blue); }
.product-card__img {
  height:148px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, #f3f8ff, #fff 70%);
  border-radius:8px; position:relative; margin-bottom:22px;
}
.product-card__meta {
  display:flex; align-items:baseline;
  justify-content:space-between; gap:12px;
}
.product-card__size {
  font-family:var(--mono); font-size:13px; color:var(--muted); font-weight:500;
}
.product-card__specs {
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border-lt);
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--mono); font-size:12px;
}
.spec-row { display:flex; justify-content:space-between; }
.spec-row__key { color:var(--muted-lt); }
.product-card__price {
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border-lt);
  display:flex; align-items:center; justify-content:space-between;
}
.price-tag  { font-family:var(--mono); font-size:20px; font-weight:600; color:var(--navy); }
.price-per  { font-family:var(--mono); font-size:11px; color:var(--muted-lt); margin-top:2px; }

/* ─── QTY CONTROL ────────────────────────────────────────────── */
.qty-ctrl { display:none; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.qty-ctrl.visible { display:flex; }
.qty-btn {
  width:30px; height:30px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#fff; cursor:pointer;
  font-size:16px; font-weight:600; color:var(--navy);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.qty-btn:hover { background:var(--bg-blue); border-color:var(--blue); color:var(--blue); }
.qty-display { font-family:var(--mono); font-size:15px; font-weight:600; min-width:20px; text-align:center; }

/* ─── SCIENCE SECTION ────────────────────────────────────────── */
.science-section {
  background:var(--navy); color:#eef4ff;
  position:relative; overflow:hidden;
}
.science-section::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(#163457 1px,transparent 1px);
  background-size:30px 30px; opacity:.35;
}
.science-inner { position:relative; }
.analysis-block {
  display:flex; flex-direction:column; gap:1px;
  background:#1a3a5e; border:1px solid #1a3a5e;
  border-radius:var(--radius-md); overflow:hidden; margin-top:34px;
}
.analysis-item { background:#0d2a47; padding:20px 22px; display:flex; gap:16px; align-items:flex-start; }
.analysis-item__num { font-family:var(--mono); font-size:12px; color:var(--blue-lt); margin-top:2px; }
.analysis-item__title { font-weight:600; font-size:15.5px; color:#fff; }
.analysis-item__body  { font-size:13.5px; color:#9fb4d2; margin-top:3px; }
.chromo-card { background:#0d2a47; border:1px solid #1f436a; border-radius:var(--radius-lg); padding:26px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.chromo-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.chromo-label { font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:#9fb4d2; }
.chromo-pass  { font-family:var(--mono); font-size:12px; color:var(--green); }
.chromo-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#1f436a; border:1px solid #1f436a; border-radius:9px; overflow:hidden; margin-top:18px; }
.chromo-stat  { background:#0d2a47; padding:14px; }
.chromo-stat__val { font-family:var(--mono); font-size:18px; color:#fff; }
.chromo-stat__lbl { font-size:11px; color:#7e95b6; margin-top:3px; }

/* ─── STANDARDS ──────────────────────────────────────────────── */
.standards-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin-top:48px;
}
.standard-item { background:#fff; padding:30px 26px; }
.standard-item__title { font-weight:700; font-size:17px; margin-top:16px; color:var(--navy); }
.standard-item__body  { font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.5; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background:var(--navy); color:#aebfd8; padding:72px 0 36px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid #1a3a5e; }
.footer-col__head { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5e7596; }
.footer-col__links { display:flex; flex-direction:column; gap:10px; margin-top:16px; font-size:14px; }
.footer-col__links a { color:#aebfd8; transition:color .15s; }
.footer-col__links a:hover { color:#fff; }
.footer-disclaimer { margin-top:32px; background:#0d2a47; border:1px solid #1a3a5e; border-radius:var(--radius-md); padding:22px 24px; }
.footer-disclaimer__head { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-lt); margin-bottom:10px; }
.footer-disclaimer__body { font-size:12.5px; color:#7e95b6; line-height:1.6; }
.footer-bottom { margin-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#5e7596; font-family:var(--mono); }
.footer-bottom-links { display:flex; gap:22px; }
.footer-bottom-links a { color:#5e7596; transition:color .15s; }
.footer-bottom-links a:hover { color:#aebfd8; }

/* ─── PAGE ROUTING ───────────────────────────────────────────── */
.sl-page { display:none; }
.sl-page.active { display:block; }

/* ─── TOAST ──────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:28px; right:28px;
  background:var(--navy); color:#fff;
  font-family:var(--mono); font-size:13px;
  padding:14px 20px; border-radius:var(--radius-md);
  z-index:400; pointer-events:none;
  opacity:0; transform:translateY(12px); transition:all .3s;
}
.toast.show { opacity:1; transform:none; }

/* ─── MODAL ──────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,37,64,.55); backdrop-filter:blur(4px);
  z-index:300; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:#fff; border-radius:var(--radius-lg); padding:36px;
  max-width:620px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:0 32px 80px rgba(10,37,64,.22);
}
.modal-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:28px; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--muted-lt); padding:4px; }
.modal-close:hover { color:var(--navy); }
.modal-body { display:grid; grid-template-columns:160px 1fr; gap:28px; align-items:start; }
.modal-img { height:160px; background:radial-gradient(circle at 50% 40%,#f3f8ff,#fff 70%); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.modal-specs { display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:12.5px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-lt); }
.modal-price-row { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:18px; border-top:1px solid var(--border-lt); }
.modal-atc { margin-top:20px; }
.modal-atc-controls { display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }

/* ─── COA PAGE ───────────────────────────────────────────────── */
.coa-header { background:var(--navy); padding:56px 0 52px; }
.coa-back { background:none; border:none; cursor:pointer; color:var(--blue-lt); font-family:var(--mono); font-size:12px; letter-spacing:.08em; display:inline-flex; align-items:center; gap:6px; padding:0; margin-bottom:16px; }
.coa-search-wrap { position:relative; display:inline-block; margin-top:28px; }
.coa-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; }
.coa-search {
  width:380px; max-width:100%;
  padding:12px 16px 12px 42px;
  border:1px solid #1f436a; border-radius:9px;
  font-size:14.5px; color:#fff; background:rgba(255,255,255,.06);
  outline:none; transition:border-color .15s;
}
.coa-search::placeholder { color:#7e95b6; }
.coa-search:focus { border-color:var(--blue-lt); }
.coa-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.coa-filter {
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:7px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:#fff;
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.coa-filter:hover { border-color:var(--blue); color:var(--blue); }
.coa-filter.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.coa-table-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }

/* Desktop table */
.coa-table { width:100%; border-collapse:collapse; }
.coa-table thead { background:var(--bg-off); }
.coa-table th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; padding:12px 16px; border-bottom:2px solid var(--border); white-space:nowrap; }
.coa-table td { padding:14px 16px; border-bottom:1px solid var(--border-lt); font-size:14px; vertical-align:middle; }
.coa-table tbody tr:last-child td { border-bottom:none; }
.coa-table tbody tr:hover td { background:var(--bg-off); }
.coa-dl-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; color:var(--blue); font-weight:500;
  border:1px solid #d3e3fd; padding:5px 11px; border-radius:var(--radius-sm);
  background:var(--bg-blue); cursor:pointer; transition:all .15s; white-space:nowrap;
}
.coa-dl-btn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }

/* Mobile card layout for COA */
.coa-cards { display:none; flex-direction:column; gap:12px; }
.coa-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; }
.coa-card__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.coa-card__name { font-weight:700; font-size:16px; color:var(--navy); }
.coa-card__lot { font-family:var(--mono); font-size:12px; color:var(--blue); margin-top:3px; }
.coa-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:13px; margin-bottom:14px; }
.coa-card__meta-item { display:flex; flex-direction:column; gap:2px; }
.coa-card__meta-label { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-lt); }
.coa-card__meta-val { font-size:13.5px; color:var(--navy); font-family:var(--mono); }
.coa-empty { text-align:center; padding:60px 20px; color:var(--muted-lt); font-family:var(--mono); font-size:14px; }

/* ─── CHECKOUT PAGE ──────────────────────────────────────────── */
.checkout-header { background:#fff; border-bottom:1px solid var(--border); padding:24px 0; }
.checkout-header__inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.step-indicator { display:flex; align-items:center; gap:0; }
.step-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--mono); transition:all .3s; flex-shrink:0; }
.step-dot--active { background:var(--blue); color:#fff; }
.step-dot--done { background:var(--green); color:#fff; }
.step-dot--idle { background:var(--border); color:var(--muted); }
.step-label { font-size:12px; font-family:var(--mono); color:var(--muted-lt); transition:color .3s; white-space:nowrap; }
.step-label.active { color:var(--navy); }
.step-line { height:2px; width:40px; background:var(--border); transition:background .3s; margin:0 8px; }
.step-line.done { background:var(--green); }
.checkout-body { min-height:100vh; background:var(--bg-off); }
.checkout-grid { display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; }
.checkout-section { display:none; }
.checkout-section.active { display:block; }
.order-sidebar { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; position:sticky; top:100px; }
.sidebar-item { display:flex; justify-content:space-between; align-items:center; font-size:14.5px; gap:8px; }
.sidebar-item__name { color:var(--muted); }
.sidebar-item__qty { color:var(--muted-lt); font-size:12px; }
.sidebar-item__price { font-family:var(--mono); font-weight:500; }
.sidebar-total-row { display:flex; justify-content:space-between; }
.sidebar-grand { font-family:var(--mono); font-weight:700; color:var(--blue); }
.cart-line { background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px 22px; display:flex; align-items:center; gap:18px; margin-bottom:12px; }
.cart-thumb { width:52px; height:52px; background:radial-gradient(circle at 50% 40%,#f3f8ff,#fff); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cart-remove { background:none; border:none; cursor:pointer; color:var(--border); padding:4px; margin-left:4px; }
.cart-remove:hover { color:var(--muted); }
.cart-empty { text-align:center; padding:48px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.ruo-check { background:#fff8e6; border:1px solid #f5d87a; border-radius:var(--radius-md); padding:16px 18px; margin-top:24px; }
.ruo-check label { display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:13.5px; color:#5a4000; line-height:1.5; }
.shipping-option { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; margin-bottom:10px; transition:border-color .15s; }
.shipping-option:has(input:checked) { border-color:var(--blue); background:var(--bg-blue); }
.pay-tabs { display:flex; gap:8px; margin-bottom:24px; }
.pay-tab { flex:1; padding:12px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; transition:all .15s; }
.pay-tab--active { border:2px solid var(--blue); background:var(--bg-blue); color:var(--blue); }
.pay-tab--idle { border:2px solid var(--border); background:#fff; color:var(--muted); }
.ssl-badge { background:var(--bg-blue); border:1px solid #d3e3fd; border-radius:8px; padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--blue); margin-top:20px; }
.confirm-check { margin-top:20px; }
.confirm-check label { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.45; cursor:pointer; }
.next-steps { background:var(--bg-off); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; text-align:left; margin-top:36px; }
.next-step-item { display:flex; gap:14px; align-items:flex-start; }
.next-step-num { width:24px; height:24px; border-radius:50%; background:var(--bg-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--blue); }

/* ─── WHAT'S HIDDEN ON MOBILE ────────────────────────────────── */
@media (max-width: 900px) {
  :root { --px: 20px; }

  /* Nav */
  .nav-links { display:none !important; }
  .hamburger { display:flex; }

  /* Hero */
  .hero__inner { grid-template-columns:1fr; padding:48px 0; gap:0; }
  .hero__mol { display:none; }
  .hero__stats { gap:20px; flex-wrap:wrap; }
  .h1 { font-size:clamp(32px,8vw,48px); }

  /* Spec strip */
  .spec-grid { grid-template-columns:1fr 1fr; }
  .spec-item { border-right:none; border-bottom:1px solid var(--border-lt); }
  .spec-item:last-child { border-bottom:none; }

  /* Products */
  .products-grid { grid-template-columns:1fr; }

  /* Science */
  .grid-2 { grid-template-columns:1fr; gap:32px; }

  /* Standards */
  .standards-grid { grid-template-columns:1fr 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }

  /* COA: hide table, show cards */
  .coa-table-wrap table { display:none; }
  .coa-cards { display:flex; }
  .coa-search { width:100%; }
  .coa-search-wrap { width:100%; }

  /* Checkout */
  .checkout-grid { grid-template-columns:1fr; }
  .order-sidebar { position:static; }
  .step-indicator { gap:0; }
  .step-label { display:none; }
  .step-line { width:24px; }

  /* Modal */
  .modal-body { grid-template-columns:1fr; }
  .modal-img { height:100px; }
  .modal-box { padding:24px; }

  /* Form grid */
  .form-grid-2 { grid-template-columns:1fr; }

  /* Pay tabs */
  .pay-tabs { flex-direction:column; }
}

@media (max-width: 600px) {
  .standards-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .hero__actions { flex-direction:column; }
  .hero__actions .btn { width:100%; justify-content:center; }
}