/* =========================================================
   Force X — redesign.css  ·  "Modern European Apothecary"
   Loaded LAST. Reskins the entire site (all 38 pages) without
   touching any copy. Warm bone paper · deep ink · pine-green trust
   frame · crimson-clay action accent (echoes the FORCE X label) ·
   gold hairlines · Bricolage Grotesque + Fraunces + Hanken Grotesk.
   ========================================================= */

/* ---------- 1. Token overrides (win over main.css :root) ---------- */
:root {
  /* Fresh mint paper / green ink — pharmacy + natural */
  --color-bg:          #E9F3EB;
  --color-surface:     #FAFEFA;
  --color-surface-alt: #EFF7F0;
  --paper-2:           #E0EFE3;
  --color-text:        #14241C;
  --color-text-soft:   #46554C;
  --color-text-muted:  #7B8A80;
  --color-border:      #D2E3D6;
  --color-border-soft: #E2EDE4;

  /* Pharmacy emerald — structure / trust / action */
  --color-primary:        #1E7A52;   /* readable medicinal green */
  --color-primary-light:  #2F9A68;
  --color-primary-pale:   #DCEFE2;
  --color-primary-dark:   #126043;   /* white-text button bg, AAA */
  --color-secondary:      #1E7A52;
  --color-secondary-light:#2F9A68;

  /* Accent stays in the green family (clean apothecary look) */
  --color-accent:      #1F8A57;
  --color-accent-dark: #126043;      /* white-text CTA bg */
  --color-danger:      #B23B22;

  /* Gold / amber — a single herbal-warm spark (stars, prices, hairlines) */
  --gold:   #C2A35E;
  --amber:  #9C7B2A;

  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-btn: 10px;
  --radius-card: 18px;
  --radius-image: 18px;

  --shadow-sm: 0 1px 2px rgba(40,30,15,.05), 0 2px 6px rgba(40,30,15,.04);
  --shadow-md: 0 6px 18px rgba(40,30,15,.08), 0 2px 6px rgba(40,30,15,.05);
  --shadow-lg: 0 22px 50px rgba(35,28,15,.14);
  --shadow-cta: 0 12px 30px rgba(18,96,67,.28);
}

