/**
* 2007-2026 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    David Escudero Digital Studio <contacto@davidescudero.com>
*  @copyright 2007-2026 David Escudero Digital Studio
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*/

.desslider {
    --desslider-max: 1440px;
    --desslider-edge: 30px;
    --desslider-gap: 20px;
    --desslider-card: 230px;
    --desslider-accent: #1440ff;
    /* Sangría lateral: alinea la 1ª/última card al contenedor (content-box). */
    --desslider-gutter: calc(var(--desslider-edge) + max(0px, (100% - var(--desslider-max)) / 2));

    width: 100%;
    box-sizing: border-box;
    padding: 28px 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    overflow-x: clip;
}

.desslider *,
.desslider *::before,
.desslider *::after {
    box-sizing: border-box;
}

.desslider__inner {
    max-width: var(--desslider-max);
    margin: 0 auto;
    padding: 0 var(--desslider-edge);
}

/* ── Header / título ─────────────────────────────────────── */
.desslider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* Grupo izquierdo: logo (opcional) + título, separados 12px. */
.desslider__head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.desslider__logo {
    display: block;
    flex: 0 0 auto;
    width: 45px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px;
}

.desslider__title {
    margin: 0;
    font-family: inherit;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: rgba(15, 20, 26, 1);
}

/* Enlace "Ver todo →" a la derecha del título (solo sliders de subcategoría). */
.desslider__viewall {
    flex: 0 0 auto;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: rgba(20, 64, 255, 1);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.desslider__viewall:hover {
    opacity: 0.75;
    color: rgba(20, 64, 255, 1);
    text-decoration: none;
}

.desslider__nav {
    display: flex;
    gap: 10px;
}

.desslider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #eef0f4;
    color: rgba(15, 20, 26, 1);
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.desslider__arrow:hover {
    background: var(--desslider-accent);
    color: #fff;
    transform: translateY(-2px);
}

.desslider__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    transform: none;
    background: #eef0f4;
    color: rgba(15, 20, 26, 1);
}

/* ── Carrusel ───────────────────────────────────────────── */
.desslider__viewport {
    /* A sangre completa (ancho de pantalla) para que las cards asomen hasta el
       borde derecho. La sangría izq/der real la ponen el gutter y el ::after. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
    overflow-y: visible;
    padding: 4px 0;
}

/* ≤1440px: el breakout con 100vw incluye la barra de scroll (~15px) y desalinea
   la sangría respecto al contenedor. Debajo del ancho del contenedor rompemos
   SOLO el padding del __inner con margen negativo (unidades de layout, sin vw):
   el viewport ocupa el ancho de contenido real → 1ª card en la sangría izquierda
   y última en la derecha, exactas y alineadas con header/menú. */
@media (max-width: 1440px) {
    .desslider__viewport {
        width: auto;
        margin-inline: calc(-1 * var(--desslider-edge));
    }
}

.desslider__track {
    display: flex;
    gap: var(--desslider-gap);
    /* Sangría izquierda como padding (cuenta en scrollWidth); la derecha con un
       espaciador ::after (el padding final del flex no cuenta en scrollWidth). */
    padding-left: var(--desslider-gutter);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    cursor: grab;
    touch-action: pan-y;
}

/* Espaciador final: garantiza la sangría derecha al llegar a la última card.
   El gap previo se cancela con margin-left negativo → espacio derecho = sangría. */
.desslider__track::after {
    content: "";
    flex: 0 0 var(--desslider-gutter);
    margin-left: calc(-1 * var(--desslider-gap));
    align-self: stretch;
}

.desslider__track.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* Cuando todo cabe (no hace falta slider): sin arrastre, sin flechas ni dots. */
.desslider.is-static .desslider__track {
    cursor: default;
}

.desslider.is-static .desslider__nav,
.desslider.is-static .desslider__dots {
    display: none;
}

/* Cada slide envuelve la miniatura de producto del tema. */
.desslider__slide {
    flex: 0 0 var(--desslider-card);
    width: var(--desslider-card);
    min-width: 0;
}

/* Neutraliza los márgenes del grid del tema dentro del slide para que la
   miniatura ocupe el ancho del slide. */
.desslider__slide .product-miniature,
.desslider__slide .thumbnail-container,
.desslider__slide .js-product-miniature {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ── Dots ───────────────────────────────────────────────── */
.desslider__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.desslider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #9aa2b1;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.desslider__dot.is-active {
    opacity: 1;
    background: var(--desslider-accent);
    transform: scale(1.25);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 992px) {
    .desslider { --desslider-edge: 15px; }
}

@media (max-width: 575px) {
    .desslider { --desslider-card: 160px; --desslider-gap: 12px; }
}

/* ── Slider de subcategorías: tarjetas (imagen + nombre) ─────────────────────
   Mismo carrusel que el resto; el slide se ajusta al ancho de la card (239px).
   Los estilos de abajo aplican SOLO a la card. */
.desslider--subcategories .desslider__slide {
    flex: 0 0 239px;
    width: 239px;
}
.dessubcat-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-decoration: none;
}
.dessubcat-card__img {
    display: block;
    width: 239px;
    height: 158px;
    object-fit: contain;
    border-radius: 20px;
    overflow: hidden;
    filter: brightness(0.956);
    background: rgb(255 255 255);
    transition:0.3s all ease;
}
.dessubcat-card:hover img{
    box-shadow: 0px 0px 4px #00000096;
}
.dessubcat-card__img--empty {
    background: #f2f3f6;
}
.dessubcat-card__name {
    font: 500 20px/28px Outfit, "Outfit Fallback", sans-serif;
    letter-spacing: 0;
    color: rgba(15, 20, 26, 1);
}
/* El slider de subcategorías no muestra cabecera (título/flechas) en ningún tamaño. */
.desslider--subcategories .desslider__head {
    display: none;
}
@media (max-width: 576px) {
    .desslider__title{
        font-size:20px;
        line-height:25px;
    }
    .desslider__viewall{
        font-size:14px;
    }
    .desslider__head{
        margin-bottom:14px;
    }
    .desslider{
        padding-block:24px;
    }
    .desslider--subcategories .dessubcat-card__name{
        font-size:20px;
        line-height:24px;
    }
    .desslider--subcategories .dessubcat-card{
        gap:12px;
    }
}