/* ===========================================================================
   EL ABANICO DE APARTADOS
   Al pulsar una categoría de la estantería, sus subcategorías se abren delante
   en abanico: la herramienta flotando (sin marco, como el carrusel y la
   rejilla) y debajo el nombre y los artículos. Todas a la vez.
   =========================================================================== */

/* ⚠️ `display:flex` en .ab PISA el `display:none` que el navegador da a
   [hidden] —una regla de autor gana siempre a la del navegador—, así que sin la
   línea siguiente se pintarían los OCHO diálogos a la vez, uno sobre otro. */
.ab{
  --ab-sombra:rgba(18,16,14,.22);
  position:fixed;inset:0;z-index:1200;   /* la cabecera pegajosa llega a 900 */
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.ab[hidden]{display:none}
html[data-tema="oscuro"] .ab{ --ab-sombra:rgba(0,0,0,.5); }

.ab__velo{position:absolute;inset:0;background:rgba(18,16,14,.55);animation:ab-velo 220ms var(--wk-ease,ease)}
@keyframes ab-velo{from{opacity:0}to{opacity:1}}

.ab__caja{
  position:relative;width:min(1320px,100%);max-height:92vh;overflow:auto;
  background:var(--wk-papel);border:1px solid var(--wk-filete-2);
  padding:28px 36px 36px;
  box-shadow:0 40px 80px -30px rgba(18,16,14,.6);
  animation:ab-caja 300ms var(--wk-ease,ease);
}
@keyframes ab-caja{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.ab__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--wk-filete);padding-bottom:16px}
.ab .ab__titulo{
  font-family:var(--wk-cond) !important;font-size:30px;line-height:1.15;margin:0;
  color:var(--wk-tinta) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600;
}
.ab__meta{margin:4px 0 0;font-family:var(--wk-mono);font-size:12px;color:var(--wk-tinta-3) !important;
  font-variant-numeric:tabular-nums}
.ab__acciones{display:flex;align-items:center;gap:12px}
.ab__todos{
  border:1px solid var(--wk-rojo);color:var(--wk-rojo) !important;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:10px 20px;
  transition:background 180ms var(--wk-ease,ease),color 180ms var(--wk-ease,ease);
}
@media (hover:hover) and (pointer:fine){
  .ab__todos:hover{background:var(--wk-rojo);color:#fff !important}
}
/* ⚠️ El !important del fondo no es capricho: Storefront pinta TODO <button> de
   su color de marca (salía un cuadrado rojo compitiendo con "Alle Artikel
   ansehen", que sí es la acción principal). */
.ab__cerrar{background:none !important;border:1px solid var(--wk-filete-2);
  width:34px;height:34px;cursor:pointer;padding:0;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 180ms var(--wk-ease,ease)}
.ab__cerrar svg{width:15px;height:15px;fill:none;stroke:var(--wk-tinta);stroke-width:1.6}
@media (hover:hover) and (pointer:fine){
  .ab__cerrar:hover{border-color:var(--wk-rojo)}
  .ab__cerrar:hover svg{stroke:var(--wk-rojo)}
}

/* ── El abanico ─────────────────────────────────────────────────────────── */
.ab__abanico{
  /* --ancho-base, --filas y --porfila los calcula el PHP según cuántos
     apartados haya, y el JS los reelige con el alto real de la ventana.
     --esc es el único mando para pantallas pequeñas: como todo lo demás se
     calcula a partir de --ancho-p, basta tocarla.
     ⚠️ --paso SIEMPRE mayor que --ancho-p: el nombre mide lo que la pieza, así
     que con el paso más corto los nombres se pisan entre ellos. */
  --esc:1;
  --ancho-p:calc(var(--ancho-base) * var(--esc));
  --paso:calc(var(--ancho-p) + 16px);
  /* La curva crece con la pieza: si es fija, con piezas pequeñas el arco se ve
     plano —parece una tabla— y con piezas grandes, exagerado. */
  --curva:calc(var(--ancho-p) * .34 + 14px);
  --giro:8deg;
  /* Alto del bloque nombre+recuento. NO encoge con --esc porque el cuerpo de
     letra tiene un mínimo: por eso va en píxeles fijos y no en proporción.
     Mismo número que usa abanico.php para elegir el reparto. */
  --nombre:78px;
  /* Separación entre arcos = foto + nombre + 16px de aire para el giro de las
     puntas. Es lo que evita que un nombre toque la herramienta de abajo. */
  --sep:calc(var(--ancho-p) * .9 + var(--nombre) + 20px);
  position:relative;margin:16px 0 0;
  display:flex;align-items:flex-end;justify-content:center;
  /* Alto exacto: lo que bajan las puntas (--curva), la foto, los arcos que haya
     y el nombre del último, que si no se sale por debajo. */
  height:calc(var(--ancho-p) * .9 + var(--curva) + var(--sep) * (var(--filas) - 1) + var(--nombre) + 14px);
}

/* SIN MARCO: la herramienta flota. Lo que la apoya es la elipse de contacto. */
.ab__carta{
  position:absolute;bottom:calc(var(--curva) + 14px);
  width:var(--ancho-p);text-decoration:none;
  transform-origin:50% 92%;
  /* La fila 0, arriba: los apartados grandes se leen primero. */
  transform:translateX(calc(var(--paso) * var(--m) * (var(--porfila) - 1) / 2))
            translateY(calc(var(--curva) * var(--m) * var(--m) - var(--sep) * (var(--filas) - 1 - var(--f))))
            rotate(calc(var(--giro) * var(--m)));
  transition:transform 300ms var(--wk-ease,ease);
  animation:ab-entrar 380ms var(--wk-ease,ease) backwards;
  animation-delay:calc(var(--orden) * 11ms);
}
@keyframes ab-entrar{from{opacity:0}to{opacity:1}}

/* Alto fijo y apoyo abajo: así todas se apoyan en la MISMA línea de suelo
   aunque unas herramientas sean largas y otras rechonchas. */
.ab__foto{display:block;position:relative;height:calc(var(--ancho-p) * .9)}
.ab__foto img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 16px 13px var(--ab-sombra))}
.ab__suelo{position:absolute;left:50%;bottom:-7px;width:64%;height:18px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--ab-sombra),rgba(18,16,14,0) 70%)}
html[data-tema="oscuro"] .ab__suelo{
  background:radial-gradient(ellipse at center,rgba(255,255,255,.08),rgba(255,255,255,0) 70%);
}

