/* Brands first on the catalogue's first page (owner, 2026-11-15): inc/brand-nav.php. Colour photo tiles with the
   brand's logo in white, like the home page; a click opens the brand's kinds under the row. Under them, the kinds
   as a plain text menu (inc/catalogue.php barami_catalogue_kinds_menu). */
.bm-bn { margin-top: 20px; }
.bm-bn__label { margin: 0 0 10px; font-size: 13px; letter-spacing: .04em; color: rgba(26, 26, 26, .55); }
.bm-bn__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bm-bn__brand {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 12px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: #2b2926;
    cursor: pointer;
    text-decoration: none;
}
.bm-bn__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .6s ease;
}
.bm-bn__brand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
    transition: background .3s;
}
.bm-bn__brand:hover .bm-bn__photo { transform: scale(1.06); }
.bm-bn__brand:hover::after { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .45) 100%); }
.bm-bn__brand[aria-expanded="true"] { box-shadow: 0 0 0 3px #9C6C2E; }
.bm-bn__brand:focus-visible { outline: 2px solid #9C6C2E; outline-offset: 3px; }
.bm-bn__logo {
    position: relative;
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 78% !important;
    max-height: 34px !important;
    object-fit: contain;
    border-radius: 0 !important;
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.bm-bn__name { position: relative; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }

.bm-bn__panel { margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: #f4f2ee; }
.bm-bn__panel[hidden] { display: none; }
.bm-bn__panel-title { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: #1a1a1a; }
.bm-bn__kinds { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.bm-bn__kinds a { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid transparent; }
.bm-bn__kinds a:hover,
.bm-bn__kinds a:focus-visible { border-bottom-color: #9C6C2E; }
.bm-bn__count { font-size: 11px; color: rgba(26, 26, 26, .45); }
.bm-bn__all a { color: #9C6C2E; }

/* The kinds: one line "גופי תאורה +" that opens a list with thin rules (owner, 2026-11-15, like yairdoram.co.il). */
.bm-kinds { margin-top: 26px; }
.bm-kinds__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, .14);
    border-bottom: 1px solid rgba(26, 26, 26, .14);
    background: none;
    font: inherit;
    font-size: 22px;
    color: #1a1a1a;
    cursor: pointer;
    text-align: start;
}
.bm-kinds__toggle:focus-visible { outline: 2px solid #9C6C2E; outline-offset: 2px; }
.bm-kinds__plus { position: relative; width: 22px; height: 22px; flex: none; }
.bm-kinds__plus::before,
.bm-kinds__plus::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .3s ease; }
.bm-kinds__plus::after { transform: rotate(90deg); }
.bm-kinds__toggle[aria-expanded="true"] .bm-kinds__plus::after { transform: rotate(0deg); }
.bm-kinds__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.bm-kinds__list[hidden] { display: none; }
.bm-kinds__list li { border-bottom: 1px solid rgba(26, 26, 26, .1); }
.bm-kinds__list a { display: block; padding: 13px 0; font-size: 18px; color: #1a1a1a; text-decoration: none; transition: color .2s, padding .2s; }
.bm-kinds__list a:hover,
.bm-kinds__list a:focus-visible { color: #9C6C2E; padding-inline-start: 6px; }
@media (min-width: 768px) { .bm-kinds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bm-kinds__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 767px) {
    .bm-bn__row { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .bm-bn__row::-webkit-scrollbar { display: none; }
    .bm-bn__cell { flex: 0 0 132px; }
}