/* ===========================================================================
   VISTA PREVIA DEL REDISEÑO — "NORMBLATT WEISS"
   Solo se carga en el LISTADO (tienda y categorías). El resto de la tienda
   sigue con el diseño oscuro actual, para poder comparar sin comprometerse.
   Especificación: panel de 4 direcciones + 3 jueces (2026-08-08).
   =========================================================================== */



/* ───────────────────────────────────────────────────────────────────────────
   1. TIPOGRAFÍAS AUTOALOJADAS
   IBM Plex (SIL OFL 1.1), servida desde el propio servidor.
   CERO peticiones a Google Fonts (obligación RGPD alemana).

   ⚠️ 2026-08-08: los seis ficheros anteriores eran, en TRES casos, el mismo
   fichero Regular con otro nombre (md5 idéntico). El CSS pedía peso 500 y 600,
   así que el navegador fabricaba la negrita por su cuenta: títulos y precios
   salían emborronados y la jerarquía tipográfica del diseño no existía de
   verdad. Ahora son los pesos REALES de los paquetes oficiales de IBM.

   Los unicode-range NO están escritos a mano: se calculan leyendo el cmap de
   cada fichero (fuentes/instalar.py), así que no pueden declarar glifos que el
   fichero no contiene — que es exactamente lo que hacía el subset viejo.
   Latin2 va incluido en Sans 400/500 para que los apellidos del este de Europa
   no se rompan en el formulario de dirección.
   ─────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"WkPlex";
  src:url("fonts/plex-sans-400-1.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}
@font-face{
  font-family:"WkPlex";
  src:url("fonts/plex-sans-400-2.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF;
}
@font-face{
  font-family:"WkPlex";
  src:url("fonts/plex-sans-400-3.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0102-0103,U+01CD-01DC,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"WkPlex";
  src:url("fonts/plex-sans-500-1.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}
@font-face{
  font-family:"WkPlex";
  src:url("fonts/plex-sans-500-2.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF;
}
@font-face{
  font-family:"WkPlex";
  src:url("fonts/plex-sans-600-1.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}
@font-face{
  font-family:"WkPlexCond";
  src:url("fonts/plex-cond-600-1.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}
@font-face{
  font-family:"WkPlexCond";
  src:url("fonts/plex-cond-500-1.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}
@font-face{
  font-family:"WkMono";
  src:url("fonts/plex-mono-400-1.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}
@font-face{
  font-family:"WkMono";
  src:url("fonts/plex-mono-500-1.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02;
}


/* ───────────────────────────────────────────────────────────────────────────
   2. TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* --- Superficies -------------------------------------------------------- */
  --wk-papel:#F2F1EE;      /* fondo global. Greige cálido, NO blanco puro:
                              hace que la celda blanca se recorte sola. */
  --wk-celda:#FFFFFF;      /* fondo de la celda de producto y de los paneles. */
  --wk-plancha:#FAF9F6;    /* fondo bajo la FOTO. Blanco CÁLIDO, nunca #FFFFFF:
                              sobre blanco puro el mix-blend-mode:multiply es
                              aritméticamente inútil (blanco × X = X) y no funde
                              los fondos #F5F5F5 de las fotos de fábrica. */
  --wk-realce:#FAF9F6;     /* fondo de REALCE al pasar el ratón sobre una fila
                              o un botón. Existe porque antes se usaba
                              --wk-plancha para esto y --wk-plancha se queda
                              CLARA a propósito en modo oscuro (es la lámina
                              bajo la foto del producto): el hover pintaba un
                              bloque claro con la letra clara encima y no se
                              leía nada. La plancha es de las FOTOS; el realce
                              es de la INTERFAZ, y cambia con el tema. */
  --wk-hundido:#EAE7E2;    /* bandas de sección (hero, marca BGS). */
  --wk-negro:#12100E;      /* servicebar, pie, botones oscuros. Negro CÁLIDO. */

  /* --- Tintas ------------------------------------------------------------- */
  --wk-tinta:#12100E;      /* titulares y precio.        15,9:1 sobre papel */
  --wk-tinta-2:#3A3733;    /* texto corrido.             10,7:1 */
  --wk-tinta-3:#6E6A65;    /* meta, Art.-Nr., recuentos.  4,9:1  → AA */
  --wk-tinta-4:#8A857F;    /* SOLO texto no esencial (MwSt.). 3,5:1 */

  /* --- Filetes: son la estructura del sitio ------------------------------- */
  --wk-filete:#E5E2DC;     /* filete estándar 1px */
  /* CONTORNO DE LOS CAMPOS. No es el mismo filete que separa cosas: la norma
     pide 3:1 para el borde de un control, porque es lo que dice dónde se
     escribe. --wk-filete-2 se quedaba en 1,79:1 sobre la celda blanca (y en
     1,6:1 en oscuro). Comprobado: 3,44:1 sobre blanco y 3,06:1 sobre el papel. */
  --wk-campo-borde:#8E8A84;
  --wk-filete-2:#D6D2CB;   /* filete de énfasis (inputs, botones fantasma) */

  /* --- Rojo: reinterpretado, nunca eliminado ----------------------------- */
  --wk-rojo-marca:#CC0000; /* EXACTO de marca. Solo logo y sobre fondo negro. */
  --wk-rojo:#B31217;       /* rojo de interacción sobre claro. 6,9:1 sobre
                              blanco → AA. Lee a tinta impresa, no a semáforo. */
  --wk-rojo-700:#8C0D12;   /* estado :active */

  /* --- Señales: desaturadas para no competir con el rojo ------------------ */
  --wk-ok:#2E6B36;
  --wk-aviso:#8A6212;

  /* --- Tipos -------------------------------------------------------------- */
  --wk-sans:"WkPlex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wk-cond:"WkPlexCond","WkPlex",system-ui,sans-serif;
  --wk-mono:"WkMono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- Espaciado: base 4, escala cerrada. Nada de 15/30/45 de Storefront -- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:96px;--s10:128px;

  --wk-ancho:1380px;
  --wk-calle:32px;
  --wk-ease:cubic-bezier(.2,.6,.2,1);
}
@media (max-width:782px){
  :root{--wk-calle:20px;--s9:56px;--s8:40px}
}



/* ───────────────────────────────────────────────────────────────────────────
   3. BASE Y PURGA DE STOREFRONT
   Storefront trae radios, sombras, floats y anchos en % que hay que anular.
   El CSS en línea de storefront_add_customizer_css() se elimina desde
   functions.php porque gana en especificidad y desde aquí no se puede vencer.
   ─────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body,
body.woocommerce,
body.woocommerce-page{
  margin:0;
  background:var(--wk-papel);
  color:var(--wk-tinta-2);
  font-family:var(--wk-sans);
  font-size:15px;
  line-height:1.65;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* RADIO 0. Lista explícita en vez de un `*` global: así no rompemos los pocos
   elementos que deben ser redondos (sombra de contacto elíptica). */
a,button,input,select,textarea,img,fieldset,table,
.button,.wp-element-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product a img,
.woocommerce .quantity .qty,
.wc-block-components-button,
.select2-container .select2-selection{
  border-radius:0 !important;
}

/* Sombras de Storefront fuera: en esta dirección la elevación es papel + filete */
.woocommerce ul.products li.product,
.woocommerce div.product,
.site-header,
.storefront-breadcrumb{box-shadow:none !important}

/* Contenedor único. A partir de 1560px NO se ensancha el texto: se añade
   una 5ª columna a la rejilla (ver §8). */
.col-full,.wk-wrap{
  max-width:var(--wk-ancho);
  margin-inline:auto;
  padding-inline:var(--wk-calle);
  width:100%;
  /* ⚠️ IMPRESCINDIBLE: el .col-full de Storefront es `content-box`. Con
     `width:100%` eso significa que el CONTENIDO mide todo el ancho del padre y
     los 64px de relleno se SUMAN por fuera: la caja acaba 64px más ancha que su
     sitio, el navegador resuelve el desajuste con un margen derecho de -64px y
     recorta 32px por la derecha. No se veía porque solo pasa por debajo de
     ~1444px de ventana (un portátil de 1366 o 1440 lo sufre entero: título,
     rejilla y pie), y las pruebas se hacían a 1560+. */
  box-sizing:border-box;
}

.wk-seccion{padding-block:var(--s9)}
.wk-seccion--hundida{background:var(--wk-hundido);padding-block:80px}

/* Selección, foco y movimiento reducido */
::selection{background:var(--wk-rojo);color:#fff}
:focus-visible{outline:2px solid var(--wk-rojo);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}



/* ───────────────────────────────────────────────────────────────────────────
   4. TIPOGRAFÍA
   Tracking negativo que CRECE con el tamaño; versales solo <=13px.
   ─────────────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--wk-tinta);margin:0;font-weight:600;text-wrap:balance}

.wk-h1,
.wk-hero h1{
  font-family:var(--wk-cond);
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.04;
  letter-spacing:-.022em;
  text-transform:none;           /* jamás mayúsculas: es el tic de Autodoc */
}
.wk-h2,
.wk-cabecera-seccion h2{
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.12;
  letter-spacing:-.015em;
}
.wk-h3{font-size:21px;line-height:1.28;letter-spacing:-.01em}

/* Eyebrow / etiqueta: máximo 3 palabras. Con más, el alemán se rompe. */
.wk-eyebrow{
  display:block;
  font-family:var(--wk-mono);font-weight:500;font-size:12px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wk-tinta-3);
  margin-bottom:var(--s3);
}
/* Meta técnica: Art.-Nr., SW, EAN, recuentos. Cero barrado (feature "zero"). */
.wk-meta{
  font-family:var(--wk-mono);font-weight:400;font-size:12px;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wk-tinta-3);
  font-feature-settings:"zero" 1;
}
.wk-texto{font-size:15px;line-height:1.7;color:var(--wk-tinta-2);max-width:68ch}

/* Cabecera de sección: filete de 2px a todo el ancho de la rejilla.
   El separador es la REGLA, no un cambio de color de fondo. */
.wk-cabecera-seccion{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  border-top:2px solid var(--wk-tinta);
  padding-top:var(--s3);
  margin-bottom:var(--s6);
}
.wk-cabecera-seccion__mas{
  font-size:13px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--wk-tinta);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--wk-filete-2);padding-bottom:2px;
}
.wk-cabecera-seccion__mas:hover{color:var(--wk-rojo);border-color:var(--wk-rojo)}



/* ───────────────────────────────────────────────────────────────────────────
   8. REJILLA DE CATÁLOGO — es una TABLA, no un tablero de tarjetas
   Gap 0: las celdas se tocan y las separa un filete continuo de 1px. El ojo
   lee UN campo continuo en vez de 24 objetos de calidad desigual, que es el
   ocultador de heterogeneidad más barato que existe.
   Los filetes NO se doblan: el contenedor dibuja arriba+izquierda y cada
   celda dibuja derecha+abajo. (Se usan bordes reales en vez de box-shadow
   para no crear 24 capas de pintado extra ni depender de overflow:hidden,
   que recortaría el filete exterior derecho.)
   ─────────────────────────────────────────────────────────────────────────── */
.woocommerce ul.products,
ul.products,
.wk-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin:0 0 var(--s8) !important;
  padding:0;
  list-style:none;
  border-top:1px solid var(--wk-filete);
  border-left:1px solid var(--wk-filete);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none !important;display:none !important}

.woocommerce ul.products li.product,
ul.products li.product,
.wk-grid>li{
  float:none !important;width:auto !important;clear:none !important;
  margin:0 !important;padding:0 !important;
  background:var(--wk-celda);
  border-right:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  text-align:left;
  /* content-visibility con la palabra clave `auto`: el navegador MEMORIZA el
     tamaño real tras el primer pintado, así que no hay saltos de scroll por
     un contain-intrinsic-size mal medido. */
  content-visibility:auto;
  contain-intrinsic-size:auto 480px;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{content:none !important}

@media (min-width:640px){.woocommerce ul.products,ul.products,.wk-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.woocommerce ul.products,ul.products,.wk-grid{grid-template-columns:repeat(4,1fr)}}
/* A partir de 1560px NO se ensancha el contenedor: se añade una 5ª columna.
   No se pasa de 5: por debajo de ~250px de celda, un primer plano macro de
   una pieza negra deja de leerse. */
@media (min-width:1560px){.woocommerce ul.products,ul.products,.wk-grid{grid-template-columns:repeat(5,1fr)}}

/* Fila curada de portada: MISMA anatomía, tarjetas separadas por 24px.
   Selectores con .woocommerce delante para ganar en especificidad a la
   rejilla pegada de arriba. */
.woocommerce ul.products.wk-reihe,
ul.products.wk-reihe{
  grid-template-columns:repeat(5,1fr) !important;
  gap:var(--s5);border:0;
}
.woocommerce ul.products.wk-reihe li.product,
ul.products.wk-reihe li.product{border:0;background:var(--wk-celda)}
@media (max-width:1279px){
  .woocommerce ul.products.wk-reihe,ul.products.wk-reihe{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:767px){
  .woocommerce ul.products.wk-reihe,ul.products.wk-reihe{
    grid-template-columns:repeat(2,1fr) !important;gap:var(--s3);
  }
}



/* ───────────────────────────────────────────────────────────────────────────
   9. FICHA DE PRODUCTO (la pieza que se repite 9.300 veces)
   ─────────────────────────────────────────────────────────────────────────── */
.wk-ficha{display:flex;flex-direction:column;height:100%;padding:var(--s4) var(--s4) var(--s5)}

/* 9.1 Art.-Nr. ARRIBA DEL TODO, incluso encima de la foto.
   El mecánico compara con su catálogo BGS y pide por número: enseñárselo
   antes que nada es hablar su idioma, y ninguna tienda de plantilla lo hace.
   Sustituye a la marca del producto: con catálogo 100 % BGS, repetir
   "BGS TECHNIC" 24 veces es ruido que ocupa este renglón. */
.wk-ficha__nr{
  display:block;min-height:16px;margin:0 0 var(--s3);
  font-family:var(--wk-mono);font-size:12px;line-height:1.2;letter-spacing:.06em;
  text-transform:uppercase;color:var(--wk-tinta-3);
  font-feature-settings:"zero" 1;
  transition:color .16s var(--wk-ease);
}
li.product:hover .wk-ficha__nr{color:var(--wk-rojo)}

/* 9.2 LA PLANCHA: única superficie con tratamiento especial de toda la tienda.
   - fondo BLANCO CÁLIDO (#FAF9F6), no #FFFFFF: es lo que hace que el multiply
     funda de verdad los fondos #F5F5F5 / #F8F8F8 de las fotos de fábrica.
   - isolation:isolate es OBLIGATORIO: sin él, mix-blend-mode mezcla con lo que
     haya detrás en la página y el resultado parece "el CSS no funciona".
   - la sombra de contacto va DEBAJO de la imagen (z-index 0 vs 1): como el
     fondo blanco de la foto se multiplica, la sombra se ve A TRAVÉS de ella y
     el producto queda apoyado en vez de pegado. Es lo que mata el efecto
     pegatina sin retocar una sola foto.
   - NO hay degradado en la plancha: multiply sobre degradado tiñe el producto
     entero y apagaría todo el cromo del catálogo. */
.wk-ficha__plancha{
  position:relative;display:block;
  aspect-ratio:1/1;
  background:var(--wk-plancha);
  isolation:isolate;
  overflow:hidden;
  margin-bottom:16px;
}
.wk-ficha__plancha::after{
  content:"";position:absolute;z-index:0;
  left:22%;right:22%;bottom:9%;height:12px;
  border-radius:50%;filter:blur(3px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(30,26,22,.24) 0%,rgba(30,26,22,0) 72%);
}
.wk-ficha__plancha img,
.woocommerce ul.products li.product a img{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  /* inset fijo: normaliza ÓPTICAMENTE un vaso de 1/4" y un carro de taller.
     Padding inferior mayor que el superior = centrado óptico: el objeto se
     apoya sobre su sombra. */
  padding:11% 12% 14%;
  margin:0;box-shadow:none;border:0;background:none;
  mix-blend-mode:multiply;
  filter:contrast(1.02) saturate(.98);
  /* PROHIBIDO transform:scale sobre object-fit:contain — ampliar recorta
     contra el padding y delata el truco. */
  transform:none !important;
}
/* Escape para fotos con fondo REAL (taller, packaging) y PNG con alfa.
   La clase la pone content-product.php leyendo el meta _wk_no_blend. */
.wk-ficha__plancha.is-foto img{mix-blend-mode:normal;filter:none}

/* --- LA FICHA CON RECORTE (fondo ya quitado, WebP con alfa) ---------------
   `multiply` existía para fundir el fondo BLANCO de la foto con la lámina.
   Si la foto ya no tiene fondo, multiplicar solo ensucia: se apaga. La sombra
   de contacto se ve ahora a través de la transparencia real, que es mejor que
   a través del blanco multiplicado. */
/* ⚠️ Con la especificidad justa NO gana: hay reglas posteriores que ponen
   multiply a `body.wk-neu .wk-ficha__plancha img` (0,3,1). Aquí hace falta
   !important, porque si el multiply sobrevive el recorte se apaga sobre la
   tarjeta oscura y la ficha sale VACÍA. */
body.wk-neu .wk-ficha__plancha.is-recorte img,
body.wk-neu ul.products li.product .wk-ficha__plancha.is-recorte img{
  mix-blend-mode:normal !important;
}

/* Barra roja de intención: el rojo aparece al interactuar, nunca en reposo */
.wk-ficha__plancha::before{
  content:"";position:absolute;z-index:2;left:0;bottom:0;height:2px;width:100%;
  background:var(--wk-rojo);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--wk-ease);
}
li.product:hover .wk-ficha__plancha::before{transform:scaleX(1)}

/* 9.3 Flag: MÁXIMO UNO. Dos o tres etiquetas apiladas es lenguaje de outlet. */
.wk-flag{
  position:absolute;top:0;left:0;z-index:3;
  display:inline-flex;align-items:center;height:20px;padding:0 8px;
  font-family:var(--wk-mono);font-weight:500;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;
}
.wk-flag--neu{background:var(--wk-tinta);color:#fff}
.wk-flag--sale{background:var(--wk-rojo);color:#fff}

/* 9.4 Título: caja normal SIEMPRE. min-height fija la línea base del precio
   en toda la fila aunque los títulos tengan 1 o 2 líneas — ese detalle es el
   70 % de la sensación de orden en una página de 24 productos. */
.wk-ficha__titel,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--wk-sans) !important;
  font-size:15px !important;font-weight:500 !important;line-height:1.33;
  letter-spacing:-.005em;text-transform:none !important;
  color:var(--wk-tinta);
  margin:0 0 var(--s2) !important;padding:0 !important;
  min-height:40px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wk-ficha__titel a{color:inherit;text-decoration:none}
li.product:hover .wk-ficha__titel{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}

/* 9.5 Línea técnica: "SW 13 · 1/2" · CR-V". Sale de los atributos de
   WooCommerce. REGLA DURA: si no hay atributos, la línea NO se imprime;
   jamás se rellena con genéricos tipo "Qualitätswerkzeug". */
.wk-ficha__specs{
  margin:0 0 var(--s3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 9.6 Pie de ficha: margin-top:auto alinea precio y botón entre columnas */
.wk-ficha__fuss{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--wk-filete)}

.wk-ficha__preis,
.woocommerce ul.products li.product .price{
  display:block;
  font-family:var(--wk-sans) !important;
  font-size:17px !important;font-weight:600;letter-spacing:-.01em;
  color:var(--wk-tinta) !important;
  font-variant-numeric:tabular-nums lining-nums;
  margin:0 !important;
}
/* El precio NUNCA es rojo por defecto: precio rojo permanente = tienda de
   saldos. El rojo aquí significa una sola cosa: "esto ha bajado". */
.woocommerce ul.products li.product .price del,
.wk-ficha__preis del{
  font-size:13px;font-weight:400;color:var(--wk-tinta-4);margin-right:var(--s2);
}
.woocommerce ul.products li.product .price ins,
.wk-ficha__preis ins{text-decoration:none;color:var(--wk-rojo)}

/* Textos legales alemanes (PAngV / Germanized). NO se pueden ocultar; bien
   compuestos son señal de tienda seria. */
.wk-ficha__mwst,
.wc-gzd-additional-info,
.woocommerce ul.products li.product .wc-gzd-additional-info{
  display:block;
  font-family:var(--wk-sans) !important;font-size:12px !important;line-height:1.45;
  letter-spacing:.01em;color:var(--wk-tinta-4) !important;
  margin:2px 0 0 !important;
}

/* 9.7 Disponibilidad: cuadrado de 6px (el círculo es lenguaje de app; el
   cuadrado es lenguaje de panel industrial). Con dropship, prometer plazo en
   la propia rejilla es la mayor palanca de conversión que hay. */
.wk-ficha__lager{
  display:flex;align-items:center;gap:7px;margin-top:var(--s3);
  font-size:12px;line-height:1.3;color:var(--wk-tinta-2);
}
.wk-ficha__lager::before{content:"";width:6px;height:6px;flex:none;background:var(--wk-ok)}
.wk-ficha__lager--knapp::before{background:var(--wk-aviso)}
.wk-ficha__lager--aus{color:var(--wk-tinta-4)}
.wk-ficha__lager--aus::before{background:var(--wk-tinta-4)}

/* 9.8 CTA del listado — COMPROMISO DELIBERADO.
   Ni 24 rectángulos rojos rellenos (aspecto de folleto de saldos), ni botón
   fantasma gris que apague la señal de compra: filete y texto ROJOS en reposo,
   relleno rojo solo cuando hay intención (hover/foco de la celda).
   Superficie roja en reposo: 1px de borde + texto ≈ 0,3 % del viewport. */
.wk-btn-ficha,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:block !important;width:100%;
  margin:var(--s4) 0 0 !important;
  height:40px;line-height:38px;padding:0 8px !important;
  background:transparent !important;
  border:1px solid var(--wk-rojo) !important;
  color:var(--wk-rojo) !important;
  font-family:var(--wk-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background-color .14s linear,color .14s linear;
}
.wk-btn-ficha:hover,
li.product:hover .wk-btn-ficha,
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product .button:hover{
  background:var(--wk-rojo) !important;color:#fff !important;
}
.woocommerce ul.products li.product .button:active{background:var(--wk-rojo-700) !important}
/* El badge nativo de oferta se apaga: el rojo lo gobierna .wk-flag */
.woocommerce span.onsale{display:none !important}

@media (max-width:639px){
  .wk-ficha{padding:12px 12px 16px}
  .wk-ficha__titel{font-size:14px !important;min-height:38px}
  .wk-ficha__preis{font-size:16px !important}
  .wk-btn-ficha{height:44px;line-height:42px} /* objetivo táctil mínimo */
}


/* ───────────────────────────────────────────────────────────────────────────
   PUENTE CON EL TEMA OSCURO ACTUAL
   Esta hoja se carga DESPUÉS de style.css, así que solo hay que apagar lo
   que el tema oscuro impone sobre el área de contenido. La cabecera y el pie
   se dejan negros a propósito: en esta dirección son las anclas de marca.
   ─────────────────────────────────────────────────────────────────────────── */
body.wk-neu,
body.wk-neu .site,
body.wk-neu #page,
body.wk-neu .site-content,
body.wk-neu.woocommerce-page{
  background-color:var(--wk-papel) !important;
  color:var(--wk-tinta-2) !important;
  font-family:var(--wk-sans) !important;
}
body.wk-neu .site-content{padding-top:var(--s6)}

/* Titulares del listado: fuera Oswald mayúsculas, entra la condensada */
body.wk-neu h1,
body.wk-neu .page-title,
body.wk-neu .woocommerce-products-header__title{
  font-family:var(--wk-cond) !important;
  color:var(--wk-tinta) !important;
  text-transform:none !important;
  letter-spacing:-.01em !important;
  font-size:clamp(28px,3vw,40px) !important;
  font-weight:700 !important;   /* mismo peso en listados, fichas y páginas (chequeo 2026-09-07) */
  text-align:left !important;
}
body.wk-neu .term-description{color:var(--wk-tinta-2)}

/* Migas y barra de orden sobre papel */
body.wk-neu .storefront-breadcrumb{
  background:transparent;
  border-bottom:1px solid var(--wk-filete);
  padding:var(--s4) 0;
}
body.wk-neu .storefront-breadcrumb,
body.wk-neu .storefront-breadcrumb a,
body.wk-neu .woocommerce-result-count,
body.wk-neu .woocommerce-breadcrumb,
body.wk-neu .woocommerce-breadcrumb a{color:var(--wk-tinta-3) !important}
body.wk-neu .storefront-breadcrumb a:hover{color:var(--wk-rojo) !important}

body.wk-neu .woocommerce-ordering select,
body.wk-neu select{
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  border:1px solid var(--wk-filete-2) !important;
}

/* Paginación en clave de catálogo */
body.wk-neu .woocommerce nav.woocommerce-pagination ul,
body.wk-neu .woocommerce nav.woocommerce-pagination ul li{border-color:var(--wk-filete) !important}
body.wk-neu .woocommerce nav.woocommerce-pagination ul li a,
body.wk-neu .woocommerce nav.woocommerce-pagination ul li span{
  color:var(--wk-tinta-2) !important;font-family:var(--wk-mono);font-size:13px;
}
body.wk-neu .woocommerce nav.woocommerce-pagination ul li span.current,
body.wk-neu .woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--wk-tinta) !important;color:#fff !important;
}

/* Avisos de WooCommerce sobre papel */
body.wk-neu .woocommerce-message,
body.wk-neu .woocommerce-info{
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  border-top-color:var(--wk-rojo) !important;
}

/* Cinta que recuerda que esto es la vista previa */
body.wk-neu .wk-aviso-preview{
  background:var(--wk-tinta);color:#fff;
  font-family:var(--wk-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;padding:7px 12px;
}

/* Enlaces dentro de los textos legales: heredaban el blanco del tema oscuro
   y sobre papel quedaban invisibles. "Versandkosten" DEBE poder pulsarse:
   es un enlace obligatorio de la PAngV, no un adorno. */
body.wk-neu .wc-gzd-additional-info a,
body.wk-neu .wk-ficha__mwst a{
  color:var(--wk-tinta-3) !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
body.wk-neu .wc-gzd-additional-info a:hover{color:var(--wk-rojo) !important}

/* ═══════════════════════════════════════════════════════════════════════════
   EL RESTO DE LA TIENDA SOBRE PAPEL
   La cabecera y el pie se quedan NEGROS a propósito: en esta dirección son
   las dos anclas de marca que sujetan el papel por arriba y por abajo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Portada: secciones ------------------------------------------------ */
body.wk-neu .wk-seccion{background:var(--wk-papel)}
body.wk-neu .wk-seccion__titulo{
  font-family:var(--wk-cond) !important;
  color:var(--wk-tinta) !important;
  text-transform:none !important;
  letter-spacing:-.01em !important;
  font-size:26px !important;
}
body.wk-neu .wk-seccion__cabecera{
  border-bottom:2px solid var(--wk-tinta);
  padding-bottom:var(--s3);
}
body.wk-neu .wk-enlace{
  color:var(--wk-rojo) !important;
  font-family:var(--wk-mono);font-size:12px;letter-spacing:.06em;
}
body.wk-neu .wk-bestseller,
body.wk-neu .wk-bloque{border-top:1px solid var(--wk-filete)}

/* --- Portada: banner ---------------------------------------------------
   La foto oscura con el titular encima se sustituye por una banda de papel
   hundido. Un banner negro sobre una tienda clara parecía un parche. */
body.wk-neu .wk-hero{
  background-image:none !important;
  background:var(--wk-hundido);
  min-height:340px;
  border-bottom:1px solid var(--wk-filete);
}
body.wk-neu .wk-hero__fade{display:none}
body.wk-neu .wk-hero__inner{text-align:left;max-width:1400px;width:100%;padding:0 var(--s5)}
body.wk-neu .wk-hero h1{
  font-family:var(--wk-cond) !important;
  color:var(--wk-tinta) !important;
  text-transform:none !important;
  font-size:clamp(32px,4vw,54px) !important;
  letter-spacing:-.015em !important;
  text-shadow:none !important;
  margin-bottom:var(--s4) !important;
}
body.wk-neu .wk-hero p{
  color:var(--wk-tinta-2) !important;
  text-shadow:none !important;
  max-width:52ch;font-size:16px;
}

/* --- Portada: índice de categorías ------------------------------------
   Deja de ser un mosaico de baldosas y pasa a leerse como un registro:
   número, nombre y recuento. Comunica "tengo 9.347 y están ordenados". */
body.wk-neu .wkc-item{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  transition:border-color 160ms ease,transform 180ms var(--wk-ease);
}
body.wk-neu .wkc-item:hover{border-color:var(--wk-tinta);transform:none}
body.wk-neu .wkc-img-wrap{background:var(--wk-plancha)}
body.wk-neu .wkc-img-wrap img{mix-blend-mode:multiply}
body.wk-neu .wkc-label{
  background:transparent;
  color:var(--wk-tinta) !important;
  font-family:var(--wk-sans);
  font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;
  text-align:left;
  padding:var(--s3) var(--s3) var(--s4);
  border-top:1px solid var(--wk-filete);
}
body.wk-neu .wkc-item:hover .wkc-label{color:var(--wk-rojo) !important}

/* --- Portada: bloques de categoría ------------------------------------- */
body.wk-neu .wk-eyebrow{
  color:var(--wk-rojo) !important;
  font-family:var(--wk-mono);font-size:12px;letter-spacing:.1em;
}
body.wk-neu .wk-bloque__texto p{color:var(--wk-tinta-2) !important}

/* --- Portada: barra de ventajas ---------------------------------------- */
/* --- Cierre de la portada -----------------------------------------------
   Tres celdas con la MISMA anatomía que la franja del hero (icono de línea,
   beneficio y dato en monoespaciada), separadas por filetes y no por aire.
   Antes eran tres frases centradas sin icono ni filete: el único sitio de la
   tienda con el texto centrado, y encima repetía lo que el hero ya decía.
   Ahora cada celda es un ENLACE: la banda deja de ser decoración y lleva a la
   página de envíos, a la de desistimiento y al correo de soporte. */
body.wk-neu .wk-ventajas{
  background:var(--wk-hundido);
  border-top:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  padding:0 var(--wk-calle);
  /* ⚠️ `display:block` a propósito: el tema oscuro (style.css:723) hacía de la
     SECCIÓN la rejilla de 3 columnas, con el texto centrado. Ahora la rejilla
     es la lista de dentro, y si no se anula esto quedan DOS rejillas anidadas:
     la lista entera cae en la primera columna y las tres celdas se aplastan en
     un tercio del ancho (medido: dos columnas de 120px y media banda vacía). */
  display:block;
  text-align:left;
}
body.wk-neu .wk-ventajas__inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  /* `list-style:none` NO quita el relleno de las listas: sin este padding la
     banda entera sale desplazada respecto al resto de la página. */
  padding:0;
  list-style:none;
}
body.wk-neu .wk-ventajas__inner > li{
  margin:0;
  border-left:1px solid var(--wk-filete);
}
body.wk-neu .wk-ventajas__inner > li:first-child{ border-left:0; }
body.wk-neu .wk-ventajas__inner a{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  padding:var(--s5);
  text-decoration:none;
  color:inherit;
  transition:background .18s var(--wk-ease);
}
body.wk-neu .wk-ventajas__inner a::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; top:0;
}
body.wk-neu .wk-ventajas__inner strong{
  font-family:var(--wk-sans);
  font-size:14px;
  font-weight:600;
  color:var(--wk-tinta);
  letter-spacing:-.005em;
  line-height:1.3;
}
/* ⚠️ tinta-2 y NO tinta-3: sobre la banda hundida (#EAE7E2) tinta-3 se queda
   en 4,35:1, por debajo de AA. Medido, no supuesto. */
body.wk-neu .wk-ventajas__inner .wk-dato__nota{ color:var(--wk-tinta-2); }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wk-ventajas__inner a:hover{ background:var(--wk-celda); }
  body.wk-neu .wk-ventajas__inner a:hover::after{ transform:scaleX(1); }
  body.wk-neu .wk-ventajas__inner a:hover strong{ color:var(--wk-rojo); }
  body.wk-neu .wk-ventajas__inner a:hover .wk-dato__icono{ stroke:var(--wk-rojo); }
}
body.wk-neu .wk-ventajas__inner a:focus-visible{
  outline:2px solid var(--wk-rojo);
  outline-offset:-2px;
}
@media (max-width:820px){
  body.wk-neu .wk-ventajas__inner{ grid-template-columns:1fr; }
  body.wk-neu .wk-ventajas__inner > li{ border-left:0; border-top:1px solid var(--wk-filete); }
  body.wk-neu .wk-ventajas__inner > li:first-child{ border-top:0; }
  body.wk-neu .wk-ventajas__inner a{ padding:var(--s4) 0; }
}

