/* Mobile-first enhancements. Bootstrap breakpoints: 576, 768, 992, 1200, 1400; plus 1600 for large monitors. */
@media (max-width: 359.98px) {
  .wordmark { font-size: 1.25rem; letter-spacing: .24em; }
  .product-grid { grid-template-columns: 1fr; }
  .display-title { font-size: 1.9rem; }
}
@media (min-width: 576px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-tile--wide { grid-column: span 2; aspect-ratio: 21 / 9; }
  .inline-filters { grid-template-columns: repeat(3, 1fr) auto; }
}
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .product-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: var(--space-6) 0; }
  .hero-bottle { width: min(40vw, 380px); }
}
@media (min-width: 992px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-5); }
  .hero__stage { order: 0; }
  .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swiper-btn { display: grid; }
  .collection-grid { grid-template-columns: repeat(4, 1fr); }
  .collection-tile--wide { grid-column: span 2; aspect-ratio: auto; }
  .collection-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .filter-panel { position: sticky; top: calc(var(--header-h) + 1rem); }
  .has-sticky-cta { padding-bottom: 0; }
  .has-sticky-cta .wa-float { display: grid; }
}
@media (min-width: 1200px) {
  .navbar-collapse { background: transparent; }
  .navbar .nav-link { padding: .8rem .75rem; }
  .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
  .navbar-collapse { padding: .5rem 0 1rem; border-top: 1px solid var(--line); max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
}
@media (min-width: 1600px) {
  .container-xxl { max-width: 1560px; }
  body { font-size: 1.125rem; }
}
/* Landscape phones: keep the hero from overflowing */
@media (max-height: 480px) and (orientation: landscape) {
  .hero__grid { min-height: auto; }
  .hero-bottle { width: 160px; }
}
@media (hover: none) {
  .btn-quick { position: static; display: block; width: 100%; margin-top: .5rem; }
}