/* ==========================================================================
   PIGYFANTE · CORRECCIONES DE MÓVIL
   Añadido el 2026-09-06 tras el QA visual en iPhone (MIG-0130).

   Criterio: arreglar lo que se ve mal, no rediseñar. Todo va dentro de
   `max-width: 767px` salvo lo que dice explícitamente lo contrario, así que
   el escritorio —ya validado— no se toca.

   Se carga la última, después de woo-overrides.css.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 1 · CABECERA -------------------------------------------------------
     El logo se veía pequeño y el botón «Menu» suelto, sin aspecto de botón.
     El logo mide 369x112: se le da altura real y se centra el conjunto. */
  .site-header { padding-top: 8px; padding-bottom: 8px; }

  .site-branding, .site-header .site-branding { margin-bottom: 6px; text-align: center; }

  /* El logo ya NO necesita recorte: se subió el logotipo oficial sin la franja de
     texto legal (adjunto #17671, 369x69) y es el `custom_logo` del sitio. Recortar por
     CSS era un parche que dependía de que la hoja llegara; ahora es el propio asset.
     Aquí solo se le da tamaño. */
  .site-header .custom-logo-link { display: inline-block; line-height: 0; }
  .site-header .custom-logo { height: auto; max-height: 44px; width: auto; max-width: 78vw; }

  /* La etiqueta «Buscar por:» es para lectores de pantalla, no para verse. */
  .site-search .screen-reader-text,
  .site-header .widget_product_search label .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Buscador de la cabecera: que ocupe el ancho y se pueda tocar. */
  .site-header .widget_product_search .search-field {
    width: 100%; min-height: 44px; border-radius: var(--pf-radio-sm, 8px);
    border: 1px solid var(--pf-borde, #e8eaf3); padding: 10px 12px; font-size: 16px;
  }

  /* El botón «Menu», con aspecto de botón.

     OJO CON LA ESPECIFICIDAD. Storefront imprime su CSS del personalizador como un
     <style> INLINE en el head, DESPUÉS de esta hoja. Con igual especificidad gana él,
     y por eso el botón salía blanco y la barra inferior también. Se dobla la clase
     —`.x.x`— para subir especificidad sin recurrir a !important. */
  button.menu-toggle.menu-toggle, .site-header button.menu-toggle {
    display: block; width: 100%; min-height: 46px;
    background-color: var(--pf-azul, #1a2a6e); color: #fff; border: 0;
    border-radius: var(--pf-radio-sm, 8px);
    font-family: var(--pf-font, inherit); font-weight: 700; font-size: 15px;
    letter-spacing: .02em;
  }
  button.menu-toggle.menu-toggle::after,
  button.menu-toggle.menu-toggle::before,
  button.menu-toggle.menu-toggle span::before { background-color: #fff; }

  /* --- 2 · CABECERA DE ARCHIVO -------------------------------------------
     Título + contador + ordenar + paginación se comían la primera pantalla
     entera antes de que apareciera un solo producto. */
  .woocommerce-products-header { margin-bottom: 4px; padding-top: 0; }
  .woocommerce-products-header__title, .page-title {
    font-size: 20px; line-height: 1.2; margin: 0 0 6px;
  }
  .woocommerce-result-count { font-size: 12px; color: var(--pf-texto-suave, #646e9a); margin: 0 0 6px; }
  .woocommerce-ordering { margin: 0 0 8px; width: 100%; }
  .woocommerce-ordering select { width: 100%; min-height: 40px; font-size: 15px; }
  /* La paginación de arriba sobra: la de abajo basta, y en el móvil se comía media
     pantalla antes del primer producto.
     El selector anterior no casaba: entre la cabecera y la paginación hay avisos,
     ordenación y contador. Lo que la identifica sin ambigüedad es que va JUSTO antes
     de la lista de productos. */
  /* Storefront envuelve ordenación, contador y paginación en `div.storefront-sorting`,
     así que el <nav> no es hermano directo de la lista: por eso el selector anterior
     no casaba. Lo que identifica al bloque de arriba es el envoltorio que va justo
     antes de los productos. */
  .storefront-sorting:has(+ ul.products) .woocommerce-pagination { display: none; }
  .storefront-sorting { margin-bottom: 8px; }
  /* Y el resto de la cabecera, más apretado. */
  .woocommerce-result-count { margin: 0 0 4px; }
  .site-main > .woocommerce-notices-wrapper:empty { display: none; }

  /* --- 3 · REJILLA DE PRODUCTOS ------------------------------------------
     Dos columnas, tarjetas más bajas y botón proporcionado. */
  .site-main ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
  .site-main ul.products::before, .site-main ul.products::after { content: none; display: none; }
  .site-main ul.products li.product {
    width: 100% !important; margin: 0 !important; float: none !important; clear: none !important;
    display: flex; flex-direction: column;
  }
  /* IMÁGENES COMPLETAS.
     Las miniaturas de WooCommerce se generan recortadas a 1:1 (`crop=1`), así que un
     original de 1140x1520 acababa en 324x324 y el producto salía cortado. No es CSS:
     el fichero ya venía recortado.
     Por eso el bucle pasa a usar el tamaño `medium`, que SÍ conserva la proporción
     —lo hace un filtro en hooks-woocommerce.php— y aquí se encaja centrado dentro de
     un cuadrado uniforme, sin deformar y sin recortar. */
  .site-main ul.products li.product a img,
  .site-main ul.products li.product img {
    margin-bottom: 6px;
    border-radius: var(--pf-radio-sm, 8px);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: var(--pf-fondo-2, #fafbfe);
  }
  .site-main ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px; line-height: 1.3; margin: 0 0 4px; padding: 0; min-height: 3.9em;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .site-main ul.products li.product .price { font-size: 14px; margin: 0 0 8px; }
  /* BOTONES.
     «Seleccionar opciones» no cabe en una línea de 153px, así que envolvía a dos —y
     con `min-height:38px` fijo, la segunda línea quedaba cortada por abajo. El
     desbordamiento era VERTICAL, por eso `scrollWidth == clientWidth` no lo delataba.
     Ahora el botón crece con su texto. */
  .site-main ul.products li.product .button {
    /* Storefront le pone `margin: 12px` a los lados. Con `width:100%` encima, el botón
       empezaba 12px dentro y terminaba 11px FUERA de la tarjeta: por eso se veía
       cortado y no cuadraba con la imagen ni con el título, que van a ras (1px).
       Medido: tarjeta 155px, botón 153px, izq 13, der −11.
       Afecta igual a «Seleccionar opciones» y a «Agregar al carrito»: la caja es la
       misma para los dos. */
    margin-top: auto; margin-left: 0; margin-right: 0; width: 100%;

    /* CENTRADO QUE NO DEPENDE DE LA FUENTE.
       Antes el centrado salía de combinar `padding: 8px 6px` con `line-height: 15px`:
       geométricamente daba 11 arriba y 12 abajo, pero el resultado ÓPTICO depende de
       las métricas de Nunito y de cómo el navegador reparta el medio-interlineado, así
       que en pantalla no siempre se ve centrado.
       Ahora el reparto lo hace solo flexbox: relleno simétrico, interlineado neutro y
       nada que empuje el texto hacia un lado. */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 6px 8px;
    min-height: 40px; height: auto;
    font-size: 12px; line-height: 1;
    white-space: normal; overflow-wrap: anywhere; hyphens: auto;
    border-radius: var(--pf-radio-sm, 8px);
  }
  /* Si el texto envuelve a dos líneas, que sigan centradas entre sí. */
  .site-main ul.products li.product .button { align-content: center; }

  /* --- 4 · PAGINACIÓN -----------------------------------------------------
     Se desbordaba a lo ancho: 26 números en una fila. */
  .woocommerce-pagination { overflow: hidden; }
  .woocommerce-pagination ul.page-numbers {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    border: 0; margin: 12px 0 0; padding: 0;
  }
  .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
  .woocommerce-pagination ul.page-numbers li .page-numbers {
    min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--pf-borde, #e8eaf3); border-radius: var(--pf-radio-sm, 8px); padding: 0 10px;
  }
  .woocommerce-pagination ul.page-numbers li .page-numbers.current {
    background: var(--pf-azul, #1a2a6e); color: #fff; border-color: var(--pf-azul, #1a2a6e);
  }
  /* Solo actual, vecinos, extremos, «…», anterior y siguiente. El resto sobra
     en una pantalla de 390px. */
  .woocommerce-pagination ul.page-numbers li:not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2))
    > .page-numbers:not(.current):not(.prev):not(.next):not(.dots) { display: none; }

  /* --- 5 · BARRA INFERIOR FIJA -------------------------------------------
     Tapaba el final del contenido y los botones de compra. */
  /* El iPhone reserva una franja inferior (el indicador de inicio). Sin contarla, la
     barra queda por debajo y el contenido no llega a verse entero. */
  body.woocommerce-page, body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* MISMO PROBLEMA DE ESPECIFICIDAD, y aquí hizo daño de verdad: el <style> inline de
     Storefront pinta la barra de BLANCO. Como esta hoja ponía el texto en blanco
     confiando en un fondo azul que nunca llegó a aplicarse, la barra quedó con letras
     blancas sobre blanco: invisible salvo el contador del carrito, que se veía como un
     círculo negro suelto. Era exactamente lo que se reportó como «badge flotante».
     Se dobla la clase para ganar la especificidad. */
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar {
    background-color: var(--pf-azul, #1a2a6e); border-top: 0; color: #fff;
    box-shadow: 0 -2px 12px rgba(26,42,110,.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: auto;
  }
  /* Y no basta con el fondo de la barra: el CSS inline de Storefront pinta de BLANCO
     tambien cada <a> y el buscador, que tapan la barra por encima. Por eso el primer
     intento dejo la barra visualmente blanca aunque su background ya fuera azul. */
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li > a {
    background-color: transparent;
    /* 34px de padding + 11px de texto no caben en una barra de 47px: la etiqueta
       quedaba cortada y solo se veían los iconos. Se ajusta para que entren los dos. */
    color: #fff; font-size: 10px; line-height: 1.2; padding-top: 26px;
  }

  /* CUIDADO CON EL BUSCADOR APARCADO.
     Storefront lo tiene SIEMPRE en el DOM, aparcado en `bottom:-2em`, y solo lo sube
     a `bottom:100%` cuando el <li> recibe la clase `.active`. En origen es
     transparente, asi que aparcado no se nota.
     Mi primer intento le dio fondo blanco pensando en el estado abierto: el resultado
     fue un panel blanco de 94px visible SOBRE la barra, tapandola entera. Eso es lo
     que en el QA parecia «badge flotante sin barra».
     El fondo va SOLO en el estado abierto. */
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li.search .site-search {
    background-color: transparent;
  }
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li.search.active .site-search {
    background-color: var(--pf-blanco, #fff);
    box-shadow: 0 -4px 14px rgba(26,42,110,.16);
  }
  /* Y por si acaso: lo aparcado no se ve. */
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li.search:not(.active) .site-search {
    visibility: hidden; pointer-events: none;
  }
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li > a::before { color: #fff; }
  /* El «0» flotante del QA: el contador es `position:absolute` y su enlace no era
     un contenedor posicionado, así que se anclaba al primer ancestro que lo fuera y
     acababa suelto en mitad de la página. Se le da contexto al enlace.
     Además, el callback ya no imprime el contador cuando el carrito está vacío: un
     «0» no informa de nada. */
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li.cart > a {
    position: relative; display: block;
  }
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li.cart .count {
    background-color: var(--pf-rosa, #ff5c8a); color: #fff;
    border: 2px solid var(--pf-azul, #1a2a6e);
    top: 2px; right: auto; left: 50%; margin-left: 4px;
    min-width: 20px; height: 20px; line-height: 16px; border-radius: 10px;
    font-size: 11px; font-weight: 700; text-align: center;
  }
  /* Cinturón y tirantes: si algún día vuelve a imprimirse un 0, no se enseña. */
  .storefront-handheld-footer-bar.storefront-handheld-footer-bar ul li.cart .count:empty { display: none; }

  /* La barra tiene z-index 9999 y el lightbox de PhotoSwipe 1500: con la ficha
     ampliada, la barra se dibujaba encima del modal. Se oculta mientras el
     lightbox está abierto y vuelve sola al cerrarlo.

     Sin JS nuevo: PhotoSwipe ya marca su propio contenedor con `pswp--open`
     mientras está visible. Se lee ese estado con `:has()`, así que si el
     navegador no lo soporta la barra se queda como hoy en vez de desaparecer
     por error. */
  body:has(.pswp.pswp--open) .storefront-handheld-footer-bar.storefront-handheld-footer-bar {
    display: none;
  }

  /* --- 6 · NAVEGACIÓN DE CATEGORÍAS PLEGABLE ------------------------------
     Era una lista plana larguísima: 7 familias con sus hijos, más de 30 enlaces
     seguidos. Cada rama se pliega.

     El submenú SOLO se oculta si existe el botón que lo abre (`:has()`). Así, si
     el PHP o el JS fallaran, las ramas se quedan abiertas —como hoy— en vez de
     quedar inalcanzables. Degrada al estado anterior, no a uno peor. */
  .handheld-navigation .menu-item-has-children > .pf-sub-toggle {
    position: absolute; right: 0; top: 0; width: 46px; height: 46px;
    background: none; border: 0; color: inherit; font-size: 18px; line-height: 1;
    text-indent: -9999px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .handheld-navigation .menu-item-has-children { position: relative; }
  .handheld-navigation .menu-item-has-children:has(> .pf-sub-toggle) > .sub-menu { display: none; }
  .handheld-navigation .menu-item-has-children.pf-sub-abierto > .sub-menu { display: block; }
  .handheld-navigation .menu-item-has-children > .pf-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }
  .handheld-navigation a { min-height: 44px; display: flex; align-items: center; padding-right: 52px; }
  /* Storefront pinta su propia flecha en las ramas: con la nuestra se veían dos
     superpuestas. Se deja solo la del botón, que es la que responde al toque. */
  /* UNA SOLA FLECHA POR RAMA. Storefront pinta la suya en el <li> y en el <a>; con la
     del botón salían tres símbolos superpuestos. Se apagan las suyas, en el <li>
     también, y queda solo el chevron del botón, que es el que responde al toque. */
  .handheld-navigation .menu-item-has-children > a::after,
  .handheld-navigation .handheld-navigation .menu-item-has-children > a::before,
  .handheld-navigation .menu-item-has-children::after,
  .handheld-navigation .menu-item-has-children::before,
  .handheld-navigation ul.menu > li.menu-item-has-children::after { content: none !important; display: none !important; }
  .handheld-navigation .pf-sub-toggle::after { content: '\25BE'; text-indent: 0; float: left; width: 100%; text-align: center; }
  .handheld-navigation .pf-sub-toggle[aria-expanded="true"]::after { content: '\25B4'; }
  /* El botón ya no rota: cambia el glifo. Rotar Y cambiar daba una flecha invertida. */
  .handheld-navigation .menu-item-has-children > .pf-sub-toggle[aria-expanded="true"] { transform: none; }

  /* --- 6b · ZOOM DE LA FICHA ---------------------------------------------
     La lupa de WooCommerce inyecta un <img class="zoomImg"> posicionado que se
     sale de su caja. No provocaba barra horizontal —el contenedor recorta— pero
     medirlo saliéndose es motivo suficiente para atarlo. En un móvil no aporta
     nada: no hay puntero con el que apuntar. */
  /* IMAGEN PRINCIPAL COMPLETA.
     `woo-overrides.css` fuerza `aspect-ratio: 1/1` + `overflow:hidden` en la galería
     para reservar el hueco y evitar el salto de maquetación al cargar. Eso está bien,
     pero recorta: una imagen vertical de 1205x1501 se dibuja a 322x402 dentro de una
     caja de 322x322 y **pierde 80px por abajo**.
     Se conserva la caja reservada —no se reintroduce el salto— y se mete la imagen
     DENTRO con `contain`: completa, centrada, sin deformar y con margen blanco cuando
     la proporción lo pida. */
  .single-product div.product .woocommerce-product-gallery__image,
  .single-product div.product .woocommerce-product-gallery .flex-viewport,
  .single-product div.product .woocommerce-product-gallery__wrapper {
    height: 100%;
  }
  .single-product div.product .woocommerce-product-gallery__image img,
  .single-product div.product .woocommerce-product-gallery .flex-viewport img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    background: var(--pf-blanco, #fff);
  }
  /* El zoom sigue funcionando: solo se oculta la capa ampliada, que en un móvil sin
     puntero no aporta nada y era lo único que se salía de su caja. */
  .woocommerce-product-gallery img.zoomImg { display: none !important; }

  /* --- 6c · WIDGET DE CATEGORÍAS ------------------------------------------
     85 enlaces y 2.567 px de alto en la barra lateral, justo antes del filtro de
     precio: una segunda navegación entera, duplicando la del menú.
     Se pliega. NO se borra ninguna categoría, ni cambia jerarquía, slug ni SEO:
     solo deja de estar desplegada por omisión en móvil.
     Igual que el menú, solo se oculta si existe el botón que lo abre: si el JS
     fallara, la lista se queda visible como hoy. */
  .widget_product_categories:has(> .pf-cat-toggle) > ul { display: none; }
  .widget_product_categories.pf-cat-abierto > ul { display: block; }
  .pf-cat-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 46px; padding: 0 14px; margin: 0 0 10px;
    background: var(--pf-azul-claro, #e8eaf3); color: var(--pf-azul, #1a2a6e);
    border: 1px solid var(--pf-borde, #e8eaf3); border-radius: var(--pf-radio-sm, 8px);
    font-family: var(--pf-font, inherit); font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .pf-cat-toggle::after { content: '▾'; font-size: 16px; }
  .pf-cat-toggle[aria-expanded="true"]::after { content: '▴'; }
  /* Aunque esté abierta, no puede volver a medir 2.500 px. */
  .widget_product_categories.pf-cat-abierto > ul { max-height: 60vh; overflow-y: auto; }
  /* El filtro de precio se queda tal cual: no se toca. */

  /* --- 6d · TEXTO SEO DE CATEGORÍA -----------------------------------------
     199 px de descripción empujaban el primer producto hasta y=519. NO se toca el
     contenido: sigue entero en el DOM, indexable. Solo se muestra un extracto y el
     resto se despliega con «Leer más». Igual que el resto: solo se recorta si el
     botón existe, así que sin JS se ve completo como hoy. */
  .term-description:has(+ .pf-leer-mas) { max-height: 4.6em; overflow: hidden; position: relative; }
  .term-description.pf-abierto { max-height: none; }
  .pf-leer-mas {
    display: inline-block; margin: 2px 0 12px; padding: 6px 12px;
    background: none; border: 0; color: var(--pf-azul, #1a2a6e);
    font-family: var(--pf-font, inherit); font-weight: 700; font-size: 13px;
    text-decoration: underline; cursor: pointer;
  }

  /* --- 6e · FICHA DE PRODUCTO ----------------------------------------------
     Solo presentación: ni un dato cambia. */
  .single-product .product_title { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
  .single-product .woocommerce-breadcrumb {
    font-size: 11px; line-height: 1.3; margin: 0 0 8px; color: var(--pf-texto-suave, #646e9a);
  }
  /* «SKU: N/D» no informa de nada. Se oculta el envoltorio cuando WooCommerce marca
     que no hay SKU; el dato no se toca. */
  .single-product .product_meta .sku_wrapper:has(.sku:empty),
  .single-product .product_meta .sku_wrapper.pf-sin-sku { display: none; }

  /* --- 7 · SIN DESBORDE HORIZONTAL, PASE LO QUE PASE ---------------------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  .col-full { padding-left: 14px; padding-right: 14px; }
  img, table, pre, iframe { max-width: 100%; }
}

/* --- 8 · PIE ------------------------------------------------------------
   El crédito de Storefront se quita por filtro en PHP. Esto solo ordena lo
   que queda, en todos los tamaños. */
.site-footer .site-info { font-size: 12px; color: var(--pf-texto-suave, #646e9a); }
.site-footer .site-info a { color: inherit; text-decoration: underline; }