/* ==========================================================================
   El riel de productos
   --------------------------------------------------------------------------
   Un solo riel en todo el sitio: lo dibuja fedelan_render_riel() (inc/riel.php),
   sale como "Mas vendidos" en la portada y como relacionados al pie de la
   ficha, y esta es su unica hoja de estilo. Si hay que cambiar algo del riel,
   se cambia aca y en ningun otro archivo.

   Antes estaba escrito tres veces (este archivo, el bloque "Carrusel de
   novedades" de theme.css y una capa de overrides en portada.css) y por eso
   la tarjeta del riel media 292 mientras la de la fila de abajo media 340:
   cada archivo tenia su propia cuenta para el ancho.

   La cuenta (manual L3): se ven N tarjetas enteras y un tercio de la
   siguiente, cortada contra el borde de la pantalla, para que se vea que el
   riel sigue. N es 2 en el telefono, 3 en la tablet y 4 en escritorio; en la
   portada, arriba de 900, el titulo se queda con una columna y el riel con una
   menos. El riel arranca en el margen de la pagina y se desborda a la derecha
   hasta el borde de la pantalla: esa medida es --fedelan-asoma, que la mide
   carousel.js (sin JS queda el margen de la pagina).

   El ancho de la tarjeta no depende del asomo: sale del ancho del riel mas un
   margen de pagina, asi mide lo mismo en 1440 que en 2560, donde la caja se
   corta y a la derecha queda mas lugar. Ahi simplemente asoma mas.

   La tarjeta de adentro la pinta theme.css, en el bloque "La tarjeta de
   producto". Aca no se toca nada de la tarjeta.
   ========================================================================== */

.fedelan-products {
    --fedelan-asoma: var(--fedelan-container-padding);
    /* El marco que aparece al pasar el mouse se dibuja 1px afuera de la
       tarjeta (inset: -1px en theme.css). El riel recorta lo que se sale de
       su caja, asi que sin este aire el marco quedaba cortado arriba, abajo y
       a la izquierda, y la tarjeta del riel se veia distinta de la de la fila
       de abajo. El aire se devuelve con el margen negativo y se suma al ancho,
       asi la cuenta de la tarjeta no cambia. */
    --fedelan-aire: 2px;
    /* Tarjetas enteras a la vista. El tercio de la siguiente se suma solo. */
    --fedelan-riel-n: 4;
    min-width: 0;
}
@media (max-width: 1099px) {
    .fedelan-products { --fedelan-riel-n: 3; }
}
@media (max-width: 599px) {
    .fedelan-products { --fedelan-riel-n: 2; }
}
.fedelan-products__container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0;
    /* Las tarjetas miden contra el ancho de este contenedor (cqw), no contra
       el del track, que ademas lleva el asomo y el aire. */
    container-type: inline-size;
}

.fedelan-products__track {
    display: flex;
    /* El riel mide lo que suman sus tarjetas, y ese ancho minimo se escapa
       hacia arriba: en la ficha el contenido cuelga de un .site que es item
       flexible del body, asi que a 390 la pagina entera se iba de costado.
       Con la contencion el riel toma el ancho del padre y se desliza adentro. */
    contain: inline-size;
    /* Sin esto la tarjeta se estira al alto del track y el marco del hover
       queda con 40px de aire abajo del texto, distinto de la fila de abajo. */
    align-items: flex-start;
    gap: var(--fedelan-gutter);
    /* El riel se pasa de la columna justo lo que falta hasta el borde de la
       pantalla, ni un pixel mas: nunca aparece una barra horizontal en la
       pagina. */
    box-sizing: border-box;
    /* Aire arriba, abajo y a la izquierda. A la derecha va el asomo como
       relleno: al llegar al final, la ultima tarjeta queda entera y termina
       en el borde de la caja de la pagina, igual que la primera arranca en
       el de la izquierda. */
    width: calc(100% + var(--fedelan-asoma) + var(--fedelan-aire));
    padding: var(--fedelan-aire) var(--fedelan-asoma) var(--fedelan-aire) var(--fedelan-aire);
    margin: calc(-1 * var(--fedelan-aire)) 0 calc(-1 * var(--fedelan-aire)) calc(-1 * var(--fedelan-aire));
    /* El riel es un item flex del contenedor: sin esto se encoge de vuelta
       hasta el ancho de la columna y el asomo desaparece. */
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    /* Sin esto el riel se para 2px adelante y se come el aire de la
       izquierda: el punto de enganche del scroll cae en el borde de la caja,
       no en el del contenido. */
    scroll-padding: var(--fedelan-aire);
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fedelan-products__track::-webkit-scrollbar { display: none; }

/* N tarjetas enteras y un tercio de la siguiente entre el margen izquierdo de
   la pagina y el borde derecho de la caja mas un margen. La primera linea es
   para navegadores sin unidades de contenedor: cuenta sobre el track. */
.fedelan-products__item {
    flex: 0 0 calc((100% - var(--fedelan-riel-n) * var(--fedelan-gutter)) / (var(--fedelan-riel-n) + 1 / 3));
    flex: 0 0 calc((100cqw + var(--fedelan-container-padding) - var(--fedelan-riel-n) * var(--fedelan-gutter)) / (var(--fedelan-riel-n) + 1 / 3));
    min-width: 0;
    scroll-snap-align: start;
}

/* --- Las flechas --------------------------------------------------------- */
/* Van juntas, abajo a la derecha del riel, terminando en el margen de la
   pagina y no en el borde de la pantalla: montadas sobre las fotos tapaban
   la prenda, y la de la derecha caia sobre la tarjeta cortada, que es justo
   la que tiene que asomar limpia. En la portada quedan a la altura del
   "Ver todo." de la columna del titulo. En el borde, la flecha que no tiene
   adonde ir queda apagada pero en su lugar, asi el par no salta. */
.fedelan-products__nav {
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}
.fedelan-products__arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--fedelan-paper);
    color: var(--fedelan-ink);
    box-shadow: inset 0 0 0 1px var(--fedelan-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--fedelan-dur) var(--fedelan-ease),
                color var(--fedelan-dur) var(--fedelan-ease),
                box-shadow var(--fedelan-dur) var(--fedelan-ease);
}
.fedelan-products__arrow svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2px;
}
.fedelan-products__arrow:hover,
.fedelan-products__arrow:active {
    background-color: var(--fedelan-ink);
    color: var(--fedelan-paper);
}
.fedelan-products__arrow:focus-visible {
    outline: 2px solid var(--fedelan-accent);
    outline-offset: 2px;
}
.fedelan-products__arrow.disabled {
    color: var(--fedelan-muted-2);
    box-shadow: inset 0 0 0 1px var(--fedelan-line);
    background-color: var(--fedelan-paper);
    cursor: default;
    pointer-events: none;
}

/* Las flechas se sacan solo donde se desliza con el dedo. Con mouse, en una
   ventana angosta o con zoom, sin flechas quedaba solo arrastrar, y eso falla
   SC 2.5.7 (X12). */
@media (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {
    .fedelan-products__nav { display: none; }
}

/* Sin animacion de scroll si el sistema lo pide (X14). carousel.js elige
   ademas 'auto' en vez de 'smooth' para las flechas y el enganche. */
@media (prefers-reduced-motion: reduce) {
    .fedelan-products__track { scroll-behavior: auto; }
}