/* Horizontal clipping must not create a second scroll container for the index. */
body.page-template-page-brands:not(.tc-nav-locked) { overflow-x: clip; }
.tc-brands-page {
    padding: var(--space-8) var(--gutter) var(--space-10);
}

/* Header: intro on the left, brand search on the right so the directory starts higher. */
.tc-brands-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-10);
    margin-bottom: var(--space-8);
}
.tc-brands-intro { max-width: 680px; }
#wrapper .tc-brands-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--steel-700);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
}
.tc-brands-intro h1 { margin: 0 0 var(--space-4); font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
#wrapper .tc-brands-intro > p:last-child { color: var(--text-muted); margin: 0; font-size: var(--fs-18); line-height: 1.6; }
.tc-brands-search { flex: 0 0 440px; max-width: 100%; }
.tc-brands-search label { display: block; margin-bottom: var(--space-2); font-weight: var(--fw-semibold); }
.tc-brands-search input {
    width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-control); border-radius: var(--radius-lg);
    background: var(--surface-card); color: var(--text-heading); font: inherit;
}
#wrapper .tc-brands-count { margin: var(--space-2) 0 0; font-size: var(--fs-14); color: var(--text-muted); }

/* Chevron replaces the bare arrow glyph; inherits the link colour. */
.tc-brand-chevron { flex: none; width: 14px; height: 14px; fill: currentColor; }

/* Featured strip: the deepest catalogs get a one-click path above the A-Z directory. */
.tc-brands-featured { margin-bottom: var(--space-10); }
.tc-brands-featured-heading {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.tc-brands-featured-heading h2 { margin: 0; color: var(--text-heading); font-size: var(--fs-22); font-weight: var(--fw-bold); }
.tc-brands-featured-heading a, .tc-brands-featured-heading a:visited {
    display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap;
    color: var(--color-link); font-size: var(--fs-14); font-weight: var(--fw-semibold); text-decoration: none;
}
.tc-brands-featured-heading a:hover { color: var(--steel-700); text-decoration: underline; }
.tc-brand-tiles {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3);
    margin: 0; padding: 0; list-style: none;
}
/* Tile anatomy mirrors the homepage .tc-brand-list tiles (assets/css/pages/home.css),
   plus a product-count line. Livery values are copied from there: each manufacturer
   keeps its own colours and must not be recoloured to the palette. */
