/* ===============================================================
   CABECERA A — "el buscador manda"
   ---------------------------------------------------------------
   Todo va acotado a body.wk-cab-a y con clases wkh-*: las reglas
   viejas de .site-header / .main-navigation no le llegan.
   Las medidas siguen la escala de 8 px del resto de la tienda.
   =============================================================== */

/* ---------------------------------------------------------------
   Para que la cabecera pueda quedarse fija hay que tocar esto ANTES.

   El tema lleva `overflow-x: hidden` en el body y en .hfeed para que las
   secciones a todo el ancho de la portada (width:100vw) no saquen barra
   horizontal. El efecto colateral es doble y no se ve venir:
     1. un ancestro con overflow distinto de visible convierte el elemento en
        contenedor de scroll y **anula position:sticky** de todo lo que hay
        dentro;
     2. el evento `scroll` pasa a dispararse en el body y ya no llega a
        `window`, así que el JS que encoge la cabecera tampoco se enteraba.

   `overflow-x: clip` recorta igual pero NO crea contenedor de scroll, que es
   exactamente para lo que se inventó. Se deja el `hidden` de base para los
   navegadores viejos que no lo entienden: ahí no habrá cabecera fija, pero la
   maquetación sigue intacta.
   --------------------------------------------------------------- */
body.wk-cab-a,
body.wk-cab-a .hfeed { overflow-x: hidden; }

@supports (overflow: clip) {
  body.wk-cab-a,
  body.wk-cab-a .hfeed { overflow-x: clip; overflow-y: visible; }
}

