/* ============================================================
   SPACE CBD — Shoptet Skin v3.0 DEEP SPACE × CANNA FUSION
   Injektovat do: Shoptet → Šablony → Vlastní CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg: #080b18;
  --surface: #0e1124;
  --surface2: #131729;
  --card: #131628;
  --border: rgba(255,255,255,.06);
  --text: #eceff8;
  --text2: rgba(236,239,248,.52);
  --accent: #7c6bf5;
  --accent2: #a78bfa;
  --glow: rgba(124,107,245,.18);
  --cyan: #38d9f5;
  --rose: #f472b6;
  --amber: #fbbf24;
  --green: #34d399;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
  --heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--accent); color: #fff; }

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  min-height: 100vh;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Elegant scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(124,107,245,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   COSMOS CANVAS
   ============================================================ */
.cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cosmos canvas { width: 100%; height: 100%; }
.nebula-glow {
  position: fixed; width: 600px; height: 600px; border-radius: 50%;
  pointer-events: none; z-index: 1; filter: blur(130px); opacity: .10;
  background: radial-gradient(circle, var(--green) 0%, var(--accent) 25%, var(--cyan) 50%, var(--rose) 70%, transparent 85%);
  transition: transform .12s ease-out, opacity .3s; mix-blend-mode: screen;
  animation: nebulaBreath 6s ease-in-out infinite;
}
@keyframes nebulaBreath {
  0%, 100% { opacity: .10; transform: scale(1) translate(var(--nb-x, 0), var(--nb-y, 0)); }
  50% { opacity: .16; transform: scale(1.15) translate(var(--nb-x, 0), var(--nb-y, 0)); }
}

/* ============================================================
   MOCK SHOPTET NAV (preview only)
   ============================================================ */
.preview-nav {
  background: rgba(8,11,24,.94);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  padding: 0 28px;
}
.preview-nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.preview-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--heading); font-weight: 800; font-size: 17px; color: var(--text);
}
.preview-logo-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}
.preview-nav-links {
  display: flex; gap: 2px; list-style: none;
}
.preview-nav-links a {
  padding: 7px 14px; font-size: 14px; font-weight: 500;
  color: var(--text2); border-radius: 8px;
  transition: color .15s, background .15s;
}
.preview-nav-links a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.preview-cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; background: var(--accent); color: #fff;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; position: relative;
}
.preview-cart-badge {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; background: var(--rose); color: #fff;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* ============================================================
   LAYOUT & SECTIONS
   ============================================================ */
.section-gap { padding: 80px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.sec-header { text-align: center; margin-bottom: 52px; }
.sec-header .overline {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent2); margin-bottom: 14px;
  display: block;
}
.sec-header h2 {
  font-family: var(--heading); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--text); margin-bottom: 14px;
}
.sec-header p { color: var(--text2); font-size: 17px; max-width: 540px; margin: 0 auto; }

/* ============================================================
   ANIMATED TEXT EFFECTS
   ============================================================ */
.text-gradient {
  background: linear-gradient(90deg, var(--accent2) 0%, var(--cyan) 45%, var(--rose) 75%, var(--accent2) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3.5s linear infinite;
}
@keyframes textShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 250% center; }
}

.text-holo {
  background: linear-gradient(135deg, #c4b5fd, var(--cyan), var(--rose), var(--amber), #c4b5fd);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: holoShift 5s linear infinite;
}
@keyframes holoShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================================
   GLOBAL BUTTONS
   ============================================================ */
/* Primary — neon glow */
.btn-primary, .btn-neon {
  background: linear-gradient(135deg, var(--accent), #5b4de8) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 32px !important;
  font-family: var(--heading) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 rgba(124,107,245,0) !important;
  transition: transform .2s, box-shadow .25s !important;
  cursor: pointer;
}
.btn-primary::after, .btn-neon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.btn-primary:hover::after, .btn-neon:hover::after { transform: translateX(100%); }
.btn-primary:hover, .btn-neon:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 40px rgba(124,107,245,.55), 0 18px 40px rgba(0,0,0,.35) !important;
  color: #fff !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  padding: 16px 32px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  transition: border-color .2s, color .2s, transform .2s !important;
  cursor: pointer;
}
.btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent2) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   URGENCY COUNTDOWN BAR (TOP)
   ============================================================ */
.urgency-countdown {
  background: linear-gradient(90deg, rgba(124,107,245,.14), rgba(244,114,182,.09), rgba(56,217,245,.09), rgba(124,107,245,.14));
  background-size: 300% 100%;
  animation: urgencyPulse 6s ease infinite;
  border-bottom: 1px solid rgba(124,107,245,.25);
  padding: 11px 20px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
  position: relative; z-index: 300; text-align: center; flex-wrap: wrap;
}
@keyframes urgencyPulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.uc-emoji { font-size: 16px; }
.uc-time {
  font-family: var(--heading); font-weight: 800; font-size: 15px;
  color: var(--rose); background: rgba(244,114,182,.12);
  border: 1px solid rgba(244,114,182,.3); border-radius: var(--radius-sm);
  padding: 3px 10px; letter-spacing: .06em;
  animation: timeFlash 1s ease infinite;
}
@keyframes timeFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}
.uc-close {
  position: absolute; right: 16px; cursor: pointer;
  color: var(--text2); font-size: 18px; line-height: 1;
  transition: color .2s;
}
.uc-close:hover { color: var(--text); }

/* ============================================================
   HERO SECTION — v2
   ============================================================ */
.hero {
  min-height: 92vh; display: flex; align-items: center;
  position: relative; z-index: 10; padding: 130px 0 80px;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.22);
  border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; color: var(--green);
  margin-bottom: 28px;
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}
.hero h1 {
  font-family: var(--heading); font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem); color: var(--text);
  line-height: 1.08; margin-bottom: 22px;
  animation: heroReveal .8s cubic-bezier(.4,0,.2,1) both;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.hero-desc {
  color: var(--text2); font-size: 17px; line-height: 1.72;
  margin-bottom: 28px;
  animation: heroReveal .8s .15s cubic-bezier(.4,0,.2,1) both;
}
.hero-btns {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: heroReveal .8s .28s cubic-bezier(.4,0,.2,1) both;
}
.hero-ship-hint {
  margin-top: 20px;
  font-size: 13px; color: var(--text2); font-weight: 500;
  animation: heroReveal .8s .38s cubic-bezier(.4,0,.2,1) both;
}
.hero-ship-hint strong { color: var(--green); }

/* Micro trust pills */
.micro-trust {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px;
  animation: heroReveal .8s .44s cubic-bezier(.4,0,.2,1) both;
}
.mt-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px;
  transition: border-color .2s, color .2s;
}
.mt-item:hover { border-color: rgba(124,107,245,.3); color: var(--text); }
.mt-item.green { color: var(--green); border-color: rgba(52,211,153,.18); }
.mt-item.amber { color: var(--amber); border-color: rgba(251,191,36,.18); }
.mt-item.cyan { color: var(--cyan); border-color: rgba(56,217,245,.18); }

/* Hero visual side */
.hero-visual { position: relative; animation: heroReveal .8s .1s cubic-bezier(.4,0,.2,1) both; }
.hero-img {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 100px rgba(124,107,245,.18);
  transition: box-shadow .3s;
}
.hero-img:hover { box-shadow: 0 60px 120px rgba(0,0,0,.65), 0 0 140px rgba(52,211,153,.22); }
.hero-img img { width: 100%; display: block; }
.hero-img {
  animation: heroImageBreath 5s ease-in-out infinite;
}
@keyframes heroImageBreath {
  0%, 100% { box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 80px rgba(52,211,153,.12); }
  50% { box-shadow: 0 55px 110px rgba(0,0,0,.6), 0 0 120px rgba(52,211,153,.22); transform: scale(1.008); }
}

