/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
    .bs-hero-inner { grid-template-columns: 1fr; }
    .bs-how-grid   { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .bs-product-grid { grid-template-columns: repeat(2,1fr); }
    .bs-how-grid     { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .bs-product-grid { grid-template-columns: 1fr; }
    .bs-how-grid     { grid-template-columns: 1fr; }
    .bs-tip-visual   { display: none; }
}