/* ==================================================================
   EL MURO
   La tienda sin portada. Se entra directo al catálogo.

   Regla de oro: en la pantalla NO hay nada que no sea estampación.
   Ni nombre, ni precio, ni botón. Eso aparece al posarse o al tocar.
   Un nombre y un precio bajo cada miniatura convierten 8.621 gráficas
   en una hoja de cálculo, que es exactamente lo que se quiere evitar.
   ================================================================== */

.wcb-muro-raiz{background:var(--h)}

/* ==================================================================
   LA BARRA DE MANDO Y EL PANEL DE FILTROS
   Es lo que convierte 8.621 en 40. Prioridad absoluta sobre la
   estética: tiene que entenderse sin leer nada.
   ================================================================== */
/* WordPress pasa la salida del atajo por wpautop, que envuelve en <p>
   todo lo que sea de línea —aquí, el <label> del orden—. Ese <p> pasa a
   ser el hijo del flex, así que el `order` que yo escribía sobre el label
   NO se aplicaba: en el móvil «Lo último» salía el primero, antes del
   botón de filtrar. `display:contents` hace desaparecer el envoltorio de
   la maquetación y devuelve a sus hijos a la rejilla. */
   Se excluyen POR NOMBRE los <p> que son míos (.wcb-cuenta-total lo es).
   Intenté distinguirlos con :not([class]) y no vale: wpautop deja
   `<p class="">` —el atributo EXISTE, vacío—, así que el selector no
   casaba con el suyo y sí con el mío, y el recuento desapareció. */
.wcb-mando > p:not(.wcb-cuenta-total),
.wcb-panel > p,
.wcb-panel-pie > p,
.wcb-muro-fin > p{display:contents}

.wcb-mando{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem var(--gut);
  background:var(--t);border-bottom:1px solid var(--inv-linea);
}