/* Hero placeholder for preview */
.hero-img-placeholder {
  width: 100%; aspect-ratio: 4/5;
  background: linear-gradient(135deg, rgba(124,107,245,.12), rgba(56,217,245,.08));
  border: 1px dashed rgba(124,107,245,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text2); font-size: 14px; text-align: center; padding: 40px;
}
.hero-img-placeholder svg { width: 48px; height: 48px; opacity: .4; }

/* Floating badge cards in hero */
.hero-float {
  position: absolute; background: rgba(13,17,36,.92); backdrop-filter: blur(18px);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; box-shadow: 0 10px 40px rgba(0,0,0,.45);
  animation: floatBob 4s ease-in-out infinite;
}
.hero-float.f1 { top: 20px; right: -22px; animation-delay: 0s; }
.hero-float.f2 { bottom: 90px; right: -28px; animation-delay: 1.4s; }
.hero-float.f3 {
  bottom: 22px; left: 18px;
  background: rgba(124,107,245,.14); border-color: rgba(124,107,245,.38);
  color: var(--accent2); animation-delay: .7s;
}
@keyframes floatBob {
  0%, 100% { transform: translateY(0) scale(1); }
  33% { transform: translateY(-8px) scale(1.02); }
  66% { transform: translateY(-3px) scale(.99); }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--surface); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 18px 28px;
}
.trust-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 36px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  transition: color .2s;
}
.trust-item:hover { color: var(--text); }
.trust-icon { font-size: 15px; }
.trust-icon.green { color: var(--green); }
.trust-icon.amber { color: var(--amber); }
.trust-icon.cyan { color: var(--cyan); }
.trust-icon.purple { color: var(--accent2); }

/* ============================================================
   CATEGORY STRIP
   ============================================================ */
.cat-strip { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; cursor: pointer;
  border: 1px solid var(--border);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, border-color .35s;
  text-decoration: none !important; display: block;
}
.cat-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(124,107,245,.4);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 50px var(--cat-glow, rgba(124,107,245,.2));
}
.cat-bg { position: absolute; inset: 0; transition: transform .6s ease-out; }
.cat-card:hover .cat-bg { transform: scale(1.07); }
.cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,15,.96) 0%, rgba(5,6,15,.5) 45%, rgba(5,6,15,.08) 100%);
  transition: opacity .3s;
}
.cat-card:hover .cat-overlay { opacity: .85; }
.cat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px; }
.cat-icon { font-size: 38px; margin-bottom: 10px; display: block; filter: drop-shadow(0 0 12px rgba(0,0,0,.5)); }
.cat-name { font-family: var(--heading); font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 3px; }
.cat-count { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.cat-badge {
  display: inline-block; padding: 4px 13px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.cat-arrow {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.cat-card:hover .cat-arrow { opacity: 1; transform: none; }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 28px;
}
.stats-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  text-align: center; padding: 20px 16px;
  border-right: 1px solid var(--border);
  transition: background .25s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(124,107,245,.05); }
.stat-num {
  font-family: var(--heading); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem); display: block; margin-bottom: 7px;
}
.stat-num.purple { color: var(--accent2); text-shadow: 0 0 30px rgba(167,139,250,.4); animation: statBreathe 4s ease-in-out infinite; }
.stat-num.cyan { color: var(--cyan); text-shadow: 0 0 30px rgba(56,217,245,.35); animation: statBreathe 4s .5s ease-in-out infinite; }
.stat-num.amber { color: var(--amber); text-shadow: 0 0 30px rgba(251,191,36,.3); animation: statBreathe 4s 1s ease-in-out infinite; }
.stat-num.green { color: var(--green); text-shadow: 0 0 30px rgba(52,211,153,.3); animation: statBreathe 4s 1.5s ease-in-out infinite; }
@keyframes statBreathe {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.15); transform: scale(1.04); }
}
.stat-label { color: var(--text2); font-size: 13px; font-weight: 500; }

/* ============================================================
   FLASH SALE — ROTATING BORDER
   ============================================================ */
