/* =============================================================
   Mockito — Best Sellers GRID Section (homepage)
   Simple, static CSS grid. Fully independent from the slider
   styles/JS (different class names: .bs-grid-wrap / .bs-grid),
   so nothing here can conflict with or be overridden by
   mockito-best-sellers-slider.css / .js used elsewhere.
   ============================================================= */

/* Reset the slider's section padding/overflow (loaded before this file) */
#products.mockito-section {
    overflow: visible;
    padding: 60px 4% 52px;
}

#products .bs-grid-wrap {
    padding: 0;
}

#products .bs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

#products .bs-grid .pc {
    width: 100%;
}

/* ── Responsive column counts ─────────────────────────────── */
@media (max-width: 1199px) {
    #products .bs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    #products .bs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    #products .bs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #products.mockito-section {
        padding: 40px 16px;
    }
}