/* =========================================================
   ImproWell — Responsive overrides (mobile-first)
   ---------------------------------------------------------
   Loaded AFTER each page's own stylesheet so its rules win.
   Mobile (<= 480px) intentionally inherits original look.
   Tablet  (>= 481px) widens the column and reflows grids.
   Desktop (>= 1024px) opens up to multi-column layouts.
   ========================================================= */

/* ---------- Fluid base sizing helpers ---------- */
:root {
  --iw-page-pad-x: 20px;
  --iw-content-max: 1200px;
}

/* Allow the body to use full width on large screens (some pages set fixed bg) */
html, body { min-width: 0; }
body { overflow-x: hidden; }

img, svg, video { max-width: 100%; height: auto; }

/* =========================================================
   SMALL TABLET (>= 481px)
   - Open the page column past the 393px lock
   - Center content and let cards stretch
   ========================================================= */
@media (min-width: 481px) {
  /* Page columns used across the project */
  .iw-page,
  .iw-doc-page,
  .iw-bk-page,
  .iw-dc-page,
  .iw-ob-page {
    max-width: 720px !important;
    width: 100%;
  }

  /* Hero text scale */
  .iw-hero-h1 { font-size: 40px !important; }
  .iw-hero-body { max-width: 480px !important; }

  /* Quiz card stops being narrower than its column */
  .iw-quiz { width: auto !important; max-width: 560px; margin-left: auto !important; margin-right: auto !important; }

  /* Trust strip — give breathing room */
  .iw-trust-section { padding: 22px 24px !important; }

  /* Sheet / modal width on bigger screens */
  .iw-bk-sheet { max-width: 560px !important; }
}

/* =========================================================
   TABLET (>= 768px)
   - 3-up product grid
   - Side-by-side hero / form
   ========================================================= */
