/** Shopify CDN: Minification failed

Line 2862:0 Unexpected "}"
Line 7153:68 Unexpected "\\/75"
Line 7158:68 Unexpected "\\/85"

**/
/**
 * cinema-article.css
 * Consolidated from 10 source files
 * Generated: 2026-03-03T09:21:19.564Z
 */


/* ============================================
   article-editorial-masterpiece.css
   ============================================ */

/* ============================================================================
   AGRIKO ARTICLE PAGE — EDITORIAL MASTERPIECE (ENHANCED)
   Complete redesign with Farmers Market Editorial aesthetic

   Design Philosophy:
   - Magazine-inspired typography with dramatic scale contrast
   - Letterpress-style decorative elements
   - Heritage specimen card depth for all interactive elements
   - Editorial flow with generous white space and elegant section breaks
   - Warm, organic color palette with golden accents

   ENHANCEMENTS (2026-03-03):
   - Improved stats box visual prominence with gradient backgrounds
   - Enhanced pull quote styling with decorative quotation marks
   - Better section dividers with organic flourishes
   - Enhanced "Continue Reading" navigation with card-style treatment
   - Improved nested heading hierarchy (H3/H4 sections)
   - Added callout box styling for "Four Principles" sections

   ============================================================================ */

/* ============================================================================
   GLOBAL EASING & MOTION
   ============================================================================ */

.template-article .ag-article,
.template-article .ag-article-card,
.template-article .ag-article__media,
.template-article .ag-button,
.template-article .ag-article__topics a {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ============================================================================
   ARTICLE SHELL — Editorial container with ambient background
   ============================================================================ */

.template-article .ag-article {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(246, 185, 0, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(14, 62, 41, 0.02) 0%, transparent 50%),
    linear-gradient(180deg, #fafaf8 0%, #f5f3f0 100%);
  gap: clamp(2rem, 5vw, 4rem);
}

/* ============================================================================
   ARTICLE HEADER — Magazine-inspired hero
   ============================================================================ */

.template-article .ag-article__header {
  text-align: center;
  max-width: 42ch;
  margin: 0 auto;
  gap: clamp(1rem, 2.5vw, 2rem) !important;
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(14, 62, 41, 0.08);
  position: relative;
}

/* Decorative corner flourish */
.template-article .ag-article__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f6b900, transparent);
}

/* Kicker with Caveat handwriting */
.template-article .ag-article__header .ag-kicker {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #f6b900 !important;
  text-shadow: 0 1px 2px rgba(14, 62, 41, 0.1);
  margin-bottom: 0.5rem;
}

/* Topic tags as elegant pill badges */
.template-article .ag-article__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.template-article .ag-article__topics a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(246, 185, 0, 0.12), rgba(232, 167, 53, 0.08)) !important;
  border: 1px solid rgba(246, 185, 0, 0.25) !important;
  color: #0e3e29 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  box-shadow:
    0 2px 8px rgba(14, 62, 41, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.template-article .ag-article__topics a:hover {
  background: linear-gradient(135deg, rgba(246, 185, 0, 0.2), rgba(232, 167, 53, 0.15)) !important;
  border-color: rgba(246, 185, 0, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 4px 12px rgba(246, 185, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Main headline - dramatic display typography */
.template-article .ag-article__title {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2.5rem, 7vw, 4.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: #0e3e29 !important;
  text-shadow: 0 2px 4px rgba(14, 62, 41, 0.05);
  margin: 0.5rem 0;
}

/* Gradient text accent for emphasis */
.template-article .ag-article__title span {
  background: linear-gradient(135deg, #f6b900 0%, #e8a735 50%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Excerpt/deck */
.template-article .ag-article__excerpt {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem) !important;
  line-height: 1.6 !important;
  color: #525252 !important;
  font-style: italic !important;
  max-width: 38ch;
  margin: 0 auto;
}

/* Meta info with letterpress treatment */
.template-article .ag-article__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #737373 !important;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: rgba(14, 62, 41, 0.03);
  border: 1px solid rgba(14, 62, 41, 0.06);
  width: fit-content;
  margin: 0 auto;
}

.template-article .ag-article__meta-dot {
  color: #f6b900 !important;
  font-size: 0.5rem;
}

/* ============================================================================
   FEATURED IMAGE — Museum-framed presentation
   ============================================================================ */

.template-article .ag-article__media {
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(14, 62, 41, 0.08),
    0 16px 48px rgba(14, 62, 41, 0.04),
    0 0 0 1px rgba(14, 62, 41, 0.06),
    inset 0 0 0 8px #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  position: relative;
}

.template-article .ag-article__media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg,
      #0e3e29 0%,
      #f6b900 25%,
      #e8a735 50%,
      #f6b900 75%,
      #b07d4b 100%);
  z-index: 10;
}

.template-article .ag-article__image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-article .ag-article__media:hover .ag-article__image {
  transform: scale(1.02);
}

/* ============================================================================
   ARTICLE CONTENT — Editorial typography with pull quote treatment
   ============================================================================ */

.template-article .ag-richtext {
  max-width: 68ch;
  margin: 0 auto;
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem) !important;
  line-height: 1.8 !important;
  color: #2a2a2a !important;
}

/* Rich text headings */
.template-article .ag-richtext h2,
.template-article .ag-richtext h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  color: #0e3e29 !important;
  margin-top: 2.5em !important;
  margin-bottom: 1em !important;
}

.template-article .ag-richtext h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

.template-article .ag-richtext h3 {
  font-size: clamp(1.4rem, 3vw, 1.85rem) !important;
}

/* Rich text paragraphs */
.template-article .ag-richtext p {
  margin-bottom: 1.5em !important;
}

/* Pull quotes with decorative treatment */
.template-article .ag-richtext blockquote {
  position: relative;
  padding: 2.5rem 2rem !important;
  margin: 3rem 0 !important;
  background:
    linear-gradient(135deg, rgba(246, 185, 0, 0.06), rgba(232, 167, 53, 0.04)) !important;
  border-left: 4px solid #f6b900 !important;
  border-radius: 0 1rem 1rem 0 !important;
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.35rem, 3vw, 1.85rem) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #0e3e29 !important;
}

.template-article .ag-richtext blockquote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-size: 4rem;
  font-family: 'Fraunces', serif !important;
  color: #f6b900;
  opacity: 0.3;
  line-height: 1;
}

/* Rich text lists */
.template-article .ag-richtext ul,
.template-article .ag-richtext ol {
  padding-left: 1.5rem !important;
  margin-bottom: 1.5em !important;
}

.template-article .ag-richtext li {
  margin-bottom: 0.75em !important;
}

/* Rich text links */
.template-article .ag-richtext a {
  color: #0e3e29 !important;
  text-decoration: underline;
  text-decoration-color: rgba(246, 185, 0, 0.5);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.template-article .ag-richtext a:hover {
  text-decoration-color: #f6b900;
  color: #f6b900 !important;
}

/* Rich text images */
.template-article .ag-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 2rem auto;
  display: block;
  box-shadow:
    0 4px 16px rgba(14, 62, 41, 0.08),
    0 0 0 1px rgba(14, 62, 41, 0.05);
}

/* Rich text tables */
.template-article .ag-richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(14, 62, 41, 0.06);
}

.template-article .ag-richtext th {
  background: linear-gradient(135deg, #0e3e29, #1a5e3f) !important;
  color: #ffffff !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.template-article .ag-richtext td {
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid rgba(14, 62, 41, 0.08) !important;
  font-family: 'Crimson Text', Georgia, serif !important;
}

.template-article .ag-richtext tr:last-child td {
  border-bottom: none !important;
}

.template-article .ag-richtext tr:nth-child(even) {
  background: rgba(14, 62, 41, 0.02) !important;
}

/* ============================================================================
   ENHANCED STATS BOXES — Visual prominence with gradient backgrounds
   ============================================================================ */

.template-article .ag-richtext .ag-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.template-article .ag-richtext .ag-stats-box {
  background: linear-gradient(135deg, rgba(14, 62, 41, 0.95) 0%, rgba(30, 78, 50, 0.9) 100%);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(14, 62, 41, 0.15),
    0 0 0 1px rgba(246, 185, 0, 0.1);
}

.template-article .ag-richtext .ag-stats-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f6b900 0%, #e8a735 50%, #c9a227 100%);
}

.template-article .ag-richtext .ag-stats-number {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2.5rem, 8vw, 4rem) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #f6b900 !important;
  display: block;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.template-article .ag-richtext .ag-stats-box h4 {
  font-family: 'Work Sans', sans-serif !important;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
  margin: 0;
}

.template-article .ag-richtext .ag-stats-box p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.85rem, 1.3vw, 1rem) !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0.75rem 0 0;
}

/* ============================================================================
   ENHANCED PULL QUOTES — Letterpress-inspired treatment
   ============================================================================ */

.template-article .ag-richtext .ag-pullquote {
  position: relative;
  padding: 3rem 3rem 3rem 4rem !important;
  margin: 4rem 0 !important;
  background:
    linear-gradient(135deg, rgba(246, 185, 0, 0.08), rgba(232, 167, 53, 0.05)) !important;
  border-radius: 1rem !important;
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  color: #0e3e29 !important;
  text-align: center;
  box-shadow:
    0 8px 32px rgba(14, 62, 41, 0.08),
    inset 0 0 0 3px rgba(246, 185, 0, 0.1);
}

.template-article .ag-richtext .ag-pullquote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  font-family: 'Fraunces', serif !important;
  color: #f6b900;
  opacity: 0.2;
  line-height: 1;
}

.template-article .ag-richtext .ag-pullquote::after {
  content: '"';
  position: absolute;
  bottom: -1rem;
  right: 2rem;
  font-size: 5rem;
  font-family: 'Fraunces', serif !important;
  color: #f6b900;
  opacity: 0.2;
  line-height: 1;
}

/* ============================================================================
   ENHANCED SECTION CALLOUTS — "Four Principles" cards
   ============================================================================ */

.template-article .ag-richtext .ag-principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.template-article .ag-richtext .ag-principle-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9f6f0 100%);
  border: 1px solid rgba(14, 62, 41, 0.1);
  border-radius: 0.875rem;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(14, 62, 41, 0.06),
    0 0 0 1px rgba(14, 62, 41, 0.04);
}

.template-article .ag-richtext .ag-principle-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f6b900 0%, #e8a735 50%, #c9a227 100%);
}

.template-article .ag-richtext .ag-principle-card h3 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #0e3e29 !important;
  margin: 0 0 0.75rem 0 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.template-article .ag-richtext .ag-principle-card h3::before {
  content: '✦';
  color: #f6b900;
  font-size: 1.25rem;
}

.template-article .ag-richtext .ag-principle-card p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #4a4a4a !important;
  margin: 0;
}

/* ============================================================================
   ENHANCED "Continue Reading" SECTION
   ============================================================================ */

.template-article .ag-article__continue-reading {
  background: linear-gradient(180deg, rgba(14, 62, 41, 0.02) 0%, rgba(246, 185, 0, 0.03) 100%);
  border-radius: 1rem;
  padding: 2.5rem;
  margin: 4rem 0 2rem;
}

.template-article .ag-article__continue-reading h3 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #0e3e29 !important;
  text-align: center;
  margin: 0 0 2rem 0 !important;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.template-article .ag-article__continue-reading h3::before,
.template-article .ag-article__continue-reading h3::after {
  content: '—';
  color: #f6b900;
  margin: 0 1rem;
  opacity: 0.5;
}

.template-article .ag-article__continue-reading .ag-continue-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.template-article .ag-article__continue-reading .ag-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(14, 62, 41, 0.1);
  border-radius: 0.75rem;
  text-decoration: none !important;
  color: #0e3e29 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow:
    0 2px 8px rgba(14, 62, 41, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.template-article .ag-article__continue-reading .ag-continue-link:hover {
  background: linear-gradient(135deg, #f6b900 0%, #e8a735 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 16px rgba(246, 185, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   ARTICLE FOOTER — Elegant back navigation
   ============================================================================ */

.template-article .ag-article__footer {
  padding-top: 2rem;
  border-top: 1px solid rgba(14, 62, 41, 0.1);
  text-align: center;
}

.template-article .ag-article__footer .ag-button--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  color: #0e3e29 !important;
  background: linear-gradient(135deg, rgba(246, 185, 0, 0.1), rgba(232, 167, 53, 0.05)) !important;
  border: 1px solid rgba(246, 185, 0, 0.2) !important;
  box-shadow:
    0 2px 8px rgba(14, 62, 41, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.template-article .ag-article__footer .ag-button--ghost:hover {
  background: linear-gradient(135deg, rgba(246, 185, 0, 0.2), rgba(232, 167, 53, 0.12)) !important;
  border-color: rgba(246, 185, 0, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 16px rgba(246, 185, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ============================================================================
   RELATED ARTICLES — Specimen card grid
   ============================================================================ */

.template-article .ag-article__related {
  max-width: 1400px;
  margin: clamp(3rem, 8vw, 6rem) auto 0 !important;
  padding-top: clamp(3rem, 8vw, 6rem) !important;
  border-top: 1px solid rgba(14, 62, 41, 0.1) !important;
  position: relative;
}

/* Decorative watermark */
.template-article .ag-article__related::before {
  content: 'More';
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-family: 'Caveat', cursive;
  font-size: 6rem;
  color: rgba(14, 62, 41, 0.03);
  pointer-events: none;
  z-index: 0;
}

.template-article .ag-article__related-header {
  text-align: center;
  max-width: 42ch;
  margin: 0 auto 3rem !important;
  gap: 1rem !important;
  position: relative;
  z-index: 1;
}

.template-article .ag-article__related-header .ag-kicker {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.55rem, 3.2vw, 2.1rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-transform: none !important;
  color: #f6b900 !important;
}

.template-article .ag-article__related-header h2 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #0e3e29 !important;
}

/* Article cards with specimen card depth */
.template-article .ag-blog__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.template-article .ag-article-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem !important;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 50%, #f9f6f0 100%) !important;
  box-shadow:
    0 4px 16px rgba(14, 62, 41, 0.06),
    0 8px 32px rgba(14, 62, 41, 0.04),
    0 0 0 1px rgba(14, 62, 41, 0.05) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  height: 100%;
}

.template-article .ag-article-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 16px 40px rgba(14, 62, 41, 0.1),
    0 4px 12px rgba(14, 62, 41, 0.06),
    0 0 0 1px rgba(246, 185, 0, 0.15) !important;
}

.template-article .ag-article-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.template-article .ag-article-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-article .ag-article-card:hover .ag-article-card__image {
  transform: scale(1.08);
}

.template-article .ag-article-card__placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(246, 185, 0, 0.15), transparent 45%),
    linear-gradient(145deg, rgba(14, 62, 41, 0.08), rgba(14, 62, 41, 0.02));
}

.template-article .ag-article-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  flex: 1;
}

.template-article .ag-article-card__meta {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #737373 !important;
}

.template-article .ag-article-card__meta-dot {
  color: #f6b900 !important;
}

.template-article .ag-article-card h2,
.template-article .ag-article-card h3 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: #0e3e29 !important;
}

.template-article .ag-article-card h2 a,
.template-article .ag-article-card h3 a {
  text-decoration: none !important;
  color: inherit !important;
  transition: color 0.2s ease;
}

.template-article .ag-article-card:hover h2 a,
.template-article .ag-article-card:hover h3 a {
  color: #f6b900 !important;
}

.template-article .ag-article-card__excerpt {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #525252 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.template-article .ag-article-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  border-radius: 0.625rem;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #0e3e29, #1a5e3f) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    0 3px 10px rgba(14, 62, 41, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  margin-top: auto;
}

