/*
 * DANGO CAROUSEL PRODUCTOS — layout externo del carrusel.
 * REGLA: solo controla el contenedor, el scroll y el ancho de cada slide.
 * El diseño interno de la card (imagen, título, precio, botón, badges,
 * hover, wishlist) lo maneja 100% WooCommerce + Blocksy. NO tocar.
 */

/* ── Wrap ── */
.dango-carousel-productos-wrap {
    width: 100%;
    /* margin controlado desde el panel admin */
}

/* El título hereda tipografía del tema */
.dango-carousel-productos-titulo {
    margin: 0 0 18px;
}

/* ── Carousel container ── */
.dango-carousel-productos-carousel {
    --dp-cols: 4;
    --dp-gap: 16px;
    position: relative;
    /* padding controlado desde el panel admin */
}

.dango-carousel-productos-carousel[data-cols="2"] { --dp-cols: 2; }
.dango-carousel-productos-carousel[data-cols="3"] { --dp-cols: 3; }
.dango-carousel-productos-carousel[data-cols="5"] { --dp-cols: 5; }
.dango-carousel-productos-carousel[data-cols="6"] { --dp-cols: 6; }

/* ── Track scrollable ──
   align-items: flex-start para que Blocksy controle la altura interna
   de cada card sin que flex-stretch la fuerce a estirarse. */
.dango-carousel-productos-track.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: var(--dp-gap) !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 4px 2px 12px !important;
    margin: 0 !important;
    list-style: none !important;
}
.dango-carousel-productos-track.products::-webkit-scrollbar { display: none; }

/* ── Cada <li class="product"> es el slide del carrusel.
   Solo fijamos su ancho; el diseño interno queda 100% en Blocksy. ── */
.dango-carousel-productos-track.products > li.product {
    flex: 0 0 calc(
        (100% - var(--dp-gap) * (var(--dp-cols) - 1)) / var(--dp-cols)
    ) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    scroll-snap-align: start;
}

/* ── Flechas de navegación ──
   Flotan sobre los bordes del track (patrón estándar de carrusel).
   El z-index las pone encima de las cards; el padding del carousel
   controla cuánto espacio hay entre ellas y el borde del contenedor. */
.dango-carousel-productos-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    padding: 0;
    color: #333;
    transition: background .18s, box-shadow .18s;
}
.dango-carousel-productos-arrow:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.dango-carousel-productos-arrow--prev { left: 6px; }
.dango-carousel-productos-arrow--next { right: 6px; }
.dango-carousel-productos-arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Columnas responsive: generadas dinámicamente desde el panel admin */

/* Ocultar flechas en móvil pequeño */
@media (max-width: 480px) {
    .dango-carousel-productos-arrow { display: none; }
}