/* css/products.css */
.product-card-hover {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.product-card-hover:hover {
    transform: translateY(-10px);
    border-color: var(--primary-red) !important;
}

.product-card-hover:hover .btn {
    background-color: var(--primary-red) !important;
    color: white !important;
    border: none;
}

.product-card-hover .card-img-top img {
    transition: transform 0.5s ease;
}

.product-card-hover:hover .card-img-top img {
    transform: scale(1.1);
}

/* Brand Names Base Style */
.brand-name {
    letter-spacing: 2px;
}

/* ===========================
   MOBILE RESPONSIVE STYLES
   =========================== */

@media (max-width: 991px) {
    .products-section {
        padding: 40px 0 !important;
    }
    
    .products-section .row.justify-content-center {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .products-section .row.justify-content-center h4,
    .products-section .brand-name {
        font-size: 0.9rem !important;
        margin: 5px !important;
        letter-spacing: 1px !important;
    }
    
    .products-section h2 {
        font-size: 2rem !important;
    }
    
    .product-card-hover .card-img-top {
        height: 180px !important;
    }
    
    .product-card-hover .card-title {
        font-size: 1.1rem !important;
    }
    
    .product-card-hover .fs-2 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .products-section {
        padding: 30px 0 !important;
    }
    
    .products-section .row.justify-content-center {
        flex-direction: row;
        align-items: center;
    }
    
    .products-section .row.justify-content-center h4,
    .products-section .brand-name {
        font-size: 0.8rem !important;
        letter-spacing: 1px !important;
    }
    
    .products-section h2 {
        font-size: 1.5rem !important;
    }
    
    .products-section .small {
        font-size: 11px !important;
    }
    
    .product-card-hover .card-img-top {
        height: 160px !important;
    }
    
    .product-card-hover .card-body {
        padding: 15px !important;
    }
    
    .product-card-hover .card-title {
        font-size: 1rem !important;
    }
    
    .product-card-hover .card-text {
        font-size: 12px !important;
        min-height: auto !important;
    }
    
    .product-card-hover .fs-2 {
        font-size: 1.3rem !important;
    }
}