/* =========================================================
   Fertilize-IT — Mobile & tablet optimisation layer
   Loaded LAST. Targets 320 / 375 / tablet. Tighter edge gaps,
   card-stacking, scroll-driven touches.
   ========================================================= */

/* ---- Scroll progress bar (site-wide, scroll-driven) ---- */
.scroll-prog {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--green-deep, #1F5F3F), var(--gold, #C9A961));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-prog {
    transform: scaleX(0);
    animation: sp-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes sp-grow { to { transform: scaleX(1); } }
}

/* =========================================================
   TABLET — tighten edge gaps AND shrink oversized panel
   paddings so nested elements don't stack inset-upon-inset.
   ========================================================= */
@media (max-width: 1024px) {
  .container, .nav-inner, .promo-inner, .aw-wrap, .hero-image-wrap { padding-left: 22px; padding-right: 22px; }
  /* big desktop panels (40–64px pad) pulled in so content gets width */
  .soil-timeline, .nl-wrap, .finder, .soil-cta-box, .seasons-foot,
  .grass-cal, .pdp-mix, .pdp-label, .pdp-cal, .quiz-card, .finale-signup,
  .pillar, .review-card, .contact-card, .c-form-card, .general-faq-card,
  .shop-card, .blog-feature, .cart-summary-card {
    padding: 26px !important;
  }
  /* nested inner cards stay a step tighter than their parent panel */
  .stl-card { padding: 20px !important; }
}
@media (max-width: 860px) {
  .container, .nav-inner, .promo-inner, .aw-wrap, .hero-image-wrap { padding-left: 16px; padding-right: 16px; }
  /* tighter inter-card gaps on tablet so cards claim more width */
  .product-grid, .pillars, .cats, .csg-grid, .review-grid, .rv-grid, .calendar { gap: 14px; }
  .soil-timeline, .nl-wrap, .finder, .soil-cta-box, .seasons-foot,
  .grass-cal, .pdp-mix, .pdp-label, .pdp-cal, .quiz-card, .finale-signup,
  .pillar, .review-card, .contact-card, .c-form-card, .general-faq-card,
  .shop-card, .blog-feature, .cart-summary-card {
    padding: 20px !important;
  }
  .stl-card { padding: 18px !important; }
}

/* =========================================================
   MOBILE ≤ 600 — tighter gaps, smaller section padding
   ========================================================= */
@media (max-width: 600px) {
  .container, .nav-inner, .promo-inner, .aw-wrap, .hero-image-wrap {
    padding-left: 12px !important; padding-right: 12px !important;
  }
  /* trim vertical section rhythm so sections sit closer */
  section { padding-top: 38px !important; padding-bottom: 38px !important; }
  .section-head { margin-bottom: 24px !important; }
  /* card inner padding a touch tighter so content gets width */
  .csg-body { padding-left: 18px; padding-right: 18px; }
  .rv-item { padding: 22px 18px; }
}

/* =========================================================
   SMALL MOBILE ≤ 400 (covers 375 & 320)
   ========================================================= */
