/* ===========================================================
   ZION — mobile / responsive layer
   -----------------------------------------------------------
   The storefront is built with inline styles and was authored
   desktop-first (no breakpoints). Rather than touch every
   component, this sheet overrides the handful of layout
   patterns that break on small screens. Everything here is
   scoped inside a media query, so the desktop design is
   completely unaffected.
   Breakpoint: phones & small tablets (<= 760px).
   =========================================================== */

@media (max-width: 760px) {

  /* --- Multi-column grids collapse to single column ------- */
  /* repeat(2,1fr): Fireballs, Booking rows, Story photo pair */
  [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
  /* 1fr 1fr: Product detail (gallery|info), Story origin, size picker */
  [style*="1fr 1fr"]:not(header *) { grid-template-columns: 1fr !important; }
  /* repeat(3,1fr): apparel collection grid */
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  /* repeat(5,1fr): Story "What I'm building" pillars */
  [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* --- Big display headlines: allow wrapping -------------- */
  h1[style*="nowrap"], h2[style*="nowrap"] { white-space: normal !important; }

  /* --- Hero: reduce the headline/media overlap on phones -- */
  [style*="margin-top: -140px"] { margin-top: -48px !important; }

  /* --- Tighter section padding (less wasted vertical space,
         more horizontal room for content) ------------------ */
  [style*="88px 32px"]        { padding: 56px 20px !important; }
  [style*="88px 0 56px"]      { padding: 56px 0 40px !important; }
  [style*="88px 32px 96px"]   { padding: 56px 16px 64px !important; }
  [style*="120px 32px 88px"]  { padding: 72px 20px 56px !important; }
  [style*="140px 48px"]       { padding: 80px 22px !important; }
  [style*="120px 48px"]       { padding: 72px 22px !important; }
  [style*="160px 48px"]       { padding: 80px 22px !important; }
  [style*="140px 48px 100px"] { padding: 80px 22px 72px !important; }
  [style*="80px 32px 120px"]  { padding: 56px 22px 96px !important; }

  /* Inner content wrappers that hard-code 0 32px side padding */
  [style*="padding: 0px 32px"], [style*="padding: 0 32px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* --- Header: swap desktop nav for the hamburger --------- */
  header > div[style*="1fr auto 1fr"] { padding: 10px 16px !important; }
  .z-desk-nav  { display: none !important; }  /* hide inline desktop links */
  .z-desk-only { display: none !important; }  /* hide desktop-only SEARCH text */
  .z-burger    { display: flex !important; }  /* show the hamburger */
}

/* Hamburger is hidden on desktop (shown only inside the media query above) */
.z-burger { display: none; }