/* ============================================================
   Bourkes Florist — shared responsive overrides
   ------------------------------------------------------------
   The site is authored with INLINE styles, which can't carry
   media queries, so these rules target the build's inline-style
   patterns with attribute selectors and override them at tablet
   / phone widths (stylesheet !important beats inline).

   CRITICAL: the build serializes inline styles with NO space
   after ':' and NO space after ',' inside functions — the dist
   HTML contains e.g.  grid-template-columns:repeat(4,1fr)  and
   gap:52px .  [style*="…"] is a literal substring test, so every
   selector below MUST use that exact no-space form or it silently
   matches nothing.  (Value-internal spaces like "57% 43%",
   "1fr 1fr" and "px 48px" ARE preserved, so those keep one space.)

   Header nav→hamburger, footer, blog, product sticky-buy bar and
   the checkout (.co-main/.co-2col) are class-based and handled in
   site.css — not here.  Desktop (>1024px) is left untouched.
   ============================================================ */

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

/* ---------------- SMALL DESKTOP / TABLET  ≤1024px ---------------- */
@media (max-width: 1024px) {
  /* dense product / card grids ease down one step */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* home delivery split 1 : 1.8 → even */
  [style*="grid-template-columns:1fr 1.8fr"]     { grid-template-columns: 1fr 1fr !important; }
  /* keep the product-gallery thumbnail strip at 4 */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:12px"] { grid-template-columns: repeat(4, 1fr) !important; }
}

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

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

  /* product / card / 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; } /* home occasions */

  /* two-column splits (grid) → stack */
  [style*="grid-template-columns:1fr minmax(380px,520px)"] { grid-template-columns: 1fr !important; height: auto !important; } /* home hero */
  .bf-hero-media { aspect-ratio: 4 / 3 !important; } /* reserve home-hero image space on mobile → no CLS when it loads */
  [style*="grid-template-columns:1fr 1fr"]        { grid-template-columns: 1fr !important; } /* heritage, image tiles, occasion hero, about story, corporate form */
  [style*="grid-template-columns:1fr 1.8fr"]      { grid-template-columns: 1fr !important; } /* home delivery */
  [style*="grid-template-columns:2fr 1fr"]        { grid-template-columns: 1fr !important; } /* account main */
  [style*="grid-template-columns:1.3fr 1fr"]      { grid-template-columns: 1fr !important; } /* contact main */
  [style*="grid-template-columns:1fr 340px"]      { grid-template-columns: 1fr !important; } /* cart page items | summary (JS-rendered) */
  [style*="grid-template-columns:1.2fr 1fr 1fr auto"] { grid-template-columns: 1fr 1fr !important; } /* account order rows */

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

  /* KEEP the product-gallery thumbnail strip at 4 (higher specificity wins) */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:12px"] { grid-template-columns: repeat(4, 1fr) !important; }
}

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

  /* tighter gutters */
  [style*="px 48px"]      { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding: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; }

  /* product / collection grids: keep 2-up (cards stay tappable) */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* text / stat / step card grids → single column */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; } /* service cards */
  [style*="grid-template-columns:repeat(8,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } /* home occasions */

  /* account order rows: id/date + total on one line, rest stacks */
  [style*="grid-template-columns:1.2fr 1fr 1fr auto"] { grid-template-columns: 1fr auto !important; row-gap: 4px !important; }

  /* release fixed min-widths that force overflow inside narrow columns */
  [style*="min-width:170px"] { min-width: 0 !important; }

  /* inner form rows that split Name|Email / postcode → full-width fields */
  [style*="display:flex; gap:14px; margin-bottom:16px"] { flex-direction: column !important; } /* contact form */
  [style*="margin-bottom:24px; display:flex"]           { flex-direction: column !important; align-items: stretch !important; } /* product postcode check */

  /* product cards: at 2-up on a phone the price + Add-to-cart don't fit on one
     row — stack them so the button sits UNDER the price, full-width and tappable */
  .card-buy        { flex-direction: column !important; align-items: stretch !important; gap: 9px !important; }
  .card-buy button { width: 100% !important; padding: 11px 14px !important; }

  /* KEEP the product-gallery thumbnail strip at 4 */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:12px"] { grid-template-columns: repeat(4, 1fr) !important; }
}