.ecommbanners .htmlcontent {
    display: grid;
}
.ecommbanners li {
    width: 100%;
    height: 100%;
    padding: 0px;
}
.ecommbanners figure {
    margin: 0px;
    height: 100%;
}
.ecommbanners img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.htmlcontent-item-3 {
    grid-row: span 2;
}
div#ecommbanners_displayBanner ul.htmlcontent {
    margin: 0px;
    padding: 0px;
}
div#ecommbanners_displayBanner ul.htmlcontent p {
    padding: 0px;
    margin: 0px;
    line-height: 23px;
}
#ecommbanners_displayHome.ecommbanners figure{
    position: relative;
}
#ecommbanners_displayHome .item-html {
    /*position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
    text-align: center;
    padding: 15px;
    background: #ffffff52;*/
}
#ecommbanners_displayHome .item-html p{
    color: black;
    margin: 0px;
}
.ecommbannerstitle {
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    margin: 40px 0px 20px;
}
@keyframes slide-text {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

div#ecommbanners_displayBanner ul.htmlcontent.clearfix {
    display: flex;
}
div#ecommbanners_displayHome  {
    margin-top: 30px;
}
div#ecommbanners_displayHome h2 {
    margin: 0px;
}
div#ecommbanners_displayHome {
    margin: 40px 0px;
    border-radius: var(--border-radius-custom);
    background: white;
    padding: 30px;
        box-shadow: var(--box-shadow);
}
@media (max-width: 991px) {
    div#ecommbanners_displayBanner.slidetextmobile .item-html.onlytext {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
    }
    div#ecommbanners_displayBanner.slidetextmobile .item-html.onlytext > *{
        display: inline-block;
        padding-left: 100%;
        animation: slide-text 6s linear infinite;
        margin-bottom: 0px;
    }
    div#ecommbanners_displayHome {
    	margin: 20px 0px;
        margin-top: 80px;
    }
}
@media(max-width: 767px){
    .ecommbanners .htmlcontent {
        grid-template-columns: 1fr!important;
    }
    .ecommbanners li {
        grid-column: span 1!important;
        grid-row: span 1!important;
    }
}

/* Modificación para que las imágenes ocupen el 100% del ancho del contenedor */
#ecommbanners_ecommbanners {
    margin: 40px 0 !important;
    border-radius: var(--border-radius-custom) !important;
    background: white !important;
    padding: 30px !important;
    box-shadow: var(--box-shadow) !important;
    width: 100% !important;
}

#ecommbanners_ecommbanners .htmlcontent {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ajuste del ancho de las columnas para ocupar todo el espacio disponible */
#ecommbanners_ecommbanners .htmlcontent-item-1 {
    grid-row: 1 !important;
    grid-column: 1 / span 3 !important; /* Aumentado de 2 a 3 */
}

#ecommbanners_ecommbanners .htmlcontent-item-2 {
    grid-row: 2 !important;
    grid-column: 1 / span 3 !important; /* Aumentado de 2 a 3 */
}

#ecommbanners_ecommbanners .htmlcontent-item-3 {
    grid-row: 1 / span 2 !important;
    grid-column: 4 / span 6 !important; /* Aumentado de 4 a 6 */
}

#ecommbanners_ecommbanners .htmlcontent-item-4 {
    grid-row: 1 !important;
    grid-column: 10 / span 3 !important; /* Ajustado para ocupar las últimas 3 columnas */
}

#ecommbanners_ecommbanners .htmlcontent-item-5 {
    grid-row: 2 !important;
    grid-column: 10 / span 3 !important; /* Ajustado para ocupar las últimas 3 columnas */
}

/* Resto del CSS se mantiene igual */
#ecommbanners_ecommbanners li {
    position: relative !important;
    overflow: hidden !important;
}

#ecommbanners_ecommbanners figure {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Altura específica para las imágenes en desktop */
#ecommbanners_ecommbanners .htmlcontent-item-1 figure,
#ecommbanners_ecommbanners .htmlcontent-item-2 figure,
#ecommbanners_ecommbanners .htmlcontent-item-4 figure,
#ecommbanners_ecommbanners .htmlcontent-item-5 figure {
    height: 250px !important;
}

#ecommbanners_ecommbanners .htmlcontent-item-3 figure {
    height: 520px !important;
}

#ecommbanners_ecommbanners img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

