/*
 * TTF Nav: Flow B on brand pages (Hub Run Sheet H3.1).
 *
 * One row per category the brand sells in: its name and "View all", then the subcategory tiles and chips of
 * hub-header.css, which ttf-nav/brand.php enqueues with this file on page 1 of a brand archive. The block sits
 * in .primary-column right after the brand header. Rows after the sixth stay in the HTML, hidden until their
 * chip in the row at the top is followed (:target). Class prefix ttf-fb.
 */

.ttf-fb { margin: 0 0 1.75rem; }

/* The chip row: every row, as an in-page link. */
.ttf-fb__jump { margin: 0 0 1.1rem; }

.ttf-fb__row { margin: 0 0 1.35rem; scroll-margin-top: 6rem; }
.ttf-fb__row--more:not(:target) { display: none; }

/* The row heading: the category name, then "View all". */
.ttf-fb__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin: 0 0 .65rem;
}
.ttf-fb .ttf-fb__title {
    --ttf-h2: 1.0625rem; /* ttf-page-zoom.php sizes every h2 through this property, with !important */
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary, #212529);
}
.ttf-fb__all {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary, #EF233C);
    text-decoration: none;
    white-space: nowrap;
}
.ttf-fb__all::after { content: "\00a0\2192"; }
.ttf-fb__all:hover,
.ttf-fb__all:focus-visible { color: var(--color-primary, #EF233C); text-decoration: underline; }

/* A row without tiles is its heading alone. */
.ttf-fb__head:only-child { margin-bottom: 0; }

/* A brand × category page: the count line, the pair's text (the theme clamps it, with "Read more"), the tiles. */
.ttf-fb--pair .ttf-hh__summary { margin-top: 0; }
.ttf-fb--pair .ttf-fb__text + .ttf-hh__tiles,
.ttf-fb--pair .ttf-brand-read-more + .ttf-hh__tiles { margin-top: 1.1rem; }

@media (max-width: 767.98px) {
    .ttf-fb { margin-bottom: 1.25rem; }
    .ttf-fb__jump { margin-bottom: .9rem; }
    .ttf-fb__row { margin-bottom: 1.1rem; }
    .ttf-fb .ttf-fb__title { --ttf-h2: 1rem; font-size: 1rem; }
}