/* --- Ficha de producto -------------------------------------------------- */
body.wk-neu.single-product div.product .product_title{
  font-family:var(--wk-cond) !important;
  color:var(--wk-tinta) !important;
  text-transform:none !important;letter-spacing:-.01em !important;
}
body.wk-neu.single-product div.product .woocommerce-product-gallery{
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  padding:var(--s5);
}
body.wk-neu.single-product .woocommerce-product-gallery img{mix-blend-mode:multiply}
body.wk-neu.single-product div.product p.price,
body.wk-neu.single-product div.product span.price{
  color:var(--wk-tinta) !important;font-family:var(--wk-sans) !important;
  font-variant-numeric:tabular-nums;
}
body.wk-neu .product_meta,
body.wk-neu .product_meta a{color:var(--wk-tinta-3) !important;font-family:var(--wk-mono);font-size:12px}
body.wk-neu .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--wk-filete)}
body.wk-neu .woocommerce-tabs ul.tabs li a{
  font-family:var(--wk-sans) !important;color:var(--wk-tinta-3) !important;
  text-transform:none !important;letter-spacing:0 !important;
}
body.wk-neu .woocommerce-tabs ul.tabs li.active a{color:var(--wk-tinta) !important}
body.wk-neu .woocommerce-tabs .panel{color:var(--wk-tinta-2)}
/* La tabla de datos técnicos es la pieza que da credibilidad: se compone
   como una ficha de catálogo, no como una tabla de plantilla. */
body.wk-neu table.shop_attributes,
body.wk-neu table.shop_table{
  background:var(--wk-celda);border:1px solid var(--wk-filete);color:var(--wk-tinta-2);
}
body.wk-neu table.shop_attributes th,
body.wk-neu table.shop_table th{color:var(--wk-tinta);font-weight:600}
body.wk-neu table.shop_attributes td,
body.wk-neu table.shop_attributes th,
body.wk-neu table.shop_table td,
body.wk-neu table.shop_table th{border-color:var(--wk-filete) !important}
body.wk-neu table.shop_attributes td{font-family:var(--wk-mono);font-size:13px}

/* En la ficha SÍ hay relleno rojo: es la única compra de la página. */
body.wk-neu.single-product div.product form.cart .button{
  background:var(--wk-rojo) !important;color:#fff !important;border:0 !important;
  height:48px;padding:0 var(--s6) !important;
}
body.wk-neu.single-product div.product form.cart .button:hover{background:var(--wk-rojo-700) !important}
body.wk-neu .quantity input.qty{
  background:var(--wk-celda) !important;color:var(--wk-tinta) !important;
  border:1px solid var(--wk-filete-2) !important;
}

/* ⚠️ EL CHECKOUT SE SALÍA DE LA PANTALLA POR LA IZQUIERDA (2026-08-23).
   El contenedor de contenido de la página está topado en 630px —una medida de
   lectura, buena para texto— y el bloque del checkout intenta escaparse de esa
   caja con `margin-left/right:-202px` y `max-width:1000%`. Resultado: empezaba
   en x=-148 y, como `body` lleva `overflow-x:clip`, la columna del formulario
   quedaba CORTADA y sin manera de llegar a ella: nombre, dirección y código
   postal medio invisibles. Se quita el tope en estas dos páginas y se anulan
   los márgenes negativos, centrando el bloque en un ancho de checkout normal.
   1.100px y no --wk-ancho (1.380): un formulario de pago más ancho que eso se
   lee peor, no mejor. */
body.wk-neu.woocommerce-checkout .entry-content,
body.wk-neu.woocommerce-cart .entry-content{ max-width:none !important; }
body.wk-neu .wp-block-woocommerce-checkout,
body.wk-neu .wp-block-woocommerce-cart{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:1100px !important;
}

/* El desplegable de País: su CONTENEDOR se quedaba en blanco fijo, así que en
   modo oscuro la etiqueta clara caía sobre blanco → 1,74:1, ilegible. Y su
   borde iba en el filete flojo. */
body.wk-neu .wc-blocks-components-select__container,
body.wk-neu .wc-blocks-components-select__select{
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  border-color:var(--wk-campo-borde) !important;
}
body.wk-neu .wc-blocks-components-select__label{ color:var(--wk-tinta-2) !important; }