.template-article .ag-article-card__cta:hover {
  background: linear-gradient(135deg, #1a5e3f, #247a54) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 16px rgba(14, 62, 41, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   RESPONSIVE REFINEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  .template-article .ag-article {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem);
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .template-article .ag-article__header {
    padding-bottom: clamp(1.5rem, 4vw, 2rem);
  }

  .template-article .ag-article__header::before {
    width: 80px;
    height: 2px;
  }

  .template-article .ag-article__topics {
    gap: 0.5rem;
  }

  .template-article .ag-article__topics a {
    padding: 0.4rem 0.875rem;
    font-size: 0.65rem !important;
  }

  .template-article .ag-article__title {
    font-size: clamp(2rem, 6vw, 3rem) !important;
  }

  .template-article .ag-article__excerpt {
    font-size: clamp(1rem, 2.2vw, 1.15rem) !important;
  }

  .template-article .ag-article__meta {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.875rem;
    gap: 0.5rem;
  }

  .template-article .ag-richtext {
    font-size: clamp(1rem, 2.2vw, 1.1rem) !important;
    line-height: 1.7 !important;
  }

  .template-article .ag-richtext h2 {
    font-size: clamp(1.4rem, 3.5vw, 1.75rem) !important;
  }

  .template-article .ag-richtext h3 {
    font-size: clamp(1.2rem, 3vw, 1.45rem) !important;
  }

  .template-article .ag-richtext blockquote {
    padding: 1.5rem 1.25rem !important;
    margin: 2rem 0 !important;
    font-size: clamp(1.15rem, 2.8vw, 1.4rem) !important;
  }

  .template-article .ag-richtext blockquote::before {
    font-size: 3rem;
    top: -0.25rem;
    left: 0.5rem;
  }

  .template-article .ag-article__related {
    margin-top: clamp(2rem, 6vw, 3rem) !important;
    padding-top: clamp(2rem, 6vw, 3rem) !important;
  }

  .template-article .ag-article__related::before {
    font-size: 4rem;
    top: 1rem;
    right: 1rem;
  }

  .template-article .ag-blog__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .template-article .ag-article-card {
    border-radius: 0.75rem !important;
  }

  .template-article .ag-article-card__content {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  .template-article .ag-article-card h2,
  .template-article .ag-article-card h3 {
    font-size: 1.15rem !important;
  }

  .template-article .ag-article-card__excerpt {
    font-size: 0.9rem !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* ============================================================================
   ACCESSIBILITY — Focus states
   ============================================================================ */

.template-article .ag-article__topics a:focus-visible,
.template-article .ag-article-card__cta:focus-visible,
.template-article .ag-article__footer .ag-button--ghost:focus-visible,
.template-article .ag-richtext a:focus-visible {
  outline: 2px solid #f6b900 !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ============================================================================
   MOTION PREFERENCES — Reduced motion support
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

  .template-article .ag-article,
  .template-article .ag-article-card,
  .template-article .ag-article__media,
  .template-article .ag-button,
  .template-article .ag-article__topics a,
  .template-article .ag-article-card__image,
  .template-article .ag-article-card__cta,
  .template-article .ag-article__footer .ag-button--ghost {
    transition: none !important;
  }

  .template-article .ag-article-card:hover,
  .template-article .ag-article__media:hover,
  .template-article .ag-article__topics a:hover,
  .template-article .ag-article-card__cta:hover,
  .template-article .ag-article__footer .ag-button--ghost:hover {
    transform: none !important;
  }
}

/* ============================================================================
   IMPORTED ARTICLE POLISH — Enhancements for Next.js migrated content
   ============================================================================ */

/* Enhanced stats boxes - dark green with golden accents */
.template-article .ag-imported-article-shell .bg-gradient-to-br,
.template-article .agriko-imported-article[class*="bg-gradient"] {
  box-shadow:
    0 8px 32px rgba(14, 62, 41, 0.15),
    0 0 0 1px rgba(246, 185, 0, 0.1) !important;
}

/* Enhance stat number typography */
.template-article .agriko-imported-article .text-5xl,
.template-article .agriko-imported-article .text-6xl,
.template-article .agriko-imported-article .text-7xl {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Polish the "What We Never Use" / "What We Build Instead" comparison cards */
.template-article .agriko-imported-article .grid>div {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.template-article .agriko-imported-article .grid>div:hover {
  transform: translateY(-2px) !important;
}

/* Enhance "Four Principles" cards */
.template-article .agriko-imported-article section[class*="grid"]>div {
  backdrop-filter: blur(8px) !important;
}

/* Enhanced "Continue Reading" internal links section */
.template-article .agriko-imported-article a[class*="hover:"] {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Add subtle ambient glow to hero image */
.template-article .ag-imported-article-shell img:first-of-type {
  box-shadow:
    0 20px 60px rgba(14, 62, 41, 0.15),
    0 0 0 1px rgba(14, 62, 41, 0.05) !important;
}

/* Enhance section dividers */
.template-article .agriko-imported-article [class*="border"][class*="cream"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 -1px 0 rgba(14, 62, 41, 0.03);
}

/* Polish for embedded emoji icons */
.template-article .agriko-imported-article .text-2xl {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Enhance card hover states across the article */
.template-article .agriko-imported-article .card,
.template-article .agriko-imported-article [class*="rounded"][class*="shadow"] {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.template-article .agriko-imported-article .card:hover,
.template-article .agriko-imported-article [class*="rounded"][class*="shadow"]:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 16px 40px rgba(14, 62, 41, 0.12),
    0 0 0 1px rgba(246, 185, 0, 0.15) !important;
}

/* Enhance quote typography */
.template-article .agriko-imported-article blockquote,
.template-article .agriko-imported-article [class*="italic"][class*="text"] {
  line-height: 1.6 !important;
}

/* Add visual rhythm to list items */
.template-article .agriko-imported-article li {
  margin-bottom: 0.75em !important;
}

/* Polish heading hierarchy */
.template-article .agriko-imported-article h2 {
  text-shadow: 0 1px 2px rgba(14, 62, 41, 0.05);
}

.template-article .agriko-imported-article h3 {
  text-shadow: 0 1px 1px rgba(14, 62, 41, 0.03);
}

/* ============================================================================
   PRINT OPTIMIZATIONS
   ============================================================================ */

@media print {
  .template-article .ag-article {
    background: none;
    padding: 0;
  }

  .template-article .ag-article__header::before,
  .template-article .ag-article__related::before {
    display: none;
  }

  .template-article .ag-article__media {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .template-article .ag-article-card {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  .template-article .ag-article__footer,
  .template-article .ag-article__related {
    page-break-before: always;
  }
}

/* ============================================================================
   END OF ARTICLE EDITORIAL MASTERPIECE
   ============================================================================ */


/* ============================================
   imported-article-herbarium-masterpiece.css
   ============================================ */

/* ============================================================================
   AGRIKO IMPORTED ARTICLES — HERBARIUM MASTERPIECE
   Bold editorial redesign for imported Next.js articles

   Aesthetic Direction: Herbarium Specimen Book
   - Tactile paper textures and pressed botanical aesthetics
   - Dramatic typographic hierarchy with unexpected scale
   - Warm, aged paper tones with golden hour accents
   - Floating herb cards with specimen case depth
   - Handwritten marginalia accents

   ============================================================================ */

/* ============================================================================
   SHELL AMBIENCE — Warm herbarium atmosphere
   ============================================================================ */

.template-article {
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter></defs><rect width="100%" height="100%" filter="url(%23n)" opacity="0.03"/></svg>'),
    linear-gradient(180deg,
      #f7f3eb 0%,
      #f2ede4 20%,
      #f0ebe3 50%,
      #f4efe6 80%,
      #f7f4ed 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.template-article .ag-imported-article-shell {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================================
   IMPORTED ARTICLE BODY — Herbarium book aesthetic
   ============================================================================ */

.template-article .agriko-imported-article {
  font-family: 'Crimson Text', Georgia, serif !important;
  color: #1a1a1a !important;
  line-height: 1.7 !important;
}

/* ============================================================================
   HERO SECTION — Dramatic botanical opening
   ============================================================================ */

.template-article .agriko-imported-article>div:first-child {
  position: relative;
  min-height: 85vh;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4rem);
  background:
    radial-gradient(ellipse at 20% 30%, rgba(246, 185, 0, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(14, 62, 41, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, rgba(247, 243, 235, 0.9), rgba(242, 237, 228, 0.95));
  overflow: hidden;
}

/* Decorative botanical watermark */
.template-article .agriko-imported-article>div:first-child::before {
  content: 'HERBARIUM';
  position: absolute;
  top: 5%;
  right: -5%;
  font-family: 'Caveat', cursive;
  font-size: clamp(8rem, 20vw, 25rem);
  color: rgba(14, 62, 41, 0.025);
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}

.template-article .agriko-imported-article>div:first-child>div:first-child {
  position: relative;
  z-index: 10;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Kicker/eyebrow */
.template-article .agriko-imported-article>div:first-child .text-amber-600,
.template-article .agriko-imported-article>div:first-child .font-semibold {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #c9a227 !important;
  margin-bottom: 1rem;
  display: block;
}

/* Main title */
.template-article .agriko-imported-article>div:first-child h1,
.template-article .agriko-imported-article>div:first-child .text-forest-900 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2.75rem, 7vw, 5rem) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  color: #0e3e29 !important;
  margin-bottom: 2rem;
  text-shadow: 0 2px 8px rgba(14, 62, 41, 0.08);
}

/* Author/meta line */
.template-article .agriko-imported-article>div:first-child [class~="text-ink-500/90"],
.template-article .agriko-imported-article>div:first-child .mt-2 {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #737373 !important;
}

/* ============================================================================
   HERO IMAGE — Museum specimen frame
   ============================================================================ */

.template-article .ag-imported-featured-image {
  position: relative;
  max-width: 1400px;
  margin: -4rem auto 0 !important;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  z-index: 20;
}

.template-article .ag-imported-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow:
    0 20px 60px rgba(14, 62, 41, 0.15),
    0 8px 24px rgba(14, 62, 41, 0.1),
    0 0 0 1px rgba(14, 62, 41, 0.08),
    inset 0 0 0 12px #ffffff,
    inset 0 0 0 13px rgba(14, 62, 41, 0.05);
  background: #ffffff;
}

/* ============================================================================
   INTRO SECTION — Editorial lead
   ============================================================================ */

.template-article .agriko-imported-article>div>div:has(.prose) {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
}

.template-article .agriko-imported-article .prose {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem) !important;
  line-height: 1.85 !important;
  color: #2a2a2a !important;
}

.template-article .agriko-imported-article .prose p {
  margin-bottom: 1.75em !important;
}

.template-article .agriko-imported-article .prose strong {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  color: #0e3e29 !important;
}

/* ============================================================================
   RATIO CARDS — Specimen case presentation
   ============================================================================ */

.template-article .grid-cols-1.md\:grid-cols-3,
.template-article .md\:grid-cols-3 {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  grid-template-columns: 1fr !important;
  max-width: 1200px;
  margin: clamp(3rem, 8vw, 5rem) auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {

  .template-article .grid-cols-1.md\:grid-cols-3,
  .template-article .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Individual ratio cards */
.template-article .card-premium-soft,
.template-article .bg-white {
  background: linear-gradient(145deg,
      #ffffff 0%,
      #fdfbf8 40%,
      #f9f6f0 100%) !important;
  border-radius: 1.25rem !important;
  padding: clamp(2rem, 5vw, 3rem) !important;
  border: 1px solid rgba(14, 62, 41, 0.08) !important;
  box-shadow:
    0 8px 32px rgba(14, 62, 41, 0.06),
    0 2px 8px rgba(14, 62, 41, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Decorative corner accent */
.template-article .card-premium-soft::before,
.template-article .bg-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      #0e3e29 0%,
      #f6b900 33%,
      #e8a735 66%,
      #c9a227 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.template-article .card-premium-soft:hover::before,
.template-article .bg-white:hover::before {
  opacity: 1;
}

.template-article .card-premium-soft:hover,
.template-article .bg-white:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 50px rgba(14, 62, 41, 0.12),
    0 8px 20px rgba(14, 62, 41, 0.08),
    0 0 0 1px rgba(246, 185, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Percentage badges */
.template-article .text-6xl,
.template-article .text-5xl {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(3.5rem, 8vw, 5rem) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  background: linear-gradient(135deg, #0e3e29, #1a5e3f) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Category labels */
.template-article .uppercase {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #f6b900 !important;
  margin-bottom: 1rem !important;
}

/* Card headings */
.template-article .card-premium-soft h3,
.template-article .bg-white h3,
.template-article .text-2xl {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #0e3e29 !important;
  margin-bottom: 1rem !important;
}

/* Card descriptions */
.template-article .card-premium-soft p,
.template-article .bg-white p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  line-height: 1.7 !important;
  color: #525252 !important;
  margin-bottom: 0.5rem !important;
}

/* Herb lists */
.template-article .card-premium-soft ul,
.template-article .bg-white ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 !important;
}

.template-article .card-premium-soft li,
.template-article .bg-white li {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1rem, 2.2vw, 1.1rem) !important;
  line-height: 1.8 !important;
  color: #0e3e29 !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px dashed rgba(14, 62, 41, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.template-article .card-premium-soft li:last-child,
.template-article .bg-white li:last-child {
  border-bottom: none !important;
}

/* Bullet points as leaf accents */
.template-article .card-premium-soft li::before,
.template-article .bg-white li::before {
  content: '🌿';
  font-size: 0.9rem !important;
}

/* ============================================================================
   BLEND RECIPES — Botanical recipe cards
   ============================================================================ */

.template-article .md\:grid-cols-2,
.template-article .grid-cols-1.md\:grid-cols-2,
.template-article .lg\:grid-cols-2 {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  grid-template-columns: 1fr !important;
  max-width: 1000px;
  margin: clamp(3rem, 8vw, 5rem) auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {

  .template-article .md\:grid-cols-2,
  .template-article .grid-cols-1.md\:grid-cols-2,
  .template-article .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Blend card special styling */
.template-article .section-cream-b,
.template-article .bg-gradient-to-b {
  background: linear-gradient(145deg,
      rgba(244, 239, 230, 0.6) 0%,
      rgba(248, 243, 234, 0.8) 50%,
      rgba(243, 238, 230, 0.6) 100%) !important;
  border-radius: 1.25rem !important;
  padding: clamp(2rem, 5vw, 3rem) !important;
  border: 1px solid rgba(14, 62, 41, 0.08) !important;
  box-shadow:
    0 8px 32px rgba(14, 62, 41, 0.06),
    0 2px 8px rgba(14, 62, 41, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  position: relative;
  overflow: hidden;
}

/* Blend name badges */
.template-article .inline-flex-center {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-weight: 600 !important;
  color: #f6b900 !important;
  padding: 0.5rem 1.5rem !important;
  background: rgba(14, 62, 41, 0.04) !important;
  border-radius: 999px !important;
  margin-bottom: 1.5rem !important;
}

/* Blend heading */
.template-article .text-3xl {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #0e3e29 !important;
  margin-bottom: 1rem !important;
}

/* Blend description */
.template-article .text-ink-600 {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  line-height: 1.7 !important;
  color: #525252 !important;
  margin-bottom: 1.5rem !important;
}

/* Ingredient bars */
.template-article .w-full,
.template-article .bg-forest-900 {
  background: linear-gradient(90deg,
      #0e3e29 0%,
      #1a5e3f 50%,
      #247a54 100%) !important;
  border-radius: 0.5rem !important;
  padding: 0.875rem 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

.template-article .text-white {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ============================================================================
   HERB REFERENCE CARDS — Botanical field guide style
   ============================================================================ */

/* Full width section for herb cards */
.template-article .sm\:py-18,
.template-article .md\:py-22 {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem) !important;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(246, 185, 0, 0.05) 0%, transparent 40%),
    linear-gradient(180deg,
      rgba(247, 243, 235, 0.5) 0%,
      rgba(242, 237, 228, 0.3) 100%);
  border-top: 1px solid rgba(14, 62, 41, 0.08);
  border-bottom: 1px solid rgba(14, 62, 41, 0.08);
}

/* Section heading */
.template-article .section-cream-b h2,
.template-article .text-4xl {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: #0e3e29 !important;
  text-align: center !important;
  margin-bottom: clamp(2rem, 5vw, 4rem) !important;
}

/* Herb reference grid */
.template-article .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3,
.template-article .sm\:grid-cols-2 {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  grid-template-columns: 1fr !important;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 640px) {

  .template-article .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3,
  .template-article .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .template-article .grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Individual herb cards */
.template-article .card-premium-soft.p-6 {
  text-align: center;
}

/* Herb name */
.template-article .text-xl {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.35rem, 3vw, 1.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #0e3e29 !important;
  margin-bottom: 0.5rem !important;
}

/* Character badges */
.template-article .text-forest-800 {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0e3e29 !important;
  display: inline-block !important;
  padding: 0.35rem 0.875rem !important;
  background: rgba(14, 62, 41, 0.06) !important;
  border-radius: 999px !important;
  margin-bottom: 1rem !important;
}

/* Herb detail lists */
.template-article .text-ink-800 {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.9rem, 2vw, 1rem) !important;
  line-height: 1.7 !important;
  color: #2a2a2a !important;
}

/* ============================================================================
   BREWING INSTRUCTIONS — Step-by-step ritual
   ============================================================================ */

.template-article .grid-cols-1.md\:grid-cols-4,
.template-article .md\:grid-cols-4 {
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  grid-template-columns: 1fr !important;
  max-width: 1000px;
  margin: clamp(3rem, 8vw, 5rem) auto !important;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {

  .template-article .grid-cols-1.md\:grid-cols-4,
  .template-article .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Step cards */
.template-article .text-center.p-6 {
  text-align: center;
  position: relative;
}

/* Step numbers */
.template-article .text-5xl.text-forest-900,
.template-article .text-forest-900 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, #f6b900, #e8a735) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 1rem !important;
}

/* Step titles */
.template-article .font-semibold.text-lg {
  font-family: 'Work Sans', sans-serif !important;
  font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #0e3e29 !important;
  margin-bottom: 0.75rem !important;
}

/* Step descriptions */
.template-article .text-ink-600.text-sm {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
  line-height: 1.6 !important;
  color: #525252 !important;
}

/* ============================================================================
   MINDFUL NOTE — Special callout box
   ============================================================================ */

.template-article [class~="bg-cream-50/60"],
.template-article .bg-amber-50 {
  background:
    linear-gradient(135deg,
      rgba(246, 185, 0, 0.08) 0%,
      rgba(232, 167, 53, 0.05) 100%) !important;
  border-left: 4px solid #f6b900 !important;
  border-radius: 0 1rem 1rem 0 !important;
  padding: clamp(1.5rem, 4vw, 2.5rem) !important;
  margin: clamp(2rem, 5vw, 4rem) auto !important;
  max-width: 680px;
  position: relative;
}

/* Decorative quote mark */
.template-article [class~="bg-cream-50/60"]::before,
.template-article .bg-amber-50::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: 1rem;
  font-family: 'Fraunces', serif !important;
  font-size: 5rem;
  color: #f6b900;
  opacity: 0.3;
  line-height: 1;
}

/* ============================================================================
   TIPS SECTIONS — Three pillars layout
   ============================================================================ */

.template-article .grid-cols-1.md\:grid-cols-3.gap-8,
.template-article .gap-8 {
  gap: clamp(2rem, 5vw, 3rem) !important;
}

/* Tip cards */
.template-article .text-forest-900.text-xl.mb-3 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: #0e3e29 !important;
  margin-bottom: 1rem !important;
}

/* Tip bullet lists */
.template-article .space-y-2 li {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  line-height: 1.8 !important;
  color: #2a2a2a !important;
  padding: 0.35rem 0 !important;
}

.template-article .space-y-2 li::before {
  content: '—';
  color: #f6b900;
  margin-right: 0.5rem;
}

/* ============================================================================
   FINAL THOUGHT — Closing message
   ============================================================================ */

.template-article .section-cream-b .text-2xl.text-forest-900 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  color: #0e3e29 !important;
  text-align: center !important;
  max-width: 36ch;
  margin: 0 auto 2rem !important;
  font-style: italic !important;
}

/* ============================================================================
   CTA SECTION — Final call to action
   ============================================================================ */

.template-article .section-cream-b>div>div:last-child {
  text-align: center;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid rgba(14, 62, 41, 0.1);
}

.template-article .section-cream-b h3:last-of-type {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 600 !important;
  color: #0e3e29 !important;
  margin-bottom: 0.5rem !important;
}

.template-article .section-cream-b p:last-of-type {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  line-height: 1.6 !important;
  color: #525252 !important;
  margin-bottom: 1.5rem !important;
}

/* ============================================================================
   SECTION DIVIDERS — Elegant breaks
   ============================================================================ */

.template-article .section-divider-subtle {
  border: none !important;
  height: 1px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(14, 62, 41, 0.15) 20%,
      rgba(14, 62, 41, 0.15) 80%,
      transparent 100%) !important;
  margin: clamp(3rem, 8vw, 6rem) auto !important;
  max-width: 400px;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
  .template-article .ag-imported-featured-image {
    margin-top: -2rem !important;
    padding: 0 1rem !important;
  }

  .template-article .ag-imported-featured-image img {
    border-radius: 0.75rem !important;
    box-shadow: inset 0 0 0 8px #ffffff,
      inset 0 0 0 9px rgba(14, 62, 41, 0.05) !important;
  }

  .template-article .card-premium-soft,
  .template-article .bg-white {
    padding: 1.5rem !important;
  }

  .template-article .text-6xl,
  .template-article .text-5xl {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
  }
}

/* ============================================================================
   MOTION PREFERENCES
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

  .template-article .card-premium-soft,
  .template-article .bg-white,
  .template-article .card-premium-soft:hover,
  .template-article .bg-white:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================================
   END OF IMPORTED ARTICLE HERBARIUM MASTERPIECE
   ============================================================================ */


/* ============================================
   organic-farming-editorial.css
   ============================================ */

/* ============================================================================
   WHAT IS ORGANIC FARMING? - HERITAGE AGRICULTURAL JOURNAL DESIGN
   Premium editorial aesthetic with botanical field guide inspiration

   Design Philosophy:
   - Heritage agricultural journal meets modern editorial
   - Warm parchment tones with golden wheat accents
   - Letterpress typography with decorative flourishes
   - Specimen card styling for interactive elements
   - Vintage field diagram aesthetic for stats
   - Organic botanical shapes and textures

   Color Palette:
   - Forest Green: #1A3A2A (primary)
   - Golden Wheat: #D4A574, #C9A227 (accent)
   - Parchment: #FAF7F2, #F5F1E8 (backgrounds)
   - Warm Earth: #8B7355, #6B5B4F (text)
   - Cream: #FFFEF9 (highlights)

   ============================================================================ */

/* ============================================================================
   AMBIENT BACKGROUND - Warm parchment with subtle grain
   ============================================================================ */

.template-article .agriko-imported-article,
.template-article .ag-imported-article-shell {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #FAF7F2 0%, #F5F1E8 50%, #F2EDE4 100%) !important;
  position: relative;
}

/* ============================================================================
   HERO SECTION - Editorial magazine header
   ============================================================================ */

/* Hero image with cinematic treatment */
.template-article .agriko-imported-article>div:first-child>img:first-of-type,
.template-article .ag-imported-article-shell img[src*="organic-farm"] {
  position: relative;
  filter: brightness(1.05) contrast(1.08) saturate(1.1);
}

.template-article .agriko-imported-article>div:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, #FAF7F2, transparent);
  pointer-events: none;
}

/* Eyebrow with Caveat handwriting */
.template-article .agriko-imported-article p:has(+ h1) {
  font-family: 'Caveat', 'Cormorant Garamond', cursive !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #C9A227 !important;
  text-transform: none !important;
  margin-bottom: 0.5rem !important;
  position: relative;
  display: inline-block;
}

.template-article .agriko-imported-article p:has(+ h1)::before {
  content: '✦';
  margin-right: 0.5rem;
  color: #D4A574;
  font-size: 0.8em;
}

/* Main title with editorial typography */
.template-article .agriko-imported-article h1:first-of-type {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.5rem, 7vw, 4.5rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: #1A3A2A !important;
  margin-bottom: 1.5rem !important;
  position: relative;
}

/* Decorative underline for title */
.template-article .agriko-imported-article h1:first-of-type::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #C9A227 0%, #D4A574 50%, transparent 100%);
}

/* Meta info styling */
.template-article .agriko-imported-article>div:first-child>div:has(span):has(span) {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6B5B4F !important;
  margin-bottom: 2rem !important;
}

.template-article .agriko-imported-article>div:first-child>div:has(span) span {
  position: relative;
}

.template-article .agriko-imported-article>div:first-child>div:has(span) span:not(:last-child)::after {
  content: '•';
  margin-left: 1rem;
  color: #D4A574;
}

/* ============================================================================
   FEATURED IMAGE - Frame with botanical border
   ============================================================================ */

.template-article .agriko-imported-article img[src*="featured"],
.template-article .agriko-imported-article>div:first-child>img:last-of-type {
  border-radius: 1rem;
  box-shadow:
    0 8px 32px rgba(26, 58, 42, 0.12),
    0 0 0 1px rgba(26, 58, 42, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
}

/* ============================================================================
   PULL QUOTES - Letterpress style with decorative marks
   ============================================================================ */

.template-article .agriko-imported-article blockquote,
.template-article .agriko-imported-article complementary {
  position: relative;
  padding: 3rem 3rem 3rem 4rem !important;
  margin: 3rem 0 !important;
  background:
    linear-gradient(135deg, rgba(201, 154, 39, 0.08) 0%, rgba(212, 165, 116, 0.05) 100%) !important;
  border-left: 4px solid #C9A227 !important;
  border-radius: 0.5rem 1rem 1rem 0.5rem !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.35rem, 3vw, 1.85rem) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #1A3A2A !important;
  box-shadow:
    0 4px 16px rgba(26, 58, 42, 0.08),
    inset 0 0 0 1px rgba(201, 154, 39, 0.1);
}

/* Decorative opening quote mark */
.template-article .agriko-imported-article blockquote::before,
.template-article .agriko-imported-article complementary::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 1.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 5rem;
  font-weight: 300 !important;
  color: #C9A227;
  opacity: 0.25;
  line-height: 1;
}

/* ============================================================================
   SECTION HEADINGS - Editorial typography with botanical accents
   ============================================================================ */

.template-article .agriko-imported-article h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  color: #1A3A2A !important;
  margin-top: 3rem !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  display: inline-block;
}

/* Botanical accent for H2 */
.template-article .agriko-imported-article h2::before {
  content: '🌿';
  position: absolute;
  left: -2rem;
  top: 0;
  font-size: 1.5rem;
  opacity: 0.5;
}

.template-article .agriko-imported-article h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(1.35rem, 3vw, 1.75rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: #2D4A3A !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

.template-article .agriko-imported-article h4 {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #1A3A2A !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* ============================================================================
   COMPARISON SECTIONS - "What We Never Use" vs "What We Build Instead"
   ============================================================================ */

.template-article .agriko-imported-article>div:has(> div:has(> p:has(+ ul))) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.template-article .agriko-imported-article>div>div:has(> p:has(+ ul)) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
  border: 1px solid rgba(26, 58, 42, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(26, 58, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-article .agriko-imported-article>div>div:has(> p:has(+ ul)):hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 28px rgba(26, 58, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Card header bar */
.template-article .agriko-imported-article>div>div:has(> p:has(+ ul))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C9A227 0%, #D4A574 50%, #8B7355 100%);
}

/* Section label */
.template-article .agriko-imported-article>div>div>p:first-child {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #C9A227 !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  padding-bottom: 1rem;
}

.template-article .agriko-imported-article>div>div>p:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: rgba(201, 154, 39, 0.3);
}

/* List styling */
.template-article .agriko-imported-article li {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #4A4A4A !important;
  margin-bottom: 1rem !important;
  padding-left: 1.5rem !important;
  position: relative;
}

.template-article .agriko-imported-article li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #D4A574;
  font-weight: 300;
}

.template-article .agriko-imported-article li strong {
  font-weight: 600 !important;
  color: #1A3A2A !important;
}

/* ============================================================================
   FOUR PRINCIPLES - Botanical card grid
   ============================================================================ */

.template-article .agriko-imported-article>div:has(> div:has(> h3:has(+ p))) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.template-article .agriko-imported-article>div>div:has(> h3:has(+ p)) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F5F0 100%);
  border: 1px solid rgba(26, 58, 42, 0.12);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(26, 58, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-article .agriko-imported-article>div>div:has(> h3:has(+ p)):hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 32px rgba(26, 58, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(201, 154, 39, 0.2);
}

/* Botanical corner decoration */
.template-article .agriko-imported-article>div>div:has(> h3:has(+ p))::before {
  content: '✦';
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: #C9A227;
  opacity: 0.2;
}

/* Top accent bar */
.template-article .agriko-imported-article>div>div:has(> h3:has(+ p))::after {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, #C9A227, transparent);
}

/* Principle heading */
.template-article .agriko-imported-article>div>div h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1A3A2A !important;
  margin: 0 0 1rem 0 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.template-article .agriko-imported-article>div>div h3::before {
  content: '◆';
  color: #C9A227;
  font-size: 0.75rem;
}

/* ============================================================================
   STATS BOXES - Vintage field diagram aesthetic
   ============================================================================ */

.template-article .agriko-imported-article>div:has(> div:has(> div:has(+ div))) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.template-article .agriko-imported-article>div>div:has(> div:has(+ div)) {
  background: linear-gradient(145deg, #1A3A2A 0%, #2D4A3A 100%);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(26, 58, 42, 0.2),
    inset 0 0 0 1px rgba(201, 154, 39, 0.1);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-article .agriko-imported-article>div>div:has(> div:has(+ div)):hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px rgba(26, 58, 42, 0.25),
    inset 0 0 0 1px rgba(201, 154, 39, 0.2);
}

/* Golden top border */
.template-article .agriko-imported-article>div>div:has(> div:has(+ div))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C9A227 0%, #D4A574 50%, #C9A227 100%);
}

/* Specimen label watermark */
.template-article .agriko-imported-article>div>div:has(> div:has(+ div))::after {
  content: 'DATA';
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: rgba(255, 255, 255, 0.1);
}

/* Stat number */
.template-article .agriko-imported-article>div>div>div:first-child {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #C9A227 !important;
  margin-bottom: 0.5rem !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Stat heading */
.template-article .agriko-imported-article>div>div h4 {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin: 0.5rem 0 0.5rem 0 !important;
}

/* Stat description */
.template-article .agriko-imported-article>div>div p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem) !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 !important;
}

/* ============================================================================
   "THE THREE-YEAR WAIT" CALLOUT - Featured inset box
   ============================================================================ */

.template-article .agriko-imported-article h4+p {
  background: linear-gradient(135deg, rgba(201, 154, 39, 0.1) 0%, rgba(212, 165, 116, 0.08) 100%);
  border-left: 4px solid #C9A227;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.5rem;
  margin: 1rem 0;
  font-family: 'Crimson Text', Georgia, serif !important;
  font-style: italic !important;
  color: #2D4A3A !important;
  box-shadow: inset 0 0 20px rgba(201, 154, 39, 0.05);
}

/* ============================================================================
   CONTINUE READING SECTION - Card-style links
   ============================================================================ */

.template-article .agriko-imported-article>div:has(> h3:has(+ div > a)) {
  background: linear-gradient(180deg, rgba(26, 58, 42, 0.02) 0%, rgba(201, 154, 39, 0.03) 100%);
  border-radius: 1rem;
  padding: 2.5rem;
  margin: 4rem 0 2rem;
  border: 1px solid rgba(26, 58, 42, 0.08);
}

.template-article .agriko-imported-article>div>h3:has(+ div > a) {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: #1A3A2A !important;
  text-align: center !important;
  margin: 0 0 2rem 0 !important;
  position: relative;
}

/* Decorative lines around heading */
.template-article .agriko-imported-article>div>h3:has(+ div > a)::before,
.template-article .agriko-imported-article>div>h3:has(+ div > a)::after {
  content: '—';
  color: #C9A227;
  margin: 0 1rem;
  opacity: 0.5;
}

/* Continue reading links */
.template-article .agriko-imported-article a[href*="/blog/"],
.template-article .agriko-imported-article a[href*="/guides/"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: #FFFFFF;
  border: 1px solid rgba(26, 58, 42, 0.1);
  border-radius: 0.75rem;
  text-decoration: none !important;
  color: #1A3A2A !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 2px 8px rgba(26, 58, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.template-article .agriko-imported-article a[href*="/blog/"]:hover,
.template-article .agriko-imported-article a[href*="/guides/"]:hover {
  background: linear-gradient(135deg, #C9A227 0%, #D4A574 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(201, 154, 39, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.template-article .agriko-imported-article a[href*="/blog/"] span,
.template-article .agriko-imported-article a[href*="/guides/"] span {
  font-weight: 600 !important;
}

/* ============================================================================
   PARAGRAPH STYLING - Editorial body text
   ============================================================================ */

.template-article .agriko-imported-article p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1rem, 2.2vw, 1.15rem) !important;
  line-height: 1.8 !important;
  color: #2A2A2A !important;
  margin-bottom: 1.5rem !important;
}

/* Lead paragraph styling */
.template-article .agriko-imported-article>div:nth-child(2)>p:first-of-type {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem) !important;
  line-height: 1.7 !important;
  color: #1A3A2A !important;
}

/* ============================================================================
   CTA SECTION - "Taste the difference yourself"
   ============================================================================ */

.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"]) {
  background: linear-gradient(135deg, #1A3A2A 0%, #2D4A3A 100%);
  border-radius: 1.5rem;
  padding: 3rem;
  text-align: center;
  margin: 4rem 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(26, 58, 42, 0.15);
}

/* Decorative wheat pattern */
.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"])::before {
  content: '🌾';
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 3rem;
  opacity: 0.1;
}

.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"])::after {
  content: '🌾';
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-size: 3rem;
  opacity: 0.1;
}

.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"]) h2 {
  color: #FFFFFF !important;
  margin-top: 0 !important;
}

.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"]) p {
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 40rem;
  margin-left: auto !important;
  margin-right: auto !important;
}

.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"]) a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #C9A227 0%, #D4A574 100%);
  color: #1A3A2A !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  border-radius: 9999px;
  box-shadow:
    0 4px 16px rgba(201, 154, 39, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-article .agriko-imported-article>div:has(> h2 + p + a[href*="/products"]) a:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 8px 24px rgba(201, 154, 39, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   RELATED ARTICLES - Magazine grid
   ============================================================================ */

.template-article .agriko-imported-article~div:has(> p + div > a) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
  border-radius: 1rem;
  padding: 2.5rem;
  margin-top: 4rem;
  border: 1px solid rgba(26, 58, 42, 0.08);
}

.template-article .agriko-imported-article~div>p:first-child {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #C9A227 !important;
  margin-bottom: 2rem !important;
}

.template-article .agriko-imported-article~div div {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .template-article .agriko-imported-article~div div {
    grid-template-columns: repeat(3, 1fr);
  }
}

.template-article .agriko-imported-article~div a {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 1px solid rgba(26, 58, 42, 0.08);
  border-radius: 0.75rem;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 2px 8px rgba(26, 58, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.template-article .agriko-imported-article~div a:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 28px rgba(26, 58, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(201, 154, 39, 0.2);
}

.template-article .agriko-imported-article~div a h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #1A3A2A !important;
  margin: 0 0 0.75rem 0 !important;
}

.template-article .agriko-imported-article~div a p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #5A5A5A !important;
  margin: 0 !important;
}

/* ============================================================================
   WHEAT DIVIDER - Decorative section separator
   ============================================================================ */

.template-article .agriko-imported-article>div:has(> h2) {
  position: relative;
}

.template-article .agriko-imported-article>div:has(> h2)::before {
  content: '⚸ ✦ ⚸';
  display: block;
  text-align: center;
  color: #C9A227;
  opacity: 0.3;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  letter-spacing: 1rem;
}

/* ============================================================================
   INTERNAL LINKS REGION - Continue Reading footer
   ============================================================================ */

.template-article .agriko-imported-article~region {
  background: linear-gradient(180deg, #FAF7F2 0%, #F5F1E8 100%);
  border-radius: 1rem;
  padding: 3rem;
  margin-top: 3rem;
  border: 1px solid rgba(26, 58, 42, 0.08);
  position: relative;
  overflow: hidden;
}

/* Decorative watermark */
.template-article .agriko-imported-article~region::before {
  content: 'CONTINUE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 8rem;
  font-weight: 700 !important;
  color: rgba(26, 58, 42, 0.02);
  pointer-events: none;
  white-space: nowrap;
}

.template-article .agriko-imported-article~region>div>h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: #1A3A2A !important;
  text-align: center !important;
  margin: 0 0 1rem 0 !important;
  position: relative;
  z-index: 1;
}

.template-article .agriko-imported-article~region>div>p {
  text-align: center !important;
  color: #6B5B4F !important;
  margin-bottom: 2rem !important;
  position: relative;
  z-index: 1;
}

/* Topic sections */
.template-article .agriko-imported-article~region>div>div:has(> h3) {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.template-article .agriko-imported-article~region h3 {
  font-family: 'Jost', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #C9A227 !important;
  margin-bottom: 1rem !important;
}

/* Link lists */
.template-article .agriko-imported-article~region ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.template-article .agriko-imported-article~region li {
  margin-bottom: 0.75rem !important;
  padding-left: 0 !important;
}

.template-article .agriko-imported-article~region li::before {
  content: none !important;
}

.template-article .agriko-imported-article~region li a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(26, 58, 42, 0.08);
  border-radius: 0.5rem;
  text-decoration: none !important;
  color: #1A3A2A !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 2px 6px rgba(26, 58, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.template-article .agriko-imported-article~region li a:hover {
  background: linear-gradient(135deg, #C9A227 0%, #D4A574 100%) !important;
  color: #FFFFFF !important;
  transform: translateX(4px);
  box-shadow:
    0 6px 16px rgba(201, 154, 39, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.template-article .agriko-imported-article~region li a span:first-child {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
  .template-article .agriko-imported-article h2::before {
    position: static;
    display: block;
    margin-bottom: 0.5rem;
  }

  .template-article .agriko-imported-article>div:has(> div:has(> p:has(+ ul))) {
    grid-template-columns: 1fr;
  }

  .template-article .agriko-imported-article>div:has(> div:has(> h3:has(+ p))) {
    grid-template-columns: 1fr;
  }

  .template-article .agriko-imported-article>div:has(> div:has(> div:has(+ div))) {
    grid-template-columns: repeat(2, 1fr);
  }

  .template-article .agriko-imported-article~region {
    padding: 2rem 1.5rem;
  }

  .template-article .agriko-imported-article~region div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .template-article .agriko-imported-article>div:has(> div:has(> div:has(+ div))) {
    grid-template-columns: 1fr;
  }

  .template-article .agriko-imported-article~div {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   ACCESSIBILITY - Focus states
   ============================================================================ */

.template-article .agriko-imported-article a:focus-visible,
.template-article .agriko-imported-article~region a:focus-visible {
  outline: 2px solid #C9A227 !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ============================================================================
   MOTION PREFERENCES - Reduced motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

  .template-article .agriko-imported-article *,
  .template-article .agriko-imported-article *::before,
  .template-article .agriko-imported-article *::after,
  .template-article .agriko-imported-article~region * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   END OF HERITAGE AGRICULTURAL JOURNAL DESIGN
   ============================================================================ */


/* ============================================
   herbal-blends-laboratory.css
   ============================================ */

/* ============================================================================
   AGRIKO HERBAL BLENDS — DARK BOTANICAL APOTHECARY
   A bold, unexpected redesign with dramatic aesthetics

   Design Philosophy:
   - Dark apothecary aesthetic (deep charcoal backgrounds)
   - Electric botanical accents (lime, magenta, amber)
   - Brutalist typography with dramatic scale shifts
   - Asymmetric layouts breaking the grid
   - Glassmorphism specimen cards
   - Interactive micro-animations
   - Vintage botanical illustrations as decorative elements

   ============================================================================ */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */


/* Template-specific tokens - scoped to body.template-cinema-article */
body.template-cinema-article {
  --apothecary-charcoal: #0d0d0d;
  --apothecary-dark: #1a1a1a;
  --apothecary-surface: #252525;
  --apothecary-light: #333333;
  --electric-lime: #b4ff00;
  --electric-magenta: #ff0080;
  --electric-amber: #ff6b00;
  --electric-cyan: #00ffcc;
  --botanical-sage: #6b8e23;
  --botanical-fern: #2d5016;
  --botanical-wine: #722f37;
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-muted: #606060;
  --border-glow: rgba(180, 255, 0, 0.3);
  --glass-surface: rgba(37, 37, 37, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
}
}

/* ============================================================================
   ARTICLE BODY — Dark apothecary atmosphere
   ============================================================================ */

body.template-article article {
  background: var(--apothecary-charcoal) !important;
  color: var(--text-primary) !important;
  position: relative !important;
  overflow-x: hidden !important;
}

/* Botanical texture overlay */
body.template-article article::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(107, 142, 35, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(114, 47, 55, 0.08) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 80 Q30 70 40 80 T60 80 T80 80' stroke='%236b8e23' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3Cpath d='M10 60 Q20 50 30 60 T50 60 T70 60' stroke='%236b8e23' stroke-width='0.2' fill='none' opacity='0.03'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 100% 100%, 200px 200px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ============================================================================
   HERO SECTION — Dramatic asymmetric layout
   ============================================================================ */

body.template-article article section:first-child {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background: linear-gradient(135deg, var(--apothecary-charcoal) 0%, var(--apothecary-dark) 100%) !important;
  z-index: 1 !important;
}

/* Hero decorative accent */
body.template-article article section:first-child::before {
  content: '' !important;
  position: absolute !important;
  top: 10% !important;
  right: -5% !important;
  width: 30vw !important;
  height: 30vw !important;
  background: radial-gradient(circle, var(--electric-lime) 0%, transparent 70%) !important;
  opacity: 0.08 !important;
  border-radius: 50% !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
}

body.template-article article section:first-child::after {
  content: '' !important;
  position: absolute !important;
  bottom: 10% !important;
  left: -5% !important;
  width: 25vw !important;
  height: 25vw !important;
  background: radial-gradient(circle, var(--electric-magenta) 0%, transparent 70%) !important;
  opacity: 0.06 !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
}

/* Hero content container */
body.template-article article section:first-child>div {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: 4rem !important;
  padding: 6rem 4rem !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Left side - Vertical text accent */
body.template-article article section:first-child>div::before {
  content: 'BOTANICAL' !important;
  position: absolute !important;
  left: 2rem !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: clamp(3rem, 5vw, 5rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  color: transparent !important;
  -webkit-text-stroke: 1px var(--electric-lime) !important;
  opacity: 0.3 !important;
  pointer-events: none !important;
}

/* Hero title wrapper */
body.template-article article section:first-child>div>div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  position: relative !important;
}

/* Numbered chapter accent */
body.template-article article section:first-child>div>div:first-child::before {
  content: '01' !important;
  position: absolute !important;
  top: -4rem !important;
  left: -2rem !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: clamp(6rem, 12vw, 10rem) !important;
  font-weight: 700 !important;
  color: var(--electric-lime) !important;
  opacity: 0.15 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Hero title - Brutalist scale */
body.template-article article section:first-child h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(3rem, 7vw, 6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.95 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  position: relative !important;
  text-transform: lowercase !important;
}

/* Hero subtitle with electric accent */
body.template-article article section:first-child>div>div:first-child>p {
  font-family: 'Caveat', cursive !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  color: var(--electric-lime) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 20px rgba(180, 255, 0, 0.3) !important;
}

/* Hero metadata */
body.template-article article section:first-child>div>div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 1.5rem !important;
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 3px solid var(--electric-lime) !important;
  backdrop-filter: blur(10px) !important;
  max-width: 300px !important;
}

body.template-article article section:first-child>div>div:nth-child(2) p {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Scroll indicator - animated */
body.template-article article section:first-child>div>div:last-child {
  position: absolute !important;
  bottom: 2rem !important;
  right: 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.5rem !important;
  animation: bounce 2s infinite !important;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

body.template-article article section:first-child>div>div:last-child>span {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

body.template-article article section:first-child>div>div:last-child img {
  width: 24px !important;
  height: 40px !important;
  opacity: 0.5 !important;
  filter: invert(1) !important;
}

/* ============================================================================
   SECTION HEADINGS — Brutalist typography
   ============================================================================ */

body.template-article article h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
  margin: 4rem 0 2rem !important;
  text-transform: lowercase !important;
  position: relative !important;
  padding-left: 1rem !important;
}

/* Electric accent line */
body.template-article article h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.2em !important;
  bottom: 0.2em !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--electric-lime), var(--electric-magenta)) !important;
  border-radius: 2px !important;
}

/* ============================================================================
   PARAGRAPH TEXT — Editorial readability
   ============================================================================ */

body.template-article article section>div>p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  line-height: 1.8 !important;
  color: var(--text-secondary) !important;
  margin: 0 0 1.5rem !important;
  letter-spacing: 0.01em !important;
}

body.template-article article section>div>p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 4em !important;
  float: left !important;
  line-height: 0.8 !important;
  margin-right: 0.1em !important;
  color: var(--electric-lime) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   BLEND CARDS — Glassmorphism specimen cards
   ============================================================================ */

/* Blend card container */
body.template-article article section>div>.space-y-8>div {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glow effect on hover */
body.template-article article section>div>.space-y-8>div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--electric-lime), var(--electric-magenta), var(--electric-amber)) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

body.template-article article section>div>.space-y-8>div:hover::before {
  opacity: 1 !important;
}

body.template-article article section>div>.space-y-8>div:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(180, 255, 0, 0.1) !important;
  border-color: var(--border-glow) !important;
}

/* Blend card heading wrapper */
body.template-article article section>div>.space-y-8>div>div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.5rem !important;
  gap: 1rem !important;
}

/* Percentage badge */
body.template-article article section>div>.space-y-8>div>div:first-child>div:first-child {
  background: linear-gradient(135deg, var(--botanical-fern), var(--botanical-sage)) !important;
  color: var(--electric-lime) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1rem !important;
  border-radius: 20px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Blend card title */
body.template-article article section>div>.space-y-8>div h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

/* Ingredient list */
body.template-article article section>div>.space-y-8>div>div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}

body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  padding: 0.75rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div>div:first-child {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--electric-lime) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div>div:last-child {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 0.9rem !important;
  color: var(--text-primary) !important;
  font-style: italic !important;
}

/* Blend card description */
body.template-article article section>div>.space-y-8>div>p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* ============================================================================
   HERB REFERENCE CARDS — Specimen grid
   ============================================================================ */

body.template-article article section:has(h2) .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  margin: 2rem 0 !important;
}

body.template-article article section:has(h2) .grid>div {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Specimen card accent */
body.template-article article section:has(h2) .grid>div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--electric-magenta), var(--electric-cyan)) !important;
}

body.template-article article section:has(h2) .grid>div:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(255, 0, 128, 0.1) !important;
}

/* Herb name */
body.template-article article section:has(h2) .grid>div h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin: 0 0 1rem !important;
}

/* Herb properties grid */
body.template-article article section:has(h2) .grid>div>div>div {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 0.5rem 1rem !important;
  margin-bottom: 0.75rem !important;
}

body.template-article article section:has(h2) .grid>div>div>div>p:first-child {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--electric-magenta) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

body.template-article article section:has(h2) .grid>div>div>div>p:last-child {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* ============================================================================
   BREWING STEPS — Numbered cards with electric accents
   ============================================================================ */

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4))) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin: 2rem 0 !important;
}

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  backdrop-filter: blur(20px) !important;
  text-align: center !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
}

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div:hover {
  transform: translateY(-6px) !important;
  border-color: var(--electric-lime) !important;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(180, 255, 0, 0.15) !important;
}

/* Step number */
body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div>div:first-child {
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto 1rem !important;
  background: linear-gradient(135deg, var(--electric-lime), var(--botanical-sage)) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--apothecary-charcoal) !important;
}

/* Step description */
body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 0.5rem !important;
}

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div p {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ============================================================================
   PRINCIPLES SECTION — Alternating layout
   ============================================================================ */

body.template-article article section:has(h2) .space-y-8>div:has(> h3) {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 2rem !important;
  padding: 2rem !important;
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  margin-bottom: 1.5rem !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.template-article article section:has(h2) .space-y-8>div:has(> h3):nth-child(even) {
  grid-template-columns: 2fr 1fr !important;
}

body.template-article article section:has(h2) .space-y-8>div:has(> h3):hover {
  border-color: var(--electric-amber) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(255, 107, 0, 0.1) !important;
}

/* Principle heading */
body.template-article article section:has(h2) .space-y-8>div:has(> h3)>h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--electric-amber) !important;
  margin: 0 !important;
  text-transform: lowercase !important;
}

/* Principle list */
body.template-article article section:has(h2) .space-y-8>div:has(> h3) ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.template-article article section:has(h2) .space-y-8>div:has(> h3) ul li {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 1rem !important;
  color: var(--text-secondary) !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  line-height: 1.6 !important;
}

body.template-article article section:has(h2) .space-y-8>div:has(> h3) ul li:last-child {
  border-bottom: none !important;
}

/* ============================================================================
   FINAL THOUGHT BOX — Highlighted quote
   ============================================================================ */

body.template-article article section:has(h2)>div:has(> div:has(> p:contains(Final Thought))) {
  background: linear-gradient(135deg, rgba(180, 255, 0, 0.1), rgba(255, 0, 128, 0.05)) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin: 2rem 0 !important;
  position: relative !important;
}

body.template-article article section:has(h2)>div:has(> div:has(> p:contains(Final Thought)))::before {
  content: '❝' !important;
  position: absolute !important;
  top: 1rem !important;
  left: 1.5rem !important;
  font-size: 3rem !important;
  color: var(--electric-lime) !important;
  opacity: 0.3 !important;
  font-family: Georgia, serif !important;
}

/* ============================================================================
   CTA SECTION — Electric call to action
   ============================================================================ */

body.template-article article section:has(h2) a[href*="herbal-powders"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: linear-gradient(135deg, var(--electric-lime), var(--botanical-sage)) !important;
  color: var(--apothecary-charcoal) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow:
    0 10px 30px rgba(180, 255, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border: none !important;
}

body.template-article article section:has(h2) a[href*="herbal-powders"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 15px 40px rgba(180, 255, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1024px) {

  /* Hero - Stack on tablet */
  body.template-article article section:first-child {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 4rem 2rem !important;
  }

  body.template-article article section:first-child>div {
    grid-template-columns: 1fr !important;
    padding: 2rem !important;
    gap: 2rem !important;
  }

  body.template-article article section:first-child>div::before {
    display: none !important;
  }

  /* Brewing steps - 2x2 grid */
  body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4))) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Principles - Stack */
  body.template-article article section:has(h2) .space-y-8>div:has(> h3) {
    grid-template-columns: 1fr !important;
  }

  body.template-article article section:has(h2) .space-y-8>div:has(> h3):nth-child(even) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {

  /* Hero mobile */
  body.template-article article section:first-child h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  body.template-article article section:first-child>div>div:first-child::before {
    font-size: 4rem !important;
    top: -2rem !important;
  }

  /* Brewing steps - Stack */
  body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4))) {
    grid-template-columns: 1fr !important;
  }

  /* Herb reference - Stack */
  body.template-article article section:has(h2) .grid {
    grid-template-columns: 1fr !important;
  }

  /* Blend cards - Full width ingredients */
  body.template-article article section>div>.space-y-8>div>div:nth-child(2) {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Section headings mobile */
  body.template-article article h2 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

body.template-article article a:focus-visible,
body.template-article article button:focus-visible {
  outline: 2px solid var(--electric-lime) !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
}

/* ============================================================================
   MOTION PREFERENCES
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  body.template-article article section:first-child>div>div:last-child {
    animation: none !important;
  }

  body.template-article article section>div>.space-y-8>div,
  body.template-article article section:has(h2) .grid>div,
  body.template-article article section:has(h2) .space-y-8>div:has(> h3) {
    transition: none !important;
  }

  body.template-article article section:has(h2) a[href*="herbal-powders"] {
    transition: none !important;
  }
}

/* ============================================================================
   CARD BADGE — Clear dark apothecary style (no green)
   ============================================================================ */

body.template-article article .ag-card__badge-floating {
  background: transparent !important;
  border: none !important;
  color: var(--text-primary) !important;
}

body.template-article article .ag-card__badge-icon {
  color: var(--electric-magenta) !important;
}

body.template-article article .ag-card__badge-icon svg {
  stroke: var(--electric-magenta) !important;
}

body.template-article article .ag-card__badge-text {
  color: var(--text-primary) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* ============================================================================
   PREMIUM REFINEMENTS — Enhanced details and polish
   ============================================================================ */

/* Enhanced drop cap with decorative ring */
body.template-article article section>div>p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 4.5em !important;
  float: left !important;
  line-height: 0.75 !important;
  margin-right: 0.15em !important;
  margin-top: 0.05em !important;
  color: var(--electric-lime) !important;
  font-weight: 700 !important;
  position: relative !important;
  z-index: 1 !important;
}

body.template-article article section>div>p:first-of-type::before {
  content: '' !important;
  position: absolute !important;
  left: 0.15em !important;
  top: 0.1em !important;
  width: 0.9em !important;
  height: 0.9em !important;
  border: 2px solid var(--electric-lime) !important;
  border-radius: 50% !important;
  opacity: 0.3 !important;
  z-index: -1 !important;
  transform: rotate(-15deg) !important;
}

/* Section dividers with botanical pattern */
body.template-article article section>div:has(> h2) {
  position: relative !important;
}

body.template-article article section>div:has(> h2)::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2rem !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--electric-lime) 20%,
      var(--electric-magenta) 50%,
      var(--electric-lime) 80%,
      transparent 100%) !important;
  opacity: 0.2 !important;
}

