/* Brands page styling. Scoped under .b2b-brands so it never leaks onto other pages. */

.b2b-brands { max-width: 980px; margin: 0 auto; padding: 0 4px 40px; }
.b2b-brands__hero { padding: 8px 0 32px; border-bottom: 1px solid #e5e7eb; margin-bottom: 32px; }
.b2b-brands__hero h1 { font-size: 34px; line-height: 1.2; font-weight: 800; margin: 0 0 12px; color: #1a1a2e; }
.b2b-brands__hero p { font-size: 16px; line-height: 1.6; color: #6b7280; max-width: 70ch; margin: 0; }

.b2b-brands__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.b2b-brand-card {
    display: flex; flex-direction: column; gap: 6px;
    background: #f5f7fa; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 22px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.b2b-brand-card:hover { border-color: #0057D9; box-shadow: 0 2px 10px rgba(0,87,217,0.12); }
.b2b-brand-card__name { font-size: 17px; font-weight: 700; color: #1a1a2e; }
.b2b-brand-card__count { font-size: 12.5px; color: #6b7280; }

@media (max-width: 700px) {
    .b2b-brands__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .b2b-brands__grid { grid-template-columns: 1fr; }
}