/* ==========================================================================
   WOOCOMMERCE — Pigyfante 2.0
   ARQUITECTURA DETECTADA 2026-08-31 vía REST API del staging:
     · Carrito  (ID 7) → BLOCKS   wp-block-woocommerce-cart
     · Checkout (ID 8) → BLOCKS   wp-block-woocommerce-checkout
     · Mi Cuenta(ID 9) → CLASSIC  <div class="woocommerce">
     · Tienda   (ID 6) → plantilla de archivo
   Por eso este archivo mezcla selectores de Blocks y clásicos, cada uno donde toca.
   La versión anterior, escrita solo para marcado clásico, está en
   _superado/woo-overrides-CLASSIC.css
   Prioridad de negocio: CHECKOUT > CARRITO > CATEGORÍA > MI CUENTA
   ========================================================================== */

/* ==========================================================================
   1. CHECKOUT — BLOCKS
   ========================================================================== */

.wp-block-woocommerce-checkout{ --wc-blocks-font-family: var(--pf-font); }

/* Menos fugas durante el pago */
.woocommerce-checkout .storefront-handheld-footer-bar,
.woocommerce-checkout .pf-header__acciones{ display:none; }

/* Tipografía y color del bloque completo */
.wc-block-checkout,
.wc-block-components-form,
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select{
  font-family:var(--pf-font);
  color:var(--pf-texto);
}

/* Títulos de cada paso */
.wc-block-components-title,
.wc-block-components-checkout-step__title{
  font-family:var(--pf-font); font-weight:800; color:var(--pf-azul);
}
.wc-block-components-checkout-step__description{ color:var(--pf-texto-suave); }

/* Campos */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-country-input select,
.wc-block-components-state-input select{
  border:1px solid var(--pf-borde); border-radius:var(--pf-radio-sm);
  background:var(--pf-blanco); padding:.75em .9em;
}
.wc-block-components-text-input input:focus,
.wc-block-components-country-input select:focus{
  outline:2px solid var(--pf-rosa); outline-offset:1px; border-color:var(--pf-rosa);
}
/* iOS hace zoom si el input mide menos de 16px */
@media (max-width:767px){
  .wc-block-components-text-input input,
  .wc-block-components-country-input select,
  .wc-block-components-state-input select{ font-size:16px; }
}

/* Errores: visibles y comprensibles */
.wc-block-components-validation-error{ color:var(--pf-error); font-weight:700; }
.wc-block-components-text-input.has-error input{ border-color:var(--pf-error); border-width:2px; }
.wc-block-components-notice-banner.is-error{
  background:#fdeef3; border-color:var(--pf-error); border-radius:var(--pf-radio-sm);
}
.wc-block-components-notice-banner.is-success{
  background:var(--pf-verde-claro); border-color:var(--pf-verde);
}

/* Resumen del pedido: caja de confianza, fija en escritorio */
.wp-block-woocommerce-checkout-order-summary-block{
  background:var(--pf-blanco); border:1px solid var(--pf-borde);
  border-radius:var(--pf-radio); box-shadow:var(--pf-sombra);
}
@media (min-width:1024px){
  .wc-block-checkout__sidebar{ position:sticky; top:88px; }
}
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount{
  font-size:1.35em; font-weight:800; color:var(--pf-azul);
}

/* Métodos de pago */
.wc-block-components-radio-control__option{
  border:1px solid var(--pf-borde); border-radius:var(--pf-radio-sm);
  padding:.9em; margin-bottom:.6em;
}
.wc-block-components-radio-control__option--checked-option-highlighted{
  border-color:var(--pf-rosa); box-shadow:0 0 0 1px var(--pf-rosa);
}

/* Botón de pago: grande, y fijo abajo en móvil */
.wc-block-components-checkout-place-order-button{
  background:var(--pf-rosa); color:#fff; font-weight:800;
  border-radius:var(--pf-radio-sm); font-size:1.1em; padding:1em; width:100%;
}
.wc-block-components-checkout-place-order-button:hover{ background:var(--pf-rosa-osc); }
@media (max-width:767px){
  .wc-block-checkout__actions{
    position:sticky; bottom:0; z-index:50; background:var(--pf-blanco);
    padding:var(--gut) 0; box-shadow:0 -4px 16px rgba(26,42,110,.16);
  }
}

/* Una sola columna en móvil, sin excepción */
@media (max-width:767px){
  .wc-block-checkout__main, .wc-block-checkout__sidebar{ width:100%; float:none; }
  .wc-block-components-address-form .wc-block-components-text-input{ width:100%; }
}

/* Señales de confianza (bloque propio, ver inc/hooks-blocks.php) */
.pf-confianza{
  display:flex; flex-wrap:wrap; gap:.9em; padding:var(--gut) 0;
  font-size:.85em; color:var(--pf-texto-suave);
}
.pf-confianza span{ display:inline-flex; align-items:center; gap:.4em; }

/* ==========================================================================
   2. CARRITO — BLOCKS
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart-items__header{
  color:var(--pf-texto-suave); border-bottom:1px solid var(--pf-borde);
}
.wc-block-cart-item__image img{ border-radius:var(--pf-radio-sm); }
.wc-block-components-product-name{ color:var(--pf-azul); font-weight:700; }
.wp-block-woocommerce-cart-order-summary-block{
  background:var(--pf-fondo); border-radius:var(--pf-radio); padding:var(--gut);
}
.wc-block-cart__submit-button{
  background:var(--pf-rosa); color:#fff; font-weight:800;
  border-radius:var(--pf-radio-sm); width:100%; text-align:center;
}
.wc-block-cart__submit-button:hover{ background:var(--pf-rosa-osc); }
/* Carrito vacío: salida clara, no un callejón */
.wp-block-woocommerce-empty-cart-block .wc-block-components-button{ background:var(--pf-azul); }

