/* ============================================================
   La Bonté — Single Product (ajustes mínimos sobre WooCommerce)
   ============================================================ */

/* ── Ocultar precio — sitio funciona como catálogo ── */
.single-product div.product p.price,
.single-product div.product span.price,
.single-product .related.products .price {
    display: none !important;
}

/* ── Ocultar rating vacío ── */
.single-product .woocommerce-product-rating {
    display: none !important;
}

/* ── Quitar ícono ::after del botón ── */
.single-product div.product form.cart .button::after {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTOS RELACIONADOS — grid 4 columnas
   (WooCommerce usa floats; lo reemplazamos con CSS Grid)
   ══════════════════════════════════════════════════════════════ */

.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    clear: both !important;
}

.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after {
    display: none !important;
}

.single-product .related.products ul.products li.product {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* Hover suave en imagen */
.single-product .related.products li.product a img {
    transition: transform .3s ease;
    display: block;
    width: 100%;
}
.single-product .related.products li.product:hover a img {
    transform: scale(1.04);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .single-product .related.products ul.products {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}