/* ========== CAROUSEL HORIZONTAL ========== */

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--space-md) 0;
}

.carousel-track {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-md);
    /* Espacio para scrollbar si es visible */
    -webkit-overflow-scrolling: touch;
    /* Suavidad en iOS */
    scrollbar-width: none;
    /* Firefox: ocultar scrollbar */
}

.carousel-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari: ocultar scrollbar */
}

.carousel-item {
    flex: 0 0 auto;
    width: 280px;
    /* Ancho fijo para las tarjetas */
    scroll-snap-align: start;
}

/* Ajustes para las tarjetas dentro del carrusel */
.carousel-item .producto-card {
    height: 100%;
    margin: 0;
    /* Quitar márgenes externos si los tienen */
}

/* Botones de navegación (opcional, por ahora solo scroll) */
.carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.carousel-btn {
    background: var(--gray-100);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.carousel-btn:hover {
    background: var(--primary);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .carousel-item {
        width: 240px;
        /* Más estrecho en móvil */
    }
}