@media (max-width: 400px) {
  .container, .nav-inner, .promo-inner, .aw-wrap, .hero-image-wrap {
    padding-left: 10px !important; padding-right: 10px !important;
  }
  section { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* Hero band shorter & full-bleed-ish so it doesn't dwarf the fold */
  .aw-hero-band { aspect-ratio: 3 / 3.3; border-radius: 16px; }
  .aw-hero-h1 { font-size: clamp(40px, 13.4vw, 60px); }
  .aw-hero-meta { grid-template-columns: 1fr 1fr; }
  .aw-hero-meta .m { padding-right: 12px; }
  .aw-hero-foot { margin-top: 24px; }

  /* Stat / number grids never crush */
  .finale-stats, .cst-hero2-stats, .cst-results-grid,
  .csx-stats, .rv-rating-sources { grid-template-columns: 1fr 1fr !important; }
}

/* =========================================================
   ULTRA-SMALL ≤ 340 (320px devices)
   ========================================================= */
@media (max-width: 340px) {
  .container, .nav-inner, .promo-inner, .aw-wrap, .hero-image-wrap {
    padding-left: 8px !important; padding-right: 8px !important;
  }
  .aw-hero-h1 { font-size: 38px; letter-spacing: -0.04em; }
  .aw-hero-h1 .indent { padding-left: 0; }
  .csg-stat b { font-size: 40px; }
  /* avoid 2-col crush on the very narrowest */
  .aw-hero-meta { grid-template-columns: 1fr 1fr; gap: 0; }
  .promo-items .promo-item:nth-child(n+2) { display: none; }
}

/* =========================================================
   CARD STACKING (mobile only) — sticky deck scroll
   Opt-in via .mstack on a single-column card container.
   Each child gets --si (index) from JS; graceful w/o JS.
   ========================================================= */
@media (max-width: 720px) {
  .mstack {
    display: block;
    --stack-top: 88px;     /* clears sticky nav */
    --stack-step: 14px;    /* peek offset per card */
  }
  .mstack > * {
    position: sticky;
    top: calc(var(--stack-top) + var(--si, 0) * var(--stack-step));
    margin-bottom: 22px;
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
    will-change: transform;
    /* solid surface so stacked cards fully occlude */
    background-clip: padding-box;
  }
  .mstack > *:last-child { margin-bottom: 0; }
  /* lift + subtle shadow growth as they pin */
  .mstack > * {
    box-shadow: 0 18px 40px -28px rgba(14,59,39,0.5);
  }
  /* give the deck breathing room so the last card can reach the top */
  .mstack { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mstack > * { position: static; }
}

/* Unclip ancestors that would otherwise break sticky stacking (mobile only) */
@media (max-width: 720px) {
  .mstack-unclip { overflow: visible !important; }
}

/* When stacking, kill the per-card hover-lift translate (conflicts w/ sticky) */
@media (max-width: 720px) {
  .mstack > *:hover { transform: none; }
}

/* =========================================================
   Tap targets & overflow safety (all small screens)
   ========================================================= */
@media (max-width: 600px) {
  a, button { -webkit-tap-highlight-color: rgba(31,95,63,0.12); }
  .btn, .aw-btn { min-height: 46px; }
  html, body { overflow-x: hidden; }
  img, video, image-slot { max-width: 100%; }
}

/* =========================================================
   MOBILE — bigger elements (content claims the screen)
   ========================================================= */
@media (max-width: 600px) {
  body { font-size: 17px !important; }
  .section-head p { font-size: 16px; }

  /* chunkier, full-width primary actions */
  .btn { min-height: 52px; padding: 15px 22px; font-size: 15.5px; }
  .btn-lg { min-height: 56px; font-size: 17px; }
  .hero-ctas .btn, .soil-ctas .btn, .soil-head-cta .btn { width: 100%; justify-content: center; }

  /* product cards bigger */
  .product-name { font-size: 24px; }
  .product-price { font-size: 24px; }

  /* pillars / why-us */
  .pillar h3 { font-size: 30px; }
  .pillar p { font-size: 16px; }

  /* redesigned timeline cards bigger + roomier */
  .stl-title { font-size: 22px; }
  .stl-desc { font-size: 15px; }
  .stl-node { width: 60px; height: 60px; }
  .stl-node svg { width: 30px; height: 30px; }
  .stl-num { font-size: 46px; }
  .stl-day { font-size: 12px; }

  /* usp + reviews bigger */
  .usp-icon { width: 56px; height: 56px; }
  .usp-title { font-size: 17px; }
  .usp-sub { font-size: 14px; }
  .review-quote { font-size: 21px; }
  .cat h3 { font-size: 32px; }
}

@media (max-width: 400px) {
  h3 { letter-spacing: -0.01em; }
}

/* =========================================================
   MOBILE — tight inner padding so content fills the card,
   not the padding. Sections hug their content vertically.
   Applies across every page's panels/cards.
   ========================================================= */
@media (max-width: 600px) {
  /* sections sit closer; less dead vertical space */
  section, .seasons, .finale, .grass-cal-section,
  .general-faq, .nl-section, .reviews { padding-top: 30px !important; padding-bottom: 30px !important; }
  .section-head { margin-bottom: 20px !important; }

  /* generic card / panel inner padding — tight & consistent */
  .product-card, .review-card, .pillar, .cat, .finder, .group-head,
  .rv-summary, .rv-item, .soil-trust, .soil-card, .seasons-foot,
  .contact-card, .c-channel, .c-form-card, .c-faq-item,
  .blog-card, .blog-feature, .shop-card, .general-faq-card,
  .grass-cal, .grass-cal-foot-card, .qr-final-cta,
  .pdp-mix, .pdp-mixcard, .pdp-cal, .pdp-label, .usp, .stl-card {
    padding: 16px !important;
  }

  /* hero / dark CTA panels: a hair more, still tight */
  .soil-cta-box, .nl-wrap, .finale-signup, .quiz-card,
  .cart-summary-card, .soil-timeline {
    padding: 20px 16px !important;
  }

  /* trim card media/body insets too */
  .csg-body { padding-left: 16px !important; padding-right: 16px !important; }
  .stl-track { gap: 12px !important; }
}

@media (max-width: 400px) {
  section, .seasons, .finale, .grass-cal-section,
  .general-faq, .nl-section, .reviews { padding-top: 24px !important; padding-bottom: 24px !important; }
  .product-card, .review-card, .pillar, .cat, .finder, .group-head,
  .contact-card, .blog-card, .shop-card, .usp, .stl-card,
  .rv-summary, .soil-trust, .soil-card, .seasons-foot,
  .grass-cal, .pdp-mix, .pdp-cal, .pdp-label { padding: 14px !important; }
  .soil-cta-box, .nl-wrap, .finale-signup, .quiz-card,
  .cart-summary-card, .soil-timeline { padding: 16px 14px !important; }
}

/* =========================================================
   MOBILE animation polish — livelier scroll-reveal + tap feedback
   ========================================================= */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  /* a touch more travel + a subtle scale so entrances read clearly on phones */
  [data-reveal] {
    transform: translateY(28px) scale(0.984);
    transition:
      opacity 0.6s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
      transform 0.68s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
  }
  [data-reveal].is-revealed { transform: none; }

  /* tactile press feedback on tappable cards */
  .product-card:active, .cat:active, .csg-card:active, .pillar:active,
  .season-card:active, .stl-card:active, .blog-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.12s ease !important;
  }
}

