/* Responsive overrides. Markup uses inline styles everywhere, so these
   rules use !important to win over them at narrow viewports. */

@keyframes bswBadgePop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
[data-cart-badge].bsw-badge-pop { animation: bswBadgePop .38s ease; }

@media (max-width: 900px) {
  .bsw-grid-4 { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 680px) {
  /* Flex/grid children default to min-width:auto (= their content's
     min-content), which lets a long unbreakable string (e.g. a <select>
     option) force its container wider than the viewport. Zeroing it out
     lets everything actually shrink to fit instead of overflowing. */
  * { min-width: 0; }

  .bsw-nav { padding: 10px 16px !important; }
  .bsw-nav-links { gap: 10px !important; }
  .bsw-nav-home { display: none !important; }
  .bsw-nav-link { font-size: 12.5px !important; }
  .bsw-nav-cta { padding: 9px 14px !important; font-size: 11.5px !important; }

  .bsw-section { padding: 64px 20px !important; }
  .bsw-page-header { padding: 96px 20px 44px !important; }
  .bsw-hero-pad { padding: 96px 20px 56px !important; }
  .bsw-footer-pad { padding: 28px 20px !important; }
  .bsw-privacy-wrap { padding: 96px 20px 64px !important; }

  .bsw-grid-2, .bsw-grid-3, .bsw-grid-4 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .bsw-contact-row { grid-template-columns: 1fr !important; }

  .bsw-hero-buttons, .bsw-cta-buttons { flex-wrap: wrap !important; }
  .bsw-hero-buttons a, .bsw-cta-buttons a { flex: 1 1 auto !important; text-align: center !important; }

  .bsw-media-card { width: 100% !important; max-width: 380px !important; }

  .bsw-footer-row { flex-wrap: wrap !important; justify-content: center !important; text-align: center !important; gap: 16px !important; }
  .bsw-footer-links { justify-content: center !important; flex-wrap: wrap !important; gap: 12px 18px !important; }

  .bsw-hotdeal { padding: 26px 22px !important; }
  .bsw-hotdeal-badge { top: -10px !important; left: 20px !important; }

  .bsw-section-head { flex-wrap: wrap !important; }
  .bsw-section-head a { white-space: normal !important; }
}