/* Calc420 visual system 2026 — tokens + chrome + editorial. No copy. */
:root {
  --carta: #f4efe6;
  --carta-elevated: #faf6ef;
  --inchiostro: #1c1917;
  --inchiostro-muted: #44403c;
  --clorofilla: #1d3324;
  --clorofilla-deep: #15261b;
  --clorofilla-mid: #2a4a34;
  --clorofilla-ink: #1a3d28;
  --clorofilla-mist: #dce8d8;
  --clorofilla-tint: #eef3ea;
  --clorofilla-line: color-mix(in srgb, var(--clorofilla) 18%, var(--carta));
  --accento: #c45c26;
  --accento-soft: #e8c4a8;
  --raggio: 0.5rem;
  --raggio-ui: 0.75rem;
  --misura: 68ch;
  --strip: 64rem;
  --font-ui: "Bricolage Grotesque", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --fab-size: 48px;
  --fab-edge: 8px;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  background-color: var(--carta);
  color: var(--inchiostro);
}

body.bg-gray-50,
body.pt-20,
main,
main.bg-\[\#f9fafb\],
.bg-\[\#f9fafb\] {
  background-color: var(--carta) !important;
  color: var(--inchiostro-muted);
}

/* ——— Nav (refined chlorophyll) ——— */
.site-nav,
#site-header header,
header.bg-green-900 {
  background-color: var(--clorofilla-deep) !important;
  color: #fff;
  box-shadow: 0 1px 0 color-mix(in srgb, #000 18%, transparent);
}

#site-header header a,
.site-nav a {
  text-underline-offset: 0.18em;
}

#calcDropdownMenu,
#mobileMenu,
.bg-green-800 {
  background-color: var(--clorofilla) !important;
}

#calcDropdownMenu a:hover,
.hover\:bg-green-700:hover {
  background-color: var(--clorofilla-mid) !important;
}

.nav-accent,
#mobileMenu a[href*="forms.gle"],
.text-yellow-300 {
  color: var(--accento-soft) !important;
}

/* ——— Footer ——— */
.site-foot,
#site-footer footer,
footer.bg-gray-900 {
  background-color: var(--clorofilla-deep) !important;
  color: color-mix(in srgb, #fff 78%, var(--clorofilla-mist));
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

.site-foot a,
#site-footer a,
footer.bg-gray-900 a {
  color: inherit;
  text-decoration: none;
}

.site-foot a:hover,
#site-footer a:hover,
footer.bg-gray-900 a:hover,
.hover\:text-yellow-300:hover {
  color: var(--accento-soft) !important;
}

.site-foot .border-gray-700,
#site-footer .border-gray-700 {
  border-color: color-mix(in srgb, #fff 12%, transparent) !important;
}

/* ——— Hero ——— */
.hero-refined,
section.bg-\[\#14532d\] {
  background-color: var(--clorofilla) !important;
  color: #fff;
  margin-top: 3.25rem;
  padding: 4.25rem 1.25rem 3.5rem !important;
  text-align: center;
  box-shadow: none !important;
}

.hero-refined h1,
section.bg-\[\#14532d\] h1 {
  font-family: var(--font-ui);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 22em;
  margin-left: auto;
  margin-right: auto;
}

.hero-refined p,
section.bg-\[\#14532d\] p {
  font-family: var(--font-ui);
  font-weight: 450;
  color: color-mix(in srgb, #fff 82%, var(--clorofilla-mist));
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-refined a.rounded-full,
section.bg-\[\#14532d\] a.rounded-full {
  border-radius: var(--raggio) !important;
  box-shadow: none !important;
}

.hero-refined a.bg-white,
section.bg-\[\#14532d\] a.bg-white {
  background: var(--carta-elevated) !important;
  color: var(--clorofilla) !important;
}

.hero-refined a.border,
section.bg-\[\#14532d\] a.border {
  border-color: color-mix(in srgb, #fff 35%, transparent) !important;
}

.hero-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-ctas a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  text-align: center;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.hero-ctas a:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }

  .hero-ctas a {
    width: auto;
  }

  .hero-ctas a:first-child {
    grid-column: auto;
  }
}

/* Results THC/CBD/Share — equal chips on mobile */
@media (max-width: 767px) {
  div:has(> #shareBtn) {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  div:has(> #shareBtn) [role="tablist"] {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
  }

  #tabTHC,
  #tabCBD,
  #shareBtn {
    flex: 1 1 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.4rem !important;
    border-radius: var(--raggio-ui) !important;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
  }

  #shareBtn {
    flex-direction: column;
    gap: 0.15rem;
  }

  #shareBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}

/* Results panel — scan hierarchy without a redesign */
#indicator,
#indicatorCBD {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  min-width: 0;
}

#indicator > .flex-1,
#indicatorCBD > .flex-1 {
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
}

#panelTHC .bklit-panel,
#panelCBD .bklit-panel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

#gaugeValue,
#gaugeValueCBD {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  white-space: nowrap;
  top: calc(100% - 0.15rem) !important;
}

#indicator h4,
#indicatorCBD h4 {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

#doseExplain,
#doseExplainCBD {
  line-height: 1.45;
  color: var(--inchiostro-muted) !important;
}

