/* ── Brand Tokens (matching Replit :root exactly) ────────── */
:root {
  --teal:    #098b8a;
  --heading: #0d0d0d;
  --body:    #2e2e2e;
  --bg:      #ffffff;
  --bg-alt:  #f5f5f5;
  --sale:    #de2a2a;
  --navy:    #051e38;
  --green:   #2e9e7b;
  --pale:    #e8f5e9;
  --forest:  #0A362F;
  --fp:      'Montserrat', sans-serif;
  --fui:     'DM Sans', sans-serif;
}

/* ── Hard Reset — neutralize ALL Shopify theme interference ── */
.hemp-root *, .hemp-root *::before, .hemp-root *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; }
.hemp-root { font-family: var(--fp) !important; font-weight: 400 !important; background: var(--bg) !important; color: var(--body) !important; -webkit-font-smoothing: antialiased; line-height: normal !important; font-size: 16px !important; }
.hemp-root img { display: block !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; }
.hemp-root a { text-decoration: none !important; color: inherit !important; }
.hemp-root button { cursor: pointer; font-family: inherit !important; border: none !important; margin: 0 !important; padding: 0 !important; min-height: auto !important; line-height: normal !important; background: none !important; }
.hemp-root p, .hemp-root h1, .hemp-root h2, .hemp-root h3 { margin: 0 !important; padding: 0 !important; }
.hemp-root details > summary { list-style: none !important; cursor: pointer; }
.hemp-root details > summary::-webkit-details-marker { display: none !important; }

/* ── HERO — Desktop Card ─────────────────────────────────── */
/* Replit: hidden md:block mx-4 mt-4 rounded-2xl overflow-hidden bg-white */
.hemp-root .hero-card {
  display: flex !important;
  align-items: stretch !important;
  min-height: 320px !important;
  margin: 16px 16px 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
/* Replit: w-[42%] flex-shrink-0 px-10 py-10 flex flex-col justify-center */
.hemp-root .hero-text {
  width: 42% !important;
  flex-shrink: 0 !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
/* Replit: text-xs mb-3 color:#2e2e2e opacity:0.6 font-family:DM Sans */
.hemp-root .hero-breadcrumb {
  font-size: 10px !important;
  font-family: var(--fui) !important;
  color: var(--body) !important;
  opacity: 0.6;
  margin: 0 0 12px !important;
}
/* Replit: text-4xl leading-tight color:#0d0d0d font-family:Montserrat font-weight:400 */
.hemp-root .hero-heading {
  font-size: 35px !important;
  line-height: 1.25 !important;
  font-family: var(--fp) !important;
  font-weight: 400 !important;
  color: var(--heading) !important;
  margin: 0 !important;
}
/* Replit: text-sm mt-4 leading-relaxed color:#2e2e2e font-family:Montserrat font-weight:400 */
.hemp-root .hero-body-text {
  font-size: 13px !important;
  line-height: 1.625 !important;
  color: var(--body) !important;
  font-family: var(--fp) !important;
  font-weight: 400 !important;
  margin: 16px 0 0 !important;
}
/* Replit: flex-1 relative, inner div absolute inset-0 bg-alt */
.hemp-root .hero-image-wrap {
  flex: 1 !important;
  position: relative !important;
  background: var(--bg-alt) !important;
}
.hemp-root .hero-image-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ── HERO — Mobile ───────────────────────────────────────── */
/* Replit: md:hidden px-5 pt-6 pb-6 bg-white */
.hemp-root .hero-mobile {
  display: none;
  padding: 24px 20px !important;
  background: var(--bg) !important;
}
.hemp-root .hero-mobile .hero-breadcrumb { margin-bottom: 8px !important; }
.hemp-root .hero-mobile .hero-heading { font-size: 24px !important; }
.hemp-root .hero-mobile .hero-body-text { font-size: 13px !important; }

/* ── PROMO STRIP ─────────────────────────────────────────── */
.hemp-root .promo-strip {
  display: none !important; /* hidden for now — remove this line to restore */
  width: 100% !important;
  margin-top: 16px !important;
  padding: 32px 24px !important;
  background: var(--teal) !important;
  text-align: center !important;
}
.hemp-root .promo-eyebrow {
  font-family: var(--fui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 0 12px !important;
}
.hemp-root .promo-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.hemp-root .promo-disc { text-align: center !important; }
.hemp-root .promo-disc-num {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}
.hemp-root .promo-disc-pct {
  font-family: var(--fp) !important;
  font-weight: 900 !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  line-height: 1 !important;
  color: #000 !important;
}
.hemp-root .promo-disc-off {
  font-family: var(--fp) !important;
  font-weight: 700 !important;
  font-size: clamp(1rem, 2.5vw, 1.75rem) !important;
  color: #000 !important;
}
.hemp-root .promo-disc-sub {
  font-family: var(--fui) !important;
  font-size: clamp(0.7rem, 1.5vw, 0.95rem) !important;
  font-weight: 600 !important;
  color: #000 !important;
  opacity: 0.85;
  margin: 4px 0 0 !important;
}
.hemp-root .promo-or {
  font-family: var(--fui) !important;
  font-weight: 900 !important;
  font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
  color: #000 !important;
  opacity: 0.5;
  flex-shrink: 0 !important;
}

/* ── PRODUCT GRID ────────────────────────────────────────── */
.hemp-root .product-grid-section {
  padding: 40px 16px !important;
  max-width: 1024px !important;
  margin: 0 auto !important;
}
.hemp-root .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
.hemp-root .product-card {
  border: 1px solid var(--bg-alt) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  background: var(--bg) !important;
}
.hemp-root .product-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 10px !important;
  font-family: var(--fui) !important;
  font-weight: 700 !important;
  background: var(--navy) !important;
  color: #fff !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}
.hemp-root .product-image-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  background: var(--bg-alt) !important;
  padding: 0 !important;
}
.hemp-root .product-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hemp-root .product-stars {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.hemp-root .product-star {
  width: 14px !important;
  height: 14px !important;
  fill: #F6AB00 !important;
  color: #F6AB00 !important;
}
.hemp-root .product-review-count {
  font-size: 12px !important;
  font-family: var(--fui) !important;
  color: #6b7280 !important;
  margin-left: 6px !important;
}
.hemp-root .product-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
.hemp-root .product-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  color: var(--heading) !important;
  font-family: var(--fp) !important;
  margin: 8px 0 0 !important;
}
.hemp-root .product-prices {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.hemp-root .product-old-price {
  font-size: 14px !important;
  text-decoration: line-through !important;
  color: var(--body) !important;
  opacity: 0.4;
}
.hemp-root .product-new-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sale) !important;
}
.hemp-root .product-subscribe {
  font-size: 12px !important;
  color: var(--teal) !important;
  font-family: var(--fui) !important;
  margin: 4px 0 0 !important;
}
.hemp-root .product-cta {
  margin: 12px 0 0 !important;
  width: 100% !important;
  border-radius: 9999px !important;
  padding: 8px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--fp) !important;
  background: var(--teal) !important;
  color: #fff !important;
  transition: opacity 0.2s;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
  min-height: auto !important;
  line-height: normal !important;
  border: none !important;
}
.hemp-root .product-cta:hover { opacity: 0.9; }