.wcb-abrir-filtros{
  display:none;align-items:center;gap:.5rem;flex:0 0 auto;cursor:pointer;
  background:var(--a);color:var(--tinta-fija);border:0;padding:.6rem 1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.wcb-abrir-filtros:hover{background:var(--h)}
/* Tres barras decrecientes: el icono universal de filtrar. Dibujado, no
   una fuente de iconos ni un emoji. */
.wcb-abrir-icono{position:relative;display:block;width:15px;height:11px}
.wcb-abrir-icono::before,.wcb-abrir-icono::after{
  content:"";position:absolute;left:0;height:2px;background:currentColor;
}
.wcb-abrir-icono::before{top:0;width:15px;box-shadow:0 4px 0 currentColor}
.wcb-abrir-icono::after{bottom:0;width:7px}

.wcb-cuenta-total{
  margin:0;flex:0 0 auto;color:var(--h);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.wcb-cuenta-total b{font-size:.95rem}
/* --inv-g: esto vive en la barra del catálogo, que es de TINTA. Con --g
   daba 2,02:1. Otro que fallaba desde antes y que el token roto tapaba. */
.wcb-cuenta-total span{color:var(--inv-g)}

/* Los filtros puestos, siempre a la vista y cada uno con su aspa: nadie
   debería tener que abrir un panel para saber qué está filtrando. */
.wcb-activos{
  display:flex;gap:.35rem;align-items:center;flex:1 1 auto;
  overflow-x:auto;scrollbar-width:none;
}
.wcb-activos::-webkit-scrollbar{display:none}
.wcb-activo{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  background:var(--h);color:var(--t);border:0;padding:.35rem .5rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.wcb-activo i{font-style:normal;font-size:.9rem;line-height:1;opacity:.55}
/* El chip YA es un filtro elegido; pintarlo de acido al pasar por encima
   no anadia informacion, la repetia. En rojo se lee lo que de verdad hace
   el clic: quitarlo. */
.wcb-activo:hover{background:var(--activo-suave);box-shadow:inset 0 0 0 1px rgba(var(--fg-rgb),.25)}
.wcb-activo:hover i{opacity:1}
/* --inv-g, NO --g: los dos «Quitar…» viven sobre superficies de TINTA
   (la barra del catálogo y el panel de filtros). Con --g (#5C584F) daban
   2,78:1 y fallaban AA — y fallaban ya antes del modo oscuro; no se veía
   porque el token estaba roto y el texto heredaba hueso. */
.wcb-limpiar{
  flex:0 0 auto;background:transparent;border:0;cursor:pointer;color:var(--inv-g);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;padding:.35rem .3rem;white-space:nowrap;
}
.wcb-limpiar:hover{color:var(--a)}

.wcb-orden{display:flex;align-items:center;flex:0 0 auto;background:var(--t)}
.wcb-orden-sel{
  border:0;border-radius:0;background:var(--t);color:var(--inv-g2);cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem 1.6rem .5rem .7rem;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--inv-g2) 50%),linear-gradient(135deg,var(--inv-g2) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

/* ==================================================================
   LA COLUMNA DE FILTROS
   Deja de ser una pantalla que se abre y se cierra: en un catalogo de
   8.621 referencias el filtro es la herramienta principal, y esconderla
   obliga a abrir, elegir, cerrar, mirar, y volver a abrir para corregir.
   Al lado de los resultados se ve el efecto de cada clic al instante.
   ================================================================== */
.wcb-cuerpo{
  display:grid;grid-template-columns:264px minmax(0,1fr);
  align-items:start;background:var(--h);
}
.wcb-principal{min-width:0}

.wcb-panel{
  position:sticky;top:0;align-self:start;
  max-height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--t);color:var(--h);
  border-right:1px solid var(--inv-linea);
  padding:1.2rem clamp(12px,1.2vw,18px) 1.4rem;
  scrollbar-width:thin;
}
.wcb-panel-form{display:block}
.wcb-grupo + .wcb-grupo{margin-top:1.3rem}
.wcb-grupo{border:0;margin:0;padding:0;min-width:0}
.wcb-grupo-nota{
  margin:0 0 .5rem;font-size:.7rem;line-height:1.35;color:var(--inv-g);
}
.wcb-grupo legend{
  padding:0 0 .5rem;color:var(--a);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
}
.wcb-grupo-ops{display:flex;flex-direction:column;gap:1px;background:var(--inv-alza)}
.wcb-op{
  display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;
  background:var(--t);padding:.45rem .55rem;font-size:.8rem;
}
.wcb-op input{margin-top:.12rem}
.wcb-op:hover{background:var(--inv-alza2)}
.wcb-op input{
  appearance:none;width:15px;height:15px;flex:0 0 auto;cursor:pointer;
  border:1px solid #4A4A46;background:transparent;position:relative;
}
.wcb-op input:checked{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
.wcb-op input:checked::after{
  content:"";position:absolute;left:4px;top:0;width:5px;height:10px;
  border:solid var(--t);border-width:0 2px 2px 0;transform:rotate(43deg);
}
.wcb-op input:focus-visible{outline:2px solid var(--a);outline-offset:2px}
/* NADA de recortar con puntos suspensivos: «camiseta manga corta chico» y
   «...chica» se cortaban por el mismo sitio y quedaban DOS opciones
   identicas e indistinguibles. Un filtro que no deja distinguir sus
   opciones no filtra. Que ocupe dos lineas. */
.wcb-op-txt{
  flex:1 1 auto;color:var(--inv-txt);min-width:0;
  line-height:1.25;overflow-wrap:anywhere;
}
.wcb-op input:checked ~ .wcb-op-txt{color:var(--inv-fuerte)}
/* Era var(--g) (var(--g)) sobre el negro del panel: 2,78:1, falla AA.
   El gris de la marca esta pensado para leerse SOBRE PAPEL; aqui el fondo
   es tinta y hay que aclararlo. Un token no vale igual en los dos fondos. */
.wcb-op-n{
  flex:0 0 auto;font-style:normal;color:var(--inv-g);
  font-family:var(--mono);font-size:.64rem;padding-top:.12rem;
}
.wcb-op-extra{display:none}
.wcb-grupo-abierto .wcb-op-extra{display:flex}
.wcb-grupo-mas{
  margin-top:.4rem;background:transparent;border:0;cursor:pointer;color:var(--a);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;padding:.3rem 0;
}

.wcb-panel-pie{
  display:flex;align-items:center;justify-content:flex-start;gap:.8rem;
  padding:1rem 0 0;margin-top:1.2rem;border-top:1px solid var(--inv-linea);
}
/* En columna, «ver N articulos» sobra: los resultados ya estan al lado y
   se actualizan solos. Solo tiene sentido cuando el panel tapa la pantalla. */
.wcb-panel-ver{display:none}
.wcb-panel-limpiar{
  background:transparent;border:0;cursor:pointer;color:var(--inv-g);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;padding:.6rem .4rem;
}
.wcb-panel-limpiar:hover{color:var(--h)}
.wcb-panel-ver{
  background:var(--a);color:var(--tinta-fija);border:0;cursor:pointer;padding:.75rem 1.3rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.wcb-panel-ver:hover{background:var(--h)}

/* Mientras se recalcula, el muro se atenúa: se ve que algo pasa sin que
   la pantalla dé un salto. */
.wcb-recargando .wcb-muro{opacity:.35}
/* Al volver atras se recuperan las tandas antes de restaurar la posicion:
   se avisa, porque si no la pagina parece que da saltos sola. */
.wcb-recuperando .wcb-muro-fin::after{
  content:"Recuperando donde estabas…";display:block;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t);
}

/* ==================================================================
   EL MURO — CON AIRE
   Corrección de un error propio. La versión anterior decía «en pantalla
   no hay nada que no sea estampación: ni nombre, ni precio». Con 8.621
   referencias eso no produce un catálogo: produce un BLOQUE MACIZO.
   Sin huecos y sin texto no hay dónde descansar la vista ni por dónde
   trocear lo que estás viendo.
   Lo que lo vuelve legible es lo contrario: menos piezas y más grandes,
   hueco de verdad entre ellas, y una línea de texto bajo cada una que
   parta el bloque en filas.
   ================================================================== */
.wcb-muro{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(18px,2vw,28px);
  padding:clamp(20px,2.4vw,32px) var(--gut);
  background:var(--h);
}
@media (min-width:1600px){
  .wcb-muro{grid-template-columns:repeat(5,minmax(0,1fr))}
}

.wcb-p{
  position:relative;display:flex;flex-direction:column;
  background:transparent;
}
/* La pieza pasa a ser un <div>: el boton de anadir NO puede vivir dentro
   del <a> del producto (un boton dentro de un enlace es marcado invalido y
   se comporta distinto en cada navegador). El enlace envuelve foto y datos;
   el boton es su hermano. */
.wcb-p-enlace{display:flex;flex-direction:column;flex:1 1 auto;color:inherit}

/* La foto, cuadrada y sobre el papel. El aire de alrededor es del muro,
   no un borde de la pieza: la estampación sigue sin caja. */
.wcb-p-foto{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  /* HUESO FIJO, también en oscuro: la foto se pinta con
     `mix-blend-mode:multiply` y sobre un fondo oscuro multiply la
     ennegrece entera. No quedaría fea: desaparecería el producto. */
  background:var(--hueso-fijo);
}
.wcb-p-img{
  width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;
}
.wcb-p-sinfoto{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(var(--fg-rgb),.055) 9px 18px);
}

/* El número, discreto: orienta sin competir con la estampación. */
.wcb-p-num{
  position:absolute;top:0;left:0;z-index:3;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  background:var(--h);color:var(--g);padding:.2rem .35rem;
}
.wcb-p:hover .wcb-p-num{background:var(--a);color:var(--tinta-fija)}
/* A la IZQUIERDA del marcador de guardar, no encima. Los dos vivian en
   `top:0;right:0` y se solapaban 30 px — medido. Con «Rebajado» no se
   notaba porque no salia nunca; con «Saldo» sale en 277 piezas. */
.wcb-p-marca{
  position:absolute;top:0;right:32px;z-index:3;font-style:normal;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.2rem .38rem;
}
/* Rebajado en ROSA, no en acido: el acido es «lo has elegido tu». Con los
   dos en el mismo amarillo, una rebaja y un filtro puesto se leian igual. */
.wcb-p-rebaja{background:var(--rs);color:var(--tinta-fija)}
.wcb-p-agotado{background:var(--t);color:var(--h)}
/* Si coinciden saldo y agotado, el segundo baja una linea en vez de taparse. */
.wcb-p-marca + .wcb-p-marca{top:1.35rem}

/* EL TEXTO, SIEMPRE. No al posarse: siempre. Es lo que convierte una
   pared de imágenes en una lista de cosas que se pueden comprar. */
.wcb-p-datos{
  position:static;display:block;padding:.6rem 0 0;background:none;color:inherit;
}
.wcb-p-nombre{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--texto);font-weight:600;font-size:.78rem;line-height:1.3;
  letter-spacing:.005em;color:var(--t);text-transform:none;
  min-height:2.6em;
}
.wcb-p-precio{
  display:block;margin-top:.25rem;
  font-family:var(--mono);font-size:.84rem;font-weight:700;color:var(--t);
}
.wcb-p-precio del{color:var(--g);font-weight:400;margin-right:.3rem}
.wcb-p-precio ins{text-decoration:none;color:var(--t)}

/* Al pasar por encima, solo la foto responde: un filete ácido. Nada de
   invertir la pieza entera, que en una rejilla con aire da un salto. */
.wcb-p:hover .wcb-p-foto{outline:2px solid var(--a);outline-offset:0}
.wcb-p:hover .wcb-p-nombre{text-decoration:underline;text-underline-offset:3px}
.wcb-p:focus-visible .wcb-p-foto{outline:3px solid var(--a)}

/* ---- pie del muro ---- */
.wcb-muro-fin{
  padding:2.4rem var(--gut) 3rem;background:var(--h);color:var(--g);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;min-height:6rem;
}
.wcb-muro-cargando{color:var(--t)}

/* ==================================================================
   PANTALLAS TÁCTILES
   No hay :hover, así que el dato no puede vivir ahí. En táctil se
   muestra SIEMPRE, en una franja fina sobre la propia imagen: sigue
   sin haber ficha, y el precio se ve sin tener que tocar nada.
   ================================================================== */
@media (hover:none){
  /* El dato ya vive debajo de la foto, asi que aqui no hay nada especial
     que hacer: no depende de :hover, que en tactil no existe. */
  .wcb-p:active .wcb-p-foto{outline:3px solid var(--a)}
}

@media (max-width:760px){
  .wcb-muro{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px var(--gut) 24px}
  .wcb-p-datos{padding-top:.45rem}
  .wcb-p-nombre{font-size:.74rem;line-height:1.25;min-height:2.5em}
  .wcb-p-precio{font-size:.78rem;margin-top:.15rem}
  .wcb-chip{padding:.65rem .75rem;font-size:.64rem}
}

/* En el muro, la cabecera y el pie del sitio estorban: el catálogo es la
   página. El pie normal sigue existiendo, pero después de todo el muro. */
.wcb-muro-raiz + .wcb-pie{border-top:1px solid var(--inv-linea)}

@media (prefers-reduced-motion:reduce){
  .wcb-p,.wcb-p-datos{transition:none}
}

/* ---- cabecera compacta en el movil ----
   Medida en un iPhone 13: la cabecera ocupaba ~207 px de 844, un cuarto de
   la pantalla, para no decir nada. El catalogo es la pagina; la cabecera
   se aparta. */
@media (max-width:760px){
  .wcb-cab.wcb-cab-fina{
    flex-wrap:wrap;gap:.5rem .8rem;padding:.55rem var(--gut);
    align-items:center;
  }
  .wcb-cab-fina .wcb-logo{width:132px!important;order:1}
  .wcb-cab-fina .wcb-acciones{order:2;margin-left:auto;gap:.9rem}
  .wcb-cab-fina .wcb-accion-cab span{display:none}
  .wcb-cab-fina .wcb-buscador{order:3;flex:1 1 100%;border-bottom-width:1px}
  .wcb-cab-fina .wcb-buscador input[type=search]{padding:.35rem 0;font-size:.8rem}
}

/* ---- barra y panel en pantallas estrechas ---- */
@media (max-width:760px){
  .wcb-mando{flex-wrap:wrap;gap:.45rem .6rem;padding:.45rem var(--gut)}
  /* NADA de reordenar con `order`. wpautop mete <p> sueltos que también
     son elementos del flex y se quedan en `order:0`: al numerar los míos
     del 1 al 4, los suyos pasaban DELANTE de todos y «Lo último» salía el
     primero. Sin `order`, manda el orden del marcado —que ya es el bueno—
     y solo se empuja al final la fila de filtros activos. */
  .wcb-activos{order:9;flex:1 1 100%}
  .wcb-orden{margin-left:auto}

  /* A pantalla completa: en un movil, un panel a media altura obliga a
     desplazarse dentro de un hueco pequeño para elegir una talla. */
  .wcb-panel{
    position:fixed;inset:0;z-index:80;overflow-y:auto;
    padding:1rem var(--gut) 6.5rem;border:0;
  }
  .wcb-panel-form{grid-template-columns:1fr;gap:1.5rem}
  .wcb-panel-pie{
    position:fixed;left:0;right:0;bottom:0;margin:0;
    background:var(--t);border-top:1px solid var(--inv-linea);
    padding:.7rem var(--gut);justify-content:space-between;
  }
  .wcb-panel-ver{flex:1 1 auto;text-align:center;margin-left:.6rem}
  body.wcb-panel-abierto{overflow:hidden}
}

/* ==================================================================
   LA FICHA DE PRODUCTO
   Es donde se paga, y estaba descuadrada: la foto ocupaba 380 px de una
   columna de 792 y la columna de compra se quedaba en 311 de 648.
   Causa: WooCommerce le pone `width:48%; float:left` a .images y .summary
   pensando en un layout flotado. Dentro de una rejilla eso NO es un ancho
   de columna, es un 48 % del ancho de la celda: contenido encogido y el
   resto en blanco.

   OJO CON EL PREFIJO `body`: la primera version de estas reglas empezaba
   por `body .woocommerce ...` para ganar especificidad, y NO CASABA CON
   NADA. WooCommerce pone la clase `woocommerce` EN EL PROPIO <body>, asi
   que `body .woocommerce` exige que sea un DESCENDIENTE de body, y es body.
   Con `!important` sobre el selector simple basta y sobra.
   ================================================================== */
.woocommerce div.product div.images,
.woocommerce div.product div.summary{
  width:100%!important;float:none!important;margin:0!important;
}
.woocommerce div.product div.images img{width:100%;height:auto}

/* Las variaciones iban en <table>: con la columna estrecha, la etiqueta y
   el desplegable se montaban. En bloque, cada cosa en su línea. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{
  display:block;width:100%;text-align:left;padding:0;border:0;
}
.woocommerce div.product form.cart .variations tr{margin:0 0 .9rem}
.woocommerce div.product form.cart .variations th label{
  display:block;margin:0 0 .3rem;
}
.woocommerce div.product form.cart .variations select{width:100%;max-width:none}
.woocommerce div.product form.cart .reset_variations{
  display:inline-block;margin-top:.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
  display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap;
}
.woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 12rem}

/* El titular, a la escala de SU columna: a 51 px se partia en tres lineas. */
.woocommerce div.product .product_title{
  font-size:clamp(1.5rem,2.6vw,2.6rem);line-height:.95;
}

/* La galeria, centrada y sin pasarse de alto en pantallas grandes. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin:0}
@media (min-width:901px){
  .woocommerce div.product div.images{
    display:flex;align-items:flex-start;justify-content:center;
    padding:clamp(18px,2.5vw,40px);
  }
  .woocommerce div.product div.images .woocommerce-product-gallery{width:100%;max-width:620px}
}

/* ==================================================================
   SUBSECCIONES
   Al quitar el mega-menu, el arbol de 149 categorias solo se alcanzaba
   abriendo «Filtrar». Esto devuelve el paso a paso donde sirve: cuando
   ya estas dentro de una seccion. No es una barra permanente.
   ================================================================== */
.wcb-subs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  padding:.85rem var(--gut);background:var(--h);
  border-bottom:1px solid rgba(var(--fg-rgb),.16);
}
.wcb-subs-eti{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g);margin-right:.4rem;
}
.wcb-sub{
  display:inline-flex;align-items:baseline;gap:.4rem;cursor:pointer;
  background:transparent;border:1px solid rgba(var(--fg-rgb),.28);color:var(--t);
  padding:.34rem .6rem;font-size:.76rem;
}
.wcb-sub i{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--g)}
.wcb-sub:hover{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
.wcb-sub:hover i{color:var(--t)}
.wcb-sub-extra{display:none}
.wcb-subs-abierto .wcb-sub-extra{display:inline-flex}
.wcb-subs-mas{
  background:transparent;border:0;cursor:pointer;color:var(--t);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;padding:.34rem .3rem;
}
.wcb-subs-mas:hover{color:var(--tinta-fija);background:var(--a)}

/* ==================================================================
   LA ACCION DEL MURO
   Aparece SIEMPRE, y dice lo que de verdad va a pasar:
     Anadir  -> se echa al carrito sin salir de aqui
     Elegir  -> lleva talla o variante: hay que decidir algo
     Ver     -> agotado
   Antes solo la tenian 14 de cada 60, asi que en rejilla dejaba filas
   dentadas y en lista una columna que iba y venia. Un boton que promete
   «anadir» y te manda a elegir talla sigue estando prohibido; la salida
   no era callarse, era cambiar la palabra.
   ================================================================== */
.wcb-accion{
  margin-top:.5rem;width:100%;cursor:pointer;display:block;text-align:center;
  background:transparent;color:var(--t);border:1px solid rgba(var(--fg-rgb),.3);
  padding:.5rem .5rem;text-decoration:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.wcb-accion:hover{background:var(--t);color:var(--h);border-color:var(--t)}
/* «Ver» es lo agotado: se ofrece, pero no compite con lo que si se vende. */
.wcb-accion-ver{color:var(--g);border-color:rgba(var(--fg-rgb),.16)}
.wcb-p-anadir.loading{opacity:.55}
.wcb-p-anadir.added{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
/* WooCommerce inyecta su propio «Ver carrito» detras del boton */
.wcb-p .added_to_cart{
  display:block;margin-top:.3rem;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t);box-shadow:inset 0 -1px 0 var(--a);
}
@media (hover:none){
  .wcb-accion{background:var(--t);color:var(--h);border-color:var(--t)}
  .wcb-accion-ver{background:transparent;color:var(--g);border-color:rgba(var(--fg-rgb),.16)}
}

/* ==================================================================
   INDICE DE SECCIONES EN LA PORTADA
   Un indice, no un menu: con 149 categorias una lista se lee de un
   vistazo y se busca con Ctrl+F; un desplegable obliga a recordar.
   ================================================================== */
.wcb-portal-indice{border-top:var(--borde);background:var(--h)}
.wcb-secciones-lista{
  list-style:none;margin:0;padding:0 var(--gut) clamp(24px,3vw,44px);
  columns:4;column-gap:clamp(18px,3vw,48px);
}
.wcb-secciones-lista li{break-inside:avoid;margin:0}
.wcb-secciones-lista a{
  display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  padding:.32rem 0;border-bottom:1px solid rgba(var(--fg-rgb),.12);font-size:.82rem;
}
.wcb-secciones-lista a:hover{background:var(--a);padding-left:.35rem;padding-right:.35rem;color:var(--tinta-fija)}
.wcb-secciones-lista i{font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--g)}
.wcb-secciones-lista a:hover i{color:var(--t)}
@media (max-width:1100px){ .wcb-secciones-lista{columns:3} }
@media (max-width:760px){ .wcb-secciones-lista{columns:2} }
@media (max-width:480px){ .wcb-secciones-lista{columns:1} }

/* ==================================================================
   PANTALLAS DONDE LA COLUMNA NO CABE
   Por debajo de 1000 px vuelve a ser un panel a pantalla completa: una
   columna de 264 px en un movil deja los productos en 90 px.
   ================================================================== */
@media (max-width:1000px){
  .wcb-cuerpo{display:block}
  .wcb-abrir-filtros{display:flex}
  .wcb-panel{
    position:fixed;inset:0;z-index:80;max-height:none;
    border-right:0;padding:1rem var(--gut) 6.5rem;
    display:none;
  }
  body.wcb-panel-abierto .wcb-panel{display:block}
  body.wcb-panel-abierto{overflow:hidden}
  .wcb-panel-form{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1.4rem clamp(18px,3vw,36px);
  }
  .wcb-grupo + .wcb-grupo{margin-top:0}
  .wcb-panel-ver{display:inline-block;flex:1 1 auto;text-align:center;margin-left:.6rem}
  .wcb-panel-pie{
    position:fixed;left:0;right:0;bottom:0;margin:0;justify-content:space-between;
    background:var(--t);border-top:1px solid var(--inv-linea);padding:.7rem var(--gut);
  }
}

/* ==================================================================
   EL PIE, COMPACTO
   Eran tres zonas, 929 px de alto y un logo de 1.372 px de ancho.
   Un pie es para encontrar un enlace, no para volver a presentarse.
   ================================================================== */
.wcb-pie{padding:clamp(26px,3.4vw,48px) var(--gut) 0}
.wcb-pie-arriba{
  grid-template-columns:minmax(150px,.7fr) 2.3fr;
  padding-bottom:clamp(18px,2.4vw,30px);
}
.wcb-pie .wcb-logo{width:150px!important}
.wcb-pie-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.wcb-pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wcb-pie-abajo{padding:.8rem 0 1rem}

/* ==================================================================
   CABECERA PEGADA
   Con 8.621 referencias el buscador es la herramienta principal: que se
   fuera al desplazarse obligaba a subir del todo para volver a usarlo.
   La barra de filtros se pega JUSTO debajo usando la altura real de la
   cabecera, que el JS mide y publica en --cab. Fijarla a ojo se rompe en
   cuanto la cabecera cambia de alto (móvil, dos líneas, un aviso).
   ================================================================== */
/* OJO: NO vale pegar .wcb-cab. WordPress envuelve cada parte de plantilla
   en su propio <header class="wp-block-template-part">, que mide EXACTAMENTE
   lo mismo que la cabecera (106 px medidos). Un elemento pegajoso solo puede
   desplazarse dentro de su padre: con cero recorrido, se va con el. Hay que
   pegar el ENVOLTORIO, cuyo padre es .wp-site-blocks y ocupa la pagina entera. */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:0;z-index:60}
