/* =====================================================================
   ZNAČKY — index /znacky (SearchManufacturers/index.latte)
   Pilulky = .c-pill z productsFilter.css; tu je len layout skupín a A–Z lišta.
   ===================================================================== */

/* A–Z lišta = filter — drží sa pod navbarom (--navbar-bottom nastavuje navbarPosition.js).
   Vonkajší .brands-az = sticky + fade okraje, vnútorný .brands-az__scroll = riadok piluliek. */
.brands-index .brands-az {
    position: sticky;
    top: var(--navbar-bottom, 0px);
    z-index: 1;
    background: #fff;
}

.brands-index .brands-az__scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.brands-index .brands-az__pill {
    min-height: 36px;
    min-width: 36px;
    padding: 5px 10px;
    justify-content: center;
    gap: 0;
}

.brands-index .brands-az__pill .c-pill__count {
    margin-left: 5px;
}

/* Aktívne písmeno = aktívny filter (rovnaký vizuál ako .c-pill.is-active vo filtri výpisov) */
.brands-index .brands-az__pill.is-active {
    border-color: #F39200;
    box-shadow: inset 0 0 0 1px #F39200;
}

.brands-index .brands-az__pill.is-active .c-pill__count {
    background: #F39200;
    color: #fff;
}

/* Fade na okrajoch, keď sa lišta posúva (triedy nastavuje brandsIndex.js podľa scrollLeft) */
.brands-index .brands-az::before,
.brands-index .brands-az::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.brands-index .brands-az::before {
    left: 0;
    background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0));
}

.brands-index .brands-az::after {
    right: 0;
    background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0));
}

.brands-index .brands-az.has-more-left::before,
.brands-index .brands-az.has-more-right::after {
    opacity: 1;
}

/* Skupina skrytá filtrom (JS nastavuje [hidden]; explicitne, aby to neprebil globálny display na section) */
.brands-index .brands-group[hidden] {
    display: none;
}

.brands-index .brands-group {
    margin-top: 24px;
    /* kotva #znacky-x nesmie skončiť pod sticky navbarom + A–Z lištou */
    scroll-margin-top: calc(var(--navbar-bottom, 0px) + 64px);
}

/* Písmeno skupiny — rovnaký jazyk ako .c-pill-subcat-row__label */
.brands-index .brands-group__letter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #858584);
}

.brands-index .brands-group__letter::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-primary, #D6D6D6);
}

.brands-index .brands-group__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brands-index .c-pill--link {
    font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
    .brands-index .c-pill--link:hover {
        background: rgba(243, 146, 0, 0.08);
        border-color: rgba(243, 146, 0, 0.4);
    }
}

.brands-index .c-pill--link:active {
    background: rgba(243, 146, 0, 0.08);
    border-color: rgba(243, 146, 0, 0.4);
}

/* ≤1280: .searchWrappSectionMain nemá vlastné bočné odsadenie — dostávajú ho deti (search.css:424,
   .sectionHead 16px). Naše sekcie sú priame deti, takže to isté odsadenie musia mať samy. */
@media screen and (max-width: 1280px) {
    .brands-index .brands-az__scroll,
    .brands-index .brands-group {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Mobil: A–Z lišta = jeden vodorovne scrollovateľný riadok (fade okraje signalizujú ďalšie písmená) */
@media (max-width: 767px) {
    .brands-index .brands-az__scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .brands-index .brands-az__scroll::-webkit-scrollbar {
        display: none;
    }
}