/* ── TRUST BADGES ────────────────────────────────────────── */
.hemp-root .trust-section {
  padding: 24px 16px !important;
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--bg-alt) !important;
  border-bottom: 1px solid var(--bg-alt) !important;
}
.hemp-root .trust-inner {
  max-width: 1024px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
}
.hemp-root .trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  min-width: 80px !important;
  max-width: 120px !important;
}
.hemp-root .trust-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--pale) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  overflow: hidden !important;
}
.hemp-root .trust-icon img {
  width: 32px !important;
  height: auto !important;
  object-fit: contain !important;
}
.hemp-root .trust-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  color: var(--heading) !important;
  font-family: var(--fui) !important;
}

/* ── COMPARISON MATRIX ───────────────────────────────────── */
.hemp-root .comparison-section { padding: 40px 0 !important; }
.hemp-root .comparison-header { padding: 0 16px !important; max-width: 1024px !important; margin: 0 auto 24px !important; }
.hemp-root .comparison-heading { font-size: 24px !important; font-family: var(--fp) !important; font-weight: 400 !important; color: var(--heading) !important; margin: 0 !important; }
.hemp-root .comparison-sub { font-size: 14px !important; font-family: var(--fui) !important; color: var(--body) !important; margin: 4px 0 0 !important; }
.hemp-root .comparison-wrap { position: relative; padding: 0 16px !important; max-width: 1024px !important; margin: 0 auto !important; }
.hemp-root .comparison-scroll { width: 100% !important; overflow-x: auto !important; border-radius: 16px !important; border: 1px solid var(--bg-alt) !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hemp-root .comparison-scroll::-webkit-scrollbar { display: none; }
.hemp-root .comparison-table { width: 100% !important; min-width: 680px !important; border-collapse: collapse !important; text-align: left !important; }
.hemp-root .comparison-table thead { background: var(--navy) !important; }
.hemp-root .comparison-table thead th { padding: 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; font-family: var(--fp) !important; white-space: nowrap !important; }
.hemp-root .comparison-table thead th.col-product { position: sticky; left: 0; z-index: 2; background: var(--navy) !important; min-width: 150px !important; max-width: 180px !important; }
.hemp-root .comparison-table tbody tr:nth-child(odd)  { background: var(--bg) !important; }
.hemp-root .comparison-table tbody tr:nth-child(even) { background: var(--bg-alt) !important; }
.hemp-root .comparison-table td { padding: 16px !important; font-size: 14px !important; color: var(--body) !important; font-family: var(--fp) !important; white-space: nowrap; }
.hemp-root .comparison-table td.col-product { padding: 12px !important; position: sticky; left: 0; z-index: 1; min-width: 150px !important; max-width: 180px !important; border-right: 1px solid var(--bg-alt) !important; white-space: normal !important; }
.hemp-root .comparison-table tr:nth-child(odd)  td.col-product { background: var(--bg) !important; }
.hemp-root .comparison-table tr:nth-child(even) td.col-product { background: var(--bg-alt) !important; }
.hemp-root .col-product-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
.hemp-root .col-product-img { width: 36px !important; height: 36px !important; border-radius: 8px !important; background: var(--pale) !important; overflow: hidden; flex-shrink: 0; display: flex !important; align-items: center !important; justify-content: center !important; }
.hemp-root .col-product-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.hemp-root .col-product-name { font-size: 12px !important; font-weight: 600 !important; line-height: 1.375 !important; color: var(--heading) !important; font-family: var(--fp) !important; }
.hemp-root .potency-pill { display: inline-block !important; font-size: 12px !important; font-weight: 700 !important; font-family: var(--fui) !important; padding: 4px 8px !important; border-radius: 9999px !important; background: var(--pale) !important; color: var(--teal) !important; white-space: nowrap; }
.hemp-root .comparison-table td.col-wide { min-width: 180px !important; white-space: normal !important; }
.hemp-root .comparison-fade { display: none; position: absolute; right: 16px; top: 0; bottom: 0; width: 48px; pointer-events: none; border-radius: 0 16px 16px 0; background: linear-gradient(to left, rgba(255,255,255,0.95), transparent); }

/* ── SEO CONTENT PIPELINE ────────────────────────────────── */
.hemp-root .collection-seo-description {
  max-width: 768px !important;
  margin: 40px auto !important;
  padding: 0 16px !important;
  font-family: var(--fp) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--body) !important;
}
.hemp-root .collection-seo-description h2 { font-size: 24px !important; font-weight: 600 !important; color: var(--heading) !important; margin: 32px 0 12px !important; }
.hemp-root .collection-seo-description h3 { font-size: 20px !important; font-weight: 600 !important; color: var(--heading) !important; margin: 24px 0 8px !important; }
.hemp-root .collection-seo-description p { margin: 0 0 16px !important; }
.hemp-root .collection-seo-description ul,
.hemp-root .collection-seo-description ol { margin: 0 0 16px !important; padding-left: 24px !important; }
.hemp-root .collection-seo-description li { margin-bottom: 6px !important; }
.hemp-root .collection-seo-description table { width: 100% !important; border-collapse: collapse !important; margin: 24px 0 !important; font-size: 14px !important; }
.hemp-root .collection-seo-description table thead { background: var(--navy) !important; }
.hemp-root .collection-seo-description table th { padding: 12px 16px !important; color: #fff !important; font-weight: 600 !important; text-align: left !important; font-size: 13px !important; }
.hemp-root .collection-seo-description table td { padding: 12px 16px !important; border-bottom: 1px solid var(--bg-alt) !important; }
.hemp-root .collection-seo-description table tr:nth-child(even) { background: var(--bg-alt) !important; }

/* ── FAQ ─────────────────────────────────────────────────── */
.hemp-root .faq-section { padding: 40px 16px !important; max-width: 768px !important; margin: 0 auto !important; }
.hemp-root .faq-heading { font-size: 24px !important; font-family: var(--fp) !important; font-weight: 400 !important; color: var(--heading) !important; margin: 0 0 24px !important; }
.hemp-root .faq-intro { font-size: 18px !important; line-height: 1.625 !important; color: var(--body) !important; font-family: var(--fp) !important; font-weight: 400 !important; margin: 0 0 24px !important; }
.hemp-root .faq-item { border: 1px solid var(--bg-alt) !important; border-radius: 12px !important; margin-bottom: 12px !important; overflow: hidden !important; }
.hemp-root .faq-item summary { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--fp) !important; color: var(--heading) !important; }
.hemp-root .faq-icon { font-size: 20px !important; color: var(--teal) !important; transition: transform 0.2s; user-select: none; flex-shrink: 0 !important; }
.hemp-root .faq-item[open] .faq-icon { transform: rotate(45deg); }
.hemp-root .faq-answer { padding: 0 16px 16px !important; font-size: 14px !important; line-height: 1.625 !important; color: var(--body) !important; font-family: var(--fp) !important; margin: 0 !important; }