.flash-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.flash-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.flash-banner::before {
  content: '';
  position: absolute; inset: -3px;
  background: conic-gradient(from var(--angle, 0deg), var(--accent) 0%, var(--cyan) 30%, var(--rose) 60%, var(--accent) 100%);
  border-radius: inherit;
  animation: spinBorder 3.5s linear infinite;
  z-index: 0;
}
.flash-banner::after {
  content: '';
  position: absolute; inset: 2px;
  background: #0e1022;
  border-radius: calc(var(--radius-lg) - 3px);
  z-index: 1;
}
@keyframes spinBorder { to { transform: rotate(360deg); } }
.flash-inner {
  position: relative; z-index: 2;
  padding: 28px 36px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.flash-left { display: flex; align-items: center; gap: 20px; }
.flash-icon { font-size: 42px; animation: iconPop 1.5s ease infinite; }
@keyframes iconPop {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.15) rotate(5deg); }
}
.flash-text h4 { font-family: var(--heading); font-weight: 800; font-size: 20px; color: var(--text); margin-bottom: 6px; }
.flash-text p { color: var(--text2); font-size: 14px; line-height: 1.5; }
.flash-timer { display: flex; gap: 8px; align-items: center; }
.ft-block {
  background: rgba(0,0,0,.4); border: 1px solid rgba(244,114,182,.25);
  border-radius: var(--radius-sm); padding: 10px 18px;
  text-align: center; min-width: 64px;
}
.ft-num { font-family: var(--heading); font-weight: 800; font-size: 26px; color: var(--rose); display: block; }
.ft-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .09em; }
.stock-bar { display: flex; align-items: center; gap: 12px; padding: 0 36px 24px; position: relative; z-index: 2; }
.stock-track { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.stock-fill { height: 100%; background: linear-gradient(90deg, var(--rose), var(--amber)); border-radius: 3px; }
.stock-label { font-size: 12px; color: var(--rose); font-weight: 700; white-space: nowrap; }

/* ============================================================
   THC-X FEATURED SECTION
   ============================================================ */
.thcx-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.thcx-inner { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; }
.thcx-visual { position: relative; overflow: hidden; min-height: 440px; }
.thcx-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center;
  animation: kenBurns 12s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0% { transform: scale(1.05) translate(-1%, 1%); }
  100% { transform: scale(1.12) translate(1%, -1%); }
}
.thcx-visual-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,11,24,0) 60%, var(--card) 100%);
}
.thcx-new-badge {
  position: absolute; top: 20px; left: 20px;
  background: rgba(244,114,182,.15); border: 1px solid rgba(244,114,182,.35);
  color: var(--rose); font-size: 11px; font-weight: 800;
  padding: 6px 14px; border-radius: 999px; letter-spacing: .1em;
  text-transform: uppercase;
  animation: badgePulse 2s ease infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,114,182,.3); }
  50% { box-shadow: 0 0 0 6px rgba(244,114,182,.0); }
}
.thcx-content { padding: 44px 44px 44px 32px; }
.thcx-title { font-family: var(--heading); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text); margin-bottom: 14px; }
.thcx-desc { color: var(--text2); font-size: 15px; line-height: 1.72; margin-bottom: 20px; }
.thcx-social { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.thcx-social span { font-size: 13px; font-weight: 600; color: var(--text2); }
.thcx-products { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.thcx-prod {
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; transition: border-color .2s, background .2s;
}
.thcx-prod:hover { border-color: rgba(124,107,245,.35); background: rgba(124,107,245,.06); }
.thcx-prod-info { flex: 1; }
.thcx-prod-name { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.thcx-prod-sub { font-size: 12px; color: var(--text2); }
.thcx-prod-right { text-align: right; }
.thcx-prod-price { font-family: var(--heading); font-weight: 800; font-size: 16px; color: var(--accent2); display: block; }
.thcx-prod-weight { font-size: 11px; color: var(--text2); }
.thcx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.thcx-tag { border-radius: 999px; padding: 5px 13px; font-size: 11px; font-weight: 700; }

/* THC-X visual placeholder for preview */
.thcx-visual-placeholder {
  width: 100%; height: 100%; min-height: 440px;
  background: linear-gradient(160deg, #1a0533 0%, #3d0b6e 40%, #7c2d9e 70%, #c062cc 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); font-size: 14px; text-align: center; padding: 40px;
}

/* ============================================================
   PRODUCT FINDER QUIZ
   ============================================================ */
.quiz-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  max-width: 820px; margin: 0 auto;
}
.quiz-top { padding: 20px 32px 0; display: flex; align-items: center; justify-content: space-between; }
.quiz-step-indicator { display: flex; gap: 8px; align-items: center; }
.quiz-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background .3s, transform .3s; }
.quiz-step-dot.active { background: var(--accent); transform: scale(1.4); }
.quiz-step-dot.done { background: var(--green); }
.quiz-label { font-size: 12px; color: var(--text2); font-weight: 600; }
.quiz-progress-bar { height: 3px; background: rgba(255,255,255,.06); }
.quiz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); transition: width .45s cubic-bezier(.4,0,.2,1); border-radius: 0 2px 2px 0; }
.quiz-body { padding: 36px 40px 44px; }
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: stepIn .38s cubic-bezier(.4,0,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.quiz-q { font-family: var(--heading); font-weight: 800; font-size: clamp(1.25rem, 2.5vw, 1.65rem); color: var(--text); margin-bottom: 10px; text-align: center; }
.quiz-sub { color: var(--text2); font-size: 14px; text-align: center; margin-bottom: 28px; }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quiz-opt {
  background: var(--card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  cursor: pointer; text-align: left;
  transition: border-color .22s, background .22s, transform .22s;
  display: flex; align-items: flex-start; gap: 14px; user-select: none;
}
.quiz-opt:hover { border-color: rgba(124,107,245,.5); background: rgba(124,107,245,.07); transform: translateY(-3px); }
.quiz-opt.selected { border-color: var(--accent); background: rgba(124,107,245,.14); }
.quiz-opt-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.quiz-opt-title { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 3px; }
.quiz-opt-sub { font-size: 12px; color: var(--text2); line-height: 1.4; }
.quiz-result { text-align: center; }
.quiz-result-crown { font-size: 40px; margin-bottom: 8px; }
.quiz-result-badge { display: inline-block; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.28); color: var(--green); border-radius: 999px; padding: 7px 18px; font-size: 12px; font-weight: 700; margin-bottom: 20px; letter-spacing: .04em; }
.quiz-result-card { background: var(--card); border: 1px solid rgba(124,107,245,.3); border-radius: var(--radius-lg); padding: 30px 32px; margin: 0 auto 24px; max-width: 440px; text-align: left; }
.quiz-result-name { font-family: var(--heading); font-weight: 800; font-size: 21px; color: var(--text); margin-bottom: 8px; }
.quiz-result-desc { color: var(--text2); font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
.quiz-result-price { font-family: var(--heading); font-weight: 800; font-size: 26px; color: var(--accent2); }
.quiz-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz-restart { background: none; border: none; color: var(--text2); font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 20px; display: block; margin-left: auto; margin-right: auto; transition: color .2s; }
.quiz-restart:hover { color: var(--text); }

/* ============================================================
   GUARANTEES
   ============================================================ */
.guarantees-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.guar-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 24px; text-align: center; transition: transform .32s, border-color .32s, box-shadow .32s; position: relative; overflow: hidden; }
.guar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--guar-accent, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.guar-card:hover::before { transform: scaleX(1); }
.guar-card:hover { transform: translateY(-6px); border-color: rgba(124,107,245,.28); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.guar-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px; transition: transform .3s; animation: iconBreathe 4s ease-in-out infinite; }
.guar-card:nth-child(2) .guar-icon { animation-delay: .6s; }
.guar-card:nth-child(3) .guar-icon { animation-delay: 1.2s; }
.guar-card:nth-child(4) .guar-icon { animation-delay: 1.8s; }
@keyframes iconBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.guar-card:hover .guar-icon { transform: scale(1.12) rotate(-5deg); }
.guar-icon.purple { background: rgba(124,107,245,.14); color: var(--accent2); }
.guar-icon.cyan { background: rgba(56,217,245,.1); color: var(--cyan); }
.guar-icon.green { background: rgba(52,211,153,.1); color: var(--green); }
.guar-icon.amber { background: rgba(251,191,36,.1); color: var(--amber); }
.guar-card h4 { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 10px; }
.guar-card p { color: var(--text2); font-size: 14px; line-height: 1.65; }

/* ============================================================
   REVIEWS — MARQUEE + GOOGLE GRID
   ============================================================ */
.marquee-wrap { overflow: hidden; position: relative; padding: 4px 0; }
.marquee-wrap::before, .marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee-track { display: flex; gap: 20px; animation: marqueeScroll 32s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mq-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; min-width: 270px; max-width: 270px; transition: border-color .3s; }
.mq-card:hover { border-color: rgba(251,191,36,.3); }
.mq-stars { color: var(--amber); font-size: 13px; margin-bottom: 8px; }
.mq-text { color: var(--text2); font-size: 13px; line-height: 1.6; font-style: italic; margin-bottom: 12px; }
.mq-footer { display: flex; align-items: center; gap: 10px; }
.mq-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; color: #fff; }
.mq-author { font-weight: 700; font-size: 12px; color: var(--text); }
.mq-city { font-size: 11px; color: var(--text2); }

/* Google reviews */
.google-reviews { max-width: 1200px; margin: 0 auto; padding: 0 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.google-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 32px; border-bottom: 1px solid var(--border); }
.google-num { font-family: var(--heading); font-weight: 900; font-size: 52px; color: var(--text); animation: ratingBreathe 4s ease-in-out infinite; }
@keyframes ratingBreathe {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 30px rgba(251,191,36,.25); }
}
.gm-stars { color: var(--amber); font-size: 22px; margin-bottom: 4px; }
.gm-count { color: var(--text2); font-size: 13px; }
.google-logo { font-family: var(--heading); font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.g-blue{color:#4285F4} .g-red{color:#EA4335} .g-yellow{color:#FBBC05} .g-green{color:#34A853}
.reviews-scroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 28px 32px; }
.g-review { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color .3s, transform .3s; }
.g-review:hover { border-color: rgba(251,191,36,.3); transform: translateY(-3px); }
.g-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.g-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; }
.av1{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.av2{background:linear-gradient(135deg,var(--cyan),#0891b2)}
.av3{background:linear-gradient(135deg,var(--green),#059669)}
.av4{background:linear-gradient(135deg,var(--amber),#d97706)}
.av5{background:linear-gradient(135deg,var(--rose),#be185d)}
.av6{background:linear-gradient(135deg,#818cf8,#4f46e5)}
.g-name { font-weight: 700; font-size: 14px; color: var(--text); }
.g-meta { color: var(--text2); font-size: 12px; }
.g-stars { color: var(--amber); font-size: 14px; margin-bottom: 10px; }
.g-text { color: var(--text2); font-size: 14px; line-height: 1.65; }
.g-date { color: var(--text2); font-size: 11px; margin-top: 12px; }

/* ============================================================
   BUNDLE DEAL
   ============================================================ */
.bundle-card { background: linear-gradient(135deg, rgba(124,107,245,.07), rgba(56,217,245,.05)); border: 1px solid rgba(124,107,245,.22); border-radius: var(--radius-lg); padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; transition: border-color .3s, box-shadow .3s; max-width: 1200px; margin: 0 auto; }
.bundle-card:hover { border-color: rgba(124,107,245,.4); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.bundle-label { display: inline-block; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); color: var(--amber); border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.bundle-card h3 { font-family: var(--heading); font-weight: 800; font-size: 1.5rem; color: var(--text); margin-bottom: 8px; }
.bundle-card p { color: var(--text2); font-size: 14px; margin-bottom: 20px; }
.bundle-products { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bundle-prod { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; text-align: center; min-width: 130px; transition: border-color .2s; }
.bundle-prod:hover { border-color: rgba(124,107,245,.35); }
.bundle-prod-icon { font-size: 28px; margin-bottom: 6px; }
.bundle-prod-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.bundle-prod-price { font-size: 14px; font-weight: 800; color: var(--accent2); }
.bundle-plus { font-size: 24px; color: var(--text2); font-weight: 700; }
.bundle-savings { display: inline-block; background: rgba(52,211,153,.12); color: var(--green); border: 1px solid rgba(52,211,153,.25); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.bundle-total { font-family: var(--heading); font-size: 14px; font-weight: 600; color: var(--text2); margin-bottom: 16px; }
.bundle-total strong { color: var(--text); font-size: 24px; font-weight: 800; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: rgba(124,107,245,.28); }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; gap: 16px; }
.faq-q span { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); }
.faq-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(124,107,245,.1); border: 1px solid rgba(124,107,245,.25); display: flex; align-items: center; justify-content: center; color: var(--accent2); font-size: 20px; flex-shrink: 0; transition: transform .3s, background .3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-a { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s; color: var(--text2); font-size: 15px; line-height: 1.72; }
.faq-item.open .faq-a { max-height: 420px; padding: 0 24px 24px; }
.faq-a strong { color: var(--green); }
.faq-a a { color: var(--accent2); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.nl-card { background: linear-gradient(135deg, rgba(124,107,245,.1), rgba(56,217,245,.06)); border: 1px solid rgba(124,107,245,.22); border-radius: var(--radius-lg); padding: 56px 48px; text-align: center; max-width: 600px; margin: 0 auto; position: relative; overflow: hidden; }
.nl-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(124,107,245,.07) 0%, transparent 70%); animation: nlPulse 4s ease infinite; }
@keyframes nlPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .6; } }
.nl-discount { display: inline-block; background: rgba(124,107,245,.14); border: 1px solid rgba(124,107,245,.28); border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 700; color: var(--accent2); margin-bottom: 20px; position: relative; }
.nl-card h3 { font-family: var(--heading); font-weight: 800; font-size: clamp(1.55rem, 3vw, 2rem); color: var(--text); margin-bottom: 10px; position: relative; }
.nl-card p { color: var(--text2); margin-bottom: 10px; font-size: 15px; position: relative; }
.nl-members-bar { display: flex; align-items: center; gap: 12px; margin: 0 auto 24px; max-width: 380px; position: relative; }
.nl-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.nl-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: 3px; width: 80%; }
.nl-bar-label { font-size: 12px; color: var(--text2); font-weight: 600; white-space: nowrap; }
.nl-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; position: relative; }
.nl-form input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; color: var(--text); font-family: var(--body); font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.nl-form input::placeholder { color: var(--text2); }
.nl-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,107,245,.15); }
.nl-form button { background: linear-gradient(135deg, var(--accent), #5b4de8); color: #fff; border: none; border-radius: var(--radius-sm); padding: 14px 24px; font-family: var(--heading); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.nl-form button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow); }

/* ============================================================
   INSTAGRAM BUTTON
   ============================================================ */
.ig-btn-gradient { display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #405DE6, #833AB4, #E1306C, #F77737, #FCAF45); padding: 16px 40px; border-radius: 50px; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .2s, box-shadow .2s; font-family: var(--heading); }
.ig-btn-gradient:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(225, 48, 108, .35); color: #fff; }

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-btn { position: fixed; bottom: 24px; right: 24px; z-index: 1060; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); cursor: pointer; transition: transform .22s, box-shadow .22s; animation: waPulse 3.5s ease infinite; text-decoration: none; border: none; }
.wa-btn:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,.55); }
.wa-btn svg { width: 30px; height: 30px; fill: #fff; }
@keyframes waPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); } 50% { box-shadow: 0 4px 30px rgba(37,211,102,.65), 0 0 0 10px rgba(37,211,102,.08); } }
.wa-tooltip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.88); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; transform: translateY(-50%) translateX(4px); font-family: var(--body); }
.wa-tooltip::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right: none; border-left-color: rgba(0,0,0,.88); }
.wa-btn:hover .wa-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============================================================
   LIVE PURCHASE POPUP
   ============================================================ */