#indicator .mt-4.grid,
#indicator .mt-2.grid,
#indicatorCBD .mt-4.grid,
#indicatorCBD .mt-2.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(7.25rem, 1fr)) !important;
  gap: 0.5rem !important;
}

#indicator .mt-4.grid > :last-child,
#indicatorCBD .mt-4.grid > :last-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  #indicator .mt-4.grid,
  #indicatorCBD .mt-4.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #indicator .mt-4.grid > :last-child,
  #indicatorCBD .mt-4.grid > :last-child {
    grid-column: auto;
  }

  #indicator > .flex-shrink-0,
  #indicatorCBD > .flex-shrink-0 {
    width: 12rem;
    flex: 0 0 12rem;
  }
}

#indicator .bg-green-50,
#indicatorCBD .bg-green-50 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0.55rem !important;
  box-shadow: none !important;
  border: 1px solid var(--clorofilla-line);
}

#indicator .bg-green-50 > :first-child,
#indicatorCBD .bg-green-50 > :first-child {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--inchiostro-muted) !important;
}

#indicator .bg-green-50 > :nth-child(2),
#indicatorCBD .bg-green-50 > :nth-child(2) {
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

#indicator .bg-green-50 > :nth-child(3),
#indicatorCBD .bg-green-50 > :nth-child(3) {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--inchiostro-muted) !important;
}

#indicator .bg-green-50:has(#doseTHC),
#indicatorCBD .bg-green-50:has(#doseCBD) {
  background: var(--clorofilla-mist) !important;
  border-color: color-mix(in srgb, var(--clorofilla) 28%, var(--carta));
}

/* Calculator stepper — sequence, current step, connected track */
.calc-stepper {
  margin: 0 0 1.75rem;
  padding: 0.85rem 0.4rem 0.95rem;
  border: 1px solid var(--clorofilla-line);
  border-radius: var(--raggio-ui);
  background: var(--clorofilla-tint);
}

.calc-stepper-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.calc-stepper-list::before,
.calc-stepper-list::after {
  content: "";
  position: absolute;
  top: 1.125rem;
  left: calc(100% / 6);
  height: 2px;
  border-radius: 99px;
  pointer-events: none;
}

.calc-stepper-list::before {
  right: calc(100% / 6);
  background: color-mix(in srgb, var(--clorofilla) 16%, var(--carta));
}

.calc-stepper-list::after {
  width: 0;
  background: var(--clorofilla-mid);
  transition: width 0.25s ease;
}

.calc-stepper[data-active="2"] .calc-stepper-list::after {
  width: calc(100% / 3);
}

.calc-stepper[data-active="3"] .calc-stepper-list::after {
  width: calc(100% / 3 * 2);
}

.calc-step a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.2rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.calc-step-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--clorofilla) 22%, var(--carta));
  background: var(--carta-elevated);
  color: var(--clorofilla-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.calc-step-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.calc-step-title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--clorofilla);
}

