/* Desktop Scaling Fix - Better Proportions */

/* Scale down everything slightly on large screens */
@media (min-width: 1200px) {
    body {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: 1rem !important; }
}

/* Product and Category cards - smaller, more elegant */
@media (min-width: 992px) {
    .card {
        border-radius: 8px !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .card-text {
        font-size: 0.9rem !important;
    }
}

/* Images - more proportional */
@media (min-width: 992px) {
    .card-img-top {
        height: 200px !important;
        object-fit: cover !important;
    }
    
    .product-image img {
        max-height: 300px !important;
    }
}

/* Buttons - smaller and cleaner */
@media (min-width: 992px) {
    .btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }
    
    .btn-lg {
        padding: 10px 25px !important;
        font-size: 15px !important;
    }
    
    .btn-sm {
        padding: 6px 15px !important;
        font-size: 13px !important;
    }
}

/* Section spacing - tighter */
@media (min-width: 992px) {
    section,
    .section {
        padding: 40px 0 !important;
    }
    
    .section-title {
        margin-bottom: 25px !important;
        font-size: 1.75rem !important;
    }
}

/* Header - more compact */
@media (min-width: 992px) {
    .navbar {
        padding: 10px 0 !important;
    }
    
    .navbar-brand {
        font-size: 1.3rem !important;
    }
    
    .nav-link {
        font-size: 14px !important;
        padding: 8px 15px !important;
    }
}

/* Footer - more compact */
@media (min-width: 992px) {
    footer,
    .footer {
        padding: 40px 0 20px !important;
        font-size: 14px !important;
    }
    
    .footer h5 {
        font-size: 1.1rem !important;
    }
}

/* Product grid - more items per row */
@media (min-width: 1200px) {
    .products-grid,
    .categories-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

@media (min-width: 1600px) {
    .products-grid,
    .categories-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Spacing between elements */
@media (min-width: 992px) {
    .mb-3 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: 1.25rem !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }
    
    .mt-3 { margin-top: 1rem !important; }
    .mt-4 { margin-top: 1.25rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }
    
    .p-3 { padding: 1rem !important; }
    .p-4 { padding: 1.25rem !important; }
    .p-5 { padding: 1.5rem !important; }
}

/* Price - more reasonable size */
@media (min-width: 992px) {
    .price,
    .product-price {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
    }
}

/* Badges and tags - smaller */
@media (min-width: 992px) {
    .badge {
        font-size: 0.8rem !important;
        padding: 4px 8px !important;
    }
}

/* Form elements - more compact */
@media (min-width: 992px) {
    .form-control {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    .form-label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
}

/* Icons - proportional sizing */
@media (min-width: 992px) {
    i, .icon {
        font-size: 1.2rem !important;
    }
    
    .icon-lg {
        font-size: 1.5rem !important;
    }
    
    .icon-sm {
        font-size: 1rem !important;
    }
}