/* ==========================================================================
   Brands A–Z (page-brands.php) + brand landing (taxonomy-product_brand.php).
   Design: design/source/full/Brands.dc.html (update 05/10/2026). Tokens: main.css.
   ========================================================================== */

/* ---------- shared ---------- */

.vz-bz__status { margin-top: 6px; font-size: 15px; color: var(--muted); }
.vz-bz__count { font-size: 12.5px; font-weight: 400; color: var(--muted); flex: none; }
.vz-bz__h2 { font-family: var(--font-head); font-weight: 600; font-size: 17px; margin-bottom: 12px; }

.vz-bz__toptile,
.vz-br__cat {
    background: rgba(255, 255, 255, .86);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.vz-bz__toptile:hover,
.vz-br__cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--ink); text-decoration: none; }

/* ---------- A–Z: head ---------- */

.vz-bz__head { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.vz-bz__title { min-width: 0; }
.vz-bz__title .vz-h1 { margin-top: 0; font-size: clamp(24px, 3vw, 30px); }
.vz-bz__find { display: flex; flex-direction: column; gap: 6px; width: min(100%, 360px); }
.vz-bz__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.vz-bz__field {
    height: var(--h-ctl);
    border-radius: var(--r-ctl);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--ring-input);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 14px;
}
.vz-bz__field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.vz-bz__field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.vz-bz__field input::-webkit-search-cancel-button { display: none; }
.vz-bz__field input::placeholder { color: var(--faint); }
.vz-bz__clear { width: 32px; height: 32px; border: 0; border-radius: var(--r-item); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.vz-bz__clear:hover { background: var(--hover); }
.vz-bz__clear[hidden] { display: none; }

/* ---------- A–Z: most stocked ---------- */

.vz-bz__top { margin-top: 28px; }
.vz-bz__top[hidden] { display: none; }
.vz-bz__toplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.vz-bz__toptile { height: 72px; padding: 0 18px; border-radius: var(--r-tile); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vz-bz__topname { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.vz-bz__ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 6px logo-colour bar, cycling yellow / cyan / magenta */
.vz-bz__bar { width: 6px; height: 24px; border-radius: 2px; flex: none; background: var(--logo-yellow); }
.vz-bz__toplist li:nth-child(3n+2) .vz-bz__bar { background: var(--logo-cyan); }
.vz-bz__toplist li:nth-child(3n+3) .vz-bz__bar { background: var(--logo-magenta); }

/* ---------- A–Z: sticky letter bar ---------- */

.vz-bz__letters {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 28px calc(-1 * var(--gutter)) 0;
    padding: 10px var(--gutter);
    background: rgba(245, 245, 245, .92);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--line);
}
.vz-bz__lettersrow { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.vz-bz__lettersrow a,
.vz-bz__lettersrow span {
    flex: none;
    min-width: 36px;
    height: var(--h-sm);
    padding: 0 6px;
    border-radius: var(--r-pill);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}
.vz-bz__lettersrow a { color: var(--ink); text-decoration: none; }
.vz-bz__lettersrow a:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--ring-input); text-decoration: none; }
.vz-bz__lettersrow a.is-off { color: var(--dark-text); pointer-events: none; }
.vz-bz__lettersrow span { color: var(--dark-text); }

/* ---------- A–Z: letter cards ---------- */

.vz-bz__groups { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.vz-bz__group {
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .86);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: 16px 20px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 24px;
    scroll-margin-top: 72px;
}
.vz-bz__group[hidden] { display: none; }
@media (min-width: 640px) { .vz-bz__group { grid-template-columns: 56px minmax(0, 1fr); } }
.vz-bz__letter { font-family: var(--font-head); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -.02em; padding-top: 6px; }
.vz-bz__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 480px) { .vz-bz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .vz-bz__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vz-bz__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vz-bz__list li { border-bottom: 1px solid #EFEFEF; }
.vz-bz__list li[hidden] { display: none; }
.vz-bz__list a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.vz-bz__list a:hover { text-decoration: underline; }

/* ---------- A–Z: no match ---------- */

.vz-bz__none {
    margin-top: 20px;
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .86);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: clamp(32px, 5vw, 48px) 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.vz-bz__none[hidden] { display: none; }
.vz-bz__none .vz-h3 { margin-top: 8px; overflow-wrap: anywhere; }
.vz-bz__none p { font-size: 14.5px; color: var(--muted); max-width: 440px; }
.vz-bz__none .vz-btn { margin-top: 8px; }

/* ---------- brand: head ---------- */

.vz-br__head { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .vz-br__head.has-side { grid-template-columns: minmax(0, 1fr) 340px; } }
.vz-br__main { min-width: 0; }
.vz-br__h1 { font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.vz-br__intro { margin-top: 16px; font-size: 15.5px; color: var(--text-2); max-width: 680px; text-wrap: pretty; }
.vz-br__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.vz-br__actions .vz-btn--secondary { box-shadow: inset 0 0 0 1px var(--ring-input); }
.vz-br__side { border-radius: var(--r-card); background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; }
.vz-br__sidetitle { font-size: 12px; font-weight: 500; color: var(--muted); }
.vz-br__conds { margin-top: 10px; }
.vz-br__conds a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #EFEFEF; color: var(--ink); text-decoration: none; }
.vz-br__conds li:last-child a { border-bottom: 0; }
.vz-br__conds a:hover .vz-br__condn { text-decoration: underline; }
.vz-br__condn { font-size: 14px; font-weight: 600; }

/* ---------- brand: sections ---------- */

.vz-br__sec { margin-top: clamp(32px, 4vw, 48px); }
.vz-br__h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 2.2vw, 22px); letter-spacing: -.02em; }
.vz-br__sec > .vz-br__h2 { margin-bottom: 12px; }
.vz-br__sec > .vz-br__h2 + .vz-br__sub { margin-top: -8px; }
.vz-br__sub { margin: 4px 0 12px; font-size: 14px; color: var(--muted); }
.vz-br__sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.vz-br__sechead .vz-br__sub { margin-bottom: 0; }

.vz-br__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.vz-br__cat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-pcard); height: 100%; }
.vz-br__catbody { display: flex; flex-direction: column; min-width: 0; }
.vz-br__catname { font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.3; }
.vz-br__catn { font-size: 12px; color: var(--muted); }