/* Decorative corner accents on cards */
body.template-article article section>div>.space-y-8>div::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(135deg, var(--electric-lime) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;
}

body.template-article article section>div>.space-y-8>div:hover::after {
  opacity: 0.4 !important;
}

/* Enhanced image containers with glow */
body.template-article article section img {
  border-radius: 12px !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.template-article article section img:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(180, 255, 0, 0.2),
    0 0 60px rgba(180, 255, 0, 0.1) !important;
  transform: scale(1.01) !important;
}

/* Animated gradient text on key headings */
body.template-article article h2 {
  background: linear-gradient(135deg,
      var(--text-primary) 0%,
      var(--electric-lime) 50%,
      var(--text-primary) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 8s linear infinite !important;
}

@keyframes shimmer {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Enhanced list items with custom bullets */
body.template-article article section>div>div ul {
  list-style: none !important;
  padding-left: 0 !important;
}

body.template-article article section>div>div ul li {
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

body.template-article article section>div>div ul li::before {
  content: '◆' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--electric-magenta) !important;
  font-size: 0.5rem !important;
  top: 0.6em !important;
}

/* Subtle floating animation on cards */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-2px);
  }
}

body.template-article article section:has(h2) .grid>div {
  animation: float 6s ease-in-out infinite !important;
}

body.template-article article section:has(h2) .grid>div:nth-child(2) {
  animation-delay: 0.5s !important;
}

