/* ===== CSS solo para Pagina de Inicio ===== */

.seccion-sidebar{
    border: 2px solid #e0bfbd;
    background: #f4f5f5;
    margin: 0 auto 5vw;
    padding: 20px 14px;
    position: sticky;
    overflow: visible;
    top: 50px;
}
.seccion-sidebar .sidebar-titulo{
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 1.25em;
    letter-spacing: 1px;
    transform: translateY(-50%);
    border-bottom: 2px solid #e0bfbd;
    margin-bottom: 0;
}
.seccion-sidebar .sitios-amigos{
    display: flex;
    flex-wrap: wrap;
}
.seccion-sidebar .sitios-amigos a{
    display: block;
    width: 45%;
    margin: 5px;
}
.seccion-sidebar .sitios-amigos a img{
    width: 100%;    
}

.seccion-productos{
    overflow: hidden;
}
/* -------------------------------------- */
/* 3. ARREGLO DE LAYOUT PARA SWIPER       */
/* -------------------------------------- */

.my-recent-products {
    /* El contenedor principal debe tener un alto fijo si el contenido varía, o overflow hidden */
    overflow: hidden; 
    margin: 20px 0;
    position: relative; /* Necesario para la navegación */
}

/* CLAVE 1: El UL.products actúa como swiper-wrapper. Debe tener un display flexible 
   y se le anulan los márgenes por defecto. */
.my-recent-products .products {
    display: flex; 
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%; /* Asegura que el contenedor esté listo para ser manipulado por Swiper */
    position: relative;
    /* Las siguientes propiedades son necesarias para el drag: */
    box-sizing: content-box;
    transition-property: transform;
}

/* CLAVE 2: Los LI.product actúan como swiper-slide. 
   Se anulan los estilos de columna (width) de WooCommerce. */
.my-recent-products .products .product {
    /* Anulación de WooCommerce */
    width: auto !important; 
    float: none !important;
    margin: 0 !important;
    
    /* Propiedades de Swiper Slide */
    flex-shrink: 0; /* Impide que los slides se encojan */
    height: auto; /* Permite que el alto se ajuste */
    /* El ancho de cada slide lo manejará la configuración 'slidesPerView' de JS */
}

/* Estilos de navegación de Swiper (opcional, si no aparecen o están mal ubicados) */
.my-recent-products .swiper-button-next,
.my-recent-products .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Añade tus estilos de color, tamaño, etc. */
}
/* -------------------------------------- */
/* ARREGLO DE LAYOUT FINAL PARA SWIPER    */
/* -------------------------------------- */

/* Oculta la clase woocommerce que envuelve los productos, 
   o asegúrate de que no tenga estilos de columna. */
.my-recent-products .woocommerce {
    /* Es mejor no aplicar estilos aquí, ya que Swiper debe controlar el UL */
}

/* CLAVE 1: UL.products (el wrapper) */
.my-recent-products .products {
    display: flex; 
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    position: relative; /* Esencial para el movimiento */
    /* Asegúrate de que las propiedades swiper-wrapper sean respetadas */
}

/* CLAVE 2: LI.product (los slides). ANULACIÓN DEL LAYOUT DE WOOCOMMERCE */
.my-recent-products .products .product {
    /* Anulación de WooCommerce para que Swiper pueda controlar el ancho */
    width: auto !important; 
    float: none !important;
    margin: 0 !important;
    
    /* Propiedades de Swiper Slide */
    flex-shrink: 0; 
    height: auto; 
    /* El ancho de cada slide lo maneja JS */
}

/* Asegura que los botones de navegación no queden ocultos */
.my-recent-products {
    overflow: hidden; 
    position: relative; 
}
/* -------------------------------------- */
/* ARREGLO DE LAYOUT PARA SWIPER (FINAL)  */
/* -------------------------------------- */

.my-recent-products .products {
    /* CLAVE: swiper-wrapper necesita estas propiedades */
    display: flex !important; 
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    position: relative; 
    box-sizing: content-box; /* Propiedad que Swiper necesita */
    transform: translate3d(0, 0, 0); /* Ayuda al rendimiento y a evitar fallos de render */
}

/* CLAVE: Anulación total del sistema de columnas de WooCommerce */
.my-recent-products .products .product {
    /* Anulación absoluta de cualquier ancho o float que imponga WooCommerce */
    width: auto !important; 
    float: none !important;
    margin: 0 !important;
    
    /* Propiedades de Swiper Slide */
    flex-shrink: 0; 
    height: auto; 
}