.live-popup { position: fixed; bottom: 100px; left: 24px; z-index: 1050; background: var(--surface); border: 1px solid rgba(52,211,153,.2); border-radius: var(--radius); padding: 14px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.45); display: flex; align-items: center; gap: 12px; max-width: 310px; opacity: 0; transform: translateY(20px); transition: opacity .45s, transform .45s; pointer-events: none; }
.live-popup.show { opacity: 1; transform: none; pointer-events: auto; }
.lp-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--cyan)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; }
.lp-body { flex: 1; min-width: 0; }
.lp-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.lp-name { font-weight: 700; font-size: 13px; color: var(--text); }
.lp-city { font-size: 11px; color: var(--text2); }
.lp-action { font-size: 11px; color: var(--text2); }
.lp-product { font-size: 12px; color: var(--text2); }
.lp-product strong { color: var(--text); }
.lp-price { color: var(--green); font-weight: 700; }
.lp-footer { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.lp-verified { font-size: 10px; color: var(--green); font-weight: 600; }
.lp-time { font-size: 10px; color: var(--text2); margin-left: auto; }
.lp-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; flex-shrink: 0; }

/* ============================================================
   VIEWERS BADGE
   ============================================================ */
.viewers-badge { position: fixed; bottom: 170px; right: 24px; z-index: 1050; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 7px; opacity: 0; transition: opacity .3s; }
.viewers-badge.show { opacity: 1; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.sr { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
.sr.visible { opacity: 1; transform: none; }
.sr-d1 { transition-delay: .1s; }
.sr-d2 { transition-delay: .2s; }
.sr-d3 { transition-delay: .3s; }
.sr-d4 { transition-delay: .4s; }

/* ============================================================
   UTILITIES
   ============================================================ */
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.4); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } }
@keyframes pulse-accent { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); animation: pulse-accent 1.5s infinite; }
.overline { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); }

/* ============================================================
   CANNA × GALAXY — SALES THEME LAYER
   ============================================================ */

/* Canna green glow accent for high-converting elements */
.canna-glow {
  position: relative;
}
.canna-glow::before {
  content: '';
  position: absolute; inset: -2px;
  background: conic-gradient(from var(--cg-angle, 0deg), #22c55e 0%, #7c6bf5 25%, #38d9f5 50%, #34d399 75%, #22c55e 100%);
  border-radius: inherit;
  animation: cannaGlowSpin 4s linear infinite;
  z-index: -1;
  filter: blur(1px);
}
.canna-glow::after {
  content: '';
  position: absolute; inset: 2px;
  background: var(--card);
  border-radius: inherit;
  z-index: -1;
}
@keyframes cannaGlowSpin { to { transform: rotate(360deg); } }

/* Leaf icon inline — reusable SVG leaf */
.leaf-icon {
  display: inline-block; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334d399'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E") no-repeat center/contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(52,211,153,.5));
  animation: leafSway 3.5s ease-in-out infinite;
}
.leaf-icon.lg { width: 22px; height: 22px; }

/* Cannabis leaf divider */
.canna-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 12px 0; opacity: .35;
}
.canna-divider::before, .canna-divider::after {
  content: '';
  flex: 1; max-width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.5), transparent);
}

/* Pulsing green CTA variant — for primary conversion buttons */
.btn-canna {
  background: linear-gradient(135deg, #059669, #22c55e, #34d399) !important;
  color: #fff !important;
  border: none !important;
  padding: 18px 36px !important;
  font-family: var(--heading) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
  animation: cannaPulse 2.5s ease infinite;
  transition: transform .2s, box-shadow .25s !important;
}
.btn-canna::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.btn-canna:hover::after { transform: translateX(100%); }
.btn-canna:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 0 50px rgba(52,211,153,.5), 0 20px 50px rgba(0,0,0,.35) !important;
}
@keyframes cannaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.35), 0 4px 20px rgba(0,0,0,.3); }
  50% { box-shadow: 0 0 0 8px rgba(52,211,153,0), 0 8px 30px rgba(0,0,0,.3); }
}

