/* ── Brands page ── */
.brands-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

/* ── Type toggle ── */
.brands-toggle {
    display: inline-flex;
    background: #F3F4F6;
    border-radius: 40px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 32px;
}

.brands-toggle__btn {
    padding: 8px 28px;
    border-radius: 36px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #6A7282;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    font-family: inherit;
}

.brands-toggle__btn.active {
    background: #6A142C;
    color: #fff;
    box-shadow: 0 2px 8px rgba(106, 20, 44, 0.18);
}

.brands-toggle__btn:hover:not(.active) {
    background: #E5E7EB;
    color: #1E2939;
}

/* ── 6-column brand grid ── */
.brands-grid-new {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.brand-card-new {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #E9E0E1;
    text-decoration: none;
    color: #0A0A0A;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.brand-card-new:hover {
    border-color: #6A142C;
    box-shadow: 0 4px 16px rgba(106, 20, 44, 0.10);
    transform: translateY(-2px);
}

.brand-card-new__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F7F2F3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-card-new__img-wrap img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}

.brand-card-new__body {
    padding: 10px 14px 12px;
}

.brand-card-new__name {
    font-size: 13px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1.3;
}

.brands-container.hidden {
    display: none;
}

@media (max-width: 1100px) {
    .brands-grid-new {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 860px) {
    .brands-grid-new {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .brands-grid-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .brands-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }
}