/* =========================================================
   SMALL-PHONE HARDENING ≤ 400 (covers 375 & 320)
   No horizontal overflow, wrapping CTAs, broken long strings.
   ========================================================= */
@media (max-width: 400px) {
  /* Long CTA labels wrap instead of overflowing the button/screen */
  .btn, .aw-btn { white-space: normal; text-align: center; line-height: 1.25; }
  /* Break long unbroken strings (emails, SKUs, URLs, model codes) */
  body, p, li, a, h1, h2, h3, td, .product-sku { overflow-wrap: break-word; }
}

/* =========================================================
   320px DEVICES ≤ 360 — dial back display type & collapse
   the last tight 2-col content grids so nothing overflows.
   ========================================================= */
@media (max-width: 360px) {
  /* Oversized display numerals scaled to fit 320 */
  .stat-num { font-size: 42px !important; }
  .rv-score { font-size: 46px !important; }
  .csg-stat b { font-size: 36px !important; }
  .finale-stat b { font-size: 30px !important; }
  .sc-gauge-center b, .st-num { font-size: 30px !important; }
  .product-name, .product-price { font-size: 22px !important; }

  /* Collapse the last content-card grids that stay 2-col below 480 */
  .pdp-safety, .pdp-mixgrid, .pdp-mixcard-grid,
  .contact-cards, .cart-cross-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tightest inner padding on 320px devices */
  .stl-card, .pillar, .product-card, .review-card,
  .finder, .group-head, .soil-cta-box, .nl-wrap,
  .finale-signup, .cart-summary-card, .soil-timeline,
  .cat, .blog-card, .shop-card, .contact-card { padding: 12px !important; }

  /* Buttons + inputs stay comfortably tappable but never overflow */
  .btn, .aw-btn { padding: 14px 16px; font-size: 15px; }
}