body.template-article article section:has(h2) .grid>div:nth-child(3) {
  animation-delay: 1s !important;
}

body.template-article article section:has(h2) .grid>div:nth-child(4) {
  animation-delay: 1.5s !important;
}

/* Pause animation on hover */
body.template-article article section:has(h2) .grid>div:hover {
  animation: none !important;
}

/* Enhanced progress/percentage indicators */
body.template-article article section>div>.space-y-8>div>div:first-child>div:first-child,
body.template-article article section>div>.grid>div>div:first-child>div:first-child {
  position: relative !important;
  overflow: hidden !important;
}

body.template-article article section>div>.space-y-8>div>div:first-child>div:first-child::after,
body.template-article article section>div>.grid>div>div:first-child>div:first-child::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--electric-lime) !important;
  animation: progress 2s ease-out forwards !important;
}

@keyframes progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* Reading progress indicator at top */
body.template-article article::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
      var(--electric-lime),
      var(--electric-magenta),
      var(--electric-amber)) !important;
  width: 0% !important;
  z-index: 9999 !important;
  transition: width 0.1s ease-out !important;
}

/* Decorative botanical illustrations (CSS-only) */
body.template-article article section>div:has(> h2)::before {
  content: '🌿' !important;
  position: absolute !important;
  top: -1rem !important;
  right: 2rem !important;
  font-size: 2rem !important;
  opacity: 0.1 !important;
  transform: rotate(15deg) !important;
  pointer-events: none !important;
}

/* Enhanced quote styling */
body.template-article article section>div>blockquote {
  border-left: 3px solid var(--electric-magenta) !important;
  padding-left: 1.5rem !important;
  margin: 2rem 0 !important;
  font-style: italic !important;
  color: var(--text-secondary) !important;
  position: relative !important;
}

body.template-article article section>div>blockquote::before {
  content: '"' !important;
  position: absolute !important;
  left: 0.5rem !important;
  top: -0.5rem !important;
  font-size: 3rem !important;
  color: var(--electric-magenta) !important;
  opacity: 0.2 !important;
  font-family: Georgia, serif !important;
}

/* Smooth scroll behavior */
body.template-article article {
  scroll-behavior: smooth !important;
}

/* Selection styling */
body.template-article article ::selection {
  background: var(--electric-lime) !important;
  color: var(--apothecary-charcoal) !important;
}

/* Focus ring enhancement */
body.template-article article a:focus-visible,
body.template-article article button:focus-visible {
  outline: 2px solid var(--electric-lime) !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 20px rgba(180, 255, 0, 0.3) !important;
}

/* ============================================================================
   BRAND ORANGE ACCENT — Wellness Collections
   ============================================================================ */

/* Global selector - works everywhere */
.ag-collection-accent {
  color: #f6b900 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 20px rgba(246, 185, 0, 0.3) !important;
}

/* Article page specific */
body.template-article article .ag-collection-accent {
  color: #f6b900 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 20px rgba(246, 185, 0, 0.3) !important;
}

/* Collection page specific */
body.template-collection .ag-collection-accent {
  color: #f6b900 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 20px rgba(246, 185, 0, 0.3) !important;
}

/* Product card badges on collection page - clear/transparent */
body.template-collection .ag-card__badge-floating {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}

body.template-collection .ag-card__badge-icon {
  color: var(--text-primary) !important;
}

body.template-collection .ag-card__badge-icon svg {
  stroke: var(--text-primary) !important;
}

body.template-collection .ag-card__badge-text {
  color: var(--text-primary) !important;
}

/* ============================================================================
   FILTER PANEL LAYOUT — Move label above heading
   ============================================================================ */

/* Target the section with "Find Your Perfect Match" heading */
body.template-collection .ag-filter-panel:has(h2) {
  display: flex !important;
  flex-direction: column !important;
}

/* Reorder elements to place label first */
body.template-collection .ag-filter-panel__label.ag-kicker {
  order: -1 !important;
  margin-bottom: 0.5rem !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: clamp(2.7rem, 5.6vw, 3.7rem) !important;
}

/* ============================================================================
   UNIVERSAL BADGE TRANSPARENCY — All pages, all contexts
   ============================================================================ */

/* Maximum specificity rules to override ALL other badge styling */
body.template-collection .ag-card__badge-floating,
body.template-collection .ag-premium-collections .ag-card__badge-floating,
body.template-collection .ag-collection-section--products-shell .ag-card__badge-floating,
body .ag-card__badge-floating {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem !important;
}

/* Badge icon styling - white/light icon for dark backgrounds */
body.template-collection .ag-card__badge-icon,
body.template-collection .ag-premium-collections .ag-card__badge-icon,
body .ag-card__badge-icon {
  color: #f5f5f5 !important;
}

body.template-collection .ag-card__badge-icon svg,
body.template-collection .ag-premium-collections .ag-card__badge-icon svg,
body .ag-card__badge-icon svg {
  stroke: #f5f5f5 !important;
}

/* Badge text styling - white/light text */
body.template-collection .ag-card__badge-text,
body.template-collection .ag-premium-collections .ag-card__badge-text,
body .ag-card__badge-text {
  color: #f5f5f5 !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* ============================================================================
   END OF DARK BOTANICAL APOTHECARY STYLES
   ============================================================================ */

/* ============================================================================
   END OF DARK BOTANICAL APOTHECARY STYLES
   ============================================================================ */


/* ============================================
   herbal-blends-premium-refinement.css
   ============================================ */

/* ============================================================================
   AGRIKO HERBAL BLENDS — PREMIUM REFINEMENT
   Subtle polish and micro-interactions for the Dark Botanical Apothecary theme

   Refinements:
   - Enhanced reading experience with improved typography scale
   - Refined glassmorphism with better depth perception
   - Smooth scroll-triggered animations
   - Polished micro-interactions on cards and buttons
   - Better visual hierarchy with refined spacing
   - Enhanced accessibility with clearer focus states

   ============================================================================ */

/* ============================================================================
   READING EXPERIENCE — Enhanced typography
   ============================================================================ */

/* Smoother paragraph reading rhythm */
body.template-article article section>div>p {
  max-width: 65ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Enhanced drop cap with better integration */
body.template-article article section>div>p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 4.2em !important;
  float: left !important;
  line-height: 0.78 !important;
  margin-right: 0.12em !important;
  margin-top: 0.08em !important;
  color: var(--electric-lime) !important;
  font-weight: 700 !important;
  position: relative !important;
  z-index: 1 !important;
  text-shadow: 0 0 30px rgba(180, 255, 0, 0.4) !important;
}

/* Decorative ring for drop cap - refined */
body.template-article article section>div>p:first-of-type::before {
  content: '' !important;
  position: absolute !important;
  left: 0.12em !important;
  top: 0.12em !important;
  width: 0.95em !important;
  height: 0.95em !important;
  border: 1.5px solid var(--electric-lime) !important;
  border-radius: 50% !important;
  opacity: 0.25 !important;
  z-index: -1 !important;
  transform: rotate(-12deg) !important;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.template-article article section>div>p:hover:first-of-type::before {
  transform: rotate(-8deg) scale(1.05) !important;
  opacity: 0.35 !important;
}

/* ============================================================================
   GLASSMORPHISM CARDS — Refined depth and polish
   ============================================================================ */

/* Enhanced blend cards with better depth */
body.template-article article section>div>.space-y-8>div {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  margin-bottom: 2rem !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Top glow effect - refined gradient */
body.template-article article section>div>.space-y-8>div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--electric-lime) 20%,
      var(--electric-magenta) 50%,
      var(--electric-amber) 80%,
      transparent 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}

/* Ambient glow on hover */
body.template-article article section>div>.space-y-8>div::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 0%, rgba(180, 255, 0, 0.08), transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

body.template-article article section>div>.space-y-8>div:hover::before,
body.template-article article section>div>.space-y-8>div:hover::after {
  opacity: 1 !important;
}

body.template-article article section>div>.space-y-8>div:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(180, 255, 0, 0.15),
    0 0 80px rgba(180, 255, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(180, 255, 0, 0.25) !important;
}

/* ============================================================================
   PERCENTAGE BADGES — Enhanced visual prominence
   ============================================================================ */

body.template-article article section>div>.space-y-8>div>div:first-child>div:first-child {
  background: linear-gradient(135deg, var(--botanical-fern), var(--botanical-sage)) !important;
  color: var(--electric-lime) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 25px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 20px rgba(180, 255, 0, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Shimmer effect on badges */
body.template-article article section>div>.space-y-8>div>div:first-child>div:first-child::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent) !important;
  transition: left 0.6s ease !important;
}

body.template-article article section>div>.space-y-8>div:hover>div:first-child>div:first-child::before {
  left: 100% !important;
}

body.template-article article section>div>.space-y-8>div:hover>div:first-child>div:first-child {
  transform: scale(1.05) !important;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 30px rgba(180, 255, 0, 0.25) !important;
}

/* ============================================================================
   INGREDIENT GRID — Enhanced layout and hover states
   ============================================================================ */

body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  padding: 1rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ingredient hover effect */
body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--electric-lime) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div:hover::before {
  transform: scaleX(1) !important;
}

body.template-article article section>div>.space-y-8>div>div:nth-child(2)>div:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(180, 255, 0, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================================
   HERB REFERENCE CARDS — Refined specimen presentation
   ============================================================================ */

body.template-article article section:has(h2) .grid>div {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Enhanced top accent */
body.template-article article section:has(h2) .grid>div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg,
      var(--electric-magenta) 0%,
      var(--electric-cyan) 50%,
      var(--electric-lime) 100%) !important;
}

/* Hover effect with ambient glow */
body.template-article article section:has(h2) .grid>div::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 128, 0.06), transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

body.template-article article section:has(h2) .grid>div:hover::after {
  opacity: 1 !important;
}

body.template-article article section:has(h2) .grid>div:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 0, 128, 0.2),
    0 0 60px rgba(255, 0, 128, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 0, 128, 0.2) !important;
}

/* Herb names - enhanced typography */
body.template-article article section:has(h2) .grid>div h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin: 0 0 1.25rem !important;
  position: relative !important;
  display: inline-block !important;
}

/* Decorative underline on herb names */
body.template-article article section:has(h2) .grid>div h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--electric-magenta) !important;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.template-article article section:has(h2) .grid>div:hover h4::after {
  width: 100% !important;
}

/* Property labels - enhanced styling */
body.template-article article section:has(h2) .grid>div>div>div>p:first-child {
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--electric-magenta) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.3) !important;
}

/* ============================================================================
   BREWING STEPS — Enhanced visual hierarchy
   ============================================================================ */

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  text-align: center !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Ambient glow on hover */
body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 0%, rgba(180, 255, 0, 0.1), transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div:hover::before {
  opacity: 1 !important;
}

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div:hover {
  transform: translateY(-8px) !important;
  border-color: var(--electric-lime) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(180, 255, 0, 0.2),
    0 0 60px rgba(180, 255, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Step numbers - enhanced with glow */
body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div>div:first-child {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 1.25rem !important;
  background: linear-gradient(135deg, var(--electric-lime), var(--botanical-sage)) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--apothecary-charcoal) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 20px rgba(180, 255, 0, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
}

body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div:hover>div:first-child {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 30px rgba(180, 255, 0, 0.5) !important;
}

/* ============================================================================
   PRINCIPLES SECTION — Enhanced alternating layout
   ============================================================================ */

body.template-article article section:has(h2) .space-y-8>div:has(> h3) {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 2.5rem !important;
  padding: 2.5rem !important;
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  margin-bottom: 1.5rem !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Side accent for odd cards */
body.template-article article section:has(h2) .space-y-8>div:has(> h3)::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--electric-amber), var(--electric-magenta)) !important;
}

/* Side accent for even cards (reversed) */
body.template-article article section:has(h2) .space-y-8>div:has(> h3):nth-child(even)::before {
  left: auto !important;
  right: 0 !important;
}

body.template-article article section:has(h2) .space-y-8>div:has(> h3):hover {
  border-color: rgba(255, 107, 0, 0.3) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 107, 0, 0.15),
    0 0 60px rgba(255, 107, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateX(4px) !important;
}

body.template-article article section:has(h2) .space-y-8>div:has(> h3):nth-child(even):hover {
  transform: translateX(-4px) !important;
}

/* Principle headings - enhanced */
body.template-article article section:has(h2) .space-y-8>div:has(> h3)>h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--electric-amber) !important;
  margin: 0 !important;
  text-transform: lowercase !important;
  position: relative !important;
  text-shadow: 0 0 20px rgba(255, 107, 0, 0.3) !important;
}

/* ============================================================================
   SECTION HEADINGS — Refined typography with shimmer
   ============================================================================ */

body.template-article article h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  background: linear-gradient(135deg,
      var(--text-primary) 0%,
      var(--electric-lime) 40%,
      var(--electric-magenta) 60%,
      var(--electric-amber) 80%,
      var(--text-primary) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 10s linear infinite !important;
  margin: 5rem 0 2.5rem !important;
  text-transform: lowercase !important;
  position: relative !important;
  padding-left: 1.25rem !important;
}

/* Enhanced accent line */
body.template-article article h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.15em !important;
  bottom: 0.15em !important;
  width: 5px !important;
  background: linear-gradient(180deg,
      var(--electric-lime) 0%,
      var(--electric-magenta) 50%,
      var(--electric-amber) 100%) !important;
  border-radius: 2.5px !important;
  box-shadow: 0 0 10px rgba(180, 255, 0, 0.4) !important;
}

@keyframes shimmer {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ============================================================================
   CTA BUTTON — Enhanced with glow effect
   ============================================================================ */

body.template-article article section:has(h2) a[href*="herbal-powders"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  background: linear-gradient(135deg, var(--electric-lime), var(--botanical-sage)) !important;
  color: var(--apothecary-charcoal) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 1.125rem 2.5rem !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow:
    0 12px 35px rgba(180, 255, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(180, 255, 0, 0.1) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shine effect on CTA */
body.template-article article section:has(h2) a[href*="herbal-powders"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent) !important;
  transition: left 0.6s ease !important;
}

body.template-article article section:has(h2) a[href*="herbal-powders"]:hover::before {
  left: 100% !important;
}

body.template-article article section:has(h2) a[href*="herbal-powders"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 18px 45px rgba(180, 255, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(180, 255, 0, 0.2),
    0 0 60px rgba(180, 255, 0, 0.3) !important;
}

/* ============================================================================
   IMAGES — Enhanced presentation with subtle glow
   ============================================================================ */

body.template-article article section img {
  border-radius: 16px !important;
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative !important;
}

/* Subtle colored glow on image hover */
body.template-article article section img::after {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(135deg,
      var(--electric-lime),
      var(--electric-magenta),
      var(--electric-amber)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  pointer-events: none !important;
}

body.template-article article section img:hover::after {
  opacity: 0.5 !important;
}

body.template-article article section img:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(180, 255, 0, 0.2),
    0 0 60px rgba(180, 255, 0, 0.15),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.015) !important;
}

/* ============================================================================
   READING PROGRESS INDICATOR — Enhanced with gradient
   ============================================================================ */

body.template-article article::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg,
      var(--electric-lime),
      var(--electric-magenta),
      var(--electric-amber),
      var(--electric-cyan)) !important;
  width: 0% !important;
  z-index: 9999 !important;
  transition: width 0.15s ease-out !important;
  box-shadow: 0 0 10px rgba(180, 255, 0, 0.5) !important;
}

/* ============================================================================
   FOCUS STATES — Enhanced accessibility
   ============================================================================ */

body.template-article article a:focus-visible,
body.template-article article button:focus-visible {
  outline: none !important;
  position: relative !important;
}

body.template-article article a:focus-visible::before,
body.template-article article button:focus-visible::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border: 2px solid var(--electric-lime) !important;
  border-radius: inherit !important;
  box-shadow:
    0 0 0 2px var(--apothecary-charcoal),
    0 0 20px rgba(180, 255, 0, 0.5) !important;
  animation: pulse-focus 1.5s ease-out !important;
}

@keyframes pulse-focus {
  0% {
    box-shadow:
      0 0 0 2px var(--apothecary-charcoal),
      0 0 0 4px var(--electric-lime);
  }

  100% {
    box-shadow:
      0 0 0 2px var(--apothecary-charcoal),
      0 0 20px rgba(180, 255, 0, 0.5);
  }
}

/* ============================================================================
   LIST ITEMS — Enhanced with custom bullets
   ============================================================================ */

body.template-article article section>div>div ul li {
  position: relative !important;
  padding-left: 1.75rem !important;
  margin-bottom: 0.6rem !important;
  transition: all 0.3s ease !important;
}

body.template-article article section>div>div ul li::before {
  content: '◆' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--electric-magenta) !important;
  font-size: 0.55rem !important;
  top: 0.65em !important;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.4) !important;
  transition: all 0.3s ease !important;
}

body.template-article article section>div>div ul li:hover {
  padding-left: 2rem !important;
  color: var(--text-primary) !important;
}

body.template-article article section>div>div ul li:hover::before {
  color: var(--electric-lime) !important;
  transform: scale(1.2) !important;
  text-shadow: 0 0 12px rgba(180, 255, 0, 0.6) !important;
}

/* ============================================================================
   RESPONSIVE REFINEMENTS
   ============================================================================ */

@media (max-width: 1024px) {
  body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4))) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  body.template-article article section:has(h2) .space-y-8>div:has(> h3) {
    grid-template-columns: 1fr !important;
    padding: 2rem !important;
  }

  body.template-article article section:has(h2) .space-y-8>div:has(> h3):nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  body.template-article article h2 {
    margin: 4rem 0 2rem !important;
  }
}

@media (max-width: 640px) {
  body.template-article article section>div>.space-y-8>div {
    padding: 1.75rem !important;
    border-radius: 16px !important;
  }

  body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4))) {
    grid-template-columns: 1fr !important;
  }

  body.template-article article section:has(h2) .grid>div {
    padding: 1.75rem !important;
  }

  body.template-article article h2 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    padding-left: 1rem !important;
  }

  body.template-article article section:has(h2) a[href*="herbal-powders"] {
    padding: 1rem 2rem !important;
    font-size: 0.9rem !important;
  }

  body.template-article article section>div>p {
    font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  }
}

/* ============================================================================
   MOTION PREFERENCES — Reduced motion support
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

  body.template-article article h2,
  body.template-article article section>div>p:first-of-type::before,
  body.template-article article section>div>.space-y-8>div::before,
  body.template-article article section:has(h2) .grid>div::after,
  body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div::before,
  body.template-article article section:has(h2) a[href*="herbal-powders"]::before {
    animation: none !important;
  }

  body.template-article article section>div>.space-y-8>div,
  body.template-article article section:has(h2) .grid>div,
  body.template-article article section:has(h2) .space-y-8>div:has(> h3),
  body.template-article article section img,
  body.template-article article section:has(h2) a[href*="herbal-powders"] {
    transition: none !important;
  }

  body.template-article article section>div>.space-y-8>div:hover,
  body.template-article article section:has(h2) .grid>div:hover,
  body.template-article article section:has(h2) .space-y-8>div:has(> h3):hover,
  body.template-article article section img:hover,
  body.template-article article section:has(h2) a[href*="herbal-powders"]:hover,
  body.template-article article section:has(h2) .grid:has(div:has(> div:has(h4)))>div:hover>div:first-child,
  body.template-article article section>div>.space-y-8>div:hover>div:first-child>div:first-child {
    transform: none !important;
  }
}

/* ============================================================================
   END OF PREMIUM REFINEMENT
   ============================================================================ */


/* ============================================
   moringa-superfood-imported.css
   ============================================ */

/*
  Moringa Superfood Guide — CSS Module shim for Shopify import
  Provides utility classes and styling for the imported moringa article.
  Ensures proper display of Tailwind classes used in the Next.js source.
*/

