/* ═══════════════════════════════════════════════════════════════════════════
   PULIDO — REVISIÓN ESTÉTICA DEL 03.10.2026
   Carga la ÚLTIMA (inc/pulido.php, prioridad 200): así cada arreglo gana sin
   subir la especificidad de nadie. Cada bloque dice qué se vio y dónde.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Galería: el emoji 🔍 que WooCommerce mete en el botón de la lupa ───────
   El icono lo dibuja el tema; el emoji de serie asomaba debajo como un
   puntito gris pegado al botón rojo (todas las fichas, los dos modos). */
body.wk-neu .woocommerce-product-gallery__trigger > span[aria-hidden="true"]{
  display:none !important;
}

/* ── 2. Pestañas de la ficha en el móvil ─────────────────────────────────────
   «Produktsicherheit» caía sola a una segunda línea. Ahora van en una fila
   que se desliza de lado si no caben (con el nombre corto de inc/pulido.php
   ya caben las tres en casi todos los teléfonos). */
/* Y la fila iba sangrada 24 px respecto al título y al precio (relleno de lista
   de serie). */
body.wk-neu.single-product .woocommerce-tabs ul.tabs{ padding-left:0 !important; }
@media (max-width:600px){
  body.wk-neu.single-product .woocommerce-tabs ul.tabs{
    flex-wrap:nowrap !important;
    gap:12px !important;   /* medido a 390 px: 89 + 115 + 116 + 2×12 = 344 de 350 */
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.wk-neu.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; }
  body.wk-neu.single-product .woocommerce-tabs ul.tabs li{ flex:0 0 auto; }
}

/* ── 3. Hueco antes del pie ──────────────────────────────────────────────────
   Se sumaban tres márgenes de Storefront (main 39 + content-area 39 + el
   relleno de 64 del contenido; en el carrito además el del artículo, 63):
   140–170 px vacíos antes del pie en fichas, carrito, caja y listados. Queda
   solo el relleno del contenido. */
body.wk-neu .site-main,
body.wk-neu .content-area{ margin-bottom:0 !important; }
body.wk-neu .site-main > article:last-child,
body.wk-neu .site-main > .hentry:last-child{ margin-bottom:0 !important; }

/* ── 4. Carrito vacío: todo centrado, sin los tres puntos sueltos ────────── */
body.wk-neu .wp-block-woocommerce-empty-cart-block{ text-align:center; }
body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots{ display:none !important; }
body.wk-neu .wp-block-woocommerce-empty-cart-block .wk-carrito-vacio__texto{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:46ch;
}
body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-buttons{ justify-content:center !important; }

/* ── 5. Carrito y caja alineados con su título ───────────────────────────────
   El título empezaba en el borde del contenido y la tabla/el formulario 130 px
   más a la derecha (bloque «alignwide» centrado a 1100 px). */
