/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA DE TRABAJO DEL LISTADO  ·  inc/cabecera-listado.php
   Dirección "C" de la maqueta /prueba-cabecera.html, elegida el 2026-08-13.

   Reglas de la casa que hay que respetar aquí:
   · Los colores salen SIEMPRE de las variables, o el modo oscuro se rompe.
   · style.css pinta TODOS los <button> de rojo con !important (ya ha mordido a
     la hamburguesa, a la lupa y a las flechas del carrusel): cualquier botón
     nuevo declara su color y su fondo a mano.
   · Los filetes son la estructura de esta tienda: separan, no decoran.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TÍTULO Y RECUENTO ───────────────────────────────────────────────────
   El recuento sube a la línea del título: es el dato que dice si estás ante 12
   artículos o ante 900, y abajo, suelto en una banda, no lo leía nadie. */
body.wk-neu .wkl{ margin-bottom:var(--s5); }

body.wk-neu .wkl__zeile{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s5);
  flex-wrap:wrap;
}
body.wk-neu .wkl__titel{ margin:0 !important; line-height:1.1; }
body.wk-neu .wkl__zahl{
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wk-tinta-3);
  white-space:nowrap;
}
body.wk-neu .wkl__text{
  margin:var(--s3) 0 0;
  max-width:64ch;
  font-size:14px;
  line-height:1.6;
  color:var(--wk-tinta-2);
}
body.wk-neu .wkl__text p:last-child{ margin-bottom:0; }
/* Todo a la izquierda, como el título: Storefront centra la descripción de la
   categoría y el nombre de las celdas que ocupan dos líneas (chequeo 2026-09-07). */
body.wk-neu .wkl,
body.wk-neu .wkl__text,
body.wk-neu .wkl__z,
body.wk-neu .wkl__n{ text-align:left; }

/* ── 2. SUBCATEGORÍAS ───────────────────────────────────────────────────────
   Misma gramática que la rejilla de productos: celdas pegadas separadas por un
   filete de 1px, el contenedor dibuja arriba+izquierda y cada celda su derecha
   y su abajo. Así el índice se lee como parte de la tabla, no como un añadido
   de botones flotando. */
body.wk-neu .wkl__unter{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:var(--s5);
  border-top:1px solid var(--wk-filete);
  border-left:1px solid var(--wk-filete);
}
body.wk-neu .wkl__z{
  position:relative;          /* contexto para el filete rojo del ::after */
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--wk-celda);
  text-decoration:none;
  border-right:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  /* El indicador de "estás aquí" va en box-shadow y no en border-top: un borde
     movería la celda 2px y desalinearía la fila entera. */
  box-shadow:inset 0 2px 0 0 transparent;
  transition:background .18s var(--wk-ease), box-shadow .18s var(--wk-ease);
}
body.wk-neu .wkl__n{ font-size:13px; line-height:1.3; color:var(--wk-tinta-2); }
/* El recuento de cada casilla y de cada ficha ES información (cuántos
   artículos hay detrás), así que va en tinta-3: con tinta-4 se queda en 4,36:1
   sobre la tarjeta oscura y en 3,5:1 sobre la blanca — por debajo de AA. */
body.wk-neu .wkl__c{ font-family:var(--wk-mono); font-size:12px; color:var(--wk-tinta-3); }
body.wk-neu .wkl__z::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--wk-rojo);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s var(--wk-ease);
}
body.wk-neu .wkl__z.is-akt{ box-shadow:inset 0 2px 0 0 var(--wk-rojo); }
body.wk-neu .wkl__z.is-akt .wkl__n{ color:var(--wk-tinta); font-weight:600; }
@media (hover:hover) and (pointer:fine){
  /* Al apuntar se enciende el mismo filete rojo que marca "estás aquí", con el
     mismo recurso: box-shadow INTERIOR, nunca border-top — un borde real
     empujaría la celda 2px y desalinearía la fila entera.
     La celda activa sigue distinguiéndose porque además lleva el nombre en
     negrita (.is-akt .wkl__n), así que compartir el filete no confunde.
     El rojo sale de --wk-rojo, que en modo oscuro ya vale el rojo claro
     (#F5564A): se ve igual de bien sobre la tarjeta oscura. */
  body.wk-neu .wkl__z:hover{ background:var(--wk-realce); }
  body.wk-neu .wkl__z:hover::after{ transform:scaleX(1); }
  body.wk-neu .wkl__z:hover .wkl__n{ color:var(--wk-tinta); }
}

