/**
 * VENDOR / WOOCOMMERCE
 * -----------------------------------------------------------------------------
 * Adapta WooCommerce al lenguaje visual del tema (fondo claro, Poppins/DM Sans).
 * Solo se carga en páginas de WooCommerce (ver inc/enqueue.php).
 *
 * Criterio: la tarjeta de producto de Woo se lleva al MISMO aspecto que
 * .product-card del tema, para que la portada y la tienda se vean iguales.
 *
 * Estructura:
 *   1. Layout de tienda
 *   2. Tarjeta de producto (loop)
 *   3. Precios y etiquetas
 *   4. Botones
 *   5. Ficha de producto
 *   6. Avisos, carrito y checkout
 *   7. Argumentos de venta de la ficha
 *   8. Ficha técnica
 *   9. Valoraciones
 */

/* =============================================================
   1. LAYOUT DE TIENDA
============================================================= */

.woocommerce .shop-main {
    padding-block: var(--section-padding) var(--section-padding);
}

.woocommerce-result-count,
.woocommerce-ordering {
    color: var(--text-muted);
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
}

.woocommerce .woocommerce-ordering select {
    padding: 10px 40px 10px 14px;
    width: auto;
}

/*
 * El layout de dos columnas y la barra de resultados viven en
 * components/shop-filters.css, junto al resto del panel de filtros.
 *
 * El selector de orden es lo único que WooCommerce aporta a esa barra: aquí
 * solo se le quita el margen que trae de serie.
 */
.results-bar .woocommerce-ordering {
    margin-bottom: 0;
}

/* =============================================================
   2. TARJETA DE PRODUCTO (LOOP)
============================================================= */

/*
 * `auto-fill`, no `auto-fit`: auto-fit colapsa las columnas vacías y reparte
 * el ancho sobrante entre las que quedan, así que una categoría con dos
 * productos mostraba tarjetas de 580px. Con auto-fill la columna mantiene su
 * medida y los huecos se quedan vacíos, que es lo que se espera de un catálogo.
 */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--gap-grid);
    margin: 0;
    padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}

/*
 * IMPORTANTE — anchura de la tarjeta.
 *
 * woocommerce-layout.css trae `.woocommerce ul.products.columns-3 li.product
 * { width: 30.75% }` con especificidad (0,3,2), mayor que la de un selector
 * `.woocommerce ul.products li.product` (0,2,2). Dentro del grid ese 30.75%
 * se calcula sobre la columna, no sobre la fila, y las tarjetas colapsaban a
 * ~86px. Añadir `.product-card` (la clase que pone woocommerce/content-product.php)
 * sube la especificidad a (0,4,2) y gana con cualquier número de columnas.
 */
.woocommerce ul.products li.product.product-card,
.woocommerce-page ul.products li.product.product-card {
    width: 100%;
    max-width: none;
    float: none;
    margin: 0;
    clear: none;
}

.woocommerce ul.products li.product {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: left;
    transition: var(--transition);
}

.woocommerce ul.products li.product:hover {
    transform: var(--lift-lg);
    border-color: var(--border-blue);
    box-shadow: var(--shadow-card-hover);
}

/*
 * WooCommerce trae `.woocommerce ul.products li.product a img { height:auto }`.
 * Ese selector incluye el `a`, así que gana a uno equivalente sin él y la
 * imagen crecía hasta su tamaño natural: un cuadrado de 577px dentro de una
 * caja de 200px con overflow oculto, del que solo se veía el tercio superior.
 * Nombrar el contenedor `.product-card__media` da la especificidad necesaria.
 */