/* Modificación para el responsive en tablets (991px y menos) */
@media (max-width: 991px) {
    #ecommbanners_ecommbanners .htmlcontent {
        gap: 10px !important;
        grid-template-columns: repeat(6, 1fr) !important;
        grid-template-rows: auto auto auto !important;
    }

    /* Primera fila: imágenes 1 y 2 */
    #ecommbanners_ecommbanners .htmlcontent-item-1 {
        grid-row: 1 !important;
        grid-column: 1 / span 3 !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-2 {
        grid-row: 1 !important;
        grid-column: 4 / span 3 !important;
    }

    /* Segunda fila: imagen central (3) */
    #ecommbanners_ecommbanners .htmlcontent-item-3 {
        grid-row: 2 !important;
        grid-column: 1 / span 6 !important;
        height: auto !important;
    }

    /* Tercera fila: imágenes 4 y 5 */
    #ecommbanners_ecommbanners .htmlcontent-item-4 {
        grid-row: 3 !important;
        grid-column: 1 / span 3 !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-5 {
        grid-row: 3 !important;
        grid-column: 4 / span 3 !important;
    }

    /* Ajuste de altura para mantener proporciones adecuadas */
    #ecommbanners_ecommbanners figure {
        height: 200px !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-3 figure {
        height: 300px !important;
    }
}

/* Media query para móviles */
@media (max-width: 767px) {
    /* Cambiar a flexbox para mejor control en móviles */
    #ecommbanners_ecommbanners .htmlcontent {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        flex-wrap: nowrap !important; /* Evitar que los elementos se envuelvan */
    }

    /* Resetear cualquier propiedad de grid que pueda causar conflictos */
    #ecommbanners_ecommbanners li {
        grid-row: auto !important;
        grid-column: auto !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        float: none !important; /* Evitar flotación que podría causar solapamientos */
        display: block !important; /* Asegurar que cada elemento ocupe su propio espacio */
        clear: both !important; /* Forzar que cada elemento comience en una nueva línea */
        position: relative !important; /* Asegurar que el posicionamiento sea relativo */
    }

    /* Eliminar margen inferior del último elemento */
    #ecommbanners_ecommbanners li:last-child {
        margin-bottom: 0 !important;
    }

    /* Orden específico para móvil */
    #ecommbanners_ecommbanners .htmlcontent-item-1 {
        order: 1 !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-2 {
        order: 2 !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-3 {
        order: 3 !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-4 {
        order: 4 !important;
    }

    #ecommbanners_ecommbanners .htmlcontent-item-5 {
        order: 5 !important;
    }

    /* Asegurar que todas las imágenes tengan la misma altura */
    #ecommbanners_ecommbanners figure {
        height: 300px !important;
    }

    /* Asegurar que la imagen central no tenga una altura diferente */
    #ecommbanners_ecommbanners .htmlcontent-item-3 figure {
        height: 300px !important;
    }

    /* Mejorar visibilidad del botón "Découvrir" en móviles */
    #ecommbanners_ecommbanners li::after {
        font-size: 14px !important;
        padding: 8px 16px !important;
        opacity: 1 !important; /* Mostrar siempre en móvil */
    }

    /* Ajustar el efecto hover para móviles */
    #ecommbanners_ecommbanners li:hover img {
        transform: scale(1.02) !important; /* Reducir el efecto de escala en móviles */
    }
}

/* Media query para móviles muy pequeños */
@media (max-width: 480px) {
    #ecommbanners_ecommbanners .htmlcontent {
        gap: 10px !important;
    }

    #ecommbanners_ecommbanners li {
        margin-bottom: 10px !important;
    }

    #ecommbanners_ecommbanners figure {
        height: 150px !important;
    }

    /* Ajustar el botón "Découvrir" para pantallas muy pequeñas */
    #ecommbanners_ecommbanners li::after {
        font-size: 12px !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
    }
}

/* Estilos para el contenido del banner */
#ecommbanners_ecommbanners .banner-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.3) !important; /* Fondo semitransparente para mejorar legibilidad */
    opacity: 1 !important; /* Siempre visible, no solo en hover */
    transition: opacity 0.3s ease !important;
    z-index: 2 !important;
}

/* Estilos para el título del banner */
#ecommbanners_ecommbanners .banner-title {
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Estilos para el botón del banner */
#ecommbanners_ecommbanners .banner-button {
    background-color: white !important;
    color: black !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

#ecommbanners_ecommbanners .banner-button:hover {
    background-color: #f0f0f0 !important;
    transform: scale(1.05) !important;
}

/* Eliminar el pseudo-elemento ::after ya que ahora usamos HTML real */
#ecommbanners_ecommbanners li::after {
    content: none !important;
}

/* Ajustes responsive para el contenido del banner */
@media (max-width: 991px) {
    #ecommbanners_ecommbanners .banner-title {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 767px) {
    #ecommbanners_ecommbanners .banner-content {
        opacity: 1 !important; /* Siempre visible en móvil */
    }

    #ecommbanners_ecommbanners .banner-title {
        font-size: 1.2rem !important;
    }

    #ecommbanners_ecommbanners .banner-button {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 480px) {
    #ecommbanners_ecommbanners .banner-title {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }

    #ecommbanners_ecommbanners .banner-button {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
}