/*
 * Selector de cantidad de los overgrips: botones pequeños, solo la cantidad.
 *
 * Historia corta, porque esta ficha ha cambiado tres veces en tres días:
 *
 * - Hasta el 02/09/2026 había **dos** selectores —un bloque propio «FORMATO ·
 *   Elige cuántos overgrips necesitas» encima del precio y el nativo «Elige tu
 *   cantidad» debajo—, los dos con 3/6/12/30/60 y los mismos importes.
 * - El 02/09 se quedó solo el nativo y se le dio cuerpo: foto del formato,
 *   precio y precio por unidad en cada opción.
 * - El 03/09 Toni lo ve y pide lo contrario: **cinco tarjetas grandes en
 *   columna se comen la pantalla** antes siquiera de decidir. La referencia que
 *   da es cómo lo resuelven las tiendas grandes —botones pequeños con la
 *   cantidad, sin foto y sin precio— y tiene razón: el precio ya está dos
 *   líneas más abajo y en el precio del producto, y la foto del pack elegido
 *   aparece donde de verdad se mira, que es la imagen principal.
 *
 * Lo que sí se conserva del 02/09: al elegir un formato, la foto principal pasa
 * a ser la de ese pack. Eso lo hace la JS, no esta hoja.
 *
 * **Sobre la especificidad.** `cordon-purchase-pilot.css` impone a todas las
 * fichas con variaciones la presentación `--plain` en tarjeta alta, con
 * `!important`. Y esa hoja se carga **después** que esta en el tema y **antes**
 * en la preview, así que empatar no vale: los selectores de aquí llevan la
 * ficha en el `[data-gp-product-slug]` para ganar por especificidad en los dos
 * órdenes. El dato comercial sigue viniendo de WooCommerce.
 */

/*
 * La rejilla de botones, en tres columnas: 3 arriba y 2 abajo.
 *
 * Dos decisiones medidas, no elegidas a ojo:
 *
 * - `auto-fill` y no `auto-fit`: con cinco opciones la última fila lleva dos, y
 *   `auto-fit` las estira hasta ocupar el ancho entero —medido: 127, 128, 135,
 *   199 y 199 px—. Con `auto-fill` la columna sobrante se queda vacía y los
 *   cinco botones miden lo mismo.
 * - **Tres columnas y no cinco.** Los cinco en una sola fila serían lo ideal,
 *   pero no caben: el botón más ancho —«60 unidades»— necesita 111 px, o sea
 *   587 px para los cinco, y la columna del selector mide 537. Dejarlo al
 *   automático daba 4 + 1, con un botón solo y descolgado en la segunda fila.
 *   Tres columnas dan 3 + 2, que se lee como algo pensado.
 */
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-selector__options {
  background: transparent !important;
  display: grid !important;
  gap: 0.5rem !important;
  grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)) !important;
  list-style: none;
  margin: 0.85rem 0 0 !important;
  padding: 0 !important;
}

@media (min-width: 640px) {
  .gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
    .gp-variation-selector--plain .gp-variation-selector__options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-selector__options > li {
  display: block;
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--gp-line, #ded9ce) !important;
  border-radius: 0.7rem !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex !important;
  gap: 0.3rem !important;
  justify-content: center !important;
  /*
   * La altura mínima de 7,2 rem que impone el piloto estaba pensada para una
   * tarjeta con foto. Aquí sobra: el botón mide lo que mide su texto.
   */
  min-height: 0 !important;
  padding: 0.6rem 0.85rem !important;
  text-align: center !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
  transform: none !important;
  white-space: nowrap;
  width: 100%;
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option:hover {
  border-color: #a9a49a !important;
  box-shadow: none !important;
  transform: none !important;
}

/*
 * El elegido se marca con el borde y el fondo, sin aros ni sombras.
 *
 * El borde es azul (#0071e3, el mismo azul de acción que ya usa el tema) por
 * decisión de Toni el 03/09/2026: con el borde negro no se distinguía el
 * elegido del resto, porque los cinco botones ya llevan borde gris oscuro y a
 * tamaño móvil la diferencia era solo el grosor. El azul se lee de un vistazo
 * y el fondo apenas teñido lo confirma sin gritar.
 */
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option.is-selected {
  background: color-mix(in srgb, #0071e3 8%, #fff) !important;
  border-color: #0071e3 !important;
  border-width: 2px !important;
  box-shadow: none !important;
  padding: calc(0.6rem - 1px) calc(0.85rem - 1px) !important;
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option.is-selected .gp-variation-option__figure {
  color: #0a5cb8 !important;
}

/* El borde azul manda también cuando el ratón pasa por encima del elegido. */
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option.is-selected:hover {
  border-color: #0071e3 !important;
}

/*
 * Ni punto de radio ni foto dentro del botón. El punto es decorativo
 * (`aria-hidden`), y `aria-checked` sigue en el botón, así que un lector de
 * pantalla no pierde nada. La foto la retira la JS de la preview; esta regla
 * la cubre por si quedara alguna servida por el tema.
 */
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__radio,
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__image,
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__price,
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__unit-price {
  display: none !important;
}

/* Cantidad y unidad en una sola línea: «3 unidades». */
.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__copy {
  align-items: baseline !important;
  display: flex !important;
  gap: 0.28rem !important;
  justify-content: center !important;
  min-width: 0;
  text-align: center !important;
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__figure {
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.gp-preview-product-page[data-gp-product-slug="overgrips-padel"]
  .gp-variation-selector--plain .gp-variation-option__unit {
  color: var(--gp-muted, #686660) !important;
  font-size: 0.86rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/*
 * Aquí vivía un `display: none` sobre `.flex-control-thumbs` que decía ocultar
 * la tira nativa de miniaturas «en la preview». En la preview esa tira no
 * existe —la pinta el router—, así que lo único que hacía era **dejar la ficha
 * real de WordPress sin miniaturas**. Se retira el 03/09 al unificar la tira en
 * `galeria-miniaturas-2026-09-03.css`: los overgrips llevan once fotos y son
 * justo la ficha que más necesita poder pasarlas.
 */