.woocommerce ul.products li.product .product-card__media img,
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-sm);
    background: var(--white);
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Los nombres del catálogo son muy largos ("Kit 12kw hibrido goodwe 18 paneles
 * solares de 585 watt 1 Inversor…"). Se limitan a cuatro líneas para que las
 * tarjetas de una misma fila no se descuadren; el nombre completo sigue en la
 * ficha del producto y en el atributo title del enlace.
 */
/*
 * Mientras un producto no tiene foto, WooCommerce sirve su marcador gris. Sobre
 * la caja blanca se recortaba como un cuadro dentro de otro, así que la caja
 * adopta el mismo gris y el marcador se funde. Sin soporte de :has() la caja
 * se queda blanca, que tampoco desentona.
 */
.woocommerce ul.products li.product .product-card__media:has(img.woocommerce-placeholder) {
    background: var(--bg-soft);
}

.woocommerce ul.products li.product img.woocommerce-placeholder {
    padding: var(--space-lg);
    opacity: 0.55;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 16.5px;
    line-height: 1.3;
    color: var(--heading);
    padding: 0;
    margin-bottom: var(--space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * El bloque de precio y botones se empuja al fondo del cuerpo para que quede a
 * la misma altura en todas las tarjetas de la fila, sea cual sea lo que ocupe
 * el título. El aspecto del precio se define en components/product-card.css.
 */
.woocommerce ul.products li.product .product-card__footer {
    margin-top: auto;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
    padding: var(--space-md);
}

/* =============================================================
   3. PRECIOS Y ETIQUETAS
============================================================= */

.woocommerce .price,
.woocommerce ul.products li.product .price {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 21px;
    color: var(--heading);
    margin-bottom: var(--space-sm);
    display: block;
}

.woocommerce .price del {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    opacity: 1;
    margin-right: var(--space-2xs);
}

.woocommerce .price ins {
    text-decoration: none;
    color: var(--heading);
}

.woocommerce span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.4px;
    padding: 5px 11px;
    border-radius: var(--radius-xs);
    min-height: auto;
    min-width: auto;
    line-height: 1.6;
    margin: 0;
}

/* =============================================================
   4. BOTONES
============================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 12px 18px;
    background: var(--orange);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    border: 1px solid transparent;
    transition: var(--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--orange-dark);
    color: var(--white);
}

/* El botón del loop ocupa el ancho de la tarjeta */
.woocommerce ul.products li.product .button {
    display: flex;
    width: 100%;
    margin: 0;
}

.woocommerce a.added_to_cart {
    display: block;
    color: var(--blue);
    background: transparent;
    font-size: var(--fs-base);
    padding: var(--space-xs) 0 0;
    margin: 0;
}

.woocommerce #respond input#submit.disabled,
.woocommerce button.button:disabled {
    opacity: 0.55;
}

/* =============================================================
   5. FICHA DE PRODUCTO
============================================================= */

.woocommerce div.product {
    padding-block: var(--section-padding-md);
}

.woocommerce div.product .product_title {
    font-size: clamp(26px, 3vw, 38px);
    margin-bottom: var(--space-sm);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-md);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 30px;
    color: var(--heading);
}

.woocommerce div.product form.cart {
    margin-bottom: var(--space-lg);
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 84px;
    text-align: center;
    padding: 12px 8px;
}

.woocommerce div.product .woocommerce-product-gallery img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

/* --- Pestañas ---------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-color: var(--border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 var(--space-md) 0 0;
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-lg);
    padding: var(--space-xs) 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--heading);
    box-shadow: inset 0 -2px 0 var(--blue);
}

/* --- Relacionados ------------------------------------------------------ */

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-lg);
}

/* =============================================================
   6. AVISOS, CARRITO Y CHECKOUT
============================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-top-width: 3px;
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: var(--fs-md);
}

.woocommerce-message { border-top-color: var(--green); }
.woocommerce-info    { border-top-color: var(--blue); }
.woocommerce-error   { border-top-color: #d64545; }

.woocommerce-message::before { color: var(--green); }
.woocommerce-info::before    { color: var(--blue); }
.woocommerce-error::before   { color: #d64545; }

.woocommerce table.shop_table {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    overflow: hidden;
}

.woocommerce table.shop_table th {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--heading);
}

.woocommerce table.shop_table td {
    color: var(--text);
    border-top: 1px solid var(--border);
}

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #payment {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-md);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--white);
    color: var(--text);
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--white);
}

/* =============================================================
   RESPONSIVE
============================================================= */

@media (max-width: 700px) {

    /*
     * Dos columnas, no una: a una sola columna la tarjeta ocupa casi toda la
     * pantalla y recorrer el catálogo se hace eterno. Con dos entran cuatro
     * productos por pantalla, que es lo habitual en tienda móvil.
     */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: var(--fs-md);
        -webkit-line-clamp: 3;
    }

    .woocommerce ul.products li.product .price,
    .woocommerce ul.products li.product .product-card__price {
        font-size: var(--fs-xl);
    }

    /* En una tarjeta estrecha el texto de los botones necesita menos cuerpo. */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .btn {
        font-size: var(--fs-base);
        padding-inline: var(--space-xs);
    }

    .woocommerce ul.products li.product .product-card__body {
        padding: var(--space-sm) var(--space-sm) var(--space-md);
    }

    .woocommerce ul.products li.product img {
        padding: var(--space-xs);
    }
}