/* ===== ANIMATIONS ===== */
@keyframes ag-moringa-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes ag-moringa-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ag-moringa-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ag-moringa-shimmer {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* ===== CSS CUSTOM PROPERTIES ===== */
.agriko-imported-article {
  --moringa-green-deep: #0e3e29;
  --moringa-green-rich: #184a2c;
  --moringa-green-medium: #2d6b4f;
  --moringa-green-light: #7cb98a;
  --moringa-gold: #f6b900;
  --moringa-gold-light: #f9d86e;
  --moringa-cream: #faf8f3;
  --moringa-cream-light: #fefcf8;
}

/* ===== TAILWIND UTILITY SHIMS ===== */

/* Padding */
.agriko-imported-article .p-6 {
  padding: 1.5rem;
}

.agriko-imported-article .p-8 {
  padding: 2rem;
}

.agriko-imported-article .p-10 {
  padding: 2.5rem;
}

.agriko-imported-article .p-12 {
  padding: 3rem;
}

.agriko-imported-article .p-14 {
  padding: 3.5rem;
}

.agriko-imported-article .p-5 {
  padding: 1.25rem;
}

.agriko-imported-article .p-4 {
  padding: 1rem;
}

.agriko-imported-article .sm\:p-8 {
  padding: 2rem;
}

.agriko-imported-article .md\:p-10 {
  padding: 2.5rem;
}

.agriko-imported-article .lg\:p-12 {
  padding: 3rem;
}

.agriko-imported-article .xl\:p-14 {
  padding: 3.5rem;
}

.agriko-imported-article .\[2xl\:p-14\],
.agriko-imported-article .two-xl\:p-14 {
  padding: 3.5rem;
}

/* Spacing */
.agriko-imported-article .py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.agriko-imported-article .py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.agriko-imported-article .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.agriko-imported-article .py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.agriko-imported-article .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.agriko-imported-article .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.agriko-imported-article .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.agriko-imported-article .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.agriko-imported-article .px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.agriko-imported-article .px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.agriko-imported-article .py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.agriko-imported-article .py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.agriko-imported-article .py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.agriko-imported-article .py-18 {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.agriko-imported-article .mb-2 {
  margin-bottom: 0.5rem;
}

.agriko-imported-article .mb-3 {
  margin-bottom: 0.75rem;
}

.agriko-imported-article .mb-4 {
  margin-bottom: 1rem;
}

.agriko-imported-article .mb-6 {
  margin-bottom: 1.5rem;
}

.agriko-imported-article .mb-8 {
  margin-bottom: 2rem;
}

.agriko-imported-article .mb-10 {
  margin-bottom: 2.5rem;
}

.agriko-imported-article .mb-12 {
  margin-bottom: 3rem;
}

.agriko-imported-article .mb-16 {
  margin-bottom: 4rem;
}

.agriko-imported-article .mb-20 {
  margin-bottom: 5rem;
}

.agriko-imported-article .mt-2 {
  margin-top: 0.5rem;
}

.agriko-imported-article .mt-4 {
  margin-top: 1rem;
}

.agriko-imported-article .mt-6 {
  margin-top: 1.5rem;
}

.agriko-imported-article .mt-8 {
  margin-top: 2rem;
}

.agriko-imported-article .mt-12 {
  margin-top: 3rem;
}

/* Layout */
.agriko-imported-article .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.agriko-imported-article .max-w-7xl {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-6xl {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-5xl {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-4xl {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-3xl {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-2xl {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-xl {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .max-w-md {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.agriko-imported-article .w-full {
  width: 100%;
}

.agriko-imported-article .h-full {
  height: 100%;
}

.agriko-imported-article .w-auto {
  width: auto;
}

.agriko-imported-article .h-auto {
  height: auto;
}

/* Display & Flexbox */
.agriko-imported-article .flex {
  display: flex;
}

.agriko-imported-article .inline-flex {
  display: inline-flex;
}

.agriko-imported-article .grid {
  display: grid;
}

.agriko-imported-article .hidden {
  display: none;
}

.agriko-imported-article .block {
  display: block;
}

.agriko-imported-article .inline-block {
  display: inline-block;
}

.agriko-imported-article .flex-col {
  flex-direction: column;
}

.agriko-imported-article .flex-row {
  flex-direction: row;
}

.agriko-imported-article .flex-wrap {
  flex-wrap: wrap;
}

.agriko-imported-article .items-center {
  align-items: center;
}

.agriko-imported-article .items-start {
  align-items: flex-start;
}

.agriko-imported-article .items-end {
  align-items: flex-end;
}

.agriko-imported-article .justify-center {
  justify-content: center;
}

.agriko-imported-article .justify-between {
  justify-content: space-between;
}

.agriko-imported-article .justify-end {
  justify-content: flex-end;
}

.agriko-imported-article .gap-2 {
  gap: 0.5rem;
}

.agriko-imported-article .gap-3 {
  gap: 0.75rem;
}

.agriko-imported-article .gap-4 {
  gap: 1rem;
}

.agriko-imported-article .gap-6 {
  gap: 1.5rem;
}

.agriko-imported-article .gap-8 {
  gap: 2rem;
}

.agriko-imported-article .gap-10 {
  gap: 2.5rem;
}

.agriko-imported-article .gap-12 {
  gap: 3rem;
}

/* Grid */
.agriko-imported-article .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.agriko-imported-article .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agriko-imported-article .grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agriko-imported-article .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agriko-imported-article .grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.agriko-imported-article .col-span-1 {
  grid-column: span 1 / span 1;
}

.agriko-imported-article .col-span-2 {
  grid-column: span 2 / span 2;
}

.agriko-imported-article .col-span-3 {
  grid-column: span 3 / span 3;
}

.agriko-imported-article .col-span-4 {
  grid-column: span 4 / span 4;
}

.agriko-imported-article .col-span-6 {
  grid-column: span 6 / span 6;
}

.agriko-imported-article .col-span-12 {
  grid-column: span 12 / span 12;
}

/* Positioning */
.agriko-imported-article .relative {
  position: relative;
}

.agriko-imported-article .absolute {
  position: absolute;
}

.agriko-imported-article .sticky {
  position: sticky;
}

.agriko-imported-article .fixed {
  position: fixed;
}

.agriko-imported-article .inset-0 {
  inset: 0;
}

.agriko-imported-article .top-0 {
  top: 0;
}

.agriko-imported-article .bottom-0 {
  bottom: 0;
}

.agriko-imported-article .left-0 {
  left: 0;
}

.agriko-imported-article .right-0 {
  right: 0;
}

/* Colors - Text */
.agriko-imported-article .text-white {
  color: #ffffff;
}

.agriko-imported-article .text-black {
  color: #000000;
}

.agriko-imported-article .text-gray-50 {
  color: #f9fafb;
}

.agriko-imported-article .text-gray-100 {
  color: #f3f4f6;
}

.agriko-imported-article .text-gray-200 {
  color: #e5e7eb;
}

.agriko-imported-article .text-gray-300 {
  color: #d1d5db;
}

.agriko-imported-article .text-gray-400 {
  color: #9ca3af;
}

.agriko-imported-article .text-gray-500 {
  color: #6b7280;
}

.agriko-imported-article .text-gray-600 {
  color: #4b5563;
}

.agriko-imported-article .text-gray-700 {
  color: #374151;
}

.agriko-imported-article .text-gray-800 {
  color: #1f2937;
}

.agriko-imported-article .text-gray-900 {
  color: #111827;
}

.agriko-imported-article .text-emerald-50 {
  color: #ecfdf5;
}

.agriko-imported-article .text-emerald-100 {
  color: #d1fae5;
}

.agriko-imported-article .text-emerald-200 {
  color: #a7f3d0;
}

.agriko-imported-article .text-emerald-300 {
  color: #6ee7b7;
}

.agriko-imported-article .text-emerald-400 {
  color: #34d399;
}

.agriko-imported-article .text-emerald-500 {
  color: #10b981;
}

.agriko-imported-article .text-emerald-600 {
  color: #059669;
}

.agriko-imported-article .text-emerald-700 {
  color: #047857;
}

.agriko-imported-article .text-emerald-800 {
  color: #065f46;
}

.agriko-imported-article .text-emerald-900 {
  color: #064e3b;
}

.agriko-imported-article .text-green-50 {
  color: #f0fdf4;
}

.agriko-imported-article .text-green-100 {
  color: #dcfce7;
}

.agriko-imported-article .text-green-200 {
  color: #bbf7d0;
}

.agriko-imported-article .text-green-300 {
  color: #86efac;
}

.agriko-imported-article .text-green-400 {
  color: #4ade80;
}

.agriko-imported-article .text-green-500 {
  color: #22c55e;
}

.agriko-imported-article .text-green-600 {
  color: #16a34a;
}

.agriko-imported-article .text-green-700 {
  color: #15803d;
}

.agriko-imported-article .text-green-800 {
  color: #166534;
}

.agriko-imported-article .text-green-900 {
  color: #14532d;
}

.agriko-imported-article .text-lime-50 {
  color: #f7fee7;
}

.agriko-imported-article .text-lime-100 {
  color: #ecfccb;
}

.agriko-imported-article .text-lime-200 {
  color: #d9f99d;
}

.agriko-imported-article .text-lime-300 {
  color: #bef264;
}

.agriko-imported-article .text-lime-400 {
  color: #a3e635;
}

.agriko-imported-article .text-lime-500 {
  color: #84cc16;
}

.agriko-imported-article .text-lime-600 {
  color: #65a30d;
}

.agriko-imported-article .text-lime-700 {
  color: #4d7c0f;
}

.agriko-imported-article .text-lime-800 {
  color: #3f6212;
}

.agriko-imported-article .text-lime-900 {
  color: #365314;
}

/* Colors - Background */
.agriko-imported-article .bg-white {
  background-color: #ffffff;
}

.agriko-imported-article .bg-black {
  background-color: #000000;
}

.agriko-imported-article .bg-transparent {
  background-color: transparent;
}

.agriko-imported-article .bg-gray-50 {
  background-color: #f9fafb;
}

.agriko-imported-article .bg-gray-100 {
  background-color: #f3f4f6;
}

.agriko-imported-article .bg-gray-200 {
  background-color: #e5e7eb;
}

.agriko-imported-article .bg-gray-300 {
  background-color: #d1d5db;
}

.agriko-imported-article .bg-gray-400 {
  background-color: #9ca3af;
}

.agriko-imported-article .bg-gray-500 {
  background-color: #6b7280;
}

.agriko-imported-article .bg-gray-600 {
  background-color: #4b5563;
}

.agriko-imported-article .bg-gray-700 {
  background-color: #374151;
}

.agriko-imported-article .bg-gray-800 {
  background-color: #1f2937;
}

.agriko-imported-article .bg-gray-900 {
  background-color: #111827;
}

.agriko-imported-article .bg-emerald-50 {
  background-color: #ecfdf5;
}

.agriko-imported-article .bg-emerald-100 {
  background-color: #d1fae5;
}

.agriko-imported-article .bg-emerald-200 {
  background-color: #a7f3d0;
}

.agriko-imported-article .bg-emerald-300 {
  background-color: #6ee7b7;
}

.agriko-imported-article .bg-emerald-400 {
  background-color: #34d399;
}

.agriko-imported-article .bg-emerald-500 {
  background-color: #10b981;
}

.agriko-imported-article .bg-emerald-600 {
  background-color: #059669;
}

.agriko-imported-article .bg-emerald-700 {
  background-color: #047857;
}

.agriko-imported-article .bg-emerald-800 {
  background-color: #065f46;
}

.agriko-imported-article .bg-emerald-900 {
  background-color: #064e3b;
}

.agriko-imported-article .bg-green-50 {
  background-color: #f0fdf4;
}

.agriko-imported-article .bg-green-100 {
  background-color: #dcfce7;
}

.agriko-imported-article .bg-green-200 {
  background-color: #bbf7d0;
}

.agriko-imported-article .bg-green-300 {
  background-color: #86efac;
}

.agriko-imported-article .bg-green-400 {
  background-color: #4ade80;
}

.agriko-imported-article .bg-green-500 {
  background-color: #22c55e;
}

.agriko-imported-article .bg-green-600 {
  background-color: #16a34a;
}

.agriko-imported-article .bg-green-700 {
  background-color: #15803d;
}

.agriko-imported-article .bg-green-800 {
  background-color: #166534;
}

.agriko-imported-article .bg-green-900 {
  background-color: #14532d;
}

/* Typography */
.agriko-imported-article .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.agriko-imported-article .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.agriko-imported-article .text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.agriko-imported-article .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.agriko-imported-article .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.agriko-imported-article .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.agriko-imported-article .text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.agriko-imported-article .text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.agriko-imported-article .text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.agriko-imported-article .text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.agriko-imported-article .text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.agriko-imported-article .text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.agriko-imported-article .text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.agriko-imported-article .font-thin {
  font-weight: 100;
}

.agriko-imported-article .font-extralight {
  font-weight: 200;
}

.agriko-imported-article .font-light {
  font-weight: 300;
}

.agriko-imported-article .font-normal {
  font-weight: 400;
}

.agriko-imported-article .font-medium {
  font-weight: 500;
}

.agriko-imported-article .font-semibold {
  font-weight: 600;
}

.agriko-imported-article .font-bold {
  font-weight: 700;
}

.agriko-imported-article .font-extrabold {
  font-weight: 800;
}

.agriko-imported-article .font-black {
  font-weight: 900;
}

.agriko-imported-article .leading-none {
  line-height: 1;
}

.agriko-imported-article .leading-tight {
  line-height: 1.25;
}

.agriko-imported-article .leading-snug {
  line-height: 1.375;
}

.agriko-imported-article .leading-normal {
  line-height: 1.5;
}

.agriko-imported-article .leading-relaxed {
  line-height: 1.625;
}

.agriko-imported-article .leading-loose {
  line-height: 2;
}

.agriko-imported-article .text-left {
  text-align: left;
}

.agriko-imported-article .text-center {
  text-align: center;
}

.agriko-imported-article .text-right {
  text-align: right;
}

.agriko-imported-article .text-justify {
  text-align: justify;
}

.agriko-imported-article .uppercase {
  text-transform: uppercase;
}

.agriko-imported-article .lowercase {
  text-transform: lowercase;
}

.agriko-imported-article .capitalize {
  text-transform: capitalize;
}

.agriko-imported-article .italic {
  font-style: italic;
}

.agriko-imported-article .tracking-tighter {
  letter-spacing: -0.05em;
}

.agriko-imported-article .tracking-tight {
  letter-spacing: -0.025em;
}

.agriko-imported-article .tracking-normal {
  letter-spacing: 0;
}

.agriko-imported-article .tracking-wide {
  letter-spacing: 0.025em;
}

.agriko-imported-article .tracking-wider {
  letter-spacing: 0.05em;
}

.agriko-imported-article .widest {
  letter-spacing: 0.1em;
}

/* Borders */
.agriko-imported-article .border {
  border-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}

.agriko-imported-article .border-0 {
  border-width: 0;
}

.agriko-imported-article .border-2 {
  border-width: 2px;
}

.agriko-imported-article .border-4 {
  border-width: 4px;
}

.agriko-imported-article .border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.agriko-imported-article .border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.agriko-imported-article .border-l {
  border-left-width: 1px;
  border-left-style: solid;
}

.agriko-imported-article .border-r {
  border-right-width: 1px;
  border-right-style: solid;
}

.agriko-imported-article .rounded-none {
  border-radius: 0;
}

.agriko-imported-article .rounded-sm {
  border-radius: 0.125rem;
}

.agriko-imported-article .rounded {
  border-radius: 0.25rem;
}

.agriko-imported-article .rounded-md {
  border-radius: 0.375rem;
}

.agriko-imported-article .rounded-lg {
  border-radius: 0.5rem;
}

.agriko-imported-article .rounded-xl {
  border-radius: 0.75rem;
}

.agriko-imported-article .rounded-2xl {
  border-radius: 1rem;
}

.agriko-imported-article .rounded-3xl {
  border-radius: 1.5rem;
}

.agriko-imported-article .rounded-full {
  border-radius: 9999px;
}

/* Shadows */
.agriko-imported-article .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.agriko-imported-article .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Opacity */
.agriko-imported-article .opacity-0 {
  opacity: 0;
}

.agriko-imported-article .opacity-10 {
  opacity: 0.1;
}

.agriko-imported-article .opacity-20 {
  opacity: 0.2;
}

.agriko-imported-article .opacity-30 {
  opacity: 0.3;
}

.agriko-imported-article .opacity-40 {
  opacity: 0.4;
}

.agriko-imported-article .opacity-50 {
  opacity: 0.5;
}

.agriko-imported-article .opacity-60 {
  opacity: 0.6;
}

.agriko-imported-article .opacity-70 {
  opacity: 0.7;
}

.agriko-imported-article .opacity-80 {
  opacity: 0.8;
}

.agriko-imported-article .opacity-90 {
  opacity: 0.9;
}

.agriko-imported-article .opacity-100 {
  opacity: 1;
}

/* Transitions */
.agriko-imported-article .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .duration-75 {
  transition-duration: 75ms;
}

.agriko-imported-article .duration-100 {
  transition-duration: 100ms;
}

.agriko-imported-article .duration-150 {
  transition-duration: 150ms;
}

.agriko-imported-article .duration-200 {
  transition-duration: 200ms;
}

.agriko-imported-article .duration-300 {
  transition-duration: 300ms;
}

.agriko-imported-article .duration-500 {
  transition-duration: 500ms;
}

.agriko-imported-article .duration-700 {
  transition-duration: 700ms;
}

.agriko-imported-article .duration-1000 {
  transition-duration: 1000ms;
}

.agriko-imported-article .ease-linear {
  transition-timing-function: linear;
}

.agriko-imported-article .ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.agriko-imported-article .ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.agriko-imported-article .ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transforms */
.agriko-imported-article .scale-95 {
  transform: scale(0.95);
}

.agriko-imported-article .scale-100 {
  transform: scale(1);
}

.agriko-imported-article .scale-105 {
  transform: scale(1.05);
}

.agriko-imported-article .scale-110 {
  transform: scale(1.1);
}

.agriko-imported-article .rotate-0 {
  transform: rotate(0deg);
}

.agriko-imported-article .rotate-1 {
  transform: rotate(1deg);
}

.agriko-imported-article .rotate-2 {
  transform: rotate(2deg);
}

.agriko-imported-article .rotate-3 {
  transform: rotate(3deg);
}

.agriko-imported-article .rotate-6 {
  transform: rotate(6deg);
}

.agriko-imported-article .rotate-12 {
  transform: rotate(12deg);
}

.agriko-imported-article .translate-x-0 {
  transform: translateX(0);
}

.agriko-imported-article .translate-x-1 {
  transform: translateX(0.25rem);
}

.agriko-imported-article .translate-x-2 {
  transform: translateX(0.5rem);
}

.agriko-imported-article .translate-x-4 {
  transform: translateX(1rem);
}

.agriko-imported-article .-translate-y-1 {
  transform: translateY(-0.25rem);
}

.agriko-imported-article .-translate-y-2 {
  transform: translateY(-0.5rem);
}

.agriko-imported-article .-translate-y-4 {
  transform: translateY(-1rem);
}

/* Overflow */
.agriko-imported-article .overflow-hidden {
  overflow: hidden;
}

.agriko-imported-article .overflow-auto {
  overflow: auto;
}

.agriko-imported-article .overflow-visible {
  overflow: visible;
}

.agriko-imported-article .overflow-scroll {
  overflow: scroll;
}

.agriko-imported-article .overflow-x-auto {
  overflow-x: auto;
}

.agriko-imported-article .overflow-y-auto {
  overflow-y: auto;
}

/* Z-index */
.agriko-imported-article .z-0 {
  z-index: 0;
}

.agriko-imported-article .z-10 {
  z-index: 10;
}

.agriko-imported-article .z-20 {
  z-index: 20;
}

.agriko-imported-article .z-30 {
  z-index: 30;
}

.agriko-imported-article .z-40 {
  z-index: 40;
}

.agriko-imported-article .z-50 {
  z-index: 50;
}

/* Object Fit */
.agriko-imported-article .object-contain {
  object-fit: contain;
}

.agriko-imported-article .object-cover {
  object-fit: cover;
}

.agriko-imported-article .object-fill {
  object-fit: fill;
}

.agriko-imported-article .object-none {
  object-fit: none;
}

.agriko-imported-article .object-scale-down {
  object-fit: scale-down;
}

/* Cursor */
.agriko-imported-article .cursor-pointer {
  cursor: pointer;
}

.agriko-imported-article .cursor-default {
  cursor: default;
}

.agriko-imported-article .cursor-not-allowed {
  cursor: not-allowed;
}

/* Pointer Events */
.agriko-imported-article .pointer-events-none {
  pointer-events: none;
}

.agriko-imported-article .pointer-events-auto {
  pointer-events: auto;
}

/* User Select */
.agriko-imported-article .select-none {
  user-select: none;
}

.agriko-imported-article .select-text {
  user-select: text;
}

.agriko-imported-article .select-all {
  user-select: all;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .agriko-imported-article .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .agriko-imported-article .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .agriko-imported-article .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .agriko-imported-article .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .agriko-imported-article .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .agriko-imported-article .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .agriko-imported-article .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .agriko-imported-article .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .agriko-imported-article .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .agriko-imported-article .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .agriko-imported-article .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .agriko-imported-article .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .agriko-imported-article .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agriko-imported-article .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agriko-imported-article .sm\:flex-row {
    flex-direction: row;
  }

  .agriko-imported-article .sm\:gap-6 {
    gap: 1.5rem;
  }

  .agriko-imported-article .sm\:gap-8 {
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .agriko-imported-article .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .agriko-imported-article .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .agriko-imported-article .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .agriko-imported-article .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .agriko-imported-article .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .agriko-imported-article .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .agriko-imported-article .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .agriko-imported-article .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .agriko-imported-article .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .agriko-imported-article .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .agriko-imported-article .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .agriko-imported-article .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .agriko-imported-article .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .agriko-imported-article .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agriko-imported-article .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agriko-imported-article .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agriko-imported-article .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .agriko-imported-article .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .agriko-imported-article .md\:flex-row {
    flex-direction: row;
  }

  .agriko-imported-article .md\:items-center {
    align-items: center;
  }

  .agriko-imported-article .md\:gap-8 {
    gap: 2rem;
  }

  .agriko-imported-article .md\:gap-10 {
    gap: 2.5rem;
  }

  .agriko-imported-article .md\:gap-12 {
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .agriko-imported-article .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .agriko-imported-article .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .agriko-imported-article .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .agriko-imported-article .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .agriko-imported-article .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .agriko-imported-article .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .agriko-imported-article .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .agriko-imported-article .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .agriko-imported-article .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .agriko-imported-article .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .agriko-imported-article .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .agriko-imported-article .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .agriko-imported-article .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agriko-imported-article .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .agriko-imported-article .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .agriko-imported-article .lg\:gap-12 {
    gap: 3rem;
  }

  .agriko-imported-article .lg\:gap-16 {
    gap: 4rem;
  }
}

/* ===== MORINGA-SPECIFIC STYLES ===== */

/* Hero Section */
.agriko-imported-article .moringa-hero {
  position: relative;
  background: linear-gradient(135deg, #0e3e29 0%, #184a2c 50%, #0e3e29 100%);
  color: #faf8f3;
  padding: 6rem 2rem 4rem;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.agriko-imported-article .moringa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(34, 197, 94, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(163, 230, 53, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

.agriko-imported-article .moringa-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  animation: ag-moringa-fadeInUp 0.8s ease-out;
}

.agriko-imported-article .moringa-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(163, 230, 53, 0.15);
  border: 1px solid rgba(163, 230, 53, 0.3);
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bef264;
  margin-bottom: 2rem;
}

.agriko-imported-article .moringa-hero__title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.agriko-imported-article .moringa-hero__description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.75;
  color: rgba(250, 248, 243, 0.9);
  margin-bottom: 2rem;
}

/* Statistics Section */
.agriko-imported-article .moringa-stats {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #faf8f3 0%, #f3f0e8 100%);
  text-align: center;
}

.agriko-imported-article .moringa-stats__number {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: #10b981;
  margin-bottom: 1rem;
}

.agriko-imported-article .moringa-stats__label {
  font-size: 1.125rem;
  color: #525252;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Comparison Cards */
.agriko-imported-article .moringa-comparison {
  padding: 4rem 2rem;
  background: #ffffff;
}

.agriko-imported-article .moringa-comparison__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .agriko-imported-article .moringa-comparison__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .agriko-imported-article .moringa-comparison__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.agriko-imported-article .moringa-comparison__card {
  background: #faf8f3;
  border: 2px solid rgba(14, 62, 41, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.agriko-imported-article .moringa-comparison__card:hover {
  border-color: #10b981;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .moringa-comparison__multiplier {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #f35201;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.agriko-imported-article .moringa-comparison__nutrient {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0e3e29;
  margin-bottom: 0.5rem;
}

.agriko-imported-article .moringa-comparison__description {
  font-size: 0.95rem;
  color: #525252;
  line-height: 1.6;
}

/* Quote Section */
.agriko-imported-article .moringa-quote {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, rgba(14, 62, 41, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  text-align: center;
}

.agriko-imported-article .moringa-quote blockquote {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: #0e3e29;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.agriko-imported-article .moringa-quote cite {
  display: block;
  font-size: 0.95rem;
  font-style: normal;
  color: #525252;
  font-weight: 500;
}

.agriko-imported-article .moringa-quote cite::before {
  content: '— ';
}

/* Field Report Section */
.agriko-imported-article .moringa-field-report {
  padding: 4rem 2rem;
  background: #ffffff;
  max-width: 900px;
  margin: 0 auto;
}

.agriko-imported-article .moringa-field-report__title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #0e3e29;
  margin-bottom: 2rem;
  line-height: 1.2;
}

.agriko-imported-article .moringa-field-report p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2a2a2a;
  margin-bottom: 1.5rem;
}

/* Botanical Illustration */
.agriko-imported-article .moringa-botanical {
  padding: 3rem 2rem;
  background: linear-gradient(to bottom, #f3f0e8 0%, #faf8f3 100%);
  text-align: center;
  border-top: 1px solid rgba(14, 62, 41, 0.1);
  border-bottom: 1px solid rgba(14, 62, 41, 0.1);
}

.agriko-imported-article .moringa-botanical__illustration {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  animation: ag-moringa-float 3s ease-in-out infinite;
}

.agriko-imported-article .moringa-botanical__name {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  color: #0e3e29;
}

.agriko-imported-article .moringa-botanical__label {
  font-size: 0.875rem;
  color: #525252;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.5rem;
}

/* Verdict Section */
.agriko-imported-article .moringa-verdict {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #0e3e29 0%, #184a2c 100%);
  color: #ffffff;
  text-align: center;
}

.agriko-imported-article .moringa-verdict__title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #bef264;
}

.agriko-imported-article .moringa-verdict p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(250, 248, 243, 0.9);
  max-width: 700px;
  margin: 0 auto;
}

/* CTA Section */
.agriko-imported-article .moringa-cta {
  padding: 5rem 2rem;
  background: linear-gradient(to bottom, #faf8f3 0%, #f3f0e8 100%);
  text-align: center;
}

.agriko-imported-article .moringa-cta__title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #0e3e29;
  margin-bottom: 1.5rem;
}

.agriko-imported-article .moringa-cta__text {
  font-size: 1rem;
  line-height: 1.7;
  color: #525252;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.agriko-imported-article .moringa-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #f35201 0%, #ea580c 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(243, 82, 1, 0.3);
}

.agriko-imported-article .moringa-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(243, 82, 1, 0.4);
}

/* Continue Reading Section */
.agriko-imported-article .moringa-continue {
  padding: 3rem 2rem;
  background: #ffffff;
  text-align: center;
  border-top: 1px solid rgba(14, 62, 41, 0.1);
}

.agriko-imported-article .moringa-continue__title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #0e3e29;
  margin-bottom: 0.5rem;
}

.agriko-imported-article .moringa-continue__text {
  font-size: 0.95rem;
  color: #525252;
}

/* Divider */
.agriko-imported-article .moringa-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
      transparent 0%,
      rgba(14, 62, 41, 0.2) 50%,
      transparent 100%);
  margin: 3rem 0;
}

/* Section Headers */
.agriko-imported-article .moringa-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.agriko-imported-article .moringa-section-header__overline {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #f35201;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(243, 82, 1, 0.1);
  border-radius: 2rem;
}

.agriko-imported-article .moringa-section-header__title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #0e3e29;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.agriko-imported-article .moringa-section-header__subtitle {
  font-size: 1.05rem;
  color: #525252;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Ensure all animations are visible without JavaScript hydration */
.agriko-imported-article [data-reveal],
.agriko-imported-article [data-inview],
.agriko-imported-article [data-animate],
.agriko-imported-article [class*="reveal"],
.agriko-imported-article [class*="fade-in"],
.agriko-imported-article [class*="slide-up"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Expand sections that rely on client JS to toggle max-height */
.agriko-imported-article [style*="max-height: 0"],
.agriko-imported-article [style*="max-height:0"] {
  max-height: none !important;
  overflow: visible !important;
}

/* ===== ADDITIONAL UTILITIES FOR COMPARISON CARDS ===== */

/* Border */
.agriko-imported-article .border-2 {
  border-width: 2px;
  border-style: solid;
}

.agriko-imported-article .border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.agriko-imported-article .border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* Border with CSS variables */
.agriko-imported-article [class~="border-[var(--moringa-green-deep)]/8"],
.agriko-imported-article [class~="border-[var(--moringa-green-deep)]/8"] {
  border-color: rgba(14, 62, 41, 0.08);
}

.agriko-imported-article [class~="hover:border-[var(--moringa-gold)]/50"]:hover,
.agriko-imported-article .group:hover [class~="group-hover:border-[var(--moringa-gold)]/50"] {
  border-color: rgba(246, 185, 0, 0.5);
}

/* Background gradient */
.agriko-imported-article .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.agriko-imported-article .from-white {
  --tw-gradient-from: #ffffff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.agriko-imported-article .via-white {
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.agriko-imported-article [class~="to-[var(--moringa-cream)]/40"],
.agriko-imported-article [class~="to-[var(--moringa-cream)]/40"] {
  --tw-gradient-to: rgba(250, 248, 243, 0.4);
}

.agriko-imported-article [class~="hover:to-[var(--moringa-cream)]"]:hover,
.agriko-imported-article [class~="hover:to-[var(--moringa-cream)]/40"]:hover {
  --tw-gradient-to: rgba(250, 248, 243, 1);
}

.agriko-imported-article [class~="from-[var(--moringa-green-deep)]"],
.agriko-imported-article [class~="from-[var(--moringa-green-deep)]"] {
  --tw-gradient-from: #0e3e29;
}

.agriko-imported-article [class~="to-[var(--moringa-green-medium)]"],
.agriko-imported-article [class~="to-[var(--moringa-green-medium)]"] {
  --tw-gradient-to: #2d6b4f;
}

.agriko-imported-article [class~="from-[var(--moringa-gold)]/70"],
.agriko-imported-article [class~="from-[var(--moringa-gold)]/70"] {
  --tw-gradient-from: rgba(246, 185, 0, 0.7);
}

.agriko-imported-article [class~="via-[var(--moringa-gold)]/50"],
.agriko-imported-article [class~="via-[var(--moringa-gold)]/50"] {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(246, 185, 0, 0.5), var(--tw-gradient-to, rgba(246, 185, 0, 0));
}

.agriko-imported-article .to-transparent {
  --tw-gradient-to: transparent;
}

/* Background color with variables */
.agriko-imported-article [class~="bg-[var(--moringa-gold)]/6"],
.agriko-imported-article [class~="bg-[var(--moringa-gold)]/6"] {
  background-color: rgba(246, 185, 0, 0.06);
}

.agriko-imported-article [class~="bg-[var(--moringa-green-medium)]/5"],
.agriko-imported-article [class~="bg-[var(--moringa-green-medium)]/5"] {
  background-color: rgba(45, 107, 79, 0.05);
}

/* Width */
.agriko-imported-article .w-1 {
  width: 0.25rem;
}

.agriko-imported-article .w-1\.5,
.agriko-imported-article .w-\[0\.375rem\] {
  width: 0.375rem;
}

.agriko-imported-article .w-2 {
  width: 0.5rem;
}

.agriko-imported-article .w-6 {
  width: 1.5rem;
}

.agriko-imported-article .w-8 {
  width: 2rem;
}

.agriko-imported-article .w-24 {
  width: 6rem;
}

.agriko-imported-article .w-32 {
  width: 8rem;
}

.agriko-imported-article .w-40 {
  width: 10rem;
}

/* Height */
.agriko-imported-article .h-0\.5,
.agriko-imported-article .h-\[0\.125rem\] {
  height: 0.125rem;
}

.agriko-imported-article .h-1 {
  height: 0.25rem;
}

.agriko-imported-article .h-24 {
  height: 6rem;
}

.agriko-imported-article .h-32 {
  height: 8rem;
}

.agriko-imported-article .h-40 {
  height: 10rem;
}

/* Positioning negative values */
.agriko-imported-article .-right-6 {
  right: -1.5rem;
}

.agriko-imported-article .-right-8 {
  right: -2rem;
}

.agriko-imported-article .-right-10 {
  right: -2.5rem;
}

.agriko-imported-article .-left-6 {
  left: -1.5rem;
}

.agriko-imported-article .-left-8 {
  left: -2rem;
}

.agriko-imported-article .-left-10 {
  left: -2.5rem;
}

.agriko-imported-article .-top-6 {
  top: -1.5rem;
}

.agriko-imported-article .-top-8 {
  top: -2rem;
}

.agriko-imported-article .-top-10 {
  top: -2.5rem;
}

.agriko-imported-article .-bottom-6 {
  bottom: -1.5rem;
}

.agriko-imported-article .-bottom-8 {
  bottom: -2rem;
}

/* Blur */
.agriko-imported-article .blur-2xl {
  filter: blur(40px);
}

.agriko-imported-article .blur-3xl {
  filter: blur(64px);
}

/* Font size - 2xl breakpoint */
.agriko-imported-article .two-xl\:p-14 {
  padding: 3.5rem;
}

.agriko-imported-article .\[2xl\:text-5xl\],
.agriko-imported-article .two-xl\:text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.agriko-imported-article .\[2xl\:text-3xl\],
.agriko-imported-article .two-xl\:text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.agriko-imported-article .\[2xl\:text-\[10rem\]\],
.agriko-imported-article .two-xl\:text-\[10rem\] {
  font-size: 10rem;
  line-height: 1;
}

.agriko-imported-article .\[2xl\:p-14\],
.agriko-imported-article .\[\&\.2xl\]\:p-14 {
  padding: 3.5rem;
}

/* Line height with specific values */
.agriko-imported-article .leading-\[0\.82\],
.agriko-imported-article .leading-\[0\.82\] {
  line-height: 0.82;
}

.agriko-imported-article .leading-\[1\.18\],
.agriko-imported-article .leading-\[1\.18\] {
  line-height: 1.18;
}

.agriko-imported-article .leading-\[1\.16\],
.agriko-imported-article .leading-\[1\.16\] {
  line-height: 1.16;
}

.agriko-imported-article .leading-\[1\.14\],
.agriko-imported-article .leading-\[1\.14\] {
  line-height: 1.14;
}

.agriko-imported-article .leading-\[1\.65\],
.agriko-imported-article .leading-\[1\.65\] {
  line-height: 1.65;
}

.agriko-imported-article .leading-\[1\.63\],
.agriko-imported-article .leading-\[1\.63\] {
  line-height: 1.63;
}

/* Letter spacing with specific values */
.agriko-imported-article .tracking-\[-0\.05em\],
.agriko-imported-article .tracking-\[-0\.05em\] {
  letter-spacing: -0.05em;
}

.agriko-imported-article .tracking-\[-0\.01em\],
.agriko-imported-article .tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}

.agriko-imported-article .tracking-\[-0\.015em\],
.agriko-imported-article .tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}

.agriko-imported-article .tracking-\[-0\.02em\],
.agriko-imported-article .tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.agriko-imported-article [class~="sm:tracking-[-0.015em]"],
.agriko-imported-article [class~="sm:tracking-[-0.015em]"] {
  letter-spacing: -0.015em;
}

.agriko-imported-article [class~="md:tracking-[-0.02em]"],
.agriko-imported-article [class~="md:tracking-[-0.02em]"] {
  letter-spacing: -0.02em;
}

/* Text color with CSS variables */
.agriko-imported-article [class~="text-[var(--moringa-green-deep)]"],
.agriko-imported-article [class~="text-[var(--moringa-green-deep)]"] {
  color: #0e3e29;
}

.agriko-imported-article [class~="text-[var(--moringa-green-rich)]"],
.agriko-imported-article [class~="text-[var(--moringa-green-rich)]"] {
  color: #184a2c;
}

.agriko-imported-article [class~="text-[var(--moringa-gold)]"],
.agriko-imported-article [class~="text-[var(--moringa-gold)]"] {
  color: #f6b900;
}

.agriko-imported-article [class~="text-[var(--moringa-green-deep)]"]\/75,
.agriko-imported-article [class~="text-[var(--moringa-green-deep)]"]\/75 {
  color: rgba(14, 62, 41, 0.75);
}

.agriko-imported-article [class~="text-[var(--moringa-green-deep)]"]\/85,
.agriko-imported-article [class~="text-[var(--moringa-green-deep)]"]\/85 {
  color: rgba(14, 62, 41, 0.85);
}

.agriko-imported-article .group:hover [class~="group-hover:text-[var(--moringa-green-deep)]/85"] {
  color: rgba(14, 62, 41, 0.85);
}

.agriko-imported-article .group:hover [class~="group-hover:text-[var(--moringa-green-rich)]"] {
  color: #184a2c;
}

.agriko-imported-article [class~="hover:text-[var(--moringa-green-deep)]/85"]:hover {
  color: rgba(14, 62, 41, 0.85);
}

/* Opacity */
.agriko-imported-article .opacity-0 {
  opacity: 0;
}

.agriko-imported-article .opacity-100 {
  opacity: 1;
}

.agriko-imported-article .group-hover\:opacity-100:hover {
  opacity: 1;
}

/* Flex shrink */
.agriko-imported-article .flex-shrink-0,
.agriko-imported-article .flex-shrink {
  flex-shrink: 0;
}

.agriko-imported-article .flex-1 {
  flex: 1 1 0%;
}

/* Padding top */
.agriko-imported-article .pt-1 {
  padding-top: 0.25rem;
}

.agriko-imported-article .pt-2 {
  padding-top: 0.5rem;
}

.agriko-imported-article .pt-3 {
  padding-top: 0.75rem;
}

.agriko-imported-article .pt-4 {
  padding-top: 1rem;
}

.agriko-imported-article .sm\:pt-2 {
  padding-top: 0.5rem;
}

.agriko-imported-article .md\:pt-3 {
  padding-top: 0.75rem;
}

.agriko-imported-article .lg\:pt-4 {
  padding-top: 1rem;
}

/* Margin bottom */
.agriko-imported-article .mb-5 {
  margin-bottom: 1.25rem;
}

.agriko-imported-article .mb-6 {
  margin-bottom: 1.5rem;
}

.agriko-imported-article .mb-7 {
  margin-bottom: 1.75rem;
}

.agriko-imported-article .sm\:mb-6 {
  margin-bottom: 1.5rem;
}

.agriko-imported-article .md\:mb-7 {
  margin-bottom: 1.75rem;
}

.agriko-imported-article .lg\:mb-7 {
  margin-bottom: 1.75rem;
}

/* Gap */
.agriko-imported-article .gap-5 {
  gap: 1.25rem;
}

.agriko-imported-article .gap-7 {
  gap: 1.75rem;
}

.agriko-imported-article .sm\:gap-5 {
  gap: 1.25rem;
}

.agriko-imported-article .md\:gap-6 {
  gap: 1.5rem;
}

.agriko-imported-article .lg\:gap-7 {
  gap: 1.75rem;
}

/* Scale transform */
.agriko-imported-article .group-hover\:scale-110:hover {
  transform: scale(1.1);
}

/* Font sizes */
.agriko-imported-article .text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.agriko-imported-article .text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.agriko-imported-article .text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.agriko-imported-article .text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.agriko-imported-article .text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.agriko-imported-article .sm\:text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.agriko-imported-article .md\:text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.agriko-imported-article .lg\:text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.agriko-imported-article .xl\:text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.agriko-imported-article .text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.agriko-imported-article .sm\:text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.agriko-imported-article .md\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.agriko-imported-article .lg\:text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.agriko-imported-article .xl\:text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.agriko-imported-article .\[2xl\:text-5xl\],
.agriko-imported-article .two-xl\:text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.agriko-imported-article .text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.agriko-imported-article .sm\:text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.agriko-imported-article .md\:text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.agriko-imported-article .lg\:text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.agriko-imported-article .xl\:text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.agriko-imported-article .\[2xl\:text-3xl\],
.agriko-imported-article .two-xl\:text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

/* Drop shadow */
.agriko-imported-article .drop-shadow-md {
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

/* Custom component classes */
.agriko-imported-article .moringa-stat {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-weight: 700;
  line-height: 0.82;
  flex-shrink: 0;
}

.agriko-imported-article .moringa-heading {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-weight: 600;
  line-height: 1.18;
}

.agriko-imported-article .moringa-body-light {
  font-weight: 400;
  line-height: 1.65;
}

.agriko-imported-article .responsive-radius {
  border-radius: 0.75rem;
}

@media (min-width: 640px) {
  .agriko-imported-article .responsive-radius {
    border-radius: 1rem;
  }
}

.agriko-imported-article .hover-lift {
  transition: transform 0.3s ease;
}

.agriko-imported-article .hover-lift:hover {
  transform: translateY(-4px);
}

/* Comparison card container fixes */
.agriko-imported-article .p-6.sm\:p-8,
.agriko-imported-article .p-6[class*="sm:p"],
.agriko-imported-article [class*="p-6"][class*="sm:p"] {
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.agriko-imported-article .border-2 {
  box-sizing: border-box !important;
}

/* Stat container row - force proper sizing */
.agriko-imported-article .flex.flex-col,
.agriko-imported-article .flex.sm\:flex-row,
.agriko-imported-article [class*="flex"][class*="items-start"][class*="gap-"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-wrap: wrap !important;
}

/* Force flex-1 to allow shrinking */
.agriko-imported-article .flex-1,
.agriko-imported-article [class*="flex-1"] {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  max-width: 100% !important;
  width: auto !important;
}

/* Add max-width to stat to prevent overflow */
.agriko-imported-article .moringa-stat,
.agriko-imported-article [class*="moringa-stat"] {
  max-width: 150px !important;
}

@media (min-width: 640px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    max-width: 180px !important;
  }
}

@media (min-width: 768px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    max-width: 200px !important;
  }
}

@media (min-width: 1024px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    max-width: 220px !important;
  }
}

@media (min-width: 1280px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    max-width: 240px !important;
  }
}

/* Responsive sizing override - smaller sizes */
.agriko-imported-article .moringa-stat {
  font-size: 1.75rem !important;
}

@media (min-width: 640px) {
  .agriko-imported-article .moringa-stat {
    font-size: 2rem !important;
  }
}

@media (min-width: 768px) {
  .agriko-imported-article .moringa-stat {
    font-size: 2.25rem !important;
  }
}

@media (min-width: 1024px) {
  .agriko-imported-article .moringa-stat {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 1280px) {
  .agriko-imported-article .moringa-stat {
    font-size: 2.75rem !important;
  }
}

@media (min-width: 1536px) {
  .agriko-imported-article .moringa-stat {
    font-size: 3rem !important;
  }
}

.agriko-imported-article .hover-glow {
  transition: box-shadow 0.3s ease;
}

.agriko-imported-article .hover-glow:hover {
  box-shadow: 0 12px 40px rgba(246, 185, 0, 0.15);
}

.agriko-imported-article .shadow-responsive {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .agriko-imported-article .shadow-responsive {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
}

/* JSX class support - remove if not needed */


/* Force specific 2xl breakpoint styles */
.agriko-imported-article [class*="2xl\:text-"],
.agriko-imported-article [class*="[2xl:text-"] {
  font-size: inherit;
}



/* Ensure all moringa-stat displays properly */
.agriko-imported-article .moringa-stat,
.agriko-imported-article [class*="moringa-stat"],
.agriko-imported-article .moringa-stat[class*="text-"],
.agriko-imported-article [class*="moringa-stat"][class*="text"] {
  font-family: var(--ag-theme-font-display, Georgia, serif) !important;
  font-weight: 700 !important;
  line-height: 0.82 !important;
  flex-shrink: 1 !important;
  /* Override flex-shrink-0 to allow shrinking */
  color: #f6b900 !important;
  /* Prevent overflow */
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  overflow: hidden !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  /* Force smaller size */
  font-size: 2rem !important;
}

/* Force even smaller sizes to prevent overflow - use universal selector */
.agriko-imported-article .moringa-stat.text-5xl,
.agriko-imported-article [class*="moringa-stat"].text-5xl,
.agriko-imported-article .moringa-stat[class*="text-5xl"],
.agriko-imported-article [class*="moringa-stat"][class*="text-5xl"] {
  font-size: 1.75rem !important;
}

.agriko-imported-article .moringa-stat.sm\:text-6xl,
.agriko-imported-article [class*="moringa-stat"][class*="sm:text-6xl"],
.agriko-imported-article [class*="moringa-stat"][class*="sm:"][class*="text-6xl"] {
  font-size: 2rem !important;
}


.agriko-imported-article .moringa-stat.md\:text-7xl,
.agriko-imported-article [class*="moringa-stat"][class*="md:text-7xl"],
.agriko-imported-article [class*="moringa-stat"][class*="md:"][class*="text-7xl"] {
  font-size: 2.25rem !important;
}

.agriko-imported-article .moringa-stat.lg\:text-8xl,
.agriko-imported-article [class*="moringa-stat"][class*="lg:text-8xl"],
.agriko-imported-article [class*="moringa-stat"][class*="lg:"][class*="text-8xl"] {
  font-size: 2.5rem !important;
}

.agriko-imported-article .moringa-stat.xl\:text-9xl,
.agriko-imported-article [class*="moringa-stat"][class*="xl:text-9xl"],
.agriko-imported-article [class*="moringa-stat"][class*="xl:"][class*="text-9xl"] {
  font-size: 2.75rem !important;
}

.agriko-imported-article .moringa-stat[class*="2xl"],

.agriko-imported-article [class*="moringa-stat"][class*="2xl"],
.agriko-imported-article [class*="moringa-stat"][class*="2xl:"] {
  font-size: 3rem !important;
  /* Much smaller to fit */
}

@media (min-width: 640px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    font-size: 2.75rem !important;
  }
}

@media (min-width: 768px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    font-size: 3rem !important;
  }
}

@media (min-width: 1024px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    font-size: 3.25rem !important;
  }
}

@media (min-width: 1280px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    font-size: 3.5rem !important;
  }
}

@media (min-width: 1536px) {

  .agriko-imported-article .moringa-stat,
  .agriko-imported-article [class*="moringa-stat"] {
    font-size: 3.75rem !important;
  }
}

/* Container constraints */
.agriko-imported-article .flex.items-start.gap-4,
.agriko-imported-article [class*="flex"][class*="items-start"][class*="gap-"] {
  max-width: 100%;
  overflow: hidden;
}

.agriko-imported-article .moringa-stat,
.agriko-imported-article .moringa-heading {
  max-width: 100%;
}

/* Ensure flex-1 allows shrinking */
.agriko-imported-article .flex-1 {
  min-width: 0;
  flex-shrink: 1;
}

/* Force moringa-heading styles */
.agriko-imported-article .moringa-heading,
.agriko-imported-article [class*="moringa-heading"] {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-weight: 600;
  line-height: 1.18;
  color: #0e3e29;
}

.agriko-imported-article .moringa-heading.text-lg {
  font-size: 1.125rem;
}

.agriko-imported-article .moringa-heading.sm\:text-xl {
  font-size: 1.25rem;
}

.agriko-imported-article .moringa-heading.md\:text-2xl {
  font-size: 1.5rem;
}

.agriko-imported-article .moringa-heading.lg\:text-3xl {
  font-size: 1.875rem;
}

.agriko-imported-article .moringa-heading.xl\:text-4xl {
  font-size: 2.25rem;
}

.agriko-imported-article .moringa-heading[class*="2xl"],
.agriko-imported-article .moringa-heading.\[2xl\:text-5xl\] {
  font-size: 3rem;
}

@media (min-width: 1536px) {
  .agriko-imported-article .moringa-heading {
    font-size: 3rem;
  }
}

/* Group hover effects */
.agriko-imported-article .group:hover .moringa-stat {
  transform: scale(1.1);
}

.agriko-imported-article .group:hover .moringa-heading {
  color: #184a2c;
}

/* Transition timing */
.agriko-imported-article .duration-700 {
  transition-duration: 700ms;
}

/* From/To hover states */
.agriko-imported-article .hover\:from-white:hover {
  --tw-gradient-from: #ffffff;
}

.agriko-imported-article .hover\:via-white:hover {
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.agriko-imported-article [class~="hover:border-[var(--moringa-gold)]/50"]:hover {
  border-color: rgba(246, 185, 0, 0.5);
}

.agriko-imported-article .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Z-index */
.agriko-imported-article .z-10 {
  z-index: 10;
}

.agriko-imported-article .relative {
  position: relative;
}

.agriko-imported-article .absolute {
  position: absolute;
}

.agriko-imported-article .overflow-hidden {
  overflow: hidden;
}

/* Items alignment */
.agriko-imported-article .items-start {
  align-items: flex-start;
}

/* Flex direction responsive */
.agriko-imported-article .sm\:flex-row {
  flex-direction: row;
}

/* Transition color */
.agriko-imported-article .transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.agriko-imported-article .duration-300 {
  transition-duration: 300ms;
}

.agriko-imported-article .duration-500 {
  transition-duration: 500ms;
}


/* ============================================
   natural-pest-management-imported.css
   ============================================ */

/*
  Natural Pest Management — CSS Module shim for Shopify import
  Maps hashed class names (pest-guide_[name]__[hash]) back to their original styles.
  Generated from: src/app/blog/natural-pest-management/pest-guide.module.css
*/

/* Removed redundant @import - fonts already loaded in layout/theme.liquid with proper preconnect */

/* ===== ANIMATIONS ===== */
@keyframes ag-pest-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes ag-pest-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ag-pest-slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ag-pest-slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ag-pest-shimmer {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ag-pest-focusRing {
  from {
    box-shadow: 0 0 0 0 rgba(168, 93, 78, 0.6);
  }

  to {
    box-shadow: 0 0 0 8px rgba(168, 93, 78, 0);
  }
}

/* ===== PAGE WRAPPER ===== */
.pest-guide_pestPage__4Hy4c {
  --serif-display: 'Fraunces', Georgia, serif;
  --serif-body: 'Lora', Georgia, serif;
  --sans-modern: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --primary-dark: #1a2818;
  --primary-green: #2d4a34;
  --accent-rust: #a85d4e;
  --accent-clay: #c9985e;
  --accent-sage: #7a9b7f;
  --bg-cream: #faf8f3;
  --bg-parchment: #f3f0e8;
  --text-dark: #1f2620;
  --text-muted: #5a6359;
  --border-light: rgba(31, 38, 32, 0.08);
  --border-medium: rgba(31, 38, 32, 0.15);
  --shadow-sm: 0 2px 8px rgba(31, 38, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 38, 32, 0.1);
  --shadow-lg: 0 16px 48px rgba(31, 38, 32, 0.15);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

/* ===== HERO ===== */
.pest-guide_heroSection__kc_7y {
  position: relative;
  background: linear-gradient(135deg, #1a2818 0%, #2d4a34 100%);
  color: #faf8f3;
  padding: 6rem 2rem;
  min-height: 65vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pest-guide_heroSection__kc_7y::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(168, 93, 78, 0.12) 0%, rgba(201, 152, 94, 0.05) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: ag-pest-shimmer 4s ease-in-out infinite;
}

.pest-guide_heroSection__kc_7y::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 85%, rgba(122, 155, 127, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(201, 152, 94, 0.06) 0%, transparent 40%);
  pointer-events: none;
}

.pest-guide_heroGrid__0oP7V {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  align-items: center;
  animation: ag-pest-fadeInUp 0.8s ease-out;
}

.pest-guide_heroLabel__aWqFM {
  font-family: var(--sans-modern);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9985e;
  margin-bottom: 1rem;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.1s both;
  text-align: center;
  grid-column: 2;
}

.pest-guide_heroTitle__ZRjOw {
  font-family: var(--serif-display);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
  font-style: italic;
  font-optical-sizing: auto;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.2s both;
  background: linear-gradient(135deg, #faf8f3 0%, rgba(250, 248, 243, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  grid-column: 2;
}

.pest-guide_heroTagline__6W9fu {
  font-size: 1.125rem;
  line-height: 1.75;
  opacity: 0.92;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.3s both;
  text-align: center;
  grid-column: 2;
  margin: 0 auto;
}

.pest-guide_heroMeta__r3BLo {
  font-family: var(--sans-modern);
  font-size: 0.875rem;
  color: rgba(250, 248, 243, 0.7);
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.4s both;
  grid-column: 2;
}

.pest-guide_metaDot__dnJus {
  opacity: 0.5;
}

.pest-guide_heroVisual__dzd9x {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  grid-column: 1;
  grid-row: 1 / -1;
  align-items: center;
}

.pest-guide_visualBlock__7h7Ds {
  font-size: 3.5rem;
  animation: ag-pest-float 3s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.pest-guide_visualBlock__7h7Ds:nth-child(1) {
  animation-delay: 0s;
}

.pest-guide_visualBlock__7h7Ds:nth-child(2) {
  animation-delay: 0.2s;
}

.pest-guide_visualBlock__7h7Ds:nth-child(3) {
  animation-delay: 0.4s;
}

/* ===== SIDE NAV ===== */
.pest-guide_sideNav__7kUDD {
  position: fixed;
  left: 0;
  top: 200px;
  width: 200px;
  z-index: 100;
  padding: 2rem;
}

.pest-guide_sideNavSticky__Qb4qR {
  position: sticky;
  top: 100px;
}

.pest-guide_sideNavLabel__j1Zoc {
  font-family: var(--sans-modern);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a85d4e;
  margin-bottom: 1.5rem;
}

.pest-guide_sideNavList__EJ2Hu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pest-guide_sideNavLink__UvfTG {
  font-family: var(--sans-modern);
  font-size: 0.9rem;
  color: #5a6359;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-left: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.pest-guide_sideNavLink__UvfTG:hover {
  color: #a85d4e;
  border-left-color: #a85d4e;
  transform: translateX(4px);
}

/* ===== MAIN CONTENT ===== */
.pest-guide_mainContent__jzglT {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  left: 80px;
}

/* ===== SECTION HEADERS ===== */
.pest-guide_sectionHeader__sEx19 {
  text-align: center;
  margin-bottom: 4.5rem;
  padding: 3rem 0;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.2s forwards;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pest-guide_sectionTitle__jRABR {
  font-family: var(--serif-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: #1a2818;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
  position: relative;
  display: inline-block;
  width: 100%;
}

.pest-guide_sectionTitle__jRABR::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #a85d4e 0%, #c9985e 100%);
  border-radius: 2px;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.4s forwards;
}

.pest-guide_sectionSubtitle__mEEe_ {
  font-family: var(--serif-body);
  font-size: 1.125rem;
  color: #5a6359;
  font-style: italic;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.3s forwards;
}

/* ===== INTRO SECTION ===== */
.pest-guide_introSection__N9F8r {
  margin: 4.5rem 0;
}

.pest-guide_introGrid__nySPr {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.pest-guide_introText__sbCCs {
  animation: ag-pest-slideInLeft 0.8s ease-out 0.2s both;
}

.pest-guide_introLead__CVBXC {
  font-size: 1.25rem;
  line-height: 1.85;
  color: #1f2620;
  letter-spacing: 0.25px;
  font-weight: 400;
}

.pest-guide_introLead__CVBXC em {
  color: #a85d4e;
  font-style: italic;
  font-weight: 500;
}

.pest-guide_introLead__CVBXC strong {
  font-weight: 600;
  color: #2d4a34;
}

.pest-guide_introQuote__vR9VS {
  background: #f3f0e8;
  padding: 2rem;
  border-left: 4px solid #c9985e;
  position: relative;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: ag-pest-slideInRight 0.8s ease-out 0.3s both;
}

.pest-guide_introQuote__vR9VS:hover {
  box-shadow: 0 8px 24px rgba(31, 38, 32, 0.1);
  transform: translateY(-3px);
  border-left-color: #a85d4e;
}

.pest-guide_introQuote__vR9VS blockquote {
  font-family: var(--serif-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  color: #1a2818;
  margin: 0 0 1.5rem 0;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.pest-guide_introQuote__vR9VS cite {
  font-family: var(--sans-modern);
  font-size: 0.85rem;
  color: #5a6359;
  font-style: normal;
  font-weight: 500;
}

.pest-guide_statsRow__2g__j {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(31, 38, 32, 0.08);
}

.pest-guide_statCard__ctilP {
  text-align: center;
  animation: ag-pest-fadeInUp 0.8s ease-out forwards;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.5rem;
  border-radius: 2px;
}

.pest-guide_statCard__ctilP:nth-child(1) {
  animation-delay: 0.3s;
}

.pest-guide_statCard__ctilP:nth-child(2) {
  animation-delay: 0.4s;
}

.pest-guide_statCard__ctilP:nth-child(3) {
  animation-delay: 0.5s;
}

.pest-guide_statCard__ctilP:hover {
  background: #f3f0e8;
  transform: translateY(-4px);
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
}

.pest-guide_statNumber__ogyZW {
  font-family: var(--serif-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: #a85d4e;
  line-height: 1;
  margin-bottom: 1rem;
}

.pest-guide_statText__Jx_4d {
  font-family: var(--sans-modern);
  font-size: 0.9rem;
  color: #5a6359;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ===== PILLARS SECTION ===== */
.pest-guide_pillarsSection__qFewL {
  margin: 6rem 0;
  background: linear-gradient(135deg, #f3f0e8 0%, rgba(243, 240, 232, 0.5) 100%);
  padding: 3rem 2rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  position: relative;
  overflow: hidden;
}

.pest-guide_pillarsGrid__9GWYD {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.pest-guide_pillarCard__gYyQv {
  background: #faf8f3;
  padding: 2rem;
  border: 1px solid rgba(31, 38, 32, 0.15);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
  border-radius: 2px;
  animation: ag-pest-fadeInUp 0.8s ease-out forwards;
  overflow: hidden;
}

.pest-guide_pillarCard__gYyQv:nth-child(1) {
  animation-delay: 0.2s;
  border-top: 4px solid #a85d4e;
}

.pest-guide_pillarCard__gYyQv:nth-child(2) {
  animation-delay: 0.3s;
  border-top: 4px solid #c9985e;
}

.pest-guide_pillarCard__gYyQv:nth-child(3) {
  animation-delay: 0.4s;
  border-top: 4px solid #7a9b7f;
}

.pest-guide_pillarCard__gYyQv:nth-child(4) {
  animation-delay: 0.5s;
  border-top: 4px solid #a85d4e;
}

.pest-guide_pillarCard__gYyQv:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(31, 38, 32, 0.15);
  border-top-width: 5px;
}

.pest-guide_pillarNumber__agk86 {
  font-family: var(--serif-display);
  font-size: 3rem;
  font-weight: 400;
  color: #5a6359;
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.pest-guide_pillarTitle__t_B6i {
  font-family: var(--serif-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a2818;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

.pest-guide_pillarDesc__jTkGj {
  font-size: 0.95rem;
  color: #5a6359;
  margin-bottom: 1.5rem;
  line-height: 1.75;
  letter-spacing: 0.2px;
}

.pest-guide_pillarList__RCdm3 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pest-guide_pillarList__RCdm3 li {
  font-size: 0.9rem;
  color: #1f2620;
  padding-left: 1.5rem;
  position: relative;
  transition: all 0.2s ease;
}

.pest-guide_pillarList__RCdm3 li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #c9985e;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* ===== BENEFICIALS SECTION ===== */
.pest-guide_beneficialsSection__95zN4 {
  margin: 6rem 0;
}

.pest-guide_beneficialsGrid__uT9_z {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.pest-guide_beneficialCard__Z9JyM {
  background: #faf8f3;
  border: 2px solid rgba(31, 38, 32, 0.15);
  padding: 2rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  gap: 1.5rem;
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  animation: ag-pest-fadeInUp 0.8s ease-out forwards;
}

.pest-guide_beneficialCard__Z9JyM:nth-child(1) {
  animation-delay: 0.1s;
}

.pest-guide_beneficialCard__Z9JyM:nth-child(2) {
  animation-delay: 0.15s;
}

.pest-guide_beneficialCard__Z9JyM:nth-child(3) {
  animation-delay: 0.2s;
}

.pest-guide_beneficialCard__Z9JyM:nth-child(4) {
  animation-delay: 0.25s;
}

.pest-guide_beneficialCard__Z9JyM:nth-child(5) {
  animation-delay: 0.3s;
}

.pest-guide_beneficialCard__Z9JyM:nth-child(6) {
  animation-delay: 0.35s;
}

.pest-guide_beneficialCard__Z9JyM:hover {
  border-color: #a85d4e;
  box-shadow: 0 16px 48px rgba(31, 38, 32, 0.15);
  transform: translateY(-6px);
}

.pest-guide_beneficialIcon__G_Htz {
  font-size: 3rem;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 2px 4px rgba(31, 38, 32, 0.1));
}

.pest-guide_beneficialCard__Z9JyM:hover .pest-guide_beneficialIcon__G_Htz {
  transform: scale(1.12);
}

.pest-guide_beneficialInfo___SCsI {
  flex: 1;
}

.pest-guide_beneficialName__CU_8p {
  font-family: var(--serif-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a2818;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

.pest-guide_beneficialLatin__fZH1C {
  font-family: var(--sans-modern);
  font-size: 0.8rem;
  font-style: italic;
  color: #5a6359;
  margin: 0 0 1rem 0;
}

.pest-guide_beneficialRole__aWpb4 {
  font-family: var(--sans-modern);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a85d4e;
  margin: 0 0 1rem 0;
}

.pest-guide_beneficialFacts__VPgi8 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pest-guide_beneficialFacts__VPgi8 li {
  font-size: 0.85rem;
  color: #5a6359;
  padding-left: 1rem;
  position: relative;
  line-height: 1.5;
}

.pest-guide_beneficialFacts__VPgi8 li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #c9985e;
  font-weight: 600;
}

/* ===== PESTS SECTION ===== */
.pest-guide_pestsSection__pestsSection {
  margin: 6rem 0;
}

/* fallback */
.pest-guide_pestsGrid__6vdfk {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.pest-guide_pestCard__t2r0S {
  background: #faf8f3;
  border: 2px solid rgba(31, 38, 32, 0.08);
  padding: 2rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  animation: ag-pest-fadeInUp 0.8s ease-out forwards;
}

.pest-guide_pestCard__t2r0S:nth-child(1) {
  animation-delay: 0.2s;
}

.pest-guide_pestCard__t2r0S:nth-child(2) {
  animation-delay: 0.25s;
}

.pest-guide_pestCard__t2r0S:nth-child(3) {
  animation-delay: 0.3s;
}

.pest-guide_pestCard__t2r0S:nth-child(4) {
  animation-delay: 0.35s;
}

.pest-guide_pestCard__t2r0S:hover {
  border-color: #a85d4e;
  box-shadow: 0 8px 24px rgba(31, 38, 32, 0.1);
  transform: translateY(-4px);
}

.pest-guide_pestHeader__xJBK3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid rgba(31, 38, 32, 0.08);
  padding-bottom: 1.5rem;
}

.pest-guide_pestCard__t2r0S:hover .pest-guide_pestHeader__xJBK3 {
  border-bottom-color: #a85d4e;
}

.pest-guide_pestIcon__a4nkp {
  font-size: 2.5rem;
  transition: all 0.3s ease;
}

.pest-guide_pestCard__t2r0S:hover .pest-guide_pestIcon__a4nkp {
  transform: scale(1.1) rotate(4deg);
}

.pest-guide_pestName__c8TyU {
  font-family: var(--serif-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: #1a2818;
  margin: 0;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

.pest-guide_pestMethods__m_tNQ {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.pest-guide_pestMethod__tXJav {
  padding: 1rem;
  background: rgba(31, 38, 32, 0.02);
  border-radius: 2px;
  border-left: 2px solid rgba(31, 38, 32, 0.08);
  transition: all 0.2s ease;
}

.pest-guide_pestCard__t2r0S:hover .pest-guide_pestMethod__tXJav {
  background: rgba(31, 38, 32, 0.04);
  border-left-color: #c9985e;
}

.pest-guide_pestMethod__tXJav strong {
  font-family: var(--sans-modern);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a85d4e;
  display: block;
  margin-bottom: 0.5rem;
}

.pest-guide_pestMethod__tXJav p {
  font-size: 0.85rem;
  color: #5a6359;
  margin: 0;
  line-height: 1.5;
}

/* ===== LAST RESORT SECTION ===== */
.pest-guide_lastResortSection__jjt1p {
  margin: 6rem 0;
  background: linear-gradient(135deg, rgba(168, 93, 78, 0.06) 0%, rgba(201, 152, 94, 0.04) 100%);
  padding: 3rem 2rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  position: relative;
  overflow: hidden;
}

.pest-guide_warningBox__C_HL7 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  background: #faf8f3;
  padding: 2rem;
  border-left: 4px solid #a85d4e;
  margin: 2rem auto;
  max-width: 700px;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(31, 38, 32, 0.1);
  position: relative;
  z-index: 1;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.2s forwards;
}

.pest-guide_warningIcon__zNSDc {
  font-size: 1.75rem;
  flex-shrink: 0;
  animation: ag-pest-shimmer 2s ease-in-out infinite;
}

.pest-guide_warningTitle__wnvRh {
  font-family: var(--serif-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #a85d4e;
  margin: 0 0 1rem 0;
  letter-spacing: -0.015em;
}

.pest-guide_warningText__gxC7r {
  font-size: 0.95rem;
  color: #5a6359;
  line-height: 1.7;
  margin: 0;
}

.pest-guide_pesticidesGrid__OjTYT {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}

.pest-guide_pesticideCard__Pvhrg {
  background: #faf8f3;
  border: 2px solid #a85d4e;
  padding: 2rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  animation: ag-pest-fadeInUp 0.8s ease-out forwards;
}

.pest-guide_pesticideCard__Pvhrg:nth-child(1) {
  animation-delay: 0.2s;
}

.pest-guide_pesticideCard__Pvhrg:nth-child(2) {
  animation-delay: 0.25s;
}

.pest-guide_pesticideCard__Pvhrg:nth-child(3) {
  animation-delay: 0.3s;
}

.pest-guide_pesticideCard__Pvhrg:nth-child(4) {
  animation-delay: 0.35s;
}

.pest-guide_pesticideCard__Pvhrg:hover {
  box-shadow: 0 16px 48px rgba(31, 38, 32, 0.15);
  transform: translateY(-6px);
  border-color: #1a2818;
}

.pest-guide_pesticideHeader__4NRcE {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.pest-guide_pesticideName__3PZf_ {
  font-family: var(--serif-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: #a85d4e;
  margin: 0;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

.pest-guide_pesticideCard__Pvhrg:hover .pest-guide_pesticideName__3PZf_ {
  color: #1a2818;
}

.pest-guide_pesticideTag__Kniae {
  font-family: var(--sans-modern);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a85d4e;
  background: rgba(168, 93, 78, 0.1);
  padding: 0.5rem 1rem;
  white-space: nowrap;
  border-radius: 2px;
}

.pest-guide_pesticideSource__Xj7Ng {
  font-family: var(--sans-modern);
  font-size: 0.85rem;
  color: #5a6359;
  margin: 0 0 1.5rem 0;
  font-style: italic;
}

.pest-guide_pesticideFacts__BoSQC {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pest-guide_pesticideFacts__BoSQC li {
  font-size: 0.85rem;
  color: #1f2620;
  padding-left: 1rem;
  position: relative;
  line-height: 1.5;
}

.pest-guide_pesticideFacts__BoSQC li::before {
  content: '!';
  position: absolute;
  left: 0;
  color: #a85d4e;
  font-weight: 700;
  font-size: 0.7rem;
}

/* ===== CTA SECTION ===== */
.pest-guide_ctaFinal__lINkD {
  background: linear-gradient(135deg, #1a2818 0%, #2d4a34 100%);
  color: #faf8f3;
  padding: 4.5rem 2rem;
  margin: 6rem 0;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pest-guide_ctaContent__ykid6 {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.2s forwards;
}

.pest-guide_ctaLabel__0FZQP {
  font-family: var(--sans-modern);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9985e;
  display: block;
  margin-bottom: 1rem;
}

.pest-guide_ctaTitle__y6JyV {
  font-family: var(--serif-display);
  font-size: clamp(1.875rem, 3.5vw, 2.875rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
  background: linear-gradient(135deg, #faf8f3 0%, rgba(250, 248, 243, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pest-guide_ctaText__soys1 {
  font-size: 1.05rem;
  line-height: 1.8;
  opacity: 0.95;
  margin-bottom: 2rem;
}

.pest-guide_ctaBtn__Mqygt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans-modern);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 2.2rem;
  background: #f35201;
  color: #ffffff !important;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(31, 38, 32, 0.1);
}

.pest-guide_ctaBtn__Mqygt:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(243, 82, 1, 0.3);
  color: #ffffff !important;
}

/* ===== RELATED SECTION ===== */
.pest-guide_relatedSection__rUHoV {
  margin: 6rem 0 3rem;
  padding: 3rem 0;
}

.pest-guide_relatedTitle__nMQku {
  font-family: var(--serif-display);
  font-size: 1.875rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 3rem;
  color: #1a2818;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  animation: ag-pest-fadeInUp 0.8s ease-out 0.2s both;
}

.pest-guide_relatedCards__DVRUd {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.pest-guide_relatedCard__tA29y {
  background: #f3f0e8;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  border: 2px solid rgba(31, 38, 32, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(31, 38, 32, 0.06);
  display: block;
  animation: ag-pest-fadeInUp 0.8s ease-out forwards;
}

.pest-guide_relatedCard__tA29y:nth-child(1) {
  animation-delay: 0.2s;
}

.pest-guide_relatedCard__tA29y:nth-child(2) {
  animation-delay: 0.25s;
}

.pest-guide_relatedCard__tA29y:nth-child(3) {
  animation-delay: 0.3s;
}

.pest-guide_relatedCard__tA29y:hover {
  border-color: #a85d4e;
  background: #faf8f3;
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(31, 38, 32, 0.15);
}

.pest-guide_relatedCard__tA29y h4 {
  font-family: var(--serif-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a2818;
  margin: 0 0 1rem 0;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
  line-height: 1.4;
}

.pest-guide_relatedCard__tA29y:hover h4 {
  color: #a85d4e;
}

.pest-guide_relatedCard__tA29y p {
  font-size: 0.9rem;
  color: #5a6359;
  margin: 0;
  line-height: 1.65;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .pest-guide_sideNav__7kUDD {
    display: none;
  }

  .pest-guide_mainContent__jzglT {
    left: 0;
  }
}

@media (max-width: 768px) {
  .pest-guide_pestPage__4Hy4c {
    font-size: 15px;
  }

  .pest-guide_heroGrid__0oP7V {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pest-guide_heroLabel__aWqFM,
  .pest-guide_heroTitle__ZRjOw,
  .pest-guide_heroTagline__6W9fu,
  .pest-guide_heroMeta__r3BLo {
    grid-column: 1;
  }

  .pest-guide_heroVisual__dzd9x {
    flex-direction: row;
    gap: 1rem;
    margin-top: 1rem;
    grid-column: 1;
    grid-row: auto;
  }

  .pest-guide_visualBlock__7h7Ds {
    font-size: 2.5rem;
  }

  .pest-guide_introGrid__nySPr {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .pest-guide_pillarsGrid__9GWYD,
  .pest-guide_pestsGrid__6vdfk,
  .pest-guide_pesticidesGrid__OjTYT,
  .pest-guide_beneficialsGrid__uT9_z {
    grid-template-columns: 1fr;
  }

  .pest-guide_pestMethods__m_tNQ {
    grid-template-columns: 1fr;
  }

  .pest-guide_sectionHeader__sEx19 {
    padding: 1.5rem 0;
    margin-bottom: 2rem;
  }
}

/* ============================================
   organic-vs-conventional-rice-imported.css
   ============================================ */

/*
  Organic vs Conventional Rice — CSS Module shim for Shopify import
  Provides utility classes and styling for the imported blog article.
  Ensures proper display of all comparison elements and statistics.
*/

/* ===== CSS CUSTOM PROPERTIES ===== */
.agriko-imported-article {
  --organic-green-deep: #0e3e29;
  --organic-green-rich: #1a5c3a;
  --organic-green-medium: #2d7a4f;
  --organic-green-light: #89c98a;
  --organic-gold: #f6b900;
  --organic-gold-light: #f9d86e;
  --organic-cream: #faf8f3;
  --organic-cream-light: #fefcf8;
  --organic-earth: #8b6f47;
  --organic-earth-light: #c9a86b;
  --organic-danger: #dc2626;
  --organic-danger-light: #fca5a5;
}

/* ===== ANIMATIONS ===== */
@keyframes organic-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes organic-fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes organic-pulse {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes organic-shimmer {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* ===== COMPARISON CARD STYLES ===== */
.agriko-imported-article .comparison-card {
  background: #ffffff;
  border: 2px solid rgba(14, 62, 41, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.agriko-imported-article .comparison-card:hover {
  border-color: rgba(246, 185, 0, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ===== STATISTIC CARDS ===== */
.agriko-imported-article .stat-card {
  background: linear-gradient(135deg, #faf8f3 0%, #f3f0e8 100%);
  border: 2px solid rgba(14, 62, 41, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.agriko-imported-article .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f6b900 0%, #f9d86e 100%);
}

.agriko-imported-article .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .stat-number {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 3rem;
  font-weight: 700;
  color: #f6b900;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

.agriko-imported-article .stat-label {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0e3e29;
  margin-bottom: 1rem;
  display: block;
}

.agriko-imported-article .stat-description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #525252;
}

/* ===== TIERED COMPARISON ===== */
.agriko-imported-article .tier-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 3rem 0;
}

@media (min-width: 768px) {
  .agriko-imported-article .tier-comparison {
    grid-template-columns: 1fr 1fr;
  }
}

.agriko-imported-article .tier-section {
  background: #ffffff;
  border: 2px solid rgba(14, 62, 41, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
}

.agriko-imported-article .tier-section.conventional {
  border-left: 4px solid #dc2626;
}

.agriko-imported-article .tier-section.organic {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #faf8f3 0%, #f0f9f4 100%);
}

.agriko-imported-article .tier-title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #0e3e29;
}

.agriko-imported-article .tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agriko-imported-article .tier-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #2a2a2a;
}

.agriko-imported-article .tier-list li:last-child {
  border-bottom: none;
}

.agriko-imported-article .tier-list li strong {
  color: #0e3e29;
  font-weight: 600;
}

/* ===== ENVIRONMENTAL SECTION ===== */
.agriko-imported-article .environmental-impact {
  background: linear-gradient(135deg, rgba(14, 62, 41, 0.03) 0%, rgba(16, 185, 129, 0.02) 100%);
  border-radius: 1rem;
  padding: 3rem 2rem;
  margin: 3rem 0;
  text-align: center;
}

.agriko-imported-article .impact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.agriko-imported-article .impact-stat {
  text-align: center;
}

.agriko-imported-article .impact-number {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: #10b981;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.agriko-imported-article .impact-label {
  font-size: 0.9rem;
  color: #525252;
  font-weight: 500;
}

/* ===== QUOTE SECTION ===== */
.agriko-imported-article blockquote {
  background: linear-gradient(135deg, #faf8f3 0%, #f3f0e8 100%);
  border-left: 4px solid #8b6f47;
  padding: 2rem;
  margin: 3rem 0;
  border-radius: 0.5rem;
  font-style: italic;
}

.agriko-imported-article blockquote p {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 1.25rem;
  color: #0e3e29;
  line-height: 1.6;
  margin: 0;
}

.agriko-imported-article blockquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #8b6f47;
  font-style: normal;
  font-weight: 500;
}

.agriko-imported-article blockquote cite::before {
  content: '— ';
}

/* ===== TASTE COMPARISON ===== */
.agriko-imported-article .taste-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 3rem 0;
}

@media (min-width: 768px) {
  .agriko-imported-article .taste-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.agriko-imported-article .taste-card {
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
}

.agriko-imported-article .taste-card.conventional {
  background: #f5f5f5;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.agriko-imported-article .taste-card.organic {
  background: linear-gradient(135deg, #faf8f3 0%, #f0fdf4 100%);
  border: 2px solid rgba(16, 185, 129, 0.3);
}

.agriko-imported-article .taste-title {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #0e3e29;
}

.agriko-imported-article .taste-card.conventional .taste-title {
  color: #666;
}

.agriko-imported-article .taste-card.organic .taste-title {
  color: #10b981;
}

.agriko-imported-article .taste-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agriko-imported-article .taste-features li {
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: #2a2a2a;
}

.agriko-imported-article .taste-features li strong {
  font-weight: 600;
  color: #0e3e29;
}

/* ===== VERDICT SECTION ===== */
.agriko-imported-article .verdict-section {
  background: linear-gradient(135deg, #0e3e29 0%, #1a5c3a 100%);
  color: #ffffff;
  padding: 3rem 2rem;
  border-radius: 1rem;
  margin: 3rem 0;
  text-align: center;
}

.agriko-imported-article .verdict-section h2 {
  font-family: var(--ag-theme-font-display, Georgia, serif);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #f6b900;
}

.agriko-imported-article .verdict-section p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(250, 248, 243, 0.9);
  max-width: 700px;
  margin: 0 auto;
}

/* ===== TYPOGRAPHY OVERRIDES ===== */
.agriko-imported-article h2,
.agriko-imported-article h3 {
  font-family: var(--ag-theme-font-display, Georgia, serif) !important;
  font-weight: 600 !important;
  color: #0e3e29 !important;
  line-height: 1.3 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

.agriko-imported-article h2 {
  font-size: 1.875rem !important;
}

.agriko-imported-article h3 {
  font-size: 1.5rem !important;
}

.agriko-imported-article p {
  font-family: 'Work Sans', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #2a2a2a !important;
  margin-bottom: 1rem !important;
}

.agriko-imported-article ul,
.agriko-imported-article ol {
  font-family: 'Work Sans', system-ui, sans-serif !important;
}

.agriko-imported-article li {
  font-family: 'Work Sans', system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #2a2a2a !important;
  margin-bottom: 0.5rem !important;
}

.agriko-imported-article strong {
  font-weight: 600 !important;
  color: #0e3e29 !important;
}

.agriko-imported-article em {
  font-style: italic !important;
  color: #8b6f47 !important;
}

/* ===== UTILITY CLASSES ===== */

/* Spacing */
.agriko-imported-article .mb-5 {
  margin-bottom: 1.25rem;
}

.agriko-imported-article .mb-6 {
  margin-bottom: 1.5rem;
}

.agriko-imported-article .mb-8 {
  margin-bottom: 2rem;
}

.agriko-imported-article .mb-10 {
  margin-bottom: 2.5rem;
}

.agriko-imported-article .mt-4 {
  margin-top: 1rem;
}

.agriko-imported-article .mt-6 {
  margin-top: 1.5rem;
}

.agriko-imported-article .mt-8 {
  margin-top: 2rem;
}

.agriko-imported-article .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.agriko-imported-article .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Text colors */
.agriko-imported-article .text-center {
  text-align: center;
}

/* Colors with CSS variables */
.agriko-imported-article [class~="text-[var(--organic-green-deep)]"] {
  color: #0e3e29;
}

.agriko-imported-article [class~="text-[var(--organic-gold)]"] {
  color: #f6b900;
}

.agriko-imported-article [class~="text-[var(--organic-earth)]"] {
  color: #8b6f47;
}

/* Font families */
.agriko-imported-article .font-serif {
  font-family: var(--ag-theme-font-display, Georgia, serif) !important;
}

.agriko-imported-article .font-sans {
  font-family: 'Work Sans', system-ui, sans-serif !important;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 640px) {
  .agriko-imported-article .stat-number {
    font-size: 3.5rem;
  }

  .agriko-imported-article .tier-comparison {
    gap: 3rem;
  }
}

@media (min-width: 768px) {

  .agriko-imported-article .comparison-card,
  .agriko-imported-article .tier-section {
    padding: 2.5rem;
  }

  .agriko-imported-article .environmental-impact {
    padding: 4rem 3rem;
  }
}

@media (min-width: 1024px) {
  .agriko-imported-article .stat-card {
    padding: 2.5rem;
  }
}

/* ===== ANIMATION STATES ===== */
.agriko-imported-article [data-reveal],
.agriko-imported-article [data-inview],
.agriko-imported-article [class*="reveal"],
.agriko-imported-article [class*="fade-in"],
.agriko-imported-article [class*="slide-up"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.agriko-imported-article [style*="max-height: 0"],
.agriko-imported-article [style*="max-height:0"] {
  max-height: none !important;
  overflow: visible !important;
}


/* ============================================
   water-conservation-imported.css
   ============================================ */

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./src/app/blog/water-conservation-farming/water-conservation.module.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Water Conservation — Terroir Cartography Design System */
/* Inspired by geological surveys, topographic maps, and earth science */

.water-conservation_root__X3Btm {
  width: 100%;
  background: #FAF6EE;
  position: relative;
  color: #1A1714;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scoped reset to mirror the source app's typography/list defaults. */
.water-conservation_root__X3Btm h1,
.water-conservation_root__X3Btm h2,
.water-conservation_root__X3Btm h3,
.water-conservation_root__X3Btm h4,
.water-conservation_root__X3Btm h5,
.water-conservation_root__X3Btm h6 {
  margin: 0;
}

.water-conservation_root__X3Btm p {
  margin: 0 0 1rem 0;
}


/* Topographic contour background texture */
.water-conservation_root__X3Btm::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    repeating-conic-gradient(from 0deg at 15% 30%, transparent 0deg, rgba(139, 90, 43, 0.012) 1deg, transparent 2deg),
    repeating-conic-gradient(from 45deg at 75% 60%, transparent 0deg, rgba(47, 79, 79, 0.01) 1deg, transparent 2deg);
  pointer-events: none;
  z-index: 0;
}

.water-conservation_container__VNuqG {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  position: relative;
  z-index: 1;
}

.water-conservation_section__yMb9W {
  padding: clamp(4rem, 10vw, 7rem) 0;
}

/* ═══════════════════════════════════════════
   HERO — Full-bleed geological survey header
   ═══════════════════════════════════════════ */
.water-conservation_hero__HADvw {
  position: relative;
  padding: clamp(6rem, 18vw, 10rem) 0 clamp(4rem, 12vw, 7rem);
  background: #2D2A24;
  overflow: hidden;
}

.water-conservation_hero__HADvw::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(184, 115, 51, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 20%, rgba(47, 79, 79, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.water-conservation_hero__HADvw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, #FAF6EE 0%, rgba(250, 246, 238, 0.4) 100%);
  pointer-events: none;
  z-index: 2;
}

.water-conservation_heroContent__fC0yT {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: relative;
  z-index: 3;
}

.water-conservation_heroLabel__YUpwR {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #B87333;
  padding: 6px 16px;
  background: rgba(184, 115, 51, 0.1);
  border: 1px solid rgba(184, 115, 51, 0.25);
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 2px;
}

.water-conservation_heroTitle__IUCdF {
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(3.25rem, 10.5vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #FFFBF5;
  max-width: 820px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.water-conservation_heroStat__DWsax {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  background: rgba(245, 240, 224, 0.06);
  border-left: 3px solid #B87333;
  border-radius: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  width: -moz-fit-content;
  width: fit-content;
  transition: background 300ms ease;
}

.water-conservation_heroStat__DWsax:hover {
  background: rgba(245, 240, 224, 0.1);
}

.water-conservation_heroStatValue__FnrMs {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 900;
  color: #D4956B;
  line-height: 1;
  letter-spacing: -0.02em;
}

.water-conservation_heroStatLabel__h0HQD {
  font-family: 'Karla', sans-serif;
  font-size: 1.05rem;
  color: #F5F0E0;
  font-weight: 600;
}

.water-conservation_heroMeta__zBWhK {
  display: flex;
  gap: 2rem;
  font-size: 0.8rem;
  color: rgba(245, 240, 224, 0.5);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   STATS GRID — Data cards as survey specimens
   ═══════════════════════════════════════════ */
.water-conservation_statsGrid__ebF_6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: rgba(45, 42, 36, 0.08);
  border: 1px solid rgba(45, 42, 36, 0.08);
}

@media (max-width: 768px) {
  .water-conservation_statsGrid__ebF_6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .water-conservation_statsGrid__ebF_6 {
    grid-template-columns: 1fr;
  }
}

.water-conservation_statCard__I_YtC {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.25rem;
  background: #FFFBF5;
  transition: background 300ms ease, transform 300ms ease;
  position: relative;
  border: 1px solid rgba(139, 90, 43, 0.12);
}

.water-conservation_statCard__I_YtC:hover {
  background: #FFF8F0;
  transform: translateY(-2px);
  border-color: rgba(139, 90, 43, 0.25);
}

.water-conservation_statCardLabel__KZoV7 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #1A1714;
}

.water-conservation_statCardValue__NA5_N {
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 900;
  color: #8B5A23;
  line-height: 1;
  letter-spacing: -0.02em;
}

.water-conservation_statCardDesc__JpHdE {
  font-size: 0.875rem;
  color: #6B6459;
  line-height: 1.6;
}

.water-conservation_progressBar__kiJ5Z {
  height: 3px;
  background: rgba(45, 42, 36, 0.08);
  overflow: hidden;
  margin-top: auto;
}

.water-conservation_progressFill__H5soR {
  height: 100%;
  background: linear-gradient(90deg, #B87333 0%, #D4956B 100%);
  border-radius: 0;
  position: relative;
}

/* ═══════════════════════════════════════════
   SECTION HEADERS — Survey field notes
   ═══════════════════════════════════════════ */
.water-conservation_sectionHeader__Cvs8a {
  margin-bottom: 2.5rem;
}

.water-conservation_sectionLabel__SMMZH {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8B5A23;
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px solid #8B5A23;
  width: -moz-fit-content;
  width: fit-content;
}

.water-conservation_sectionTitle__J2_EE {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 900;
  color: #1A1714;
  margin-bottom: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
}

.water-conservation_sectionDescription__eiOaH {
  font-size: 1.1rem;
  color: #6B6459;
  line-height: 1.75;
  max-width: 720px;
}

.water-conservation_contentSection__5EVOo {
  margin-bottom: 2rem;
}

.water-conservation_bodyLg___uq5q {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: #2D2A24;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   PULL QUOTE — Specimen label style
   ═══════════════════════════════════════════ */
.water-conservation_pullQuote__r3eyv {
  padding: 3rem 3rem 3rem 3.5rem;
  margin: 3rem 0;
  background: #1A1714;
  border-left: none;
  border-radius: 0;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.water-conservation_pullQuote__r3eyv::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #D4956B;
}

.water-conservation_pullQuoteText__X6rQP {
  font-family: 'Karla', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-style: italic;
  font-weight: 600;
  color: #FFFBF5;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.water-conservation_pullQuoteAttribution__fWNyf {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: #B87333;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════
   TIMELINE — Chart section (geological layers)
   ═══════════════════════════════════════════ */
.water-conservation_timeline__ocGKq {
  margin: 2.5rem 0;
  padding: 2.5rem;
  background: #2D2A24;
  border-radius: 0;
  border: none;
}

.water-conservation_timelineChart__RBdJ1 {
  width: 100%;
  height: 280px;
  margin-bottom: 2rem;
}

.water-conservation_timelineStats__3ScdI {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(245, 240, 224, 0.08);
}

.water-conservation_timelineStat__Rs0Aq {
  padding: 1.75rem;
  background: #2D2A24;
}

.water-conservation_timelineStatLabel__Ia0kW {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B87333;
  display: block;
  margin-bottom: 0.5rem;
}

.water-conservation_timelineStatValue__NSkE0 {
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: #F5F0E0;
  line-height: 1;
}

/* ═══════════════════════════════════════════
   TECHNIQUE CARDS — Field notebook entries
   ═══════════════════════════════════════════ */
.water-conservation_techniqueCard___PMeB {
  padding: 2.5rem;
  border-left: none;
  background: transparent;
  border: 1px solid rgba(45, 42, 36, 0.1);
  border-radius: 0;
  margin-bottom: 2rem;
  transition: border-color 300ms ease;
  position: relative;
}

.water-conservation_techniqueCard___PMeB::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2F4F4F;
}

.water-conservation_techniqueCard___PMeB:hover {
  border-color: rgba(45, 42, 36, 0.2);
}

.water-conservation_techniqueIcon__Y_RWk {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.water-conservation_techniqueTitle__vJRF5 {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  color: #1A1714;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
}

.water-conservation_techniqueContent__XmUQO {
  display: grid;
  gap: 1.5rem;
}

.water-conservation_techniqueSectionTitle__Ek5SB {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #2F4F4F;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════
   BULLET LISTS — Survey notation style
   ═══════════════════════════════════════════ */
.water-conservation_bulletList__jmXo7 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.water-conservation_bulletItem__PnBEU {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #3D3A34;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(45, 42, 36, 0.06);
  transition: padding-left 200ms ease;
  cursor: default;
}

.water-conservation_bulletItem__PnBEU:last-child {
  border-bottom: none;
}

.water-conservation_bulletItem__PnBEU:hover {
  padding-left: 0.5rem;
}

.water-conservation_bulletItem__PnBEU::before {
  content: '—';
  color: #B87333;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1em;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════
   SPECS GRID — Specimen detail cards
   ═══════════════════════════════════════════ */
.water-conservation_specsGrid__SnRit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(45, 42, 36, 0.08);
  border: 1px solid rgba(45, 42, 36, 0.08);
}

.water-conservation_spec__zCBqP {
  padding: 2rem;
  background: #FFFBF5;
  border-radius: 0;
  border: 1px solid rgba(139, 90, 43, 0.1);
  transition: background 200ms ease, transform 200ms ease;
}

.water-conservation_spec__zCBqP:hover {
  background: #FFF8F0;
  transform: translateY(-2px);
  border-color: rgba(139, 90, 43, 0.25);
}

.water-conservation_specLabel__MpQzt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B87333;
  display: block;
  margin-bottom: 0.75rem;
}

.water-conservation_specValue__poid7 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2D2A24;
}

/* ═══════════════════════════════════════════
   TABLE — Data matrix (survey report style)
   ═══════════════════════════════════════════ */
.water-conservation_tableWrapper__h6OwY {
  position: relative;
  overflow-x: auto;
  border: 1px solid rgba(45, 42, 36, 0.12);
}

.water-conservation_table__W_YJC {
  width: 100%;
  border-collapse: collapse;
  background: #F5F0E0;
}

.water-conservation_tableHeader__WPrn4 {
  background: #2D2A24;
  color: #F5F0E0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.water-conservation_tableHeaderCell__k72uo {
  padding: 1.25rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-align: left;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.water-conservation_tableBody__ZNnwb tr {
  border-bottom: 1px solid rgba(45, 42, 36, 0.06);
  transition: background 200ms ease;
}

.water-conservation_tableBody__ZNnwb tr:hover {
  background: rgba(184, 115, 51, 0.04);
}

.water-conservation_tableCell__gvQlI {
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #3D3A34;
}

.water-conservation_tableCellLabel__U6Y40 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #2D2A24;
  font-size: 0.8rem;
}

.water-conservation_performanceBar__5XOqZ {
  height: 6px;
  background: rgba(45, 42, 36, 0.06);
  overflow: hidden;
  margin: 0.5rem 0;
  width: 100%;
}

.water-conservation_performanceBarFill__wFYTs {
  height: 100%;
  background: linear-gradient(90deg, #2F4F4F 0%, #4A7C7C 100%);
  position: relative;
}

.water-conservation_performanceLabel__54O0f {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: #2F4F4F;
  margin-top: 0.35rem;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════
   CTA — Call to action (earth-toned)
   ═══════════════════════════════════════════ */
.water-conservation_ctaSection__bShOA {
  padding: clamp(3rem, 8vw, 5rem) 2rem;
  background: #2D2A24;
  border-radius: 0;
  color: #F5F0E0;
  margin: 0;
  text-align: center;
  position: relative;
}

.water-conservation_ctaSection__bShOA::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(184, 115, 51, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.water-conservation_ctaTitle__BLefC {
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 900;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

/* Preserve source spacing/colors against global theme heading overrides. */
.template-article .ag-imported-article-shell .water-conservation_sectionTitle__J2_EE {
  margin-bottom: 1.5rem !important;
}

.template-article .ag-imported-article-shell .water-conservation_ctaTitle__BLefC {
  margin-bottom: 1.5rem !important;
  color: #F5F0E0 !important;
}

.water-conservation_ctaDescription__AuYF4 {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(245, 240, 224, 0.7);
}

.water-conservation_button__rSJVb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.125rem 3rem;
  background: #D4956B;
  color: #1A1714;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid #D4956B;
  border-radius: 0;
  cursor: pointer;
  transition: all 250ms ease;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.water-conservation_button__rSJVb:hover {
  background: #FFFBF5;
  color: #8B5A23;
  border-color: #8B5A23;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.water-conservation_dataSm__lfbfS {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2D2A24;
}

/* ═══════════════════════════════════════════
   ANIMATIONS — Intentionally minimal
   ═══════════════════════════════════════════ */
@keyframes water-conservation_drawLine__EcX_l {
  from {
    stroke-dashoffset: 800;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes water-conservation_fadeIn__7xM_L {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .water-conservation_timelineChart__RBdJ1 {
    height: 220px;
  }

  .water-conservation_specsGrid__SnRit {
    grid-template-columns: 1fr;
  }

  .water-conservation_tableWrapper__h6OwY {
    overflow-x: auto;
  }

  .water-conservation_timelineStats__3ScdI {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .water-conservation_heroStat__DWsax {
    padding: 1.25rem;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .water-conservation_heroMeta__zBWhK {
    flex-direction: column;
    gap: 0.25rem;
  }

  .water-conservation_techniqueCard___PMeB {
    padding: 1.75rem;
  }

  .water-conservation_ctaSection__bShOA {
    padding: 2.5rem 1.5rem;
  }

  .water-conservation_button__rSJVb {
    width: 100%;
    justify-content: center;
  }

  .water-conservation_pullQuote__r3eyv {
    padding: 1.75rem 1.75rem 1.75rem 2.25rem;
  }

  .water-conservation_timeline__ocGKq {
    padding: 1.75rem;
  }

  .water-conservation_timelineStats__3ScdI {
    grid-template-columns: 1fr;
  }
}

/* PRINT */
@media print {
  .water-conservation_root__X3Btm {
    background: white;
  }

  .water-conservation_hero__HADvw {
    background: #f5f5f5 !important;
  }

  .water-conservation_heroTitle__IUCdF,
  .water-conservation_heroStatLabel__h0HQD {
    color: #2D2A24 !important;
  }

  .water-conservation_button__rSJVb,
  .water-conservation_ctaSection__bShOA {
    display: none;
  }
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .water-conservation_root__X3Btm * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}




/* ============================================
   imported-article-filipino-remedies.css
   ============================================ */

/* Overrides for Filipino Herbal Remedies to match the cinema aesthetic */

.template-article .ag-imported-article-shell .max-section,
.template-article .ag-imported-article-shell .max-section-alt,
.template-article .ag-imported-article-shell .max-section-coral {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media (min-width: 768px) {

  .template-article .ag-imported-article-shell .max-section,
  .template-article .ag-imported-article-shell .max-section-alt,
  .template-article .ag-imported-article-shell .max-section-coral {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
  }
}

.template-article .ag-imported-article-shell .max-hero-content {
  padding: 4rem 1.5rem !important;
  text-align: center;
}

@media (min-width: 768px) {
  .template-article .ag-imported-article-shell .max-hero-content {
    padding: 6rem 2rem !important;
  }
}

/* Typography Overrides */
.template-article .ag-imported-article-shell .max-hero-title {
  font-family: var(--ag-theme-font-display, 'Fraunces', serif) !important;
  font-size: clamp(3.5rem, 8vw, 6rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 1.5rem !important;
}

.template-article .ag-imported-article-shell .max-hero-subtitle {
  font-family: var(--ag-theme-font-body, 'Crimson Text', serif) !important;
  font-size: 1.25rem !important;
  max-width: 600px !important;
  margin: 0 auto 2rem !important;
  line-height: 1.4 !important;
}

.template-article .ag-imported-article-shell .max-section-title {
  font-family: var(--ag-theme-font-display, 'Fraunces', serif) !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem !important;
}

.template-article .ag-imported-article-shell .max-body-text {
  font-family: var(--ag-theme-font-body, 'Crimson Text', serif) !important;
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
  max-width: 720px !important;
}

.template-article .ag-imported-article-shell .max-card-title {
  font-family: var(--ag-theme-font-display, 'Fraunces', serif) !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* Fix Hero Image boundaries */
.template-article .ag-imported-article-shell .max-hero {
  min-height: 60vh !important;
  min-height: 60dvh !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  overflow: hidden;
}

.template-article .ag-imported-article-shell .max-hero-image {
  object-fit: cover !important;
  opacity: 0.25 !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.template-article .ag-imported-article-shell .max-hero-content {
  position: relative !important;
  z-index: 10 !important;
}

/* Card spacing normalized */
.template-article .ag-imported-article-shell .max-card-grid {
  gap: 2.5rem !important;
  margin-top: 3.5rem !important;
}

.template-article .ag-imported-article-shell .max-card {
  padding: 2.5rem !important;
}