/* Shared visual corrections for non-home runtime surfaces. */

body:not(.home) .gp-site-header .gp-header__inner,
body:not(.home) .gp-site-header .gp-primary-nav a,
body:not(.home) .gp-site-header .gp-header-action,
body:not(.home) .gp-menu-toggle {
  color: var(--gp-white);
}

body:not(.home) .gp-site-header .gp-brand__image {
  filter: grayscale(1) invert(1) brightness(2);
}

body:not(.home) .gp-footer-brand__logo {
  display: block;
  height: auto;
  max-width: min(100%, 16rem);
  object-fit: contain;
  width: 100%;
}

/*
 * La preview aprobada abre la ficha con el contenedor a 40px y el breadcrumb
 * visible (67px + 21,6px de margen). Ocultarlo subía la galería 89px y
 * eliminaba una ruta de navegación que además es necesaria para SEO.
 */
.gp-preview-product-page.gp-single-product > .gp-container {
  margin-top: 1rem;
  width: min(84rem, calc(100% - 48px));
}

.gp-preview-product-page .gp-product-breadcrumb {
  margin-bottom: 1.35rem;
}

/*
 * WooCommerce añade un trigger de zoom propio sobre la galería. La preview
 * aprobada no expone ese control: la navegación visual se resuelve con la
 * imagen principal y las miniaturas. Ocultarlo no cambia imágenes, enlaces,
 * inventario ni comportamiento comercial; solo elimina UI ajena al diseño.
 */
.gp-editorial-pilot-active .woocommerce-product-gallery__trigger {
  display: none !important;
}

/*
 * La preview envuelve el panel de compra en `.gp-preview-purchase-states`, con
 * `margin: 1rem 0`. El runtime coloca `.gp-product-purchase` directamente en
 * el summary, por lo que perdía esos 32px reales y adelantaba todo el cuerpo de
 * la ficha en móvil. Reproducimos aquí exactamente el espacio del wrapper sin
 * alterar el formulario, el stock, el precio ni la comprabilidad.
 *
 * El precio aprobado no muestra un divisor propio antes del botón. Conservamos
 * los 0.9rem que forman parte del ritmo vertical del panel, pero sin dibujar la
 * línea adicional que no aparece en la preview.
 */
.gp-editorial-pilot-active .gp-single-product__summary > .gp-product-purchase {
  margin: 1rem 0;
}

.gp-editorial-pilot-active .gp-single-product__summary > .gp-product-purchase > .price {
  border-bottom: 0;
  padding-bottom: 0.9rem;
}

/*
 * WooCommerce envuelve el carrito en un `div.woocommerce` que se interponía
 * entre `[data-gp-commerce-state-view="filled"]` y sus columnas. Duplicar allí
 * la rejilla anidaba dos grids: el carrito completo caía en la primera columna
 * del tema, la segunda quedaba vacía y la tabla se comprimía hasta romper el
 * nombre del producto en vertical. Con `display: contents` el envoltorio deja
 * pasar a sus hijos a la rejilla que el tema ya define en woocommerce.css.
 */
.gp-runtime-filled-cart > .woocommerce {
  display: contents;
}

.gp-runtime-filled-cart > .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.gp-runtime-filled-cart > .woocommerce > .woocommerce-cart-form {
  grid-column: 1;
}

.gp-runtime-filled-cart > .woocommerce > .cart-collaterals {
  grid-column: 2;
  margin-top: 0;
  position: sticky;
  top: 7rem;
}

.gp-preview-commerce-page #customer_login {
  align-items: stretch !important;
  display: grid !important;
  gap: clamp(1rem, 2.2vw, 2rem) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Account header uses the same neutral eyebrow as the approved preview. */
.gp-runtime-commerce-page[data-gp-commerce-step="account"] .gp-preview-commerce-header > .gp-eyebrow {
  color: var(--gp-muted);
}

/*
 * WooCommerce limpia los floats de `.u-columns` con un clearfix de
 * `::before`/`::after`. Al convertir el contenedor en rejilla, esos pseudos
 * pasan a ser items y ocupaban la primera y la última celda: el acceso caía en
 * la columna derecha y el registro bajaba a otra fila.
 */
.gp-preview-commerce-page #customer_login::before,
.gp-preview-commerce-page #customer_login::after {
  content: none;
}

.gp-preview-commerce-page #customer_login .u-column1,
.gp-preview-commerce-page #customer_login .u-column2 {
  float: none !important;
  margin: 0 !important;
  min-width: 0;
  padding: 0;
  width: auto !important;
}

.gp-preview-commerce-page #customer_login .u-column1 {
  background: transparent;
  border: 0;
}

.gp-preview-commerce-page #customer_login .u-column2 {
  background: transparent;
  border: 0;
  color: #fff;
}

/*
 * Los títulos nativos siguen existiendo en el HTML de WooCommerce, pero la
 * cabecera visible vive ahora dentro del propio formulario mediante hooks
 * oficiales. Así podemos reproducir 01/02 + eyebrow sin forkar form-login.php.
 */