@media (max-width: 400px) {

    /* Por debajo de este ancho dos columnas dejan la ficha ilegible. */
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   7. ARGUMENTOS DE VENTA EN LA FICHA
   Rellenan la columna derecha cuando el producto no trae descripción corta.
============================================================= */

.product-assurances {
    display: grid;
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    padding: var(--space-md);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.product-assurances li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: var(--fs-md);
    color: var(--text);
    line-height: 1.45;
}

.product-assurances svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--blue);
}

.product-advice {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--whatsapp);
    border-radius: var(--radius-lg);
    color: var(--green);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    transition: var(--transition);
}

.product-advice:hover {
    background: var(--green-soft);
}

.product-advice svg {
    flex-shrink: 0;
    color: var(--whatsapp);
}

/* =============================================================
   8. FICHA TÉCNICA
   Datos que se cargan en la pestaña "Ficha técnica" del producto.
   Ver inc/product-specs.php
============================================================= */

/* --- Resumen junto al precio ------------------------------------------- */

.product-specs-summary {
    margin-top: var(--space-md);
}

.product-specs-summary__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xl);
    color: var(--heading);
    margin-bottom: var(--space-xs);
}

.product-specs-summary__list {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.product-specs-summary__list > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
}

/* Filas alternas: se leen mejor que con filetes en una lista corta. */
.product-specs-summary__list > div:nth-child(odd) {
    background: var(--bg-alt);
}

.product-specs-summary__list dt {
    color: var(--text);
    font-size: var(--fs-md);
    margin: 0;
}

.product-specs-summary__list dd {
    margin: 0;
    color: var(--heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
}

.product-specs-summary__more {
    display: inline-block;
    margin-top: var(--space-xs);
    color: var(--blue);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
}

.product-specs-summary__more:hover {
    text-decoration: underline;
}

/* --- Tabla completa de la pestaña -------------------------------------- */

.woocommerce table.product-specs {
    width: 100%;
    max-width: 720px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--white);
}

.woocommerce table.product-specs th,
.woocommerce table.product-specs td {
    padding: 13px var(--space-md);
    text-align: left;
    font-size: var(--fs-lg);
    border: 0;
}

.woocommerce table.product-specs th {
    width: 40%;
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    color: var(--text);
}

.woocommerce table.product-specs td {
    color: var(--heading);
    font-weight: var(--fw-semibold);
}

.woocommerce table.product-specs tr:nth-child(odd) th,
.woocommerce table.product-specs tr:nth-child(odd) td {
    background: var(--bg-alt);
}

@media (max-width: 480px) {

    .product-specs-summary__list > div,
    .woocommerce table.product-specs th {
        grid-template-columns: 1fr;
        width: 50%;
    }
}

/* --- PDF de ficha técnica ---------------------------------------------- */

.datasheet {
    max-width: 720px;
    margin-top: var(--space-lg);
}

.datasheet__bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.datasheet__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0392b;
}

.datasheet__info {
    flex: 1 1 200px;
    min-width: 0;
}

.datasheet__name {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    color: var(--heading);
    /* Los nombres de archivo del fabricante suelen ser largos. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datasheet__meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.datasheet__bar .btn svg {
    width: 16px;
    height: 16px;
}

/* --- Visor -------------------------------------------------------------- */

.datasheet__viewer {
    margin-top: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-soft);
}

/*
 * Vacío no ocupa nada, pero sigue en el flujo: no se usa `display: none`
 * porque el contenedor debe poder recibir el marco cuando se pulsa "Ver aquí".
 */
.datasheet__viewer:empty {
    margin: 0;
    border: 0;
    height: 0;
}

.datasheet__viewer iframe {
    display: block;
    width: 100%;
    height: 680px;
    border: 0;
}

@media (max-width: 782px) {

    /*
     * Los navegadores móviles no muestran PDF incrustados de forma fiable:
     * ahí el acceso al documento son "Abrir" y "Descargar".
     */
    .datasheet__viewer,
    .datasheet__show {
        display: none;
    }
}

/* --- Enlace al PDF en el resumen del producto --------------------------- */

.product-specs-summary__pdf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: 10px var(--space-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--heading);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    transition: var(--transition);
}

.product-specs-summary__pdf:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.product-specs-summary__pdf svg {
    flex-shrink: 0;
    color: #c0392b;
}


/* =============================================================
   9. VALORACIONES

   El cliente las pidió de vuelta. WooCommerce trae su propia hoja para las
   estrellas (usan una fuente de iconos suya), así que aquí solo se ajusta el
   color y se lleva el bloque de reseñas al lenguaje del tema.
============================================================= */