.calc-step-hint {
  display: none;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--inchiostro-muted);
}

.calc-step.is-done .calc-step-index {
  background: var(--clorofilla-mid);
  border-color: var(--clorofilla-mid);
  color: #fff;
}

.calc-step.is-current .calc-step-index {
  background: var(--clorofilla);
  border-color: var(--clorofilla);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--clorofilla) 16%, transparent);
}

.calc-step.is-current .calc-step-title {
  color: var(--clorofilla-deep);
}

.calc-step:not(.is-current):not(.is-done) .calc-step-title {
  font-weight: 650;
  color: var(--inchiostro-muted);
}

.calc-step a:focus-visible {
  outline: 2px solid var(--clorofilla-mid);
  outline-offset: 3px;
  border-radius: var(--raggio);
}

#step-1,
#step-2,
#step-3 {
  scroll-margin-top: 5.75rem;
}

@media (min-width: 480px) {
  .calc-stepper {
    padding: 0.95rem 0.75rem 1.05rem;
  }

  .calc-step-title {
    font-size: 0.8125rem;
  }

  .calc-step-hint {
    display: block;
  }
}

/* ——— Magazine / editorial flow ——— */
/* 420.html article-flow is the target: 68ch of 1rem UI font. Beat leftover
   64rem / 48rem / max-w-4xl / ".mx-auto { max-width: 100vw }" page CSS.
   Calculator shells (.w-l, max-w-2xl, #step-*) are listed later and stay wide. */
article.article-flow,
article.article-card,
section.article-flow,
section.article-card,
div.article-flow,
div.article-card,
.legal-flow,
.container.legal-flow,
.article-flow.mx-auto,
.article-card.mx-auto,
section.max-w-4xl,
section.max-w-4xl.mx-auto,
#faq,
#cannabutter,
#cookies,
#canna-oil,
#oil-recipe,
#canna-tincture,
#tincture-recipe,
#comparison,
#edible-calculator-guide,
#psilocybin-guide {
  max-width: var(--misura) !important;
  width: 100%;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  font-size: 1rem;
}

.article-flow,
.article-card,
.legal-flow {
  max-width: var(--misura) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2.75rem 1.25rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--clorofilla-line);
  box-sizing: border-box;
  font-size: 1rem;
  min-width: 0;
}

/* Nested SEO wrappers: one misura column, same padding as 420 */
section.max-w-4xl.mx-auto,
#edible-calculator-guide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section.max-w-4xl > .article-flow,
section.max-w-4xl > .article-card,
#edible-calculator-guide > .article-flow,
#edible-calculator-guide > .article-card {
  max-width: none !important;
}

.article-flow .prose,
.article-card .prose {
  max-width: none !important;
}

/* Calculator chrome keeps its current (wider) tool width */
.w-l,
.w-l.mx-auto,
.w-l.bg-white {
  max-width: 100vw !important;
}

/* Product strips: RQS + Amazon — same width, not full-bleed, not article misura */
#rqs-picks,
.rqs-picks,
.products-carousel-container {
  max-width: var(--strip) !important;
  width: 100%;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.article-flow:last-of-type,
.article-card:last-of-type {
  border-bottom: 0;
}

.article-flow h2,
.article-card h2,
.legal-flow h2,
.article-flow h3,
.article-card h3,
.legal-flow h3,
.article-flow h4,
.article-card h4 {
  font-family: var(--font-ui);
  color: var(--clorofilla) !important;
  letter-spacing: -0.02em;
  font-weight: 650 !important;
  line-height: 1.2;
}

.article-flow h2,
.article-card h2,
.legal-flow h2 {
  margin-top: 2.35rem;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}

.article-flow p,
.article-card p,
.legal-flow p,
.article-flow li,
.article-card li,
.legal-flow li,
.article-flow .prose,
.article-card .prose {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--inchiostro) !important;
}

.article-flow .prose :where(h2, h3, h4),
.article-card .prose :where(h2, h3, h4) {
  font-family: var(--font-ui);
}

