/* =============================================================================
   componentes/carrusel-productos.css — Carrusel de productos
   (componentes/_carrusel-productos.php)
   -----------------------------------------------------------------------------
   Una sola fila con scroll horizontal. Se usa en bloques tipo "Destacados", que
   en rejilla ocupaban media pantalla antes de llegar al listado. Va sobre scroll
   NATIVO: el navegador ya sabe hacer esto con el dedo, la rueda y el teclado, así
   que los botones (carrusel.js) son solo un extra y no hace falta ninguna librería.
   ============================================================================= */

.ss-carrusel { position:relative; }
.ss-carrusel-pista {
    display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; scroll-padding-left:.25rem;
    /* Sitio para la sombra de las tarjetas y para que el foco del teclado no se recorte. */
    padding:.25rem .25rem 1rem;
    /* Barra de scroll discreta: el bloque ya tiene botones y el borde difuminado. */
    scrollbar-width:thin;
}
.ss-carrusel-pista::-webkit-scrollbar { height:6px; }
.ss-carrusel-pista::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); border-radius:3px; }

/* Las tarjetas llegan como `.col` (las pinta _item-producto, pensado para la rejilla). Dentro
   de un flex, `.col` de Bootstrap se estiraría a partes iguales: aquí se les fija el ancho. */
.ss-carrusel-pista > .col {
    flex:0 0 auto; width:78%; max-width:20rem; scroll-snap-align:start;
    margin-bottom:0!important;   /* el mb-5 de la rejilla aquí sobra */
}
@media (min-width:576px) { .ss-carrusel-pista > .col { width:45%; } }
@media (min-width:768px) { .ss-carrusel-pista > .col { width:31%; } }
@media (min-width:992px) { .ss-carrusel-pista > .col { width:23.5%; } }

.ss-carrusel-nav {
    position:absolute; top:40%; transform:translateY(-50%); z-index:4;
    width:40px; height:40px; border-radius:50%; border:1px solid #dee2e6;
    background:rgba(255,255,255,.95); color:#212529; box-shadow:0 2px 10px rgba(0,0,0,.15);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.ss-carrusel-nav:hover { background:#212529; color:#fff; }
.ss-carrusel-nav.prev { left:-12px; }
.ss-carrusel-nav.next { right:-12px; }
/* En pantallas donde los botones se saldrían del contenedor, se ocultan: con el dedo sobra. */
@media (max-width:767.98px) { .ss-carrusel-nav { display:none; } }

@media (prefers-reduced-motion: reduce) {
    .ss-carrusel-pista { scroll-behavior:auto; }
    .ss-carrusel-nav { transition:none; }
}