/* ── 3. LA BARRA DE TRABAJO ─────────────────────────────────────────────────
   Se queda pegada bajo la cabecera del sitio mientras se recorren las 40
   fichas: acotar sirve de poco si para cambiar de filtro hay que volver arriba.
   ⚠️ `top` sale de --wk-kopf, que mide el JS: la cabecera del sitio encoge al
   bajar, así que el hueco NO es un número fijo.
   ⚠️ Funciona porque el tema ya cambió `overflow-x:hidden` por `clip` en body
   y .hfeed — con `hidden`, un ancestro anula position:sticky (ver cabecera.css). */
body.wk-neu .wkl__leiste-wrap{
  position:sticky;
  top:var(--wk-kopf,0px);
  z-index:60;
  margin-bottom:var(--s4);
  background:var(--wk-papel);
  padding-top:var(--s2);
}
body.wk-neu .wkl__leiste{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s3) var(--s6);
  padding:var(--s3) var(--s4);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
}
body.wk-neu .wkl__gruppe{
  display:flex;
  align-items:center;
  gap:var(--s2);
  position:relative;
}
/* Sin filete vertical entre grupos: la barra se reparte en dos filas en cuanto
   la pantalla baja de 1600px, y entonces el filete del primer grupo de la
   segunda fila queda colgando al principio de la línea, como una raya suelta.
   Separa el aire, y el rótulo en versalitas ya dice dónde empieza cada grupo. */
body.wk-neu .wkl__gruppe--rechts{ margin-left:auto; }

/* Grupo plegado: el rótulo ES el tirador */
body.wk-neu .wkl__mehr--voll > summary{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-color:var(--wk-filete-2);
  padding:8px 10px;
}
body.wk-neu .wkl__mehr--voll > summary .wkl__lab{ color:var(--wk-tinta-2); }
body.wk-neu .wkl__mehr--voll > summary.is-akt{ border-color:var(--wk-rojo); }
body.wk-neu .wkl__mehr--voll > summary.is-akt .wkl__lab{ color:var(--wk-rojo); }
body.wk-neu .wkl__pfeil{ color:var(--wk-tinta-3); font-size:12px; line-height:1; }
body.wk-neu .wkl__n-akt{
  font-family:var(--wk-mono);
  font-size:12px;
  color:#fff;
  background:var(--wk-rojo);
  padding:2px 5px;
  line-height:1;
}

body.wk-neu .wkl__lab{
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  /* tinta-3 y no tinta-4: la escala de la casa reserva tinta-4 para lo que se
     puede no leer (el "inkl. MwSt."), y en oscuro se queda en 4,36:1. Estos
     rótulos dicen QUÉ se está acotando. */
  color:var(--wk-tinta-3);
  white-space:nowrap;
}

/* Fichas de valor */
body.wk-neu .wkl__chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  line-height:1;
  color:var(--wk-tinta-2) !important;
  background:var(--wk-celda);
  border:1px solid var(--wk-filete-2);
  padding:7px 10px;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s var(--wk-ease), color .18s var(--wk-ease);
}
body.wk-neu .wkl__chip .wkl__c{ color:var(--wk-tinta-3); }
body.wk-neu .wkl__chip.is-akt{
  border-color:var(--wk-rojo);
  color:var(--wk-rojo) !important;
  font-weight:600;
}
body.wk-neu .wkl__chip.is-akt .wkl__c{ color:var(--wk-rojo); }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wkl__chip:hover{ border-color:var(--wk-tinta-3); color:var(--wk-tinta) !important; }
}

/* Precio. El <button> se declara entero porque style.css pinta de rojo todos
   los botones de la tienda con !important. */