/* Galaxy section backgrounds — ambient green nebula tint */
.section-canna-bg {
  position: relative;
}
.section-canna-bg::before {
  content: '';
  position: absolute; top: -100px; left: 10%; width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(52,211,153,.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: cannaFloat 8s ease-in-out infinite;
}
@keyframes cannaFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, -30px); }
}

/* Product "bestseller" and "new" badges with leaf */
.badge-canna {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3);
  color: var(--green); border-radius: 999px;
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em;
  animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Galaxy "limited edition" label with star sparkle */
.badge-galaxy {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, rgba(124,107,245,.15), rgba(56,217,245,.1));
  border: 1px solid rgba(124,107,245,.3);
  color: var(--accent2); border-radius: 999px;
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  position: relative; overflow: hidden;
}
.badge-galaxy::after {
  content: '✦';
  position: absolute; right: 8px;
  animation: sparkle 1.5s ease infinite;
  font-size: 8px;
}
@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.5); }
}

/* Urgency countdown — enhanced with canna border */
.urgency-countdown {
  background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(124,107,245,.10), rgba(52,211,153,.08), rgba(56,217,245,.10), rgba(52,211,153,.12));
  background-size: 400% 100%;
  animation: urgencyPulse 8s ease infinite;
}

/* Hero h1 — add leaf accent */
.hero-leaf-accent {
  position: relative; display: inline-block;
}
.hero-leaf-accent::after {
  content: '';
  position: absolute; top: -6px; right: -30px;
  width: 22px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='none'%3E%3Cpath d='M16 2c-1 3-6 5-10 8 2 2 5 3 8 3-3 3-7 4-11 4 3 3 7 4 11 3-2 3-5 6-9 7 4 1 8 0 11-2 0 4-1 7-3 10h6c-2-3-3-6-3-10 3 2 7 3 11 2-4-1-7-4-9-7 4 1 8 0 11-3-4 0-8-1-11-4 3 0 6-1 8-3-4-3-9-5-10-8z' fill='%2334d399'/%3E%3Cline x1='16' y1='28' x2='16' y2='38' stroke='%2334d399' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  animation: leafSway 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(52,211,153,.5));
}
@keyframes leafSway {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

/* Trust bar — canna accent line + breathing border */
.trust-bar {
  background: linear-gradient(180deg, var(--surface), rgba(52,211,153,.03));
  border-top: 1px solid rgba(52,211,153,.12);
  border-bottom: 1px solid rgba(52,211,153,.12);
  animation: trustBreathe 6s ease-in-out infinite;
}
@keyframes trustBreathe {
  0%, 100% { border-top-color: rgba(52,211,153,.12); border-bottom-color: rgba(52,211,153,.12); }
  50% { border-top-color: rgba(52,211,153,.28); border-bottom-color: rgba(52,211,153,.28); }
}

/* Category cards — green scan line on hover */
.cat-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(52,211,153,.08) 60%, transparent 80%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none; z-index: 2;
}
.cat-card:hover::after { opacity: 1; }

/* Flash sale — add canna accent to rotating border */
.flash-banner::before {
  background: conic-gradient(from var(--angle, 0deg), #22c55e 0%, var(--accent) 20%, var(--cyan) 40%, #34d399 60%, var(--rose) 80%, #22c55e 100%);
}

/* THC-X section — green ambient glow + breathing */
.thcx-wrap {
  background: linear-gradient(135deg, var(--card), rgba(52,211,153,.04));
  border-color: rgba(52,211,153,.15);
  animation: sectionBreathe 7s ease-in-out infinite;
}
.thcx-wrap:hover {
  border-color: rgba(52,211,153,.3);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 60px rgba(52,211,153,.12);
  animation: none;
}
@keyframes sectionBreathe {
  0%, 100% { border-color: rgba(52,211,153,.12); box-shadow: 0 10px 40px rgba(0,0,0,.2), 0 0 0 rgba(52,211,153,0); }
  50% { border-color: rgba(52,211,153,.25); box-shadow: 0 15px 50px rgba(0,0,0,.25), 0 0 40px rgba(52,211,153,.06); }
}

/* Quiz — canna themed progress */
.quiz-progress-fill {
  background: linear-gradient(90deg, #22c55e, var(--accent), var(--cyan), #34d399);
  background-size: 300% 100%;
  animation: quizGradient 3s linear infinite;
}
@keyframes quizGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Guarantees — canna icon glow */
.guar-card:hover .guar-icon.green {
  box-shadow: 0 0 30px rgba(52,211,153,.4);
}

/* Newsletter — canna gradient accent + breathing */
.nl-card {
  background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(124,107,245,.08), rgba(56,217,245,.05));
  border-color: rgba(52,211,153,.2);
  animation: sectionBreathe 8s 1s ease-in-out infinite;
}

/* Bundle — canna urgency + breathing */
.bundle-card {
  background: linear-gradient(135deg, rgba(52,211,153,.06), rgba(124,107,245,.06), rgba(56,217,245,.04));
  border-color: rgba(52,211,153,.2);
  animation: sectionBreathe 7s 2s ease-in-out infinite;
}
.bundle-card:hover {
  border-color: rgba(52,211,153,.4);
  box-shadow: 0 25px 70px rgba(0,0,0,.35), 0 0 40px rgba(52,211,153,.1);
}

/* FAQ — green accent on open */
.faq-item.open {
  border-color: rgba(52,211,153,.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.2), 0 0 20px rgba(52,211,153,.06);
}

/* WhatsApp — stronger canna green pulse */
.wa-btn {
  box-shadow: 0 4px 20px rgba(37,211,102,.5), 0 0 0 0 rgba(52,211,153,.3);
}

/* Sales-driving micro-interactions */
/* "X people bought" live counter style */
.live-buyers {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--green);
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2);
  border-radius: 999px; padding: 5px 14px;
}
.live-buyers .lb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}

/* Discount tag */
.discount-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, rgba(244,114,182,.15), rgba(251,191,36,.1));
  border: 1px solid rgba(244,114,182,.3);
  color: var(--rose); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight: 800;
  animation: pulse-accent 2s ease infinite;
}