/* Quiet in-article links (same hrefs) */
.article-flow a,
.article-card a,
.legal-flow a,
.prose a,
a.link-quiet {
  color: var(--clorofilla-mid) !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--clorofilla) 38%, transparent) !important;
}

.article-flow a:hover,
.article-card a:hover,
.legal-flow a:hover,
a.link-quiet:hover {
  color: var(--clorofilla) !important;
  text-decoration-color: var(--clorofilla) !important;
}

a.text-green-600 {
  color: var(--clorofilla-mid) !important;
  font-weight: 500 !important;
}

/* Callouts sit on paper, not neon green */
.article-flow .bg-green-50,
.article-card .bg-green-50,
.not-prose.bg-green-50 {
  background: var(--clorofilla-tint) !important;
  border: 1px solid var(--clorofilla-line);
  border-radius: var(--raggio) !important;
  box-shadow: none;
}

.article-flow img,
.article-card img,
.article-flow figure,
.article-card figure,
.article-flow table,
.article-card table {
  max-width: 100%;
  height: auto;
}

.article-flow img,
.article-card img {
  border-radius: var(--raggio);
  border: 1px solid var(--clorofilla-line) !important;
  box-shadow: none !important;
}

.article-flow .bg-white,
.article-card .bg-white {
  background: var(--carta-elevated) !important;
  box-shadow: none !important;
  border: 1px solid var(--clorofilla-line);
}

.article-flow .bg-yellow-50,
.article-card .bg-yellow-50,
.not-prose.bg-yellow-50 {
  background: color-mix(in srgb, var(--accento-soft) 35%, var(--carta)) !important;
  border-color: var(--accento) !important;
}

.article-flow .text-yellow-800,
.article-card .text-yellow-800 {
  color: color-mix(in srgb, var(--accento) 70%, var(--inchiostro)) !important;
}

/* 420 bottom CTA — was white text on no background */
.cta-panel,
.not-prose.cta-panel,
.not-prose.text-white.rounded-lg.p-8 {
  background: var(--clorofilla) !important;
  color: #fff !important;
  border-radius: var(--raggio) !important;
}

.cta-panel h3,
.cta-panel p,
.not-prose.text-white.rounded-lg.p-8 h3,
.not-prose.text-white.rounded-lg.p-8 p {
  color: #fff !important;
  font-family: var(--font-ui);
}

.cta-panel a,
.not-prose.text-white.rounded-lg.p-8 a {
  background: var(--carta-elevated) !important;
  color: var(--clorofilla) !important;
  background-image: none !important;
}

.cta-panel a:hover,
.not-prose.text-white.rounded-lg.p-8 a:hover {
  background: #fff !important;
}

/* Buttons in articles */
.article-flow a.bg-green-600,
.article-card a.bg-green-600,
a.bg-green-600 {
  background-color: var(--clorofilla-mid) !important;
  border-radius: var(--raggio) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--font-ui);
}

a.bg-green-600:hover,
.hover\:bg-green-700:hover {
  background-color: var(--clorofilla) !important;
}

/* FAQ accordion stays accordion */
#faq .divide-y {
  border-color: var(--clorofilla-line);
}

#faqAccordion button span,
#faq h2 {
  font-family: var(--font-ui);
  color: var(--clorofilla) !important;
}

#faqAccordion p {
  font-family: var(--font-serif);
  color: var(--inchiostro) !important;
}

#faqAccordion .text-green-700,
#faqAccordion .text-green-600 {
  color: var(--clorofilla-ink) !important;
}

#faqAccordion .divide-green-100,
#faq .divide-green-100 > * {
  border-color: var(--clorofilla-line) !important;
}

#site-header + main.py-12 {
  padding-top: 5.5rem;
}

#site-header + main.py-12 > h1 {
  font-family: var(--font-ui);
  color: var(--clorofilla) !important;
  letter-spacing: -0.03em;
  max-width: var(--misura) !important;
  margin-left: auto;
  margin-right: auto;
}

