/* =====================================================================
   Sweet Haven — responsive refinements (loads LAST)
   Type is now fluid via clamp() in colors_and_type.css + storefront.css,
   so it scales continuously 320px → 4K with no per-breakpoint font
   overrides. This layer handles layout only: an overflow safety net,
   comfortable gutters, hero/footer adjustments, and viewport-safe widths.
   ===================================================================== */

/* Stop a stray wide element from scrolling the whole page sideways.
   `clip` (not `hidden`) avoids a scroll container that would break sticky. */
html, body { max-width: 100%; overflow-x: clip; }
body { overflow-wrap: break-word; }
*, *::before, *::after { min-width: 0; }
img, svg, video { max-width: 100%; }

/* ---- Tablet / small laptop (<= 860px) ----------------------------- */
@media (max-width: 860px) {
  .sh-hero { padding: 48px 24px 56px; gap: 36px; }
  .sh-hero-photo { height: 360px; }
}

/* ---- Phones (<= 600px) -------------------------------------------- */
@media (max-width: 600px) {
  /* One comfortable, consistent gutter everywhere (was 32px) */
  .sh-container,
  .sh-header-inner,
  .sh-menu,
  .sh-values-inner,
  .sh-reviews,
  .sh-callout,
  .sh-teaser,
  .sh-news-inner,
  .sh-footer-inner,
  .sh-page { padding-left: 18px; padding-right: 18px; }

  /* Trim sky-high desktop vertical padding on tall sections */
  .sh-page { padding-top: 36px; padding-bottom: 64px; }
  .sh-reviews { padding-top: 52px; padding-bottom: 52px; }
  .sh-values-inner { padding-top: 40px; padding-bottom: 40px; }
  .sh-news-inner { padding-top: 48px; padding-bottom: 48px; }

  /* Hero */
  .sh-hero { padding: 30px 18px 40px; gap: 26px; }
  .sh-hero-photo { height: 280px; }
  .sh-hero-badge { left: 12px; bottom: 12px; }   /* was -22px → caused overflow */
  .sh-hero-cta { flex-wrap: wrap; }
  .sh-hero-cta .sh-btn { flex: 1 1 auto; text-align: center; }

  /* Menu + cards */
  .sh-menu { padding-top: 28px; padding-bottom: 56px; }
  .sh-menu.compact { padding: 26px 18px; }
  .sh-grid { gap: 16px; }
  .sh-card-photo { height: 150px; }

  /* Checkout / confirmation / footer */
  .sh-order-summary { padding: 20px; }
  .sh-confirm-card { padding: 32px 22px; }
  .sh-footer-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; }
  .sh-footer-tag { max-width: none; }
  .sh-modal-body { padding: 26px 22px; }
}

/* ---- Small phones (<= 400px) -------------------------------------- */
@media (max-width: 400px) {
  .sh-logo-img { height: 38px; }
  .sh-btn { padding: 12px 20px; }
  .sh-btn.lg { padding: 15px 22px; font-size: 15px; }
  .sh-page { padding-left: 16px; padding-right: 16px; }
  .sh-header-inner { padding-left: 16px; padding-right: 16px; gap: 10px; }
}