/* Section heading — canna leaf decoration */
.sec-header-canna h2 {
  position: relative; display: inline-block;
}
.sec-header-canna h2::before {
  content: '';
  position: absolute; left: -34px; top: 50%;
  width: 20px; height: 26px;
  transform: translateY(-50%) rotate(-20deg);
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='none'%3E%3Cpath d='M16 2c-1 3-6 5-10 8 2 2 5 3 8 3-3 3-7 4-11 4 3 3 7 4 11 3-2 3-5 6-9 7 4 1 8 0 11-2 0 4-1 7-3 10h6c-2-3-3-6-3-10 3 2 7 3 11 2-4-1-7-4-9-7 4 1 8 0 11-3-4 0-8-1-11-4 3 0 6-1 8-3-4-3-9-5-10-8z' fill='%2334d399'/%3E%3C/svg%3E") no-repeat center/contain;
  filter: drop-shadow(0 0 6px rgba(52,211,153,.4));
  animation: leafSway 4s ease-in-out infinite;
}
.sec-header-canna h2::after {
  content: '';
  position: absolute; right: -34px; top: 50%;
  width: 20px; height: 26px;
  transform: translateY(-50%) rotate(20deg) scaleX(-1);
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='none'%3E%3Cpath d='M16 2c-1 3-6 5-10 8 2 2 5 3 8 3-3 3-7 4-11 4 3 3 7 4 11 3-2 3-5 6-9 7 4 1 8 0 11-2 0 4-1 7-3 10h6c-2-3-3-6-3-10 3 2 7 3 11 2-4-1-7-4-9-7 4 1 8 0 11-3-4 0-8-1-11-4 3 0 6-1 8-3-4-3-9-5-10-8z' fill='%2334d399'/%3E%3C/svg%3E") no-repeat center/contain;
  filter: drop-shadow(0 0 6px rgba(52,211,153,.4));
  animation: leafSway 4s .5s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-btns, .micro-trust { justify-content: center; }
  .hero-float { display: none; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .guarantees-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-scroll { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .thcx-inner { grid-template-columns: 1fr; }
  .thcx-visual { min-height: 260px; max-height: 320px; }
  .thcx-visual-overlay { background: linear-gradient(to top, var(--card) 0%, transparent 60%); }
  .thcx-content { padding: 32px; }
  .quiz-body { padding: 28px 24px 36px; }
  .preview-nav-links { display: none; }
}
@media (max-width: 768px) {
  .hero { padding: 100px 0 60px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { aspect-ratio: 2/3; }
  .guarantees-grid { grid-template-columns: 1fr; padding: 0 14px; }
  .nl-form { flex-direction: column; }
  .flash-inner { flex-direction: column; text-align: center; }
  .trust-inner { gap: 18px; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .quiz-options { grid-template-columns: 1fr; }
  .bundle-card { flex-direction: column; }
  .bundle-products { justify-content: center; }
  .wa-tooltip { display: none; }
}
@media (max-width: 480px) {
  .nl-card { padding: 32px 20px; }
  .sec-header h2 { font-size: 1.75rem; }
  .cat-grid { gap: 10px; }
  .hero h1 { font-size: 2.1rem; }
  .stats-inner { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:last-child { border-bottom: none; }
}

/* ============================================================
   FLOATING CANNA LEAVES — cartoon SVG decorative layer
   ============================================================ */
.canna-floats {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden;
}
.canna-float-leaf {
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(52,211,153,.45)) drop-shadow(0 0 20px rgba(52,211,153,.15));
}
.canna-float-leaf svg, .canna-float-leaf img { display: block; width: 100%; height: 100%; pointer-events: none; }
/* Easter egg toasted character — smaller, rarer */
.cfl-easter { filter: drop-shadow(0 0 10px rgba(124,107,245,.4)) drop-shadow(0 0 25px rgba(244,114,182,.15)); }

/* Each leaf — unique size, speed, horizontal position, delay */
.canna-float-leaf:nth-child(1)  { left: 4%;  width: 36px; height: 48px; animation: clf1 32s 0s linear infinite; }
.canna-float-leaf:nth-child(2)  { left: 14%; width: 28px; height: 38px; animation: clf2 38s 6s linear infinite; }
.canna-float-leaf:nth-child(3)  { left: 26%; width: 42px; height: 56px; animation: clf3 28s 10s linear infinite; }
.canna-float-leaf:nth-child(4)  { left: 40%; width: 24px; height: 32px; animation: clf4 36s 3s linear infinite; }
.canna-float-leaf:nth-child(5)  { left: 55%; width: 30px; height: 40px; animation: clf5 30s 14s linear infinite; }
.canna-float-leaf:nth-child(6)  { left: 68%; width: 22px; height: 30px; animation: clf6 40s 8s linear infinite; }
.canna-float-leaf:nth-child(7)  { left: 80%; width: 38px; height: 50px; animation: clf7 26s 18s linear infinite; }
.canna-float-leaf:nth-child(8)  { left: 90%; width: 26px; height: 34px; animation: clf8 35s 12s linear infinite; }
.canna-float-leaf:nth-child(9)  { left: 48%; width: 20px; height: 26px; animation: clf9 42s 22s linear infinite; }
.canna-float-leaf:nth-child(10) { left: 9%;  width: 32px; height: 42px; animation: clf10 34s 16s linear infinite; }

/* Each leaf has unique sway path — no two identical */
@keyframes clf1 {
  0%   { transform: translateY(105vh) translateX(0)   rotate(0deg);   opacity: 0; }
  4%   { opacity: .22; }
  20%  { transform: translateY(80vh)  translateX(35px) rotate(45deg);  opacity: .18; }
  40%  { transform: translateY(60vh)  translateX(-15px) rotate(120deg); opacity: .24; }
  60%  { transform: translateY(40vh)  translateX(28px) rotate(200deg); opacity: .16; }
  80%  { transform: translateY(20vh)  translateX(-22px) rotate(290deg); opacity: .20; }
  96%  { opacity: .08; }
  100% { transform: translateY(-5vh)  translateX(10px) rotate(360deg); opacity: 0; }
}
@keyframes clf2 {
  0%   { transform: translateY(105vh) translateX(0)    rotate(15deg);  opacity: 0; }
  4%   { opacity: .18; }
  25%  { transform: translateY(78vh)  translateX(-25px) rotate(80deg);  opacity: .15; }
  50%  { transform: translateY(52vh)  translateX(20px)  rotate(170deg); opacity: .20; }
  75%  { transform: translateY(26vh)  translateX(-18px) rotate(260deg); opacity: .13; }
  96%  { opacity: .06; }
  100% { transform: translateY(-5vh)  translateX(8px)   rotate(375deg); opacity: 0; }
}
@keyframes clf3 {
  0%   { transform: translateY(105vh) translateX(0)    rotate(-10deg); opacity: 0; }
  4%   { opacity: .25; }
  30%  { transform: translateY(72vh)  translateX(40px) rotate(70deg);  opacity: .20; }
  55%  { transform: translateY(48vh)  translateX(-30px) rotate(165deg); opacity: .28; }
  80%  { transform: translateY(22vh)  translateX(22px)  rotate(280deg); opacity: .15; }
  96%  { opacity: .08; }
  100% { transform: translateY(-5vh)  translateX(-12px) rotate(350deg); opacity: 0; }
}
@keyframes clf4 {
  0%   { transform: translateY(105vh) translateX(0)    rotate(20deg);  opacity: 0; }
  4%   { opacity: .16; }
  33%  { transform: translateY(70vh)  translateX(-20px) rotate(100deg); opacity: .14; }
  66%  { transform: translateY(35vh)  translateX(15px)  rotate(210deg); opacity: .18; }
  96%  { opacity: .06; }
  100% { transform: translateY(-5vh)  translateX(-8px)  rotate(380deg); opacity: 0; }
}
@keyframes clf5 {
  0%   { transform: translateY(105vh) translateX(0)    rotate(-5deg);  opacity: 0; }
  4%   { opacity: .20; }
  22%  { transform: translateY(82vh)  translateX(30px) rotate(55deg);  opacity: .17; }
  45%  { transform: translateY(58vh)  translateX(-25px) rotate(140deg); opacity: .23; }
  68%  { transform: translateY(34vh)  translateX(32px)  rotate(235deg); opacity: .14; }
  90%  { transform: translateY(12vh)  translateX(-15px) rotate(320deg); opacity: .10; }
  100% { transform: translateY(-5vh)  translateX(5px)   rotate(355deg); opacity: 0; }
}
@keyframes clf6 {
  0%   { transform: translateY(105vh) translateX(0) rotate(10deg); opacity: 0; }
  4%   { opacity: .14; }
  50%  { transform: translateY(52vh) translateX(-18px) rotate(190deg); opacity: .17; }
  96%  { opacity: .05; }
  100% { transform: translateY(-5vh) translateX(12px) rotate(370deg); opacity: 0; }
}
@keyframes clf7 {
  0%   { transform: translateY(105vh) translateX(0) rotate(-15deg); opacity: 0; }
  4%   { opacity: .22; }
  35%  { transform: translateY(68vh) translateX(45px) rotate(85deg); opacity: .18; }
  65%  { transform: translateY(36vh) translateX(-35px) rotate(210deg); opacity: .25; }
  96%  { opacity: .08; }
  100% { transform: translateY(-5vh) translateX(15px) rotate(345deg); opacity: 0; }
}
@keyframes clf8 {
  0%   { transform: translateY(105vh) translateX(0) rotate(25deg); opacity: 0; }
  4%   { opacity: .15; }
  40%  { transform: translateY(63vh) translateX(-22px) rotate(130deg); opacity: .18; }
  75%  { transform: translateY(28vh) translateX(16px) rotate(260deg); opacity: .12; }
  100% { transform: translateY(-5vh) translateX(-6px) rotate(385deg); opacity: 0; }
}
@keyframes clf9 {
  0%   { transform: translateY(105vh) translateX(0) rotate(-20deg); opacity: 0; }
  4%   { opacity: .12; }
  50%  { transform: translateY(55vh) translateX(15px) rotate(160deg); opacity: .16; }
  100% { transform: translateY(-5vh) translateX(-10px) rotate(340deg); opacity: 0; }
}
@keyframes clf10 {
  0%   { transform: translateY(105vh) translateX(0) rotate(8deg); opacity: 0; }
  4%   { opacity: .18; }
  28%  { transform: translateY(76vh) translateX(-28px) rotate(75deg); opacity: .15; }
  56%  { transform: translateY(47vh) translateX(22px) rotate(180deg); opacity: .20; }
  84%  { transform: translateY(18vh) translateX(-20px) rotate(285deg); opacity: .12; }
  100% { transform: translateY(-5vh) translateX(8px) rotate(368deg); opacity: 0; }
}

@media (max-width: 768px) {
  .canna-float-leaf:nth-child(n+6) { display: none; }
}

/* ============================================================
   BESTSELLER PRODUCT GRID
   ============================================================ */
.best-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; max-width: 1200px; margin: 0 auto; padding: 0 28px;
}
.best-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  text-decoration: none !important; display: block; position: relative;
}
.best-card:hover {
  transform: translateY(-8px);
  border-color: rgba(52,211,153,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(52,211,153,.1);
}
.best-img {
  aspect-ratio: 1/1; overflow: hidden; position: relative;
  background: rgba(0,0,0,.2);
}
.best-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.best-card:hover .best-img img { transform: scale(1.06); }
.best-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.best-badge.hot { background: rgba(244,114,182,.2); border: 1px solid rgba(244,114,182,.35); color: var(--rose); }
.best-badge.new { background: rgba(52,211,153,.15); border: 1px solid rgba(52,211,153,.3); color: var(--green); }
.best-badge.top { background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.3); color: var(--amber); }
.best-info { padding: 16px; }
.best-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text2); margin-bottom: 6px;
}
.best-name {
  font-family: var(--heading); font-weight: 700; font-size: 14px;
  color: var(--text); margin-bottom: 8px; line-height: 1.3;
}
.best-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.best-price {
  font-family: var(--heading); font-weight: 800; font-size: 17px;
  color: var(--accent2);
}
.best-weight { font-size: 11px; color: var(--text2); }
.best-cart-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.best-cart-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 20px rgba(124,107,245,.4);
}
.best-cart-btn svg { width: 16px; height: 16px; fill: #fff; }

/* "All products" CTA section */
.all-products-cta {
  text-align: center; padding: 50px 28px;
}

/* ============================================================
   CANNA NAVIGATOR — interactive "Jak ti pomůžeme?"
   ============================================================ */
.canna-nav-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.canna-nav-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 22px;
  text-decoration: none !important; display: block;
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .35s;
  cursor: pointer;
}
.canna-nav-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 20%, var(--cn-glow, rgba(52,211,153,.06)), transparent 70%);
  transition: opacity .35s;
  opacity: 0;
}
.canna-nav-card:hover::before { opacity: 1; }
.canna-nav-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 40px var(--cn-glow, rgba(52,211,153,.12));
}
.cn-green { --cn-glow: rgba(52,211,153,.12); }
.cn-green:hover { border-color: rgba(52,211,153,.4); }
.cn-purple { --cn-glow: rgba(124,107,245,.12); }
.cn-purple:hover { border-color: rgba(124,107,245,.4); }
.cn-rose { --cn-glow: rgba(244,114,182,.12); }
.cn-rose:hover { border-color: rgba(244,114,182,.4); }
.cn-cyan { --cn-glow: rgba(56,217,245,.12); }
.cn-cyan:hover { border-color: rgba(56,217,245,.4); }