/* ==========================================================================
   3. CATEGORÍA / ARCHIVO — plantilla clásica de WooCommerce
   ========================================================================== */

.woocommerce ul.products{
  display:grid; gap:var(--gut); grid-template-columns:repeat(2,1fr); margin:0; padding:0;
}
@media (min-width:768px){  .woocommerce ul.products{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .woocommerce ul.products{ grid-template-columns:repeat(4,1fr); } }
.woocommerce ul.products li.product{
  width:100%!important; margin:0!important; float:none!important;
  background:var(--pf-blanco); border:1px solid var(--pf-borde);
  border-radius:var(--pf-radio); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--pf-trans), transform var(--pf-trans);
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--pf-sombra-md); transform:translateY(-2px); }
.woocommerce ul.products li.product img{ aspect-ratio:1/1; object-fit:cover; margin:0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:var(--body); font-weight:700; padding:var(--gut) var(--gut) .2em; color:var(--pf-azul);
}
.woocommerce ul.products li.product .price{ padding:0 var(--gut); font-weight:800; color:var(--pf-azul); }
.woocommerce ul.products li.product .button{ margin:var(--gut); margin-top:auto; text-align:center; }

.woocommerce nav.woocommerce-pagination ul{ border:0; gap:.35em; display:flex; justify-content:center; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--pf-borde); border-radius:var(--pf-radio-sm); min-width:42px; padding:.5em;
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--pf-azul); color:#fff; }
.woocommerce-info{ background:var(--pf-azul-claro); border-left:4px solid var(--pf-azul); border-radius:var(--pf-radio-sm); }

/* ==========================================================================
   4. MI CUENTA — CLASSIC (confirmado: <div class="woocommerce">)
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--pf-borde); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:.8em .6em; font-weight:700; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--pf-rosa); }
.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--pf-blanco); border:1px solid var(--pf-borde);
  border-radius:var(--pf-radio); padding:var(--gut);
}
@media (max-width:767px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ width:100%; float:none; }
  .woocommerce-account .woocommerce-MyAccount-navigation{ margin-bottom:var(--gut); }
}

/* ==========================================================================
   5. CONTENCIÓN DE ANCHOS — 2026-08-31
   Las capturas headless sugerían que la galería desbordaba en móvil.
   MEDIDO DESPUÉS con Playwright (navegador completo, networkidle) en 21
   combinaciones de página y tamaño: scrollWidth == innerWidth en TODAS.
   No había desbordamiento: era un artefacto de la captura, porque FlexSlider
   ajusta las anchuras por JS y la galería arranca con opacity:0.
   Se retira el `overflow-x:hidden` global —ocultar no es corregir— y se
   conservan solo las reglas legítimas de contención.
   ========================================================================== */

/* Galería de producto: el slider de WooCommerce no se contiene solo en móvil */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image{
  max-width:100%; box-sizing:border-box;
}
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img{
  max-width:100%; height:auto; display:block;
}
.woocommerce-product-gallery .flex-viewport{ max-width:100%; overflow:hidden; }
.flex-control-thumbs{ max-width:100%; padding-left:0; }
.flex-control-thumbs li{ max-width:22%; }

/* Rejilla de producto: en móvil, imagen y datos apilados y contenidos */
@media (max-width:767px){
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary{ width:100%; float:none; margin:0 0 var(--gut); }
  .single-product div.product{ display:block; }
}

/* Ninguna imagen del contenido puede salirse de su caja */
.entry-content img, .woocommerce img, .pf-card__img{ max-width:100%; height:auto; }

/* Títulos largos: que partan en vez de ensanchar la página */
h1, h2, .woocommerce-loop-product__title, .product_title{
  overflow-wrap:anywhere; word-break:break-word;
}

/* Tablas anchas (atributos, pedidos): scroll dentro de su caja, no en la página */
.woocommerce table.shop_attributes,
.woocommerce table.shop_table{ display:block; overflow-x:auto; max-width:100%; }
@media (min-width:768px){
  .woocommerce table.shop_attributes,
  .woocommerce table.shop_table{ display:table; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Estabilidad de la ficha de producto en móvil (medido 2026-09-01)
   La galería de WooCommerce arranca sin dimensiones y FlexSlider se las da
   por JavaScript. Hasta ese momento el bloque de precio y «añadir al
   carrito» ocupa la parte alta de la pantalla y luego cae 662 px: CLS 0,215
   en la página donde el cliente decide comprar.
   Reservar el hueco con una proporción fija lo elimina sin tocar el diseño.
   ───────────────────────────────────────────────────────────────────────── */
.single-product div.product .woocommerce-product-gallery {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery .flex-viewport {
  aspect-ratio: 1 / 1;
}
.single-product div.product .woocommerce-product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Una vez inicializada, la galería manda: se libera la proporción para no
   recortar imágenes que no sean cuadradas. */
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--with-images.flexslider-ready {
  aspect-ratio: auto;
  overflow: visible;
}