/* --- SOLUCIÓN ALTERNATIVA CON FLEXBOX PARA WISHLIST --- */

/* 1. Definimos el contenedor con Flexbox */
.section.wishlist .section_wrapper {
    display: flex !important; /* Usamos flex en lugar de grid */
    flex-wrap: wrap !important; /* Permitimos que los elementos salten a la siguiente línea */
    justify-content: space-between !important; /* Distribuimos el espacio */
}

/* 2. Reseteamos CUALQUIER elemento hijo para que obedezca */
.section.wishlist .section_wrapper > * {
    float: none !important;
    clear: none !important;
}

/* 3. Definimos el tamaño de cada producto */
.section.wishlist .wishlist-row {
    /* 📱 Móviles: 2 columnas */
    width: 49% !important; /* Un poco menos del 50% para dejar un espacio */
    margin-bottom: 20px !important; /* Espacio vertical entre filas */

    /* Estilos visuales (estos ya funcionaban) */
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

/* 4. Mantenemos los estilos internos */
.section.wishlist .wishlist-row .column {
    width: 100% !important;
    margin: 0 !important;
}
.section.wishlist .wishlist-options .mcb-column-inner,
.section.wishlist .column.one-second .mcb-column-inner {
    padding-top: 15px;
    text-align: center;
}

/* --- Adaptación para Escritorio (Responsive) --- */
/* 💻 Para pantallas más grandes de 768px */
@media (min-width: 768px) {
    .section.wishlist .wishlist-row {
        /* 4 columnas */
        width: 23% !important; /* Un poco menos del 25% para el espacio */
    }
}