.cn-icon {
  width: 64px; height: 64px; margin-bottom: 18px;
  transition: transform .4s ease;
}
.canna-nav-card:hover .cn-icon { transform: scale(1.1) rotate(-5deg); }
.cn-icon svg { width: 100%; height: 100%; }

.cn-title {
  font-family: var(--heading); font-weight: 800; font-size: 17px;
  color: var(--text); margin-bottom: 8px; position: relative;
}
.cn-desc {
  font-size: 13px; color: var(--text2); line-height: 1.55;
  margin-bottom: 16px; position: relative;
}
.cn-action {
  font-family: var(--heading); font-weight: 700; font-size: 13px;
  display: inline-block; position: relative;
  transition: transform .2s;
}
.cn-green .cn-action { color: var(--green); }
.cn-purple .cn-action { color: var(--accent2); }
.cn-rose .cn-action { color: var(--rose); }
.cn-cyan .cn-action { color: var(--cyan); }
.canna-nav-card:hover .cn-action { transform: translateX(4px); }

.cn-count {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 600; color: var(--text2);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px;
}

@media (max-width: 1024px) {
  .canna-nav-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .canna-nav-grid { grid-template-columns: 1fr; }
  .canna-nav-card { padding: 22px 18px; }
}

/* SVG canna section divider */
.canna-svg-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 30px 0; opacity: .25;
}
.canna-svg-divider svg { flex-shrink: 0; }
.canna-svg-divider::before, .canna-svg-divider::after {
  content: '';
  flex: 1; max-width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.5), transparent);
}

@media (max-width: 1024px) {
  .best-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .best-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .best-info { padding: 12px; }
  .best-name { font-size: 13px; }
  .best-price { font-size: 15px; }
}

/* ============================================================
   CANNA LEAF PATTERN — subtle tiling background for sections
   ============================================================ */
.canna-pattern-bg {
  position: relative;
}
.canna-pattern-bg::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='rgba(52,211,153,0.04)' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 18c-.8 2.4-4.8 4-8 6.4 1.6 1.6 4 2.4 6.4 2.4-2.4 2.4-5.6 3.2-8.8 3.2 2.4 2.4 5.6 3.2 8.8 2.4-1.6 2.4-4 4.8-7.2 5.6 3.2.8 6.4 0 8.8-1.6 0 3.2-.8 5.6-2.4 8h4.8c-1.6-2.4-2.4-4.8-2.4-8 2.4 1.6 5.6 2.4 8.8 1.6-3.2-.8-5.6-3.2-7.2-5.6 3.2.8 6.4 0 8.8-2.4-3.2 0-6.4-.8-8.8-3.2 2.4 0 4.8-.8 6.4-2.4-3.2-2.4-7.2-4-8-6.4z'/%3E%3Cline x1='40' y1='42' x2='40' y2='52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  opacity: 1;
  animation: patternDrift 60s linear infinite;
}
@keyframes patternDrift {
  0% { background-position: 0 0; }
  100% { background-position: 80px 160px; }
}

/* ============================================================
   INTRO SPLASH — 3-step onboarding
   ============================================================ */
.intro-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: #050811;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s ease, transform .8s ease;
  overflow: hidden;
}
.intro-overlay.bye {
  opacity: 0; transform: scale(1.1);
  pointer-events: none;
}
.intro-step {
  display: none; flex-direction: column; align-items: center;
  text-align: center; padding: 20px;
  animation: introFadeIn .6s ease both;
}
.intro-step.active { display: flex; }
/* Portal step — full coverage */
.intro-step-portal {
  padding: 0 !important;
}
.intro-step-portal.active {
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
@keyframes introFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to { opacity: 1; transform: none; }
}