.legal-flow {
  padding-top: 1.5rem !important;
}

.legal-flow h1 {
  font-family: var(--font-ui);
  color: var(--clorofilla) !important;
  letter-spacing: -0.03em;
}

/* ——— Calculator: color map only ——— */
.bg-green-50 {
  background-color: var(--clorofilla-tint) !important;
}

.bg-green-50\/50,
.bg-green-50\/40 {
  background-color: color-mix(in srgb, var(--clorofilla-tint) 55%, transparent) !important;
}

.bg-\[\#bbf7d0\] {
  background-color: var(--clorofilla-mist) !important;
}

.bg-\[\#14532d\] {
  background-color: var(--clorofilla) !important;
}

.text-\[\#166534\] {
  color: var(--clorofilla-ink) !important;
}

.text-green-500 { color: var(--clorofilla-mid) !important; }
.text-green-600 { color: var(--clorofilla-mid) !important; }
.text-green-700 { color: var(--clorofilla-ink) !important; }
.text-green-800 { color: var(--clorofilla) !important; }
.text-green-900 { color: var(--clorofilla-deep) !important; }
.text-green-100 { color: color-mix(in srgb, #fff 82%, var(--clorofilla-mist)) !important; }
.text-green-200 { color: var(--clorofilla-mist) !important; }

.border-green-100 { border-color: var(--clorofilla-line) !important; }
.border-green-200 { border-color: color-mix(in srgb, var(--clorofilla) 24%, var(--carta)) !important; }
.border-green-200\/50 { border-color: color-mix(in srgb, var(--clorofilla) 18%, transparent) !important; }
.border-green-300 { border-color: color-mix(in srgb, var(--clorofilla) 32%, var(--carta)) !important; }
.border-green-500,
.border-\[\#16a34a\] { border-color: var(--clorofilla-mid) !important; }

.bg-green-100 { background-color: var(--clorofilla-mist) !important; }
.bg-green-300 { background-color: color-mix(in srgb, var(--clorofilla-mid) 45%, var(--clorofilla-mist)) !important; }
.bg-green-600,
.bg-green-700 { background-color: var(--clorofilla-mid) !important; }
.bg-green-800 { background-color: var(--clorofilla) !important; }
.bg-green-900 { background-color: var(--clorofilla-deep) !important; }

.from-green-50 { --tw-gradient-from: var(--clorofilla-tint) !important; }
.via-emerald-50 { --tw-gradient-via: var(--carta-elevated) !important; }
.to-green-100 { --tw-gradient-to: var(--clorofilla-mist) !important; }
.from-green-400 { --tw-gradient-from: color-mix(in srgb, var(--clorofilla-mid) 70%, var(--clorofilla-mist)) !important; }
.via-green-500 { --tw-gradient-via: var(--clorofilla-mid) !important; }
.to-green-600 { --tw-gradient-to: var(--clorofilla) !important; }
.from-green-600 { --tw-gradient-from: var(--clorofilla-mid) !important; }
.to-green-700 { --tw-gradient-to: var(--clorofilla) !important; }

.focus\:border-green-500:focus,
.focus\:border-green-400:focus { border-color: var(--clorofilla-mid) !important; }
.focus\:ring-green-200:focus,
.focus\:ring-green-500:focus,
.focus-within\:ring-green-200:focus-within,
.focus-within\:border-green-500:focus-within {
  --tw-ring-color: color-mix(in srgb, var(--clorofilla-mid) 35%, transparent);
}

.hover\:bg-green-100:hover { background-color: var(--clorofilla-tint) !important; }
.hover\:bg-green-800\/40:hover { background-color: color-mix(in srgb, var(--clorofilla-deep) 40%, transparent) !important; }
.hover\:border-green-300\/70:hover { border-color: color-mix(in srgb, var(--clorofilla) 40%, transparent) !important; }

.decarb-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .decarb-options {
    grid-template-columns: 1fr 1fr;
  }
}

.decarb-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--clorofilla-mist) !important;
  border-radius: 0.75rem;
  background: #fff !important;
  color: var(--clorofilla-ink) !important;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.25;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--clorofilla) 8%, transparent);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.decarb-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.decarb-pill-icon-wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  background: transparent !important;
  border: 0 !important;
}