body.wk-neu .wkl__feld{
  width:76px;
  height:32px;
  padding:0 8px;
  font-family:var(--wk-mono) !important;
  font-size:13px;
  color:var(--wk-tinta) !important;
  background:var(--wk-celda) !important;
  border:1px solid var(--wk-filete-2) !important;
  border-radius:0 !important;
  margin:0 !important;
}
body.wk-neu .wkl__bis,
body.wk-neu .wkl__eur{ font-family:var(--wk-mono); font-size:12px; color:var(--wk-tinta-3); }
/* ⚠️ CUARTA VEZ que muerde la misma regla (antes: la hamburguesa, la lupa y las
   flechas del carrusel). `body.wk-neu .site-content button:not(…):not(…):not(…)`
   de listado-nuevo.css pinta la letra de BLANCO con !important y suma (0,5,2):
   contra un <button> no hay selector sensato que gane, y la flecha salía blanca
   sobre blanco (medido 1:1, invisible). Por eso el mando es un
   <input type="submit">, cuya regla equivalente solo suma (0,3,2): con el
   contenedor delante, esta gana (0,4,2) sin trucos de especificidad. */
body.wk-neu .site-content .wkl__preis input.wkl__ok{
  height:32px;
  min-height:0 !important;
  padding:0 10px !important;
  font-size:14px !important;
  line-height:1 !important;
  color:var(--wk-tinta) !important;
  background:var(--wk-celda) !important;
  border:1px solid var(--wk-filete-2) !important;
  border-radius:0 !important;
  letter-spacing:0 !important;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu .site-content .wkl__preis input.wkl__ok:hover{ border-color:var(--wk-rojo) !important; color:var(--wk-rojo) !important; }
}

/* "+12": el resto de valores, sin JavaScript */
body.wk-neu .wkl__mehr{ position:relative; }
body.wk-neu .wkl__mehr summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--wk-mono);
  font-size:12px;
  color:var(--wk-tinta-3);
  border:1px solid var(--wk-filete-2);
  padding:7px 9px;
  line-height:1;
}
body.wk-neu .wkl__mehr summary::-webkit-details-marker{ display:none; }
body.wk-neu .wkl__mehr[open] summary{ border-color:var(--wk-tinta-3); color:var(--wk-tinta); }
body.wk-neu .wkl__panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:auto;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:max-content;
  max-width:min(560px,80vw);
  max-height:min(46vh,320px);
  overflow-y:auto;
  padding:var(--s3);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete-2);
  box-shadow:0 8px 24px rgba(18,16,14,.10);
}

/* Anclado a la derecha cuando el panel se saldría de la pantalla (lo decide el
   guion midiendo, porque depende del ancho de la ventana y de cuántos grupos
   tenga la barra). */
body.wk-neu .wkl__mehr--rechts .wkl__panel{ left:auto; right:0; }

/* Orden: enlaces, no un desplegable. Un desplegable cerrado no dice por qué
   orden estás mirando; aquí se ve marcado el activo. */
body.wk-neu .wkl__sort{
  position:relative;          /* contexto del filete que se rellena */
  font-size:13px;
  color:var(--wk-tinta-2) !important;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .18s var(--wk-ease), border-color .18s var(--wk-ease);
}
/* bottom:-2px, no 0: ahí es donde vive el borde de 2px que marca el activo,
   así el filete del hover cae exactamente en el mismo sitio. */
body.wk-neu .wkl__sort::after{
  content:"";
  position:absolute;
  height:2px;
  background:var(--wk-rojo);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s var(--wk-ease);
  left:0; right:0; bottom:-2px;
}
body.wk-neu .wkl__sort.is-akt{
  color:var(--wk-tinta) !important;
  font-weight:600;
  border-bottom-color:var(--wk-rojo);
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wkl__sort:hover{ color:var(--wk-tinta) !important; }
  body.wk-neu .wkl__sort:hover::after{ transform:scaleX(1); }
}

/* ── 4. LO QUE HAY FILTRADO ─────────────────────────────────────────────────
   Va DENTRO de la parte pegajosa a propósito: lo que se puede activar tiene que
   poder deshacerse desde el mismo sitio, sin volver arriba. */
