/* =========================================================
   PromoCombo RC24 — carruseles estables y detalle original

   Objetivos:
   1. Mostrar cuatro productos por vista.
   2. Avanzar exactamente dos productos por acción.
   3. Evitar desplazamientos verticales dentro del carrusel.
   4. Conservar el detalle móvil original con botón verde.
   ========================================================= */

:root {
    --rc24-gap: 10px;
    --rc24-card-mobile-height: 324px;
    --rc24-card-desktop-height: 430px;
}

/* ---------- Contenedor de cada categoría ---------- */
body .categoriaProductos {
    position: relative !important;
    width: min(1280px, calc(100% - 96px)) !important;
    max-width: 1280px !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* ---------- Escritorio: cuatro tarjetas, una fila ---------- */
body .categoriaProductos :is(.carruselProductos, .grillaProductos) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: var(--rc24-card-desktop-height) !important;
    grid-auto-columns: calc((100% - (var(--rc24-gap) * 3)) / 4) !important;
    align-items: stretch !important;
    gap: var(--rc24-gap) !important;
    padding: 4px 1px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 1px !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: none !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

body .categoriaProductos :is(.carruselProductos, .grillaProductos)::-webkit-scrollbar {
    display: none !important;
}

body .categoriaProductos :is(.carruselProductos, .grillaProductos) > .promo {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--rc24-card-desktop-height) !important;
    min-height: var(--rc24-card-desktop-height) !important;
    max-height: var(--rc24-card-desktop-height) !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}

/* Evita saltos verticales causados por estados hover/touch. */
@media (hover: none), (pointer: coarse) {
    body .categoriaProductos .promo,
    body .categoriaProductos .promo:is(:hover, :focus, :focus-visible, :active) {
        transform: none !important;
    }
}

/* ---------- Celular: cuatro tarjetas visibles en 2 × 2 ---------- */
@media (max-width: 767px) {
    :root {
        --rc24-gap: 8px;
        --rc24-card-mobile-height: 318px;
    }

    body .categoriaProductos {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 0 auto 24px !important;
    }

    body .categoriaProductos :is(.carruselProductos, .grillaProductos) {
        grid-template-rows:
            var(--rc24-card-mobile-height)
            var(--rc24-card-mobile-height) !important;
        grid-auto-columns: calc((100% - var(--rc24-gap)) / 2) !important;
        grid-auto-flow: column !important;
        gap: var(--rc24-gap) !important;
        height: calc((var(--rc24-card-mobile-height) * 2) + var(--rc24-gap) + 14px) !important;
        min-height: calc((var(--rc24-card-mobile-height) * 2) + var(--rc24-gap) + 14px) !important;
        max-height: calc((var(--rc24-card-mobile-height) * 2) + var(--rc24-gap) + 14px) !important;
        padding: 4px 1px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        align-content: start !important;
        justify-content: start !important;
    }

    body .categoriaProductos :is(.carruselProductos, .grillaProductos) > .promo {
        width: 100% !important;
        height: var(--rc24-card-mobile-height) !important;
        min-height: var(--rc24-card-mobile-height) !important;
        max-height: var(--rc24-card-mobile-height) !important;
        align-self: start !important;
    }

    /* Las flechas no deben alterar la altura del carrusel. */
    body .categoriaProductos .flechaCarrusel {
        top: calc(50% + 16px) !important;
        transform: translateY(-50%) !important;
    }
}

/* ---------- Detalle móvil original ----------
   RC23 creaba una segunda tarjeta naranja. Se elimina esa capa
   visual y se conserva exclusivamente #detallePromocionMovil.
   ----------------------------------------------------------- */
.rc23DetalleOverlay,
.rc23DetalleTarjeta {
    display: none !important;
}

/* El botón original permanece verde en reposo. */
@media (max-width: 767px) {
    .detallePromocionMovilAccion:not(:disabled) {
        background: linear-gradient(180deg, #23d76d, #13b95a) !important;
        border-color: rgba(255, 255, 255, .14) !important;
        color: #fff !important;
        box-shadow: 0 10px 28px rgba(19, 185, 90, .22) !important;
    }
}