.decarb-pill-icon,
.decarb-pill svg.decarb-pill-icon,
.decarb-pill-icon-wrap svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0;
  overflow: visible;
  color: inherit;
  stroke: currentColor;
  fill: none;
}

.decarb-pill-text {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: balance;
}

.decarb-pill:has(input:checked) {
  background: var(--clorofilla-mid) !important;
  border-color: var(--clorofilla-mid) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--clorofilla) 25%, transparent);
}

/* Neutralize legacy sibling rules that painted icons white on a white pill (invisible on iOS). */
.decarb-pill input:checked ~ span,
.decarb-pill input:checked ~ *,
.decarb-pill:has(input:checked) .decarb-pill-icon-wrap,
.decarb-pill:has(input:checked) .decarb-pill-icon-wrap * {
  background: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}

.decarb-pill:has(input:checked) svg {
  stroke: #fff !important;
  color: #fff !important;
  fill: none !important;
}

@media (hover: hover) {
  .decarb-pill:hover:not(:has(input:checked)) {
    background: var(--clorofilla-tint) !important;
  }
}

@media (min-width: 640px) {
  .decarb-pill {
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
  }
}

/* Calculator product card stays a tool, on paper */
.w-l.bg-white,
.w-full.max-w-2xl.bg-white,
section.flex.flex-col.items-center .bg-white.rounded-xl {
  background: var(--carta-elevated) !important;
  box-shadow: 0 1px 0 var(--clorofilla-line), 0 18px 40px -28px color-mix(in srgb, var(--clorofilla) 35%, transparent) !important;
}

/* Compound fields (weight + unit) use bg-white without .rounded-xl on the inner input,
   so they stayed pure white while standalone inputs picked up carta-elevated. */
#step-1 input[type="number"],
#step-1 input[type="text"],
#step-1 input[type="email"],
#step-1 select:not([id$="Unit"]),
#step-2 input[type="number"],
#step-2 input[type="text"],
#step-2 select:not([id$="Unit"]),
#step-3 input[type="number"],
#step-3 input[type="text"],
#step-3 select:not([id$="Unit"]),
#step-1 .flex.rounded-xl.bg-white,
#step-2 .flex.rounded-xl.bg-white,
#step-3 .flex.rounded-xl.bg-white {
  background-color: var(--carta-elevated) !important;
  background-image: none !important;
}

/* Compound number + unit: one shell, inset divider, no nested pill */
div:has(> #cannabisUnit),
div:has(> #butterUnit),
div:has(> #recipeButterUnit) {
  overflow: hidden;
}

#step-1 #cannabis,
#step-2 #butter,
#step-3 #recipeButter {
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}

#step-1 #cannabisUnit,
#step-2 #butterUnit,
#step-3 #recipeButterUnit {
  appearance: none;
  -webkit-appearance: none;
  align-self: stretch;
  flex-shrink: 0;
  margin: 0;
  min-width: 4.5rem;
  padding: 0.75rem 1.7rem 0.75rem 0.9rem;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--clorofilla-ink) !important;
  cursor: pointer;
  background-color: var(--carta-elevated) !important;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--clorofilla) 22%, var(--carta)),
      color-mix(in srgb, var(--clorofilla) 22%, var(--carta))
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%232a4a34' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-size: 1px 1.15em, 0.9rem;
  background-position: left center, right 0.45rem center;
}

#step-1 #cannabisUnit:focus,
#step-2 #butterUnit:focus,
#step-3 #recipeButterUnit:focus {
  outline: none;
}

#calcolaBtn.bg-\[\#bbf7d0\],
#calcolaBtn {
  background-color: var(--clorofilla-mist) !important;
  color: var(--clorofilla-ink) !important;
}

#calcolaBtn:hover {
  background-color: var(--clorofilla-mid) !important;
  color: #fff !important;
}