/* ── BLOG CAROUSEL ───────────────────────────────────────── */
.hemp-root .blog-section { padding: 40px 16px !important; max-width: 1024px !important; margin: 0 auto !important; }
.hemp-root .blog-heading { font-size: 24px !important; font-family: var(--fp) !important; font-weight: 400 !important; color: var(--heading) !important; margin: 0 0 24px !important; }
.hemp-root .blog-track { display: flex !important; overflow-x: auto !important; gap: 16px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 16px !important; }
.hemp-root .blog-track::-webkit-scrollbar { display: none; }
.hemp-root .blog-card { width: 280px !important; min-width: 280px !important; max-width: 280px !important; flex: 0 0 280px !important; scroll-snap-align: start; border-radius: 12px !important; overflow: hidden !important; border: 1px solid var(--bg-alt) !important; background: var(--bg) !important; display: flex !important; flex-direction: column !important; }
.hemp-root .blog-thumb { aspect-ratio: 16/9 !important; width: 100% !important; height: auto !important; background: var(--bg-alt) !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.hemp-root .blog-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.hemp-root .blog-body { padding: 16px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.hemp-root .blog-title { font-size: 14px !important; font-weight: 600 !important; color: var(--heading) !important; font-family: var(--fp) !important; margin: 0 !important; }
.hemp-root .blog-sub { font-size: 12px !important; color: var(--teal) !important; font-family: var(--fui) !important; margin: 4px 0 0 !important; }
.hemp-root .blog-cta { display: block !important; width: 100% !important; margin: auto 0 0 !important; border-radius: 9999px !important; padding: 8px 0 !important; text-align: center !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--fp) !important; border: none !important; color: #fff !important; background: var(--teal) !important; text-decoration: none !important; transition: opacity 0.2s; }
.hemp-root .blog-cta:hover { opacity: 0.8; }

/* ── RESPONSIVE (md breakpoint = 768px) ──────────────────── */
@media (min-width: 768px) {
  .hemp-root .promo-row { gap: 32px !important; }
  .hemp-root .blog-card { width: 320px !important; min-width: 320px !important; max-width: 320px !important; flex: 0 0 320px !important; }
}
@media (max-width: 767px) {
  .hemp-root .hero-card { display: none !important; }
  .hemp-root .hero-mobile { display: block !important; }
  .hemp-root .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .hemp-root .trust-inner { justify-content: center !important; }
  .hemp-root .comparison-fade { display: block !important; }
}

/* ── RELATED PAGES (internal links) ────────────────────── */
.hemp-root .related-pages { padding: 40px 16px !important; max-width: 1024px !important; margin: 0 auto !important; }
.hemp-root .related-heading { font-size: 24px !important; font-family: var(--fp) !important; font-weight: 400 !important; color: var(--heading) !important; margin: 0 0 8px !important; }
.hemp-root .related-hub { font-size: 14px !important; font-family: var(--fp) !important; color: var(--body) !important; margin: 0 0 24px !important; }
.hemp-root .related-hub a { color: var(--teal) !important; text-decoration: none !important; font-weight: 600 !important; }
.hemp-root .related-hub a:hover { text-decoration: underline !important; }
.hemp-root .related-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; }
.hemp-root .related-link { display: block !important; padding: 14px 16px !important; border: 1px solid var(--bg-alt) !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--fp) !important; color: var(--heading) !important; text-decoration: none !important; transition: border-color 0.2s, background 0.2s; }
.hemp-root .related-link:hover { border-color: var(--teal) !important; background: var(--bg-alt) !important; }
@media (max-width: 767px) {
  .hemp-root .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
}