/* Step 1 — age */
.intro-age-q {
  font-family: var(--heading); font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem); color: #fff;
  margin-bottom: 12px; line-height: 1.1;
}
.intro-age-sub {
  color: rgba(255,255,255,.4); font-size: 15px;
  margin-bottom: 40px;
}
.intro-age-btns { display: flex; gap: 16px; }
.intro-btn-yes {
  background: linear-gradient(135deg, #22c55e, #059669);
  color: #fff; border: none; border-radius: 50px;
  padding: 18px 48px; font-family: var(--heading);
  font-weight: 800; font-size: 18px; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 0 30px rgba(52,211,153,.3);
}
.intro-btn-yes:hover {
  transform: scale(1.06);
  box-shadow: 0 0 50px rgba(52,211,153,.5);
}
.intro-btn-no {
  background: none; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.35); border-radius: 50px;
  padding: 18px 36px; font-family: var(--heading);
  font-weight: 600; font-size: 16px; cursor: pointer;
  transition: border-color .2s;
}
.intro-btn-no:hover { border-color: rgba(255,255,255,.3); }

/* Step 2 — joint */
.intro-joint-wrap {
  cursor: pointer; position: relative;
  transition: transform .3s;
}
.intro-joint-wrap:hover { transform: scale(1.05); }
.intro-joint-label {
  font-family: var(--heading); font-weight: 700;
  font-size: 20px; color: rgba(255,255,255,.5);
  margin-top: 30px;
}
.intro-joint-hint {
  color: rgba(255,255,255,.25); font-size: 13px;
  margin-top: 8px; animation: hintPulse 2s ease infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: .25; }
  50% { opacity: .5; }
}

/* Step 3 — burning */
.intro-burn-wrap { position: relative; }
.intro-ember {
  position: absolute; width: 12px; height: 12px;
  border-radius: 50%; background: #fbbf24;
  box-shadow: 0 0 16px #f97316, 0 0 40px rgba(251,191,36,.6), 0 0 70px rgba(249,115,22,.2);
  transition: left .03s linear;
}
.intro-smoke-container {
  position: absolute; pointer-events: none;
}
.intro-smoke-puff {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.15), rgba(120,120,180,.06), transparent);
  animation: smokePuff 2.5s ease-out forwards;
}
@keyframes smokePuff {
  0% { transform: translateY(0) scale(.3); opacity: .6; }
  50% { opacity: .3; }
  100% { transform: translateY(-120px) translateX(var(--sx, 15px)) scale(2.5); opacity: 0; }
}
/* Burn facts — trust info cycling during burn */
.intro-burn-facts {
  margin-top: 28px; min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.intro-fact {
  font-family: var(--heading); font-weight: 600;
  font-size: 15px; color: rgba(255,255,255,.55);
  text-align: center;
  animation: introFadeIn .4s ease both;
}

/* Jump buttons — after burn completes */
.intro-jump {
  flex-direction: column; align-items: center;
  margin-top: 20px;
  animation: introFadeIn .5s ease both;
}
.intro-jump-title {
  font-family: var(--heading); font-weight: 800;
  font-size: 22px; color: #fff; margin-bottom: 20px;
}
.intro-jump-btns {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.intro-jump-btn {
  padding: 14px 28px; border-radius: 50px;
  font-family: var(--heading); font-weight: 700; font-size: 15px;
  text-decoration: none !important; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid;
}
.intro-jump-btn:hover { transform: translateY(-3px); }
.ij-green {
  background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.35);
  color: #34d399 !important;
}
.ij-green:hover { box-shadow: 0 0 30px rgba(52,211,153,.3); }
.ij-purple {
  background: rgba(124,107,245,.12); border-color: rgba(124,107,245,.3);
  color: #a78bfa !important;
}
.ij-purple:hover { box-shadow: 0 0 30px rgba(124,107,245,.3); }
.ij-cyan {
  background: rgba(56,217,245,.12); border-color: rgba(56,217,245,.3);
  color: #38d9f5 !important;
}
.ij-cyan:hover { box-shadow: 0 0 30px rgba(56,217,245,.3); }

/* Portal — full SVG gateway */
.intro-portal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.portal-svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(92vh, 92vw); height: auto;
  pointer-events: none;
}
.portal-info {
  position: relative; z-index: 2; text-align: center;
  padding: 32px 42px;
  background: rgba(5,8,17,.72);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(52,211,153,.2);
  border-radius: 28px;
  box-shadow: 0 0 60px rgba(52,211,153,.08), 0 20px 60px rgba(0,0,0,.5);
  max-width: 400px;
}
.portal-brand {
  font-family: var(--heading); font-weight: 900;
  font-size: clamp(30px, 6vw, 46px); color: #fff; letter-spacing: .02em;
  text-shadow: 0 0 30px rgba(52,211,153,.3);
  margin-bottom: 4px;
}
.portal-sub {
  font-size: 14px; color: rgba(255,255,255,.4);
  margin-bottom: 22px; letter-spacing: .06em;
}
.portal-facts {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 26px;
}
.portal-facts span {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 6px 16px;
}
.portal-enter { font-size: 17px !important; padding: 16px 48px !important; }
@media (max-width: 600px) {
  .portal-info { padding: 24px 22px; max-width: 320px; }
  .portal-facts { flex-direction: column; gap: 8px; }
}

/* Empire entrance — monumental galactic brand */
.empire-line {
  width: 60px; height: 1px; margin: 0 auto 24px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.5), transparent);
}
.empire-overline {
  font-size: 11px; font-weight: 600; letter-spacing: .35em;
  color: rgba(52,211,153,.5); margin-bottom: 16px;
  animation: introFadeIn .8s .2s ease both;
}
.empire-brand {
  font-family: var(--heading); font-weight: 900;
  font-size: clamp(56px, 14vw, 110px);
  color: #fff; letter-spacing: .04em; line-height: .9;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #fff 40%, rgba(52,211,153,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: introFadeIn .8s .1s ease both;
}
.empire-dot {
  -webkit-text-fill-color: #34d399;
  text-shadow: 0 0 30px rgba(52,211,153,.5);
}
.empire-tagline {
  font-family: var(--heading); font-weight: 400;
  font-size: clamp(14px, 3vw, 20px);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 36px;
  animation: introFadeIn .8s .3s ease both;
}
.empire-stats {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 36px;
  animation: introFadeIn .8s .4s ease both;
}
.empire-stat {
  text-align: center;
}
.empire-stat strong {
  display: block; font-family: var(--heading); font-weight: 800;
  font-size: 22px; color: #fff;
}
.empire-stat span {
  font-size: 11px; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .1em;
}
.empire-stat-divider {
  width: 1px; height: 30px;
  background: rgba(255,255,255,.1);
}
.empire-enter {
  background: none; border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-family: var(--heading); font-weight: 700;
  font-size: 14px; letter-spacing: .25em; padding: 18px 56px;
  border-radius: 0; cursor: pointer;
  transition: all .3s ease;
  animation: introFadeIn .8s .5s ease both;
}
.empire-enter:hover {
  background: #fff; color: #050811;
  box-shadow: 0 0 40px rgba(255,255,255,.2);
  letter-spacing: .35em;
}
@media (max-width: 480px) {
  .empire-stats { gap: 14px; }
  .empire-stat strong { font-size: 18px; }
  .empire-enter { padding: 16px 40px; font-size: 12px; }
}

/* Stars in intro bg */
.intro-stars {
  position: absolute; inset: 0; overflow: hidden;
}
.intro-star {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: introTwinkle var(--dur, 3s) var(--del, 0s) ease-in-out infinite;
}
@keyframes introTwinkle {
  0%, 100% { opacity: .15; }
  50% { opacity: .6; }
}

/* ============================================================
   PREVIEW BANNER (only in preview)
   ============================================================ */
.preview-banner {
  background: linear-gradient(135deg, rgba(124,107,245,.2), rgba(56,217,245,.12));
  border-bottom: 1px solid rgba(124,107,245,.35);
  padding: 10px 20px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--accent2);
  letter-spacing: .04em; z-index: 400; position: relative;
}