/* Amazon / RQS chrome — color only */
.carousel-btn {
  border-color: var(--clorofilla-line);
  color: var(--clorofilla);
}

/* BMC support strip (was yellow) */
.bg-yellow-50.border-t,
.py-4.bg-yellow-50 {
  background: color-mix(in srgb, var(--accento-soft) 28%, var(--carta)) !important;
  border-color: var(--accento-soft) !important;
  box-shadow: none !important;
}

a.bg-yellow-400,
.bg-yellow-400 {
  background-color: var(--accento) !important;
  color: #fff !important;
}

a.bg-yellow-400:hover,
.hover\:bg-yellow-500:hover {
  background-color: color-mix(in srgb, var(--accento) 85%, #000) !important;
}

.bg-yellow-400 svg,
a.bg-yellow-400 .text-yellow-900,
.text-yellow-900 {
  color: #fff !important;
}

/* GlowCookies — palette, banner copy untouched */
#glowCookies-banner,
.glowCookies__banner {
  background-color: var(--clorofilla-deep) !important;
  color: var(--carta) !important;
  font-family: var(--font-ui) !important;
}

#glowCookies-banner h3,
#glowCookies-banner p,
#glowCookies-banner a.read__more {
  color: var(--carta) !important;
}

#glowCookies-banner a.read__more {
  color: var(--accento-soft) !important;
}

#acceptCookies {
  background-color: var(--accento) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
}

#rejectCookies {
  background-color: var(--clorofilla-mist) !important;
  color: var(--clorofilla-deep) !important;
  font-family: var(--font-ui) !important;
}

#prebannerBtn {
  background-color: var(--clorofilla-deep) !important;
  color: var(--carta) !important;
  font-family: var(--font-ui) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  min-width: var(--fab-size) !important;
  min-height: var(--fab-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  left: var(--fab-edge) !important;
}

#prebannerBtn svg {
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}

#bmc-wbtn {
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
  min-width: var(--fab-size) !important;
  min-height: var(--fab-size) !important;
  right: var(--fab-edge) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

#bmc-wbtn img,
#bmc-wbtn svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

/* Mobile: keep BMC + cookie FABs above the sticky Calcola / mini-bar.
   --kb-shift pushes them back under the virtual keyboard (iOS/Android). */
@media (max-width: 767px) {
  body:has(#calcolaBtn.fixed) {
    --sticky-fab-offset: calc(3.75rem + 3rem + var(--fab-edge));
  }

  #calcolaBtn.fixed {
    bottom: calc(0px - var(--kb-shift, 0px)) !important;
    transition-property: background-color, color, box-shadow;
  }

  #miniBar.fixed {
    bottom: calc(3.75rem - var(--kb-shift, 0px)) !important;
    transition-property: background-color, color, box-shadow;
  }

  body:has(#calcolaBtn.fixed) #bmc-wbtn {
    bottom: calc(var(--sticky-fab-offset) - var(--kb-shift, 0px)) !important;
    right: var(--fab-edge) !important;
    z-index: 35 !important;
  }

  body:has(#calcolaBtn.fixed) #prebannerBtn {
    bottom: calc(var(--sticky-fab-offset) - var(--kb-shift, 0px)) !important;
    left: var(--fab-edge) !important;
    z-index: 35 !important;
  }

  body:has(#calcolaBtn.fixed) #glowCookies-banner,
  body:has(#calcolaBtn.fixed) .glowCookies__banner {
    bottom: calc(var(--sticky-fab-offset) - var(--kb-shift, 0px)) !important;
    z-index: 36 !important;
  }

  html.kb-open #calcolaBtn.fixed,
  html.kb-open #miniBar.fixed,
  html.kb-open #bmc-wbtn,
  html.kb-open #prebannerBtn {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Contrast helpers */
:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* ——— Motion + Bklit chart layer (visual only) ——— */
:root {
  --chart-1: var(--clorofilla-mid);
  --chart-2: var(--accento);
  --chart-3: #3b82f6;
  --chart-4: #c4a35a;
  --chart-5: var(--clorofilla);
  --chart-track: color-mix(in srgb, var(--clorofilla) 12%, var(--carta));
  --chart-grid: color-mix(in srgb, var(--clorofilla) 14%, transparent);
  --chart-ease: cubic-bezier(0.85, 0, 0.15, 1);
}

.site-nav {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#calcDropdownMenu,
#mobileMenu {
  transform-origin: top right;
}

html.ui-motion .product-card:hover {
  transform: none;
}

#needle,
#needleCBD,
#gaugeNeedle circle,
#gaugeNeedleCBD circle {
  opacity: 0 !important;
}

