/*
 * Producción igual que localhost:8765 (14/09/2026).
 *
 * Toni fija la preview de 8765 como la referencia de cómo se ve la tienda. Al
 * compararlas pieza a pieza con capturas, lo que quedaba distinto no venía del
 * diseño sino de lo que WordPress añade y la preview no tiene:
 *
 * - las hojas del plugin WooCommerce (`woocommerce.css`, `-layout`), que solo
 *   se aplican donde el `<body>` lleva la clase `woocommerce` —tienda, fichas,
 *   carrito, checkout, cuenta— y por eso la portada ya salía igual;
 * - el marcado de WooCommerce donde la preview pinta el suyo (precio, migas);
 * - reglas del tema que la preview anula con clases que solo ella tiene
 *   (`body.gp-preview`).
 *
 * Esta hoja va la última (`inc/paridad-8765.php`) y solo la carga WordPress.
 * Cada bloque dice qué medida de 8765 copia.
 */

/* --- Ficha: la fila del precio ------------------------------------------------
 * 8765: `.gp-product-live-price`, en una fila, 12 px entre piezas, sin divisor
 * debajo (style.css lo quita con `body.gp-preview`). En WordPress es `p.price`
 * y `cordon-purchase-pilot.css` le pone el divisor y 1,35rem de relleno.
 */
body:not(.gp-preview) .gp-preview-product-page .gp-product-purchase > .price {
  align-items: center !important;
  border-bottom: 0 !important;
  column-gap: 12px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  padding-bottom: 0 !important;
}

body:not(.gp-preview) .gp-preview-product-page .gp-product-purchase > .price .gp-commerce-price {
  align-items: center;
  color: inherit !important;
  column-gap: 12px;
  flex-wrap: nowrap;
  font-size: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}

/* `components.css` encoge a 0,7em cualquier `del` dentro de `.gp-single-product__summary .price`; en 8765 es 0,93em. */
body:not(.gp-preview) .gp-preview-product-page .gp-product-purchase > .price .gp-commerce-price ins + del {
  font-size: 0.93em;
  font-weight: 500;
}

/* --- Pie --------------------------------------------------------------------
 * 8765: el logo a 13rem (`pie-2026-09-10.css`). `global-parity.css` lo sube a
 * 16rem en todo lo que no es la portada, y la preview es siempre «portada»: en
 * WordPress el pie de las demás páginas salía 30 px más alto.
 */
body:not(.home) .gp-site-footer .gp-footer-brand__logo {
  max-width: 13rem;
}

/* --- Migas de pan ------------------------------------------------------------
 * WooCommerce pinta las suyas a 0,92em y en #767676 (`.woocommerce
 * .woocommerce-breadcrumb`); la preview no tiene esa hoja.
 */
.gp-product-breadcrumb .woocommerce-breadcrumb,
.gp-catalogo-migas .woocommerce-breadcrumb {
  color: inherit !important;
  font-size: inherit !important;
  margin: 0 !important;
}

.gp-product-breadcrumb .woocommerce-breadcrumb a,
.gp-catalogo-migas .woocommerce-breadcrumb a {
  color: inherit !important;
}

/* --- Tienda ------------------------------------------------------------------
 * 8765: la tienda es una `.gp-section` blanca (`archive-product.php` ya lleva
 * sus clases y la rejilla su `data-gp-catalog-grid`), sin la franja de avisos
 * entre los tipos y la barra de filtros: en WordPress queda una caja de 4rem
 * con dos líneas aunque no haya ningún aviso.
 *
 * El `main` ya no lleva `.gp-shop-main`: sus reglas de móvil
 * (`.gp-shop-main ul.products …`, en `responsive-base.css`) pesaban más que las
 * del catálogo y en el teléfono quitaban la descripción de la tarjeta, cambiaban
 * el radio y los márgenes. De aquella clase solo hacía falta anular el `float`
 * y el ancho que WooCommerce da a cada `li.product`.
 */
body.woocommerce ul.products.gp-catalogo-rejilla > li.product {
  clear: none !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
}

body.woocommerce ul.products.gp-catalogo-rejilla::before,
body.woocommerce ul.products.gp-catalogo-rejilla::after {
  display: none;
}

.gp-catalogo .gp-shop-toolbar {
  border: 0;
  display: block;
  margin: 0;
  min-height: 0;
}