/* El nombre puede ser un pelo más ancho que la herramienta —hasta el paso—
   porque lo que no puede es pisar al vecino. Se centra sobre la pieza. */
.ab__txt{display:block;padding-top:14px;text-align:center;
  position:relative;left:50%;transform:translateX(-50%);width:calc(var(--paso) - 6px)}
/* Cuerpo de letra proporcional a la pieza: 15,5px con las grandes y 12,6px con
   las de 120px de Handwerkzeuge. Pequeño, pero legible: lo que NO se hace es
   esconder el nombre, que es justo lo que había antes. */
.ab .ab__sub{
  font-size:clamp(11.5px,calc(var(--ancho-p) * .105),15.5px);
  font-family:var(--wk-sans) !important;font-weight:600;
  color:var(--wk-tinta) !important;text-transform:none !important;letter-spacing:0 !important;
  line-height:1.28;
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ab__n{display:block;font-family:var(--wk-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(10px,calc(var(--ancho-p) * .075),12px);
  color:var(--wk-tinta-3) !important;margin-top:4px}

/* Piezas pequeñas: condensada y más apretada, que es lo que hace que quepa un
   "Sechskantschlüssel" sin cortarlo. Aquí la letra tiene su propio tope (13,5px):
   con el clamp general, una pieza de 149px se iba a 15,6px, el nombre ocupaba
   más de lo reservado y volvía a tocar la herramienta de abajo. El 62 es ese
   alto medido; lo usa también abanico.php para elegir el reparto: si cambia
   uno, cambiar el otro. */
.ab--denso .ab__abanico{--nombre:62px}
.ab--denso .ab__sub{font-family:var(--wk-cond) !important;line-height:1.2;letter-spacing:.005em !important;
  font-size:clamp(11.5px,calc(var(--ancho-p) * .095),13.5px)}
.ab--denso .ab__txt{padding-top:10px}
.ab--denso .ab__n{margin-top:2px}

@media (hover:hover) and (pointer:fine){
  .ab__carta:hover{
    transform:translateX(calc(var(--paso) * var(--m) * (var(--porfila) - 1) / 2))
              translateY(calc(var(--curva) * var(--m) * var(--m) - var(--sep) * (var(--filas) - 1 - var(--f)) - 16px))
              rotate(calc(var(--giro) * var(--m))) scale(1.07);
    z-index:30;
  }
  .ab__carta:hover .ab__sub{color:var(--wk-rojo) !important}
}
.ab__carta:focus-visible{outline:2px solid var(--wk-rojo);outline-offset:3px;z-index:20}

/* Pantallas menos anchas: se toca SOLO --esc y con ella encogen a la vez pieza,
   paso, curva, separación y alto. El ALTO no se ajusta aquí sino en el JS, que
   mide lo que sobra de verdad y encoge lo justo. */
@media (max-width:1400px){ .ab__abanico{--esc:.92} }
@media (max-width:1200px){ .ab__abanico{--esc:.82;--giro:7deg} }

/* En pantalla estrecha el abanico no cabe: las mismas piezas, en rejilla. */
@media (max-width:1100px){
  /* 140 y no 160: en un móvil de 375px, con 160 no caben dos columnas por 5px
     y los 33 apartados se convierten en una tira de 33 filas. */
  .ab__abanico{position:static;height:auto;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px 14px}
  .ab__carta{position:static;width:auto;transform:none !important;animation:none}
  /* En rejilla el nombre vuelve a ser hijo normal: con el ancho del paso y el
     centrado por transform se saldría de su celda. Y recupera su tamaño de
     siempre, que aquí la celda es ancha aunque la pieza fuese pequeña. */
  .ab__txt{position:static;left:auto;transform:none;width:auto;padding-top:12px}
  .ab .ab__sub,.ab--denso .ab__sub{font-size:15px;font-family:var(--wk-sans) !important;line-height:1.3}
  .ab__n{font-size:12px}
  .ab__foto{height:150px}
  .ab__carta:hover{transform:translateY(-4px) !important}
}
@media (max-width:640px){
  .ab{padding:0}
  .ab__caja{max-height:100vh;height:100%;padding:20px}
  .ab .ab__titulo{font-size:24px}
  .ab__cab{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .ab__caja,.ab__carta,.ab__velo{animation:none}
  .ab__carta{transition:none}
}

/* Con el abanico abierto no se mueve el fondo. */
body.wk-ab-abierto{overflow:hidden}