.wcb-cab{position:relative}
.wcb-mando{top:var(--cab, 0px)}
.wcb-panel{top:calc(var(--cab, 0px) + 52px);max-height:calc(100vh - var(--cab, 0px) - 52px)}

/* El campo de busqueda llevaba `outline:0` para que la caja fuera una
   linea limpia, y con eso se quedo SIN indicador de foco: el unico control
   de la pagina donde el teclado no se veia, y justo el principal.
   La linea entera hace de indicador, que ademas se lee mejor que un halo. */
.wcb-buscador:focus-within{border-bottom-color:var(--a);box-shadow:0 2px 0 var(--a)}
.wcb-cab .wcb-buscador input[type=search]:focus-visible{outline:0}
.wcb-cab .wcb-buscador:focus-within{
  border-bottom-color:var(--a);box-shadow:0 3px 0 var(--a);
}

/* ==================================================================
   SUGERENCIAS DEL BUSCADOR
   Aquí valen doble: 342 productos se llaman «Antifascista siempre», así
   que una lista de nombres no distingue nada. Con la miniatura, sí.
   ================================================================== */
.wcb-buscador{position:relative}
.wcb-sugerencias{
  position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:70;
  background:var(--h);border:1px solid var(--t);
  max-height:70vh;overflow-y:auto;
}
.wcb-sug{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;
  border-bottom:1px solid rgba(var(--fg-rgb),.12);
}
.wcb-sug:last-child{border-bottom:0}
.wcb-sug:hover,.wcb-sug:focus{background:var(--a);outline:0;color:var(--tinta-fija)}
.wcb-sug-foto{
  flex:0 0 auto;width:46px;height:46px;background:var(--h);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.wcb-sug-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.wcb-sug-txt{min-width:0;display:block}
.wcb-sug-txt b{
  display:block;font-size:.82rem;font-weight:600;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wcb-sug-txt i{font-style:normal;font-family:var(--mono);font-size:.74rem;font-weight:700}
.wcb-sug-todo{
  justify-content:center;background:var(--t);color:var(--h);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
}
.wcb-sug-todo:hover{background:var(--a);color:var(--tinta-fija)}
.wcb-sug-nada{
  margin:0;padding:.9rem .7rem;font-family:var(--mono);font-size:.74rem;color:var(--g);
}

/* ==================================================================
   MINICESTA
   Ver lo que llevas sin salir de donde estás. Al añadir desde el
   catálogo no había ninguna forma de comprobarlo.
   ================================================================== */
.wcb-acciones{position:relative}
.wcb-mini{
  position:absolute;right:0;top:calc(100% + 10px);z-index:70;width:min(340px,92vw);
  background:var(--h);border:1px solid var(--t);
}
.wcb-mini-lista{list-style:none;margin:0;padding:0;max-height:46vh;overflow-y:auto}
.wcb-mini-lista li{border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.wcb-mini-lista a{display:flex;gap:.7rem;align-items:center;padding:.55rem .6rem}
.wcb-mini-lista a:hover{background:var(--a);color:var(--tinta-fija)}
.wcb-mini-foto{flex:0 0 auto;width:44px;height:44px;overflow:hidden}
.wcb-mini-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.wcb-mini-txt{min-width:0}
.wcb-mini-txt b{
  display:block;font-size:.8rem;font-weight:600;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wcb-mini-txt i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--g)}
.wcb-mini-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem .6rem;border-top:2px solid var(--t);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
}
.wcb-mini-total b{font-size:1rem}
.wcb-mini-pie{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--t)}
.wcb-mini-b{
  text-align:center;padding:.7rem .4rem;background:var(--h);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
}
.wcb-mini-b:hover{background:var(--a);color:var(--tinta-fija)}
.wcb-mini-b-fuerte{background:var(--t);color:var(--h)}
.wcb-mini-b-fuerte:hover{background:var(--a);color:var(--tinta-fija)}
.wcb-mini-vacia{
  margin:0;padding:1.1rem .8rem;font-family:var(--mono);font-size:.74rem;color:var(--g);
}

