/*
  Tapetum.in — responsive overrides (v2 redesign)
  Single confirmed theme breakpoint carried over from the original site: 750px.
*/

/* Small phones */
@media screen and (max-width: 374px) {
  .product-grid { gap: 10px; }
  .site-header__inner { padding: 10px 12px; }
  .hero__title { font-size: 28px; }
}

/* Phones (360–480px covered by mobile-first defaults) */
@media screen and (max-width: 749px) {
  .container { padding: 0 16px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .product-main { padding: 22px 16px; gap: 26px; }
  .cart-drawer { width: 100%; }
  .site-footer__inner { flex-direction: column; gap: 26px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; text-align: left; }
  .hero-enquiry { order: -1; }
  .cta-band__actions .btn { width: 100%; }
  .enquiry-panel__row { flex-direction: column; }
}

/* Tablets and up */
@media screen and (min-width: 750px) and (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small desktop */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Large desktop */
@media screen and (min-width: 1440px) {
  :root { --container-max: 1360px; }
}

/* Landscape phones */
@media screen and (max-width: 749px) and (orientation: landscape) {
  .hero__inner { padding-top: 30px; padding-bottom: 30px; }
}