@charset "utf-8";
/* ==========================================================================
   INSTANT RESULTS NOW  -  "Verified Green" redesign layer (loaded last)
   Palette matched to the actual THC Drug Test Kit box art: deep forest
   green + sage, warm cream paper background, and the pink/magenta test
   result line as the accent. Pill-gradient buttons (replaces the hard-
   offset rectangle buttons), reshaped product + info cards, centered
   product grid, and a bolder hero/section treatment.
   ========================================================================== */

/* Re-declare the base template's own custom properties: every rule in
   style.css that reads var(--aqua), var(--ink-900), var(--shadow-md) etc.
   now resolves to the new palette automatically, site-wide. */
:root {
  --ink-900: #0f2a20;
  --ink-800: #173b2c;
  --ink-700: #1f4d39;
  --aqua: #2d6a4f;        /* was teal -> now the box's deep forest green */
  --aqua-dark: #1b4332;
  --aqua-soft: #e7f2e9;
  --coral: #2563eb;       /* was coral-red, then pink -> now the box's royal blue */
  --coral-dark: #1e40af;
  --amber: #c9a876;       /* was amber -> now the box's warm cream-gold */
  --ink: #122c21;
  --body: #5a6b60;
  --line: #e2ece2;
  --bg: #f7f3e9;          /* warm cream, matches the box paper */
  --bg-soft: #fdfbf5;
  --white: #ffffff;
  --radius: 14px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 0 rgba(15, 42, 32, .05), 0 10px 24px rgba(15, 42, 32, .07);
  --shadow-md: 0 18px 44px rgba(15, 42, 32, .14);
  --shadow-lg: 0 34px 80px rgba(15, 42, 32, .24);

  --signal-grad: linear-gradient(100deg, #74c69d 0%, #2d6a4f 50%, #2563eb 100%);
  --btn-grad: linear-gradient(100deg, #2d6a4f 0%, #1b4332 40%, #2563eb 75%, #1e40af 100%);
}

html { scroll-behavior: smooth; }
::selection { background: var(--coral); color: #fff; }

/* ==========================================================================
   TYPOGRAPHY  -  the base template referenced 'DM Sans' / 'Space Grotesk'
   but never actually loaded either (fonts/fonts.css is empty, and the only
   Google Font link pulled in 'Manrope', which nothing used) -- so the whole
   site was quietly rendering in the browser's default sans-serif. Loading
   a real pairing suited to a supplement / wellness-testing brand: a warm,
   confident serif for headings (Fraunces) and a clean, highly legible
   sans for body copy and UI (Plus Jakarta Sans).
   ========================================================================== */
body {
  background: var(--bg);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, .display {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important;
}
h1 em, h2 em, .hero h1 em { font-style: italic !important; }
.eyebrow, .badge, .price, .hero-stats strong, .strip-steps b, .btn {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.lead { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-style: italic; font-size: 1.18rem; }

/* ==========================================================================
   HARD-CODED SPOTS THE VARS DON'T REACH  -  the base template hard-coded
   a few rgba(8,21,29,...) / rgba(0,211,184,...) literals instead of using
   its own variables. Repaint those by hand so nothing is left navy/aqua.
   ========================================================================== */
.hero::after { background: linear-gradient(100deg, rgba(15, 42, 32, .96) 0%, rgba(15, 42, 32, .9) 40%, rgba(23, 59, 44, .55) 66%, rgba(23, 59, 44, .12) 92%); }
.strip-band::after { background: linear-gradient(180deg, rgba(15, 42, 32, .9), rgba(23, 59, 44, .72)); }
.page-hero::after { background: radial-gradient(circle, rgba(116, 198, 157, .28), transparent 70%); }
.product-card { box-shadow: 0 1px 2px rgba(15, 42, 32, .06), 0 18px 34px -18px rgba(30, 64, 175, .3) !important; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { transition-duration: .8s; }

/* ==========================================================================
   BUTTONS  -  completely reshaped: pill gradient, no more hard offset
   shadow / 2px ink border. Lime -> violet -> pink sweep, glow on hover.
   ========================================================================== */
.btn {
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #3c8a68 0%, var(--aqua-dark) 100%) !important; /* solid green by default */
  color: #fff !important;
  box-shadow: 0 14px 28px -12px rgba(27, 67, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  position: relative; isolation: isolate; overflow: hidden;
  transition: background .35s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease !important;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg); transition: transform .7s ease;
}
.btn:hover {
  background: var(--btn-grad) !important; /* green -> blue, hover only */
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 36px -14px rgba(30, 64, 175, .65), 0 0 0 5px rgba(116, 198, 157, .28), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}
.btn:hover::before { transform: translateX(300%) skewX(-18deg); }
.btn:active { transform: translateY(-1px) !important; }
.btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.btn-ghost { background: transparent !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, .5) !important; box-shadow: none !important; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12) !important; border-color: #fff !important; }
.btn-outline { background: transparent !important; color: var(--ink-900) !important; border: 2px solid var(--coral) !important; box-shadow: none !important; }
.btn-outline:hover { background: var(--coral) !important; color: #fff !important; }
.btn-sm { box-shadow: 0 10px 20px -10px rgba(30, 64, 175, .5) !important; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.top-bar { background: rgba(253, 252, 255, .9) !important; transition: box-shadow .3s ease; }
.fixed-nav { box-shadow: 0 10px 30px rgba(15, 42, 32, .1); }
.menu-bar li a a::after { background: var(--signal-grad) !important; }

/* ==========================================================================
   HERO  -  new copy treatment + animated gradient headline + redesigned
   eyebrow + trust row, on the repainted dark-green overlay.
   ========================================================================== */
.hero .eyebrow {
  background: rgba(116, 198, 157, .12) !important; border: 1px solid rgba(116, 198, 157, .35) !important; color: #eaffc2 !important;
}
.hero .eyebrow::before { background: var(--aqua) !important; animation: signalPing 2.2s ease-out infinite; }
@keyframes signalPing { 0% { box-shadow: 0 0 0 0 rgba(116, 198, 157, .55); } 70% { box-shadow: 0 0 0 9px rgba(116, 198, 157, 0); } 100% { box-shadow: 0 0 0 0 rgba(116, 198, 157, 0); } }

.hero h1 em {
  background: var(--signal-grad); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: signalShift 7s linear infinite;
}
@keyframes signalShift { to { background-position: 300% 0; } }

.hero-stats strong {
  background: linear-gradient(90deg, #fff, var(--aqua)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero-stats { position: relative; padding-top: 26px; }
.hero-stats::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; border-radius: 2px; background: var(--signal-grad); }

/* ==========================================================================
   SECTIONS / HEADINGS
   ========================================================================== */
h2 em { font-style: normal; color: var(--coral-dark); }
.eyebrow:not(.hero .eyebrow) { background: var(--aqua-soft); border: 1px solid #d7f7a8; color: var(--ink-800); }
.eyebrow:not(.hero .eyebrow)::before { background: var(--coral); }

.section { position: relative; }
.section-alt { background: linear-gradient(180deg, #fff 0%, var(--bg) 60%, #f1ecfb 100%) !important; position: relative; overflow: hidden; }
.section-alt::before, .section-alt::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; opacity: .5; }
.section-alt::before { width: 380px; height: 380px; left: -140px; top: 10%; background: var(--aqua); }
.section-alt::after { width: 420px; height: 420px; right: -160px; bottom: 0; background: var(--coral); }
.section-alt .container { position: relative; z-index: 1; }

.media { box-shadow: 14px 14px 0 var(--coral) !important; }
.media { position: relative; }
.media::after {
  content: "VERIFIED"; position: absolute; right: 16px; bottom: 16px; z-index: 2;
  background: var(--ink-900); color: #eaffc2; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: .64rem; letter-spacing: .18em; padding: 7px 12px; border-radius: 8px;
  border: 2px solid var(--aqua);
}
.tick li::before { background: var(--signal-grad) !important; color: #fff !important; }

/* ==========================================================================
   WHY-CHOOSE CARDS  -  reshaped: asymmetric "petal" silhouette (two full
   round corners, two square) instead of the old uniform rounded box, a
   circular icon medallion with a gradient ring, and a shape-flip on hover.
   ========================================================================== */
.card {
  border-radius: 34px 10px 34px 10px !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), border-radius .45s var(--ease) !important;
}
.card::before { content: none !important; }
.card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px; z-index: 0; pointer-events: none;
  background: var(--signal-grad); opacity: .14; border-radius: 0 10px 0 100%;
}
.card:hover {
  box-shadow: var(--shadow-md) !important; border-color: var(--coral) !important;
  transform: translateY(-6px) !important; border-radius: 10px 34px 10px 34px !important;
}
.card .ico {
  position: relative; isolation: isolate; z-index: 1;
  width: 68px !important; height: 68px !important; border-radius: 50% !important;
  background: var(--white) !important; border: 2px solid var(--aqua-soft) !important;
  display: grid; place-items: center;
  transition: transform .4s var(--ease), border-color .35s ease;
}
.card .ico::before {
  content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 50%;
  background: var(--signal-grad); opacity: 0; transition: opacity .35s ease;
}
.card .ico img { width: 30px; height: 30px; object-fit: contain; }
.card:hover .ico::before { opacity: 1; }
.card:hover .ico { border-color: transparent !important; transform: rotate(-8deg) scale(1.08); }
.card h3 { position: relative; z-index: 1; }
.card p { position: relative; z-index: 1; }

/* ==========================================================================
   PRODUCT GRID  -  centered instead of stretching 2 cards across a
   3-column track with empty space on the right.
   ========================================================================== */
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px)) !important;
  justify-content: center !important;
}

/* ==========================================================================
   PRODUCT CARDS  -  reshaped: rounder corners, gradient corner tag,
   tinted thumb plate, redesigned badge + price underline.
   ========================================================================== */
.product-card { border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; position: relative; }
.product-card:hover { transform: translateY(-8px) !important; box-shadow: 0 1px 2px rgba(15, 42, 32, .07), 0 32px 54px -24px rgba(30, 64, 175, .5) !important; border-color: var(--coral) !important; }
.product-card::after {
  content: ""; position: absolute; top: -1px; right: -1px; z-index: 3; pointer-events: none;
  width: 30px; height: 30px; background: var(--signal-grad);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: var(--radius-lg);
}
.product-thumb { background: linear-gradient(160deg, #eef6f0 0%, var(--aqua-soft) 100%) !important; border-bottom: 1px solid var(--line) !important; }
/* keep "From $X.XX" lined up across cards regardless of how long each
   product's name/description happens to be */
.product-card { display: flex !important; flex-direction: column; }
.product-body { flex: 1; }
.product-body h3 { min-height: 2.3em; }
.product-body p { min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-body .price { margin-top: auto; }
.badge {
  border-radius: 999px !important; border: 0 !important; font-weight: 700 !important;
  background: var(--signal-grad) !important; color: #fff !important;
  box-shadow: 0 8px 16px -8px rgba(30, 64, 175, .5);
  transition: transform .3s var(--ease);
}
.badge.teal { background: var(--signal-grad) !important; color: #fff !important; }
.product-card:hover .badge { transform: translateY(-2px) rotate(-2deg); }
.price {
  background: linear-gradient(90deg, var(--ink-900), var(--coral-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  position: relative; display: inline-block;
}
.price::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 34%; height: 3px; border-radius: 2px; background: var(--aqua); }

/* ==========================================================================
   STRIP BAND
   ========================================================================== */
.strip-band { isolation: isolate; }
.strip-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(116, 198, 157, .16) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
}
.strip-band h2 em { color: #7fd8a8 !important; }
.strip-steps div { border-radius: var(--radius-lg) !important; }
.strip-steps div:hover { background: rgba(116, 198, 157, .14) !important; border-color: var(--aqua) !important; }
.strip-steps b {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--signal-grad); color: #fff !important;
  margin-bottom: 10px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer, .foo-btm { position: relative; background: var(--ink-900) !important; color: #a9c2b1 !important; }
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--signal-grad); background-size: 200% 100%; animation: signalShift 9s linear infinite;
}
.ftr-nav li a, .other-links li a { position: relative; transition: opacity .2s ease, padding-left .25s ease; }
.ftr-nav li a:hover, .other-links li a:hover { padding-left: 6px; opacity: .85; }

/* ==========================================================================
   RESPONSIVE / MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
  .media::after { font-size: .56rem; padding: 5px 9px; }
}