/* Brand rows (owner, 2026-11-15: "always one row, whatever the number of brands, no scrolling"). The catalogue's
   brand row and the catalogue menu share the width equally among all brands, so a new brand only makes every tile
   a little smaller. Loaded last. On a phone, one row of 14+ tiles would be too small to read, so the brands sit in
   short rows of five, all visible at once, without sideways scrolling. */
@media (min-width: 768px) {
    .bm-bn .bm-bn__row {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    .bm-bn .bm-bn__cell { min-width: 0; flex: none !important; }
    .bm-bn .bm-bn__brand { aspect-ratio: 1 / 1; padding: 8px; border-radius: 10px; }
    .bm-bn .bm-bn__logo { max-height: 22px !important; max-width: 84% !important; }
}
@media (max-width: 767px) {
    .bm-bn .bm-bn__row {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    .bm-bn .bm-bn__cell { min-width: 0; flex: none !important; }
    .bm-bn .bm-bn__brand { aspect-ratio: 1 / 1; padding: 5px; border-radius: 8px; }
    .bm-bn .bm-bn__logo { max-height: 14px !important; max-width: 88% !important; }
}

/* The catalogue menu on smaller computers: tighter, the names smaller, still one row. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .bm-mm .bm-mm__row.bm-mm__row--brands { gap: 6px !important; }
    .bm-mm__brand-logo { max-height: 18px !important; }
    .bm-mm__brand-name { font-size: 11px; }
}