/* =========================================================
   FLUID TYPE SCALE — one consistent ramp for phones/tablets
   so headings scale smoothly with viewport (no jumpy steps,
   nothing oversized at 320 that would break the layout).
   ========================================================= */
@media (max-width: 720px) {
  h1, .hero h1, .rv-hero h1, .page-head h1 {
    font-size: clamp(28px, 8.2vw, 40px) !important;
    line-height: 1.05; letter-spacing: -0.03em;
  }
  h2, .section-head h2, .cta-strip h2, .finale h2 {
    font-size: clamp(24px, 6.6vw, 33px) !important;
    line-height: 1.08; letter-spacing: -0.025em;
  }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; line-height: 1.15; }
  /* body copy + lede scale gently, never tiny */
  .lede, .section-head p, .hero-sub { font-size: clamp(15px, 4vw, 17px) !important; }
}

/* =========================================================
   320–375 SAFETY — stop flex/grid children from forcing the
   page wider than the screen (the #1 mobile-break cause).
   ========================================================= */
@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  /* flex/grid items shrink instead of overflowing their row */
  .rv-foot, .csg-foot, .review-author, .contact-card, .c-channel,
  .footer-contact-row, .season-product, .cart-item, .cart-upsell,
  .rv-foot > div, .csg-who, .contact-card > div, .review-author > div,
  .footer-contact-row > span, .season-product > div { min-width: 0; }
  /* any stray wide media/element capped to viewport */
  img, svg, video, image-slot, iframe, table, pre { max-width: 100%; }
  /* trust pills / source chips wrap instead of pushing width */
  .rv-sources, .hero-trust, .rv-tag-row { flex-wrap: wrap; }
}

/* =========================================================
   CONTACT FORMS — full-width, comfortable inputs on mobile
   & tablet (homepage #contact form + contact page .c-form).
   ========================================================= */
@media (max-width: 760px) {
  /* name/email pairs stop squashing — one field per row */
  .contact-form .row, .c-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .contact-form { padding: 18px !important; gap: 14px; }
  /* roomier fields; 16px text prevents iOS focus-zoom */
  .field input, .field textarea, .field select,
  .c-field input, .c-field textarea, .c-field select {
    width: 100% !important;
    padding: 15px 16px !important;
    font-size: 16px !important;
  }
  .field textarea, .c-field textarea { min-height: 120px; }
  /* full-width submit so the form reads as one clean column */
  .contact-form button, .c-submit-row .btn, .c-submit-row button { width: 100%; justify-content: center; }
  .c-submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* =========================================================
   REVIEWS — horizontal swipe on mobile instead of long stacks
   (homepage .rv-grid cards) + scrollable filter chips.
   ========================================================= */
@media (max-width: 680px) {
  .rv-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -12px; margin-right: -12px;
    padding: 4px 12px 12px;
  }
  .rv-grid::-webkit-scrollbar { display: none; }
  .rv-grid > .review-card { scroll-snap-align: start; height: 100%; }

  /* reviews-page filter: stack groups, chips scroll horizontally */
  .rv-filter { flex-direction: column; align-items: stretch; gap: 12px; }
  .rv-filter-search { margin-left: 0; min-width: 0; width: 100%; }
  .rv-filter-group {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rv-filter-group::-webkit-scrollbar { display: none; }
  .rv-filter-group .chip, .rv-filter-label { flex-shrink: 0; }
}