/* Hi Neighbor — mobile layout fixes.
   The site is built with inline styles (React-normalized, so values may or
   may not carry spaces). On phones the fixed multi-column grids squeeze to
   unusable widths. Collapse every rigid grid to a single column, then
   restore responsive behavior for repeat(auto-fit,...) galleries, which
   were already mobile-safe. */
@media (max-width: 760px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="repeat(auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  }

  /* desktop column gaps read as huge vertical holes once stacked */
  [style*="gap:80px"], [style*="gap: 80px"] { gap: 36px !important; }
  [style*="gap:70px"], [style*="gap: 70px"] { gap: 34px !important; }
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 32px !important; }

  /* desktop-scale section padding */
  section { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding:110px"], section[style*="padding: 110px"],
  section[style*="padding:120px"], section[style*="padding: 120px"],
  section[style*="padding:130px"], section[style*="padding: 130px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* header nav: tighter so it wraps to at most two calm rows */
  header nav { gap: 10px 14px !important; font-size: 12.5px !important; }

  /* floating quick-actions: keep only the primary CTA on phones —
     the full stack (call, directions, quiz, shop) covers too much screen */
  [data-screen-label="Quick actions"] { bottom: 14px !important; right: 14px !important; }
  [data-screen-label="Quick actions"] a:not(:last-child) { display: none !important; }
}