/* Componentes compartidos — Pigyfante 2.0 */

/* --- Tarjeta de producto -------------------------------------------------- */
.pf-card{
  background:var(--pf-blanco); border:1px solid var(--pf-borde);
  border-radius:var(--pf-radio); overflow:hidden;
  transition:box-shadow var(--pf-trans), transform var(--pf-trans);
  display:flex; flex-direction:column; height:100%;
}
.pf-card:hover{ box-shadow:var(--pf-sombra-md); transform:translateY(-2px); }
.pf-card__img{ aspect-ratio:1/1; object-fit:cover; width:100%; display:block; background:var(--pf-fondo); }
.pf-card__cuerpo{ padding:var(--gut); display:flex; flex-direction:column; gap:.4em; flex:1; }
.pf-card__titulo{ font-size:var(--body); font-weight:700; color:var(--pf-azul); margin:0; }
.pf-card__precio{ font-size:calc(var(--body) * 1.15); font-weight:800; color:var(--pf-azul); }
.pf-card__badge{
  background:var(--pf-rosa); color:#fff; font-size:.72em; font-weight:800;
  padding:.25em .6em; border-radius:999px; align-self:flex-start;
}

/* --- Rejilla de productos ------------------------------------------------- */
.pf-grid{ display:grid; gap:var(--gut); grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){  .pf-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .pf-grid{ grid-template-columns:repeat(4,1fr); } }

/* --- Cabecera ------------------------------------------------------------- */
.pf-header{
  background:var(--pf-blanco); border-bottom:1px solid var(--pf-borde);
  position:sticky; top:0; z-index:100;
}
.pf-header__barra{ display:flex; align-items:center; gap:var(--gut); padding-block:.7em; }
.pf-header__logo img{ max-height:44px; width:auto; display:block; }
.pf-header__acciones{ margin-left:auto; display:flex; align-items:center; gap:.9em; }
.pf-header__cart{ position:relative; }
.pf-header__cart-n{
  position:absolute; top:-6px; right:-8px; background:var(--pf-rosa); color:#fff;
  font-size:.68em; font-weight:800; min-width:18px; height:18px; border-radius:999px;
  display:grid; place-items:center; padding-inline:4px;
}

/* --- Pie ------------------------------------------------------------------ */
.pf-footer{ background:var(--pf-azul); color:var(--pf-azul-claro); padding-block:calc(var(--gut)*2); margin-top:calc(var(--gut)*3); }
.pf-footer a{ color:var(--pf-azul-claro); }
.pf-footer a:hover{ color:var(--pf-rosa); }
.pf-footer__cols{ display:grid; gap:calc(var(--gut)*1.5); grid-template-columns:1fr; }
@media (min-width:768px){ .pf-footer__cols{ grid-template-columns:repeat(4,1fr); } }

/* --- Migas ---------------------------------------------------------------- */
.pf-breadcrumb{ font-size:.85em; color:var(--pf-texto-suave); padding-block:.8em; }

/* --- Avisos --------------------------------------------------------------- */
.pf-aviso{ border-radius:var(--pf-radio-sm); padding:.9em 1.1em; border-left:4px solid; }
.pf-aviso--ok{ background:var(--pf-verde-claro); border-color:var(--pf-verde); }
.pf-aviso--error{ background:#fdeef3; border-color:var(--pf-error); }

/* ==========================================================================
   NAVEGACIÓN PRINCIPAL — corrección del QA visual del 2026-08-31
   El menú de 7 familias se partía en dos líneas a 1440px. Se compacta el
   espaciado y se permite que reduzca tamaño antes de romper.
   ========================================================================== */
.storefront-primary-navigation,
.main-navigation{ background:transparent; }

.main-navigation ul.menu,
.main-navigation ul.nav-menu{
  display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(.4em, 1.4vw, 1.4em);
  margin:0; padding:0;
}
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a{
  padding:.7em .2em;
  font-weight:700;
  font-size:clamp(13px, 1.05vw, 16px);
  white-space:nowrap;
  color:var(--pf-azul);
}
.main-navigation ul.menu > li > a:hover{ color:var(--pf-rosa); }

/* Submenús: caja limpia, no una lista pegada al borde */
.main-navigation ul ul.sub-menu{
  background:var(--pf-blanco);
  border:1px solid var(--pf-borde);
  border-radius:var(--pf-radio-sm);
  box-shadow:var(--pf-sombra-md);
  padding:.4em 0; min-width:230px;
}
.main-navigation ul ul.sub-menu a{
  padding:.6em 1em; font-weight:600; color:var(--pf-texto);
}
.main-navigation ul ul.sub-menu a:hover{
  background:var(--pf-fondo); color:var(--pf-rosa);
}

/* Foco visible: navegación por teclado */
.main-navigation a:focus-visible{
  outline:2px solid var(--pf-rosa); outline-offset:2px; border-radius:4px;
}

/* En móvil el menú es vertical y con área táctil cómoda */
@media (max-width:767px){
  .main-navigation ul.menu, .main-navigation ul.nav-menu{
    flex-wrap:wrap; flex-direction:column; align-items:stretch;
  }
  .main-navigation ul.menu > li > a{ padding:.9em .6em; min-height:48px; display:flex; align-items:center; }
}

/* Logo: alto contenido y nítido en pantallas retina */
.custom-logo-link img, .site-branding img, .site-logo-link img{
  max-height:64px; width:auto; height:auto; image-rendering:auto;
}
@media (max-width:767px){
  .custom-logo-link img, .site-branding img{ max-height:44px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Usabilidad táctil — medido, no supuesto (QA móvil 2026-08-31)
   El flujo de compra ya estaba limpio: 0 controles pequeños en carrito,
   checkout y añadir al carrito. Lo que sí quedaba corto era navegar el
   catálogo y leer el precio.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Paginación: eran 42×30 px. Recorrer el catálogo desde el móvil es parte
     del flujo comercial, y 30 px de alto se falla con el pulgar. */
  .woocommerce-pagination .page-numbers,
  nav.woocommerce-pagination a,
  .page-numbers a,
  .page-numbers span.current {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
  }

  /* Desplegables del menú: eran 48×40 px. */
  .menu-toggle,
  button.dropdown-toggle,
  .storefront-primary-navigation button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* El símbolo de moneda y el guion de los rangos heredaban el tamaño de la
   nota de IVA y se veían a 10,5 px. El precio es dato crítico: se lee entero
   al mismo tamaño. La nota «IVA incluido» sí puede ser secundaria. */
.woocommerce-Price-amount,
.woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.price del, .price ins, .price > span {
  font-size: inherit;
}
.price .pf-iva,
small.pf-iva {
  font-size: 0.78em;
  opacity: .85;
}