body.wk-cab-a .site-header {
  padding: 0 !important;
  border-bottom: 0;
  background-color: var(--wk-negro-header, #0D0D0D) !important;
  position: sticky;
  top: 0;
  z-index: 900;
}

/* El .col-full de Storefront estrangula la cabecera a 1400 px con relleno
   propio; aquí cada fila pone su caja, así la franja del menú puede pintar
   el fondo de lado a lado. */
body.wk-cab-a .site-header > .col-full {
  max-width: none;
  padding: 0;
}

.wkh { --wkh-caja: 1400px; }

.wkh__caja {
  max-width: var(--wkh-caja);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- fila 1 --------------------------------------------------- */
.wkh__fila1 { background: var(--wk-negro-header, #0D0D0D); }
.wkh__fila1 .wkh__caja {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.wkh__marca { display: block; flex: none; line-height: 0; }
.wkh__logo {
  height: 52px;
  width: auto;
  max-width: none;
  display: block;
  transition: height .18s var(--wk-ease, cubic-bezier(.23,1,.32,1));
}
.wkh__logo-texto {
  color: #fff;
  font-family: var(--wk-titulo, sans-serif);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* --- buscador -------------------------------------------------
   El tope de 620 px hace que sobre sitio en la fila, y sin este margen
   automático el sobrante se queda pegado al borde derecho como un hueco
   muerto — el mismo defecto que tenía la cabecera vieja. Con margin-right
   auto el aire cae en medio y las utilidades se alinean con el borde. */
.wkh__buscador {
  flex: 1 1 auto;
  max-width: 620px;
  /* margin:0 a propósito: Storefront da a todo <form> un margin-bottom de
     1.618em, y con align-items:center eso dejaba la caja 13px por ENCIMA del
     logo y los iconos (medido en el chequeo visual del 2026-09-07). */
  margin: 0 auto 0 0;
  display: flex;
  align-items: stretch;
  background: #fff;
  height: 46px;
  min-width: 0;
}
body.wk-cab-a .wkh__buscador input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--wk-tinta, #17160F);
  font-family: var(--wk-cuerpo, sans-serif);
  font-size: 14px;
  padding: 0 14px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
body.wk-cab-a .wkh__buscador input[type="search"]::placeholder { color: #8C887E; opacity: 1; }
body.wk-cab-a .wkh__buscador input[type="search"]:focus { outline: none; }
body.wk-cab-a .wkh__buscador:focus-within { box-shadow: 0 0 0 2px var(--wk-rojo, #CC0000); }

/* style.css pinta TODOS los <button> de rojo con `!important`. Alcanza a los
   dos botones de la cabecera: la lupa acertaba de casualidad y la hamburguesa
   salía como un cuadro rojo. Se declaran los dos a mano —también la lupa, para
   que su color sea una decisión y no un efecto colateral de esa regla. */
.wkh__hamburguesa { background: transparent !important; }
.wkh__lupa { background: var(--wk-rojo, #CC0000) !important; }

.wkh__lupa {
  flex: none;
  width: 52px;
  border: 0;
  border-radius: 0;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background .16s var(--wk-ease, cubic-bezier(.23,1,.32,1));
}
.wkh__lupa svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2.2; }
.wkh__lupa:active { transform: scale(.97); }

/* --- utilidades de la derecha --------------------------------- */
.wkh__util {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
}
.wkh__util svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 1.7; flex: none; }
.wkh__util-l1 {
  display: block;
  font-family: var(--wk-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #A9A49A;
  line-height: 1.35;
  white-space: nowrap;
}
.wkh__util-l2 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

/* --- fila 2: categorías --------------------------------------- */
.wkh__fila2 {
  background: var(--wk-negro-header, #0D0D0D);
  border-top: 1px solid var(--wk-borde, #262626);
}
.wkh__fila2 .wkh__caja { position: relative; }

.wkh__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.wkh__item { position: static; }
.wkh__item--todo { margin-left: auto; }

.wkh__enlace {
  display: flex;
  align-items: center;
  padding: 14px 9px;
  font-family: var(--wk-titulo, sans-serif);
  /* 13px: 12 se quedaba pequeño para nueve categorías en versalitas.
     El padding lateral baja de 10 a 9px para que las nueve sigan cabiendo
     en una sola línea (medido: 903px de los 1380 del contenedor). */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #EDEBE4;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.wkh__enlace--rojo { background: var(--wk-rojo, #CC0000); color: #fff; padding-left: 16px; padding-right: 16px; }

.wkh__enlace::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 3px;
  background: var(--wk-rojo, #CC0000);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--wk-ease, cubic-bezier(.23,1,.32,1));
}
.wkh__enlace--rojo::after { display: none; }

/* --- desplegable ---------------------------------------------- */
.wkh__panel {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 100%;
  background: #fff;
  border-top: 3px solid var(--wk-rojo, #CC0000);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  padding: 22px 24px 18px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s var(--wk-ease, cubic-bezier(.23,1,.32,1)),
              transform .16s var(--wk-ease, cubic-bezier(.23,1,.32,1)),
              visibility .16s;
}
.wkh__panel-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px 24px;
}
.wkh__sub {
  position: relative;      /* contexto para el filete rojo del ::after */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  color: #2A281F;
  text-decoration: none;
  font-size: 13.5px;
  border-bottom: 1px solid #ECEAE4;
}
/* Mismo recurso que el subrayado del menú: escala horizontal con origen a la
   izquierda, sobre `transform` (GPU). Animar el color de un borde no rellena:
   aparecería la línea entera de golpe. */
.wkh__sub::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--wk-rojo, #CC0000);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s var(--wk-ease, cubic-bezier(.23,1,.32,1));
}
.wkh__sub-num {
  font-family: var(--wk-mono, ui-monospace, monospace);
  font-size: 12px;
  /* #8C887E se quedaba en 3,39:1 sobre el blanco del panel: por debajo de
     AA. Este llega a 5,4:1 y sigue leyéndose como dato secundario. */
  color: #6E6A65;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.wkh__panel-todo {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--wk-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wk-rojo, #CC0000);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* El hover solo con ratón: en táctil se queda pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
  .wkh__item--panel:hover .wkh__panel { opacity: 1; visibility: visible; transform: none; }
  .wkh__item--panel:hover .wkh__enlace::after { transform: scaleX(1); }
  .wkh__enlace:hover::after { transform: scaleX(1); }
  .wkh__lupa:hover { background: var(--wk-rojo-hover, #A50000) !important; }
  .wkh__hamburguesa:hover { background: rgba(255,255,255,.08) !important; }
  .wkh__sub:hover { background: #F4F2EC; color: #000; }
  .wkh__sub:hover::after { transform: scaleX(1); }
  .wkh__util:hover .wkh__util-l2 { color: #fff; text-decoration: underline; }
}
/* Con teclado el panel también se abre. */
.wkh__item--panel:focus-within .wkh__panel { opacity: 1; visibility: visible; transform: none; }
.wkh__item--panel.wkh-abierto .wkh__panel { opacity: 1; visibility: visible; transform: none; }

body.wk-cab-a .site-header :focus-visible,
.wkh :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.wkh__panel :focus-visible { outline: 2px solid var(--wk-rojo, #CC0000); outline-offset: -2px; }

/* --- estado compacto al bajar --------------------------------- */
.wkh.wkh-compacta .wkh__fila1 .wkh__caja { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
.wkh.wkh-compacta .wkh__logo { height: 34px; }
.wkh.wkh-compacta .wkh__buscador { height: 40px; }
.wkh.wkh-compacta .wkh__lupa { width: 46px; }

/* --- hamburguesa y cajón (solo móvil) ------------------------- */
.wkh__hamburguesa {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
}
.wkh__hamburguesa-icono,
.wkh__hamburguesa-icono::before,
.wkh__hamburguesa-icono::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  content: "";
  position: relative;
}
.wkh__hamburguesa-icono::before { position: absolute; top: -7px; }
.wkh__hamburguesa-icono::after  { position: absolute; top: 7px; }

.wkh__cajon { display: none; }

@media (max-width: 991px) {
  .wkh__hamburguesa { display: grid; }
  .wkh__fila1 .wkh__caja {
    flex-wrap: wrap;
    gap: 12px;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .wkh__logo { height: 38px; }
  .wkh__util--cuenta .wkh__util-l1,
  .wkh__util--carrito .wkh__util-l2 { display: none; }
  .wkh__util--cuenta { margin-left: auto; }
  .wkh__buscador {
    order: 10;
    flex: 1 0 100%;
    max-width: none;
    height: 44px;
  }
  .wkh__fila2 { display: none; }

  .wkh__cajon {
    display: block;
    /* Sigue el tono de la cabecera, no un negro suelto: si no, al desplegar
       el menú aparece una franja de otro color justo debajo. */
    background: var(--wk-antracita-2, #161B22);
    border-top: 1px solid var(--wk-borde, #262626);
    max-height: 70vh;
    overflow-y: auto;
  }
  .wkh__cajon[hidden] { display: none; }
  .wkh__cajon .wkh__menu { display: block; }
  .wkh__cajon .wkh__item--todo { margin-left: 0; }
  .wkh__cajon .wkh__enlace {
    padding: 15px 24px;
    border-bottom: 1px solid var(--wk-borde, #262626);
    font-size: 13px;
  }
  .wkh__cajon .wkh__enlace::after { display: none; }
  .wkh__cajon .wkh__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    background: #FBFAF7;
    padding: 8px 24px 14px;
    display: none;
  }
  .wkh__cajon .wkh__item.wkh-abierto .wkh__panel { display: block; }
  .wkh__cajon .wkh__panel-rejilla { grid-template-columns: 1fr 1fr; }
  .wkh__cajon .wkh__panel-caja { max-width: none; }
}

@media (max-width: 560px) {
  .wkh__caja { padding: 0 16px; }
  .wkh__logo { height: 32px; }
  .wkh__util--cuenta { display: none; }
  /* Al ocultar "Mein Konto" se va con él el margen que empujaba el grupo al
     borde, y el carrito se quedaba colgado en mitad de la fila. */
  .wkh__util--carrito { margin-left: auto; }
  .wkh__cajon .wkh__panel-rejilla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wkh__panel, .wkh__enlace::after, .wkh__sub::after, .wkh__logo, .wkh__lupa { transition: none; }
}

/* --- La cabecera se va al bajar y vuelve al subir (22.09.2026) ------------
   Solo por debajo de 991 px: en escritorio hay sitio de sobra y quitarla
   mientras se navega un catálogo no aporta nada.
   ⚠️ Se mueve con `transform` a propósito, NO plegando alturas. Un transform
   no participa en la maquetación, así que la página no cambia de alto y el
   navegador no tiene que corregir el scroll. La primera versión sí cambiaba
   la altura y eso provocaba un bucle: el navegador corregía ∼12 px, el JS lo
   leía como «bajando» y la volvía a esconder, indefinidamente.
   ⚠️ Comprobado antes de hacerlo: dentro de la cabecera no hay ningún
   elemento `position:fixed` y el cajón del móvil es estático. Si algún día se
   mete algo fijo ahí dentro, el transform pasará a ser su contenedor y lo
   romperá. */
/* ⚠️ Este tramo empezó en 991 px y se quedó CORTO: un iPad en horizontal mide
   1024, así que la cabecera no se movía ahí (lo notó el dueño el 22.09.2026).
   El JavaScript SÍ ponía la clase a ese ancho — comprobado —; lo que faltaba
   era que el CSS la atendiera.
   Las dos condiciones van con coma (=«o») a propósito:
     · hasta 1279 px cubre iPad mini y Air en horizontal (1024 y 1180);
     · `hover:none` + `pointer:coarse` = dedo en vez de ratón, y eso pilla al
       iPad Pro de 12,9″ (1366 px) y a cualquier tableta grande que salga, sin
       tener que ir persiguiendo medidas concretas.
   Un escritorio con ratón de 1280 px o más se queda como estaba. */
@media (max-width: 1279px), (hover: none) and (pointer: coarse) {
  .site-header {
    transition: transform .25s ease;
  }
  .site-header.wkh-oculta {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* --- La barra de categorías, en tablet (22.09.2026) -----------------------
   «ALLE PRODUKTE cortado en el iPad en horizontal», dijo el dueño. Medido:
   la barra necesita **1190 px** y en un iPad en horizontal hay 1024 → se salen
   **166 px** y el botón rojo, que va anclado a la derecha, queda a medias.
   ⚠️ No es solo el iPad: el ancho que necesita NO depende de la pantalla (el
   texto es el que es), así que sale cortada en TODO el tramo entre ~992 y
   ~1213 px. Por eso la corrección llega hasta 1279 y no solo a 1024.
   Se aprieta en vez de esconder elementos: las ocho categorías son la
   navegación principal de la tienda y mandar una a un menú «Más» la entierra.
   Números elegidos midiendo, no a ojo (holgura antes del botón rojo):
     · 13 px quitando TODO el interletrado ... 18 px de holgura
     · 12 px con relleno 6 y 0,3 de interletrado ... 11 px
     · 12 px con relleno 5 y 0,2 ................. 45 px  ← esta
   Se prefirió bajar 1 px el texto antes que quitar el interletrado: ese
   espaciado de las mayúsculas es del estilo de la casa y se ve en toda la
   tienda. Y 45 px de holgura dejan sitio a que una categoría se renombre sin
   que vuelva a romperse.
   ⚠️ NO poner `overflow` en la barra para que ruede: los desplegables de las
   categorías se saldrían de la caja y quedarían recortados. */
@media (max-width: 1279px) {
  .wkh__fila2 .wkh__caja {
    padding-left: 12px;
    padding-right: 12px;
  }
  .wkh__fila2 .wkh__enlace {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    letter-spacing: .2px;
  }
}