/* 9 Carats — responsive layer.
   The design export carries all layout as INLINE styles with no classes, so
   every override needs !important plus an attribute selector.

   IMPORTANT: support.js re-serialises those inline styles, so the DOM reads
   "repeat(3, minmax(0px, 1fr))" -- spaced, and 0px not 0 -- NOT the form in
   the HTML source. Match on loose fragments ("repeat(3", "420px") only;
   exact-string selectors silently never match.

   Desktop is untouched: everything sits inside a max-width query. */

/* ---------- tablet and below ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* split hero / any 2-up section grid -> single column */
  section[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  /* stacked hero image panels need a real height or they collapse to nothing */
  section[style*="grid-template-columns"] > div:last-child,
  section[style*="grid-template-columns"] > figure,
  section[style*="grid-template-columns"] > image-slot { min-height: 58vh !important; }

  /* content 3-ups go 2-up here (the small trust row keeps its three) */
  div[style*="repeat(3"]:not([style*="420px"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* nav must not run off the right edge */
  header { flex-wrap: wrap !important; gap: 14px !important; justify-content: center !important; }
  header nav { flex-wrap: wrap !important; justify-content: center !important;
               gap: 18px !important; font-size: 13px !important; letter-spacing: .16em !important; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  header { padding: 18px 20px !important; }
  header nav { gap: 12px !important; font-size: 11.5px !important; letter-spacing: .12em !important; }
  header img { height: 56px !important; }

  /* two-column content blocks -> one column */
  div[style*="grid-template-columns"]:not([style*="repeat("]):not([style*="420px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* text-bearing 3-ups (nutrient cards, craft steps) -> one column,
     or the headings collide and the body text becomes a narrow ribbon */
  div[style*="repeat(3"]:not([style*="420px"]),
  div[style*="repeat(4"]:not([style*="420px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* the small trust row (max-width:420px) STAYS three across, just tighter */
  div[style*="repeat(3"][style*="420px"] { gap: 8px !important; max-width: 100% !important; }
  div[style*="repeat(3"][style*="420px"] div { gap: 8px !important; }
  div[style*="repeat(3"][style*="420px"] span {
    font-size: 9px !important; letter-spacing: .06em !important;
    line-height: 1.35 !important; hyphens: none !important;
  }

  h1, h2 { overflow-wrap: break-word !important; }

  /* contact form: the FORM element is itself the grid (not a div inside it) */
  form[style*="grid-template-columns"],
  form div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  form input, form textarea, form select, form button { width: 100% !important; box-sizing: border-box !important; }

  section { padding-left: 20px !important; padding-right: 20px !important; }
}