/* product-landing.css — minimal fallback. Most styles are inline in each .astro for AR17/AR22 compatibility. */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #8A5C08; outline-offset: 2px; border-radius: 6px; }

/* ── Mobile overflow guards ────────────────────────────────────────────────
   A grid/flex child keeps min-width:auto by default, so a row that cannot wrap
   (product image + price card, price + struck-through price) sizes its track by
   min-content and pushes the whole column past the viewport. Because html/body
   use overflow-x: clip/hidden, that surplus is cut off instead of scrollable —
   the text simply disappears. Shows up on 320px screens and on any phone with
   the system font scale turned up. */
.grid > *,
.flex > * { min-width: 0; }

body { overflow-wrap: break-word; }

/* ── Mobile overflow guards (2) ───────────────────────────────────────────
   Narrow screens and system font scaling also break two other things:
   a CTA label held on one line runs off the right edge, and a comparison
   table with no scrolling wrapper widens the whole page. Desktop is
   untouched — both rules live behind a mobile media query. */
@media (max-width: 640px) {
  button,
  .btn,
  [class*="btn-"],
  .cta,
  [class*="cta-"] { white-space: normal; }

  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ── Mobile overflow guards (3) ───────────────────────────────────────────
   The same min-width:auto trap applies to hand-written layout classes
   (.pharm-grid, .order-grid, .benefit-list, .country-cards …), which the
   Tailwind-only selectors above do not reach. Sticky bars and header rows
   must wrap instead of running past the right edge. Mobile only. */
@media (max-width: 640px) {
  [class*="grid"] > *,
  [class*="list"] > *,
  [class*="cards"] > *,
  [class*="-row"] > *,
  .row > * { min-width: 0; }

  [class*="sticky"],
  [class*="header-inner"],
  [class*="topbar"] { flex-wrap: wrap; }
}

/* ── Mobile overflow guards (4) ───────────────────────────────────────────
   Catch-all for hand-written layouts: on phones nothing may claim a
   min-content width it cannot have. Wrapped in :where() so it carries zero
   specificity — any explicit min-width in this project still wins — and kept
   behind a mobile media query so desktop layout is untouched. */
@media (max-width: 640px) {
  :where(*) { min-width: 0; }
}

/* ── Mobile overflow guards (5) ───────────────────────────────────────────
   Tables carrying their own class beat a bare `table` selector, so restate
   the scroll rule at class specificity. */
@media (max-width: 640px) {
  table[class] { display: block; max-width: 100%; overflow-x: auto; }
}

/* ===== Botánica 02.10.2026: saffron order button, serif headings (Latin pages) ===== */
.df-cta-big, .df-guarantee .df-cta-big, .df-sticky-cta .df-cta-big {
  background: linear-gradient(180deg, #F8BF45, #F0A91E) !important; color: #1E1407 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(140,84,0,.22), 0 14px 26px -12px rgba(176,108,6,.75) !important;
}
.df-cta-big:hover { filter: brightness(1.04); }
html:not([dir="rtl"]) :is(h1, h2, h3) { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important; letter-spacing: -0.02em; }
html:not([dir="rtl"]) :is(h1, h2) { font-weight: 600 !important; }