/* Stellar Brands (category + directory) 30.09.2026: GLUE ONLY.
 * The brand rows are the shared .sim list with a 40px .lo tile, the H2 is .h2, both from
 * deal-design-system components.css (body.ds2). This file keeps the one-line A-Z strip and the
 * per-letter section switching. Hairlines, Figtree, palette tokens only.
 * No gradients, shadows, dark mode. Markup contract with js/stellar-brands.js unchanged
 * (.stellar-brands-nav a[data-letter], .brand-list-section, .active, .sbd-loading). */

#stellar-brands-container,
#stellar-brands-container * { box-sizing: border-box; }

.ds2 #stellar-brands-container {
    font-family: var(--ds-font);
    color: var(--ink, #16201B);
    background: transparent;
    padding: 0;
    margin: 0;
}
/* directory page (no .sec heading above the strip) keeps its own spacing */
.ds2 :not(.sec) > #stellar-brands-container { margin: var(--s2, 16px) 0 var(--gap, 32px); }

/* --- A-Z strip: every letter is the same 44px box (links and disabled letters alike), one baseline,
 * equal gaps. Phone: one horizontally scrollable row with a right edge fade (classes sbd-nav-noscroll
 * and sbd-nav-end come from js/stellar-brands.js and drop the fade). Desktop: wraps into clean rows. --- */
.ds2 #stellar-brands-container .stellar-brands-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0 0 var(--s2, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 -1px 0 var(--hair, #D9E0DC);
    -webkit-mask-image: linear-gradient(to right, var(--ink, #16201B) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, var(--ink, #16201B) calc(100% - 32px), transparent);
}
.ds2 #stellar-brands-container .stellar-brands-nav::-webkit-scrollbar { display: none; }
.ds2 #stellar-brands-container .stellar-brands-nav.sbd-nav-noscroll,
.ds2 #stellar-brands-container .stellar-brands-nav.sbd-nav-end { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 768px) {
    .ds2 #stellar-brands-container .stellar-brands-nav {
        flex-wrap: wrap;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}
.ds2 #stellar-brands-container .stellar-brands-nav a,
.ds2 #stellar-brands-container .stellar-brands-nav span {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 6px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    font-size: var(--fs-2, 15px);
    font-weight: 600;
    line-height: var(--lh-2, 22px);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.ds2 #stellar-brands-container .stellar-brands-nav a { position: relative; color: var(--ink, #16201B); }
.ds2 #stellar-brands-container .stellar-brands-nav a:focus-visible { outline: 3px solid var(--g600, #1F7A46); outline-offset: -3px; }
.ds2 #stellar-brands-container .stellar-brands-nav a.active { color: var(--g700, #17643A); font-weight: 700; }
.ds2 #stellar-brands-container .stellar-brands-nav a.active::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 2px;
    background: var(--g700, #17643A);
}
.ds2 #stellar-brands-container .stellar-brands-nav span.disabled { color: var(--muted, #56635B); cursor: default; font-weight: 400; }
@media (hover: hover) {
    .ds2 #stellar-brands-container .stellar-brands-nav a:hover { color: var(--g700, #17643A); }
}

/* --- Content: one letter section visible at a time --- */
.ds2 #stellar-brands-container .stellar-brands-content { opacity: 1; transition: opacity .2s ease-in-out; }
.ds2 #stellar-brands-container .stellar-brands-content.sbd-loading { opacity: .6; }
.ds2 #stellar-brands-container .brand-list-section { display: none; }
.ds2 #stellar-brands-container .brand-list-section.active { display: block; }

.ds2 #stellar-brands-container .brand-list-heading {
    font-size: var(--fs-3, 18px);
    line-height: var(--lh-3, 24px);
    font-weight: 700;
    color: var(--ink, #16201B);
    margin: 0 0 var(--s2, 16px);
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
}
.ds2 #stellar-brands-container .brand-list-heading .brand-list-heading-letter { font-weight: inherit; color: inherit; }

.ds2 #stellar-brands-container .sbd-no-brands-message { font-size: var(--fs-2, 15px); line-height: var(--lh-2, 22px); color: var(--muted, #56635B); padding: var(--s2, 16px) 0; }

/* --- Brand rows: names wrap (never cut), Astra link underline off --- */
.ds2 #stellar-brands-container .brand-link { text-decoration: none; color: var(--ink, #16201B); overflow-wrap: break-word; hyphens: none; }
.ds2 #stellar-brands-container .brand-link .bl-name { font-size: var(--fs-2, 15px); line-height: var(--lh-2, 22px); }
.ds2 #stellar-brands-container .brand-link .bl-note { font-size: var(--fs-1, 13px); line-height: var(--lh-1, 18px); color: var(--muted, #56635B); }