/* css/custom-product-tab.css */

/* === Estilos Generales de las Pestañas === */
.custom-product-tab-content {
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-top: 15px;
    line-height: 1.6;
}

.custom-product-tab-content p:last-child {
    margin-bottom: 0;
}

.custom-product-tab-content img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: 4px;
}

/* === NUEVO: Contenedor de Botones de Descarga === */
.custom-downloads-container {
    display: flex;
    flex-wrap: wrap; /* Si hay muchos botones, bajan a la siguiente línea */
    gap: 25px;       /* Mucho más espacio y separación entre los botones */
    padding: 25px 10px; /* Aire por arriba y por abajo */
}

/* === NUEVO: Diseño Premium del Botón de Descarga === */
.custom-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Separación exacta entre el icono y el texto */
    
    /* Color de fondo: Degradado azul moderno (puedes cambiar los colores si tu tienda usa otro color) */
    background: transparent; 
    color: #888888 !important;
    
    /* Tamaño y forma */
    padding: 10px 20px; /* Botón más "gordito" y fácil de hacer clic */
    border-radius: 50px; /* Forma de píldora redonda */
    text-decoration: none !important;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.3px;
    
    /* Efectos 3D y Transiciones */
    border: 1px solid #bcbcbc;
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.3); /* Sombra suave con el mismo tono de color */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición súper fluida */
}

/* === Efecto al pasar el ratón (Hover) === */
.custom-download-btn:hover {
    background: linear-gradient(135deg, #005a87 0%, #004060 100%); /* Se oscurece un poco */
    color: #ffffff !important;
    transform: translateY(-4px); /* El botón "flota" o se levanta hacia arriba */
    box-shadow: 0 8px 20px rgba(0, 124, 186, 0.45); /* La sombra se hace más grande al levantarse */
}

/* === Efecto al hacer clic (Active) === */
.custom-download-btn:active {
    transform: translateY(0); /* El botón se hunde al hacer clic */
    box-shadow: 0 2px 6px rgba(0, 124, 186, 0.3);
}

/* === Animación exclusiva para la flechita (Icono SVG) === */
.custom-download-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s ease; /* Prepara la animación */
}

.custom-download-btn:hover svg {
    transform: translateY(3px); /* La flecha baja un poquito indicando "Descargar" */
}

/* === Adaptación para Teléfonos Móviles === */
@media (max-width: 768px) {
    .custom-product-tab-content {
        padding: 15px;
    }
    
    .custom-downloads-container {
        gap: 18px; /* Separación en móviles */
        padding: 15px 0;
        flex-direction: column; /* Apila los botones uno debajo de otro */
    }
    
    .custom-download-btn {
        width: 100%; /* El botón ocupa todo el ancho de la pantalla */
        box-sizing: border-box;
    }
}

/* === DISEÑO DE LA REJILLA DE PRODUCTOS (SOLO PARA LA PESTAÑA) === */

/* Configuración de grilla de 4 columnas */
.custom-products-grid .woocommerce ul.products,
.custom-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
}

/* Evitar comportamientos por defecto del tema que rompen la grilla */
.custom-products-grid ul.products::before,
.custom-products-grid ul.products::after {
    display: none !important;
}
.custom-products-grid ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
}

/* Adaptación para tablets y móviles */
@media (max-width: 900px) {
    .custom-products-grid .woocommerce ul.products,
    .custom-products-grid ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .custom-products-grid .woocommerce ul.products,
    .custom-products-grid ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* === RECUADRO O FICHA DEL PRODUCTO === */
.custom-products-grid ul.products li.product {
    border: 1px solid #C7C7C7 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Mismo alto para todas las cajas */
    background-color: #fff !important;
}

/* El enlace que agrupa la imagen y el título ocupa el espacio disponible */
.custom-products-grid ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    text-decoration: none !important;
}

/* === IMÁGENES DESTACADAS === */
.custom-products-grid ul.products li.product img {
    height: 180px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important; /* Mantiene proporciones */
    display: block !important;
    margin: 0 auto 15px auto !important; /* Centrado horizontal */
}

/* === TÍTULO DEL PRODUCTO === */
.custom-products-grid ul.products li.product .woocommerce-loop-product__title {
    color: #222 !important;
    font-size: 16px !important;
    line-height: 1.3em !important;
    max-height: 2.6em !important; /* Asegura un tope estricto de 2 líneas */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Importante: máximo 2 líneas */
    -webkit-box-orient: vertical !important;
    text-align: center !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

/* Centrar elementos extra (precio) */
.custom-products-grid ul.products li.product .price {
    text-align: center !important;
    margin-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    color: #222 !important; /* Por buena práctica añadimos color */
}

/* === BOTÓN AGREGAR AL CARRITO === */
.custom-products-grid ul.products li.product .button,
.custom-products-grid ul.products li.product .add_to_cart_button {
    background-color: #f6f6f6 !important;
    font-size: 14px !important;    
    color: #2867a6 !important;
    transition-duration: 0.6s !important;
    border-radius: 7px !important;
    padding: 10px 25px !important;
    margin: auto auto 0 auto !important; /* Lo empuja abajo del todo y lo centra */
    display: inline-block !important;
    text-align: center !important;
    width: fit-content !important; /* Hace que no ocupe todo el ancho si no es necesario */
    border: none !important;
}

/* Efecto hover del botón */
.custom-products-grid ul.products li.product .button:hover,
.custom-products-grid ul.products li.product .add_to_cart_button:hover {
    background-color: #2867a6 !important;
    color: #fff !important;
}