/* ============= Hero existente (no tocado) ============= */
.hero-img { height: clamp(320px, 48vh, 560px); object-fit: cover; }
.hero-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
}

/* Side filters (existente) */
.side-filters.sticky-top { position: static !important; top: auto !important; }
.side-filters .list-group {
    --bs-list-group-active-bg: var(--bs-success);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-border-color: var(--bs-success);
}
.side-filters .list-group .list-group-item.active i,
.side-filters .list-group .list-group-item.active .bi,
.side-filters .list-group .list-group-item.active .fa { color: #fff !important; }
.side-filters .list-group .list-group-item:not(.active) i,
.side-filters .list-group .list-group-item:not(.active) .bi,
.side-filters .list-group .list-group-item:not(.active) .fa { color: var(--bs-success); }

/* Efectos card existentes */
.product-card::after {
    content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:3px;
    background:linear-gradient(90deg,var(--bs-success),#30c37c);
    border-radius:999px; transform:scaleX(0); transform-origin:center; opacity:0;
    transition:transform .22s ease, opacity .22s ease, left .22s ease, right .22s ease;
}
.product-card:hover::after, .product-card:focus-visible::after {
    transform:scaleX(1); opacity:1; left:8%; right:8%;
}
.product-card:hover .ratio, .product-card:focus-visible .ratio {
    background-color:#fff !important; transition-duration:.3s;
}
.custom-shadow:hover {
    box-shadow: 0 14px 22px -10px rgba(0,0,0,.24), 16px 0 24px -12px rgba(0,0,0,.20);
    transition: box-shadow .3s ease-in-out;
}

/* Evitar superposiciones en móvil */
@media (max-width: 991.98px) { .side-filters { position: static !important; z-index: 0; } }

/* Carrusel del modal (existente) */
#productModal #productCarousel {
    --bs-carousel-indicator-width: 8px;
    --bs-carousel-indicator-height: 8px;
    --bs-carousel-indicator-opacity: .45;
    --bs-carousel-indicator-active-opacity: 1;
    --bs-carousel-indicator-bg: #fff;
    --bs-carousel-indicator-active-bg: rgba(255,255,255,0);
    --bs-carousel-control-opacity: .95;
    --bs-carousel-control-hover-opacity: 1;
}
#productModal .carousel-control-prev-icon, #productModal .carousel-control-next-icon { filter: invert(1) grayscale(1); }
#productModal .ratio { position: relative; }
#productModal .ratio > .carousel { height: 100%; }
#productModal .carousel-inner, #productModal .carousel-item { height: 100%; }
#productModal .modal-body .ratio { aspect-ratio: 1 / 1; }
@media (min-width: 992px) { #productModal .modal-body .ratio { min-height: 520px; } }

/* Título en cards (se mantiene en desktop; móvil se redefine en el modo horizontal) */
.product-card .product-name {
    font-weight: 700; color: var(--bs-success);
    font-size: clamp(1rem, 0.96rem + 0.4vw, 1.2rem);
    line-height: 1.25; letter-spacing: 0.2px; margin-bottom: .25rem;
}

/* Accesibilidad: reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    #product-grid { transition: none !important; }
    #product-grid .product-card { transition: none !important; }
}

/* ============= SOLO MÓVIL (≤ 575.98px): cards horizontales 1 por fila ============= */
@media (max-width: 575.98px) {
    #product-grid > [class^="col"], #product-grid > [class*=" col"] {
        flex: 0 0 100% !important; max-width: 100% !important;
    }
    .product-card-horizontal .row.g-0 { min-height: 240px; }
    .product-card-horizontal .pc-media .ratio { height: 100%; }
    .product-card-horizontal .pc-media img { object-fit: cover; }
    .product-card-horizontal .pc-body { display: flex; align-items: center; }
    .product-card-horizontal .pc-body .card-body { width: 100%; }
    .product-card-horizontal .product-name {
        color: var(--bs-success); font-weight: 700;
        font-size: clamp(1.1rem, 1rem + 1.5vw, 1.6rem);
        line-height: 1.2; margin-bottom: .35rem;
        text-transform: uppercase !important;
    }
    .product-card-horizontal .product-short {
        color: var(--bs-body-color); opacity: .85; font-size: .95rem;
    }
}
/* Añadir al final del archivo (o asegurar que exista este bloque) */
/* Zoom lens solo en desktop (dispositivos con hover y puntero fino) */
@media (hover: hover) and (pointer: fine) {
    #productModal .zoom-lens {
        /* FONDO: sólido para que no se mezcle con la imagen detrás */
        background-color: #EAECEF;

        position: absolute;
        /* Tamaño del lente, puedes ajustar 160–200px */
        width: var(--lens-size, 180px);
        height: var(--lens-size, 180px);

        border-radius: 12px;
        border: 2px solid rgba(0, 0, 0, .25);
        box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
        pointer-events: none; /* IMPORTANTÍSIMO para no interceptar el puntero */
        z-index: 5;
        display: none;

        background-repeat: no-repeat;
        background-origin: content-box;
        background-clip: padding-box;
    }
}

/* Transición del carrusel del modal (suavizada y con duración controlada) */
#productModal #productCarousel {
    /* Duración de la transición (por defecto ~.6s en Bootstrap) */
    --bs-carousel-transition-duration: .35s;
}

/* Fallback por si tu versión de Bootstrap no usa la variable: */
#productModal #productCarousel .carousel-item {
    transition: transform .35s ease-in-out;
    will-change: transform; /* micro-optimización para un deslizamiento más fluido */
}

/* Respeta usuarios con "reducir movimiento": si está activo, deja sin animación */
@media (prefers-reduced-motion: reduce) {
    #productModal #productCarousel .carousel-item {
        transition: none !important;
    }
}


/* ===== Modal de producto: ancho controlado en desktop (sin tocar móvil) ===== */
/* Desktop (≥992px): limita el ancho del modal. Ajusta 920px a tu gusto (p.ej. 860/980/1040). */
@media (min-width: 992px) {
    #productModal .modal-dialog {
        max-width: 920px; /* ancho deseado en desktop */
    }
}

/* Opcional: en pantallas muy grandes, conserva el límite para que no “se vea demasiado horizontal” */
@media (min-width: 1400px) {
    #productModal .modal-dialog {
        max-width: 920px;
    }
}