/* ---------- 2. Page atmosphere — warm radial mesh + fine grain ---------- */
body,
body.preset-botanical {
  background:
    radial-gradient(1100px 700px at 82% 0%, #CFE8D7 0%, transparent 58%),
    radial-gradient(900px 640px at -8% 12%, #DDF0E2 0%, transparent 54%),
    linear-gradient(180deg, #EEF7EF 0%, #E5F1E8 55%, #DEEFE3 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
body::before {  /* subtle paper grain — sits behind all content */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--color-accent); color: #fff; }

/* ---------- 3. Typography ---------- */
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
.modern-hero-h1, h1 { font-weight: 700; }
/* Fraunces italic flourish for emphasis inside display headings */
h1 em, h2 em, .heading-accent em { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--color-accent-dark); }

/* Section header accent — short gold rule */
.heading-accent::after {
  width: 56px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--color-accent));
}
.eyebrow, .modern-hero-content .eyebrow {
  background: transparent !important; color: var(--color-accent-dark) !important;
  border: 1px solid var(--color-accent); border-radius: 999px;
  font-family: var(--font-body); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; font-size: .72rem;
  padding: 6px 15px;
}

/* ---------- 4. Header ---------- */
.site-header {
  background: rgba(233,243,235,.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--color-border-soft);
}
.site-header.is-sticky { box-shadow: 0 6px 26px rgba(16,45,30,.12); background: rgba(238,247,240,.95); }
.brand-logo { border-radius: 10px; background: var(--surface, #fff); box-shadow: var(--shadow-sm); }
.brand-text strong { font-family: var(--font-display); font-weight: 700; color: var(--color-primary-dark); }
.brand-tag { color: var(--amber); letter-spacing: .14em; }
.nav-link { font-family: var(--font-body); font-weight: 600; color: var(--color-text-soft); border-radius: 999px; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active {
  color: var(--color-primary-dark); background: var(--color-primary-pale);
}

/* ---------- 5. Buttons ---------- */
.btn { border-radius: var(--radius-btn); font-family: var(--font-body); letter-spacing: .01em; }
.btn-primary, body.preset-botanical .btn-primary {
  background: linear-gradient(160deg, #2A9162 0%, #126043 100%);
  color: #fff !important; border-radius: var(--radius-btn);
  box-shadow: 0 12px 28px rgba(18,96,67,.30);
  border: 1px solid rgba(12,70,48,.45);
}
.btn-primary:hover, .btn-primary:focus-visible, body.preset-botanical .btn-primary:hover {
  background: linear-gradient(160deg, #31A06D 0%, #0E5239 100%);
  box-shadow: 0 16px 38px rgba(18,96,67,.40); transform: translateY(-2px);
}
.btn-secondary, .btn-ghost {
  background: transparent; color: var(--color-primary-dark);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover, .btn-ghost:hover { background: var(--color-primary-pale); color: var(--color-primary-dark); }
.btn-accent { background: var(--color-primary-dark); color: #fff !important; box-shadow: 0 10px 24px rgba(23,59,48,.28); }
.btn-accent:hover { background: #0f2c23; }
.cta-thumb { background: rgba(255,255,255,.85); border-radius: 8px; }

/* ---------- 6. Hero (base + homepage preset) ---------- */
.modern-hero, body.preset-botanical .modern-hero-preset {
  background:
    radial-gradient(680px 420px at 88% 12%, #CBE7D4 0%, transparent 62%),
    radial-gradient(560px 360px at 6% 90%, #DCEFE0 0%, transparent 60%),
    linear-gradient(168deg, #EFF8F0 0%, #E2F0E5 60%, #D5E9DA 100%);
  border-bottom: 1px solid var(--color-border-soft);
  overflow: clip;
}
.modern-hero-h1 { font-size: clamp(2rem, 3.2vw + 1rem, 3.5rem); }
.modern-hero-lead { color: var(--color-text-soft); font-size: clamp(1.02rem,.5vw+.92rem,1.2rem); }

/* Homepage decorative orbs → warm pine/clay glass, leaves hidden */
body.preset-botanical h1, body.preset-botanical h2, body.preset-botanical h3,
body.preset-botanical .heading-accent { font-family: var(--font-display); letter-spacing: -0.03em; }
body.preset-botanical .hero-blobs .leaf { display: none; }
body.preset-botanical .hero-blobs .blob { filter: blur(8px); opacity: .4; mix-blend-mode: multiply; }
body.preset-botanical .blob-1 { background: radial-gradient(circle at 35% 30%, #c4e3cd, #5fa07d); }
body.preset-botanical .blob-2 { background: radial-gradient(circle at 60% 40%, #d8eccb, #8fc07a); }
body.preset-botanical .blob-3 { background: radial-gradient(circle at 40% 60%, #cfe8d4, #3e9a6a); opacity: .32; }
body.preset-botanical .blob-4 { background: radial-gradient(circle at 50% 50%, #e0ecc6, #b6c777); }

/* Glass card — warm, gold hairline */
body.preset-botanical .glass-card {
  background: rgba(255,252,245,.74);
  border: 1px solid rgba(189,155,95,.34);
  border-radius: 22px;
  box-shadow: 0 28px 64px rgba(35,28,15,.14), inset 0 1px 0 rgba(255,255,255,.6);
}
body.preset-botanical .glass-card .eyebrow { background: transparent !important; color: var(--color-accent-dark) !important; }

/* Floating product shadow tint */
.modern-hero-product-img,
body.preset-botanical .hero-product-float .modern-hero-product-img {
  filter: drop-shadow(0 34px 46px rgba(35,28,15,.22));
}

/* ---------- 7. Price block / trust pills ---------- */
.modern-price-block {
  background: var(--surface, #fff); border: 1px solid var(--gold);
  border-radius: 14px; box-shadow: var(--shadow-sm);
}
.price-now, .order-now, .mid-cta-now { font-family: var(--font-serif) !important; font-weight: 500; color: var(--color-primary-dark); }
.price-save-chip { background: #F3E8C6; color: #7E601C; }
.price-was s, .order-was, .mid-cta-was { color: var(--color-text-muted); }
.hero-trust-pills li {
  background: rgba(255,252,245,.7); border: 1px solid var(--color-border);
  color: var(--color-text-soft); font-weight: 600;
}

/* ---------- 8. Trust bar ---------- */
.trust-bar, body.preset-botanical .trust-bar {
  background: linear-gradient(180deg, #E4F1E7 0%, #D8EADD 100%);
  border-block: 1px solid var(--color-border);
}
.trust-bar-item strong, body.preset-botanical .trust-bar-item strong, .counter-number {
  font-family: var(--font-serif); color: var(--color-primary-dark);
}

/* ---------- 9. Section tints (replace cold blue/cyan/purple) ---------- */
.sec-gradient-blue,  body.preset-botanical .sec-gradient-blue   { background: linear-gradient(180deg, #E0F0E4 0%, var(--color-bg) 100%); }
.sec-gradient-cyan,  body.preset-botanical .sec-gradient-cyan   { background: linear-gradient(180deg, #D9EDE0 0%, var(--color-bg) 100%); }
.sec-gradient-purple,body.preset-botanical .sec-gradient-purple { background: linear-gradient(180deg, #E6F2E7 0%, var(--color-bg) 100%); }
.sec-gradient-green, body.preset-botanical .sec-gradient-green  { background: linear-gradient(180deg, #DCEFE1 0%, var(--color-bg) 100%); }
.section-alt { background: var(--color-surface-alt); }

/* ---------- 10. Cards — unified warm surface + pine accents ---------- */
.mechanism-card, .benefit-card, .who-card, .ing-card-modern,
.timeline-step, .howtake-step, .testi-card, .contact-card, .card, details.faq-item {
  background: var(--surface, #fff);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.mechanism-card:hover, .benefit-card:hover, .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.mechanism-card.is-main, body.preset-botanical .mechanism-card.is-main {
  border: 1.5px solid var(--color-primary); background: linear-gradient(180deg, #FFFCF6 0%, #F1F4EC 100%);
}
.answer-pill, .ing-tag, .ing-timeline,
body.preset-botanical .answer-pill, body.preset-botanical .ing-tag, body.preset-botanical .ing-timeline {
  background: var(--color-primary-pale); color: var(--color-primary-dark);
}
.ing-pubmed { background: #EFE6D3; color: var(--amber); }
.who-card::before, body.preset-botanical .who-card::before { color: var(--color-accent); }
.timeline-week, body.preset-botanical .timeline-week { background: var(--color-primary-dark); border-radius: 8px; }
.howtake-num, body.preset-botanical .howtake-num {
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  font-family: var(--font-serif); font-weight: 500;
}

/* Benefit icon tiles — warm earthy set (overrides pastel rainbow) */
.benefit-icon, body.preset-botanical .benefit-icon { border-radius: 14px; }
.benefits-grid .benefit-card:nth-child(1) .benefit-icon { background: #DCEEDF !important; }
.benefits-grid .benefit-card:nth-child(2) .benefit-icon { background: #E5F0D6 !important; }
.benefits-grid .benefit-card:nth-child(3) .benefit-icon { background: #D6ECE3 !important; }
.benefits-grid .benefit-card:nth-child(4) .benefit-icon { background: #E8F1D8 !important; }
.benefits-grid .benefit-card:nth-child(5) .benefit-icon { background: #DEEFE4 !important; }
.benefits-grid .benefit-card:nth-child(6) .benefit-icon { background: #ECF1CE !important; }

/* ---------- 11. Mid-CTA banner — deep pine with grain ---------- */
.mid-cta-banner, body.preset-botanical .mid-cta-banner {
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(47,111,90,.55), transparent 60%),
    linear-gradient(135deg, #1B4034 0%, #235647 55%, #16352B 100%);
  position: relative;
}
.mid-cta-now { color: #fff !important; }
.mid-cta-save { background: rgba(189,155,95,.28); color: #F4E7CC; }

/* ---------- 12. Testimonials / reviewer ---------- */
.testi-rating { color: var(--amber); }
.testi-text { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-text); }
.testi-avatar { background: linear-gradient(140deg, var(--color-primary-pale), #fff); color: var(--color-primary-dark); font-family: var(--font-serif); }
.reviewer-inner { background: var(--surface, #fff); border: 1px solid var(--gold); border-radius: 18px; }
.reviewer-photo-wrap { box-shadow: 0 0 0 3px var(--color-primary-pale); }

/* ---------- 13. Guarantee ---------- */
.guarantee-flat { background: transparent; }
.guarantee-shield { filter: sepia(.3) saturate(1.1); }

/* ---------- 14. FAQ ---------- */
details.faq-item summary { font-family: var(--font-display); font-weight: 600; }
details.faq-item summary::after { color: var(--color-accent); }

/* ---------- 15. Final order — crimson→pine prestige gradient ---------- */
.order-final, body.preset-botanical .order-final {
  background:
    radial-gradient(700px 360px at 86% 10%, rgba(47,154,104,.45), transparent 60%),
    linear-gradient(140deg, #0E5239 0%, #1E7A52 52%, #0B3F2C 125%);
  color: #fff;
}
.order-now { color: #fff !important; }
.order-save, body.preset-botanical .order-save { background: var(--gold); color: #2a1c0a; }
.order-final h2.heading-accent::after { background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.4)); }

/* ---------- 16. Contact / where-to-buy ---------- */
.wtb-table th { background: var(--color-primary-pale); color: var(--color-primary-dark); }
.wtb-table tbody tr:first-child td { background: #F1F4EC; }
.wtb-checklist li, .wtb-table { border-color: var(--color-border-soft); }
.contact-ico { color: var(--color-accent); }

/* ---------- 17. Footer — deep pine instead of cold slate ---------- */
.site-footer {
  background:
    radial-gradient(820px 420px at 12% 0%, #1d6a48 0%, transparent 62%),
    linear-gradient(180deg, #103A2A 0%, #0D2E22 100%);
  color: rgba(236,244,236,.80);
}
.footer-heading { font-family: var(--font-display); color: #fff; letter-spacing: .04em; }
.footer-links a:hover { color: var(--gold); }
.footer-brand img { background: #fff; }
.footer-bottom { border-top-color: rgba(255,255,255,.1); }

/* ---------- 18. Prose / 404 ---------- */
.prose-page-header h1, .prose-page h2, .page-404 h1 { color: var(--color-primary-dark); font-family: var(--font-display); }
.prose-page h2 { border-bottom-color: var(--color-primary-pale); }
.prose-page a { color: var(--color-accent-dark); }

/* ---------- 19. Page-load motion (hero) ---------- */
@keyframes fxRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.modern-hero-content > * { animation: fxRise .7s var(--ease, cubic-bezier(.4,0,.2,1)) both; }
.modern-hero-content > *:nth-child(1) { animation-delay: .05s; }
.modern-hero-content > *:nth-child(2) { animation-delay: .12s; }
.modern-hero-content > *:nth-child(3) { animation-delay: .19s; }
.modern-hero-content > *:nth-child(4) { animation-delay: .26s; }
.modern-hero-content > *:nth-child(5) { animation-delay: .33s; }
.modern-hero-content > *:nth-child(6) { animation-delay: .40s; }
.modern-hero-product-img { animation: fxRise .8s .2s both, fxFloat 7s ease-in-out 1s infinite; }

/* ---------- 20. Mobile + reduced motion ---------- */
@media (max-width: 767px) {
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .modern-hero-content > *, .modern-hero-product-img { animation: none !important; }
}

/* ---------- 21. Mobile menu fix + country-page hero order ---------- */
/* The header's backdrop-filter was establishing a containing block for the
   position:fixed mobile menu, collapsing the full-screen overlay into a small
   box under the header. Disable the filter on mobile (where the nav is fixed)
   so the menu covers the viewport. Desktop nav is inline, so the glass header
   stays there. */
@media (max-width: 767px) {
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(233, 243, 235, .97) !important;
  }
  .site-header.is-sticky { background: rgba(233, 243, 235, .99) !important; }

  /* Themed full-screen menu overlay (fresh mint, not stark white) */
  .nav-menu.is-open {
    background: linear-gradient(180deg, #EEF8F0 0%, #E0F0E4 100%) !important;
    gap: 6px !important;
  }
  .nav-menu.is-open .nav-link {
    background: rgba(255, 252, 245, .7);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text) !important;
    font-family: var(--font-display);
  }
  .nav-menu.is-open .nav-link:hover,
  .nav-menu.is-open .nav-link.is-active {
    background: var(--color-primary-pale);
    color: var(--color-primary-dark) !important;
  }
  /* Burger bars use ink colour on the paper header */
  .burger-btn span { background: var(--color-text); }
}

/* ---------- 22. Robust burger icon (3 even bars, clean open→X) ---------- */
.burger-btn {
  flex-direction: column; gap: 5px;
  width: 44px; height: 44px; border-radius: 10px;
}
.burger-btn span {
  display: block; width: 24px; height: 2.5px; border-radius: 2px;
  background: var(--color-text); margin: 0 !important;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1025px) { .burger-btn { display: none !important; } }

/* Country / product landing pages (NOT the homepage preset): on mobile the
   product package sits ABOVE the price + copy. Homepage keeps its glass-card
   composition unchanged. */
@media (max-width: 900px) {
  body.page-modern-landing:not(.preset-botanical) .modern-hero-grid .modern-hero-product {
    order: -1;
    margin-bottom: 4px;
  }
  body.page-modern-landing:not(.preset-botanical) .modern-hero-grid .modern-hero-product-img {
    max-height: 300px;
  }
}