.tc-brand-tile {
    --tc-brand-bg: var(--surface-sunken);
    --tc-brand-fg: var(--text-heading);
    --tc-brand-accent: var(--border-control);
    --tc-brand-border: transparent;
    min-width: 0;
}
.tc-brand-tile a, .tc-brand-tile a:link, .tc-brand-tile a:visited {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 84px; overflow: hidden;
    padding: var(--space-4) var(--space-2) 18px;
    border: 1px solid var(--tc-brand-border); border-radius: var(--radius-lg);
    background: var(--tc-brand-bg); box-shadow: var(--shadow-hairline);
    color: var(--tc-brand-fg); text-align: center; text-decoration: none;
    transition: var(--transition-control), box-shadow var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
}
.tc-brand-tile a::after {
    position: absolute; right: 0; bottom: 0; left: 0; height: 4px;
    background: var(--tc-brand-accent); content: "";
}
.tc-brand-tile a:hover { box-shadow: var(--shadow-card); filter: brightness(1.04); text-decoration: none; transform: var(--lift-hover); }
.tc-brand-tile-name {
    font-family: var(--font-display); font-size: var(--fs-22); font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight); line-height: var(--lh-snug); overflow-wrap: anywhere;
}
.tc-brand-tile-count { font-size: var(--fs-13); font-weight: var(--fw-medium); opacity: .82; }
.tc-brand-tile.tc-brand-dewalt { --tc-brand-bg: #febd16; --tc-brand-fg: #171717; --tc-brand-accent: #171717; }
.tc-brand-tile.tc-brand-makita { --tc-brand-bg: #007c89; --tc-brand-fg: #fff; --tc-brand-accent: #111820; }
.tc-brand-tile.tc-brand-milwaukee { --tc-brand-bg: #c8102e; --tc-brand-fg: #fff; --tc-brand-accent: #191919; }
.tc-brand-tile.tc-brand-bosch { --tc-brand-bg: #fff; --tc-brand-fg: #202b3c; --tc-brand-accent: #e20015; --tc-brand-border: #d7dde6; }
.tc-brand-tile.tc-brand-skil { --tc-brand-bg: #e2231a; --tc-brand-fg: #fff; --tc-brand-accent: #252d38; }
.tc-brand-tile.tc-brand-sawstop { --tc-brand-bg: #27272a; --tc-brand-fg: #fff; --tc-brand-accent: #d71920; }
.tc-brand-tile.tc-brand-kreg { --tc-brand-bg: #005eb8; --tc-brand-fg: #fff; --tc-brand-accent: #8ed8f8; }
.tc-brand-tile.tc-brand-surfprep { --tc-brand-bg: #5b2c83; --tc-brand-fg: #fff; --tc-brand-accent: #f58220; }
.tc-brand-tile.tc-brand-ridgid { --tc-brand-bg: #202020; --tc-brand-fg: #fff; --tc-brand-accent: #d71920; }
.tc-brand-tile.tc-brand-ryobi { --tc-brand-bg: #97c93d; --tc-brand-fg: #151a10; --tc-brand-accent: #151a10; }
/* While a search is active the featured strip would only repeat the results. */
.tc-brands-page.is-filtering .tc-brands-featured { display: none; }

.tc-brand-index {
    position: sticky; top: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); gap: 4px;
    padding: var(--space-3) 0; margin-bottom: var(--space-4);
    background: var(--surface-card); border-bottom: 1px solid var(--border-card);
}
.tc-brand-index-letter > a, .tc-brand-index-letter > span {
    display: flex; align-items: center; justify-content: center; min-height: 40px;
    border-radius: var(--radius-sm); font-size: var(--fs-14); font-weight: var(--fw-semibold);
}
.tc-brand-index-letter > a, .tc-brand-index-letter > a:visited { color: var(--steel-700); text-decoration: none; }
.tc-brand-index-letter > a:hover, .tc-brand-index-letter > a:focus-visible { background: var(--steel-100); }
.tc-brand-index-letter > span { color: var(--text-muted); opacity: .45; }
.tc-brand-directory { scroll-margin-top: var(--tc-brand-index-offset, 220px); }
.tc-brand-group {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4);
    padding: var(--space-6) 0; border-bottom: 1px solid var(--border-card);
    scroll-margin-top: var(--tc-brand-index-offset, 220px);
}
.tc-brand-group h2 { margin: 6px 0 0; color: var(--text-heading); font-size: var(--fs-22); font-weight: var(--fw-bold); }
.tc-brand-group ul {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-6);
    margin: 0; padding: 0; list-style: none;
}
.tc-brand-group li { min-width: 0; }
.tc-brand-group a, .tc-brand-group a:visited {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: 44px; height: 100%; padding: var(--space-2) var(--space-3);
    color: var(--text-heading); border-radius: var(--radius-sm); text-decoration: none;
}
.tc-brand-group a:hover { background: var(--surface-1); color: var(--steel-700); text-decoration: none; }
.tc-brand-name { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1.4; overflow-wrap: anywhere; }
.tc-brand-meta { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; color: var(--steel-700); }
.tc-brand-count { font-size: var(--fs-14); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.admin-bar .tc-brand-index { top: 32px; }
@media (max-width: 782px) { .admin-bar .tc-brand-index { top: 46px; } }
.tc-brands-page :is(a, input, button):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.tc-brands-page [hidden] { display: none !important; }
.tc-brands-empty { padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); }
.tc-brands-empty h2 { margin: 0 0 var(--space-3); font-size: var(--fs-22); }
.tc-brands-reset { padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; text-decoration: underline; cursor: pointer; }
#wrapper .tc-brands-help { margin: var(--space-8) 0 0; color: var(--text-muted); }
@media (max-width: 1100px) { .tc-brand-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .tc-brands-header { flex-direction: column; align-items: stretch; gap: var(--space-6); }
    .tc-brands-search { flex-basis: auto; max-width: 440px; }
    .tc-brand-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .admin-bar .tc-brand-index { top: 0; }
    .tc-brands-featured { margin-bottom: var(--space-8); }
    .tc-brand-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-brand-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; }
    .tc-brand-group ul { grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
    .tc-brand-group a { padding-inline: 0; }
}