/* Tarjeta: la foto sin el margen de 1em que le pone WooCommerce. */
body.woocommerce ul.products li.product.gp-product-card a.gp-product-card__media img {
  margin: 0;
}

body.woocommerce ul.products.gp-catalogo-rejilla {
  margin: 0;
}

/* Tarjeta: el precio con la letra de `[data-gp-card-price]`, no la de `.gp-product-card__price`. */
.gp-product-card__price[data-gp-card-price] {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* --- Ficha: letra del precio y botón de compra ----------------------------------
 * Las hojas de familia de la preview ponen el espaciado del precio en
 * `.gp-product-live-price` (-0,05em); en WordPress el precio es `p.price`.
 */
body:not(.gp-preview) .gp-accessory-v5-pilot .gp-product-purchase > .price,
body:not(.gp-preview) .gp-grip-v5-pilot .gp-product-purchase > .price,
body:not(.gp-preview) .gp-pack-v5-pilot .gp-product-purchase > .price,
body:not(.gp-preview) .gp-attack-v5-pilot .gp-product-purchase > .price,
body:not(.gp-preview) .gp-control-v5-pilot .gp-product-purchase > .price {
  letter-spacing: -0.05em;
}

/* WooCommerce deja el botón con `line-height: 1` (`.woocommerce button.button`); en 8765 hereda 1,5. */
body.woocommerce .gp-preview-product-page .gp-product-purchase .single_add_to_cart_button {
  line-height: 1.5;
}

/* --- Favoritos -----------------------------------------------------------------
 * En 8765 la página va dentro de `.gp-preview-commerce-page` (fondo blanco y
 * clamp(3rem, 7vw, 6rem) arriba y abajo); la plantilla de WordPress empezaba
 * pegada a la cabecera.
 */
main.gp-main.gp-favoritos {
  background: var(--gp-white, #fff);
  padding-bottom: calc(clamp(3rem, 6vw, 5rem) + clamp(3rem, 7vw, 6rem));
  padding-top: clamp(3rem, 7vw, 6rem);
}

/* Carrito vacío: el botón sin el `line-height: 1` de `.woocommerce a.button`. */
body.woocommerce-page .gp-preview-cart-empty a.button.wc-backward {
  line-height: 1.5;
  padding: 0.9rem 1.4rem;
}

/* --- Mi cuenta -------------------------------------------------------------------
 * 8765: la cuenta va dentro del contenedor normal (1240 px) y la envoltura mide
 * min(76rem, 100% - 2,5rem) de ahí: 1200 px. `mi-cuenta-2026-09-13.css` abre el
 * contenedor a todo el ancho en WordPress y la tarjeta salía a 1216. Arriba, el
 * mismo arranque que la preview sin su aviso de «Preview: aquí no hay cuentas».
 */
.gp-runtime-commerce-page[data-gp-commerce-step="account"] > .gp-container {
  margin-inline: auto;
  width: min(var(--gp-max-width), calc(100% - 48px));
}

.gp-runtime-commerce-page[data-gp-commerce-step="account"] .gp-cuenta {
  padding-top: 0;
}

/*
 * Formularios de entrar y crear cuenta. `mi-cuenta-2026-09-13.css` ya los
 * dibuja como la preview, pero las reglas del plugin (`.woocommerce form
 * .form-row` y su `label`, `.input-text`, `button.button`) pesan más y dejaban
 * relleno de 3 px, etiquetas a doble interlineado, campos más bajos y el botón
 * redondo. Aquí se repiten los valores de esa hoja con el peso suficiente.
 */
body .gp-cuenta .gp-cuenta__formularios .woocommerce-form .form-row {
  margin: 0 0 1rem;
  padding: 0;
}

body .gp-cuenta .gp-cuenta__formularios .woocommerce-form .form-row label {
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.4rem;
}

body .gp-cuenta .gp-cuenta__formularios .woocommerce-form .form-row .input-text {
  border: 1px solid #d4d4d8;
  border-radius: 12px;
  color: var(--gp-cuenta-tinta);
  display: inline-block;
  line-height: 1.5;
  min-height: 3.3rem;
  padding: 0.7rem 1rem;
}

body .gp-cuenta .gp-cuenta__formularios .woocommerce-form .password-input {
  display: block;
}

body .gp-cuenta .gp-cuenta__formularios .woocommerce-form .gp-cuenta__opciones .woocommerce-form-login__rememberme {
  display: flex;
}

body .gp-cuenta .gp-cuenta__formularios .woocommerce-form .lost_password a {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
}

body .gp-cuenta .gp-cuenta__formularios .woocommerce-form button.woocommerce-button {
  background: var(--gp-cuenta-negro);
  border-radius: 12px;
  display: flex;
  float: none;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  min-height: 3.5rem;
  padding: 0.8rem 1.25rem;
}

/* --- Contacto ------------------------------------------------------------------
 * 8765 (estilos de `#pagina-contacto`): etiquetas en tinta, no en gris; enlaces
 * del bloque oscuro subrayados; `strong` a 700.
 */
.gp-contact-form label {
  color: #111;
}

.gp-contact-details a {
  text-decoration: underline;
}

body .gp-runtime-content-page[data-gp-page-slug="contacto"] .gp-contact-details strong {
  font-weight: 700;
}

/* --- Ficha: foto principal -----------------------------------------------------
 * En 8765 el marco (borde de 1 px, 2rem de radio, fondo) es el enlace
 * `.gp-preview-product-image`. `runtime-purchase-parity.css` lo repetía en la
 * diapositiva de WooCommerce que lo envuelve, y con las hojas de familia el
 * enlace ya lo lleva: salían dos bordes y la foto 4 px más pequeña. Además
 * flexslider resta ese borde al ancho de cada diapositiva (628 en vez de 630).
 */
@media (min-width: 768px) {
  body:not(.home) .gp-preview-product-page .gp-single-product__media .woocommerce-product-gallery__image {
    background: transparent;
    border: 0;
  }
}

/*
 * Palas, packs de pala y agarre: en 8765 la galería entera deja a la derecha el
 * hueco del contador (5,25rem, `galeria-miniaturas-2026-09-03.css`) y la foto
 * mide 546 px. En WordPress `components.css` fuerza la galería al 100 % y el
 * margen no la estrechaba.
 */
.gp-preview-product-page .gp-single-product__media:has(.gp-pack-v5__counter, .gp-attack-v5__counter, .gp-control-v5__counter, .gp-grip-v5__counter) .woocommerce-product-gallery {
  width: calc(100% - 5.25rem) !important;
}

.gp-preview-product-page .gp-single-product__media:has(.gp-pack-v5__counter, .gp-attack-v5__counter, .gp-control-v5__counter, .gp-grip-v5__counter) .woocommerce-product-gallery .flex-control-thumbs {
  margin-right: 0;
}

/* El contador de los accesorios, dentro de la foto: 16 px desde el borde del marco de 1 px. */
.gp-preview-product-page .woocommerce-product-gallery .flex-viewport > .gp-runtime-gallery-counter {
  bottom: 17px;
  right: 17px;
}

/* El «clearfix» de WooCommerce (`::before` con `display: table`) es un hueco más dentro de la fila flexible de las migas. */
.gp-catalogo-migas .woocommerce-breadcrumb::before,
.gp-catalogo-migas .woocommerce-breadcrumb::after {
  content: none !important;
  display: none !important;
}

/* --- Teléfono ---------------------------------------------------------------------- */
@media (max-width: 980px) {
  /*
   * 15/09/2026 · Toni, ficha de Control a 440 px: foto estrecha, pegada a la
   * izquierda, borde feo y demasiado hueco debajo. Tres restos de WordPress que
   * 8765 no tiene:
   *   - el ancho de 5,25rem menos de arriba, que en una columna sobra (el
   *     contador va dentro de la foto: `galeria-miniaturas-2026-09-03.css`);
   *   - el fondo gris y las esquinas de 32 px de la diapositiva, que solo se
   *     quitaban desde 768 px: asomaban por las esquinas de la foto (21,6 px) y
   *     recortaban el filete de color de Control y Attack;
   *   - la altura mínima fija de la ficha de Control en el teléfono
   *     (`runtime-purchase-parity.css`, 29,085rem): con la foto a su ancho real
   *     sobra y, en pantallas más estrechas, dejaba hueco debajo.
   */
  .gp-preview-product-page .gp-single-product__media:has(.gp-pack-v5__counter, .gp-attack-v5__counter, .gp-control-v5__counter, .gp-grip-v5__counter) .woocommerce-product-gallery {
    width: 100% !important;
  }

  body:not(.home) .gp-preview-product-page .gp-single-product__media .woocommerce-product-gallery__image {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .gp-preview-product-page[data-gp-product-slug] .gp-single-product__media {
    min-height: 0;
  }

  /*
   * `global-parity.css` baja 1rem el contenedor de la ficha; en 8765 esas
   * clases van en otro elemento y la regla no aplica. En el ordenador lo
   * compensan las migas; en el teléfono, sin migas, eran 16 px de más.
   */
  .gp-preview-product-page.gp-single-product > .gp-container {
    margin-top: 0;
  }

  /* El contenedor de la cuenta, con el margen del teléfono (12 px por lado), no el de 24. */
  .gp-runtime-commerce-page[data-gp-commerce-step="account"] > .gp-container {
    width: min(var(--gp-max-width), calc(100% - 24px));
  }

  .gp-catalogo .gp-shop-toolbar {
    padding: 0;
  }
}

@media (max-width: 640px) {
  /* Favoritos y carrito vacío: 6rem arriba y 4rem abajo, como `.gp-preview-commerce-page` en el teléfono. */
  main.gp-main.gp-favoritos {
    padding-bottom: calc(4rem + clamp(3rem, 6vw, 5rem));
    padding-top: 6rem;
  }

  .gp-runtime-commerce-page[data-gp-commerce-step="cart"]:has(.gp-preview-cart-empty) {
    min-height: 0;
    padding-bottom: 4rem;
  }
}

/* Carrito vacío: la tarjeta a 24 px del título, no a 32 (`.gp-entry-content`). */
.gp-runtime-commerce-page[data-gp-commerce-step="cart"] .gp-entry-content--commerce:has(> .woocommerce > .gp-preview-cart-empty) {
  margin-top: 0;
}

/* --- Checkout (14/09/2026, noche) ---------------------------------------- */

/*
 * Apple Pay, Google Pay y PayPal, tres botones iguales en una fila, como 8765.
 * En la tienda salían Apple y Google apilados en media columna y PayPal al
 * fondo: la rejilla contaba cuatro huecos, porque el recuadro de Stripe ocupaba
 * dos y la etiqueta invisible `wc-order-attribution-inputs` del plugin, otro.
 * Con `display: contents` cada botón de Stripe es su propio hueco; si el
 * dispositivo no admite alguno, los que quedan se reparten el ancho.
 */
form.gp-checkout .gp-checkout__express-botones {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
}

/*
 * Solo cuando el plugin lo enseña: sin Apple Pay ni Google Pay en el dispositivo
 * le pone `display:none` en línea, y con `contents` volvía a ocupar huecos.
 * Medido en producción el 15/09/2026.
 */
form.gp-checkout .gp-checkout__express-botones #wc-stripe-express-checkout-element:not([style*="display:none"]):not([style*="display: none"]) {
  display: contents !important;
}

/* Cada botón que Stripe no llega a dibujar se queda con un iframe de 2 px: fuera. */
form.gp-checkout .gp-checkout__express-botones wc-order-attribution-inputs,
form.gp-checkout .gp-checkout__express-botones #wc-stripe-express-checkout-element > :not(.StripeElement),
form.gp-checkout .gp-checkout__express-botones #wc-stripe-express-checkout-element > [style*="display: none"],
form.gp-checkout .gp-checkout__express-botones .StripeElement:has(iframe[style*="height: 2px"]) {
  display: none !important;
}

/*
 * `express-checkout.css` del plugin fija `min-width: 260px` a cada botón con un
 * selector de id; sin ganarle, Apple y Google Pay se salían 52 px de su hueco.
 */
form.gp-checkout .gp-checkout__express-botones #wc-stripe-express-checkout-element > .StripeElement {
  min-width: 0;
  width: auto;
}

/* En el teléfono, uno debajo de otro, como 8765 (`woocommerce.css`, 560 px). */
@media (max-width: 560px) {
  form.gp-checkout .gp-checkout__express-botones {
    grid-auto-flow: row;
  }
}

/* Contacto y Entrega: dos bloques con el mismo hueco que el resto (`form-billing.php`). */
.gp-main form.gp-checkout .woocommerce-billing-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gp-main form.gp-checkout .woocommerce-billing-fields > h3,
.gp-main form.gp-checkout .woocommerce-shipping-fields:empty {
  display: none;
}

.gp-main form.gp-checkout .woocommerce-additional-fields .form-row {
  margin-bottom: 0;
}

/* El recuadro de la tarjeta mientras Redsys no pinta el suyo (`checkout-tarjeta.js`). */
.gp-main .gp-checkout .gp-card-frame--espera .input-text {
  cursor: default;
}

.gp-main .gp-checkout .gp-card-frame__espera {
  color: var(--gp-muted, #686660);
  font-size: 0.82rem;
  margin: 0.2rem 0 0;
}

/*
 * «Aplicar» del cajón como 8765. En WordPress le ganaba `.woocommerce .button`
 * de la hoja del plugin (gris lila, 16 px, radio 3 px), que la preview no carga.
 * Medido en 8765 el 15/09/2026.
 */
.gp-drawer .gp-cajon__cupon .gp-cupon__boton {
  background: rgb(235, 231, 222);
  border: 1px solid rgb(228, 228, 231);
  border-radius: 8px;
  color: rgb(17, 17, 17);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  padding: 0 18px;
}

/*
 * El resumen y la columna derecha del checkout, como 8765 (15/09/2026). Lo que
 * quedaba venía de la hoja del plugin (`.woocommerce table.shop_table`,
 * `.woocommerce .button`) y de `.gp-entry-content a`, que la preview no carga.
 */
.gp-main form.gp-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal th {
  font-weight: 850;
}

.gp-main form.gp-checkout .woocommerce-checkout-review-order-table tfoot .cart-subtotal td {
  font-weight: 400;
}

.gp-main form.gp-checkout .woocommerce-checkout-review-order-table tfoot .order-total td,
.gp-main form.gp-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.gp-main form.gp-checkout .woocommerce-checkout-review-order-table tbody td {
  border-top: 0;
}

.gp-main form.gp-checkout .gp-checkout__cupon .gp-cupon__boton {
  border: 1px solid rgb(228, 228, 231);
  font-size: 14px;
  line-height: 21px;
  padding: 0 18px;
  position: static;
}

.gp-main form.gp-checkout .gp-resenas__pie a,
.gp-main form.gp-checkout .gp-sugerencia__boton {
  text-decoration: none;
}

/*
 * `review-order.php` de WooCommerce deja un `&nbsp;` detrás del nombre; como la
 * foto y el nombre van en un bloque flexible, ese espacio caía en su propia
 * línea y cada producto del resumen medía 22 px más que en 8765.
 */
.gp-main form.gp-checkout .woocommerce-checkout-review-order-table .cart_item td.product-name {
  font-size: 0;
}

.gp-main form.gp-checkout .woocommerce-checkout-review-order-table .cart_item .gp-resumen__producto {
  font-size: 15.04px;
}

/* La fila del envío: texto suelto, no la lista de métodos de WooCommerce. */
.gp-main form.gp-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
  color: rgb(82, 82, 91);
  font-size: 16px;
  line-height: 23.2px;
}

.gp-main form.gp-checkout .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Sin «“…” se ha añadido a tu carrito» encima del checkout: sale al pulsar
 * «Añadir» en las sugerencias, que vuelven aquí, y 8765 no lo enseña; lo añadido
 * ya se ve en el resumen. Los errores (`.woocommerce-error`) siguen saliendo.
 */
body.gp-checkout-desnudo .woocommerce-notices-wrapper .woocommerce-message {
  display: none;
}

/* Las notas, debajo de Provincia con el mismo hueco que entre campos. */
.gp-main form.gp-checkout .woocommerce-additional-fields {
  margin-top: 0.85rem;
}

/*
 * El pie del pago como 8765 (15/09/2026, medido en producción tras la subida).
 * WooCommerce envuelve el texto de privacidad en un `div` con un `p` dentro
 * —el tema lo pintaba a 16,8 px en vez de a 13,12—, pone su propia clase en
 * «He leído y acepto…» (gris, 13,76 px) y deja el asterisco rojo suelto; en
 * 8765 la casilla ya dice que es obligatoria.
 */
.gp-main form.gp-checkout .woocommerce-privacy-policy-text p {
  font-size: 13.12px;
  line-height: 20.992px;
  margin: 16px 0 0;
}

.gp-main form.gp-checkout .place-order label.checkbox > .woocommerce-terms-and-conditions-checkbox-text,
.gp-main form.gp-checkout .place-order label.checkbox > .woocommerce-terms-and-conditions-checkbox-text a {
  color: rgb(17, 17, 17);
  font-size: 16.8px;
  line-height: 24.36px;
}

.gp-main form.gp-checkout .place-order label.checkbox > abbr.required {
  display: none;
}