.brands-section {
    max-width: 1400px;
    margin: 40px auto;
}

.brands-header {
    background: linear-gradient(to right, #1c1c1c 40%, rgba(28, 28, 28, 0)), url('../assets/engine-bg.png') no-repeat right center;
    background-color: #111;
    background-size: cover;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 40px;
    min-height: 120px;
}

.brands-header-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
}

.brands-header-subtitle {
    color: #b0b0b0;
    font-size: 15px;
}

.brands-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.brand-card {
    background-color: #f2f2f2;
    border-radius: 12px;
    width: 220px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
    text-decoration: none;
    padding: 20px;
    position: relative;
}

.brand-card:hover {
    transform: translateY(-5px);
}

.brand-card.coming-soon {
    background-color: #e8e8e8;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.brand-card.coming-soon:hover {
    transform: none;
}

.brand-card img {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    transition: filter 0.3s;
}

.brand-card.coming-soon img {
    filter: grayscale(100%);
}

.coming-soon-badge {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: #cc0000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(204, 0, 0, 0.3);
}

.models-empty {
    background: #f9f9f9;
    border-radius: 12px;
    border: 2px dashed #ddd;
}