/* --- Carrito y pago ----------------------------------------------------- */
body.wk-neu .woocommerce-cart table.cart img{background:var(--wk-plancha);mix-blend-mode:multiply}
body.wk-neu .cart_totals h2,
body.wk-neu .woocommerce-billing-fields h3{
  font-family:var(--wk-cond) !important;color:var(--wk-tinta) !important;
  text-transform:none !important;letter-spacing:-.005em !important;
}
body.wk-neu .woocommerce form .form-row input.input-text,
body.wk-neu .woocommerce form .form-row textarea{
  background:var(--wk-celda) !important;color:var(--wk-tinta) !important;
  border:1px solid var(--wk-campo-borde) !important;
}
body.wk-neu .woocommerce-checkout #payment{background:var(--wk-celda);border:1px solid var(--wk-filete)}
body.wk-neu .woocommerce-checkout #payment div.payment_box{background:var(--wk-hundido);color:var(--wk-tinta-2)}
body.wk-neu #place_order,
body.wk-neu .checkout-button{background:var(--wk-rojo) !important;color:#fff !important;border:0 !important}

/* --- Buscador de la cabecera (sigue en negro) --------------------------- */
body.wk-neu .site-header .woocommerce-product-search input[type="search"],
body.wk-neu .site-header input[type="search"]{
  background:#1b1917 !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  font-family:var(--wk-sans);
}

/* --- Textos y enlaces sueltos sobre papel ------------------------------- */
body.wk-neu .site-content a{color:var(--wk-rojo)}
body.wk-neu .site-content a:hover{color:var(--wk-rojo-700)}
body.wk-neu .entry-content,
body.wk-neu .page-content{color:var(--wk-tinta-2)}
body.wk-neu .entry-content h2,
body.wk-neu .entry-content h3{
  font-family:var(--wk-cond) !important;color:var(--wk-tinta) !important;
  text-transform:none !important;letter-spacing:-.005em !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PASADA DE ACABADO — 2026-08-08
   Arreglos salidos de la auditoría de las 12 superficies de la tienda.
   Esta hoja es la última que carga, así que aquí no hace falta !important
   salvo donde haya que vencer al CSS en línea de Storefront.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. EL TÍTULO DE PRODUCTO NO ES ROJO ────────────────────────────────────
   `body.wk-neu .site-content a{color:var(--wk-rojo)}` (0,2,2) ganaba a
   `.wk-ficha__titel a{color:inherit}` (0,1,1), y como TODO el título va dentro
   del <a>, las rejillas enteras salían rojas. El sistema dice que el rojo
   aparece al interactuar, nunca en reposo: 24 titulares rojos son lenguaje de
   outlet, justo lo contrario de lo que busca esta tienda. */
body.wk-neu .wk-ficha__titel a,
body.wk-neu .woocommerce-loop-product__title a{
  color:var(--wk-tinta);
  text-decoration:none;
}
body.wk-neu li.product:hover .wk-ficha__titel a{
  color:var(--wk-tinta);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* ── 2. UN SOLO ANCHO DE CONTENEDOR ─────────────────────────────────────────
   Había CUATRO ejes distintos a 1440px: cabecera y pie en x=62, la rejilla de
   categorías en x=24, el hero y los bloques en x=44, y la barra de ventajas a
   sangre completa. Nada se alineaba en vertical con nada. Todo pasa a colgar
   del mismo par de tokens (--wk-ancho / --wk-calle). */
body.wk-neu .wk-seccion{
  padding-inline:var(--wk-calle);
}
/* ⚠️ 26.09.2026 — `.wk-seccion__cuerpo` y `.wk-carrusel` entran aquí porque en
   «Werkzeug unter 20 €» solo la CABECERA colgaba de este contenedor. Medido a
   1920 px: cabecera centrada (270→1650) mientras el texto, los botones y el
   carrusel arrancaban en 32, y la flecha derecha se iba a 1840. Tres ejes
   distintos dentro de la misma sección.
   La fila de fichas SÍ tenía el ancho bueno (1380) y aun así salía pegada a la
   izquierda: `ul.products.wk-reihe--carrusel` lleva `margin:0 !important` —lo
   necesita el arrastre— y EMPATA en especificidad con el `margin-inline:auto`
   de aquí, así que ganaba por estar más abajo en el fichero. Por eso se centra
   el ENVOLTORIO y no la lista: pelearse con ese `!important` habría roto el
   desplazamiento horizontal. */
body.wk-neu .wkc-grid,
body.wk-neu .wk-seccion__cabecera,
body.wk-neu .wk-seccion__cuerpo,
body.wk-neu .wk-carrusel,
body.wk-neu .wk-home ul.products,
body.wk-neu .wk-ventajas__inner{
  max-width:var(--wk-ancho);
  margin-inline:auto;
}
/* El selector lleva la etiqueta a propósito: `.wk-home > section` (0,1,1) pesa
   más que `.wk-bloque` (0,1,0) y su `width:100vw` desplazaba los bloques 300px
   a la izquierda en pantallas anchas. Ya pasó una vez; no repetirlo. */
body.wk-neu .wk-home > section.wk-bloque{
  max-width:calc(var(--wk-ancho) + var(--wk-calle) * 2);
  margin-inline:auto;
  width:auto;
}
/* La fila de Bestseller conservaba `margin:0 0 …!important`, que mataba el
   `margin:0 auto` del max-width:1400 y la pegaba al borde izquierdo: en un
   monitor de 1920 quedaban 490px de papel vacío a la derecha. */
body.wk-neu .wk-home ul.products{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ── 3. LOS RÓTULOS DE SECCIÓN, TODOS A LA IZQUIERDA ────────────────────────
   'Kategorien' salía centrado y 'Bestseller' y los bloques a bandera
   izquierda: el primer rótulo de la página ya rompía el eje de lectura. */
body.wk-neu .wk-seccion__titulo{
  text-align:left;
}

/* ── 4. COLUMNAS IGUALES ────────────────────────────────────────────────────
   Las 4 columnas salían 240/240/240/269px. Un hijo de grid toma como anchura
   mínima la de su contenido, y la línea de specs va en `nowrap`: un texto
   largo empujaba su columna y robaba el ancho a las demás. `min-width:0` es lo
   que le permite encogerse hasta el reparto real de 1fr. */
body.wk-neu ul.products > li.product{
  min-width:0;
}
body.wk-neu .wk-ficha,
body.wk-neu .wk-ficha__specs,
body.wk-neu .wk-ficha__titel{
  min-width:0;
  max-width:100%;
}

/* ── 5. TEXTO LEGAL OBLIGATORIO, LEGIBLE ────────────────────────────────────
   Los avisos de la PAngV (inkl. MwSt. / zzgl. Versandkosten / plazo) estaban a
   3,66:1 y 11px. No se pueden ocultar —son obligatorios— y bien compuestos son
   señal de tienda seria, así que suben a 12px y al gris que sí llega a AA. */
body.wk-neu .wk-ficha__mwst,
body.wk-neu .wc-gzd-additional-info,
body.wk-neu ul.products li.product .wc-gzd-additional-info{
  color:var(--wk-tinta-3) !important;   /* 5,4:1 sobre la celda blanca */
  font-size:12px !important;
  line-height:1.5;
}

/* ── 6. EL PIE DE LA FICHA, EN ORDEN ────────────────────────────────────────
   La línea de disponibilidad se colaba ENTRE el precio y su texto legal, y
   separaba el importe de la frase que legalmente lo acompaña. */
body.wk-neu .wk-ficha__fuss{
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.wk-neu .wk-ficha__lager{ order:2; margin-top:var(--s2); }
body.wk-neu .wk-ficha__fuss .button,
body.wk-neu .wk-ficha__fuss .added_to_cart{ order:3; }

/* ── 7. FOCO DE TECLADO VISIBLE TAMBIÉN SOBRE NEGRO ─────────────────────────
   El aro rojo se quedaba en 2,79:1 sobre la cabecera y el pie negros y en
   1,18:1 sobre la barra roja: quien navega con teclado no veía dónde estaba.
   Sobre superficie oscura el aro pasa a blanco. */
.site-header :focus-visible,
.wk-footer :focus-visible,
.site-footer :focus-visible,
.wk-versand-bar :focus-visible,
.main-navigation :focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ── 8. EL FILETE SE TIENE QUE VER ──────────────────────────────────────────
   Toda la estructura del diseño descansa en un filete de 1px que estaba a
   1,29:1 de contraste: sobre papel, en la práctica, no existía. Subirlo es lo
   que hace que la rejilla se lea como una tabla y no como celdas flotando. */
:root{
  --wk-filete:#DAD6CE;    /* antes #E5E2DC */
  --wk-filete-2:#C6C1B8;  /* antes #D6D2CB */
}


/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL — los fallos que dejaban la tienda inservible en el teléfono
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── M1. SE SALÍA LA PÁGINA POR EL LATERAL ──────────────────────────────────
   Los tres bloques de categoría de la portada seguían en dos columnas a 375px:
   la página se iba a ~520px de ancho y se podía arrastrar en horizontal, que es
   el fallo que más ruina la sensación de calidad en un móvil. */
@media (max-width:900px){
  body.wk-neu .wk-home > section.wk-bloque{
    display:block;
    width:auto;
    max-width:100%;
    margin-inline:0;
  }
  body.wk-neu .wk-bloque__texto,
  body.wk-neu .wk-bloque__productos{
    width:auto;
    max-width:100%;
    float:none;
  }
  body.wk-neu .wk-bloque__texto{ margin-bottom:var(--s5); }
}
/* Cinturón y tirantes: ningún elemento puede desbordar el ancho de la ventana. */
@media (max-width:900px){
  body.wk-neu,
  body.wk-neu .site,
  body.wk-neu .wk-home{ overflow-x:clip; }
}

/* ── M2. LA BARRA FIJA DE ABAJO ERA BLANCA CON ICONOS BLANCOS ───────────────
   Invisible: se veía una franja blanca vacía tapando el final de la página.
   Es la barra de Storefront para móvil (menú, buscar, cuenta, carrito). */
.storefront-handheld-footer-bar{
  background:var(--wk-negro, #0D0D0D) !important;
  border-top:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > a::before{
  color:#fff !important;
}
.storefront-handheld-footer-bar ul li.cart .count{
  background:var(--wk-rojo-marca, #CC0000) !important;
  color:#fff !important;
  border-color:var(--wk-rojo-marca, #CC0000) !important;
}
/* Objetivo táctil real de 44px en los cuatro botones. */
.storefront-handheld-footer-bar ul li > a{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* (La reserva de 76px al final del pie ya no hace falta: la barra fija inferior
   se eliminó el 2026-08-10 porque duplicaba cuenta, buscar y carrito, que ya
   están en la cabecera fija. Sin barra, ese hueco era un vacío al final de
   todas las páginas del móvil.) */

/* ── M3. EL SELLO DE PRUEBAS TAPABA UN BOTÓN ────────────────────────────────
   La cinta roja "Testshop" se comía el botón "Mein Konto" de la barra fija y
   bloqueaba sus clics. Se sube por encima de la barra y se vuelve inerte. */
.wk-test{
  pointer-events:none;
  opacity:.92;
}
@media (max-width:768px){
  /* Arriba tapaba la barra roja de envío; al ras de abajo tapaba el botón
     "Mein Konto" de la barra fija. Va justo ENCIMA de la barra fija. */
  /* Antes se subía 64px para no chocar con la barra fija inferior; sin barra
     (eliminada el 2026-08-10) vuelve abajo del todo, donde estorba menos. */
  .wk-test{ bottom:0 !important; top:auto !important; }
}

/* ── M4. OBJETIVOS TÁCTILES ─────────────────────────────────────────────────
   Enlaces del pie a 23px de alto e iconos sociales de 20x20: por debajo del
   mínimo de 44px, se fallan al pulsar con el pulgar. */
@media (max-width:768px){
  .wk-footer__col li a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .wk-footer__social a{
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
  }
}

/* ── M5. EL HOVER SE QUEDABA PEGADO AL TOCAR ────────────────────────────────
   En móvil no hay puntero: al tocar una ficha se activaba :hover y se quedaba
   con el relleno rojo y el subrayado hasta tocar en otro sitio. Los estados de
   hover solo deben existir donde hay ratón de verdad. */
@media (hover:none){
  body.wk-neu li.product:hover .wk-ficha__plancha::before{ transform:scaleX(0); }
  body.wk-neu li.product:hover .wk-ficha__titel a{ text-decoration:none; }
  body.wk-neu li.product:hover .wk-ficha__nr{ color:var(--wk-tinta-3); }
  body.wk-neu ul.products li.product:hover .button{
    background:transparent !important;
    color:var(--wk-rojo) !important;
  }
}

/* ── M6. EL BOTÓN DE COMPRA SE PARTÍA EN DOS LÍNEAS ─────────────────────────
   "In den Warenkorb" no cabía en la celda de 143px de un móvil de 360px y se
   cortaba a media palabra. */
@media (max-width:420px){
  body.wk-neu .wk-btn-ficha,
  body.wk-neu ul.products li.product .button{
    font-size:12px;
    letter-spacing:.03em;
    padding:0 4px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO DE PORTADA — reconstruido 2026-08-08
   Era una banda beige vacía de 340px con el titular arrinconado arriba a la
   izquierda y 900px de nada a su derecha. Ahora: texto + un producto real
   sobre la MISMA plancha que la rejilla, y debajo una franja de datos duros.
   La coherencia es deliberada — el cliente ve en el hero exactamente el mismo
   tratamiento de foto que verá 9.347 veces en el catálogo.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .wk-hero{
  background:var(--wk-papel) !important;
  background-image:none !important;
  border-bottom:1px solid var(--wk-filete);
  min-height:0;
  padding:var(--s8) var(--wk-calle) 0;
  display:block;
}
body.wk-neu .wk-hero__fade{ display:none; }

body.wk-neu .wk-hero__inner{
  max-width:var(--wk-ancho);
  margin-inline:auto;
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:var(--s8);
  align-items:center;
  text-align:left;
}

body.wk-neu .wk-hero h1{
  font-family:var(--wk-cond) !important;
  color:var(--wk-tinta) !important;
  text-transform:none !important;
  font-size:clamp(38px,4.6vw,62px) !important;
  line-height:1.02 !important;
  letter-spacing:-.022em !important;
  text-shadow:none !important;
  margin:0 0 var(--s4) !important;
}
body.wk-neu .wk-hero p{
  color:var(--wk-tinta-2) !important;
  font-size:17px;
  line-height:1.6;
  max-width:46ch;
  margin:0 0 var(--s6);
  text-shadow:none !important;
}

/* --- Los dos botones: uno sólido y uno de filete. Nunca dos sólidos: la
       jerarquía de la acción principal se pierde. --- */
body.wk-neu .wk-hero__acciones{ display:flex; gap:var(--s3); flex-wrap:wrap; }
body.wk-neu .wk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 var(--s6);
  font-family:var(--wk-sans); font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent;
  transition:background-color .15s linear,color .15s linear,border-color .15s linear;
}
body.wk-neu .wk-btn--solido{ background:var(--wk-rojo); color:#fff !important; }
body.wk-neu .wk-btn--solido:hover{ background:var(--wk-rojo-700); color:#fff !important; }
body.wk-neu .wk-btn--filete{
  background:transparent; color:var(--wk-tinta) !important; border-color:var(--wk-filete-2);
}
body.wk-neu .wk-btn--filete:hover{ border-color:var(--wk-tinta); color:var(--wk-tinta) !important; }
body.wk-neu .wk-btn:active{ transform:scale(.985); }

/* --- La figura: misma plancha, mismo multiply, misma sombra de contacto que
       la ficha del catálogo. --- */
body.wk-neu .wk-hero__figura{
  position:relative;
  margin:0;
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  aspect-ratio:4/3;
  isolation:isolate;
  overflow:hidden;
}
body.wk-neu .wk-hero__figura::after{
  content:""; position:absolute; z-index:0;
  left:20%; right:20%; bottom:8%; height:16px;
  border-radius:50%; filter:blur(5px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(30,26,22,.26) 0%,rgba(30,26,22,0) 72%);
}
body.wk-neu .wk-hero__figura img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  padding:6% 7% 9%;
  mix-blend-mode:multiply;
  filter:contrast(1.02) saturate(.98);
}

/* ⚠️ Este bloque va DESPUÉS del de arriba a propósito: `body.wk-neu
   .wk-hero__figura--recorte` y `body.wk-neu .wk-hero__figura` pesan lo MISMO
   (0,2,1), así que a igualdad de peso manda la regla que va después. Puesto
   antes, el marco y la plancha del diseño viejo seguían ganando y la pieza
   recortada salía metida en su recuadro — comprobado en la portada real. */
/* --- La pieza del hero, sin marco (dirección "B", 2026-08-13) -------------
   El recuadro de antes era el ÚNICO marco de toda la portada, y dentro la
   herramienta ocupaba tres cuartos: el resto, hueco pálido sobre fondo pálido.
   Ahora la herramienta va RECORTADA sobre el papel, apoyada en una sombra de
   contacto, y debajo lleva el mismo pie que las fichas del catálogo. */
body.wk-neu .wk-hero__figura--recorte{
  background:none;
  border:0;
  aspect-ratio:auto;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s4);
}
/* La sombra elíptica es lo que hace que la herramienta se APOYE en vez de
   flotar; va por debajo de la foto, no dentro de un recuadro. */
body.wk-neu .wk-hero__figura--recorte::after{
  left:12%; right:12%; top:58%; bottom:auto;
  height:26px;
  filter:blur(11px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(30,26,22,.30) 0%,rgba(30,26,22,0) 70%);
}
body.wk-neu .wk-hero__figura--recorte img{
  width:100%;
  max-width:520px;
  height:auto;
  padding:0;
  object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(30,26,22,.12));
}
body.wk-neu .wk-hero__pieza{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s4);
  width:100%;
  text-decoration:none;
  color:inherit;
}
/* El pie es el de la ficha del catálogo: número de artículo, nombre y precio.
   Así el hero deja de ser un adorno y enseña algo que se puede comprar. */
body.wk-neu .wk-hero__pie{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  gap:var(--s3);
  width:100%;
  border-top:1px solid var(--wk-filete);
  padding-top:var(--s3);
}
body.wk-neu .wk-hero__nr{
  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 .wk-hero__nombre{
  flex:1 1 auto; min-width:0; font-size:13px; line-height:1.4; color:var(--wk-tinta-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.wk-neu .wk-hero__precio{
  font-size:16px; font-weight:700; color:var(--wk-tinta); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body.wk-neu .wk-hero__precio .woocommerce-Price-amount{ color:inherit; }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wk-hero__pieza:hover .wk-hero__nombre{ color:var(--wk-tinta); }
  body.wk-neu .wk-hero__pieza:hover .wk-hero__precio{ color:var(--wk-rojo); }
}
body.wk-neu .wk-hero__pieza:focus-visible{ outline:2px solid var(--wk-rojo); outline-offset:6px; }



/* --- Franja de datos: monoespaciada, filete arriba. Es lo que separa una
       tienda seria de un banner con una frase bonita. --- */
body.wk-neu .wk-hero__datos{
  max-width:var(--wk-ancho);
  margin:var(--s8) auto 0;
  /* El padding a 0 es imprescindible: `list-style:none` NO quita el relleno
     que el navegador da a las listas, y ese resto desplazaba la franja entera
     respecto al titular de arriba. */
  padding:0;
  list-style:none;
  border-top:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;                      /* la separación la hacen los filetes, no el aire */
}
/* Cada dato es una celda con filete a la izquierda: la misma gramática que el
   resto de la tienda (la estructura se dibuja con filetes, no con tarjetas).
   Desde el 2026-08-13 la celda empieza por la CIFRA (dirección "D", elegida por
   el usuario sobre cuatro maquetas): lo que se busca en esta franja son cuatro
   números —39, 2–3, 14 y 9.000—, así que van delante y el texto los explica.
   Fuera los iconos: con la cifra grande delante sobraban, y cuatro iconos de
   línea seguidos pesaban más que el dato. */
body.wk-neu .wk-hero__datos li{
  margin:0;
  display:flex;
  align-items:baseline;      /* la cifra y el texto se apoyan en la misma línea */
  gap:var(--s3);
  padding:var(--s5);
  border-left:1px solid var(--wk-filete);
}
body.wk-neu .wk-hero__datos li:first-child{ border-left:0; padding-left:0; }

body.wk-neu .wk-dato__zahl{
  flex:none;
  font-family:var(--wk-cond);
  font-size:34px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--wk-rojo);
  /* Cifras de ancho fijo: sin esto el 1 del 14 encoge y las cuatro columnas
     dejan de empezar donde deben. */
  font-variant-numeric:tabular-nums;
}

body.wk-neu .wk-dato__icono{
  width:24px; height:24px; flex:none; margin-top:1px;
  fill:none; stroke:var(--wk-tinta-2); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
body.wk-neu .wk-dato__texto{
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
body.wk-neu .wk-hero__datos strong{
  font-size:14px; font-weight:600; color:var(--wk-tinta);
  letter-spacing:-.005em; line-height:1.3;
}
body.wk-neu .wk-dato__nota{
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.05em;
  color:var(--wk-tinta-3); text-transform:uppercase; line-height:1.45;
}

@media (max-width:900px){
  body.wk-neu .wk-hero{ padding-top:var(--s6); }
  body.wk-neu .wk-hero__inner{ grid-template-columns:1fr; gap:var(--s6); }
  /* El TEXTO primero en el móvil: con order:-1 la foto empujaba el titular al píxel 720 de una pantalla de 812, y se entraba viendo una herramienta suelta sin saber en qué tienda. Ahora la pieza queda debajo, asomando por el borde, que es lo que invita a bajar. */
  body.wk-neu .wk-hero__figura{ aspect-ratio:16/10; }
  /* En dos columnas los filetes cambian de sitio: el de la izquierda solo entre
     columnas, y uno arriba para separar las dos filas. */
  body.wk-neu .wk-hero__datos{ grid-template-columns:1fr 1fr; }
  body.wk-neu .wk-hero__datos li:nth-child(-n+2){ border-top:0; }
  body.wk-neu .wk-hero__datos li:nth-child(3),
  body.wk-neu .wk-hero__datos li:nth-child(4){ border-top:1px solid var(--wk-filete); }
  body.wk-neu .wk-hero__datos li:nth-child(3){ border-left:0; padding-left:0; }
  body.wk-neu .wk-dato__zahl{ font-size:30px; }
  body.wk-neu .wk-hero__datos li{ padding:var(--s4); }
  body.wk-neu .wk-hero__datos li:nth-child(odd){ border-left:0; padding-left:0; }
  body.wk-neu .wk-hero__datos li:nth-child(n+3){ border-top:1px solid var(--wk-filete); }
  body.wk-neu .wk-btn{ flex:1 1 auto; }
}
@media (max-width:480px){
  body.wk-neu .wk-hero__datos{ grid-template-columns:1fr; }
  body.wk-neu .wk-hero__datos li{ border-left:0; padding-left:0; padding-right:0; }
  body.wk-neu .wk-hero__datos li + li{ border-top:1px solid var(--wk-filete); }
}

/* --- La fila curada respeta el nº de columnas que pide la plantilla --- */
body.wk-neu ul.products.wk-reihe.columns-4{ grid-template-columns:repeat(4,1fr) !important; }
body.wk-neu ul.products.wk-reihe.columns-3{ grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:1279px){
  body.wk-neu ul.products.wk-reihe,
  body.wk-neu ul.products.wk-reihe.columns-4{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:767px){
  body.wk-neu ul.products.wk-reihe,
  body.wk-neu ul.products.wk-reihe.columns-4,
  body.wk-neu ul.products.wk-reihe.columns-3{ grid-template-columns:repeat(2,1fr) !important; }
}
/* En la fila curada las celdas van sueltas, así que necesitan su propio filete */
body.wk-neu ul.products.wk-reihe li.product{
  border:1px solid var(--wk-filete) !important;
}


/* ── content-visibility: solo donde compensa ────────────────────────────────
   Se aplicaba a TODAS las celdas de producto. En las filas curadas de la
   portada (4–5 artículos) no ahorra nada y sí tiene coste: el navegador deja
   sin pintar lo que está fuera de pantalla, así que la búsqueda del navegador
   (Ctrl+F) no encuentra esos productos y las capturas y la impresión salen con
   huecos. Se deja solo en la rejilla larga del catálogo, que es donde de
   verdad hay decenas de celdas.
   El tamaño estimado sube a 520px: estaba en 480 y la celda real mide ~511,
   así que la barra de scroll daba un salto al llegar a cada fila. */
body.wk-neu ul.products.wk-reihe > li.product{
  content-visibility:visible;
  contain-intrinsic-size:auto;
}
body.wk-neu .woocommerce ul.products:not(.wk-reihe) > li.product,
body.wk-neu .archive ul.products:not(.wk-reihe) > li.product{
  contain-intrinsic-size:auto 520px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA PORTADA NO ESTÁ DENTRO DE .woocommerce
   front-page.php pinta las filas en un <div class="wk-home"> normal, así que
   TODAS las reglas escritas como `.woocommerce ul.products …` fallan ahí. Se
   repiten sin ese ancestro. No se le añade la clase .woocommerce al contenedor
   a propósito: activaría la rejilla pegada de 4 columnas del catálogo y
   desmontaría las filas curadas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL FALLO QUE PARTÍA TODAS LAS FILAS ────────────────────────────────────
   WooCommerce añade ::before/::after a ul.products como limpieza de floats.
   En una rejilla dejan de ser invisibles: se convierten en ELEMENTOS DE LA
   REJILLA y ocupan la primera celda. Por eso los cuatro primeros productos
   salían en las columnas 2–5 y el quinto se caía a la fila siguiente, en la
   columna 1 — se veía como si cada fila perdiera un artículo.
   La regla original anulaba estos pseudoelementos, pero exigía el ancestro
   .woocommerce y en la portada no existe. */
body.wk-neu ul.products::before,
body.wk-neu ul.products::after,
body.wk-neu ul.products li.product::before,
body.wk-neu ul.products li.product::after{
  content:none !important;
  display:none !important;
}

/* ── La foto y el título de la portada, igual que en el catálogo ────────────
   Sin el ancestro .woocommerce ganaban las reglas del tema OSCURO: la foto
   perdía el inset del 11/12/14 % (se pegaba al borde de la celda y pisaba su
   propia sombra de contacto) y el título salía en otra fuente y otro cuerpo.
   La misma tarjeta se veía distinta en la portada y en /shop. */
body.wk-neu .wk-ficha__plancha img{
  width:100% !important;
  height:100% !important;
  padding:11% 12% 14% !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  object-fit:contain !important;
}
body.wk-neu .wk-ficha__titel,
body.wk-neu .wk-home .woocommerce-loop-product__title{
  font-family:var(--wk-sans) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.33 !important;
  letter-spacing:-.005em !important;
  text-transform:none !important;
  color:var(--wk-tinta) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Red de seguridad: si alguna versión de Storefront vuelve a colar estos dos
   añadidos por otro hook, que al menos no se vean. */
body.wk-neu .storefront-sticky-add-to-cart,
body.wk-neu .product-pagination{ display:none !important; }

/* ── La foto principal, con el MISMO tratamiento que la rejilla ─────────────
   Era la única foto "pegatina" de toda la tienda: sin margen interior y sin
   sombra de contacto, mientras las 9.347 de la rejilla sí lo tienen. */
body.wk-neu.single-product div.product .woocommerce-product-gallery{
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  padding:0;
  position:relative;
  isolation:isolate;
}
body.wk-neu.single-product .woocommerce-product-gallery__wrapper{ margin:0; }
body.wk-neu.single-product .woocommerce-product-gallery__image{ position:relative; }
body.wk-neu.single-product .woocommerce-product-gallery__image img{
  mix-blend-mode:multiply;
  padding:7% 8% 9%;
  width:100%;
  height:auto;
}
/* La sombra de contacto va DEBAJO de la foto: como el fondo blanco se
   multiplica, se ve a través y el producto queda apoyado, no flotando. */
body.wk-neu.single-product .woocommerce-product-gallery::after{
  content:""; position:absolute; z-index:0;
  left:24%; right:24%; bottom:7%; height:14px;
  border-radius:50%; filter:blur(4px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(30,26,22,.22) 0%,rgba(30,26,22,0) 72%);
}
body.wk-neu.single-product .woocommerce-product-gallery__wrapper{ position:relative; z-index:1; }

/* ── Las pestañas, en horizontal ────────────────────────────────────────────
   Storefront las maqueta como una columna vertical al 30 % del ancho, con el
   panel al lado: se veía como dos trozos sueltos y el filete del rediseño
   quedaba huérfano. */
body.wk-neu.single-product .woocommerce-tabs{ display:block; width:100%; }
body.wk-neu.single-product .woocommerce-tabs ul.tabs{
  display:flex; flex-wrap:wrap; gap:var(--s5);
  width:100%; float:none; margin:0 0 var(--s5); padding:0;
  border-bottom:1px solid var(--wk-filete);
}
body.wk-neu.single-product .woocommerce-tabs ul.tabs li{
  margin:0; padding:0; background:none; border:0; border-radius:0;
}
body.wk-neu.single-product .woocommerce-tabs ul.tabs li::before,
body.wk-neu.single-product .woocommerce-tabs ul.tabs li::after{ display:none !important; }
body.wk-neu.single-product .woocommerce-tabs ul.tabs li a{
  position:relative;
  display:block; padding:0 0 12px;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  border-bottom:2px solid transparent;
}
body.wk-neu.single-product .woocommerce-tabs ul.tabs li a::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;
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu.single-product .woocommerce-tabs ul.tabs li a:hover::after{ transform:scaleX(1); }
}
body.wk-neu.single-product .woocommerce-tabs ul.tabs li.active a{
  border-bottom-color:var(--wk-rojo);
  color:var(--wk-tinta) !important;
}
body.wk-neu.single-product .woocommerce-tabs .panel{
  width:100%; float:none; margin:0; padding:0;
}
/* Cada panel repetía como <h2> el nombre de la pestaña recién pulsada. */
body.wk-neu.single-product .woocommerce-tabs .panel > h2:first-child{ display:none; }

/* ── «Produktsicherheit»: el fabricante (GPSR) ─────────────────────────────
   Germanized lo suelta como un párrafo gris suelto. Aquí va como los demás
   datos de la ficha: rótulo en monoespaciada y la dirección en su recuadro,
   igual que la tabla de «Zusätzliche Information» de al lado. */
body.wk-neu.single-product .woocommerce-tabs .panel .wc-gzd-product-manufacturer-heading,
body.wk-neu.single-product .woocommerce-tabs .panel .wc-gzd-manufacturer-eu-title{
  margin:0 0 var(--s3);
  font-family:var(--wk-mono); font-size:12px; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wk-tinta-3);
}
body.wk-neu.single-product .woocommerce-tabs .panel .wc-gzd-manufacturer-eu-title{ margin-top:var(--s5); }
/* ── La ficha del fabricante (inc/gpsr.php) ────────────────────────────────
   Tarjeta con filete rojo arriba, cabecera con el logo de BGS y el nombre, y
   el cuerpo en dos columnas (dirección | contacto). Elegida por el usuario el
   19.09.2026 frente a una versión en renglones.
   `.wc-gzd-manufacturer-*` se mantiene con estilo: es lo que pinta Germanized
   si algún día se quita el filtro del tema. */
body.wk-neu .wk-hst__logo{
  height:auto; display:block;
  padding:0 !important;   /* el tema empuja 4% abajo a las fotos de catálogo */
}
body.wk-neu .wk-hst__nota{
  margin:var(--s4) 0 0 !important; max-width:70ch;
  font-size:13px; line-height:1.55; color:var(--wk-tinta-3) !important;
}
/* ⚠️ Los selectores del correo nombran también al contenedor: la regla
   `body.wk-neu .wc-gzd-additional-info a` (0,2,2 con !important) deja si no el
   enlace en gris y subrayado. */
body.wk-neu .wk-hst .wk-hst__mail{
  color:var(--wk-rojo) !important;
  text-decoration:none !important; border-bottom:1px solid transparent;
}
body.wk-neu .wk-hst .wk-hst__mail:hover{ border-bottom-color:currentColor; }

body.wk-neu .wk-hst--karte{
  max-width:720px;
  border:1px solid var(--wk-filete);
  border-top:3px solid var(--wk-rojo);
  background:var(--wk-celda);
}
body.wk-neu .wk-hst__kopf{
  display:flex; align-items:center; gap:var(--s5);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--wk-filete);
}
body.wk-neu .wk-hst__kopf .wk-hst__logo{ width:96px; flex:0 0 auto; }
body.wk-neu .wk-hst__r{
  margin:0 0 2px !important;
  font-family:var(--wk-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-hst__n{
  margin:0 !important;
  font-family:var(--wk-cond); font-size:22px; font-weight:700;
  letter-spacing:-.01em; line-height:1.15; color:var(--wk-tinta) !important;
}
body.wk-neu .wk-hst__rejilla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr));
}
body.wk-neu .wk-hst__celda{ padding:var(--s4) var(--s5); }
body.wk-neu .wk-hst__celda + .wk-hst__celda{ border-left:1px solid var(--wk-filete); }
body.wk-neu .wk-hst__k{
  margin:0 0 4px !important;
  font-family:var(--wk-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-hst__v{
  margin:0 !important;
  font-size:15px; line-height:1.6; color:var(--wk-tinta-2) !important;
}
@media (max-width:640px){
  body.wk-neu .wk-hst__rejilla{ grid-template-columns:minmax(0,1fr); }
  body.wk-neu .wk-hst__celda + .wk-hst__celda{
    border-left:0; border-top:1px solid var(--wk-filete);
  }
  body.wk-neu .wk-hst__kopf{ padding:var(--s4); gap:var(--s4); }
  body.wk-neu .wk-hst__kopf .wk-hst__logo{ width:84px; }
  body.wk-neu .wk-hst__celda{ padding:var(--s4); }
}

body.wk-neu .wc-gzd-manufacturer-address,
body.wk-neu .wc-gzd-manufacturer-eu-address{
  margin:0 !important;
  padding:var(--s4);
  border:1px solid var(--wk-filete);
  background:var(--wk-realce);
  font-size:15px; line-height:1.6; color:var(--wk-tinta) !important;
}
body.wk-neu .wc-gzd-manufacturer-address a,
body.wk-neu .wc-gzd-manufacturer-eu-address a{ color:var(--wk-rojo) !important; }

/* ── Rótulo de relacionados, como el resto de rótulos de sección ───────────── */
body.wk-neu.single-product .related > h2,
body.wk-neu.single-product .upsells > h2{
  font-family:var(--wk-cond) !important;
  font-size:26px !important;
  text-transform:none !important;
  letter-spacing:-.01em !important;
  text-align:left !important;
  color:var(--wk-tinta) !important;
  border-bottom:2px solid var(--wk-tinta);
  padding-bottom:var(--s3);
  margin-bottom:var(--s6);
}
/* 3 relacionados en una rejilla de 4 dejaban una celda vacía enmarcada. */
body.wk-neu.single-product .related ul.products,
body.wk-neu.single-product .upsells ul.products{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:var(--s5); border:0;
}
body.wk-neu.single-product .related ul.products li.product,
body.wk-neu.single-product .upsells ul.products li.product{
  border:1px solid var(--wk-filete) !important;
}

/* ── Disponibilidad y datos: el verde neón fuera ───────────────────────────── */
body.wk-neu.single-product .stock.in-stock{
  color:var(--wk-tinta-2) !important;
  font-size:13px;
  display:flex; align-items:center; gap:7px;
}
body.wk-neu.single-product .stock.in-stock::before{
  content:""; width:6px; height:6px; flex:none; background:var(--wk-ok);
}


/* ═══════════════════════════════════════════════════════════════════════════
   EL MARGEN DE LA FOTO YA VIENE EN LA FOTO — 2026-08-08
   Todas las imágenes del catálogo se reencuadraron en el servidor: fondo
   recortado y producto centrado ocupando el 82 % de un lienzo cuadrado.
   El inset del 11/12/14 % que había aquí se SUMABA a ese margen, así que el
   producto acababa ocupando el 61,6 % de la celda y se veía pequeño y flotando
   en un mar de blanco. Con el margen ya normalizado en origen, el CSS solo
   necesita un pelín de sesgo inferior para que el objeto se apoye en su sombra
   de contacto en vez de quedar centrado en el aire.
   ⚠️ Si algún día se vuelve a subir catálogo SIN pasar el reencuadre, hay que
   devolver el inset o esas fotos saldrán pegadas al borde.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .wk-ficha__plancha img,
body.wk-neu ul.products li.product a img{
  padding:0 0 4% !important;
}
body.wk-neu .wk-hero__figura img{
  padding:0 0 3%;
}
body.wk-neu .wkc-img-wrap img{
  padding:0 0 3%;
  object-fit:contain;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESET DE HERENCIA DEL TEMA OSCURO EN EL ÁREA CLARA
   style.css tiene ~40 reglas que pintan el texto de BLANCO porque se escribió
   para una tienda de fondo negro. Sobre el papel, ese texto desaparece.
   Hasta ahora se iban tapando de una en una y siempre se escapaba alguna: las
   pestañas inactivas de la ficha y las viñetas de la descripción salían en
   blanco sobre blanco, ilegibles.
   Aquí se resetea de golpe todo el texto corrido del área de contenido.
   Se excluyen los elementos con clase wk- (tienen su color a propósito: el
   Art.-Nr. en gris, el eyebrow en rojo, el precio en tinta) y los enlaces,
   que se tratan aparte.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Este selector NO lleva combinador descendiente a propósito. La primera
   versión se escribió como ":is(p, li, …) :not(…)" —con espacio— y por eso
   alcanzaba también a los BOTONES metidos dentro de párrafos y listas: el
   botón rojo "In den Warenkorb" del carrito y el "Anmelden" de la cuenta se
   quedaron con el texto gris sobre rojo, a 1,7:1. Se aplica al elemento en sí
   y se excluyen enlaces y botones, que tienen su propio color. */
body.wk-neu .site-content :is(p, li, dd, dt, td, th, small, address,
                              figcaption, blockquote, label, legend, caption):not([class*="wk-"]):not(.button),
body.wk-neu .entry-content :is(p, li, dd, dt, td, th, small, blockquote),
body.wk-neu .woocommerce-Tabs-panel :is(p, li, dd, dt, td, th),
body.wk-neu .woocommerce-product-details__short-description :is(p, li){
  color: var(--wk-tinta-2) !important;
}
/* Y que ningún botón herede ese color: los botones se pintan aparte. */
body.wk-neu .site-content :is(a, button, .button, input[type="submit"]),
body.wk-neu .site-content :is(a, button, .button) *{
  color: inherit;
}
/* ⚠️ Este "todos los botones en blanco" hay que acotarlo: pillaba también los
   controles PEQUEÑOS de los bloques —el + y el − de la cantidad y la papelera
   de quitar— y los dejaba en blanco sobre blanco, invisibles. Solo aplica a
   los botones de acción de verdad. */
body.wk-neu .site-content :is(.button, button, input[type="submit"],
                              .wp-block-button__link, .wc-block-components-button)
                         :not(.wc-block-components-quantity-selector__button)
                         :not(.wc-block-cart-item__remove-link)
                         :not(.show-password-input),
body.wk-neu .site-content .button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
body.wk-neu .site-content button:not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):not(.wc-block-components-panel__button):not(.show-password-input),
body.wk-neu .site-content input[type="submit"],
body.wk-neu .site-content .wp-block-button__link{
  color:#fff !important;
}
body.wk-neu .site-content .wk-btn--filete{ color:var(--wk-tinta) !important; }
body.wk-neu ul.products li.product .button,
body.wk-neu ul.products li.product .added_to_cart{ color:var(--wk-rojo) !important; }
body.wk-neu ul.products li.product:hover .button,
body.wk-neu ul.products li.product .button:hover{ color:#fff !important; }

/* Las pestañas inactivas de la ficha: eran rgba(255,255,255,.6) sobre papel,
   1,13:1 — literalmente invisibles. */
body.wk-neu .woocommerce-tabs ul.tabs li a,
body.wk-neu .woocommerce-tabs ul.tabs li:not(.active) a{
  color: var(--wk-tinta-3) !important;   /* 5,4:1 */
}
body.wk-neu .woocommerce-tabs ul.tabs li a:hover{
  color: var(--wk-tinta) !important;
}
body.wk-neu .woocommerce-tabs ul.tabs li.active a{
  color: var(--wk-tinta) !important;
}

/* El subtítulo "Technische Daten" y demás encabezados dentro de la
   descripción, que heredaban el blanco de los h4/h5 del tema oscuro. */
body.wk-neu .site-content :is(h1, h2, h3, h4, h5, h6){
  color: var(--wk-tinta);
}

/* "Alle Produkte" del pie iba en rojo de marca sobre negro: 3,3:1, falla AA.
   Mismo criterio que el menú — el texto en blanco y el rojo como filete. */
.wk-footer__destacado{
  color:#fff !important;
  border-bottom:2px solid var(--wk-rojo-marca, #CC0000);
  padding-bottom:2px;
  text-decoration:none !important;
}
.wk-footer__destacado:hover{ border-bottom-color:#fff; }


/* Dos grises que no llegaban a AA, medidos: "Derzeit nicht verfügbar" iba a
   3,66:1 y la letra pequeña de la barra de ventajas a 4,35:1 sobre la banda
   beige. Suben al gris que sí pasa. */
body.wk-neu .wk-ficha__lager--aus{ color:var(--wk-tinta-3) !important; }


/* El asterisco de campo obligatorio venía en el naranja de WooCommerce
   (#e2401c), 3,73:1 sobre papel. Al rojo del sistema, que sí pasa AA. */
body.wk-neu .required,
body.wk-neu abbr.required{
  color:var(--wk-rojo) !important;
  text-decoration:none;
  border:0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESCRIPCIÓN DE PRODUCTO RECONSTRUIDA
   El feed de BGS entrega listas planas donde todo pesa lo mismo. Aquí cada
   cosa recibe el tratamiento que le corresponde: las características se leen
   como texto, las medidas del envío como piezas contables y los datos como
   pares clave/valor. La medida de línea se corta en 68 caracteres — a 1.380px
   de ancho una línea corrida son ~170 caracteres y el ojo pierde el renglón.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Tamaño de lectura. La descripción es lo que decide la compra —qué trae la
   caja y en qué medidas— y se quedaba en el 15px del texto corriente, que en
   una ficha técnica se lee con esfuerzo. El usuario pidió letra más grande el
   2026-09-10: el cuerpo pasa a 17px y de ahí heredan las piezas; los datos en
   monoespaciada y los rótulos suben en la misma proporción (~13 %). */
body.wk-neu .wk-desc{ max-width:68ch; font-size:17px; line-height:1.65; }  /* 17: subido desde 15 el 2026-09-10 a peticion del usuario (se leia pequeno) */
body.wk-neu .wk-desc__intro{ margin:0 0 var(--s4); }

/* Características: viñeta propia (cuadrado, no círculo: lenguaje de panel
   industrial) y sangría que no se va a los 45px de Storefront. */
body.wk-neu .wk-desc__lista{
  list-style:none;
  margin:0 0 var(--s6);
  padding:0;
}
body.wk-neu .wk-desc__lista li{
  position:relative;
  padding-left:18px;
  margin-bottom:var(--s2);
  line-height:1.6;
}
body.wk-neu .wk-desc__lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  background:var(--wk-rojo);
}

/* Bloques secundarios: separados por filete, no por un cambio de fondo. */
body.wk-neu .wk-desc__bloque{
  margin-top:var(--s6);
  padding-top:var(--s5);
  border-top:1px solid var(--wk-filete);
}
body.wk-neu .wk-desc__rotulo{
  font-family:var(--wk-mono) !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wk-tinta-3) !important;
  margin:0 0 var(--s3) !important;
}
body.wk-neu .wk-desc__envio + .wk-desc__envio{ margin-top:var(--s4); }
body.wk-neu .wk-desc__envio-titulo{
  margin:0 0 var(--s3);
  font-weight:500;
  font-size:17px;
  color:var(--wk-tinta) !important;
}

/* Las medidas, una a una. Antes iban las doce seguidas dentro de una única
   viñeta ("SW 5/32" – 3/16" – 7/32" – …") y no había forma de contarlas ni de
   buscar la que interesa. En monoespaciada se alinean solas. */
body.wk-neu .wk-desc__medidas{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
body.wk-neu .wk-desc__medidas li{
  font-family:var(--wk-mono);
  font-size:14.5px;
  letter-spacing:.02em;
  color:var(--wk-tinta) !important;
  background:var(--wk-celda);
  border:1px solid var(--wk-filete-2);
  padding:5px 9px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Pares clave/valor, alineados en dos columnas reales. */
body.wk-neu .wk-desc__datos{
  display:grid;
  grid-template-columns:minmax(9rem,auto) 1fr;
  gap:0;
  margin:0;
}
body.wk-neu .wk-desc__datos dt,
body.wk-neu .wk-desc__datos dd{
  margin:0;
  padding:9px 0;
  border-top:1px solid var(--wk-filete);
  font-size:15.5px;
}
body.wk-neu .wk-desc__datos dt{
  color:var(--wk-tinta-3) !important;
  padding-right:var(--s5);
}
body.wk-neu .wk-desc__datos dd{
  color:var(--wk-tinta) !important;
  font-family:var(--wk-mono);
  font-size:14.5px;
}
body.wk-neu .wk-desc__datos dt:first-of-type,
body.wk-neu .wk-desc__datos dt:first-of-type + dd{ border-top:0; }

@media (max-width:560px){
  body.wk-neu .wk-desc__datos{ grid-template-columns:1fr; }
  body.wk-neu .wk-desc__datos dd{ padding-top:0; border-top:0; }
  body.wk-neu .wk-desc__datos dt{ padding-bottom:2px; }
}

/* Lieferumfang como lista de piezas: cantidad a la izquierda en monoespaciada
   (se cuenta de un vistazo) y nombre + medidas a la derecha. */
body.wk-neu .wk-desc__piezas{ list-style:none; margin:0; padding:0; }
body.wk-neu .wk-pieza{
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:var(--s3);
  padding:10px 0;
  border-top:1px solid var(--wk-filete);
  align-items:baseline;
}
body.wk-neu .wk-pieza:first-child{ border-top:0; padding-top:0; }
body.wk-neu .wk-pieza__n{
  font-family:var(--wk-mono);
  font-size:15px;
  color:var(--wk-tinta-3) !important;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.wk-neu .wk-pieza__nombre{ color:var(--wk-tinta) !important; font-weight:500; font-size:17px; }
body.wk-neu .wk-pieza__medida{
  font-family:var(--wk-mono); font-size:15.5px; color:var(--wk-tinta-2) !important;
}
body.wk-neu .wk-pieza .wk-desc__medidas{
  display:flex; flex-wrap:wrap; gap:5px; margin-top:7px;
}
body.wk-neu .wk-pieza .wk-desc__medidas span{
  font-family:var(--wk-mono); font-size:14.5px; letter-spacing:.02em;
  color:var(--wk-tinta) !important; background:var(--wk-celda);
  border:1px solid var(--wk-filete-2); padding:4px 8px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Sin características previas, el primer bloque arrastraba su separación y su
   filete superior: quedaba un hueco muerto de ~60px bajo las pestañas. */
body.wk-neu .wk-desc__bloque:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

/* El texto corrido se corta en 68 caracteres para poder leerlo, pero la lista
   de piezas es TABULAR: encajonarla en esa medida obliga a partir las medidas
   en más renglones de los necesarios. Se le deja más aire. */
body.wk-neu .wk-desc{ max-width:none; }
body.wk-neu .wk-desc__intro,
body.wk-neu .wk-desc__lista{ max-width:68ch; }
body.wk-neu .wk-desc__bloque{ max-width:900px; }


/* ═══════════════════════════════════════════════════════════════════════════
   CARRITO Y CHECKOUT — BLOQUES DE WOOCOMMERCE
   Todo el CSS de carrito/pago que había en el tema apuntaba al carrito CLÁSICO
   (.woocommerce-cart-form, form.checkout). Estas páginas usan los BLOQUES
   (wc-block-*), así que no les llegaba ni una regla: salían con el aspecto de
   serie de WooCommerce, ajeno al resto de la tienda.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Lienzo y ritmo ---------------------------------------------------- */
body.wk-neu .wp-block-woocommerce-cart,
body.wk-neu .wp-block-woocommerce-checkout{
  max-width:var(--wk-ancho);
  margin-inline:auto;
  padding-inline:var(--wk-calle);
}
body.wk-neu .wc-block-components-main{ padding-right:var(--s8); }

/* --- Cabecera de la tabla: filete de 2px, como los rótulos de sección --- */
body.wk-neu .wc-block-cart-items__header{
  border-bottom:2px solid var(--wk-tinta);
  color:var(--wk-tinta-3) !important;
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* --- Línea de producto -------------------------------------------------- */
body.wk-neu .wc-block-cart-items__row{ border-bottom:1px solid var(--wk-filete); }
body.wk-neu .wc-block-cart-item__image img{
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  mix-blend-mode:multiply;
  width:88px; height:88px; object-fit:contain;
}
body.wk-neu .wc-block-components-product-name{
  font-family:var(--wk-sans) !important;
  font-size:15px !important;
  font-weight:500 !important;
  color:var(--wk-tinta) !important;
  text-decoration:none !important;
}
body.wk-neu .wc-block-components-product-name:hover{ text-decoration:underline !important; }

/* La descripción completa del producto NO pinta nada en el carrito: el cliente
   ya decidió. Se colaban hasta los "Technische Daten" y cada línea ocupaba
   media pantalla. */
body.wk-neu .wc-block-components-product-metadata__description{ display:none !important; }
body.wk-neu .wc-block-components-product-price{
  font-family:var(--wk-sans) !important;
  color:var(--wk-tinta) !important;
  font-variant-numeric:tabular-nums;
}

/* --- Selector de cantidad: era salmón y redondeado -------------------- */
body.wk-neu .wc-block-components-quantity-selector{
  border:1px solid var(--wk-filete-2) !important;
  border-radius:0 !important;
  background:var(--wk-celda);
  max-width:118px;
}
body.wk-neu .wc-block-components-quantity-selector__input{
  color:var(--wk-tinta) !important;
  background:transparent !important;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
body.wk-neu .wc-block-components-quantity-selector__button{
  background:transparent !important;
  color:var(--wk-tinta-2) !important;
  opacity:1 !important;
  font-size:17px;
  min-width:36px;
  min-height:40px;      /* objetivo táctil */
  transition:background-color .14s linear,color .14s linear;
}
body.wk-neu .wc-block-components-quantity-selector__button:hover{
  background:var(--wk-hundido) !important;
  color:var(--wk-tinta) !important;
}
body.wk-neu .wc-block-cart-item__remove-link{
  color:var(--wk-tinta-3) !important;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:2px;
}
body.wk-neu .wc-block-cart-item__remove-link:hover{ color:var(--wk-rojo) !important; }

/* --- Panel de totales: una ficha de papel, no una caja gris ------------- */
body.wk-neu .wp-block-woocommerce-cart-order-summary-block,
body.wk-neu .wc-block-components-sidebar .wc-block-components-panel,
body.wk-neu .wp-block-woocommerce-checkout-order-summary-block{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s5);
}
body.wk-neu .wc-block-components-totals-item{
  font-size:14px;
  color:var(--wk-tinta-2) !important;
}
body.wk-neu .wc-block-components-totals-item__value{
  color:var(--wk-tinta) !important;
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
body.wk-neu .wc-block-components-totals-footer-item{
  border-top:2px solid var(--wk-tinta) !important;
}
body.wk-neu .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:26px;
  font-weight:600;
  letter-spacing:-.015em;
}
body.wk-neu .wc-block-components-totals-wrapper{
  border-top:1px solid var(--wk-filete) !important;
}

/* --- Botones ------------------------------------------------------------ */
body.wk-neu .wc-block-cart__submit-button,
body.wk-neu .wc-block-components-checkout-place-order-button{
  background:var(--wk-rojo) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  height:56px;
  font-family:var(--wk-sans) !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none !important;   /* venía subrayado */
  transition:background-color .15s linear;
}
body.wk-neu .wc-block-cart__submit-button:hover,
body.wk-neu .wc-block-components-checkout-place-order-button:hover{
  background:var(--wk-rojo-700) !important;
}
body.wk-neu .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):not(.wc-block-cart__submit-button){
  border-radius:0 !important;
}

/* --- Cupón y paneles plegables ----------------------------------------- */
body.wk-neu .wc-block-components-panel__button{
  color:var(--wk-tinta) !important;
  font-weight:500;
  font-size:14px;
}
body.wk-neu .wc-block-components-totals-coupon__input input,
body.wk-neu .wc-block-components-text-input input{
  border-radius:0 !important;
  border:1px solid var(--wk-filete-2) !important;
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
}

/* --- Formularios del checkout ------------------------------------------ */
body.wk-neu .wc-block-components-checkout-step__title{
  font-family:var(--wk-cond) !important;
  font-size:22px !important;
  color:var(--wk-tinta) !important;
  letter-spacing:-.01em;
  text-transform:none !important;
}
body.wk-neu .wc-block-components-checkout-step__heading{ margin-bottom:var(--s3); }
body.wk-neu .wc-block-components-checkout-step__description{ color:var(--wk-tinta-3) !important; }
body.wk-neu .wc-block-components-text-input label,
body.wk-neu .wc-block-components-checkbox__label{ color:var(--wk-tinta-2) !important; }
body.wk-neu .wc-block-components-text-input.is-active label{ color:var(--wk-tinta-3) !important; }
body.wk-neu .wc-block-components-text-input input:focus,
body.wk-neu .wc-block-components-select select:focus{
  outline:2px solid var(--wk-rojo);
  outline-offset:1px;
  box-shadow:none !important;
}

/* Los radios de envío y de pago iban CUADRADOS, iguales que las casillas de
   aceptación: el cliente no distinguía "elige uno" de "marca esto". */
body.wk-neu .wc-block-components-radio-control__input{ border-radius:50% !important; }
body.wk-neu .wc-block-components-radio-control__option{
  border-bottom:1px solid var(--wk-filete);
  padding-block:var(--s3);
}
body.wk-neu .wc-block-components-radio-control__option--checked-option-highlighted,
body.wk-neu .wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  border:1px solid var(--wk-tinta);
  background:var(--wk-celda);
}
body.wk-neu .wc-block-components-checkbox__input{ border-radius:0 !important; }

/* --- Avisos ------------------------------------------------------------- */
body.wk-neu .wc-block-components-notice-banner{
  border-radius:0 !important;
  background:var(--wk-celda) !important;
  border:1px solid var(--wk-filete) !important;
  border-left:3px solid var(--wk-rojo) !important;
  color:var(--wk-tinta) !important;
}
body.wk-neu .wc-block-components-notice-banner.is-error{ border-left-color:var(--wk-rojo) !important; }
body.wk-neu .wc-block-components-notice-banner.is-success{ border-left-color:var(--wk-ok) !important; }

/* --- Carrito vacío ------------------------------------------------------ */
body.wk-neu .wp-block-woocommerce-empty-cart-block{ text-align:left; }
body.wk-neu .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title{
  font-family:var(--wk-cond) !important;
  font-size:26px !important;
  font-weight:700 !important;
  color:var(--wk-tinta) !important;
  text-transform:none !important;
}
/* La carita de dibujos de 128px casi negra no pega con nada de esta tienda. */
body.wk-neu .wc-block-cart__empty-cart__title.with-empty-cart-icon::before{ display:none !important; }

@media (max-width:900px){
  body.wk-neu .wc-block-components-main{ padding-right:0; }
  body.wk-neu .wp-block-woocommerce-cart,
  body.wk-neu .wp-block-woocommerce-checkout{ padding-inline:var(--wk-calle); }
}

/* --- Los dos controles pequeños del carrito, con nombre y apellidos -------- */
body.wk-neu .wc-block-components-quantity-selector__button,
body.wk-neu .site-content button.wc-block-components-quantity-selector__button{
  color:var(--wk-tinta) !important;
  background:transparent !important;
  border:0 !important;
  font-size:18px;
  line-height:1;
  opacity:1 !important;
}
body.wk-neu .wc-block-components-quantity-selector__button:hover{
  background:var(--wk-hundido) !important;
  color:var(--wk-tinta) !important;
}
body.wk-neu .wc-block-components-quantity-selector__button:disabled{
  color:var(--wk-tinta-4) !important;
  background:transparent !important;
}

/* Quitar del carrito: era un cuadrado rojo de 24px. Pasa a icono discreto que
   solo se pone rojo al apuntarlo — borrar no debe ser lo más llamativo. */
body.wk-neu .wc-block-cart-item__remove-link,
body.wk-neu .site-content button.wc-block-cart-item__remove-link{
  background:transparent !important;
  color:var(--wk-tinta-3) !important;
  border:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:44px;
  padding:0 6px !important;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:2px;
  opacity:1 !important;
}
body.wk-neu .wc-block-cart-item__remove-link:hover{ color:var(--wk-rojo) !important; }
body.wk-neu .wc-block-cart-item__remove-link svg{ fill:currentColor; }

/* El resumen del pedido venía con un gris frío de serie (#EEE) que no existe
   en esta paleta: dentro de una ficha de papel cálido cantaba. Y los dos
   paneles (artículos y total) iban separados por un hueco, como si fueran dos
   cosas distintas: son la misma. */
body.wk-neu .wc-block-components-order-summary,
body.wk-neu .wc-block-components-order-summary__content,
body.wk-neu .wp-block-woocommerce-checkout-order-summary-cart-items-block{
  background:transparent !important;
  border:0 !important;
}
body.wk-neu .wc-block-components-order-summary-item{
  border-bottom:1px solid var(--wk-filete);
  padding-block:var(--s3);
}
body.wk-neu .wc-block-components-order-summary-item:last-child{ border-bottom:0; }
body.wk-neu .wc-block-components-order-summary-item__image img{
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  mix-blend-mode:multiply;
}
/* El contador de unidades sobre la miniatura: círculo negro de marca. */
body.wk-neu .wc-block-components-order-summary-item__quantity{
  background:var(--wk-tinta) !important;
  /* Con #fff fijo desaparecía en oscuro: el fondo es --wk-tinta, que allí se
     vuelve CLARA. Una pastilla invertida usa los dos colores del par. */
  color:var(--wk-papel) !important;
  border:0 !important;
  box-shadow:none !important;
  font-family:var(--wk-mono);
  font-size:12px;
}
/* Artículos y total, en la misma ficha */
body.wk-neu .wp-block-woocommerce-checkout-totals-block{
  margin-top:0 !important;
  border-top:0 !important;
}
body.wk-neu .wp-block-woocommerce-checkout-order-summary-block{ margin-bottom:0; }


/* ═══════════════════════════════════════════════════════════════════════════
   MEIN KONTO — acceso y registro                       (rehecho 2026-08-23)

   Qué estaba mal y qué lo arregla:
   · El <h2> iba FUERA del formulario y el de la derecha ocupa dos líneas, así
     que las dos cajas arrancaban a alturas distintas → ahora cada columna es
     una tarjeta con la cabecera DENTRO (plantilla propia en
     woocommerce/myaccount/form-login.php), y las dos empiezan igual.
   · Las cajas tenían anchos distintos (`max-width:420px` dentro de columnas de
     otro ancho) → ahora cada tarjeta ocupa su columna entera y las columnas son
     dos fracciones iguales.
   · La tarjeta de registro se quedaba con un hueco muerto abajo → lleva una
     lista de ventajas anclada al pie con `margin-top:auto`.
   · El ojo de "mostrar contraseña" era un bloque rojo enorme, más llamativo que
     el propio botón de acceder → pasa a ser un cuadro con filete, en tinta.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `woocommerce-account` es una clase del <body>, NO de ningún contenedor.
   Todo este bloque estaba escrito `body.wk-neu .woocommerce-account …`, que
   pide un DESCENDIENTE con esa clase — y no existe: las reglas no se aplicaban
   a nada. Va sin espacio: `body.wk-neu.woocommerce-account`. Misma trampa que
   la del ancestro `.woocommerce` que ya mordió tres veces en este tema.
   Comprobar siempre con document.querySelectorAll(selector).length. */
body.wk-neu.woocommerce-account .woocommerce{ padding-top:0; }

/* ⚠️ Tres cosas ajenas estrangulaban esta página y hay que deshacerlas aquí:
   (1) el contenedor de contenido de la página se quedaba en 630 px de los
       1.316 disponibles; (2) WooCommerce flota `#customer_login` y le da
       `width:100%` con un selector de **ID**, que gana a cualquier clase;
       (3) fija las dos columnas al 47,8 %, así que la tarjeta no llenaba su
       hueco y las dos salían de anchos distintos (281 px vs 299 px).
   Se contesta con el mismo ID —única forma limpia de ganar a un ID— y solo
   dentro de la página de cuenta. */
body.wk-neu.woocommerce-account .entry-content,
body.wk-neu.woocommerce-account .entry-content > .woocommerce{
  width:100% !important;
  max-width:none !important;
  float:none !important;
}
/* El título de la página iba pegado al borde izquierdo mientras las tarjetas
   quedaban centradas: parecían dos piezas de páginas distintas. Aquí se mete
   en la MISMA caja de 940px, así el título se apoya sobre la tarjeta de la
   izquierda. Y se recortan los ~145px de aire que había entre ambos. */
body.wk-neu.woocommerce-account .entry-header{
  max-width:940px;
  margin-inline:auto !important;
  margin-bottom:var(--s6) !important;
  padding-bottom:0 !important;
}

/* Los avisos ("Fehler: …") salían de borde a borde mientras el título y las
   dos tarjetas viven en una caja de 940px centrada: parecían de otra página.
   Se les da la MISMA caja. Ojo: el ancho está escrito tres veces en este
   fichero (aquí, en .entry-header y en .wk-konto) — si se cambia, cambiarlo
   en los tres sitios. */
body.wk-neu.woocommerce-account .woocommerce-notices-wrapper{
  max-width:940px;
  margin-inline:auto;
}

body.wk-neu.woocommerce-account #customer_login{
  float:none !important;
  width:100% !important;
  margin-inline:auto !important;
}
body.wk-neu.woocommerce-account #customer_login > .u-column1,
body.wk-neu.woocommerce-account #customer_login > .u-column2{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* Dos columnas iguales. `stretch` (por defecto) para que las dos tarjetas
   midan lo mismo de alto; el desnivel entre ellas lo absorbe la lista de
   ventajas, no un hueco vacío. */
body.wk-neu .wk-konto{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6);
  max-width:940px;
  margin-inline:auto;
  float:none;
}
/* 560 y no 460: con una sola tarjeta centrada en una pantalla ancha, 460 se
   queda en una pastilla pequeña perdida en el papel. ⚠️ Esta medida está en
   DOS sitios —aquí y en la regla `:has(.wk-konto--solo)` que alinea el
   título y los avisos—: cambiar las dos o el título se descuadra. */
body.wk-neu .wk-konto--solo{ max-width:560px; grid-template-columns:minmax(0,1fr); }
body.wk-neu .wk-konto__col{
  width:auto !important;
  float:none !important;
  min-width:0;              /* sin esto una palabra larga ensancha la columna */
  display:flex;
}
body.wk-neu .wk-konto__karte{
  flex:1;
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s6);
  display:flex;
  flex-direction:column;
}

/* --- Cabecera de la tarjeta ---------------------------------------------- */
body.wk-neu .wk-konto__kopf{
  border-bottom:1px solid var(--wk-filete);
  padding-bottom:var(--s4);
  margin-bottom:var(--s5);
}
body.wk-neu .wk-konto__kopf h2{
  font-family:var(--wk-cond) !important;
  font-size:22px !important;
  font-weight:600;
  line-height:1.15;
  text-transform:none !important;
  letter-spacing:-.01em !important;
  color:var(--wk-tinta) !important;
  margin:0 0 6px !important;
}
body.wk-neu .wk-konto__sub{
  margin:0 !important;
  font-size:13px;
  line-height:1.5;
  color:var(--wk-tinta-3) !important;
}

body.wk-neu .wk-konto form{ margin:0; }

/* --- Campos --------------------------------------------------------------- */
body.wk-neu.woocommerce-account form .form-row{ margin:0 0 var(--s4); padding:0; }
body.wk-neu.woocommerce-account form label{
  display:block;
  font-size:13px;
  color:var(--wk-tinta-2) !important;
  margin-bottom:6px;
}
body.wk-neu.woocommerce-account input.input-text,
body.wk-neu.woocommerce-account input[type="password"],
body.wk-neu.woocommerce-account input[type="email"],
body.wk-neu.woocommerce-account input[type="text"]{
  width:100%;
  height:46px;
  padding:0 12px;
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  /* ⚠️ El borde iba en --wk-filete-2 y sobre la tarjeta blanca daba 1,79:1
     (1,6:1 en oscuro). La norma pide 3:1 para el CONTORNO de un campo — no es
     decoración: es lo que dice dónde se puede escribir. Token propio con el
     valor calculado para cada fondo; el filete fino se reserva para separar,
     no para delimitar controles. */
  border:1px solid var(--wk-campo-borde) !important;
  border-radius:0 !important;
  box-shadow:none !important;   /* Storefront metía sombra interior gris */
  font-size:15px;
}
/* El anillo de foco era MORADO (#7f54b3, el color de WooCommerce). */
body.wk-neu.woocommerce-account input:focus{
  outline:2px solid var(--wk-rojo) !important;
  outline-offset:1px;
  border-color:var(--wk-tinta-3) !important;
}

/* --- El ojo de "mostrar contraseña" --------------------------------------
   Lo pinta WooCommerce por JS. Venía como un rectángulo rojo de 46px que
   pesaba más que el botón de acceder: el ojo es una ayuda, no una acción. */
body.wk-neu .wk-konto .password-input{ position:relative; display:block; }
body.wk-neu .wk-konto button.show-password-input{
  position:absolute;
  top:0; right:0;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:transparent !important;
  border:0 !important;
  border-left:1px solid var(--wk-campo-borde) !important;
  color:var(--wk-tinta-3) !important;
  cursor:pointer;
  transition:color .16s var(--wk-ease);
}
body.wk-neu .wk-konto button.show-password-input::after{
  color:currentColor !important;
  background:none !important;
  font-size:16px;
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wk-konto button.show-password-input:hover{ color:var(--wk-tinta) !important; }
}
body.wk-neu .wk-konto button.show-password-input.display-password{ color:var(--wk-rojo) !important; }

/* --- "Angemeldet bleiben" + botón ---------------------------------------- */
body.wk-neu .wk-konto__merken{ display:flex; flex-direction:column; gap:var(--s4); }
body.wk-neu .wk-konto .woocommerce-form-login__rememberme{
  display:flex; align-items:center; gap:8px;
  margin:0; font-size:13px; color:var(--wk-tinta-2) !important;
}
body.wk-neu .wk-konto input[type="checkbox"]{
  width:16px; height:16px; margin:0; flex:none; accent-color:var(--wk-rojo);
}

/* Un sólido y uno de filete: si los dos van rellenos, la página deja de decir
   cuál es la acción principal. Misma regla que en el hero. */
body.wk-neu.woocommerce-account button.button,
body.wk-neu.woocommerce-account input[type="submit"]{
  width:100%;
  height:48px;
  background:var(--wk-rojo) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:0 !important;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:13px;
  transition:background-color .15s linear, border-color .15s linear, color .15s linear;
}
body.wk-neu.woocommerce-account #customer_login button.woocommerce-form-register__submit{
  background:transparent !important;
  color:var(--wk-tinta) !important;
  border-color:var(--wk-tinta-3) !important;
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu.woocommerce-account button.button:hover{ background:var(--wk-rojo-700) !important; }
  body.wk-neu.woocommerce-account #customer_login button.woocommerce-form-register__submit:hover{
    background:transparent !important; border-color:var(--wk-tinta) !important; color:var(--wk-tinta) !important;
  }
}
body.wk-neu.woocommerce-account button.button:active{ transform:scale(.985); }

body.wk-neu .woocommerce-LostPassword{ margin:var(--s4) 0 0 !important; }
body.wk-neu .woocommerce-LostPassword a{
  color:var(--wk-tinta-2) !important;
  text-decoration:underline;   /* antes solo se distinguía por el color */
  text-underline-offset:2px;
  font-size:13px;
}
body.wk-neu .wk-konto__hinweis{
  margin:0 0 var(--s4) !important;
  font-size:13px; line-height:1.55;
  color:var(--wk-tinta-2) !important;
}

/* --- Lo que se gana con la cuenta ----------------------------------------
   `margin-top:auto` la pega al pie de la tarjeta: es lo que iguala las dos
   alturas sin dejar un vacío en medio. */
body.wk-neu .wk-konto__vorteile{
  margin:var(--s5) 0 0 !important;
  padding:var(--s4) 0 0 !important;
  margin-top:auto !important;
  border-top:1px solid var(--wk-filete);
  list-style:none;
  display:grid; gap:8px;
}
body.wk-neu .wk-konto__vorteile li{
  margin:0;
  padding-left:20px;
  position:relative;
  font-size:13px; line-height:1.45;
  color:var(--wk-tinta-2) !important;
}
/* Palomita dibujada, no un carácter de fuente: así no depende del emoji del
   sistema y hereda el rojo del tema. */
body.wk-neu .wk-konto__vorteile li::before{
  content:"";
  position:absolute; left:0; top:.34em;
  width:9px; height:5px;
  border-left:1.5px solid var(--wk-rojo);
  border-bottom:1.5px solid var(--wk-rojo);
  transform:rotate(-45deg);
}

/* Cuando la página solo tiene UNA tarjeta (las pantallas de contraseña, o la
   de Anmelden si algún día se cierra el registro), la tarjeta mide 460px pero
   el título y los avisos seguían en la caja de 940: el "Passwort zurücksetzen"
   colgaba por la izquierda, fuera de la tarjeta. Se les da la medida de la
   tarjeta para que el título se apoye en su borde izquierdo.
   `:has()` porque no hay ninguna clase en el <body> que distinga estos
   endpoints; lo que sí se puede mirar es si la página trae `--solo` dentro. */
body.wk-neu.woocommerce-account:has(.wk-konto--solo) .entry-header,
body.wk-neu.woocommerce-account:has(.wk-konto--solo) .woocommerce-notices-wrapper{
  max-width:560px;   /* la misma medida que .wk-konto--solo, ver el comentario de allí */
}

/* --- Las tres pantallas de contraseña -------------------------------------
   "Passwort vergessen", la confirmación y "neues Passwort vergeben" usan la
   MISMA tarjeta que Anmelden (clases `wk-konto--solo`), así que casi todo lo
   heredan. Solo hacen falta dos cosas propias. */

/* La vuelta atrás. Va centrada y separada por un filete: es una salida, no una
   acción más del formulario, y no debe competir con el botón rojo. */
body.wk-neu .wk-konto__zurueck{
  margin:var(--s5) 0 0 !important;
  padding-top:var(--s4);
  border-top:1px solid var(--wk-filete);
  text-align:center;
}
body.wk-neu .wk-konto__zurueck a{
  font-size:13px;
  color:var(--wk-tinta-2) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
body.wk-neu .wk-konto__zurueck a:hover{ color:var(--wk-rojo) !important; }

/* La lista de la pantalla de confirmación NO son ventajas: son avisos ("mire
   en spam"). Con la palomita roja parecían cosas conseguidas. Se cambia por un
   punto neutro y se quita el `margin-top:auto`, que aquí empujaría la lista al
   fondo de una tarjeta que no tiene con quién igualarse. */
/* Una tarjeta sola aguanta —y pide— más aire que las dos de Anmelden, que se
   reparten el ancho. */
body.wk-neu .wk-konto--solo .wk-konto__karte{ padding:var(--s7, 40px) var(--s6); }
body.wk-neu .wk-konto--solo .wk-konto__karte .form-row{ margin-bottom:var(--s5) !important; }

body.wk-neu .wk-konto__vorteile--info{ margin-top:var(--s5) !important; }
body.wk-neu .wk-konto__vorteile--info li::before{
  content:"";
  left:1px; top:.55em;
  width:4px; height:4px;
  border:0;
  border-radius:50%;
  background:var(--wk-tinta-3);
  transform:none;
}

/* Los textos y casillas que Germanized cuelga del formulario de registro. */
body.wk-neu .wk-konto .woocommerce-privacy-policy-text,
body.wk-neu .wk-konto .wc-gzd-checkbox-placeholder,
body.wk-neu .wk-konto .woocommerce-terms-and-conditions-wrapper{
  font-size:12px; line-height:1.5; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-konto .woocommerce-privacy-policy-text p{ margin:0 0 var(--s3); }

/* --- Estrecho ------------------------------------------------------------- */
@media (max-width:820px){
  body.wk-neu .wk-konto{ grid-template-columns:minmax(0,1fr); gap:var(--s5); max-width:460px; }
  body.wk-neu .wk-konto__karte{ padding:var(--s5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL PANEL DE LA CUENTA, UNA VEZ DENTRO
   Antes eran doce líneas de CSS sobre el maquetado flotado de Storefront: menú
   a un lado, dos párrafos al otro y media pantalla en blanco. Se rehace como
   rejilla —columna fija de 250px y el resto para el contenido— con el menú en
   su propia tarjeta, igual que Anmelden.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu.woocommerce-account .woocommerce-MyAccount-navigation,
body.wk-neu.woocommerce-account .woocommerce-MyAccount-content{
  width:auto !important;
  float:none !important;
  margin:0 !important;
}
/* La rejilla se le pone al contenedor que WooCommerce ya imprime. `:has()`
   evita tocar la página de login, que comparte contenedor. */
body.wk-neu.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:var(--s6);
  align-items:start;
  /* ⚠️ `!important` obligado: unas líneas más arriba, la regla que desestrangula
     la página de login le pone `max-width:none !important` a ESTE MISMO
     elemento (`.entry-content > .woocommerce`). Sin el !important aquí, la
     rejilla se iba a todo el ancho y el título de 940px se quedaba descolgado
     a la derecha del menú. Son dos reglas nuestras peleando por lo mismo. */
  max-width:940px !important;   /* la MISMA caja que el título y los avisos */
  margin-inline:auto !important;
}

/* --- El menú lateral -----------------------------------------------------
   Antes era una lista plana de seis entradas al mismo nivel, como si cerrar
   sesión pesara lo mismo que ver los pedidos. Ahora va agrupado por para qué
   sirve cada cosa, con icono, contador y flecha. */
body.wk-neu .woocommerce-MyAccount-navigation{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s4) 0;
}
body.wk-neu .wk-nav__grupo{
  margin:0 !important;
  padding:var(--s4) var(--s4) var(--s2);
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-nav ul:first-of-type{ margin-top:0; }
body.wk-neu .woocommerce-MyAccount-navigation ul{
  list-style:none !important; margin:0 !important; padding:0 !important; border-top:0 !important;
}
body.wk-neu .woocommerce-MyAccount-navigation li{ border-bottom:0 !important; }
/* ⚠️⚠️ TODO CON !important, Y VUELVE A SER LO MISMO DE SIEMPRE:
   Storefront escribe `.hentry .entry-content .woocommerce-MyAccount-navigation
   ul li.woocommerce-MyAccount-navigation-link a { display:block }` — CUATRO
   clases. Nuestro `body.wk-neu .…navigation li a` tiene tres y pierde.
   Sin el !important el `display:flex` no se aplicaba y en la web salían el
   icono, el texto y la flecha en TRES LÍNEAS, una debajo de otra. Ya pasó con
   el relleno de este mismo menú; está anotado más arriba y aun así volví a
   caer. Contra este tema padre: !important siempre. */
body.wk-neu .woocommerce-MyAccount-navigation li a{
  display:flex !important;
  align-items:center !important;
  gap:var(--s3) !important;
  position:relative;
  /* 46px de alto: en el móvil una fila de menú tiene que poder pulsarse con el
     dedo sin apuntar. */
  min-height:46px !important;
  padding:0 var(--s4) 0 calc(var(--s4) - 3px) !important;
  border-left:3px solid transparent !important;
  color:var(--wk-tinta-2) !important;
  font-size:14.5px !important;
  text-decoration:none !important;
  transition:color .14s linear, background-color .14s linear, border-color .14s linear;
}
body.wk-neu .wk-nav__ico{ flex:none !important; display:flex !important; }
body.wk-neu .wk-nav__ico svg{ width:19px; height:19px; display:block; }
body.wk-neu .wk-nav__txt{ flex:1 1 auto !important; min-width:0; }
/* El contador: dato real (pedidos que tienes), no adorno. Si es cero no sale. */
body.wk-neu .wk-nav__n{
  flex:none !important;
  font-family:var(--wk-mono); font-size:12px;
  color:var(--wk-tinta-3);
  border:1px solid var(--wk-filete-2);
  padding:1px 6px;
}
body.wk-neu .wk-nav__flecha{ flex:none !important; display:flex !important; color:var(--wk-filete-2); }
body.wk-neu .wk-nav__flecha svg{ width:15px; height:15px; display:block; }

body.wk-neu .woocommerce-MyAccount-navigation li.is-active a{
  border-left-color:var(--wk-rojo);
  background:var(--wk-realce);
  color:var(--wk-tinta) !important;
  font-weight:600;
}
body.wk-neu .woocommerce-MyAccount-navigation li.is-active .wk-nav__flecha{ color:var(--wk-rojo); }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .woocommerce-MyAccount-navigation li a:hover{
    color:var(--wk-tinta) !important; background:var(--wk-realce);
  }
  body.wk-neu .woocommerce-MyAccount-navigation li a:hover .wk-nav__flecha{ color:var(--wk-tinta-3); }
}
body.wk-neu .woocommerce-MyAccount-navigation li a:focus-visible{
  outline:2px solid var(--wk-rojo); outline-offset:-2px;
}
/* ⚠️ Los iconos grises que Storefront cuelga a la derecha de cada entrada
   (casita, cesta, engranaje…). Van en `::before` Y en `::after` según la
   versión, y con la clase del li delante para ganar en especificidad; tapando
   solo el ::after seguían saliendo. */
body.wk-neu .woocommerce-MyAccount-navigation li a::after,
body.wk-neu .woocommerce-MyAccount-navigation li a::before,
body.wk-neu .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a::after,
body.wk-neu .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a::before{
  display:none !important;
  content:none !important;
}

/* --- El saludo ---------------------------------------------------------- */
body.wk-neu .wk-dash__saludo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
  padding-bottom:var(--s4);
  border-bottom:2px solid var(--wk-tinta);
  margin-bottom:var(--s5);
}
body.wk-neu .wk-dash__saludo h2{
  margin:2px 0 4px !important;
  font-size:26px; line-height:1.15;
}
body.wk-neu .wk-dash__rotulo{
  margin:0 !important;
  font-family:var(--wk-mono);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-dash__mail{
  margin:0 !important;
  font-family:var(--wk-mono); font-size:13px;
  color:var(--wk-tinta-2) !important;
}
body.wk-neu .wk-dash__abmelden{
  flex:none;
  font-size:13px;
  color:var(--wk-tinta-2) !important;
  text-decoration:underline; text-underline-offset:3px;
}
body.wk-neu .wk-dash__abmelden:hover{ color:var(--wk-rojo) !important; }

/* --- Los tres destinos --------------------------------------------------- */
body.wk-neu .wk-dash__kacheln{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s4);
}
body.wk-neu .wk-dash__kachel{
  display:flex; flex-direction:column; gap:4px;
  padding:var(--s4);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  text-decoration:none !important;
  position:relative;
  transition:border-color .15s linear;
}
/* El mismo filete rojo que se rellena que en el resto de la tienda. */
body.wk-neu .wk-dash__kachel::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:3px;
  background:var(--wk-rojo);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s var(--wk-ease, ease);
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wk-dash__kachel:hover{ border-color:var(--wk-tinta-3); }
  body.wk-neu .wk-dash__kachel:hover::before{ transform:scaleX(1); }
}
body.wk-neu .wk-dash__kachel-dato{
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--wk-rojo);
}
body.wk-neu .wk-dash__kachel-titel{
  font-size:17px; font-weight:600; color:var(--wk-tinta);
}
body.wk-neu .wk-dash__kachel-text{
  font-size:13px; line-height:1.5; color:var(--wk-tinta-2);
}

/* --- Último pedido / cuenta vacía ---------------------------------------- */
body.wk-neu .wk-dash__letzte{ margin-top:var(--s6); }
body.wk-neu .wk-dash__zeile{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  margin-top:var(--s3);
  padding:var(--s4);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
}
body.wk-neu .wk-dash__nr{ font-family:var(--wk-mono); font-weight:600; }
body.wk-neu .wk-dash__datum,
body.wk-neu .wk-dash__status{ font-size:13px; color:var(--wk-tinta-2); }
body.wk-neu .wk-dash__summe{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; }
body.wk-neu .wk-dash__ver{ font-size:13px; text-decoration:underline; text-underline-offset:3px; }

body.wk-neu .wk-dash__leer{
  margin-top:var(--s6);
  padding:var(--s6) var(--s5);
  border:1px dashed var(--wk-filete-2);
  text-align:center;
}
body.wk-neu .wk-dash__leer p{ margin:0 0 var(--s4) !important; color:var(--wk-tinta-2) !important; }
body.wk-neu a.wk-dash__btn{
  display:inline-block;
  padding:13px 26px;
  background:var(--wk-rojo);
  color:#fff !important;
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none !important;
}
body.wk-neu a.wk-dash__btn:hover{ background:var(--wk-rojo-700); }

/* El enlace "bearbeiten" que Storefront cuelga al pie de la página: es la
   entrada al escritorio de WordPress, solo la ve quien administra, y aquí
   aparecía suelta bajo el menú como si fuera una opción del cliente. */
body.wk-neu.woocommerce-account .post-edit-link{ display:none !important; }

body.wk-neu .woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(odd) td{
  background:transparent;   /* el cebreado gris frío de Storefront */
}

/* --- El detalle de un pedido --------------------------------------------
   La cabecera era una FRASE ("Bestellung #37105 vom … ist aktuell …") y las
   acciones vivían DENTRO de la tabla, como si "Rechnung" fuera un importe. */
body.wk-neu .wk-tira-web{
  display:flex; flex-wrap:wrap; gap:var(--s6);
  padding:var(--s4) 0;
  border-top:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  margin-bottom:var(--s6);
}
body.wk-neu .wk-tira-web__c{ display:grid; gap:5px; align-content:start; }
body.wk-neu .wk-tira-web__r{
  margin:0 !important;
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--wk-tinta-3);
}
body.wk-neu .wk-tira-web__v{
  font-size:16px; font-weight:600; color:var(--wk-tinta);
  font-variant-numeric:tabular-nums;
}
body.wk-neu .wk-tira-web .wk-pedido__estado{ justify-self:start; }

body.wk-neu .wk-detalle__tit{
  font-size:20px; font-weight:700; margin:0 0 var(--s4) !important;
  padding-bottom:var(--s3); border-bottom:2px solid var(--wk-tinta);
}

/* La tabla de artículos: filetes finos, sin cebreado ni marco exterior. */
body.wk-neu table.wk-detalle{
  width:100%; border:0 !important; border-collapse:collapse; margin:0 0 var(--s5);
  background:transparent !important;
}
body.wk-neu table.wk-detalle th,
body.wk-neu table.wk-detalle td{
  border:0 !important; background:transparent !important;
  padding:14px 0; vertical-align:top; font-size:14.5px;
  text-align:left;   /* Storefront centra las cabeceras de tabla */
}
body.wk-neu table.wk-detalle thead th{
  font-family:var(--wk-mono); font-size:12px; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wk-tinta-2);
  border-bottom:1px solid var(--wk-tinta) !important; padding-bottom:9px;
}
body.wk-neu table.wk-detalle tbody td{ border-bottom:1px solid var(--wk-filete) !important; }
body.wk-neu table.wk-detalle th:last-child,
body.wk-neu table.wk-detalle td:last-child{
  text-align:right; white-space:nowrap; padding-left:var(--s4);
  font-variant-numeric:tabular-nums;
}
body.wk-neu table.wk-detalle td a{
  color:var(--wk-tinta) !important; text-decoration:none; font-weight:500;
}
body.wk-neu table.wk-detalle td a:hover{ color:var(--wk-rojo) !important; }
body.wk-neu table.wk-detalle .product-quantity{
  color:var(--wk-tinta-2); font-family:var(--wk-mono); font-size:13.5px;
}
/* La cantidad, en su columna: estrecha y pegada a la derecha. */
body.wk-neu table.wk-detalle th.product-quantity,
body.wk-neu table.wk-detalle td.product-quantity{
  width:70px; text-align:right; white-space:nowrap; padding-left:var(--s4);
}
body.wk-neu table.wk-detalle th.product-total,
body.wk-neu table.wk-detalle td.product-total{ width:110px; }

/* --- La foto de cada artículo -------------------------------------------
   Un pedido de taller son tres llaves con nombres casi iguales; la foto es lo
   que deja reconocer de un vistazo qué se compró. */
body.wk-neu table.wk-linea{
  width:100%; border-collapse:collapse; margin:0; border:0;
}
body.wk-neu table.wk-linea td{
  border:0 !important; padding:0; background:transparent !important; vertical-align:top;
  /* ⚠️ `text-align:left` OBLIGATORIO. La regla que alinea a la derecha la última
     columna de la tabla del pedido está escrita como `table.wk-detalle td:last-child`,
     y eso alcanza TAMBIÉN a las celdas de esta tabla interior —son `td` dentro
     de `.wk-detalle`—: el nombre del producto y el Art.-Nr. salían pegados a la
     derecha. */
  text-align:left !important;
}
/* ⚠️ `min-width` ADEMÁS del `width`. La tabla se reparte el ancho sola, y la
   fila con el nombre de producto más largo le robaba sitio a la columna de la
   foto: en la ficha del pedido una foto salía como una raya de 12px y la de al
   lado bien. Es la misma tabla, pero cada fila lleva la suya y se reparten
   distinto. */
body.wk-neu .wk-linea__c-foto{
  width:76px; min-width:76px;
  padding-right:var(--s4) !important;
}
body.wk-neu img.wk-linea__foto{
  display:block;
  /* ⚠️ `max-width:none` y `min-width`: WordPress le pone `max-width:100%` a
     TODAS las imágenes, y eso permitía que la foto se encogiera cuando su
     columna se quedaba estrecha en vez de mantener su tamaño. */
  width:60px; height:60px; min-width:60px; max-width:none;
  object-fit:contain;
  /* Si la foto no carga, el texto alternativo no debe estirar la fila: el
     nombre del producto está justo al lado, no se pierde nada. */
  font-size:0; line-height:0; color:transparent;
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  padding:3px;
  /* ⚠️ AQUÍ NO VA `mix-blend-mode:multiply`. En el listado sí, porque la celda
     tiene el mismo tono que el fondo blanco de las fotos de BGS y se funden.
     Aquí la celda es blanca: el multiply hacía desaparecer el fondo Y el marco,
     y un artículo largo y fino —una llave es una barra— quedaba como una raya
     suelta en el aire, que es justo lo que vio el usuario. Con marco y relleno,
     cada artículo es un cuadro igual, sea cual sea su forma. */
}
body.wk-neu .wk-linea__n{ display:block; font-weight:500; line-height:1.4; }
body.wk-neu .wk-linea__n a{ color:var(--wk-tinta) !important; text-decoration:none; }
body.wk-neu .wk-linea__n a:hover{ color:var(--wk-rojo) !important; }
body.wk-neu .wk-linea__sku{
  display:block; margin-top:3px;
  font-family:var(--wk-mono); font-size:12px; color:var(--wk-tinta-3);
}

@media (max-width:560px){
  body.wk-neu .wk-linea__c-foto{ width:56px; padding-right:var(--s3) !important; }
  body.wk-neu img.wk-linea__foto{ width:44px; height:44px; }
}

/* Los totales: pares etiqueta-valor, fuera de la tabla de artículos. */
body.wk-neu .wk-totales{ margin:0 0 var(--s5); display:grid; gap:0; }
body.wk-neu .wk-totales__f{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding:10px 0; border-bottom:1px solid var(--wk-filete);
}
body.wk-neu .wk-totales dt{ margin:0; font-size:13.5px; color:var(--wk-tinta-2); }
body.wk-neu .wk-totales dd{
  margin:0; font-size:14.5px; color:var(--wk-tinta); text-align:right;
  font-variant-numeric:tabular-nums;
}
/* El total, que es la cifra que se busca. */
body.wk-neu .wk-totales__f--order_total{
  border-top:2px solid var(--wk-tinta); border-bottom:0;
  padding-top:14px; margin-top:4px;
}
body.wk-neu .wk-totales__f--order_total dt{ font-size:15px; color:var(--wk-tinta); font-weight:600; }
body.wk-neu .wk-totales__f--order_total dd{ font-size:21px; font-weight:600; }
body.wk-neu .wk-totales small{ display:block; font-size:12px; color:var(--wk-tinta-3); }
/* Lo que WooCommerce pone DESPUÉS del total —forma de pago, desglose del IVA—
   no son más totales: son notas sobre él. Si se dejan con el mismo peso,
   compiten con la cifra que el cliente busca. `~` los coge a todos, vengan los
   que vengan, sin tener que enumerarlos. */
body.wk-neu .wk-totales__f--order_total ~ .wk-totales__f{
  border-bottom:0;
  padding:5px 0;
}
body.wk-neu .wk-totales__f--order_total ~ .wk-totales__f dt,
body.wk-neu .wk-totales__f--order_total ~ .wk-totales__f dd{
  font-size:12.5px; color:var(--wk-tinta-3); font-weight:400;
}
body.wk-neu .wk-totales__f--order_total ~ .wk-totales__f:first-of-type{ margin-top:var(--s3); }

body.wk-neu .wk-detalle__acciones{ margin-top:var(--s5); }
/* «Erneut bestellen» lo pinta WooCommerce en su propio párrafo con la clase
   `.button`; aquí es LA acción de la pantalla, así que se le da el botón. */
body.wk-neu .wk-detalle__acciones .order-again{ margin:0 !important; }
body.wk-neu .wk-detalle__acciones .order-again a.button{
  display:inline-block;
  padding:11px 22px;
  background:var(--wk-rojo) !important;
  color:#fff !important;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none !important; border:1px solid transparent; border-radius:0;
}
body.wk-neu .wk-detalle__acciones .order-again a.button:hover{ background:var(--wk-rojo-700) !important; }

/* Las direcciones del pedido: dos columnas con rótulo en versalitas, igual que
   en los correos. Storefront las deja como dos bloques flotados sin estilo. */
body.wk-neu .woocommerce-customer-details{ margin-top:var(--s7, 48px); }
body.wk-neu .woocommerce-columns--addresses{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5);
}
body.wk-neu .woocommerce-columns--addresses .col-1,
body.wk-neu .woocommerce-columns--addresses .col-2{
  width:auto !important; float:none !important; margin:0 !important;
}
body.wk-neu .woocommerce-column__title{
  font-family:var(--wk-mono) !important; font-size:12px !important;
  font-weight:400 !important; letter-spacing:.09em; text-transform:uppercase;
  color:var(--wk-tinta-2) !important;
  padding-bottom:7px; border-bottom:1px solid var(--wk-filete);
  margin:0 0 10px !important;
}
body.wk-neu .woocommerce-customer-details address{
  font-style:normal; border:0 !important; padding:0 !important;
  font-size:14.5px; line-height:1.65; color:var(--wk-tinta);
}
body.wk-neu .woocommerce-customer-details--phone,
body.wk-neu .woocommerce-customer-details--email{
  margin:6px 0 0 !important; font-size:13.5px; color:var(--wk-tinta-2) !important;
}
@media (max-width:560px){
  body.wk-neu .woocommerce-columns--addresses{ grid-template-columns:minmax(0,1fr); }
}
body.wk-neu .wk-detalle__nota{
  margin:0 0 var(--s5); padding:var(--s4);
  background:var(--wk-realce); border-left:3px solid var(--wk-tinta);
}
body.wk-neu .wk-detalle__nota p:last-child{ margin:6px 0 0 !important; font-size:14px; }

/* El historial del pedido. */
body.wk-neu .wk-notas{ list-style:none; margin:0 0 var(--s6); padding:0; display:grid; gap:var(--s3); }
body.wk-neu .wk-nota{
  background:var(--wk-celda); border:1px solid var(--wk-filete); padding:var(--s4);
}
body.wk-neu .wk-nota__fecha{
  margin:0 0 4px !important; font-family:var(--wk-mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--wk-tinta-3);
}
body.wk-neu .wk-nota__txt p{ margin:0 !important; font-size:14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DE REVOCACIÓN (el «elegir qué devuelvo»)
   El plugin de Germanized ya trae la mecánica —casilla por artículo, elegir
   todos, cantidad por línea—, pero la suelta con los controles de serie del
   navegador: casillas diminutas, marcas amarillas y el texto para lectores de
   pantalla colándose en la columna de cantidad. Aquí se viste como el resto de
   la tienda.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .order-withdrawal-request{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s6);
  max-width:720px;
}
body.wk-neu .order-withdrawal-request .form-row{ margin:0 0 var(--s4); padding:0; }
body.wk-neu .order-withdrawal-request label{
  display:block; margin-bottom:6px;
  font-size:13px; color:var(--wk-tinta-2);
}
body.wk-neu .order-withdrawal-request .required{ color:var(--wk-rojo); }
body.wk-neu .order-withdrawal-request .optional{ color:var(--wk-tinta-3); }
body.wk-neu .order-withdrawal-request input.input-text,
body.wk-neu .order-withdrawal-request select{
  width:100%; height:46px;
  padding:0 var(--s3);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete-2);
  border-radius:0;
  font-size:15px; color:var(--wk-tinta);
}
body.wk-neu .order-withdrawal-request input.input-text:focus,
body.wk-neu .order-withdrawal-request select:focus{
  outline:none; border-color:var(--wk-tinta);
  box-shadow:inset 0 0 0 1px var(--wk-tinta);
}

/* La frase «Bestellung #37105 wurde am … abgeschickt» venía con las marcas
   AMARILLAS del navegador: <mark> sin estilo. */
body.wk-neu .eu-owb-woocommerce-withdrawal-order-details{
  margin:0 0 var(--s4) !important;
  font-size:14px; color:var(--wk-tinta-2) !important;
}
body.wk-neu .eu-owb-woocommerce-withdrawal-order-details mark,
body.wk-neu .order-withdrawal-request mark{
  background:transparent !important;
  color:var(--wk-tinta) !important;
  font-weight:600;
}

/* Las casillas: 18px y con el rojo de la marca. A 13px del navegador son
   imposibles de acertar con el dedo. */
body.wk-neu .order-withdrawal-request input[type="checkbox"]{
  width:18px; height:18px; margin:0 8px 0 0;
  accent-color:var(--wk-rojo);
  vertical-align:middle;
}
body.wk-neu .order-withdrawal-request .checkbox{
  display:flex; align-items:center; gap:0;
  font-size:14px; color:var(--wk-tinta) !important;
  margin:0;
}

/* La tabla de artículos. */
body.wk-neu table.order-withdrawal-request-items-table{
  width:100%; border-collapse:collapse; border:0 !important;
  margin:0 0 var(--s5);
}
body.wk-neu table.order-withdrawal-request-items-table th,
body.wk-neu table.order-withdrawal-request-items-table td{
  border:0 !important; background:transparent !important;
  padding:14px 10px 14px 0; text-align:left; vertical-align:middle;
}
body.wk-neu table.order-withdrawal-request-items-table thead th{
  font-family:var(--wk-mono); font-size:12px; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wk-tinta-2) !important;
  border-bottom:1px solid var(--wk-tinta) !important;
  padding-bottom:9px;
}
body.wk-neu table.order-withdrawal-request-items-table tbody td{
  border-bottom:1px solid var(--wk-filete) !important;
}
body.wk-neu table.order-withdrawal-request-items-table .product-select{ width:44px; }
body.wk-neu table.order-withdrawal-request-items-table .product-quantity{ width:110px; text-align:right; }
body.wk-neu table.order-withdrawal-request-items-table input.qty{
  width:70px; height:40px; text-align:center;
  border:1px solid var(--wk-filete-2); border-radius:0;
  font-family:var(--wk-mono); font-size:14px;
}
body.wk-neu table.order-withdrawal-request-items-table .product-name a{
  color:var(--wk-tinta) !important; text-decoration:none; font-weight:500;
}
body.wk-neu table.order-withdrawal-request-items-table .product-name a:hover{ color:var(--wk-rojo) !important; }

/* ⚠️ El texto para lectores de pantalla se colaba EN MEDIO de la columna de
   cantidad («…Außensechskant 24 mm Menge»). Storefront define esta clase, pero
   el plugin la usa dentro de su tabla y ahí se veía. Se esconde como debe:
   fuera de la vista pero legible para un lector de pantalla. */
body.wk-neu .order-withdrawal-request .screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

body.wk-neu .order-withdrawal-request .woocommerce-form-return_request__submit{
  width:100%; height:50px;
  background:var(--wk-rojo) !important; color:#fff !important;
  border:0; border-radius:0;
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer;
}
body.wk-neu .order-withdrawal-request .woocommerce-form-return_request__submit:hover{
  background:var(--wk-rojo-700) !important;
}
body.wk-neu .order-withdrawal-request .form-row-first,
body.wk-neu .order-withdrawal-request .form-row-last{
  width:calc(50% - (var(--s4) / 2)); float:none; display:inline-block; vertical-align:top;
}
body.wk-neu .order-withdrawal-request .form-row-first{ margin-right:var(--s4); }
/* ⚠️ El `<div class="clear">` que WooCommerce mete entre nombre y apellido
   partía la línea aunque los dos campos midan media anchura. */
body.wk-neu .order-withdrawal-request .clear{ display:none !important; }
@media (max-width:560px){
  body.wk-neu .order-withdrawal-request .form-row-first,
  body.wk-neu .order-withdrawal-request .form-row-last{ width:100%; margin-right:0; }
}

/* --- Rücksendungen: los dos caminos -------------------------------------
   Se enseñan como dos fichas separadas a propósito: revocar y reclamar no son
   lo mismo (plazo distinto, derecho distinto, proceso distinto), y meterlos en
   un solo botón hace que el cliente ejerza una revocación cuando lo que tiene
   es una herramienta rota. */
body.wk-neu .wk-devol__lista{ margin-bottom:var(--s6) !important; }
body.wk-neu .wk-devol__vias{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);
}
/* ⚠️ `align-content:start` apretaba el contenido arriba y dejaba el botón
   colgando a la altura que tocara: como los dos textos no miden lo mismo, los
   botones salían a distinta altura y las tarjetas parecían torcidas. En
   columna, con el botón empujado abajo, los dos quedan alineados sea cual sea
   el largo del texto. */
body.wk-neu .wk-devol__via{
  background:var(--wk-celda); border:1px solid var(--wk-filete);
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3);
}
body.wk-neu .wk-devol__via h3{
  margin:0 !important; font-size:18px; font-weight:600; color:var(--wk-tinta);
}
body.wk-neu .wk-devol__via p{ margin:0 !important; font-size:14px; line-height:1.55; color:var(--wk-tinta-2) !important; }
body.wk-neu .wk-devol__via .wk-tira-web__r{ margin:0 !important; }
/* El de revocar lleva botón; el de reclamación, enlace. Uno de los dos tiene
   que ser el principal o la pantalla no dice por dónde empezar. */
body.wk-neu .wk-devol__via a.wk-pedido__btn,
body.wk-neu .wk-devol__via a.wk-pedido__enlace{
  align-self:start;
  margin-top:auto;      /* al fondo: es lo que alinea los dos botones */
  padding-top:var(--s2);
}
@media (max-width:640px){
  body.wk-neu .wk-devol__vias{ grid-template-columns:minmax(0,1fr); }
}

body.wk-neu .wk-aviso__motivo{
  font-size:13.5px; font-weight:600; color:var(--wk-tinta);
}

/* --- La salida dentro del pedido ---------------------------------------- */
body.wk-neu .wk-vo__salida{
  margin-top:var(--s6); padding-top:var(--s5);
  border-top:1px solid var(--wk-filete);
}
body.wk-neu .wk-vo__salida .wk-recla__ayuda{ max-width:60ch; margin:0 0 var(--s4); font-size:14px; }
body.wk-neu .wk-vo__botones{ display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; }
body.wk-neu a.wk-vo__enlace{
  font-size:14px; color:var(--wk-tinta-3); text-decoration:underline; text-underline-offset:3px;
}
body.wk-neu a.wk-vo__enlace:hover{ color:var(--wk-tinta); }

/* --- Formulario de reclamación ------------------------------------------ */
body.wk-neu .wk-recla{
  background:var(--wk-celda); border:1px solid var(--wk-filete);
  padding:var(--s6); max-width:680px;
  display:grid; gap:var(--s5);
}
body.wk-neu .wk-recla__campo{ display:grid; gap:8px; }
body.wk-neu .wk-recla label,
body.wk-neu .wk-recla__rotulo{
  font-size:14px; font-weight:500; color:var(--wk-tinta);
}
body.wk-neu .wk-recla__opt{ font-weight:400; color:var(--wk-tinta-3); }
body.wk-neu .wk-recla__ayuda{ font-size:12.5px; color:var(--wk-tinta-3); line-height:1.5; }
body.wk-neu .wk-recla select,
body.wk-neu .wk-recla textarea,
body.wk-neu .wk-recla input[type="file"]{
  width:100%; padding:12px var(--s3);
  background:var(--wk-celda); border:1px solid var(--wk-filete-2); border-radius:0;
  font-family:inherit; font-size:15px; color:var(--wk-tinta);
}
body.wk-neu .wk-recla select{ height:46px; padding-block:0; }
body.wk-neu .wk-recla textarea{ line-height:1.55; resize:vertical; }
body.wk-neu .wk-recla select:focus,
body.wk-neu .wk-recla textarea:focus{
  outline:none; border-color:var(--wk-tinta); box-shadow:inset 0 0 0 1px var(--wk-tinta);
}

/* Cada artículo, con su foto: el cliente reconoce cuál es sin leer el nombre
   completo, que en herramienta son cuatro líneas de medidas. */
body.wk-neu .wk-recla__arts{ display:grid; gap:2px; }
body.wk-neu label.wk-recla__art{
  display:flex; align-items:center; gap:var(--s3);
  padding:10px; border:1px solid var(--wk-filete);
  cursor:pointer; font-weight:400;
  transition:border-color .14s linear, background-color .14s linear;
}
body.wk-neu label.wk-recla__art:hover{ border-color:var(--wk-tinta-3); background:var(--wk-realce); }
body.wk-neu label.wk-recla__art:has(input:checked){
  border-color:var(--wk-rojo); background:var(--wk-plancha);
}
body.wk-neu .wk-recla__art input[type="checkbox"]{
  width:18px; height:18px; flex:none; margin:0; accent-color:var(--wk-rojo);
}
body.wk-neu .wk-recla__art img.wk-linea__foto{ width:48px; height:48px; min-width:48px; }
body.wk-neu .wk-recla__art-txt{ display:grid; gap:2px; min-width:0; }

body.wk-neu button.wk-recla__btn{
  justify-self:start;
  padding:14px 28px;
  background:var(--wk-rojo); color:#fff;
  border:0; border-radius:0; cursor:pointer;
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
body.wk-neu button.wk-recla__btn:hover{ background:var(--wk-rojo-700); }
@media (max-width:560px){
  body.wk-neu button.wk-recla__btn{ width:100%; text-align:center; }
}

/* --- Avisos de vuelta a stock ------------------------------------------- */
body.wk-neu .wk-avisos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
body.wk-neu .wk-aviso{
  display:flex; align-items:flex-start; gap:var(--s4);
  background:var(--wk-celda); border:1px solid var(--wk-filete);
  padding:var(--s4);
}
/* Solo en Rücksendungen la ficha lleva ruta de hitos debajo. El permiso para
   partir en varias líneas se da AQUÍ y no en `.wk-aviso` a secas, porque esa
   clase también la usan los avisos de stock, donde el estado debe quedarse
   pegado a la derecha.
   ⚠️ `flex:1 1 0` en el texto: con el `auto` de antes, un texto largo (la
   descripción de una reclamación) empujaba la etiqueta de estado a la línea
   siguiente en vez de encogerse. */
body.wk-neu .wk-devol__lista .wk-aviso{ flex-wrap:wrap; }
body.wk-neu .wk-devol__lista .wk-aviso__txt{ flex:1 1 0; min-width:14rem; }
body.wk-neu .wk-devol__lista .wk-aviso > .wk-ruta--mini{ flex:1 0 100%; }
body.wk-neu .wk-aviso__foto{ flex:none; }
body.wk-neu .wk-aviso__txt{ flex:1 1 auto; min-width:0; display:grid; gap:3px; align-content:start; }
body.wk-neu a.wk-aviso__n{
  font-weight:500; font-size:14.5px; line-height:1.4;
  color:var(--wk-tinta) !important; text-decoration:none;
}
body.wk-neu a.wk-aviso__n:hover{ color:var(--wk-rojo) !important; }
body.wk-neu .wk-aviso__ayuda{ font-size:12.5px; color:var(--wk-tinta-3); line-height:1.45; }
body.wk-neu .wk-aviso__estado{
  flex:none; display:grid; gap:8px; justify-items:end; align-content:start;
}
@media (max-width:560px){
  body.wk-neu .wk-aviso{ flex-wrap:wrap; }
  body.wk-neu .wk-aviso__estado{ justify-items:start; }
}

/* --- Direcciones de la cuenta -------------------------------------------
   Eran dos titulares enormes, un lápiz flotando a la derecha y la dirección en
   CURSIVA. Ahora son dos fichas iguales a las del resto de la cuenta. */
body.wk-neu .wk-dir__intro{ color:var(--wk-tinta-2) !important; margin:0 0 var(--s5) !important; }
body.wk-neu .wk-dirs{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);
}
body.wk-neu .wk-dir{
  background:var(--wk-celda); border:1px solid var(--wk-filete);
  padding:var(--s5); display:grid; gap:var(--s3); align-content:start;
}
body.wk-neu .wk-dir__cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding-bottom:var(--s3); border-bottom:1px solid var(--wk-filete);
}
body.wk-neu h2.wk-dir__t,
body.wk-neu .wk-dir__cab h2{
  margin:0 !important;
  font-family:var(--wk-mono); font-size:12px !important; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--wk-tinta-2) !important;
}
body.wk-neu a.wk-dir__editar{
  flex:none; font-size:13px; color:var(--wk-tinta-2) !important;
  text-decoration:underline; text-underline-offset:3px;
}
body.wk-neu a.wk-dir__editar:hover{ color:var(--wk-rojo) !important; }
body.wk-neu .wk-dir address{
  font-style:normal; margin:0; padding:0; border:0;
  font-size:14.5px; line-height:1.6; color:var(--wk-tinta);
}
body.wk-neu .wk-dir__vat{
  margin:0 !important; font-family:var(--wk-mono); font-size:12.5px;
  color:var(--wk-tinta-2) !important;
}
body.wk-neu .wk-dir__vacia{ margin:0 !important; color:var(--wk-tinta-3) !important; font-size:14px; }

/* El campo de USt-IdNr. lleva una explicación debajo: que no parezca un error. */
body.wk-neu.woocommerce-account #billing_vat_id_field .description,
body.wk-neu.woocommerce-account .form-row .description{
  display:block; margin-top:5px;
  font-size:12.5px; color:var(--wk-tinta-3) !important;
}

@media (max-width:640px){
  body.wk-neu .wk-dirs{ grid-template-columns:minmax(0,1fr); }
}

/* --- La lista de pedidos ------------------------------------------------
   Era una tabla de cinco columnas con los botones dentro de la última celda,
   y con dos botones y textos alemanes largos se desbordaba fuera del marco.
   Ahora cada pedido es una ficha. */
body.wk-neu .wk-pedidos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); }
body.wk-neu .wk-pedido{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s5);
  display:grid;
  gap:var(--s3);
}
body.wk-neu .wk-pedido__cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
}
body.wk-neu .wk-pedido__r{
  display:block;
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wk-tinta-3);
}
body.wk-neu a.wk-pedido__nr{
  font-family:var(--wk-mono); font-size:19px; font-weight:600;
  color:var(--wk-tinta) !important; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
body.wk-neu a.wk-pedido__nr:hover{ color:var(--wk-rojo) !important; }

/* El estado se distingue por PESO, no por colores nuevos: la tienda es blanco,
   negro y rojo, y meter aquí un verde y un ámbar rompería la paleta. */
body.wk-neu .wk-pedido__estado{
  flex:none;
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 9px; border:1px solid;
}
body.wk-neu .wk-pedido__estado--ok{ color:var(--wk-tinta); border-color:var(--wk-tinta); }
body.wk-neu .wk-pedido__estado--curso{ color:var(--wk-rojo); border-color:var(--wk-rojo); }
body.wk-neu .wk-pedido__estado--apagado{ color:var(--wk-tinta-3); border-color:var(--wk-filete-2); }

body.wk-neu .wk-pedido__datos{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
  padding-top:var(--s3); border-top:1px solid var(--wk-filete);
}
body.wk-neu .wk-pedido__fecha{ font-size:13.5px; color:var(--wk-tinta-2); }
body.wk-neu .wk-pedido__total{
  font-size:20px; font-weight:600; color:var(--wk-tinta);
  font-variant-numeric:tabular-nums;
}

/* Un botón y el resto enlaces: si los dos van rellenos, la ficha deja de decir
   cuál es la acción principal. Misma regla que en Anmelden. */
body.wk-neu .wk-pedido__acciones{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
body.wk-neu a.wk-pedido__btn{
  display:inline-block;
  padding:11px 22px;
  background:var(--wk-rojo);
  color:#fff !important;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none !important;
  border:1px solid transparent;
}
body.wk-neu a.wk-pedido__btn:hover{ background:var(--wk-rojo-700); }
body.wk-neu a.wk-pedido__enlace{
  font-size:13px; color:var(--wk-tinta-2) !important;
  text-decoration:underline; text-underline-offset:3px;
}
body.wk-neu a.wk-pedido__enlace:hover{ color:var(--wk-rojo) !important; }
body.wk-neu .wk-pedidos__pag{ display:flex; gap:var(--s5); margin-top:var(--s5); }

@media (max-width:560px){
  body.wk-neu .wk-pedido__cab{ flex-direction:column; gap:var(--s3); }
  body.wk-neu a.wk-pedido__btn{ width:100%; text-align:center; }
}

@media (max-width:820px){
  body.wk-neu.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
    grid-template-columns:minmax(0,1fr);
    gap:var(--s5);
  }
  body.wk-neu .wk-dash__kacheln{ grid-template-columns:minmax(0,1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MINI-CARRITO DESPLEGABLE DE LA CABECERA
   Se abre al pasar el ratón por la cesta y seguía con el estilo de serie:
   una tira estrecha, texto oscuro sobre fondo oscuro y fotos sin plancha.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header-cart .widget_shopping_cart{
  background:var(--wk-celda) !important;
  border:1px solid var(--wk-filete-2);
  box-shadow:0 12px 32px rgba(18,16,14,.18);
  min-width:340px;
  padding:var(--s4) !important;
}
.site-header-cart .widget_shopping_cart .cart_list li{
  border-bottom:1px solid var(--wk-filete);
  padding:10px 0 10px 0;
}
.site-header-cart .widget_shopping_cart .cart_list li a{
  color:var(--wk-tinta) !important;
  font-size:13.5px;
  font-weight:500;
}
.site-header-cart .widget_shopping_cart .cart_list li img{
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  mix-blend-mode:multiply;
  width:52px; height:52px; object-fit:contain;
  float:right; margin-left:var(--s3);
}
.site-header-cart .widget_shopping_cart .quantity{
  color:var(--wk-tinta-3) !important;
  font-family:var(--wk-mono);
  font-size:12px;
}
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total{
  color:var(--wk-tinta) !important;
  border-top:2px solid var(--wk-tinta);
  padding-top:var(--s3);
  font-variant-numeric:tabular-nums;
}
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total .amount{ font-weight:600; }
.site-header-cart .widget_shopping_cart .buttons .button{
  background:var(--wk-rojo) !important;
  color:#fff !important;
  border:0 !important;
  width:100%;
  text-align:center;
  margin-bottom:6px;
}
.site-header-cart .widget_shopping_cart .buttons .button.checkout{ background:var(--wk-tinta) !important; }
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message{
  color:var(--wk-tinta-2) !important;
  margin:0;
}

/* --- 404 --------------------------------------------------------------- */
body.wk-neu .wk-404{
  max-width:640px;
  margin-inline:auto;
  padding:var(--s9) var(--wk-calle) var(--s10);
  text-align:left;
}
body.wk-neu .wk-404 h1{
  font-family:var(--wk-cond) !important;
  font-size:clamp(32px,4vw,48px) !important;
  margin-bottom:var(--s4) !important;
}
body.wk-neu .wk-404__texto{ max-width:52ch; margin-bottom:var(--s6); }
body.wk-neu .wk-404__buscar .woocommerce-product-search{
  display:flex; gap:0; margin-bottom:var(--s7);
}
body.wk-neu .wk-404__buscar input[type="search"]{
  flex:1;
  height:52px;
  padding:0 var(--s4);
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  border:1px solid var(--wk-filete-2) !important;
  border-right:0 !important;
  font-size:15px;
}
body.wk-neu .wk-404__buscar input[type="search"]::placeholder{ color:var(--wk-tinta-3); }
body.wk-neu .wk-404__buscar button{
  height:52px;
  padding:0 var(--s5);
  background:var(--wk-rojo) !important;
  color:#fff !important;
  border:0 !important;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:13px;
}
body.wk-neu .wk-404__cats{
  display:flex; flex-wrap:wrap; gap:8px;
  border-top:1px solid var(--wk-filete);
  padding-top:var(--s5);
}
body.wk-neu .wk-404__cats a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 var(--s4);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete-2);
  color:var(--wk-tinta) !important;
  font-size:13.5px; font-weight:500;
  text-decoration:none;
  transition:border-color .15s linear,color .15s linear;
}
body.wk-neu .wk-404__cats a:hover{ border-color:var(--wk-tinta); }
body.wk-neu .wk-404__cats a.wk-404__todas{
  border-color:var(--wk-rojo);
  color:var(--wk-rojo) !important;
}
body.wk-neu .wk-404__cats a.wk-404__todas:hover{ background:var(--wk-rojo); color:#fff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ MÓVIL
   El botón "Menü" funcionaba (ponía la clase .toggled) pero el menú seguía
   cerrado: Storefront lo esconde con max-height:0 sobre .nav-menu y su regla
   de apertura espera un `.menu > ul` que nuestro wp_nav_menu no genera. El
   menú era literalmente imposible de abrir en el teléfono.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .main-navigation.toggled ul.menu,
  .main-navigation.toggled ul.nav-menu{
    max-height:75vh !important;
    overflow-y:auto !important;
    display:block !important;
  }
  .main-navigation ul.menu > li,
  .main-navigation ul.nav-menu > li{
    display:block;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:0 var(--s4, 16px);
    white-space:normal;
    font-size:14px;
  }
  /* El subrayado animado del escritorio aquí no pinta nada */
  .main-navigation ul.menu > li > a::after{ display:none; }
  /* Los desplegables de subcategorías en móvil serían cinco pantallas de
     lista: cada categoría lleva a su página, que ya enseña sus subcategorías. */
  .main-navigation ul.menu ul.sub-menu{ display:none !important; }
  /* La cesta con contador, alineada con el botón del menú */
  .site-header-cart{ text-align:right; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OBJETIVOS TÁCTILES QUE QUEDABAN CORTOS (medidos a 375px)
   ═══════════════════════════════════════════════════════════════════════════ */
/* "Alle ansehen" de las cabeceras de sección: 20px de alto */
body.wk-neu .wk-enlace,
body.wk-neu .wk-cabecera-seccion__mas{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
/* Paginación del catálogo: 30px */
body.wk-neu .woocommerce nav.woocommerce-pagination ul li a,
body.wk-neu .woocommerce nav.woocommerce-pagination ul li span,
body.wk-neu ul.page-numbers li a,
body.wk-neu ul.page-numbers li span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  color:var(--wk-tinta-2) !important;
  font-family:var(--wk-mono);
  font-size:13px;
  border:1px solid var(--wk-filete);
  background:var(--wk-celda);
  text-decoration:none;
}
body.wk-neu ul.page-numbers li span.current,
body.wk-neu ul.page-numbers li a:hover{
  background:var(--wk-tinta) !important;
  color:#fff !important;
  border-color:var(--wk-tinta);
}
/* La lupa de la galería y los botones de la venta cruzada del carrito */
body.wk-neu .woocommerce-product-gallery__trigger{
  width:44px !important;
  height:44px !important;
}
@media (max-width:767px){
  body.wk-neu .wp-block-button__link.add_to_cart_button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* Enlaces sueltos dentro del texto legal del pie de ficha: que al menos
     tengan zona de pulsado decente */
  body.wk-neu .wc-gzd-additional-info a{
    display:inline-block;
    padding:8px 2px;
    margin:-8px -2px;
  }
}

/* La pieza que faltaba: Storefront en móvil esconde div.primary-navigation
   porque espera enseñar en su lugar una COPIA "handheld" del menú que nuestro
   wp_nav_menu no genera. Resultado: el nav se abría (551px de alto) pero su
   único contenido seguía en display:none. */
@media (max-width:767px){
  .main-navigation div.primary-navigation{ display:block !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OBJETIVOS TÁCTILES EN MÓVIL — los que quedaban, identificados uno a uno
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* Migas: 17px de alto */
  body.wk-neu .woocommerce-breadcrumb a,
  body.wk-neu .storefront-breadcrumb a{
    display:inline-block;
    padding:13px 4px;
    margin:-13px -4px;
  }
  /* Pestañas de la ficha: 37px */
  body.wk-neu .woocommerce-tabs ul.tabs li a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  /* La categoría del pie de ficha ("Rohrbearbeitung"): 15px */
  body.wk-neu .product_meta a{
    display:inline-block;
    padding:14px 4px;
    margin:-14px -4px;
  }
  /* Título de producto en la rejilla: la zona de pulsado crece sin mover nada.
     ⚠️ Este `display:block` ROMPÍA el recorte a 2 líneas y era la causa de que
     en el móvil se viera una tercera línea cortada por la mitad: TODO el texto
     del título vive dentro del <a>, así que al volverlo bloque el
     `-webkit-box` del <h2> pasa a tener UNA sola caja hija en vez de líneas, y
     `-webkit-line-clamp` deja de truncar. La solución es poner el recorte en
     el propio enlace, que es quien tiene las líneas. `-webkit-box` también es
     de bloque, así que la zona de pulsado sigue siendo igual de grande.
     Y de paso van 3 líneas en vez de 2: en dos columnas estrechas los nombres
     de BGS necesitan la tercera para entenderse. */
  body.wk-neu .wk-ficha__titel{
    display:block;
    overflow:visible;
    min-height:60px;          /* 3 líneas a 14px/1.33 = 56px + respiro */
  }
  body.wk-neu .wk-ficha__titel a{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    padding:6px 0;
    margin:-6px 0;
    /* Los nombres compuestos alemanes ("Kupplungs-/Variomatikwerkzeug") no
       caben en una columna de 170px y el navegador los partía por donde caía
       —"Variomat / ikwerkzeug"—, sin guion y sin sentido. Con hyphens:auto y
       <html lang="de"> parte por sílabas y pone el guion. `break-word` queda
       de red por si aparece una palabra que ni el diccionario sabe partir. */
    hyphens:auto;
    -webkit-hyphens:auto;
    overflow-wrap:break-word;
    word-break:normal;
  }
  /* "Versandkosten" del texto legal: de 34 a 44 */
  body.wk-neu .wc-gzd-additional-info a{
    padding:13px 4px;
    margin:-13px -4px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA — cerrar los tamaños accidentales
   Medidos 19 tamaños distintos en la tienda, y varios casi idénticos entre sí:
   11 / 11,3 / 11,5 · 12 / 12,5 · 13 / 13,1 · 14 / 14,5. Esos decimales no los
   ha decidido nadie: salen de la escala en `em` de Storefront, que se compone
   sola al anidar (0,875em dentro de 0,875em…). El caso peor era el PRECIO de
   la ficha de producto, el número más importante de la página, a 21,2px.
   Aquí se anclan en px los que se habían escapado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El precio de la ficha: es la cifra que decide la compra. */
body.wk-neu.single-product div.product p.price,
body.wk-neu.single-product div.product span.price,
body.wk-neu.single-product div.product p.price bdi,
body.wk-neu.single-product div.product .woocommerce-Price-currencySymbol{
  font-size:30px !important;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums lining-nums;
}
/* El símbolo de moneda, un punto por debajo: acompaña, no compite. */
body.wk-neu.single-product div.product .woocommerce-Price-currencySymbol{
  font-size:22px !important;
  font-weight:500;
}
/* El precio tachado de una oferta no puede pesar como el vigente. */
body.wk-neu.single-product div.product p.price del,
body.wk-neu.single-product div.product p.price del bdi{
  font-size:17px !important;
  font-weight:400;
  color:var(--wk-tinta-4) !important;
}

/* Rótulo de reseñas: iba a 24,3px, fuera de la escala de h2 (26). */
body.wk-neu .woocommerce-Reviews-title,
body.wk-neu #reviews h2{
  font-family:var(--wk-cond) !important;
  font-size:26px !important;
  letter-spacing:-.01em;
  text-transform:none !important;
}

/* Recuentos entre paréntesis de las listas de categorías: 11,3 -> 11 y en
   monoespaciada, que es como se compone un número en esta tienda. */
body.wk-neu .count,
body.wk-neu span.count{
  font-family:var(--wk-mono) !important;
  font-size:12px !important;
  color:var(--wk-tinta-3) !important;
  font-variant-numeric:tabular-nums;
}

/* Enlaces y botones sueltos que caían en 12,5 / 13,1 / 14,5 */
body.wk-neu .site-content a.button,
body.wk-neu .site-content .button.product_type_simple,
body.wk-neu .woocommerce-product-search button,
body.wk-neu .widget a{
  font-size:13px !important;
}
body.wk-neu .widget_product_categories a,
body.wk-neu .product-categories a{
  font-size:14px !important;
}
/* La etiqueta oculta del buscador arrastraba 13,1px a sus hermanos */
body.wk-neu .screen-reader-text{ font-size:13px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   RITMO VERTICAL — una sola escala
   Storefront espacia con una escala ÁUREA (1,618em), de donde salen los 21,
   27, 34, 39, 42 y 56px que aparecían por toda la tienda. Este diseño usa
   base 4 (4/8/12/16/24/32/48/64/96/128). Dos escalas conviviendo es justo lo
   que hace que una página "no acabe de cuadrar" aunque cada pieza esté bien.
   Se normaliza el área de contenido; la cabecera y el pie tienen su propio
   ritmo y se dejan en paz.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .site-content :is(h1, h2, h3, h4, h5, h6){
  margin-top:var(--s7);
  margin-bottom:var(--s4);
}
body.wk-neu .site-content :is(h1, h2, h3, h4, h5, h6):first-child{ margin-top:0; }
/* Un subtítulo pertenece al párrafo que introduce: pegado a él, separado de
   lo anterior. Storefront les ponía el mismo aire arriba que abajo y flotaban. */
body.wk-neu .site-content :is(h2, h3, h4) + p,
body.wk-neu .site-content :is(h2, h3, h4) + ul,
body.wk-neu .site-content :is(h2, h3, h4) + ol{ margin-top:0; }

body.wk-neu .site-content p{ margin-top:0; margin-bottom:var(--s4); }
/* Esta regla da sangría a las listas de TEXTO. Hay que excluir las listas que
   son maquetación (rejillas y franjas), o les mete 24px por la izquierda y las
   descuadra respecto al resto de la página. */
body.wk-neu .site-content :is(ul, ol):not(.products):not(.wk-desc__medidas):not(.wk-desc__piezas):not(.wkc-grid):not(.wk-hero__datos){
  margin-top:0;
  margin-bottom:var(--s5);
  padding-left:var(--s5);   /* Storefront sangraba 45px, fuera de escala */
}
body.wk-neu .site-content li{ margin-bottom:var(--s2); }
body.wk-neu .entry-content > *:last-child{ margin-bottom:0; }

/* Medida de línea en las páginas de texto largo: a 1.380px de ancho un
   párrafo son ~170 caracteres por renglón y el ojo pierde la línea al saltar. */
body.wk-neu .page .entry-content,
body.wk-neu .page .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote){
  max-width:70ch;
}
body.wk-neu .page .entry-content > :is(table, .wp-block-table){ max-width:none; }

/* El título de una página tocaba el texto (0px de separación) */
body.wk-neu .page .entry-header,
body.wk-neu .woocommerce-products-header{ margin-bottom:var(--s6); }

/* --- Búsqueda sin resultados ------------------------------------------- */
body.wk-neu .wk-vacio{
  max-width:640px;
  padding:var(--s6) 0 var(--s9);
}
body.wk-neu .wk-vacio__texto{
  font-size:17px;
  line-height:1.6;
  color:var(--wk-tinta-2) !important;
  margin-bottom:var(--s6);
}
body.wk-neu .wk-vacio__texto strong{ color:var(--wk-tinta) !important; font-weight:600; }
body.wk-neu .wk-vacio__buscar .woocommerce-product-search{ display:flex; margin-bottom:var(--s7); }
body.wk-neu .wk-vacio__buscar input[type="search"]{
  flex:1; height:52px; padding:0 var(--s4);
  background:var(--wk-celda) !important; color:var(--wk-tinta) !important;
  border:1px solid var(--wk-filete-2) !important; border-right:0 !important; font-size:15px;
}
body.wk-neu .wk-vacio__buscar button{
  height:52px; padding:0 var(--s5);
  background:var(--wk-rojo) !important; color:#fff !important; border:0 !important;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:13px;
}
/* El hueco muerto entre el titular y el contenido de la búsqueda */
body.wk-neu.search .woocommerce-products-header{ margin-bottom:var(--s5); }

/* El margen superior de 48px del ritmo vertical es para los encabezados que
   SEPARAN bloques dentro de un texto. El título de la página abre la página:
   no separa nada, y ahí ese aire se lee como un hueco olvidado. */
body.wk-neu .woocommerce-products-header > h1,
body.wk-neu .woocommerce-products-header .page-title,
body.wk-neu .entry-header > h1,
body.wk-neu .entry-header .entry-title,
body.wk-neu .site-main > h1:first-child{
  margin-top:0 !important;
}
body.wk-neu .wk-vacio{ padding-top:0; }

/* Storefront le da a la cabecera del listado un padding-bottom de 5.6180em
   (su escala áurea) = ~90px de vacío bajo un titular de 43px. Sumado a su
   margen inferior daba 165px entre el título y la primera fila de productos.
   Con la escala de base 4 son 32px, que es lo que separa cualquier otro
   rótulo de su contenido en esta tienda. */
body.wk-neu .woocommerce-products-header{
  padding-bottom:0 !important;
  margin-bottom:var(--s6) !important;
}

/* La barra de orden y recuento del listado: 76px de alto y 34px de margen
   inferior (otro 1.618em). Es una barra de control, no una sección: se compone
   como un renglón entre filetes y ocupa lo que ocupa su texto. */
body.wk-neu .storefront-sorting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  margin-bottom:var(--s5) !important;
  padding:var(--s3) 0;
  border-top:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
}
body.wk-neu .storefront-sorting .woocommerce-result-count{
  margin:0;
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--wk-tinta-3) !important;
}
body.wk-neu .storefront-sorting .woocommerce-ordering{ margin:0; }
body.wk-neu .storefront-sorting select{
  height:40px;
  padding:0 var(--s3);
  font-family:var(--wk-sans) !important;   /* venía en Source Sans Pro */
  font-size:13px;
}
/* La paginación de arriba, si la hay, no necesita su propio bloque de aire */
body.wk-neu .storefront-sorting .woocommerce-pagination{ margin:0; }

/* ⚠️ Corrección: la barra de orden contiene TAMBIÉN la paginación superior
   (76px) y un contenedor de avisos. Al ponerla en flex, esa paginación pasó a
   ser una columna más y estiraba la barra a 102px — peor que antes. La
   paginación de arriba sobra: la de abajo, al final de las 24 fichas, es la
   que se usa. Se oculta y la barra queda en un renglón de verdad. */
/* ⚠️ Storefront envuelve en .storefront-sorting TANTO la barra de arriba como
   la de abajo, así que ocultar "la paginación de la barra" se llevaba también
   la de abajo y la tienda se quedaba SIN paginación: con 9.347 productos, sin
   forma de pasar de página. Se oculta solo en la barra que va ANTES de la
   rejilla; la de después es la que se usa de verdad. */
body.wk-neu ul.products ~ .storefront-sorting nav.woocommerce-pagination{ display:block; }
body.wk-neu .storefront-sorting:not(:last-of-type) > nav.woocommerce-pagination{ display:none; }
/* Abajo, el orden y el recuento ya se vieron arriba: solo la paginación. */
body.wk-neu ul.products ~ .storefront-sorting > form.woocommerce-ordering,
body.wk-neu ul.products ~ .storefront-sorting > p.woocommerce-result-count{ display:none; }
body.wk-neu ul.products ~ .storefront-sorting{ justify-content:center; border-top:0; }
body.wk-neu .storefront-sorting > .woocommerce-notices-wrapper:empty{ display:none; }
body.wk-neu .storefront-sorting .woocommerce-ordering select{
  height:36px;
  margin:0;
}
body.wk-neu .storefront-sorting form.woocommerce-ordering{ display:flex; align-items:center; }

/* ⚠️ Dos correcciones de reglas propias demasiado amplias:
   1. `.count` en gris tinta-3 vale para los recuentos de categorías sobre
      papel, pero el contador del carrito está en la cabecera NEGRA: se quedó
      en 3,62:1. El color se acota al contenido claro.
   2. El botón del listado heredó color blanco de la regla de tamaño de
      `.site-content a.button`: blanco sobre blanco, 1:1, invisible. */
.site-header .count,
.site-header-cart .count,
.site-header a.cart-contents .count{
  color:#fff !important;
  font-family:var(--wk-mono);
  font-size:12px;
}
body.wk-neu ul.products li.product .button,
body.wk-neu ul.products li.product a.button.product_type_simple,
body.wk-neu ul.products li.product .added_to_cart{
  color:var(--wk-rojo) !important;
  background:transparent !important;
  font-size:12.5px !important;
}
body.wk-neu ul.products li.product:hover .button,
body.wk-neu ul.products li.product .button:hover,
body.wk-neu ul.products li.product a.button.product_type_simple:hover{
  background:var(--wk-rojo) !important;
  color:#fff !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ZOOM DE LA GALERÍA — la doble imagen fantasma
   El zoom de WooCommerce no sustituye la foto: superpone una copia ampliada
   (img.zoomImg, 1600px) sobre la original. Como el sistema aplica
   mix-blend-mode:multiply a las fotos de producto para fundir su fondo blanco
   con la plancha, las DOS capas se multiplicaban entre sí y se veían a la vez,
   como una transparencia.
   La capa ampliada tiene fondo blanco propio, así que no necesita fundirse con
   nada: debe ser OPACA y taparlo todo.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .woocommerce-product-gallery img.zoomImg{
  mix-blend-mode:normal !important;
  background:#fff !important;
  z-index:5;
  /* La original lleva un inset del 7/8/9 %; la ampliada se posiciona por
     coordenadas y ese relleno la descuadraría respecto al puntero. */
  padding:0 !important;
  filter:none !important;
}
/* Con la ampliada encima, la sombra de contacto asomaría por debajo. */
body.wk-neu .woocommerce-product-gallery:hover::after{ opacity:0; }
body.wk-neu .woocommerce-product-gallery::after{ transition:opacity .15s linear; }

/* La lupa, por encima de todo y con objetivo táctil decente */
body.wk-neu .woocommerce-product-gallery__trigger{ z-index:6; }


/* ═══════════════════════════════════════════════════════════════════════════
   MIGAS DE PAN
   Eran una línea de 13,1px con separadores "/" y el título completo del
   producto al final. Ahora: monoespaciada pequeña en versalitas —el mismo
   registro que el Art.-Nr. y los datos técnicos—, separador de punto medio y
   la página actual en tinta, sin enlace.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .storefront-breadcrumb{
  padding-block:var(--s3) !important;
  border-bottom:1px solid var(--wk-filete);
  background:transparent;
}
body.wk-neu .woocommerce-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  font-family:var(--wk-mono) !important;
  /* 13px y no 11: en monoespaciada con versalitas y .08em de espaciado, 11px
     quedaba en el límite de lo legible —el usuario lo pidió más grande el
     2026-09-01, igual que la descripción. */
  font-size:13px !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--wk-tinta) !important;   /* la pieza final, sin enlace */
  line-height:1.5;
}
body.wk-neu .woocommerce-breadcrumb a{
  color:var(--wk-tinta-3) !important;
  text-decoration:none;
  transition:color .14s linear;
}
body.wk-neu .woocommerce-breadcrumb a:hover{
  color:var(--wk-rojo) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
body.wk-neu .wk-miga-sep,
body.wk-neu .breadcrumb-separator{
  color:var(--wk-filete-2) !important;
  padding:0 var(--s2);
  font-size:13px;
}
/* El icono de casa de Font Awesome que abría la línea: sobra, ya pone "Start" */
body.wk-neu .woocommerce-breadcrumb::before,
body.wk-neu .storefront-breadcrumb .woocommerce-breadcrumb > .fa,
body.wk-neu .woocommerce-breadcrumb a[href$="werkadotools.com"]::before{
  display:none !important;
  content:none !important;
}
@media (max-width:767px){
  /* En móvil solo importa el nivel superior: el resto se corta antes de
     partirse en tres renglones. */
  /* display:block y no flex: text-overflow solo pone los puntos suspensivos
     en una caja de texto normal; con flex la miga salía cortada a secas
     ("…ISOLIERTE WERK") en el teléfono (chequeo visual 2026-09-07). */
  body.wk-neu .woocommerce-breadcrumb{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  /* Los enlaces van en inline-block y el recorte los quitaba ENTEROS: solo
     quedaba "START · …". En línea normal se corta a media palabra con "…". */
  body.wk-neu .woocommerce-breadcrumb a,
  body.wk-neu .woocommerce-breadcrumb .wk-miga-sep{ display:inline; }
}

/* El título de la ficha es h2 en el listado y h3 en portada/relacionados
   (jerarquía correcta), pero debe verse IGUAL en los dos sitios. */
body.wk-neu h3.wk-ficha__titel{
  font-family:var(--wk-sans) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.33 !important;
  letter-spacing:-.005em !important;
  color:var(--wk-tinta) !important;
  margin:0 0 var(--s2) !important;
  min-height:40px;
  text-transform:none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CARRITO DE LA CABECERA
   Tres cosas mal: el contador iba a opacidad 0,5 (se leía apagado, como
   desactivado), el icono es un ::after y por tanto quedaba DETRÁS del texto
   —"1 Artikel🛒" en vez de "🛒 1 Artikel"—, y la caja medía 73px de alto, que
   es lo que estiraba la franja entera del menú.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header-cart a.cart-contents{
  display:inline-flex !important;
  /* El icono es un ::after: invirtiendo la dirección queda delante, que es el
     orden natural de lectura, sin tener que redibujar el glifo. */
  flex-direction:row-reverse;
  align-items:center;
  gap:9px;
  height:44px;                  /* objetivo táctil, y deja de mandar en la franja */
  padding:0 var(--s2);
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
}
.site-header-cart a.cart-contents .count{
  opacity:1 !important;         /* estaba al 50 %: parecía deshabilitado */
  color:#fff !important;
  font-family:var(--wk-mono) !important;
  font-size:12px !important;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.site-header-cart a.cart-contents::after{
  font-size:19px;
  line-height:1;
  opacity:1;
  margin:0;
}
.site-header-cart a.cart-contents:hover .count{ color:#fff !important; }
.site-header-cart a.cart-contents:hover::after{ color:var(--wk-rojo-marca, #CC0000); }

/* Con el carrito ya en 44px, la franja del menú la marca el menú y no él. */
.storefront-primary-navigation .site-header-cart{
  display:flex;
  align-items:center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MINIATURAS DE LA GALERÍA
   Al importar las imágenes adicionales de BGS aparece la tira de miniaturas,
   que venía sin componer: fotos sueltas de distinto tamaño, sin plancha ni
   filete, y sin señal de cuál está seleccionada.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Reparto FIJO en vez de rejilla automática: con auto-fill las pistas salían
   descuadradas (una miniatura a 96px y salto a una segunda fila con solo 5
   fotos). Con una anchura fija y salto de línea natural, cinco caben en una
   fila y a partir de ahí bajan solas. */
body.wk-neu .flex-control-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  margin:var(--s3) 0 0;
  padding:0;
  list-style:none;
}
/* ⚠️ Storefront reparte estas miniaturas con `width:8.57%; float:left` desde
   `.single-product div.product .woocommerce-product-gallery …`, mucho más
   específico que un simple `.flex-control-thumbs li`: mi regla perdía y las
   miniaturas quedaban en 11px, como puntitos sueltos. Se iguala el selector
   para que el reparto lo haga la rejilla y no los porcentajes. */
body.wk-neu.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li,
body.wk-neu .flex-control-thumbs li{
  /* El margen también viene del selector largo de Storefront (repartía las
     miniaturas por porcentajes con márgenes laterales): dejaba 65px de aire
     entre cada una y solo cabían tres por fila. */
  margin:0 !important;
  padding:0;
  width:86px !important;
  flex:0 0 86px;
  float:none !important;
  list-style:none;
}
body.wk-neu .flex-control-thumbs li img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  padding:6%;
  opacity:1;                       /* venían al 50 % y parecían desactivadas */
  mix-blend-mode:multiply;
  cursor:pointer;
  transition:border-color .15s linear;
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu .flex-control-thumbs li img:hover{ border-color:var(--wk-tinta-3); }
}
/* La que se está viendo: filete rojo, que es la única señal que hacía falta */
body.wk-neu .flex-control-thumbs li img.flex-active,
body.wk-neu .flex-control-thumbs li img:focus-visible{
  border-color:var(--wk-rojo);
  border-width:2px;
  padding:calc(6% - 1px);
}
/* Con una sola foto no hay nada que elegir: la tira sobra. */
body.wk-neu .flex-control-thumbs:has(li:only-child){ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   FILA ARRASTRABLE DE PRODUCTOS  (portada)
   ---------------------------------------------------------------------------
   NO es un carrusel que gira solo. Los automáticos cambian antes de que dé
   tiempo a leer y casi nadie llega a la segunda tanda; aquí no se mueve nada
   por su cuenta. El truco que hace que se entienda sin instrucciones es que la
   tarjeta siguiente asome cortada por el borde: eso dice "hay más" mejor que
   cualquier flecha.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .wk-carrusel{ position:relative; }

body.wk-neu ul.products.wk-reihe--carrusel{
  display:flex !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:var(--s5);
  margin:0 !important;
  padding:0 0 var(--s3) !important;   /* hueco para que la sombra no se corte */
  scrollbar-width:none;               /* Firefox */
  -ms-overflow-style:none;            /* Edge viejo */
  overscroll-behavior-x:contain;      /* que arrastrar no navegue hacia atrás */
}
body.wk-neu ul.products.wk-reihe--carrusel::-webkit-scrollbar{ display:none; }

body.wk-neu ul.products.wk-reihe--carrusel li.product{
  flex:0 0 var(--wk-tarjeta, 250px);
  width:var(--wk-tarjeta, 250px) !important;
  max-width:none !important;
  margin:0 !important;
  scroll-snap-align:start;
}

/* Al desplazarse con el teclado el foco tiene que verse. */
body.wk-neu ul.products.wk-reihe--carrusel:focus-visible{
  outline:2px solid var(--wk-rojo); outline-offset:4px;
}

/* --- Flechas: cuadradas y con filete, como el resto de la tienda --------- */
body.wk-neu .wk-carrusel__flecha{
  position:absolute;
  top:132px;                 /* a la altura de la foto, no del centro de la ficha */
  z-index:3;
  width:44px; height:44px;   /* objetivo táctil mínimo */
  padding:0;
  display:grid; place-items:center;
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  border:1px solid var(--wk-filete-2);
  border-radius:0;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  transition:background-color .16s var(--wk-ease), border-color .16s var(--wk-ease);
}
/* El trazo va con el color EXPLÍCITO, no con currentColor: la regla global
   `body.wk-neu .site-content :is(.button, button, …){color:#fff !important}`
   tiene más especificidad (0,3,1) que la del botón (0,2,1) y le ganaba aunque
   ambas lleven !important — la flecha salía blanca sobre fondo blanco. */
body.wk-neu .wk-carrusel__flecha svg{
  width:20px; height:20px; fill:none;
  stroke:var(--wk-tinta); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* Dentro del contenedor, no fuera: con valores negativos la flecha derecha se
   iba contra el borde de la pantalla y quedaba a medias. */
body.wk-neu .wk-carrusel__flecha--izq{ left:4px; }
body.wk-neu .wk-carrusel__flecha--der{ right:4px; }
body.wk-neu .wk-carrusel__flecha[hidden]{ display:none; }
body.wk-neu .wk-carrusel__flecha:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wk-carrusel__flecha:hover{
    background:var(--wk-hundido) !important; border-color:var(--wk-tinta-3);
  }
}

/* --- Anchos de tarjeta por tamaño de pantalla --------------------------- */
body.wk-neu .wk-bestseller .wk-carrusel,
body.wk-neu .wk-guenstig .wk-carrusel{ --wk-tarjeta:250px; }
body.wk-neu .wk-bloque__productos .wk-carrusel{ --wk-tarjeta:230px; }

@media (max-width:1279px){
  body.wk-neu .wk-bestseller .wk-carrusel,
  body.wk-neu .wk-guenstig .wk-carrusel,
  body.wk-neu .wk-bloque__productos .wk-carrusel{ --wk-tarjeta:220px; }
}
@media (max-width:767px){
  /* 64vw deja la siguiente tarjeta cortada a la vista: es la señal de que se
     puede arrastrar, y en el móvil el gesto ya lo conoce todo el mundo.
     ⚠️ Pero 64vw SIN TECHO se dispara en pantallas anchas que aún caen en este
     tramo, como un iPad en vertical: 744 px de ancho → tarjeta de 476 px y foto
     de 442×442, con 1,6 fichas a la vista. Medido el 22.09.2026 sobre el iPad
     mini del dueño. Con el tope de 240 px un teléfono de 375 px se queda igual
     que antes (64vw = 240) y el iPad pasa a enseñar 3 fichas. Se resuelve con
     `min()` y no con otro punto de ruptura porque así vale también para los
     móviles grandes y los plegables, sin tener que adivinar cada medida. */
  body.wk-neu .wk-bestseller .wk-carrusel,
  body.wk-neu .wk-guenstig .wk-carrusel,
  body.wk-neu .wk-bloque__productos .wk-carrusel{ --wk-tarjeta:min(64vw, 240px); }
  body.wk-neu ul.products.wk-reihe--carrusel{ gap:var(--s3); }
  body.wk-neu .wk-carrusel__flecha{ display:none !important; }  /* sobra: se arrastra */
}

@media (prefers-reduced-motion:reduce){
  body.wk-neu ul.products.wk-reihe--carrusel{ scroll-behavior:auto; }
  body.wk-neu .wk-carrusel__flecha{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANDA DE PRODUCTOS QUE FLOTA  (marquesina de la portada)
   ---------------------------------------------------------------------------
   Se desliza sola, sin parar. El bucle es invisible porque la lista va impresa
   DOS veces y la pista se mueve exactamente el 50 % de su ancho: al terminar,
   la copia está justo donde estaba el original.
   ⚠️ La separación va en `margin-right` de cada pieza, NO en `gap`. Con gap, el
   hueco entre las dos mitades sería distinto al de dentro y el empalme se vería.
   ⚠️ Todo lo que se mueve solo tiene que poder pararse (WCAG 2.2.2): se para al
   pasar por encima, al entrar con el teclado y con el botón; y con
   `prefers-reduced-motion` no se mueve nada — la banda queda quieta y se arrastra.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .wk-marq{
  position:relative;
  overflow:hidden;
  /* Los bordes se desvanecen: sin esto las piezas aparecen y desaparecen de
     golpe contra el borde y el movimiento se ve barato. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);
}
body.wk-neu .wk-marq__pista{
  display:flex;
  width:max-content;
  animation:wk-deriva var(--wk-marq-seg,60s) linear infinite;
  will-change:transform;
}
body.wk-neu .wk-marq__copia{ display:contents; }

@keyframes wk-deriva{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Parada: ratón, teclado y botón. */
body.wk-neu .wk-marq:hover .wk-marq__pista,
body.wk-neu .wk-marq:focus-within .wk-marq__pista,
body.wk-neu .wk-marq.wk-marq--parada .wk-marq__pista{ animation-play-state:paused; }

/* --- Cada pieza: la FOTO manda, el texto acompaña ----------------------- */
body.wk-neu .wk-marq__pieza{
  flex:0 0 auto;
  width:var(--wk-marq-pieza,190px);
  margin-right:var(--s5);
  display:block;
  text-decoration:none !important;
  color:inherit !important;
}
body.wk-neu .wk-marq__foto{
  display:block;
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  aspect-ratio:1/1;
  overflow:hidden;
}
body.wk-neu .wk-marq__foto img{
  width:100% !important; height:100% !important;
  object-fit:contain !important;
  padding:8% !important;
  mix-blend-mode:multiply;
  display:block;
  transition:transform .3s var(--wk-ease);
}
body.wk-neu .wk-marq__texto{ display:block; padding:var(--s3) 2px 0; }
body.wk-neu .wk-marq__nombre{
  display:block;
  font-size:13px; line-height:1.35; color:var(--wk-tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.wk-neu .wk-marq__precio{
  display:block; margin-top:2px;
  font-size:14px; font-weight:600; color:var(--wk-tinta);
  font-variant-numeric:tabular-nums;
}
body.wk-neu .wk-marq__precio .woocommerce-Price-amount{ color:inherit !important; }
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wk-marq__pieza:hover .wk-marq__foto img{ transform:scale(1.05); }
  body.wk-neu .wk-marq__pieza:hover .wk-marq__nombre{ text-decoration:underline; text-underline-offset:3px; }
}
body.wk-neu .wk-marq__pieza:focus-visible{ outline:2px solid var(--wk-rojo); outline-offset:3px; }

/* --- Botón de pausa: discreto pero real --------------------------------- */
body.wk-neu .wk-marq__pausa{
  position:absolute; right:8px; bottom:8px; z-index:4;
  width:36px; height:36px; padding:0;
  display:grid; place-items:center;
  background:var(--wk-celda) !important;
  border:1px solid var(--wk-filete-2); border-radius:0;
  cursor:pointer; opacity:.55;
  transition:opacity .16s var(--wk-ease);
}
body.wk-neu .wk-marq:hover .wk-marq__pausa,
body.wk-neu .wk-marq__pausa:focus-visible{ opacity:1; }
body.wk-neu .wk-marq__pausa svg{
  width:16px; height:16px;
  /* color explícito: la regla global de botones pinta el texto de blanco y
     con currentColor el icono desaparecía sobre fondo claro */
  fill:var(--wk-tinta); stroke:none;
}
body.wk-neu .wk-marq__icono-play{ display:none; }
body.wk-neu .wk-marq--parada .wk-marq__icono-pausa{ display:none; }
body.wk-neu .wk-marq--parada .wk-marq__icono-play{ display:block; }

/* --- Tamaños por pantalla ---------------------------------------------- */
body.wk-neu .wk-bestseller .wk-marq{ --wk-marq-pieza:200px; }
body.wk-neu .wk-bloque__productos .wk-marq{ --wk-marq-pieza:175px; }
@media (max-width:767px){
  body.wk-neu .wk-bestseller .wk-marq,
  body.wk-neu .wk-bloque__productos .wk-marq{ --wk-marq-pieza:150px; }
  body.wk-neu .wk-marq__pieza{ margin-right:var(--s3); }
  body.wk-neu .wk-marq{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);
            mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  }
}

/* Quien pide menos animación no ve nada moverse: la banda se queda quieta y
   se puede recorrer arrastrando. */
@media (prefers-reduced-motion:reduce){
  body.wk-neu .wk-marq__pista{ animation:none; }
  body.wk-neu .wk-marq{ overflow-x:auto; }
  body.wk-neu .wk-marq__copia{ display:none; }
  body.wk-neu .wk-marq__pausa{ display:none; }
  body.wk-neu .wk-marq__foto img{ transition:none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CELDAS DE RELLENO — LA TABLA CIERRA SIEMPRE SU RECTÁNGULO
   La rejilla del catálogo es una tabla: celdas pegadas, cada una con su filete
   derecho e inferior. Con 24 productos en 5 columnas la última fila se quedaba
   en 4 y el resto era un agujero: sin fondo y sin los filetes que cierran el
   borde derecho e inferior. No parecía un espacio en blanco intencionado, sino
   la tabla rota por la esquina.
   `inc/listado-nuevo.php` añade 4 celdas vacías al final del listado. Las que
   completan la fila se estiran solas (un hijo de rejilla ocupa todo el alto de
   su fila); las sobrantes caen en una fila que mide 0px y no se ven.
   ⚠️ Los filetes NO van en `border`, sino pintados como FONDO (dos degradados
   de 1px pegados al borde derecho e inferior). Motivo: un `border` sobre una
   caja de altura 0 sigue pintando su 1px, así que las celdas sobrantes
   dejarían una raya suelta por debajo de la tabla; un fondo sobre una caja de
   altura 0 no pinta nada.
   ⚠️ Peaje conocido y medido: cuando el alto de la fila sale fraccionario, el
   navegador redondea el fondo un píxel por encima del `border` de la celda
   vecina, y el filete inferior da un escalón de 1px en la unión (se ve a 8
   aumentos, no a tamaño real; a 5 columnas no aparece). Se probó también con
   `box-shadow: inset` y cae exactamente en el mismo píxel, así que no es cosa
   del método: es el redondeo de la fila. Cuadrarlo al 100 % obligaría a contar
   productos y columnas y a atar este archivo a los puntos de ruptura de arriba
   — mucha fragilidad para un pelo de 1px.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu ul.products > li.wk-fuellzelle{
  margin:0;
  padding:0;
  min-width:0;
  min-height:0;
  list-style:none;
  background:
    linear-gradient(var(--wk-filete),var(--wk-filete)) right  / 1px 100% no-repeat,
    linear-gradient(var(--wk-filete),var(--wk-filete)) bottom / 100% 1px no-repeat,
    var(--wk-celda);
}
body.wk-neu ul.products > li.wk-fuellzelle::before,
body.wk-neu ul.products > li.wk-fuellzelle::after{
  content:none;
}

/* Red de seguridad: en las filas curadas de la portada las tarjetas van
   separadas y no hay tabla que cerrar, así que ahí una celda de relleno no
   pintaría nada bueno. (Hoy no llegan: la portada no pasa por el filtro.) */
body.wk-neu ul.products.wk-reihe > li.wk-fuellzelle{
  display:none;
}


/* La pieza recortada del hero, en el móvil.
   La regla de más arriba le da `aspect-ratio:16/10` a la figura para el diseño
   viejo (la foto enmarcada) y va DESPUÉS que la nuestra, así que gana: sin esto
   la herramienta recortada queda encajada en una caja que no le corresponde.
   El `order:-1` se QUITÓ el 22.09.2026: la foto entraba primero, medía 416 px y
   dejaba el titular en el píxel 720 de 812 — se entraba a la tienda viendo una
   herramienta suelta. Ahora manda el texto y la pieza (230 px) asoma debajo. */
@media (max-width:900px){
  body.wk-neu .wk-hero__figura--recorte{ aspect-ratio:auto; }
  body.wk-neu .wk-hero__figura--recorte img{ max-width:230px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESEÑAS ("Rezensionen")
   Los campos salían NEGROS sobre el papel: `style.css` —la hoja del tema
   oscuro— pinta TODOS los input y textarea con #1c1c1c y letra blanca, y el
   rediseño claro solo había arreglado los del checkout
   (`.woocommerce form .form-row input.input-text`). El formulario de reseñas no
   es de WooCommerce sino el de comentarios de WordPress, así que se quedó
   fuera: caja negra enorme en mitad de la ficha.
   Se arregla de raíz —todos los campos del área clara— y de paso la sección
   pasa a hablar el idioma de la tienda: celda blanca con filete, rótulos en su
   sitio y las estrellas en el rojo de marca.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .site-content :is(input[type="text"],input[type="email"],input[type="tel"],
input[type="url"],input[type="number"],input[type="password"],input[type="search"],textarea){
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  /* Esta regla va DESPUÉS que las de cada página y con la misma especificidad,
     así que es la que manda en el borde de TODOS los campos de la tienda: si
     aquí se pone un filete flojo, no hay override local que valga. */
  border:1px solid var(--wk-campo-borde) !important;
  border-radius:0 !important;
}
body.wk-neu .site-content ::placeholder{ color:var(--wk-tinta-4); opacity:1; }

body.wk-neu #reviews{ margin-top:var(--s6); }
body.wk-neu #reviews .woocommerce-noreviews{
  /* Era un recuadro blanco con filete rojo arriba y barra gris a la izquierda,
     el aviso genérico de WooCommerce. Aquí es un renglón y ya. */
  background:none !important;
  border:0 !important;
  border-top:1px solid var(--wk-filete) !important;
  padding:var(--s4) 0 0 !important;
  margin:0 0 var(--s5) !important;
  color:var(--wk-tinta-3);
  font-size:14px;
}
body.wk-neu #reviews .woocommerce-noreviews::before{ content:none !important; }

body.wk-neu #review_form_wrapper{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s5);
}
body.wk-neu #reviews #respond{ background:none; border:0; padding:0; margin:0; }
body.wk-neu #reviews .comment-reply-title{
  display:block;
  font-family:var(--wk-cond);
  font-size:20px;
  font-weight:700;
  color:var(--wk-tinta);
  margin-bottom:var(--s3);
}
body.wk-neu #reviews .comment-notes,
body.wk-neu #reviews .comment-form-cookies-consent label{
  font-size:12.5px;
  line-height:1.55;
  color:var(--wk-tinta-3);
}
body.wk-neu #reviews .comment-form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--wk-tinta-2);
  margin-bottom:6px;
}
body.wk-neu #reviews .required{ color:var(--wk-rojo); }
body.wk-neu #reviews .comment-form-comment textarea{ min-height:150px; }

/* Las estrellas venían en gris pálido sobre blanco: no se veían y no invitaban
   a pulsarlas. Van en la tinta normal y se encienden en rojo. */
/* ⚠️ El color de las estrellas NO está en el enlace sino en su `::before`, y
   Storefront le pone además `opacity:.25` — por eso pintarlas en el `a` no
   hacía nada y seguían saliendo gris pálido. Y al pasar por encima se ponían
   MORADAS (#7f54b3, el color de WooCommerce), que no pinta nada aquí. */
body.wk-neu #reviews .comment-form-rating p.stars a{ font-size:1.5em; letter-spacing:.12em; }
body.wk-neu #reviews .comment-form-rating p.stars a::before{
  color:var(--wk-tinta-3) !important;
  opacity:1 !important;
}
body.wk-neu #reviews .comment-form-rating p.stars:hover a::before,
body.wk-neu #reviews .comment-form-rating p.stars.selected a.active::before,
body.wk-neu #reviews .comment-form-rating p.stars.selected a:not(.active)::before{
  color:var(--wk-rojo) !important;
  opacity:1 !important;
}
/* Las que quedan a la derecha de la elegida, apagadas. */
body.wk-neu #reviews .comment-form-rating p.stars a:hover ~ a::before,
body.wk-neu #reviews .comment-form-rating p.stars.selected a.active ~ a::before{
  color:var(--wk-tinta-4) !important;
  opacity:1 !important;
}

/* Y la valoración YA PUBLICADA (la de las fichas y la de cada reseña), que
   también viene en morado de fábrica. */
body.wk-neu .site-content .star-rating::before{ color:var(--wk-filete-2) !important; }
body.wk-neu .site-content .star-rating span::before{ color:var(--wk-rojo) !important; }

/* El formulario, en rejilla. Con `float` no bastaba —Storefront le da ancho
   completo a cada bloque y el correo salía debajo y sangrado—; en rejilla cada
   campo ocupa lo que le toca y en el teléfono se apila solo. */
body.wk-neu #reviews .comment-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4) var(--s5);
}
body.wk-neu #reviews .comment-form > *{ grid-column:1 / -1; margin:0; float:none; width:auto; }
@media (min-width:700px){
  body.wk-neu #reviews .comment-form-author{ grid-column:1; }
  body.wk-neu #reviews .comment-form-email{ grid-column:2; }
}
body.wk-neu #reviews .comment-form input[type="text"],
body.wk-neu #reviews .comment-form input[type="email"],
body.wk-neu #reviews .comment-form textarea{ width:100%; padding:10px 12px; }

/* La casilla de "guardar mis datos": el cuadradito al lado del texto, no
   encima. */
body.wk-neu #reviews .comment-form-cookies-consent{
  display:flex;
  align-items:flex-start;
  gap:var(--s2);
}
body.wk-neu #reviews .comment-form-cookies-consent input{
  width:auto !important; margin:2px 0 0 !important; flex:none;
}
body.wk-neu #reviews .comment-form-cookies-consent label{
  margin:0; font-weight:400; font-size:12.5px; color:var(--wk-tinta-3);
}
body.wk-neu #reviews .form-submit{ margin-bottom:0; }
body.wk-neu #reviews .form-submit input[type="submit"]{ width:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DE REVOCACIÓN — SEGUNDA PASADA: QUE PAREZCA DISEÑADO

   La primera pasada solo vistió los controles. Faltaba lo que hace que una
   página se entienda: por qué estoy aquí, qué pasa cuando pulso, y qué hago si
   mi caso no es este. Eso lo ponen los ganchos de `inc/devoluciones.php`; aquí
   se le da forma.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La columna de texto de las páginas es estrecha a propósito (se lee mejor),
   pero aquí dentro va una tabla con fotos y cantidades. */
body.wk-neu.page-id-10 .entry-content{ max-width:760px !important; }

body.wk-neu .order-withdrawal-request{
  max-width:none;
  padding:var(--s6) var(--s6) var(--s5);
}

/* ── La entrada: qué es esto y qué va a pasar ───────────────────────────── */
body.wk-neu .wk-wd__intro{
  margin:0 0 var(--s5);
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--wk-filete);
}
body.wk-neu .wk-wd__lead{
  margin:0 0 var(--s4) !important;
  font-size:16px; line-height:1.6; color:var(--wk-tinta) !important;
}
body.wk-neu ol.wk-wd__pasos{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--s3);
  margin:0 0 var(--s4); padding:0; list-style:none;
}
body.wk-neu ol.wk-wd__pasos li{
  display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start;
  margin:0; padding:0;
  font-size:15px; line-height:1.45; color:var(--wk-tinta-2);
  list-style:none;
}
body.wk-neu ol.wk-wd__pasos li::before{ content:none; }
body.wk-neu .wk-wd__n{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border:1px solid var(--wk-rojo); color:var(--wk-rojo);
  font-family:var(--wk-mono); font-size:13px; line-height:1;
}
@media (max-width:640px){
  body.wk-neu ol.wk-wd__pasos{ grid-template-columns:1fr; gap:10px; }
}

/* El desvío: quien llega con un artículo roto está en la puerta equivocada, y
   la buena le sale más barata (la devolución la pagamos nosotros). */
/* ⚠️ Aquí iba --wk-plancha y en modo OSCURO se veía ilegible: la plancha es
   la lámina de las FOTOS y se queda CLARA a propósito en oscuro, así que este
   aviso salía como una caja blanca con la letra clara encima. El fondo de
   interfaz es --wk-realce, que sí cambia con el tema. */
body.wk-neu .wk-wd__ojo{
  margin:0 !important;
  padding:var(--s4);
  background:var(--wk-realce);
  border-left:3px solid var(--wk-rojo);
  font-size:15px; line-height:1.55; color:var(--wk-tinta-2) !important;
}
body.wk-neu .wk-wd__ojo a{ color:var(--wk-rojo) !important; font-weight:600; }

/* Adónde va el paquete (16.09.2026): nuestra dirección, la misma que da la
   Widerrufsbelehrung. Rótulo en monoespaciada, como los de la ficha. */
body.wk-neu .wk-wd__adresse{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px var(--s3);
  margin:0 0 var(--s4) !important;
  padding:12px var(--s4);
  border:1px solid var(--wk-filete);
  font-size:15px; line-height:1.5; color:var(--wk-tinta) !important;
}
body.wk-neu .wk-wd__adresse:last-child{ margin-bottom:0 !important; }
body.wk-neu .wk-wd__adresse-r{
  font-family:var(--wk-mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--wk-tinta-3);
}
body.wk-neu .wk-wd__adresse-t{ white-space:nowrap; }

/* ── Rótulos de sección: el plugin no los trae ──────────────────────────── */
body.wk-neu .eu-owb-order-item-select-wrapper:not(:empty)::before,
body.wk-neu .order-withdrawal-request .form-row-email::before{
  display:block;
  margin:0 0 var(--s3);
  padding-top:var(--s5);
  border-top:1px solid var(--wk-filete);
  font-family:var(--wk-mono); font-size:12px; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wk-tinta-3);
}
body.wk-neu .eu-owb-order-item-select-wrapper:not(:empty)::before{ content:"Was möchten Sie widerrufen?"; }
body.wk-neu .order-withdrawal-request .form-row-email::before{ content:"Ihre Angaben"; }

/* ── Vorname y Nachname, uno al lado del otro ───────────────────────────── */
body.wk-neu .order-withdrawal-request .eu-owb-form-fields{
  display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s4);
}
body.wk-neu .order-withdrawal-request .form-row-full,
body.wk-neu .order-withdrawal-request .eu-owb-order-item-select-wrapper,
body.wk-neu .order-withdrawal-request .clear,
body.wk-neu .order-withdrawal-request .wk-wd__intro,
body.wk-neu .order-withdrawal-request .eu-owb-woocommerce-withdrawal-order-details{
  grid-column:1 / -1;
}
body.wk-neu .order-withdrawal-request .form-row-first,
body.wk-neu .order-withdrawal-request .form-row-last{ width:auto; float:none; margin-right:0; }
@media (max-width:560px){
  body.wk-neu .order-withdrawal-request .eu-owb-form-fields{ grid-template-columns:1fr; }
}

/* ── La casilla de elegir artículos: fila propia, no un renglón suelto ──── */
body.wk-neu .order-withdrawal-manually-select-items-checkbox{
  margin:0 0 var(--s3) !important;
  padding:12px var(--s3);
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
}
body.wk-neu .order-withdrawal-manually-select-items-checkbox label{
  margin:0 !important; font-size:14px; color:var(--wk-tinta) !important;
}

/* ── La tabla, con la foto del artículo ─────────────────────────────────── */
body.wk-neu .wk-wd__linea{ display:flex; align-items:center; gap:var(--s3); }
body.wk-neu .wk-wd__linea img.wk-linea__foto{
  width:52px; height:52px; min-width:52px;
  border:1px solid var(--wk-filete); background:var(--wk-celda);
  object-fit:contain;
}
body.wk-neu .wk-wd__linea-txt{ display:grid; gap:3px; min-width:0; }
body.wk-neu .wk-wd__nombre{ font-size:14px; line-height:1.35; color:var(--wk-tinta); }
body.wk-neu .wk-wd__linea .wk-linea__sku em{
  font-style:normal; color:var(--wk-rojo); margin-left:6px;
}
body.wk-neu table.order-withdrawal-request-items-table .product-quantity .wk-wd__uno{
  font-family:var(--wk-mono); font-size:14px; color:var(--wk-tinta-2);
}
/* Cuando solo hay una unidad, WooCommerce deja el número Y un campo oculto:
   sin esto se veía el «1» con una caja vacía al lado. */
body.wk-neu table.order-withdrawal-request-items-table .product-quantity .quantity input[type="hidden"] + *{ display:none; }
body.wk-neu table.order-withdrawal-request-items-table tbody tr:hover td{ background:var(--wk-plancha) !important; }

/* ── El cierre ──────────────────────────────────────────────────────────── */
body.wk-neu .wk-wd__nota{
  margin:var(--s5) 0 var(--s4) !important;
  padding-top:var(--s5);
  border-top:1px solid var(--wk-filete);
  font-size:13px; line-height:1.6; color:var(--wk-tinta-3) !important;
}
body.wk-neu .order-withdrawal-request .form-row-submit{ margin:0 !important; }

/* En el móvil la tabla mandaba: con el ancho automático, un nombre largo la
   estiraba más que la pantalla y arrastraba consigo TODO el formulario (el
   select y los campos se salían por la derecha). Con el ancho fijado, la
   columna del nombre cede y parte la palabra. */
@media (max-width:560px){
  body.wk-neu .order-withdrawal-request{ padding:var(--s4) var(--s4) var(--s4); }
  body.wk-neu table.order-withdrawal-request-items-table{ table-layout:fixed; width:100%; }
  body.wk-neu table.order-withdrawal-request-items-table th,
  body.wk-neu table.order-withdrawal-request-items-table td{ padding:12px 6px 12px 0; }
  body.wk-neu table.order-withdrawal-request-items-table .product-select{ width:30px; }
  body.wk-neu table.order-withdrawal-request-items-table .product-quantity{ width:58px; }
  body.wk-neu .wk-wd__linea{ gap:10px; }
  body.wk-neu .wk-wd__linea img.wk-linea__foto{ width:42px; height:42px; min-width:42px; }
  body.wk-neu .wk-wd__nombre,
  body.wk-neu .wk-wd__linea .wk-linea__sku{ overflow-wrap:anywhere; }
  body.wk-neu table.order-withdrawal-request-items-table input.qty{ width:100%; }
}
@media (max-width:560px){
  /* «Werkstattwageneinlagen» no cabe en la columna: que parta CON GUION, no a
     mitad de palabra sin avisar. */
  body.wk-neu .wk-wd__nombre{ hyphens:auto; overflow-wrap:break-word; }
  body.wk-neu table.order-withdrawal-request-items-table .product-quantity{ width:48px; }
  body.wk-neu table.order-withdrawal-request-items-table .product-select{ width:26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RED DE SEGURIDAD PARA `hidden`

   El atributo `hidden` del HTML se apoya en una regla del NAVEGADOR
   (`[hidden]{display:none}`) que pierde contra cualquier regla nuestra. Basta
   con haber escrito `display:grid` en la misma clase para que `elemento.hidden
   = true` deje de hacer nada — y no salta ningún error: sencillamente el
   bloque sigue ahí.

   Pasó de verdad en el formulario de reclamación: `.wk-recla__arts` es un
   grid, así que se veían los artículos de TODOS los pedidos a la vez y cambiar
   de pedido no cambiaba nada. Con esto no vuelve a pasar en ningún sitio.
   ═══════════════════════════════════════════════════════════════════════════ */
[hidden]{ display:none !important; }

/* La fila del artículo se veía en tres pisos —casilla, foto y nombre, uno
   debajo de otro— porque `body.wk-neu.woocommerce-account form label` pone
   `display:block` y pesa MÁS que `body.wk-neu label.wk-recla__art` (mismo
   número de clases, un elemento más). Se iguala el peso y ya manda esta. */
body.wk-neu.woocommerce-account form label.wk-recla__art{
  display:flex; align-items:center; gap:var(--s3);
  margin:0;
}

/* La columna de lectura de las páginas es estrecha y va pegada a la izquierda:
   en una página normal de texto no se nota, pero aquí deja el formulario en la
   mitad izquierda del ancho y parece descolocado. Se centra el bloque entero
   —título incluido, para que sigan alineados entre sí. */
body.wk-neu.page-id-10 .entry-header,
body.wk-neu.page-id-10 .entry-content{
  max-width:760px !important;
  margin-inline:auto !important;
}

/* La casilla «Ich möchte bestimmte Positionen auswählen» ya no existe: la
   tabla se ve siempre. En su lugar, una línea que dice qué hacer. */
body.wk-neu .wk-wd__pista{
  margin:0 0 var(--s3) !important;
  font-size:13.5px; line-height:1.5; color:var(--wk-tinta-3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHEQUEO VISUAL 2026-09-07 — remates pedidos por el usuario
   ═══════════════════════════════════════════════════════════════════════════ */

/* Campos de formulario con la letra de la casa. Storefront pone "Source Sans
   Pro" a body, button, input, select y textarea (0,0,1): los campos de la caja
   y el buscador del 404 salían con otra letra. Misma especificidad, esta hoja
   carga después → gana; y las clases (.wkl__feld en monoespaciada) siguen
   pesando más, así que no las pisa. */
input, select, textarea{ font-family:var(--wk-sans); }

/* Botones en MAYÚSCULAS, como el resto ("ZUM PRODUKT", "IN DEN WARENKORB"):
   "Zur Kategorie" de la portada y "In den Warenkorb" de la ficha iban en tipo
   frase. `:not(#wk)` suma (1,0,0) para ganar a los selectores con varios :not()
   del tema, sin recurrir a !important en cascada. */
body.wk-neu .wk-bloque__texto .button:not(#wk),
body.wk-neu form.cart .single_add_to_cart_button:not(#wk),
body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-button__link:not(#wk){
  text-transform:uppercase !important;
  letter-spacing:.055em !important;
  font-size:13px !important;
  font-weight:600 !important;
}

/* Carrito vacío: en vez de la rejilla de "Neu im Sortiment" (tarjetas de serie
   de WooCommerce, sin Art.-Nr. y con "Weiterlesen"), una frase y el botón rojo
   de la casa hacia el catálogo. */
body.wk-neu .wp-block-woocommerce-empty-cart-block .wk-carrito-vacio__texto{
  color:var(--wk-tinta-2); max-width:52ch; margin:var(--s4) 0 var(--s5);
}
body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-button__link:not(#wk){
  background:var(--wk-rojo) !important; color:#fff !important; border:0 !important;
  border-radius:0 !important; padding:14px 26px !important; text-decoration:none !important;
}
body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-buttons{ margin:0; }

/* "Ähnliche Produkte" empezaba 32px más a la derecha que el resto de la ficha:
   .wk-seccion añade su propio padding-inline (--wk-calle) dentro de un
   contenedor que ya lo tiene. */
body.wk-neu.single-product .wk-verwandt{ padding-inline:0; }

/* Portada: los bloques con carrusel tenían 96px de aire arriba y abajo más el
   aire propio de la escena 3D → ~300px vacíos sobre cada carrusel. */
body.wk-neu .wk-home > section.wk-bloque,
body.wk-neu .wk-home > section.wk-bestseller{ padding-block:var(--s8); }
/* La franja vacía de 64px entre la barra de ventajas y el pie era el
   margin-bottom que Storefront da a .site-main. En la portada no aporta nada. */
body.wk-neu.home #content.site-content{ padding-bottom:0 !important; }  /* medido: el hueco era este padding */
body.wk-neu.home .wk-ventajas{ margin-bottom:0; }

/* Cifras de la franja del hero en el teléfono: ancho fijo para la cifra, así
   las etiquetas empiezan todas en la misma vertical. */
@media (max-width:480px){
  body.wk-neu .wk-dato__zahl{ min-width:6ch; }
  body.wk-neu .wk-dato__texto{ text-align:left; }
}

/* Lieferumfang en el teléfono: las cajitas de datos NO pueden ir en nowrap,
   se salían por el borde derecho ("Antrieb Innenvierkant 6,3 mm (1/4″" cortado). */
body.wk-neu .wk-pieza__cuerpo{ min-width:0; }
@media (max-width:600px){
  body.wk-neu .wk-pieza .wk-desc__medidas span,
  body.wk-neu .wk-desc__medidas li{ white-space:normal; overflow-wrap:anywhere; }
}

/* Botón legal de revocación, ahora dentro de la columna "Hilfe" del pie:
   contorno fino en blanco, mismo tamaño de letra que los enlaces de al lado. */
.wk-footer__widerruf{ margin-top:14px; }
.wk-footer__widerruf .button:not(#wk){
  display:inline-block; background:transparent !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.55) !important; border-radius:0 !important;
  padding:8px 14px !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.055em !important; text-transform:uppercase !important;
  text-decoration:none !important; line-height:1.2 !important;
  transition:border-color .15s linear, color .15s linear;
}
.wk-footer__widerruf .button:not(#wk):hover{ border-color:var(--wk-rojo-marca,#CC0000) !important; color:#fff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   «BESTELLUNG ERHALTEN» — la página de después de pagar (2026-09-10)
   El original de Storefront metía los datos del pedido en un «ticket» con los
   bordes en zigzag y el texto en gris claro: sobre el fondo oscuro el importe y
   la forma de pago quedaban ilegibles, y la página no decía qué pasa después.
   Aquí el ticket se anula entero y se rehace como panel + rejilla de datos +
   los tres pasos siguientes. Todo con las variables del tema, así que el modo
   claro y el oscuro salen solos.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .wk-gracias{ display:grid; gap:var(--s6); max-width:920px; }

body.wk-neu .wk-gracias__panel{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  border-top:3px solid var(--wk-rojo);
  padding:var(--s6);
}
body.wk-neu .wk-gracias__r{
  margin:0 0 var(--s2);
  font-family:var(--wk-mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wk-rojo) !important;
}
body.wk-neu .wk-gracias__tit{
  margin:0 0 var(--s3);
  font-family:var(--wk-cond); font-size:31px; line-height:1.15;
  color:var(--wk-tinta) !important;
}
/* El párrafo de agradecimiento es una `woocommerce-notice`: hay que quitarle el
   relleno y el fondo que le pone Storefront o sale como un aviso de sistema. */
body.wk-neu .wk-gracias__texto{
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
  font-size:16px; line-height:1.6; color:var(--wk-tinta-2) !important; max-width:62ch;
}

/* Los datos del pedido. Se anulan los ::before/::after del zigzag. */
body.wk-neu .wk-gracias__datos{
  list-style:none; position:static;
  margin:var(--s6) 0 0 !important;
  padding:var(--s5) 0 0 !important;
  border-top:1px solid var(--wk-filete);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:var(--s5);
}
body.wk-neu .wk-gracias__datos::before,
body.wk-neu .wk-gracias__datos::after{ content:none !important; display:none !important; }
/* ⚠️ El zigzag no era lo único: el personalizador de Storefront imprime en el
   <head> un `.order_details{background-color:…}` calculado sobre el color de
   fondo CLARO del tema padre. En modo oscuro eso dejaba una caja gris clara con
   la letra clara encima, ilegible. Hay que anular el fondo, no solo el borde. */
body.wk-neu .wk-gracias__datos{ background:none !important; box-shadow:none !important; }
body.wk-neu .wk-gracias__datos li{
  margin:0 !important; padding:0 !important; border:0 !important;
  font-family:var(--wk-mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-gracias__datos li strong{
  display:block; margin-top:7px;
  font-family:var(--wk-sans); font-size:18px; font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--wk-tinta) !important; font-variant-numeric:tabular-nums;
}
body.wk-neu .wk-gracias__datos li.total strong{ font-size:23px; }
body.wk-neu .wk-gracias__datos li.total strong *{ color:var(--wk-tinta) !important; }
body.wk-neu .wk-gracias__datos li.email strong{ font-size:16px; overflow-wrap:anywhere; }

/* Qué pasa ahora: tres pasos, sin promesas de plazo que no controlamos. */
body.wk-neu .wk-gracias__sub{
  margin:0 0 var(--s5);
  font-family:var(--wk-mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wk-tinta-3) !important;
}
/* ── La ruta del pedido ────────────────────────────────────────────────
   Cuatro hitos sobre una línea que se llena de rojo según avanza el pedido
   DE VERDAD (la plantilla marca cuáles están hechos). El nodo en curso late
   despacio; con prefers-reduced-motion no se mueve nada. */
body.wk-neu .wk-ruta{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
}
body.wk-neu .wk-ruta__paso{ position:relative; margin:0; padding:0 var(--s5) 0 0; }

/* Cada tramo va de su propio nodo al siguiente; el último no pinta línea. */
body.wk-neu .wk-ruta__paso::before{
  content:"";
  position:absolute; top:10px; left:11px; right:-11px; height:2px;
  background:var(--wk-filete-2);
}
body.wk-neu .wk-ruta__paso:last-child::before{ display:none; }
body.wk-neu .wk-ruta__paso--hecho::before{
  background:var(--wk-rojo);
  transform-origin:left center;
  animation:wk-ruta-crece .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--wk-ruta-i,0) * .12s + .1s);
}
@keyframes wk-ruta-crece{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* El tramo EN MARCHA (del último hito cumplido al que está en curso) no se
   queda rojo fijo: su base baja a un rojo tenue y encima corre un relleno que
   avanza, llega y se apaga, una y otra vez. Es la única parte de la ruta que
   se mueve en bucle, así que la vista va justo a donde está el pedido. */
body.wk-neu .wk-ruta__paso--enmarcha::before{
  background:var(--wk-rojo);
  opacity:.26;
  animation:none;
  transform:none;
}
body.wk-neu .wk-ruta__paso--enmarcha::after{
  content:"";
  position:absolute; top:10px; left:11px; right:-11px; height:2px;
  background:var(--wk-rojo);
  transform-origin:left center;
  animation:wk-ruta-fluye 2.9s cubic-bezier(.33,0,.2,1) infinite;
  animation-delay:calc(var(--wk-ruta-i,0) * .12s + .35s);
}
@keyframes wk-ruta-fluye{
  0%   { transform:scaleX(0); opacity:1; }
  55%  { transform:scaleX(1); opacity:1; }
  80%  { transform:scaleX(1); opacity:0; }
  100% { transform:scaleX(0); opacity:0; }
}

body.wk-neu .wk-ruta__nodo{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--wk-filete-2);
  background:var(--wk-celda);
  margin-bottom:var(--s4);
}
body.wk-neu .wk-ruta__nodo svg{
  width:12px; height:12px; fill:none; stroke:#fff;
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
body.wk-neu .wk-ruta__paso--hecho .wk-ruta__nodo{
  background:var(--wk-rojo); border-color:var(--wk-rojo);
  animation:wk-ruta-entra .35s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--wk-ruta-i,0) * .12s);
}
@keyframes wk-ruta-entra{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

body.wk-neu .wk-ruta__paso--activo .wk-ruta__nodo{
  border-color:var(--wk-rojo);
  animation:wk-ruta-late 2.4s ease-out .6s infinite;
}
body.wk-neu .wk-ruta__paso--activo .wk-ruta__nodo::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--wk-rojo);
}
@keyframes wk-ruta-late{
  0%  { box-shadow:0 0 0 0 rgba(179,18,23,.42); }
  70% { box-shadow:0 0 0 10px rgba(179,18,23,0); }
  100%{ box-shadow:0 0 0 0 rgba(179,18,23,0); }
}

body.wk-neu .wk-ruta__tit{
  display:block; margin-bottom:4px;
  font-size:16.5px; font-weight:600; color:var(--wk-tinta) !important;
}
body.wk-neu .wk-ruta__paso--activo .wk-ruta__tit{ color:var(--wk-rojo) !important; }
body.wk-neu .wk-ruta__meta{
  display:block; margin-bottom:6px;
  font-family:var(--wk-mono); font-size:12.5px; letter-spacing:.08em;
  color:var(--wk-tinta-3) !important; font-variant-numeric:tabular-nums;
}
body.wk-neu .wk-ruta__txt{
  margin:0; font-size:15px; line-height:1.55;
  color:var(--wk-tinta-2) !important; overflow-wrap:anywhere;
}
/* Lo que todavía no ha pasado se apaga: así se ve de un vistazo por dónde va. */
body.wk-neu .wk-ruta__paso:not(.wk-ruta__paso--hecho):not(.wk-ruta__paso--activo) .wk-ruta__tit{
  color:var(--wk-tinta-3) !important; font-weight:500;
}
body.wk-neu .wk-ruta__paso:not(.wk-ruta__paso--hecho):not(.wk-ruta__paso--activo) .wk-ruta__txt{
  color:var(--wk-tinta-3) !important;
}
/* ── Versión mini: la ruta dentro de la ficha de un pedido ─────────────
   En la lista de la cuenta no hay sitio (ni falta) para las explicaciones:
   quedan los cuatro puntos, la línea y una palabra por hito. El punto en
   curso late igual, así que se ve por dónde va cada pedido sin abrirlo. */
body.wk-neu .wk-ruta--mini{
  /* Columnas automáticas: el pedido tiene cuatro hitos, un Widerruf o una
     reclamación tres. Con `repeat(4)` la ruta de tres dejaba un hueco. */
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  margin:var(--s2) 0 0;
  padding-top:var(--s4);
  border-top:1px solid var(--wk-filete);
}
body.wk-neu .wk-ruta--mini .wk-ruta__paso{ padding:0 var(--s3) 0 0; }
body.wk-neu .wk-ruta--mini .wk-ruta__nodo{
  width:16px; height:16px; margin-bottom:9px; border-width:2px;
}
body.wk-neu .wk-ruta--mini .wk-ruta__nodo svg{ width:9px; height:9px; stroke-width:3.6; }
body.wk-neu .wk-ruta--mini .wk-ruta__paso--activo .wk-ruta__nodo::after{ width:6px; height:6px; }
body.wk-neu .wk-ruta--mini .wk-ruta__paso::before,
body.wk-neu .wk-ruta--mini .wk-ruta__paso--enmarcha::after{ top:7px; left:8px; right:-8px; }
body.wk-neu .wk-ruta--mini .wk-ruta__tit{
  margin:0; font-size:13px; font-weight:500;
}
body.wk-neu .wk-ruta--mini .wk-ruta__paso--hecho .wk-ruta__tit{ font-weight:600; }

body.wk-neu .wk-ruta__aviso{
  margin:var(--s5) 0 0; padding-top:var(--s4);
  border-top:1px solid var(--wk-filete);
  font-size:15px; color:var(--wk-tinta-2) !important;
}

/* En pantalla estrecha la ruta se pone de pie: la línea baja por la izquierda
   y el texto se sangra al lado del nodo. */
@media (max-width:760px){
  body.wk-neu .wk-ruta{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
  body.wk-neu .wk-ruta__paso{ padding:0 0 0 38px; min-height:22px; }
  body.wk-neu .wk-ruta__paso::before{
    top:26px; bottom:calc(-1 * var(--s5) - 4px);
    left:10px; right:auto; width:2px; height:auto;
    transform-origin:top center;
  }
  body.wk-neu .wk-ruta__paso--hecho::before{ animation-name:wk-ruta-crece-v; }
  body.wk-neu .wk-ruta__paso--enmarcha::before{ animation:none; }
  body.wk-neu .wk-ruta__paso--enmarcha::after{
    top:26px; bottom:calc(-1 * var(--s5) - 4px);
    left:10px; right:auto; width:2px; height:auto;
    transform-origin:top center;
    animation-name:wk-ruta-fluye-v;
  }
  body.wk-neu .wk-ruta__nodo{ position:absolute; top:0; left:0; margin:0; }

  /* La mini NO se pone de pie: son cuatro puntos y una palabra, caben en fila
     hasta en un móvil, y de pie ocuparía media ficha. */
  body.wk-neu .wk-ruta--mini{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0; }
  body.wk-neu .wk-ruta--mini .wk-ruta__paso{ padding:0 8px 0 0; }
  body.wk-neu .wk-ruta--mini .wk-ruta__nodo{ position:relative; margin-bottom:9px; }
  body.wk-neu .wk-ruta--mini .wk-ruta__paso::before,
  body.wk-neu .wk-ruta--mini .wk-ruta__paso--enmarcha::after{
    top:7px; left:8px; right:-8px; bottom:auto;
    width:auto; height:2px; transform-origin:left center;
  }
  body.wk-neu .wk-ruta--mini .wk-ruta__paso--hecho::before{ animation-name:wk-ruta-crece; }
  body.wk-neu .wk-ruta--mini .wk-ruta__paso--enmarcha::after{ animation-name:wk-ruta-fluye; }
  body.wk-neu .wk-ruta--mini .wk-ruta__tit{ font-size:11.5px; }
}
@keyframes wk-ruta-crece-v{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes wk-ruta-fluye-v{
  0%   { transform:scaleY(0); opacity:1; }
  55%  { transform:scaleY(1); opacity:1; }
  80%  { transform:scaleY(1); opacity:0; }
  100% { transform:scaleY(0); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  body.wk-neu .wk-ruta__paso--hecho::before,
  body.wk-neu .wk-ruta__paso--hecho .wk-ruta__nodo,
  body.wk-neu .wk-ruta__paso--activo .wk-ruta__nodo,
  body.wk-neu .wk-ruta__paso--enmarcha::after{ animation:none !important; }
  /* Sin animación el tramo en marcha se queda entero, no a medio pintar. */
  body.wk-neu .wk-ruta__paso--enmarcha::after{ transform:none; opacity:1; }
}

/* Acciones y ayuda */
body.wk-neu .wk-gracias__pie{
  display:grid; gap:var(--s4);
  padding-top:var(--s5); border-top:1px solid var(--wk-filete);
}
body.wk-neu .wk-gracias__acciones{
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; margin:0 !important;
}
body.wk-neu .wk-gracias__ayuda{
  margin:0; font-size:15px; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wk-gracias__ayuda a{
  color:var(--wk-tinta-2) !important; text-decoration:underline; text-underline-offset:3px;
}
body.wk-neu .wk-gracias__ayuda a:hover{ color:var(--wk-rojo) !important; }

@media (max-width:600px){
  body.wk-neu .wk-gracias{ gap:var(--s5); }
  body.wk-neu .wk-gracias__panel{ padding:var(--s5); }
  body.wk-neu .wk-gracias__tit{ font-size:25px; }
  body.wk-neu .wk-gracias__datos{ gap:var(--s4); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   «WERKZEUG UNTER 20 €» — el gancho comercial de la portada (22.09.2026)
   La portada era un índice: categorías, más categorías y marca, sin un solo
   motivo para comprar. Esta sección es el único argumento REAL que hay hoy
   (la mitad larga del catálogo por debajo de 20 € + envío gratis desde 49 €);
   no hay ofertas que enseñar —cero artículos rebajados— ni «más vendidos»
   —4 pedidos, de prueba—, y ambas cosas inventadas serían denunciables.
   El texto se queda en ancho de lectura para que NO parezca un banner.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-neu .wk-guenstig__texto{
  max-width:62ch;
  margin:0 0 var(--s4);
  font-size:16px;
  line-height:1.6;
  color:var(--wk-tinta-2);
}
body.wk-neu .wk-guenstig__texto strong{
  color:var(--wk-tinta);
  font-weight:600;
}
body.wk-neu .wk-guenstig__acciones{
  display:flex;
  gap:var(--s3);
  flex-wrap:wrap;
  margin:0 0 var(--s5);
}
/* En el teléfono los dos botones llenan la fila, igual que los del hero. */
@media (max-width:900px){
  body.wk-neu .wk-guenstig__acciones .wk-btn{ flex:1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL AGUJERO DE LA PORTADA EN EL MÓVIL (22.09.2026)
   Entre el buscador y el primer texto había 110 px de negro. Medido: 63,5 px
   de `margin-bottom` de la cabecera (herencia de Storefront) + 32 px de
   relleno de `.site-content` + 32 px del propio hero, menos los 37,5 px que
   el hero ya se tiraba hacia arriba con un margen negativo. En una pantalla
   de 812 px eso es el 12 % sin usar, y era lo que empujaba el producto fuera
   de la vista.
   ⚠️ Al poner a cero la cabecera y el contenedor HAY QUE anular también el
   margen negativo del hero, o se sube por encima del buscador y lo tapa.
   ⚠️ Solo en la portada (`body.home`) y solo en el teléfono: en las páginas
   de catálogo ese aire sí separa la cabecera del listado.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* ⚠️ `!important` a propósito. Storefront fija ese margen con
     `.home.page:not(.page-template-template-homepage) .site-header`, que son
     CUATRO clases; cualquier selector razonable de aquí se queda en tres y
     pierde por peso. Sin esto la regla existe en la hoja y no hace nada. */
  body.wk-neu.home .site-header{ margin-bottom:0 !important; }
  body.wk-neu.home .site-content{ padding-top:0; }
  body.wk-neu.home .wk-hero{ margin-top:0; padding-top:var(--s6); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JERARQUÍA DE LA FICHA (22.09.2026) — la lección de Zalando
   El dueño pasó una captura de la app de Zalando: «inspírate en esto».
   Lo que hace que aquellas fichas inviten a comprar NO son los adornos, es la
   jerarquía: la foto manda, el nombre susurra y el precio grita.
   Aquí pasaba lo contrario — precio 16 px / peso 400 y nombre 15 px / peso 300,
   los dos en el mismo tono: el ojo no encontraba el precio. Y el botón de
   comprar era el texto MÁS PEQUEÑO de la ficha (12,5 px).

   ⚠️ Lo que NO se copia de Zalando, y es deliberado:
   - El precio en ROJO. En el comercio alemán un precio rojo significa rebaja.
     Aquí no hay ni un artículo rebajado, así que teñirlo de rojo insinuaría un
     descuento inexistente.
   - «Deal», «-7 %», «Ursprünglich», «Letzter niedrigster Preis». Ese bloque de
     Zalando es justo lo que exige la §11 PAngV cuando SÍ hay rebaja: el tachado
     tiene que ser el precio más bajo de los últimos 30 días. Sin historial de
     precios, imitarlo sería publicidad falsa.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `!important` obligado: las reglas de tamaño que ya había para
   `.wk-ficha__preis` (17 px, y 16 px por debajo de 639 px) YA van con
   `!important`, y contra eso no gana ninguna especificidad. Sin esto la regla
   se carga, casa con el elemento y no hace nada — comprobado. */
body.wk-neu .wk-ficha__preis{
  font-size:21px !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--wk-tinta);
}
/* El nombre baja un tono para que el precio gane sin tener que gritar más. */
body.wk-neu .wk-ficha__titel a{
  color:var(--wk-tinta-2) !important;
}
/* 🪤 Se intentó agrandar el botón «In den Warenkorb» (12,5 px, el texto más
   pequeño de la ficha) y NO se pudo: lo fija
   `body.wk-neu ul.products li.product .button` con `!important` y más peso, y
   ni subíendole la especificidad entró. Se deja como está a propósito — el
   botón mide 44×136 px, que como zona de pulsación está bien. Si algún día
   se quiere tocar, hay que editar AQUELLA regla, no añadir una nueva. */