#indicator svg path[stroke="url(#gaugeArc)"],
#indicatorCBD svg path[stroke="url(#gaugeArcCBD)"],
#indicator svg .gauge-rainbow,
#indicatorCBD svg .gauge-rainbow {
  opacity: 0 !important;
  filter: none;
}

#indicator svg .gauge-notch,
#indicatorCBD svg .gauge-notch {
  filter: none;
}

#indicator .relative.w-48,
#indicatorCBD .relative.w-48 {
  width: 14rem;
  height: 9rem;
  overflow: visible;
}

#bklit-THC,
#bklit-CBD {
  display: none !important;
}

.bklit-panel {
  margin-top: 1.1rem;
  padding: 1rem 0.85rem 0.85rem;
  border: 1px solid var(--clorofilla-line);
  border-radius: var(--raggio-ui);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--carta-elevated) 88%, var(--clorofilla-tint)), var(--carta-elevated));
}

.bklit-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 720px) {
  .bklit-panel-grid {
    grid-template-columns: minmax(8.5rem, 11rem) 1fr;
    gap: 1.25rem;
  }
}

.bklit-chart {
  width: 100%;
  min-width: 0;
}

.bklit-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

.bklit-ring-wrap {
  position: relative;
  width: min(100%, 11rem);
  margin: 0 auto;
}

.bklit-ring-center {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.bklit-ring-center strong {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.04em;
  color: var(--clorofilla-deep);
  line-height: 1.05;
}

.bklit-ring-center span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inchiostro-muted);
  margin-top: 0.15rem;
}

.bklit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin-top: 0.65rem;
}

.bklit-legend button,
.bklit-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--inchiostro-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}

.bklit-swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 99px;
  flex-shrink: 0;
}

.bklit-tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  background: var(--clorofilla-deep);
  color: var(--carta);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, #000 55%, transparent);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
}

.bklit-tip.is-on {
  opacity: 1;
}

.bklit-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 1.75rem;
}

@media (min-width: 720px) {
  .bklit-stats {
    grid-template-columns: 1.4fr 1fr;
  }
}

.bklit-card {
  padding: 1rem 1rem 0.85rem;
  border: 1px solid var(--clorofilla-line);
  border-radius: var(--raggio-ui);
  background: var(--carta-elevated);
}

.bklit-card h3 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clorofilla) !important;
  font-family: var(--font-ui);
}

.bklit-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .bklit-kpis {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bklit-onset {
  margin-top: 1rem;
}

.products-carousel {
  cursor: grab;
  touch-action: pan-y;
}

.products-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.products-carousel.is-dragging .product-card {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .bklit-chart,
  .bklit-panel {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  #site-header,
  header,
  #site-footer,
  footer,
  #calcolaBtn.fixed,
  [data-name="BMC-Widget"],
  #bmc-wbtn,
  iframe[src*="buymeacoffee"],
  .glowCookies__banner,
  div[class*="glowCookies"],
  .py-4.bg-yellow-50,
  .carousel-btn,
  .bklit-panel,
  .bklit-stats,
  .bklit-onset,
  .bklit-tip {
    display: none !important;
  }

  body,
  main,
  .article-flow,
  .article-card,
  .legal-flow {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    max-width: 100% !important;
  }

  .hero-refined,
  section.bg-\[\#14532d\] {
    background: none !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 0 1rem !important;
  }

  a {
    color: inherit !important;
    text-decoration: underline;
  }
}