/* ============================================================
   Bourkes Florist — shared responsive overrides
   ------------------------------------------------------------
   The site is authored with inline styles, which can't carry
   media queries. These rules target the site's CONSISTENT
   inline-style patterns (e.g. `padding: Npx 48px`,
   `grid-template-columns: repeat(4, 1fr)`) and override them at
   tablet / phone widths with !important (stylesheet !important
   beats a normal inline declaration).
   Desktop (> 1024px) is left completely untouched.
   Loaded once per page in <helmet>; applies to header + footer
   too since they render in the same document.
   ============================================================ */

html, body { overflow-x: hidden; }
img, video, svg { max-width: 100%; }

/* ---------------- TABLET  ≤1024px ---------------- */
@media (max-width: 1024px) {
  /* dense product / area grids ease down a step */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* home delivery 1 : 1.8 split → even */
  [style*="grid-template-columns: 1fr 1.8fr"]      { grid-template-columns: 1fr 1fr !important; }
}

/* ---------------- TABLET / LARGE PHONE  ≤860px ---------------- */
@media (max-width: 860px) {

  /* 1 — trim the 48px side gutters used on every section band */
  [style*="px 48px"] { padding-left: 26px !important; padding-right: 26px !important; }
  /* home hero copy panel (48px 44px) */
  [style*="48px 44px"] { padding: 36px 24px !important; }

  /* 2 — product / collection grids → 2-up */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(8, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
  /* keep the small product-image thumbnail strip at 4 */
  [style*="repeat(4, 1fr)"][style*="gap: 12px"] { grid-template-columns: repeat(4, 1fr) !important; }

  /* 3 — two-column GRID splits → stack */
  [style*="grid-template-columns: 57% 43%"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.8fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 250px"] { grid-template-columns: 1fr !important; }
  /* footer 5-column band → 2 columns */
  [style*="grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1.1fr"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* 4 — two-column FLEX splits (product gallery|info, cart & checkout items|summary) → stack */
  [style*="gap: 52px"][style*="align-items: flex-start"],
  [style*="gap: 48px"][style*="align-items: flex-start"] { flex-direction: column !important; }
  /* fixed-width order-summary cards become full width once stacked */
  [style*="width: 330px"], [style*="width: 344px"] { width: 100% !important; }
}

/* ---------------- PHONE  ≤560px ---------------- */
@media (max-width: 560px) {

  /* tighter gutters */
  [style*="px 48px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* shrink oversized display headings so they don't overflow */
  h1[style*="Playfair Display"] { font-size: 30px !important; line-height: 1.14 !important; }
  h2[style*="Playfair Display"] { font-size: 24px !important; }

  /* occasions row 4 → 3 keeps the labels readable */
  [style*="grid-template-columns: repeat(8, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* footer band → single column */
  [style*="grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
}