/* ============================================================
   brands.css — brand cross-link grid, brand product buttons,
                brand page layout, brand directory
   ============================================================ */

/* ---- BRAND PRODUCT BUTTONS REGION ------------------------- */
.fmo-brand-products { margin: var(--fmo-gap) 0; }

/* ---- BRAND CROSS-LINK GRID -------------------------------- */
.fmo-brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin: var(--fmo-gap) 0;
}

.fmo-brand-grid a {
    display: block;
    text-align: center;
    padding: 5px 8px;
    border: 1px solid var(--fmo-border);
    background: var(--fmo-white);
    font-size: 0.75rem;
    color: var(--fmo-black);
    border-radius: 2px;
    transition: all var(--fmo-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fmo-brand-grid a:hover {
    background: var(--fmo-off-white);
    border-color: var(--fmo-link);
    color: var(--fmo-link);
}

/* ---- BRAND DIRECTORY (14,000+ brands listing) ------------- */
.fmo-brand-directory { margin: var(--fmo-gap) 0; }

.fmo-brand-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--fmo-gap);
    padding-bottom: var(--fmo-gap);
    border-bottom: 1px solid var(--fmo-border);
}

.fmo-brand-alpha-nav a {
    display: inline-block;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    border: 1px solid var(--fmo-border);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 2px;
    color: var(--fmo-black);
    transition: all var(--fmo-transition);
}
.fmo-brand-alpha-nav a:hover,
.fmo-brand-alpha-nav a.active {
    background: var(--fmo-nav-bg);
    color: var(--fmo-white);
    border-color: var(--fmo-nav-bg);
}

.fmo-brand-alpha-section { margin-bottom: var(--fmo-gap); }

.fmo-brand-alpha-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fmo-nav-bg);
    border-bottom: 2px solid var(--fmo-nav-bg);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.fmo-brand-alpha-list {
    column-count: 4;
    column-gap: var(--fmo-gap);
}

.fmo-brand-alpha-list li {
    break-inside: avoid;
    padding: 2px 0;
}

.fmo-brand-alpha-list li a {
    font-size: 0.82rem;
    color: var(--fmo-link);
    transition: color var(--fmo-transition);
}
.fmo-brand-alpha-list li a:hover { color: var(--fmo-link-hover); }

/* ---- BRAND PAGE LAYOUT ------------------------------------ */
.fmo-brand-page-wrap {
    background: var(--fmo-white);
    border: 1px solid var(--fmo-border);
    padding: var(--fmo-gap);
    border-radius: 3px;
}

/* ---- RESPONSIVE ------------------------------------------- */
@media (max-width: 800px) {
    .fmo-brand-grid { grid-template-columns: repeat(3, 1fr); }
    .fmo-brand-alpha-list { column-count: 2; }
}