/**
 * Estilos Responsive
 * Media queries y ajustes para diferentes tamaños de pantalla
 */

/* Layout principal */
.main-layout {
    display: flex;
    min-height: calc(100vh - 80px);
}

.main-content {
    flex: 1;
    padding: var(--spacing-lg);
}

/* Desktop (más de 1024px) */
@media (min-width: 1025px) {
    .main-layout {
        display: flex;
    }
    
    .main-content {
        max-width: calc(100% - 250px);
    }
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .main-content {
        padding-top: var(--spacing-sm);
    }

    .product-card {
        flex: 0 0 calc(33.333% - 16px);
    }
}

/* Mobile (hasta 768px) */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;
    }
    
    .main-content {
        padding: var(--spacing-md);
        padding-top: var(--spacing-xs);
    }
    
    .product-carousel-section {
        padding: 0 var(--spacing-md);
    }
    
    .carousel-track {
        gap: var(--spacing-md);
    }
}

/* Mobile pequeño (hasta 480px) */
@media (max-width: 480px) {
    .main-content {
        padding: var(--spacing-sm);
        padding-top: 6px;
    }
    
    .product-carousel-section {
        padding: 0 var(--spacing-sm);
    }
}