.woocommerce .star-rating {
    color: var(--orange);
    font-size: 13px;
    margin: 0;
}

/* En la tarjeta las estrellas van sobre el precio, con aire pero sin separar. */
.woocommerce ul.products li.product .star-rating {
    margin-bottom: var(--space-xs);
}

.woocommerce .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.woocommerce .woocommerce-product-rating .woocommerce-review-link {
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.woocommerce .woocommerce-product-rating .woocommerce-review-link:hover {
    color: var(--blue);
}

/* --- Bloque de reseñas de la ficha ------------------------------------- */

.woocommerce #reviews #comments > h2 {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-md);
}

.woocommerce #reviews .commentlist {
    display: grid;
    gap: var(--space-sm);
    padding: 0;
    margin: 0 0 var(--space-lg);
    list-style: none;
}

.woocommerce #reviews .commentlist li {
    margin: 0;
}

.woocommerce #reviews .commentlist li .comment_container {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.woocommerce #reviews .commentlist li img.avatar {
    position: static;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle);
    background: none;
    flex-shrink: 0;
}

.woocommerce #reviews .commentlist li .comment-text {
    /* Woo deja hueco para el avatar en absoluto; aquí el flex ya lo coloca. */
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-width: 0;
    flex: 1;
}

.woocommerce #reviews .comment-text p.meta {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin-bottom: var(--space-2xs);
}

.woocommerce #reviews .comment-text p.meta strong {
    color: var(--heading);
    font-weight: var(--fw-semibold);
}

.woocommerce #reviews .comment-text .description {
    color: var(--text);
    font-size: var(--fs-md);
}

.woocommerce #reviews .woocommerce-noreviews {
    color: var(--text-muted);
    font-size: var(--fs-md);
}

/* --- Formulario de reseña ---------------------------------------------- */

.woocommerce #review_form_wrapper {
    padding: var(--space-md);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.woocommerce #review_form #respond .comment-reply-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xl);
    color: var(--heading);
    margin-bottom: var(--space-sm);
}

.woocommerce #review_form #respond .comment-form-rating label,
.woocommerce #review_form #respond .comment-form-comment label,
.woocommerce #review_form #respond .comment-form-author label,
.woocommerce #review_form #respond .comment-form-email label {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
    margin-bottom: var(--space-2xs);
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
    width: 100%;
    padding: 12px var(--space-sm);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--heading);
    background: var(--white);
}

.woocommerce #review_form #respond textarea:focus,
.woocommerce #review_form #respond input[type="text"]:focus,
.woocommerce #review_form #respond input[type="email"]:focus {
    border-color: var(--blue);
    outline: none;
}

/* Las estrellas que se eligen al escribir la reseña. */
.woocommerce #review_form #respond p.stars a {
    color: var(--orange);
}

@media (max-width: 700px) {

    .woocommerce #reviews .commentlist li .comment_container {
        padding: var(--space-sm);
    }
}


/* =============================================================
   10. PRECIOS DE PRODUCTOS VARIABLES

   El rango "$1.700.500 – $1.790.000" se sustituye por "Desde $1.700.500"
   desde PHP (ver fremicar_variable_price_html en inc/woocommerce.php). Aquí
   solo se compone la etiqueta y se evita el precio duplicado de la ficha.
============================================================= */

/* "Desde": acompaña a la cifra, no compite con ella. */
.woocommerce .price .price-from {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    letter-spacing: 0;
}

/*
 * El importe no se parte por dentro, pero la línea sí puede envolver: con
 * `nowrap` en el contenedor, un precio largo desbordaba la tarjeta en lugar de
 * bajar el "Desde" a su propia línea.
 */
.woocommerce ul.products li.product .product-card__footer .price {
    flex-wrap: wrap;
    white-space: normal;
}

.woocommerce ul.products li.product .product-card__footer .price .woocommerce-Price-amount {
    white-space: nowrap;
}

/*
 * Precio de la variante elegida. Lo pinta WooCommerce bajo el selector, pero
 * el precio de la cabecera ya se actualiza solo (assets/js/product-price.js):
 * dejarlo visible sería enseñar la misma cifra dos veces.
 *
 * La clase la pone ese script al arrancar, no el PHP. Así, si el archivo no
 * llega a cargarse, la cabecera se queda con el "Desde …" y este bloque sigue
 * a la vista: es entonces la única forma de conocer el precio de la variante.
 */
.variations_form.has-single-price .woocommerce-variation-price {
    display: none;
}