/* ==================================================================
   POSICIÓN Y PÁGINAS
   El desplazamiento infinito es cómodo para mirar y pésimo para
   orientarse. Esto no lo sustituye: le añade el dónde estoy y el
   cómo vuelvo, que es lo único que le faltaba.
   ================================================================== */
.wcb-posicion{
  margin:0;padding:.7rem var(--gut) 0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--g);
}
.wcb-posicion b{color:var(--t)}

.wcb-paginas{
  display:flex;flex-wrap:wrap;gap:1px;justify-content:center;
  margin-top:1.4rem;background:var(--h);
}
.wcb-pag{
  min-width:2.6rem;text-align:center;padding:.6rem .7rem;
  border:1px solid rgba(var(--fg-rgb),.3);
  font-family:var(--mono);font-size:.72rem;
}
.wcb-pag:hover{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
.wcb-pag.activo{background:var(--t);color:var(--h);border-color:var(--t)}
.wcb-pag-hueco{padding:.6rem .2rem;color:var(--g);font-family:var(--mono)}

/* ==================================================================
   ÁMBITO DE BÚSQUEDA
   Buscando desde «Música», buscar en todo el catálogo te sacaba de
   donde estabas — y con 342 productos llamados igual, eso casi siempre
   es peor que quedarse.
   ================================================================== */
.wcb-ambito{flex:0 0 auto;display:flex;align-items:center}
.wcb-ambito select{
  border:0;border-left:1px solid rgba(var(--fg-rgb),.25);background:transparent;
  color:var(--g);cursor:pointer;max-width:min(30vw,220px);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem 1.4rem .3rem .6rem;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--g) 50%),linear-gradient(135deg,var(--g) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.wcb-ambito select:focus{outline:2px solid var(--a);outline-offset:2px;color:var(--t)}

/* ==================================================================
   GUARDAR PARA DESPUÉS
   Un marcador por pieza. Sin cuenta: vive en el navegador.
   ================================================================== */
/* SIEMPRE visible, no solo al pasar el raton: un control que solo existe
   si ya sabes que esta ahi no lo usa nadie. Tenue en reposo para no pelearse
   con la estampacion, entero al acercarse o si esta puesto. */
.wcb-guardar{
  position:absolute;top:0;right:0;z-index:4;
  width:30px;height:30px;padding:0;cursor:pointer;
  /* CENTRADO. Estaba en `display:block` y sin nada que lo colocara: el SVG
     de 15 px se quedaba pegado al borde izquierdo del botón de 30 —cero a
     la izquierda, quince a la derecha— y se veía torcido. Medido, no
     supuesto. */
  display:grid;place-items:center;
  /* Tinta y hueso FIJOS: en la rejilla este botón flota sobre la foto, y
     la peana de la foto no gira nunca (lleva `mix-blend-mode:multiply`).
     Con los tokens que giran, en modo oscuro el botón se volvía hueso
     sobre hueso al posarse: invisible. */
  background:var(--hueso-fijo);color:var(--tinta-fija);border:0;
  opacity:.55;
  transition:background-color var(--paso),color var(--paso),opacity var(--paso);
}
.wcb-p:hover .wcb-guardar,
.wcb-guardar:hover,
.wcb-guardar:focus-visible,
.wcb-guardar.activo{opacity:1}
/* AL POSARSE, SE INVIERTE. Antes no pasaba nada: la celda ya lo había
   subido a opacidad 1, así que apuntar al botón en sí no cambiaba ni un
   píxel y nada decía que aquello se pudiera pulsar.
   Se invierte —el gesto de botón que ya usa `.wcb-accion`— en vez de
   ponerse ácido: el ácido significa «esto lo has elegido tú», y un
   marcador ácido al pasar por encima diría que ya está guardado. */
.wcb-guardar:hover,
.wcb-guardar:focus-visible{background:var(--tinta-fija);color:var(--hueso-fijo)}
@media (prefers-reduced-motion:reduce){ .wcb-guardar{transition:none} }
/* El marcador ya NO se dibuja con bordes recortados: lleva su SVG dentro,
   del mismo juego que la lupa y la cesta. Aquel apaño era un rectangulo al
   que se le mordia un pico con `clip-path`, y ademas su ::before absoluto
   se desanclaba en cuanto el boton dejaba de estar posicionado — pasaba en
   la fila del catalogo Y en la ficha de producto. */
.wcb-guardar svg{display:block;pointer-events:none}
/* Guardado = marcador relleno. Es la senal de siempre y no hace falta
   explicarla; el contorno es «no guardado», el macizo es «guardado». */
/* Guardado se dice con la FORMA, no con el color: el marcador se rellena.
   Llevaba ademas fondo acido, con lo cual el acido significaba «filtro
   puesto», «vista activa» Y «guardado» — tres cosas. La forma distingue
   sola y no gasta el unico color que teniamos reservado. */
.wcb-guardar.activo svg{fill:currentColor}
/* En táctil no hay :hover: el marcador se ve siempre, tenue. */
@media (hover:none){ .wcb-guardar{opacity:.75} }

/* «Guardados» de la cabecera: era el UNICO de los cuatro que no era un
   SVG, y por eso cantaba al lado de la cuenta y la cesta. Ahora sale de
   wcb_icono() como los demas y no necesita reglas propias. */
.wcb-guardados-n{
  font-style:normal;background:var(--t);color:var(--h);
  min-width:1.35em;text-align:center;padding:.1em .35em;font-size:.68rem;
}

/* ==================================================================
   MOVIL: LAS BARRAS FIJAS NO PUEDEN COMERSE LA PANTALLA
   Medido en un iPhone 13: cabecera 149 px + barra 134 px = 282 de 664,
   el 43 %. Quedaban 382 px para el catalogo, que es de lo que va esto.
   ================================================================== */
@media (max-width:760px){
  .wcb-cab.wcb-cab-fina{padding:.4rem var(--gut) .45rem;gap:.35rem .7rem}
  .wcb-cab-fina .wcb-logo{width:112px!important}
  .wcb-cab-fina .wcb-buscador input[type=search]{padding:.28rem 0;font-size:.78rem}
  .wcb-cab-fina .wcb-acciones{gap:.75rem}

  /* La barra, en UNA linea. Los filtros activos pasan a una fila propia
     solo cuando los hay: reservarles sitio siempre cuesta 40 px que casi
     nunca se usan. */
  .wcb-mando{padding:.35rem var(--gut);gap:.4rem .55rem}
  .wcb-abrir-filtros{padding:.45rem .7rem;font-size:.68rem}
  .wcb-cuenta-total{font-size:.62rem}
  .wcb-cuenta-total b{font-size:.8rem}
  .wcb-cuenta-total span{display:none}   /* la palabra «artículos» sobra */
  .wcb-orden-sel{padding:.4rem 1.3rem .4rem .5rem;font-size:.62rem}
  .wcb-vista{display:none}               /* rejilla/lista: cabe en el panel */
  .wcb-activos:empty{display:none}
  .wcb-activo{font-size:.6rem;padding:.28rem .42rem}
}

/* La cabecera se retira al bajar y la barra de filtros ocupa su sitio.
   Sin mover la barra quedaria un hueco donde estaba la cabecera. */
@media (max-width:760px){
  .wp-site-blocks > header.wp-block-template-part{
    transition:transform .18s ease-out;
  }
  body.wcb-baja .wp-site-blocks > header.wp-block-template-part{
    transform:translateY(-100%);
  }
  body.wcb-baja .wcb-mando{top:0}
  /* Con el panel de filtros abierto la cabecera no se mueve: el panel tapa
     la pantalla y un movimiento detras solo se ve como un parpadeo. */
  body.wcb-panel-abierto .wp-site-blocks > header.wp-block-template-part{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .wp-site-blocks > header.wp-block-template-part{transition:none}
}

/* El marcador en la FICHA: ahi es un boton con su texto, no un icono
   suelto — es donde te decides, y merece decir lo que hace. */
/* `relative`, no `static`: aunque ya no haya ::before que desanclar, un
   boton con hijos posicionados debe seguir siendo su propio marco. */
.wcb-guardar-ficha{
  position:relative;display:flex;align-items:center;gap:.5rem;
  width:100%;height:auto;margin:.9rem 0 0;padding:.7rem 1rem;
  background:transparent;border:1px solid rgba(var(--fg-rgb),.3);opacity:1;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.wcb-guardar-ficha::before{position:static;transform:none;flex:0 0 auto}
.wcb-guardar-ficha:hover{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
.wcb-guardar-ficha.activo{background:var(--t);color:var(--h);border-color:var(--t)}
.wcb-guardar-ficha.activo::before{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
.wcb-guardar-txt{flex:1 1 auto;text-align:left}

/* El título de la pantalla: presente y legible, pero sin robarle sitio a
   la estampación, que es lo que se viene a ver. */
.wcb-titulo-pantalla{
  margin:0;padding:clamp(14px,1.8vw,22px) var(--gut) 0;
  font-size:clamp(1.2rem,2.2vw,1.8rem);line-height:1;letter-spacing:-.025em;
}
.wcb-titulo-pantalla + .wcb-subs{margin-top:.7rem}

/* <picture> es un envoltorio en línea: sin esto, la imagen deja de llenar
   su celda en cuanto se sirve en WebP. */
.wcb-p-foto picture,
.wcb-lienzo picture,
.wcb-sug-foto picture,
.wcb-mini-foto picture,
.wcb-puerta-fondo picture{display:block;width:100%;height:100%}
.wcb-puerta-fondo picture img{width:100%;height:100%;object-fit:cover}
.woocommerce div.product div.images picture{display:block;width:100%}

/* El conmutador vive en dos sitios y solo se ve uno cada vez: en la barra
   cuando hay ancho, y dentro del panel cuando no lo hay. */
.wcb-grupo-vista{display:none}
.wcb-vista-panel{display:flex}
@media (max-width:1000px){
  .wcb-grupo-vista{display:block}
}

/* Red de seguridad: si wpautop vuelve a colar un elemento vacio dentro de
   una rejilla, que no ocupe una celda. El arreglo de verdad esta en
   functions.php (render_block_core/shortcode); esto es el cinturon. */
.wcb-muro > p:empty,
.wcb-muro > br,
.wcb-secciones > p:empty,
.wcb-secciones > br,
.wcb-puertas > p:empty,
.wcb-panel-form > p:empty{display:none}

/* El icono de la accion: acompana a la palabra, no la sustituye.
   `+` = entra en la cesta aqui mismo.  `>` = te lleva a decidir. */
.wcb-accion{display:flex;align-items:center;justify-content:center;gap:.42em}
.wcb-accion svg{flex:0 0 auto;display:block}
/* «Ver» es lo agotado: el ojo tampoco compite con lo que si se vende. */
.wcb-accion-ver svg{opacity:.75}

/* ==================================================================
   EL ESCAPARATE DE LA PORTADA
   Una tira ancha, no una rejilla: se lee de izquierda a derecha y no
   compite con las cuatro puertas de arriba.
   ================================================================== */
.wcb-portal-tira{margin:clamp(28px,4vw,54px) 0 0}
.wcb-tira-meta{
  display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
}
.wcb-tira-pie{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g);
}

/* ==================================================================
   MOVIL: QUE SE PUEDA FILTRAR SIN ABRIR NADA
   ================================================================== */
/* Cuantos filtros llevas puestos. «Filtrar» a secas no distingue entre
   no haber filtrado y llevar tres puestos. */
.wcb-abrir-n{
  font-style:normal;margin-left:.45rem;background:var(--a);color:var(--tinta-fija);
  min-width:1.5em;text-align:center;padding:.05em .35em;
  font-family:var(--mono);font-size:.66rem;
}
.wcb-fichas{display:none}
.wcb-ficha{
  flex:0 0 auto;cursor:pointer;background:transparent;color:var(--t);
  border:1px solid rgba(var(--fg-rgb),.22);padding:.42rem .6rem;
  display:inline-flex;align-items:baseline;gap:.4rem;white-space:nowrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
}
.wcb-ficha i{font-style:normal;font-size:.6rem;color:var(--g)}
/* Acido = elegido, y solo eso. El roce va en neutro. */
.wcb-ficha:hover{background:var(--roce)}
.wcb-ficha.activa{background:var(--a);border-color:var(--a);color:var(--tinta-fija)}
.wcb-ficha.activa i{color:var(--t)}

@media (max-width:1000px){
  .wcb-fichas{
    display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
    padding:0 var(--gut) .7rem;margin:0;
  }
  .wcb-fichas::-webkit-scrollbar{display:none}
}

/* ==================================================================
   EL PRECIO REBAJADO
   WooCommerce pinta <del> con el precio viejo e <ins> con el nuevo.
   Sin estilo, los dos numeros salian iguales y habia que leerlos para
   saber cual era cual.
   ================================================================== */
.wcb-p-precio del,.wcb-f-precio del{
  opacity:.5;text-decoration:line-through;font-weight:400;margin-right:.35rem;
}
.wcb-p-precio ins,.wcb-f-precio ins{
  text-decoration:none;box-shadow:inset 0 -.34em 0 var(--rs);
}

/* ==================================================================
   RITMO
   El tema era completamente estatico: pulsabas un filtro y la pantalla
   parpadeaba, el recuento pasaba de 8.621 a 625 de golpe y las piezas
   nuevas aparecian secas. Nada de esto es decoracion — es acuse de
   recibo: la diferencia entre «ha pasado algo» y «creo que ha pasado
   algo». Todo se apaga con `prefers-reduced-motion`.
   ================================================================== */
.wcb-op,.wcb-activo,.wcb-ficha,.wcb-accion,.wcb-guardar,.wcb-vista-b,
.wcb-pag,.wcb-sub,.wcb-fila,.wcb-subs-mas,.wcb-limpiar,.wcb-p-num,
.wcb-secciones-lista a,.wcb-sug,.wcb-mini-b{
  transition:background-color var(--paso),color var(--paso),
             border-color var(--paso),opacity var(--paso),box-shadow var(--paso);
}
/* La foto se acerca un pelo al posarse. Un pelo: 1,5 %. */
.wcb-p-foto img,.wcb-p-foto picture{transition:transform var(--paso-lento)}
.wcb-p:hover .wcb-p-foto img,.wcb-p:hover .wcb-p-foto picture{transform:scale(1.015)}

/* Al recargar, el muro se apaga en vez de parpadear. */
.wcb-muro{transition:opacity var(--paso)}
.wcb-recargando .wcb-muro{opacity:.32}

/* Las piezas nuevas ENTRAN, escalonadas. El retraso se corta a las 12:
   con 30 por tanda, escalonarlas todas convertiria la ultima en una
   espera de verdad. */
@keyframes wcb-entra{
  from{opacity:0;transform:translateY(9px)}
  to  {opacity:1;transform:none}
}
.wcb-p,.wcb-fila{animation:wcb-entra var(--paso-lento) both}
.wcb-p:nth-child(n+13),.wcb-fila:nth-child(n+13){animation-delay:0s}
.wcb-p:nth-child(1),.wcb-fila:nth-child(1){animation-delay:0ms}
.wcb-p:nth-child(2),.wcb-fila:nth-child(2){animation-delay:22ms}
.wcb-p:nth-child(3),.wcb-fila:nth-child(3){animation-delay:44ms}
.wcb-p:nth-child(4),.wcb-fila:nth-child(4){animation-delay:66ms}
.wcb-p:nth-child(5),.wcb-fila:nth-child(5){animation-delay:88ms}
.wcb-p:nth-child(6),.wcb-fila:nth-child(6){animation-delay:110ms}
.wcb-p:nth-child(7),.wcb-fila:nth-child(7){animation-delay:132ms}
.wcb-p:nth-child(8),.wcb-fila:nth-child(8){animation-delay:154ms}
.wcb-p:nth-child(9),.wcb-fila:nth-child(9){animation-delay:176ms}
.wcb-p:nth-child(10),.wcb-fila:nth-child(10){animation-delay:198ms}
.wcb-p:nth-child(11),.wcb-fila:nth-child(11){animation-delay:220ms}
.wcb-p:nth-child(12),.wcb-fila:nth-child(12){animation-delay:242ms}

/* El recuento, mientras rueda: cifras de ancho fijo o el numero baila. */
.wcb-cuenta-total b{font-variant-numeric:tabular-nums}

/* ==================================================================
   MATERIALIDAD
   Profundidad SIN sombras sobre las piezas: la cabecera y la barra se
   vuelven translucidas y el catalogo pasa por debajo. Se nota que hay
   dos planos porque se ven, no porque se les haya pintado una sombra.
   ================================================================== */
.wcb-mando{
  background:rgba(var(--fg-rgb),.86);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  transition:padding var(--paso-lento),background-color var(--paso);
}
/* Sin soporte de desenfoque, opaca: translucida y sin blur seria un
   fondo sucio con el texto encima. */
@supports not (backdrop-filter:blur(1px)){
  .wcb-mando{background:var(--t)}
}
/* Al bajar, la barra se contrae. Cede altura a lo que se esta mirando. */
body.wcb-baja .wcb-mando{padding-top:.28rem;padding-bottom:.28rem}

/* La UNICA excepcion a «sin sombras»: los planos que flotan de verdad
   por encima de otro contenido —el panel en movil, el minicarrito, las
   sugerencias del buscador—. Ahi la sombra no decora: dice cual de los
   dos planos esta delante. En una pieza del muro sigue prohibida. */
.wcb-sugerencias,.wcb-mini{box-shadow:0 18px 40px -18px rgba(var(--fg-rgb),.45)}
@media (max-width:1000px){
  .wcb-panel{box-shadow:0 -18px 50px -20px rgba(var(--fg-rgb),.5)}
}

@media (prefers-reduced-motion:reduce){
  .wcb-p,.wcb-fila{animation:none}
  .wcb-p:hover .wcb-p-foto img,.wcb-p:hover .wcb-p-foto picture{transform:none}
  .wcb-op,.wcb-activo,.wcb-ficha,.wcb-accion,.wcb-guardar,.wcb-vista-b,
  .wcb-pag,.wcb-sub,.wcb-fila,.wcb-muro,.wcb-mando{transition:none}
}