/* Global Supermarket — breakpoints. */

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .site-nav { gap: 22px; font-size: 13.5px; }
  .header-row { gap: 24px; }
  .hero-badge { left: 24px; }
}

@media (max-width: 980px) {
  :root { --pad: 24px; }

  .header-row { flex-wrap: wrap; gap: 16px; }
  /* .site-nav mobile layout now lives in menu.css — the nav is a drawer. */
  .cart-btn { margin-left: auto; }

  .hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-copy { padding: 56px 0 40px; }
  .hero-media { height: 380px; border-left: 0; border-right: 0; margin: 0 calc(var(--pad) * -1); }
  .hero-badge { left: 20px; right: 20px; bottom: 20px; max-width: none; }

  .band-grid, .butcher-grid, .about-grid, .visit-grid, .pdp-grid { grid-template-columns: 1fr; gap: 40px; }
  .band-media { height: 320px; order: 2; }
  .band-copy { padding: 64px 0 0; }
  .band { padding-bottom: 64px; }
  .butcher-media .media:last-child { margin-top: 0; }
  .about-media { height: 300px; }
  .visit-copy { padding: 64px 0 0; }
  .visit-map { min-height: 320px; margin: 0 calc(var(--pad) * -1); }
  .visit-grid { padding-bottom: 64px; }

  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit:nth-child(2n) { border-right: 0; }
  .benefit:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .fav-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr; }
  .ess-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Comfortable tap targets on touch. */
  .product-name { min-height: 44px; display: flex; align-items: center; }
  .back-link { min-height: 44px; display: inline-flex; align-items: center; }

  .cta-inner { padding: 56px 32px; }
  .section, .section-lg { padding-top: 72px; }
  .band, .cta { margin-top: 72px; }
  .site-footer { margin-top: 72px; }
}

@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid, .fav-grid, .ess-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit { border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit:last-child { border-bottom: 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row > div { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .stat-row > div:last-child { border-bottom: 0; }
  .detail, .spec { grid-template-columns: 1fr; gap: 6px; }
  .brand-name { font-size: 21px; }
  .announce { font-size: 11px; letter-spacing: 0.1em; }
  .cta-inner { padding: 44px 24px; }
  .faq-q { font-size: 21px; }
  .pdp-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* Hero background — lighter file and a vertical scrim on narrow screens,
   where the copy spans the full width rather than sitting in a left column. */
@media (max-width: 1100px) {
  .hero { background-image: url("../images/hero-calgary-sm.webp"); background-position: 62% 32%; }
  /* Lighter than before so the skyline actually reads on a phone. The band
     under the copy stays heavier; the top and bottom open right up. */
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(16, 12, 9, 0.30) 0%,
      rgba(16, 12, 9, 0.58) 18%,
      rgba(16, 12, 9, 0.74) 46%,
      rgba(16, 12, 9, 0.76) 78%,
      rgba(16, 12, 9, 0.52) 100%
    );
  }
  .hero-copy { padding: 72px 0; max-width: none; }
  .hero-grid { min-height: 0; }
}