body.wk-neu .wkl__aktiv{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s2) var(--s3);
  padding:var(--s2) var(--s4);
  /* NO usar --wk-plancha: esa se queda CLARA en modo oscuro a propósito (es la
     lámina sobre la que se funden las fotos de BGS), y aquí daba una banda
     blanca dentro de una barra oscura, con el enlace rojo a 3,16:1. */
  background:var(--wk-hundido);
  border:1px solid var(--wk-filete);
  border-top:0;
}
/* Sobre la banda hundida, tinta-3 se queda en 4,35:1 en modo claro. */
body.wk-neu .wkl__aktiv .wkl__lab{ color:var(--wk-tinta-2); }
body.wk-neu .wkl__weg{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--wk-tinta) !important;
  background:var(--wk-celda);
  border:1px solid var(--wk-filete-2);
  padding:5px 9px;
  text-decoration:none;
}
body.wk-neu .wkl__weg-lab{ color:var(--wk-tinta-3); }
body.wk-neu .wkl__weg span[aria-hidden]{ color:var(--wk-tinta-3); font-size:14px; line-height:1; }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wkl__weg:hover{ border-color:var(--wk-rojo); }
  body.wk-neu .wkl__weg:hover span[aria-hidden]{ color:var(--wk-rojo); }
}
body.wk-neu .wkl__reset{
  font-size:12px;
  color:var(--wk-rojo) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── 5. RENGLÓN DE RECUENTO ────────────────────────────────────────────────*/
body.wk-neu .wkl__meta{
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--wk-tinta-3);
  margin-bottom:var(--s3);
}
body.wk-neu .wkl__meta--leer{ color:var(--wk-tinta-2); font-family:var(--wk-sans); font-size:14px; }

/* ── 6. PANTALLAS PEQUEÑAS ─────────────────────────────────────────────────
   En el teléfono la barra NO se pega: la cabecera del sitio ya ocupa arriba y
   entre las dos se comerían un tercio de la pantalla. Y en vez de repartirse en
   cinco filas, se recorre de lado, que es el gesto que ya se conoce. */
@media (max-width:900px){
  body.wk-neu .wkl__leiste-wrap{ position:static; padding-top:0; }
  /* Antes se recorría de lado (nowrap + overflow-x), pero sin ninguna señal
     de que se pudiera: en el teléfono la barra salía cortada por la derecha
     (chequeo visual 2026-09-07). Ahora se reparte en filas. */
  body.wk-neu .wkl__leiste{ flex-wrap:wrap; gap:var(--s3) var(--s4); }
  body.wk-neu .wkl__gruppe{ flex:none; max-width:100%; }
  body.wk-neu .wkl__gruppe--rechts{ margin-left:0; }
  /* El panel de "+12" no cabe dentro de una barra que se desplaza: se abre
     debajo, a lo ancho. */
  body.wk-neu .wkl__panel{ position:static; max-width:none; box-shadow:none; margin-top:6px; }
}
@media (max-width:600px){
  body.wk-neu .wkl__zahl{ font-size:12px; }
  body.wk-neu .wkl__unter{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}

/* ── 7. FOCO ───────────────────────────────────────────────────────────────
   Comprar con el teclado tiene que verse: el aro rojo es el mismo del resto. */
body.wk-neu .wkl__chip:focus-visible,
body.wk-neu .wkl__sort:focus-visible,
body.wk-neu .wkl__weg:focus-visible,
body.wk-neu .wkl__z:focus-visible,
body.wk-neu .wkl__mehr summary:focus-visible,
body.wk-neu .wkl__feld:focus-visible,
body.wk-neu .wkl__ok:focus-visible{
  outline:2px solid var(--wk-rojo);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  body.wk-neu .wkl__chip,
  body.wk-neu .wkl__sort,
  body.wk-neu .wkl__z{ transition:none; }
  body.wk-neu .wkl__z::after,
  body.wk-neu .wkl__sort::after{ transition:none; }
}