/* ===========================================================
   Klocek: WW — Trzy tekstury
   Wycięte z ww-styles.css (linie 342–406) + kilka dopisków.
   Wszystkie dopiski oznaczone komentarzem NOWE.
   =========================================================== */

.types { background: var(--surface); overflow: hidden; }

.types__stage {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-bottom: 40px;
}

.types__display { position: relative; min-height: 460px; display: grid; place-items: center; }

.types__halo {
  position: absolute;
  width: 440px; height: 440px; max-width: 100%;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .8;
  /* NOWE: tło przeniesione z atrybutu style w makiecie do arkusza. */
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 28%, transparent), transparent 65%);
}

.types__meat {
  position: absolute; max-height: 460px; width: auto; max-width: 90%;
  filter: drop-shadow(0 30px 36px rgba(40,25,15,.4));
  opacity: 0; transform: scale(.94) translateY(12px) rotate(-3deg);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.types__meat.active {
  opacity: 1; transform: none;
  animation: meatSway 7s ease-in-out infinite;
  pointer-events: auto;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ctext x='3' y='36' font-size='36'%3E🤩%3C/text%3E%3C/svg%3E") 23 23, auto;
}
@keyframes meatSway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2.5deg) translateY(-12px); }
}

.types__index {
  position: absolute; top: 4px; left: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(48px, 6vw, 84px);
  color: color-mix(in oklab, var(--accent) 22%, transparent);
  line-height: 1;
  letter-spacing: var(--display-spacing);
}
/* NOWE: w makiecie reguła brzmiała ".types__index span" i łapała obie części.
   Teraz cyfra ma własną klasę, żeby JS mógł ją podmienić bez psucia rozmiaru. */
.types__index-total { font-size: 0.4em; opacity: .7; }

.types__info {
  background: color-mix(in oklab, var(--accent-2) 20%, white);
  border: 1.5px solid var(--accent-2);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 42px);
}

/* NOWE: opisy wszystkich rodzajów siedzą w kodzie strony, widoczny jest jeden.
   Ukrycie przez display:none, a nie visibility — dzięki temu przy pokazaniu
   panelu animacja nazwy (typeName) startuje od nowa, tak jak w makiecie. */
.ww-types__panel { display: none; }
.ww-types__panel.active { display: block; }

.types__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}

.types__name {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.96;
  margin: 14px 0 0;
  animation: typeName .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes typeName {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.types__desc {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 18px 0 28px;
}

.types__meter { max-width: 460px; }
.types__meter-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 9px;
}
.types__meter-track {
  position: relative; height: 10px;
  border-radius: 999px; background: var(--line);
  overflow: visible;
}
.types__meter-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 45%, var(--accent-2)), var(--accent));
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.types__meter-dot {
  position: absolute; top: 50%;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface);
  box-shadow: 0 4px 10px rgba(40,25,15,.35);
  transform: translate(-50%, -50%);
  transition: left .55s cubic-bezier(.2,.8,.2,1);
}
.types__bite { margin-top: 14px; font-weight: 700; font-size: 15px; color: var(--ink); }

/* Kropelki — wariant dla tej sekcji. Reguły bazowe .soft / .soft__drops
   zostają w pliku globalnym, bo używa ich też karta produktu. */
.soft--types { margin-top: 18px; gap: 12px; }
.soft--types .soft__drops i { width: 12px; height: 12px; }
.soft--types .soft__drops::after { height: 12px; }
.soft--types .soft__label { font-size: 13px; color: var(--ink); }
.soft--types .soft__drops { contain: paint; transform: translateZ(0); backface-visibility: hidden; }

/* Kafelki. NOWE: liczba kolumn brana ze zmiennej ustawionej w PHP,
   żeby czwarty rodzaj dodany przez klienta nie rozwalił siatki. */
.types__tabs {
  display: grid;
  grid-template-columns: repeat(var(--ww-cols, 3), 1fr);
  gap: 14px;
}
.types__tab {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
[data-dir="c"] .types__tab { border-radius: 8px; }
.types__tab:hover { transform: translateY(-3px); }
.types__tab.active {
  border-color: var(--accent-2);
  box-shadow: 0 14px 30px -20px rgba(40,25,15,.5);
  background: color-mix(in oklab, var(--accent-2) 20%, white);
}
.types__tab-thumb { width: 46px; height: 56px; flex: none; display: grid; place-items: center; }
.types__tab-thumb img {
  max-height: 56px; max-width: 100%; width: auto;
  filter: drop-shadow(0 4px 6px rgba(40,25,15,.3));
  transition: transform .25s;
}
.types__tab.active .types__tab-thumb img { transform: scale(1.08) rotate(-3deg); }
.types__tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.types__tab-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 18px;
  text-transform: var(--display-transform);
  letter-spacing: var(--display-spacing);
  white-space: nowrap;
  color: var(--ink);
}
.types__tab-tag { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

@media (max-width: 860px) {
  .types__stage { grid-template-columns: 1fr; gap: 20px; }
  .types__display { min-height: 320px; }
  .types__meat, .types__halo { max-height: 320px; }
  .types__halo { width: 300px; height: 300px; }
  .types__tabs { grid-template-columns: 1fr; }
}

/* NOWE: szacunek dla ustawienia "ogranicz animacje" w systemie. */
@media (prefers-reduced-motion: reduce) {
  .types__meat.active { animation: none; }
  .types__name { animation: none; }
  .types__meter-fill, .types__meter-dot { transition: none; }
}