/*======================================
Theme Name: Divi LPN
Theme URI: https://divicake.com/
Description: Para desarrollos de Laprimera.net
Version: 1.0
Author: La Primera Telecomunicación S.L.
Author URI: https://laprimera.net
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/* Estilos para el shortcode [custom_products_list] */
.woocommerce a.button {color: white;}

.custom-product-list-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.custom-product-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    box-sizing: border-box;
    overflow: hidden; /* Ayuda a contener elementos flotantes si los hubiera */
}

.custom-product-col {
    width: 50%;
    box-sizing: border-box;
}

.image-col {
    padding-right: 20px; /* Aumenta un poco el espacio */
}

.details-col {
    padding-left: 20px; /* Aumenta un poco el espacio */
    display: flex;
    flex-direction: column;
    height: 100%; /* Intenta que la columna de detalles use la altura disponible */
}

/* Contenedor de la imagen */
.custom-product-image {
    line-height: 0; /* Evita espacio extra debajo de la imagen si es inline-block */
}

/* La imagen dentro del contenedor */
.custom-product-image img {
    display: block; /* Asegura que la imagen sea un bloque */
    width: 100%; /* Ocupa TODO el ancho de la columna .image-col */
    height: auto; /* El alto se ajusta automáticamente para mantener la proporción */
    max-width: 100%; /* Asegura que no exceda el contenedor */
    border-radius: 15px; /* Bordes redondeados para la imagen */
    border: 1px solid #eee; /* Borde fino opcional */
}

.custom-product-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.custom-product-title a {
    text-decoration: none;
    color: #333;
}

.custom-product-title a:hover {
    color: #555;
}

.custom-product-description {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.95em;
    flex-grow: 1; /* Empuja el botón hacia abajo */
    line-height: 1.6; /* Mejora legibilidad */
}

/* wpautop añade párrafos, aseguramos que no tengan márgenes excesivos */
.custom-product-description p {
    margin-bottom: 1em; /* Espacio estándar entre párrafos */
}
.custom-product-description p:last-child {
    margin-bottom: 0; /* Sin margen extra en el último párrafo */
}

.custom-product-add-to-cart {
    margin-top: auto; /* Empuja el botón hacia abajo */
    text-align: left; /* Alinea el botón (o su contenedor) a la izquierda */
}

/* --- Botón Añadir al Carrito (Estilos de Divi) --- */
/*
 * NO añadimos estilos específicos para 'a.button', 'button.add_to_cart_button', etc. aquí.
 * La función woocommerce_template_loop_add_to_cart() usa las clases estándar.
 * Divi (y WooCommerce) ya tienen CSS que apunta a esas clases.
 * Al no sobreescribirlos aquí, el botón debería tomar los estilos definidos
 * en el Personalizador de Divi (Apariencia -> Personalizar -> Botones / WooCommerce).
 * Solo estilizamos el CONTENEDOR '.custom-product-add-to-cart' si es necesario para posicionamiento.
*/


/* Ajustes para pantallas más pequeñas (ej. móviles) */
@media (max-width: 767px) {
    .custom-product-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .custom-product-col {
        width: 100%;
        padding-left: 10px; /* Reduce padding lateral en móvil */
        padding-right: 10px;
    }

    .image-col {
        margin-bottom: 20px;
        padding-right: 0; /* Sin padding extra a la derecha en móvil */
        max-width: 300px; /* Puedes ajustar este máximo si quieres */
        width: 90%; /* O un porcentaje para que no sea siempre 300px */
    }

    .details-col {
        padding-left: 0; /* Sin padding extra a la izquierda en móvil */
        align-items: center; /* Centra los elementos internos */
        text-align: center;
    }

     .custom-product-add-to-cart {
        text-align: center; /* Centra el botón en móviles */
        width: 100%; /* Asegura que el contenedor ocupe el ancho para centrar bien el botón */
    }

    /* Asegúrate que el botón mismo no tenga anchos fijos que impidan centrarlo */
    .custom-product-add-to-cart .button {
       margin-left: auto;
       margin-right: auto;
       /* Evita añadir width: 100% aquí si no quieres que ocupe toda la pantalla */
    }
}