/* Auxi - Agrupador de productos: etiqueta de medidas en el listado.
   Se dibuja debajo del nombre del producto, como las muestras de color.

   Dos decisiones de diseño:
   1. Todos los botones son iguales, en azul claro. Ninguno se resalta: la
      medida de la ficha que se está viendo no se marca de otra forma.
   2. La caja reserva siempre la misma altura (dos filas de botones) para que el
      precio quede a la misma altura en todas las fichas del listado, tenga el
      producto tres medidas o cinco. Sin esto, unos precios salen más arriba y
      otros más abajo. */

.woocommerce ul.products li.product .agp-loop,
.agp-loop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 3px 5px;
    margin: 6px 0 4px;
    padding: 0;
    /* El rótulo va en su propia línea y debajo van los botones, así que la caja
       reserva el rótulo más dos filas de botones: 72 px. */
    min-height: 72px;
    line-height: 1.2;
    font-size: 12px;
    list-style: none;
    box-sizing: border-box;
    width: 100%;
    justify-content: flex-start;
    text-align: left !important;
}

.agp-loop__label {
    /* En su propia línea, encima de los botones. */
    display: block;
    width: 100%;
    margin: 0 0 3px;
    font-weight: 600;
    color: #5a6b7b;
    font-size: 11.5px;
    text-align: left !important;
}

/* Elementor y algunas plantillas centran con una regla propia todo lo que
   queda dentro del enlace de la ficha. Esta variante tiene la especificidad
   necesaria para que el rotulo ocupe la tarjeta completa y quede realmente
   alineado a la izquierda, sin mover los cartuchos. */
.woocommerce ul.products li.product .agp-loop > .agp-loop__label,
.elementor-products-grid ul.products.elementor-grid li.product .agp-loop > .agp-loop__label {
    display: block !important;
    align-self: stretch !important;
    box-sizing: border-box;
    width: 100% !important;
    margin-right: 0 !important;
    text-align: left !important;
}

.agp-loop__attr {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 5px;
}

/* Todos los botones iguales: azul claro. */
.agp-loop__chip,
.agp-loop__chip.is-current {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #bcd9f0;
    border-radius: 999px;
    background: #e8f2fb;
    color: #1d4e79;
    font-size: 11.5px;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
}

a.agp-loop__chip:hover,
a.agp-loop__chip:focus {
    border-color: #7fb4dd;
    background: #d8eaf9;
    color: #16405f;
}

.agp-loop__more {
    display: inline-block;
    padding: 2px 5px;
    color: #5a6b7b;
    font-size: 11px;
}

.agp-loop__chip--range {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
}

.agp-loop__resumen {
    color: #4a4a4a;
}

.agp-loop__resumen a {
    color: #1d4e79;
    text-decoration: none;
}

/* La versión en texto ocupa una sola línea. */
.agp-loop--texto {
    display: block;
    min-height: 0;
}

/* ---------------------------------------------------------------------------
   Precio alineado en todo el listado.

   Con la etiqueta de medidas, las fichas de una misma fila acaban con alturas
   distintas (el título ocupa una, dos o tres líneas y unos productos tienen
   medidas y otros no), así que unos precios salían más arriba y otros más
   abajo. Aquí la ficha se convierte en una columna flexible y el precio se
   ancla abajo: el precio y el botón de compra quedan siempre a la misma altura
   en todas las fichas de la fila.

   Afecta a todo el listado de productos, no solo a las fichas agrupadas, que es
   lo que hace que la rejilla se vea ordenada. */
/* En los listados estándar de WooCommerce (buscador, relacionados, shortcodes)
   las fichas se colocan con «display: block» y floats, y cada una queda con la
   altura de su contenido: 471 px unas y 452 otras. Al anclar el precio abajo,
   las más bajas dejaban el precio más arriba que sus vecinas. Convirtiendo el
   listado en una rejilla flexible con fichas estiradas, todas las de la misma
   fila miden lo mismo y el precio coincide.

   Se excluye el listado del widget de Elementor, que ya es un grid con sus
   propias columnas: pasarlo a flex lo descuadraría. */
.woocommerce ul.products:not(.elementor-grid) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.woocommerce ul.products li.product,
.elementor-products-grid ul.products.elementor-grid li.product {
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce ul.products li.product > a.woocommerce-loop-product__link,
.elementor-products-grid ul.products.elementor-grid li.product a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
}

.woocommerce ul.products li.product .price,
.elementor-products-grid ul.products.elementor-grid li.product .price {
    margin-top: auto !important;
}

/* En pantallas pequeñas se reduce para que no rompa la rejilla del listado.
   La altura reservada baja a dos filas más juntas. */
@media (max-width: 767px) {
    .agp-loop {
        font-size: 11px;
        gap: 3px 4px;
        min-height: 64px;
    }

    .agp-loop__chip,
    .agp-loop__chip.is-current {
        padding: 2px 6px;
        font-size: 11px;
    }
}