.gp-preview-commerce-page #customer_login .u-column1 > h2,
.gp-preview-commerce-page #customer_login .u-column2 > h2 {
  display: none !important;
}

.gp-preview-commerce-page #customer_login .u-column1 > form,
.gp-preview-commerce-page #customer_login .u-column2 > form {
  border: 0 !important;
  margin: 0 !important;
  min-height: 100%;
  padding: clamp(1.5rem, 3vw, 2.6rem) !important;
}

.gp-preview-commerce-page #customer_login .u-column1 > form {
  background: #fff !important;
}

.gp-preview-commerce-page #customer_login .u-column2 > form {
  background: #111 !important;
}

.gp-preview-commerce-page #customer_login .u-column2 .gp-account-card__intro h2,
.gp-preview-commerce-page #customer_login .u-column2 p,
.gp-preview-commerce-page #customer_login .u-column2 label,
.gp-preview-commerce-page #customer_login .u-column2 .woocommerce-privacy-policy-text {
  color: #fff !important;
}

.gp-preview-commerce-page #customer_login .u-column2 .gp-account-card__intro .gp-eyebrow {
  color: var(--gp-volt) !important;
}

.gp-preview-commerce-page #customer_login .u-column1 .button,
.gp-preview-commerce-page #customer_login .u-column2 .button {
  min-height: 3rem;
  width: 100%;
}

.gp-preview-commerce-page #customer_login .u-column2 .button {
  background: var(--gp-volt) !important;
  color: var(--gp-black) !important;
}

/*
 * El template nativo coloca "He olvidado mi contraseña" después de la fila
 * que contiene Recordarme + botón. Convertimos solo el formulario de acceso en
 * una rejilla de presentación: los campos, nonce y acciones siguen siendo los
 * nativos de WooCommerce, pero Recordarme y el enlace comparten la misma fila
 * como en la preview aprobada.
 */
.gp-preview-commerce-page #customer_login .woocommerce-form-login {
  column-gap: 1rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
}

.gp-preview-commerce-page #customer_login .woocommerce-form-login > .gp-account-card__intro,
.gp-preview-commerce-page #customer_login .woocommerce-form-login > .gp-account-card__lead,
.gp-preview-commerce-page #customer_login .woocommerce-form-login > .form-row-wide {
  grid-column: 1 / -1;
}

.gp-preview-commerce-page #customer_login .woocommerce-form-login > .form-row:not(.form-row-wide) {
  display: contents;
}

.gp-preview-commerce-page #customer_login .woocommerce-form-login__rememberme {
  align-self: center;
  display: inline-flex;
  gap: 0.4rem;
  grid-column: 1;
  margin: 0 0 1.3rem;
  order: 10;
}

.gp-preview-commerce-page #customer_login .woocommerce-form-login > .woocommerce-LostPassword {
  align-self: center;
  grid-column: 2;
  justify-self: end;
  margin: 0 0 1.3rem;
  order: 10;
  white-space: nowrap;
}

.gp-preview-commerce-page #customer_login .woocommerce-form-login__submit {
  grid-column: 1 / -1;
  margin: 0 !important;
  order: 20;
  width: 100%;
}

.gp-contact-page .gp-contact-form .gp-form-grid {
  grid-template-columns: 1fr;
}

.gp-contact-page .gp-contact-details {
  align-self: stretch;
}

@media (max-width: 820px) {
  .gp-runtime-filled-cart > .woocommerce > .woocommerce-cart-form,
  .gp-runtime-filled-cart > .woocommerce > .cart-collaterals {
    grid-column: 1;
  }

  .gp-runtime-filled-cart > .woocommerce > .cart-collaterals {
    position: static;
  }

  /*
   * La preview móvil ya aporta la separación natural tras el header de cuenta.
   * El margen adicional de 1.5rem desplazaba ambas tarjetas ~24px hacia abajo
   * y aumentaba artificialmente la altura total del flujo.
   */
  .gp-preview-commerce-page #customer_login {
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
  }

  /*
   * Con generación automática de contraseña, WooCommerce 10.9.4 imprime un
   * `<p>` sin clase justo después del campo de email. Es la misma ayuda que la
   * preview representa como `.gp-account-card__help`; igualamos solo su
   * tipografía y ritmo, sin cambiar contenido, registro ni contraseña.
   */
  .gp-preview-commerce-page #customer_login .woocommerce-form-register > .form-row-wide + p:not([class]) {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.88rem;
    line-height: 1.6;
    margin: -0.15rem 0 1rem;
  }
}

@media (max-width: 640px) {
  body:not(.home) .gp-footer-brand__logo {
    max-width: min(100%, 13rem);
  }

  .gp-preview-product-page.gp-single-product > .gp-container {
    width: min(84rem, calc(100% - 24px));
  }
}