.vz-br__pns { display: flex; flex-wrap: wrap; gap: 8px; }
.vz-br__pn {
    height: var(--h-sm);
    padding: 0 14px;
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--line);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.vz-br__pn:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); text-decoration: none; }
.vz-br__pnn { font-weight: 400; font-size: 12px; color: var(--muted); }

.vz-br__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 700px) { .vz-br__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vz-br__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vz-br__grid > li { min-width: 0; }

/* ---------- brand: request strip + about ---------- */

.vz-br__strip {
    margin-top: clamp(32px, 4vw, 48px);
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: clamp(18px, 3vw, 28px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
}
.vz-br__stripbody { flex: 1; min-width: min(100%, 240px); }
.vz-br__striptitle { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.vz-br__striptext { font-size: 14.5px; color: var(--muted); }
.vz-br__strip .vz-btn--secondary { box-shadow: inset 0 0 0 1px var(--ring-input); }

.vz-br__about { margin-top: clamp(32px, 4vw, 48px); max-width: 820px; }
.vz-br__abouttitle { font-family: var(--font-head); font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.vz-br__aboutbody { position: relative; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--text-2); text-wrap: pretty; }
.vz-br__aboutbody.is-clamped { max-height: 96px; overflow: hidden; }
.vz-br__aboutbody.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(245, 245, 245, 0), var(--surface)); }
.vz-br__more { margin-top: 6px; height: var(--h-sm); padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.vz-br__more[hidden] { display: none; }
.vz-br__more .vz-icon { transition: transform .2s; }
.vz-br__more[aria-expanded="true"] .vz-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .vz-bz__toptile, .vz-br__cat, .vz-br__more .vz-icon { transition: none; }
    .vz-bz__toptile:hover, .vz-br__cat:hover { transform: none; }
}