@media (min-width: 768px) {
  .iw-page,
  .iw-doc-page,
  .iw-bk-page,
  .iw-dc-page,
  .iw-ob-page {
    max-width: 960px !important;
  }

  /* Product grids — 3 across */
  .iw-product-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .iw-view-all { grid-column: span 3 !important; }

  /* Ingredient cards — 4 across at tablet */
  .iw-ingredient-cards { grid-template-columns: repeat(4, 1fr) !important; }
  .iw-dc-ing-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Doctor grid — bigger cards */
  .iw-doc-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Hero scale */
  .iw-hero-h1 { font-size: 48px !important; }
  .iw-hero { padding: 56px 40px 80px !important; }
  .iw-hero-slide { padding: 64px 40px 96px !important; }

  /* Section padding scale */
  .iw-shop, .iw-science, .iw-testimonials, .iw-email { padding-left: 40px !important; padding-right: 40px !important; }
  .iw-product-grid { padding-left: 40px !important; padding-right: 40px !important; }
  .iw-quiz { margin: 32px 40px !important; max-width: none; }

  /* Footer columns */
  .iw-footer-cols { grid-template-columns: repeat(4, 1fr) !important; }
  .iw-footer { padding: 32px 40px 36px !important; }

  /* Auth pages */
  .iw-input-row2 { gap: 12px; }

  /* Bag/cart wider */
  .iw-bag-grid { grid-template-columns: 1.4fr 1fr !important; gap: 32px; align-items: start; }

  /* Discover ingredient grid */
  .iw-dc-ing-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =========================================================
   DESKTOP (>= 1024px)
   - Open up to 1200px content
   - 4-up products
   - Hero grows further
   ========================================================= */
@media (min-width: 1024px) {
  .iw-page,
  .iw-doc-page,
  .iw-bk-page,
  .iw-dc-page,
  .iw-ob-page {
    max-width: 1200px !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* 4-up product grid on full desktop */
  .iw-product-grid { grid-template-columns: repeat(4, 1fr) !important; padding: 0 56px 32px !important; gap: 18px !important; }
  .iw-view-all { grid-column: span 4 !important; }

  /* Hero: large readable column inside a wide stage */
  .iw-hero-h1 { font-size: 64px !important; line-height: 1.05 !important; }
  .iw-hero-body { font-size: 16px !important; max-width: 560px !important; }
  .iw-hero, .iw-hero-slide { padding: 96px 80px 120px !important; min-height: 520px; }
  .iw-hero-carousel { border-radius: 0; }

  /* Section padding */
  .iw-shop, .iw-science, .iw-testimonials, .iw-email { padding: 56px 80px !important; }
  .iw-product-grid { padding: 0 80px 56px !important; }
  .iw-quiz { margin: 56px 80px !important; padding: 48px 40px !important; }
  .iw-quiz-h2 { font-size: 32px !important; }

  /* Testimonials in a 3-up grid */
  .iw-testimonials { display: grid !important; grid-template-columns: 1fr; gap: 16px; }
  .iw-testimonials > .iw-t-header { grid-column: 1 / -1; }
  .iw-testimonials-row,
  .iw-testimonials .iw-testi-row { display: contents; }
  .iw-testimonials { grid-template-columns: repeat(3, 1fr) !important; }
  .iw-testimonials > .iw-t-header { grid-column: 1 / -1; }
  .iw-testi-card { margin-bottom: 0 !important; }

  /* Trust strip — bigger numbers */
  .iw-trust-strip .iw-trust-val { font-size: 16px !important; }

  /* Email row max width */
  .iw-email-row { max-width: 560px; margin: 0 auto; }

  /* Footer columns full 4-up at desktop */
  .iw-footer { padding: 56px 80px 40px !important; }
  .iw-footer-cols { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }

  /* Ingredient cards across 4 */
  .iw-ingredient-cards { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }

  /* Bag — give checkout summary a sticky sidebar */
  .iw-bag-grid { grid-template-columns: 1.6fr 1fr !important; gap: 40px !important; }
  .iw-bag-summary { position: sticky; top: 90px; }

  /* Auth two-column layout */
  .iw-auth-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

  /* Doctor 4-up grid */
  .iw-doc-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .iw-doc-stats { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =========================================================
   WIDE DESKTOP (>= 1440px)
   ========================================================= */
@media (min-width: 1440px) {
  .iw-page,
  .iw-doc-page,
  .iw-bk-page,
  .iw-dc-page,
  .iw-ob-page {
    max-width: 1320px !important;
  }
  .iw-hero, .iw-hero-slide { padding: 120px 120px 140px !important; }
  .iw-shop, .iw-science, .iw-testimonials, .iw-email,
  .iw-product-grid, .iw-footer { padding-left: 120px !important; padding-right: 120px !important; }
}

/* =========================================================
   Universal: prevent fixed-width pixel "lock-in" on small viewports
   ========================================================= */
@media (max-width: 480px) {
  /* Inline-style width:393px, width:360px etc. on sections cause overflow.
     These rules neutralize them at small sizes only. */
  .iw-quiz { width: auto !important; max-width: 100% !important; }
  .iw-page, .iw-doc-page, .iw-bk-page, .iw-dc-page, .iw-ob-page {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero arrows tucked to edges on phones */
  .iw-hero-arrow--prev { left: 6px !important; }
  .iw-hero-arrow--next { right: 6px !important; }
}

/* =========================================================
   Heights & inline-style guards
   Many pages use inline `height: NNNpx` on sections; let
   them grow with content rather than clip on wide screens.
   ========================================================= */
.iw-trust-section[style*="height"],
.iw-shop[style*="height"],
.iw-quiz[style*="height"],
.iw-hero[style*="height"],
.iw-testi-inner[style*="height"] {
  height: auto !important;
  min-height: 0;
}

/* Make footer stretch full width on desktop while content stays centered */
@media (min-width: 1024px) {
  .iw-footer { border-radius: 0 !important; }
}

/* Sticky nav: stretch beyond column on desktop and center inner */
@media (min-width: 1024px) {
  .iw-nav { padding: 16px 80px !important; }
}