@media (min-width:768px){
  body.wk-neu .wp-block-woocommerce-cart.alignwide,
  body.wk-neu .wp-block-woocommerce-checkout.alignwide{
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* ── 6. Caja en modo oscuro ───────────────────────────────────────────────── */
/* El «1» del circulito de cantidad iba en blanco sobre el círculo crema: no se
   veía. El número toma el color de su círculo (oscuro en oscuro, claro en claro). */
body.wk-neu .wc-block-components-order-summary-item__quantity span{ color:inherit !important; }
/* Casillas y botones redondos salían blanco brillante sobre la caja oscura. */
html[data-tema="oscuro"] body.wk-neu .wc-block-components-checkbox__input,
html[data-tema="oscuro"] body.wk-neu .wc-block-components-radio-control__input{
  background-color:var(--wk-celda) !important;
  border-color:var(--wk-tinta-3) !important;
}
html[data-tema="oscuro"] body.wk-neu .wc-block-components-checkbox__mark{ fill:var(--wk-tinta) !important; }
html[data-tema="oscuro"] body.wk-neu .wc-block-components-radio-control__input:checked::before{
  background:var(--wk-tinta) !important;
}
/* La flecha del desplegable del país (gris oscuro sobre gris oscuro). */
html[data-tema="oscuro"] body.wk-neu .wc-blocks-components-select__expand{ fill:var(--wk-tinta) !important; }

/* ── 7. Un solo rojo de relleno en modo oscuro ───────────────────────────────
   «Suchen» (búsqueda vacía y 404), «Alle Produkte ansehen» (carrito vacío) y
   la lupa de la galería usaban el rojo de TEXTO (#F5564A) de relleno, con
   letra blanca a 3,4:1. De relleno va --wk-rojo-fondo, como el resto. */
html[data-tema="oscuro"] body.wk-neu .woocommerce-product-search button,
html[data-tema="oscuro"] body.wk-neu .woocommerce-product-search input[type="submit"],
html[data-tema="oscuro"] body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-element-button,
html[data-tema="oscuro"] body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
html[data-tema="oscuro"] body.wk-neu .woocommerce-product-gallery__trigger,
/* El del carrito vacío lleva `:not(#wk)` en listado-nuevo.css: hay que igualarlo. */
html[data-tema="oscuro"] body.wk-neu .wp-block-woocommerce-empty-cart-block .wp-block-button__link:not(#wk){
  background-color:var(--wk-rojo-fondo) !important;
  border-color:var(--wk-rojo-fondo) !important;
  color:#fff !important;
}

/* ── 8. Paginación ───────────────────────────────────────────────────────────
   En el móvil llevaba sus propios filetes arriba y abajo, y debajo el del
   contenedor: dos rayas seguidas. Se queda la del contenedor. */
body.wk-neu .woocommerce-pagination{ border-top:0 !important; border-bottom:0 !important; }

/* ── 9. Tarjetas del listado ─────────────────────────────────────────────────
   (a) En el teléfono «Auf Lager · Lieferung 2–3 Werktage» ocupa dos líneas y
   «Derzeit nicht verfügbar» una: el pie más corto bajaba su precio 15 px
   respecto al de al lado. Con dos líneas reservadas siempre, se alinean.
   (b) El guionado partía nombres cortos y marcas: «Merce-des», «Toyo-ta»,
   «ex-tra», «Au-ßenvierkant». Solo se parten palabras de 10 letras o más, y
   nunca dejando menos de 4 a cada lado. */
@media (max-width:600px){
  body.wk-neu .wk-ficha__lager{ min-height:2.6em; }
}
body.wk-neu .wk-ficha__titel a{
  /* (tercera revisión) 6 letras como mínimo DESPUÉS del guion: el espacio fijo
     antes de « | » cuenta como parte de la palabra, y con 4 salía
     «Abisolierzan-/ge | 150 mm», «Gelenkfe-/der | …». */
  hyphenate-limit-chars:10 4 6;
  -webkit-hyphenate-limit-before:4;
  -webkit-hyphenate-limit-after:4;
}

/* ── 10. Barra de filtros: el grupo «Preis» iba 12 px más alto ───────────────
   Es un <form> y traía el margen inferior de serie de los formularios. */
body.wk-neu .wkl__leiste .wkl__preis{ margin-bottom:0 !important; }

/* ── 11. Bloque de BGS de la portada ─────────────────────────────────────────
   La lista de datos iba sangrada 24 px respecto al resto del texto, y el aviso
   de marcas pegado al botón, sin aire. */
body.wk-neu .wk-home .wk-marca__datos{ padding-left:0 !important; }
body.wk-neu .wk-home .wk-marca__nota{ margin-top:var(--s5) !important; }

/* ── 12. Unidades tal como se escriben ───────────────────────────────────────
   La línea técnica de las tarjetas iba en versalitas como el resto de
   metadatos, y en unidades eso cambia el significado: «1,2 M» (m), «0,6 BAR»,
   «240 MM». Esta línea va en caja normal: «1,2 m · 0,6 bar · 240 mm». */
body.wk-neu .wk-ficha__specs{ text-transform:none !important; letter-spacing:.02em !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   SEGUNDA REVISIÓN — 03.10.2026, TARDE
   Lo que la primera pasada dejó a medias y lo que salió nuevo al mirar
   también los estados abiertos (menú, filtros, galería) y el final de cada
   página. Lista completa en la memoria «revision-estetica-20261003».
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 13. Carrito y caja alineados DE VERDAD con su título ────────────────────
   El arreglo 5 quitó el ancho del bloque, pero el bloque trae además 20–21 px
   de relleno a cada lado: tabla y formulario seguían metidos respecto al
   título «Warenkorb»/«Kasse» (escritorio y móvil). */
body.wk-neu .wp-block-woocommerce-cart,
body.wk-neu .wp-block-woocommerce-checkout{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ── 14. Hueco antes del pie en el resto de plantillas ───────────────────────
   Como en el arreglo 3: queda solo el relleno del contenido (64 px). Medido:
   fichas 180 (la última sección, «Ähnliche Produkte», traía 96 abajo), textos
   legales 160, búsqueda vacía 160, carrito 109, 404 unos 190. */
body.wk-neu.single-product div.product > section.wk-seccion:last-child,
body.wk-neu.wk-recht-pagina .site-main > article,
body.wk-neu .wk-vacio{ padding-bottom:0 !important; }
body.wk-neu .wc-block-components-sidebar-layout{ margin-bottom:0 !important; }
/* La 404 sobraba también ARRIBA (184 px entre la miga y «Fehler 404», el
   doble que en el resto) y en el móvil iba sangrada 40 px en vez de 20. */
body.wk-neu .wk-404{ padding:0 !important; }

/* ── 15. Aviso «wieder verfügbar» de los productos agotados ──────────────────
   Campo de 44 px junto a un botón de 50, pegados (3 px), y en el móvil el
   botón debajo sin aire y más ancho que el campo. Ahora: misma altura, aire
   entre los dos, y en el teléfono uno encima del otro a todo lo ancho. */
body.wk-neu .wc_bis_form__form-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
}
body.wk-neu .wc_bis_form__input{
  flex:1 1 220px;
  min-width:0;
  height:48px !important;
  margin:0 !important;
  box-sizing:border-box;
}
body.wk-neu .wc_bis_form__button{
  flex:0 0 auto;
  height:48px !important;
  margin:0 !important;
  padding:0 20px !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
}
@media (max-width:600px){
  body.wk-neu .wc_bis_form__input,
  body.wk-neu .wc_bis_form__button{ flex:1 1 100%; }
}
/* En oscuro el botón salía en el rojo de TEXTO (#F4564A, letra blanca a
   3,3:1): de relleno va el mismo rojo que el resto (arreglo 7). */
html[data-tema="oscuro"] body.wk-neu .wc_bis_form__button,
html[data-tema="oscuro"] body.wk-neu .wc_bis_form__button:not(#wk){
  background-color:var(--wk-rojo-fondo) !important;
  border-color:var(--wk-rojo-fondo) !important;
  color:#fff !important;
}

/* ── 16. Textos legales ──────────────────────────────────────────────────────
   (a) Sin índice lateral (AGB, Impressum) la hoja iba pegada a la izquierda
       con un tercio de pantalla vacío. Centrada, como un documento. El índice
       propio de IT-Recht sigue dentro del texto, sin tocar. */
body.wk-neu.wk-recht-pagina .wk-recht__rumpf:not(.wk-recht__rumpf--index) .wk-recht__blatt{
  margin-left:auto;
  margin-right:auto;
}
/* (b) El párrafo que sigue a una lista dentro de un apartado numerado
       («Die Verarbeitung erfolgt gemäß Art. 6 …» tras la lista del 2.1) es
       parte de ese apartado: va con la misma sangría que su texto, no a la
       altura de los números. Igual las listas y los títulos de servicio que
       vienen detrás. */
body.wk-neu.wk-recht-pagina .wk-recht__klausel ~ :is(p, ul, ol, .wk-recht__dienst):not(.wk-recht__klausel):not(.wk-recht__unter){
  margin-left:calc(var(--wk-recht-cuelga) + .28em);
}
/* (c) El sello de IT-Recht: los de Datenschutz y Widerruf son más anchos y,
       encogidos a 190 px, su letra quedaba en unos 5 px. A su tamaño. */
body.wk-neu.wk-recht-pagina .wk-recht__quelle img{
  max-width:min(100%, 360px) !important;
}
/* (d) En el móvil, sin índice, entre la raya de las pestañas y la hoja
       quedaba una franja vacía de 24 px que parecía una raya doble. */
@media (max-width:1023px){
  body.wk-neu.wk-recht-pagina .wk-recht__reiter + .wk-recht__rumpf:not(.wk-recht__rumpf--index){
    margin-top:calc(-1 * var(--s5, 24px));
  }
}
/* (e) El correo de la nota final, igual que los demás enlaces del texto. */
body.wk-neu.wk-recht-pagina .wk-recht__fragen a{
  color:inherit !important;
  text-decoration:underline !important;
  text-underline-offset:2px;
}

/* ── 17. Desplegables de la barra de filtros en el móvil ─────────────────────
   El panel conservaba `width:max-content`: con 52 medidas («Länge» en Zangen)
   medía 5.767 px y la página lo cortaba en el borde, sin forma de llegar al
   resto. Abierto, ocupa su fila entera y las opciones se reparten en líneas,
   con desplazamiento propio si son muchas. */
@media (max-width:900px){
  body.wk-neu .wkl__gruppe{ flex-wrap:wrap; }
  body.wk-neu .wkl__gruppe:has(> .wkl__mehr[open]){ flex:1 1 100%; min-width:0; }
  body.wk-neu .wkl__mehr[open]{ flex:1 1 100%; min-width:0; }
  body.wk-neu .wkl__panel{ width:auto !important; max-width:100% !important; }
}

/* ── 18. Casillas de subcategoría: el número no se sale ──────────────────────
   «Schlauchklemmenzangen 35»: el nombre no podía partirse y empujaba el «35»
   fuera de su casilla (en el móvil, fuera de la rejilla). */
body.wk-neu .wkl__z .wkl__n{
  min-width:0;
  /* Corta por la unión de la palabra compuesta (guion blando que pone
     wk_cl_nombre_corte()), no por donde decida el navegador. */
  hyphens:manual;
  -webkit-hyphens:manual;
  overflow-wrap:anywhere;
}
body.wk-neu .wkl__z .wkl__c{ flex:none; }

/* ── 19. Centrado vertical ───────────────────────────────────────────────────
   (a) Paginación: la regla con inline-flex perdía contra el inline-block de
       serie y las cifras quedaban arriba (7 px encima, 20 debajo). Además la
       lista traía 24 px de sangría (el bloque iba 12 px a la derecha del
       centro) y 24 px de margen abajo (12 arriba / 45 abajo en su franja). */
body.wk-neu .woocommerce nav.woocommerce-pagination ul,
body.wk-neu nav.woocommerce-pagination ul.page-numbers{
  padding:0 !important;
  margin:0 !important;
}
/* (la paginación del catálogo no cuelga de `.woocommerce`: de ahí el segundo par) */
body.wk-neu .woocommerce nav.woocommerce-pagination ul li a,
body.wk-neu .woocommerce nav.woocommerce-pagination ul li span,
body.wk-neu nav.woocommerce-pagination ul.page-numbers li a,
body.wk-neu nav.woocommerce-pagination ul.page-numbers li span{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
/* (b) Lupa de la galería: el icono ocupaba solo los 30 px de arriba de un
       botón de 44. */
body.wk-neu .woocommerce-product-gallery__trigger::before{
  height:44px !important;
  line-height:44px !important;
}
/* (c) «Vertrag widerrufen» del pie: en el móvil el botón crece a 44 px de alto
       (objetivo táctil) y el texto se quedaba arriba. */
body.wk-neu .wk-footer__widerruf .button:not(#wk){
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

/* ── 20. Última fila del catálogo ────────────────────────────────────────────
   Las celdas de relleno cierran la tabla, pero con fondo BLANCO parecían una
   tarjeta que no había cargado (en el móvil, un rectángulo blanco junto a la
   última tarjeta). Se quedan los filetes y el fondo es el de la página: se lee
   como una casilla vacía. */
body.wk-neu ul.products > li.wk-fuellzelle{
  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,
    transparent !important;
}

/* ── 21. Portada en el móvil ─────────────────────────────────────────────────
   (a) Las bandas a todo lo ancho (BGS, servicio, secciones) usan 100vw, pero
       por debajo de 900 px `.wk-home` las recortaba al ancho del contenido: la
       banda beige de BGS quedaba encajonada y con el texto pegado a su borde.
       El recorte de seguridad sigue en `body` y `.site`. */
@media (max-width:900px){
  body.wk-neu .wk-home{ overflow-x:visible !important; }
}
/* (b) Franja de datos del banner: en una columna faltaba la raya entre el
       primero y el segundo («49 €» / «2–3»). */
@media (max-width:480px){
  body.wk-neu .wk-hero__datos li:nth-child(n+2){ border-top:1px solid var(--wk-filete); }
}

/* ── 22. Menú del móvil ──────────────────────────────────────────────────────
   Abierto, la hamburguesa seguía siendo «≡» y las categorías no decían que se
   despliegan. Ahora: «×» para cerrar, flecha en cada categoría con
   subcategorías (gira al abrirla) y solo una abierta a la vez (cabecera.js). */
@media (max-width:991px){
  .wkh__hamburguesa-icono,
  .wkh__hamburguesa-icono::before,
  .wkh__hamburguesa-icono::after{
    transition:transform .2s ease, top .2s ease, background-color .2s ease;
  }
  .wkh__hamburguesa[aria-expanded="true"] .wkh__hamburguesa-icono{ background:transparent; }
  .wkh__hamburguesa[aria-expanded="true"] .wkh__hamburguesa-icono::before{ top:0; transform:rotate(45deg); }
  .wkh__hamburguesa[aria-expanded="true"] .wkh__hamburguesa-icono::after{ top:0; transform:rotate(-45deg); }

  .wkh__cajon .wkh__item--panel > .wkh__enlace{ position:relative; padding-right:52px; }
  .wkh__cajon .wkh__item--panel > .wkh__enlace::after{
    display:block !important;
    content:"";
    position:absolute;
    left:auto; right:28px; top:50%; bottom:auto;
    width:8px; height:8px;
    background:none;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-70%) rotate(45deg);
    transform-origin:center;
    opacity:.75;
    transition:transform .2s ease;
  }
  .wkh__cajon .wkh__item--panel.wkh-abierto > .wkh__enlace::after{
    transform:translateY(-25%) rotate(-135deg);
  }
  .wkh__cajon{ max-height:78vh; overscroll-behavior:contain; }
}
@media (prefers-reduced-motion:reduce){
  .wkh__hamburguesa-icono,
  .wkh__hamburguesa-icono::before,
  .wkh__hamburguesa-icono::after,
  .wkh__cajon .wkh__item--panel > .wkh__enlace::after{ transition:none; }
}

/* ── 23. Miniaturas de la galería ────────────────────────────────────────────
   El «clearfix» de serie (::before) contaba como un elemento más de la fila
   flexible: la primera fila empezaba 8 px más a la derecha que la segunda, y
   la lista llevaba además 24 px de sangría. Rejilla de cinco, a ras de la foto. */
body.wk-neu .woocommerce-product-gallery .flex-control-thumbs{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  padding:0 !important;
}
body.wk-neu .woocommerce-product-gallery .flex-control-thumbs::before,
body.wk-neu .woocommerce-product-gallery .flex-control-thumbs::after{
  content:none !important;
  display:none !important;
}
/* (mismo selector largo que la regla de los 86 px fijos de listado-nuevo.css,
    para poder ganarle: ver allí por qué se escribió así) */
body.wk-neu.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li,
body.wk-neu .woocommerce-product-gallery .flex-control-thumbs li{
  width:auto !important;
  min-width:0;
  margin:0 !important;
  float:none !important;
}
/* La foto pequeña traía un ancho fijo de 86 px: en el teléfono, con columnas
   de 63, la quinta se salía por la derecha. Ocupa su columna. */
body.wk-neu .woocommerce-product-gallery .flex-control-thumbs li img{
  width:100% !important;
  height:auto !important;
}

/* ── 24. Unidades dentro de textos en mayúsculas («BIS 30 kg») ────────────── */
body.wk-neu .wk-einheit{ text-transform:none !important; }

/* ── 25. Caja y carrito: descuadres pequeños ─────────────────────────────────
   (a) «Gutscheine hinzufügen» empezaba 16 px más a la izquierda que el resto
       de filas de la tarjeta y su flecha se salía de la columna de importes.
       En el móvil, además, las filas de totales iban sin el margen interior
       que sí tienen el artículo y el título: ahora todas a la misma línea. */
body.wk-neu .wc-block-components-totals-item{
  padding-left:16px !important;
  padding-right:16px !important;
}
body.wk-neu .wc-block-components-totals-coupon .wc-block-components-panel__button{
  padding-left:16px !important;
  padding-right:44px !important;
}
body.wk-neu .wc-block-components-totals-coupon .wc-block-components-panel__button > svg{
  right:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
/* (b) «Anmelden» junto a «Kontaktinformationen» iba 10 px más alto, como un
       superíndice (margen negativo de serie). */
body.wk-neu .wc-block-checkout__login-prompt{ margin-top:0 !important; }
/* (c) Bajo «Warenkorb-Summe» iban dos rayas a 16 px una de otra. */
body.wk-neu .wp-block-woocommerce-cart-order-summary-heading-block{ border-bottom:0 !important; }

/* ── 26. Envíos: los ejemplos no se parten («45 kg –» / «11,45 €») ───────────
   Un espacio fijo detrás de la raya no basta: el navegador puede cortar justo
   DESPUÉS de la raya. Cada pareja va entera en su caja (página Versand). */
body.wk-neu .wk-nobr{ white-space:nowrap; }

/* ── 27. Miga de pan de la búsqueda en el móvil ──────────────────────────────
   Se cortaba con «…» y se perdía justo lo buscado («FÜR „KNAR…»). En la
   búsqueda puede ocupar dos renglones. */
@media (max-width:767px){
  body.wk-neu.search .woocommerce-breadcrumb{ white-space:normal !important; }
}

/* ── 28. Descripción de la ficha ─────────────────────────────────────────────
   (a) «Lieferumfang» y «Weitere Angaben» son rótulos (versalitas en mono, como
       «Inhalt»), pero una regla de las pestañas los dejaba en letra normal de
       13 px: parecían texto suelto, más pequeño que lo que encabezan. */
body.wk-neu .wk-desc .wk-desc__rotulo,
body.wk-neu .woocommerce-Tabs-panel .wk-desc__rotulo{
  font-family:var(--wk-mono) !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--wk-tinta-3) !important;
  margin:0 0 var(--s4) !important;
}
/* (b) Viñetas que cuelgan de otra («optischer Prüfer mit verschiedenen
       Funktionen:» → sus cuatro funciones): sangradas y con marca hueca. */
body.wk-neu .wk-desc__lista li.wk-desc__sub{ margin-left:18px; }
body.wk-neu .wk-desc__lista li.wk-desc__sub::before{
  background:transparent;
  border:1px solid var(--wk-rojo);
  box-sizing:border-box;
}
/* (c) Lieferumfang sin cantidades: sin la columna vacía de la izquierda. */
body.wk-neu .wk-desc__piezas--sin-n .wk-pieza{ grid-template-columns:minmax(0, 1fr); }
body.wk-neu .wk-desc__piezas--sin-n .wk-pieza__n{ display:none; }

/* ── 29. «Vertrag widerrufen»: la dirección en el móvil ──────────────────────
   Cada línea en su renglón y sin la coma colgando al final («Denis Vogel,»). */
@media (max-width:600px){
  body.wk-neu .wk-wd__adresse-sep{ display:none; }
  body.wk-neu .wk-wd__adresse-t{ display:block; }
}
/* (d) El botón redondo de cada opción de envío iba 5 px más bajo que su texto
       (centro a 27 px frente a 22). Los de pago ya cuadran (2 px). */
body.wk-neu .wc-block-components-shipping-rates-control .wc-block-components-radio-control__input{
  top:12px !important;
}
/* (e) En el móvil WooCommerce oculta el título «Warenkorb-Summe», y la raya de
       debajo se quedaba suelta arriba de la tarjeta, sobre una franja vacía. */
body.wk-neu .wc-block-components-sidebar-layout:is(.is-mobile, .is-small) .wp-block-woocommerce-cart-order-summary-coupon-form-block{
  border-top:0 !important;
}
/* (f) Casillas de subcategoría en el teléfono: con 16 px de relleno y 12 de
       hueco, «Schlauchklemmen-» no cabía ni partida y el navegador la cortaba
       a ciegas («Schlauchklemme/nzangen»). Un poco menos de relleno. */
@media (max-width:600px){
  body.wk-neu .wkl__z{ padding:12px 12px !important; gap:8px !important; }
}
/* (g) Caja en el móvil: entre «Bestellübersicht 45,55 €» y el artículo quedaban
       ~70 px vacíos y sin raya (en el ordenador sí la hay). Raya como allí y
       la mitad de aire. */
body.wk-neu .wc-block-components-sidebar-layout:is(.is-mobile, .is-small) .wp-block-woocommerce-checkout-order-summary-cart-items-block{
  padding-top:0 !important;
  border-top:1px solid var(--wk-filete) !important;
}
body.wk-neu .wc-block-components-sidebar-layout:is(.is-mobile, .is-small) .wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary{
  padding-top:8px !important;
}

/* ── 30. Speditionsartikel: el recuadro de la ficha (inc/pulido.php 9a) ──────
   Antes del botón de compra, con el mismo lenguaje que los avisos del tema:
   filete rojo a la izquierda, rótulo en versalitas y texto corto. */
body.wk-neu .wk-spedition{
  margin:var(--s4) 0 var(--s5);
  padding:var(--s3) var(--s4);
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  border-left:3px solid var(--wk-rojo);
}
body.wk-neu .wk-spedition__titel{
  margin:0 0 4px !important;
  font-family:var(--wk-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wk-tinta) !important;
}
body.wk-neu .wk-spedition__text{
  margin:0 !important;
  font-size:14px;
  line-height:1.55;
  color:var(--wk-tinta-2) !important;
}
body.wk-neu .wk-spedition__text a{ color:inherit !important; text-decoration:underline; text-underline-offset:2px; }

/* ── 31. Aviso «wieder verfügbar»: la casilla de consentimiento ────────────── */
body.wk-neu .wk-bis-ok{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--wk-tinta-2) !important;
  cursor:pointer;
}
body.wk-neu .wk-bis-ok input[type="checkbox"]{
  flex:none;
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:var(--wk-rojo);
}
body.wk-neu .wk-bis-ok a{ color:inherit !important; text-decoration:underline; text-underline-offset:2px; }
/* La casilla va entre el correo y el botón (primero se marca, luego se pulsa):
   el correo ocupa su línea entera, debajo la casilla y después el botón. */
body.wk-neu .wc_bis_form__form-row .wc_bis_form__input{ flex:1 1 100%; }
body.wk-neu .wc_bis_form__form-row .wk-bis-ok{ flex:1 1 100%; margin:4px 0 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TERCERA REVISIÓN (03.10.2026, noche) — secciones 32 a 45
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 32. Galería: la sombra de contacto, bajo la FOTO grande ─────────────────
   Iba al pie de todo el bloque de la galería y, con miniaturas debajo, caía
   entre ellas como una mancha gris. Con varias fotos se pinta en el visor. */
body.wk-neu.single-product .woocommerce-product-gallery:has(.flex-viewport)::after{ display:none; }
body.wk-neu.single-product .woocommerce-product-gallery .flex-viewport::after{
  content:""; position:absolute; z-index:0;
  left:24%; right:24%; bottom:7%; height:14px;
  border-radius:50%; filter:blur(4px); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(30,26,22,.22) 0%,rgba(30,26,22,0) 72%);
}

/* ── 33. Caja en el móvil: sin el hueco de ~150 px bajo «Jetzt kaufen» ────────
   Se sumaban 36 px del bloque del botón, 24 px de la columna y los 64 px de la
   página. Queda el aire normal antes del pie. */
body.wk-neu .wc-block-components-sidebar-layout.is-mobile .wc-block-checkout__sidebar,
body.wk-neu .wc-block-components-sidebar-layout.is-small .wc-block-checkout__sidebar,
body.wk-neu .wc-block-components-sidebar-layout.is-mobile .wc-block-checkout__actions,
body.wk-neu .wc-block-components-sidebar-layout.is-small .wc-block-checkout__actions{ margin-bottom:0 !important; }

/* ── 34. Línea de stock: el cuadradito a la altura de la PRIMERA línea ───────
   Cuando el texto ocupa dos líneas (Spedition, móvil) quedaba centrado entre
   las dos. */
body.wk-neu .wk-ficha__lager,
body.wk-neu.single-product .stock.in-stock{ align-items:flex-start !important; }
body.wk-neu .wk-ficha__lager::before,
body.wk-neu.single-product .stock.in-stock::before{ margin-top:calc(.5lh - 3px); }

/* ── 35. Ficha: el campo de cantidad tan alto como el botón (48 px) ───────── */
body.wk-neu.single-product form.cart .quantity .qty{ height:48px; }

/* ── 36. «Gutscheine hinzufügen»: el texto centrado con su flecha ────────────
   El texto iba arriba del botón de 44 px y la flecha en el centro: 7 px más
   baja que las letras. */
body.wk-neu .wc-block-components-totals-coupon .wc-block-components-panel__button{
  display:flex !important; align-items:center; min-height:44px;
}

/* ── 37. Carrito y caja: sin el hueco de más sobre la raya del total ───────── */
body.wk-neu .wp-block-woocommerce-cart-order-summary-totals-block,
body.wk-neu .wp-block-woocommerce-checkout-order-summary-totals-block{ padding-bottom:0 !important; }

/* ── 38. Carrito: la misma raya bajo el último artículo en claro y en oscuro ─
   La tabla traía además una raya blanca al 15 % que solo se veía en oscuro. */
body.wk-neu table.wc-block-cart-items{ border-bottom:0 !important; }

/* ── 39. Miga de pan larga en el móvil: a dos líneas, no cortada con «…» ─────
   Antes solo en la búsqueda (27); «Passwort zurücks…» también se cortaba. */
@media (max-width:767px){
  body.wk-neu .woocommerce-breadcrumb{ white-space:normal !important; }
}

/* ── 40. Casillas del acceso y del alta en modo oscuro ───────────────────────
   «Angemeldet bleiben» salía con la casilla de serie del navegador, rellena de
   gris: parecía desactivada. */
html[data-tema="oscuro"] .woocommerce-form-login input[type="checkbox"],
html[data-tema="oscuro"] .woocommerce-form-register input[type="checkbox"]{
  color-scheme:dark; accent-color:var(--wk-rojo-fondo);
}

/* ── 41. Nombres de artículo en el resumen del carrito y la caja ─────────────
   La columna es estrecha y «Beleuchtungsabdeckung» se partía a media palabra y
   sin guion («…abdeck / ung»). Con el diccionario alemán parte por sílabas. */
body.wk-neu .wc-block-components-product-name{
  hyphens:auto !important; -webkit-hyphens:auto !important;
  hyphenate-limit-chars:10 4 4;
}

/* ── 42. (Títulos de las tarjetas: ver la sección 9, «hyphenate-limit-chars»
   en el enlace, que es quien parte las palabras.) */

/* ── 43. Titular de la portada: renglones equilibrados ───────────────────────
   En el móvil la variante B dejaba «Garage» sola en la cuarta línea. */
body.wk-neu .wk-hero h1{ text-wrap:balance; }

/* ── 44. Pie de la pieza del héroe: la nota de la PAngV bajo el precio ─────── */
body.wk-neu .wk-hero__pie{ flex-wrap:wrap; }
body.wk-neu .wk-hero__mwst{
  flex-basis:100%; margin-top:-6px; text-align:right;
  font-size:11px; line-height:1.3; color:var(--wk-tinta-3);
}

/* ── 45. Caja: campos con error en rojo, como su aviso ───────────────────────
   El aviso salía debajo pero el campo seguía con el borde gris de siempre. */
body.wk-neu .wc-block-components-text-input.has-error input,
body.wk-neu .wc-block-components-text-input.has-error textarea,
body.wk-neu .wc-block-components-combobox.has-error input,
body.wk-neu .wc-blocks-components-select.has-error select{ border-color:var(--wk-rojo) !important; }
/* --wk-rojo y no --wk-rojo-fondo: este último solo existe en el modo oscuro. */
body.wk-neu .wc-block-components-validation-error,
body.wk-neu .wc-block-components-validation-error svg{ color:var(--wk-rojo) !important; fill:currentColor; }

/* ── 46. «Vertrag widerrufen»: los pasos 1-2-3 alineados con el resto ────────
   Una regla de las listas de los textos legales les dejaba 24 px de sangría. */
body.wk-neu ol.wk-wd__pasos{ margin-left:0 !important; padding-left:0 !important; }

/* ── 47. Caja: la tarjeta del resumen, con esquinas rectas como el resto ──── */
body.wk-neu .wp-block-woocommerce-checkout-order-summary-block{ border-radius:0 !important; }

/* ── 48. Carrito y caja: el plazo de entrega entero en su línea ──────────────
   «ca. 5–10 Werktage» se partía tras la raya en la columna estrecha del
   resumen. El rótulo («Lieferzeit (Spedition):») sí puede ir en otra línea. */
body.wk-neu .wc-block-components-product-details__value{ white-space:nowrap; }

/* ── 49. Precio por unidad (Grundpreis) bajo el precio de tarjetas y carruseles
   (04.10.2026). Pequeño y en gris, pero pegado al precio, como pide la PAngV. */
body.wk-neu .wk-grundpreis{
  display:block; margin-top:2px;
  font-size:11.5px; line-height:1.3; font-weight:400; letter-spacing:0;
  color:var(--wk-tinta-3); white-space:nowrap;
}
/* Mein Konto → «Bestellung ansehen»: el número de seguimiento de GLS. */
body.wk-neu .wk-seguimiento{ margin:0 0 18px; padding:11px 14px; border-left:3px solid var(--wk-tinta); background:var(--wk-hundido); }

/* ── 50. Pie: entrega y formas de pago en todas las páginas (04.10.2026) ──────
   § 312j Abs. 1 BGB: decirlo como muy tarde al empezar el pedido. Va justo
   encima del copyright, con el mismo tono discreto. */
body.wk-neu .wk-footer__pflicht{
  max-width:1400px; margin:28px auto 0; padding:0;
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.62);
}
body.wk-neu .wk-footer__pflicht a{ color:rgba(255,255,255,.82); text-decoration:underline; text-underline-offset:2px; }
body.wk-neu .wk-footer__pflicht a:hover{ color:var(--wk-rojo); }
body.wk-neu .wk-footer__pflicht + .site-info{ margin-top:14px; }

/* ── 51. Produktsicherheit: el aviso de BGS y el enlace a su hoja (04.10.2026) ─ */
body.wk-neu .safety-instructions p{ max-width:75ch; }
body.wk-neu .wk-aviso-orig{ margin:6px 0 0; font-size:13px; line-height:1.5; }
body.wk-neu .woocommerce-tabs .wk-aviso-orig a{ color:var(--wk-tinta-2); text-decoration:underline; text-underline-offset:2px; }
body.wk-neu .woocommerce-tabs .wk-aviso-orig a:hover{ color:var(--wk-rojo); }
body.wk-neu .wk-aviso-orig--bild img{ display:block; max-width:100%; height:auto; border:1px solid var(--wk-filete); }

/* ── 52. Miga de pan del móvil: se parte ENTRE migas, nunca dentro (04.10.2026)
   Cada miga va en su caja (functions.php, woocommerce_breadcrumb_defaults). Si
   una sola no cabe en la línea, se parte dentro de su caja (max-width). */
@media (max-width:767px){
  body.wk-neu .woocommerce-breadcrumb .wk-miga{ display:inline-block; max-width:100%; vertical-align:top; }
}
/* La casita de Storefront va en `a:first-of-type`: con cada miga en su caja,
   TODOS los enlaces son el primero de la suya y salía delante de cada miga. */
body.wk-neu .woocommerce-breadcrumb a::before{ content:none !important; display:none !important; }

/* ── 53. Móvil: precios alineados también con tres líneas de stock (04.10.2026)
   (9a) reserva dos líneas. «Nur noch 2 auf Lager · Spedition, ca. 5–10
   Werktage» ocupa tres en el teléfono (y en uno de 360 px también «Nur noch 2
   auf Lager · Lieferung 2–3 Werktage»): su precio subía 16 px respecto al de al
   lado. Si en el listado hay alguna así, todas reservan tres. */
@media (max-width:600px){
  body.wk-neu ul.products:has(.wk-ficha__lager--knapp, .wk-ficha__lager--sped) .wk-ficha__lager{ min-height:3.9em; }
}

/* ── 54. Listado de una sola página: sin la barra vacía de la paginación ─────
   Quedaba una raya (claro) o una franja (oscuro) sin números debajo de la
   rejilla y ~180 px de vacío antes del pie. */
body.wk-neu ul.products ~ .storefront-sorting:not(:has(nav.woocommerce-pagination)){ display:none !important; }

/* ── 55. Caja en el móvil: el nombre del artículo con sitio para no partirse ─
   La columna del nombre medía ~140 px y salía «Bremskolben-Rück-» /
   «stell-Satz». El importe baja a su propia línea, alineado a la derecha, y el
   nombre ocupa todo el ancho junto a la foto. */
body.wk-neu .wc-block-checkout.is-mobile .wc-block-components-order-summary-item,
body.wk-neu .wc-block-checkout.is-small .wc-block-components-order-summary-item{ flex-wrap:wrap; }
body.wk-neu .wc-block-checkout.is-mobile .wc-block-components-order-summary-item__description,
body.wk-neu .wc-block-checkout.is-small .wc-block-components-order-summary-item__description{ flex:1 1 0; min-width:0; padding-left:14px !important; }
body.wk-neu .wc-block-checkout.is-mobile .wc-block-components-order-summary-item__total-price,
body.wk-neu .wc-block-checkout.is-small .wc-block-components-order-summary-item__total-price{ flex:0 0 100%; margin-left:0; text-align:right; }

/* ── 56. Carrito: «Warenkorb-Summe» alineado con sus filas y con el mismo
   estilo que «Bestellübersicht» de la caja (iba 16 px a la izquierda, más
   pequeño y en negrita). */
body.wk-neu .wc-block-cart__totals-title{
  padding:0 16px !important;
  font-size:23px !important; font-weight:500 !important; line-height:1.4 !important;
  letter-spacing:normal !important; text-transform:none !important;
  color:var(--wk-tinta-2) !important;
}

/* ── 57. Caja en escritorio: la tarjeta del total sin la raya gruesa de arriba
   En el escritorio Germanized pone el total en su propia tarjeta, junto al
   botón; la raya que lo separa del envío quedaba sola arriba. */
body.wk-neu .wc-block-checkout:not(.is-mobile):not(.is-small) .wc-gzd-checkout-submit .wc-block-components-totals-footer-item{
  border-top:0 !important; padding-top:0 !important; margin-top:0 !important;
}

/* ── 58. Portada en el móvil: el precio de la pieza del héroe a la derecha,
   encima de su «inkl. MwSt.» (iba a la izquierda y la nota a la derecha). */
body.wk-neu .wk-hero__precio{ margin-left:auto; }

/* ── 59. Carrito sin cupones (04.10.2026): la raya bajo «Warenkorb-Summe» va
   en el título y no encima de las filas. En el móvil WooCommerce esconde el
   título, y sin el campo de cupones la raya quedaba sola arriba del recuadro. */
body.wk-neu .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-heading-block{
  border-bottom:1px solid var(--wk-filete) !important; padding-bottom:16px !important; margin-bottom:0 !important;
}
body.wk-neu .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-totals-block{
  border-top:0 !important;
}


/* ── 60. Pilas (04.10.2026): la línea del pie y el símbolo en su página ───────
   La segunda línea del pie va pegada a la de entrega y pagos; el símbolo de la
   mülltonne tachada, al lado de su pie de foto. */
body.wk-neu .wk-footer__pflicht + .wk-footer__batterien{ margin-top:4px; }
body.wk-neu .wk-batterie-symbol{ display:flex; align-items:center; gap:14px; margin:10px 0 22px; color:var(--wk-tinta); }
body.wk-neu .wk-batterie-symbol svg{ flex:0 0 auto; width:52px; height:auto; }
body.wk-neu .wk-batterie-symbol figcaption{ font-size:13px; line-height:1.4; color:var(--wk-tinta-3); }

/* ── 61. Símbolo «Elektrogeräte Rücknahme» en la ficha (04.10.2026) ──────────
   La imagen oficial ya trae su fondo blanco y su margen; aquí solo el tamaño
   y el aire. En el modo oscuro se queda blanca: así lo pide la ley. */
body.wk-neu .wk-ruecknahme{ margin:14px 0 6px; line-height:0; }
body.wk-neu .wk-ruecknahme img{ display:block; width:168px; height:auto; }


/* ── 62. Tarjetas: título más legible y botón azul marino (08.10.2026) ───────
   Pedido del usuario con prototipo («B + 3»): el nombre del producto salía en
   peso 300 en el <a> (Storefront) y en tinta-2, y costaba leerlo. Ahora va en
   Plex Sans 600 y en la tinta principal. El botón «In den Warenkorb» deja el
   filete rojo y pasa a azul marino relleno; el rojo de marca sigue en el nº de
   artículo y en la raya bajo la foto. `html:root` para ganar a las reglas con
   !important de listado-nuevo.css (sección del botón, M5 y la de 1812/4000)
   sin tocarlas. Vuelta atrás: borrar esta sección. */
html:root body.wk-neu .wk-ficha__titel,
html:root body.wk-neu .wk-ficha__titel a,
html:root body.wk-neu ul.products li.product .woocommerce-loop-product__title,
html:root body.wk-neu ul.products li.product .woocommerce-loop-product__title a{
  font-weight:600 !important;
  color:var(--wk-tinta) !important;
}
html:root body.wk-neu ul.products li.product .button,
html:root body.wk-neu ul.products li.product a.button.product_type_simple,
html:root body.wk-neu ul.products li.product .added_to_cart,
html:root body.wk-neu ul.products li.product:hover .button,
html:root body.wk-neu .wk-btn-ficha{
  background:#0F2D52 !important;
  border-color:#0F2D52 !important;
  color:#fff !important;
}
@media (hover:hover) and (pointer:fine){
  html:root body.wk-neu ul.products li.product .button:hover,
  html:root body.wk-neu ul.products li.product a.button.product_type_simple:hover,
  html:root body.wk-neu ul.products li.product .added_to_cart:hover{
    background:#091E38 !important;
    border-color:#091E38 !important;
  }
}
html:root body.wk-neu ul.products li.product .button:active{ background:#091E38 !important; }
/* Modo oscuro: el marino se perdía contra el fondo antracita; un azul más
   claro mantiene la letra blanca por encima de 7:1. */
html[data-tema="oscuro"]:root body.wk-neu ul.products li.product .button,
html[data-tema="oscuro"]:root body.wk-neu ul.products li.product a.button.product_type_simple,
html[data-tema="oscuro"]:root body.wk-neu ul.products li.product .added_to_cart,
html[data-tema="oscuro"]:root body.wk-neu ul.products li.product:hover .button{
  background:#1E4A80 !important;
  border-color:#1E4A80 !important;
  color:#fff !important;
}
@media (hover:hover) and (pointer:fine){
  html[data-tema="oscuro"]:root body.wk-neu ul.products li.product .button:hover{
    background:#285C9C !important; border-color:#285C9C !important;
  }
}

/* ── 63. Todos los botones del contenido en azul marino (08.10.2026) ─────────
   Pedido del usuario tras la §62: «todos los botones azules». En vez de
   repintar cada botón (hay reglas con !important y :not(#wk) por todas
   partes), se redefinen las variables del rojo DENTRO de los botones: sus
   reglas siguen igual, pero su var(--wk-rojo…) ahora vale marino. El rojo de
   marca no cambia fuera de los botones (precios de oferta, nº de artículo,
   raya de la foto, cabecera). La cabecera (lupa y «Alle Produkte») queda
   fuera a propósito. Vuelta atrás: borrar esta sección. */
html:root body.wk-neu :is(.site-content, .site-main, .wk-hero, .site-footer) :is(button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .wp-element-button, .wc-block-components-button, .woocommerce-product-gallery__trigger, .wk-btn, .wc_bis_form__button, .checkout-button){
  --wk-rojo:#0F2D52;
  --wk-rojo-hover:#091E38;
  --wk-rojo-700:#091E38;
  --wk-rojo-fondo:#0F2D52;
  --wk-rojo-fondo-2:#091E38;
}
html[data-tema="oscuro"]:root body.wk-neu :is(.site-content, .site-main, .wk-hero, .site-footer) :is(button, .button, input[type="submit"], input[type="button"], .wp-block-button__link, .wp-element-button, .wc-block-components-button, .woocommerce-product-gallery__trigger, .wk-btn, .wc_bis_form__button, .checkout-button){
  --wk-rojo:#1E4A80;
  --wk-rojo-hover:#285C9C;
  --wk-rojo-700:#285C9C;
  --wk-rojo-fondo:#1E4A80;
  --wk-rojo-fondo-2:#285C9C;
}

/* ── 64. Carrusel de portada y cabecera también en azul (08.10.2026) ─────────
   (a) «Zum Produkt» del carrusel 3D (carrusel3d.css) era de filete rojo: pasa
   a relleno marino como el resto de botones (§63); azul más claro en oscuro.
   (b) Cabecera: la lupa y la pestaña «Alle Produkte». La cabecera es antracita
   en los dos modos, y ahí el marino no se distinguía: van en el azul claro. */
html:root body.wk-neu .wk3d .wk3d__btn{
  background:#0F2D52 !important;
  border-color:#0F2D52 !important;
  color:#fff !important;
}
@media (hover:hover) and (pointer:fine){
  html:root body.wk-neu .wk3d .wk3d__btn:hover{ background:#091E38 !important; border-color:#091E38 !important; }
}
html[data-tema="oscuro"]:root body.wk-neu .wk3d .wk3d__btn{
  background:#1E4A80 !important;
  border-color:#1E4A80 !important;
}
@media (hover:hover) and (pointer:fine){
  html[data-tema="oscuro"]:root body.wk-neu .wk3d .wk3d__btn:hover{ background:#285C9C !important; border-color:#285C9C !important; }
}
html:root body .wkh__lupa,
html:root body .wkh__enlace--rojo{
  --wk-rojo:#1E4A80;
  --wk-rojo-hover:#285C9C;
}
@media (hover:hover) and (pointer:fine){
  html:root body .wkh__enlace--rojo:hover{ background:#285C9C; }
}

/* ── 65. Gefahrenhinweise nach CLP en la ficha (10.10.2026) ─────────────────
   El recuadro que pinta inc/gefahren.php en los químicos. Fondo blanco en los
   dos modos: los pictogramas GHS son rojo sobre blanco y así tienen que verse. */
body.wk-neu .wk-gefahr{
  margin:14px 0 18px; padding:14px 16px;
  background:#fff; color:#12100E;
  border:1px solid #E3E1DC; border-left:3px solid #CC0000;
}
body.wk-neu .wk-gefahr__titel{
  margin:0 0 10px; font:600 12px/1.3 var(--wk-mono); letter-spacing:.08em; text-transform:uppercase; color:#12100E;
}
body.wk-neu .wk-gefahr__cuerpo{ display:flex; gap:14px; align-items:flex-start; }
body.wk-neu .wk-gefahr__piktos{ display:flex; gap:6px; flex:0 0 auto; }
body.wk-neu .wk-gefahr__piktos img{ display:block; width:56px; height:56px; }
body.wk-neu .wk-gefahr__texto{ min-width:0; font-size:14px; line-height:1.45; color:#12100E; }
body.wk-neu .wk-gefahr__signal{ margin:0 0 4px; font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.03em; }
body.wk-neu .wk-gefahr__frases{ margin:0 !important; padding:0 !important; list-style:none !important; }
body.wk-neu .wk-gefahr__frases li{ margin-left:0 !important; padding-left:0 !important; }
body.wk-neu .wk-gefahr__frases li{ margin:0 0 3px; }
body.wk-neu .wk-gefahr__enthaelt{ margin:6px 0 0; font-size:13px; color:#3A3733; }
body.wk-neu .wk-gefahr__sdb{ margin:8px 0 0; font-size:13px; }
body.wk-neu .wk-gefahr__sdb a{ color:#12100E !important; text-decoration:underline; text-underline-offset:3px; }
/* El modo oscuro aclara el texto de listas y párrafos: dentro del recuadro
   (que es blanco a propósito) todo va en tinta oscura. */
/* :not(#wk) para ganar a la regla de texto de listado-nuevo.css
   («.site-content :is(p, li…):not([class*=wk-])», que lleva !important). */
html body.wk-neu .wk-gefahr:not(#wk),
html body.wk-neu .wk-gefahr p:not(#wk),
html body.wk-neu .wk-gefahr li:not(#wk),
html body.wk-neu .wk-gefahr strong:not(#wk){ color:#12100E !important; }
html body.wk-neu .wk-gefahr .wk-gefahr__enthaelt:not(#wk){ color:#3A3733 !important; }
html body.wk-neu ul.wk-gefahr__frases{ margin:0 !important; padding:0 !important; list-style:none !important; }

/* 66 · «Mein Konto» también en el móvil (22.10.2026) ----------------------
   cabecera.css lo escondía por debajo de 560 px y en el móvil no había forma
   de entrar ni de crear cuenta. Ahora se ve el muñeco solo, sin texto, y el
   carrito enseña solo el número para que todo quepa en una fila. */
@media (max-width: 560px) {
  .wkh .wkh__util--cuenta { display: flex; margin-left: auto; }
  .wkh .wkh__util--cuenta > span { display: none; }
  .wkh .wkh__util--cuenta svg { width: 24px; height: 24px; }
  .wkh .wkh__util--cuenta,
  .wkh .wkh__util--carrito { min-width: 40px; min-height: 44px; justify-content: center; }
  .wkh .wkh__util--carrito { margin-left: 0; }
  .wkh .wkh__fila1 .wkh__caja { gap: 10px; }
}
@media (max-width: 560px) {
  .wkh .wkh__util--carrito { gap: 6px; min-width: 0; }
  .wkh .wkh__util--carrito .wkh__p { display: none; }
  .wkh .wkh__util--carrito .wkh__util-l1 { color: #fff; font-size: 13px; letter-spacing: 0; }
}

/* 67 · Kundenrabatt (22.10.2026, inc/kundenrabatt.php) -------------------- */
.wk-rabatt {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--wk-verde, #1F7A3D);
}
.wk-rabatt--nein { font-weight: 400; color: var(--wk-gris, #8A857C); }
.wk-rabatt-konto {
  padding: 12px 16px;
  border-left: 3px solid var(--wk-verde, #1F7A3D);
  background: rgba(31, 122, 61, .07);
}

/* 68 · Caja: Straße | Hausnr. y PLZ | Ort en la misma fila (22.10.2026, inc/direccion.php)
   La caja de bloques pinta el enlace «+ Adresszusatz» siempre justo detrás de la
   calle; con `order` se manda detrás del número. En el móvil el formulario es
   `display:block`: aquí pasa a flex para poder poner dos campos por fila. */
.wc-block-components-address-form {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 0;
}
.wc-block-components-address-form > * { order: 1; }
.wc-block-components-address-form > .wc-block-components-address-form__country,
.wc-block-components-address-form > .wc-block-components-address-form__first_name,
.wc-block-components-address-form > .wc-block-components-address-form__last_name,
.wc-block-components-address-form > .wc-block-components-address-form__company,
.wc-block-components-address-form > .wc-block-components-address-form__address_1,
.wc-block-components-address-form > .wc-block-components-address-form__werkado-hausnummer { order: 0; }
@media (max-width: 560px) {
  .wc-block-components-address-form > * { flex: 0 0 100%; max-width: 100%; }
}
html body .wc-block-components-address-form > .wc-block-components-address-form__address_1 { flex: 0 0 calc(70% - 6px); max-width: calc(70% - 6px); }
html body .wc-block-components-address-form > .wc-block-components-address-form__werkado-hausnummer { flex: 0 0 calc(30% - 6px); max-width: calc(30% - 6px); }
html body .wc-block-components-address-form > .wc-block-components-address-form__postcode { flex: 0 0 calc(38% - 6px); max-width: calc(38% - 6px); }
html body .wc-block-components-address-form > .wc-block-components-address-form__city { flex: 0 0 calc(62% - 6px); max-width: calc(62% - 6px); }