/* ============================================================
   SMAKI CHUTNEY (wzorzec: karty „Choose your weapon” na buckssauce.com; pomiar w .wayfinder/ref-smaki/)
   Ten moduł ZOSTAJE W WYGLĄDZIE SPRZED REDESIGNU: decyzja użytkownika z 4.10.2026 („w tym module wróć do starego designu”),
   reszta strony stoi na systemie z Claude Design. Arkusz jest przywrócony 1:1; zmienione tylko podpięcie pod obecne tokeny (niżej).
   Spec: .wayfinder/MAP.md D150-D158 i D175. Treść rysuje assets/smaki.js.
   Z wzorca: ozdoba 20%, nagłówek w dwóch wierszach (drugi konturem, na całą szerokość), 48 px do kart, karty co 10 px,
   wysokość 580 px, odstępy 34 / 56 / 61, ramka przerywana 10 px od krawędzi, słoik pochylony o 3 stopnie, owoc za słoikiem,
   cień pod słoikiem, dwa przyciski 50 px na dole. Stan aktywny (najechanie, fokus, na dotyku środek ekranu w karcie):
   tytuł 60%, słoik 85% i 72 px w górę, zza słoika wyskakuje gwiazda i drugi owoc, wjeżdżają przyciski.
   Od DAI TO SE: fonty, proste rogi, kolory kafli smaków, gwiazda zamiast poroża.
   Stan aktywny to jedna zmienna --on (0 albo 1); wszystkie przekształcenia liczą się z niej. Ruch: tylko transform i opacity.
   ============================================================ */
/* stare nazwy tokenów i baza tekstu sprzed redesignu, ważne tylko w tym module */
.sm { --druk: var(--f-druk); --mono: var(--f-mono); --bg: var(--krem); --fg: var(--tusz); font-size: 14px; line-height: 1.5; }
.sm__btn:focus-visible { box-shadow: none; } /* fokus jak dawniej: sam obrys w kolorze tekstu karty, bez kremowego pierścienia z systemu */
/* --sm-h: wysokość liter drugiego wiersza nagłówka. „CHUTNEY” w Druk Wide ma 6,713 em szerokości i ma wypełnić okno (40 px zapasu = odstępy sekcji + pasek przewijania) */
.sm { padding: 72px 10px 100px; font-family: var(--mono); color: var(--fg); text-transform: none; --sm-h: calc((100vw - 40px) / 6.75); }
/* taśma z rysunkami produktów (18.10, w miejscu ozdoby; ten sam pas co dawniej 120 + 56 + 120 px): płynie w pętli samym CSS, każdy rysunek
   kołysze się we własnym rytmie jak ikona za słoikiem w module produktu (pd-unos / pd-kolys), po najechaniu podskakuje i bierze kolor smaku */
.sm__tasma { --ik: 112px; --odst: 72px; margin: 0 -10px; padding: 16px 0; overflow-x: clip; } /* clip, nie hidden: podskok rysunku może wyjść w pionie poza pas */
.sm__tor { display: flex; width: max-content; }
.sm__ik { position: relative; flex: none; height: var(--ik); aspect-ratio: var(--ar); margin-right: var(--odst); background: var(--tusz); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; transition: transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.sm__ik::after { content: ""; position: absolute; inset: 0; background: var(--k); opacity: 0; transition: opacity 240ms ease-out; } /* kolor smaku: druga warstwa pod tą samą maską, zmienia się tylko jej krycie */
@media (hover: hover) {
  .sm__tasma:hover .sm__tor { animation-play-state: paused; } /* taśma staje pod kursorem, żeby dało się trafić w rysunek */
  .sm__ik:hover { transform: translateY(-14px) scale(1.12); }
  .sm__ik:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .sm__tor { animation: sm-tasma 40s linear infinite; }
  .sm__ik { animation: pd-unos calc(3s + var(--i) * .23s) ease-in-out calc(var(--i) * -.7s) infinite alternate, pd-kolys calc(4.2s + var(--i) * .31s) ease-in-out calc(var(--i) * -1.1s) infinite alternate; }
}
@keyframes sm-tasma { to { transform: translateX(calc(-100% / 3)); } } /* trzy kopie zestawu: po jednej trzeciej taśma wygląda tak samo jak na starcie */
@keyframes pd-unos { from { translate: -2% 6%; } to { translate: 2% -6%; } } /* te same co w produkt.css, żeby moduł nie zależał od kolejności arkuszy */
@keyframes pd-kolys { from { rotate: -3deg; } to { rotate: 4deg; } }
.sm__h { margin-top: 72px; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--druk); font-weight: 500; line-height: .8; text-transform: uppercase; white-space: nowrap; }
/* pierwszy wiersz ma 0,324 wysokości drugiego (140 / 432 u wzorca) */
.sm__h b { font-weight: 500; font-size: var(--sm-h); color: var(--bg); -webkit-text-stroke: 2px var(--fg); }
.sm__h span { font-size: calc(var(--sm-h) * .324); }
.sm__grid { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.sm__card { --on: 0; --pe: none; --play: paused; --dur: .3s; --ease: cubic-bezier(.55, 0, 1, .45); /* spoczynek; zejście krótko i bez odbicia */
  --jw: min(330px, 71cqi); /* szerokość słoika: 71% wnętrza karty (ok. 65% całej), najwyżej 330 px */
  container-type: inline-size; position: relative; height: clamp(480px, 40.3vw, 580px); padding: 34px 20px 0; overflow: hidden; background: var(--sm-bg); color: var(--sm-fg); }
/* aktywna: klasa is-on (dotyk), fokus z klawiatury w karcie albo najechanie. Fokus tylko widoczny (:focus-visible): po zamknięciu koszyka fokus wraca na „do koszyka”
   i przy zwykłym :focus-within karta zostawałaby aktywna po odjechaniu kursorem. Wejście z odbiciem jak u wzorca */
.sm__card:is(.is-on, :has(:focus-visible)) { --on: 1; --pe: auto; --play: running; --dur: .6s; --ease: cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) { .sm__card:hover { --on: 1; --pe: auto; --play: running; --dur: .6s; --ease: cubic-bezier(.34, 1.56, .64, 1); } }
.sm__card::before { content: ""; position: absolute; inset: 10px; border: 1px dashed currentColor; opacity: .3; }
.sm__cover { position: absolute; inset: 0; z-index: 1; } /* cała karta prowadzi do produktu, jak u wzorca; leży nad tytułem i sceną */
.sm__cover:active { background: currentColor; opacity: .08; }
.sm__title { margin: 0 auto; max-width: 13.3em; text-align: center; font-family: var(--druk); font-weight: 500; font-size: min(28px, 6.6cqi); line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; /* 13,3 em: najdłuższe słowo ma 12,85 em, najkrótszy cały tytuł 13,78 em, więc zawsze 2 wiersze; interlinia 1,12 (wzorzec 0,9), bo kreski nad Ś i Ć dotykały liter wyżej */
  transform-origin: 50% 0; transform: scale(calc(1 - .4 * var(--on))); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }

/* scena: słoik stoi 61 px nad dolną krawędzią karty; reszta ustawia się względem niego */
.sm__stage { position: absolute; left: 50%; bottom: 61px; width: var(--jw); margin-left: calc(var(--jw) / -2); aspect-ratio: 1.2;
  transform: translateY(calc(-72px * var(--on))) scale(calc(1 - .151 * var(--on))); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.sm__jar { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: rotate(3deg); }
.sm__shadow { position: absolute; z-index: 0; left: -2.7%; right: -2.7%; bottom: -10px; height: 30px; background: linear-gradient(to right, rgba(19, 19, 19, .7) 25%, rgba(19, 19, 19, .35)); filter: blur(24px); }
/* klaks wystaje tylko nad wieczko: jest niewiele szerszy od słoika, więc po bokach nie zostają pojedyncze ząbki */
.sm__star { position: absolute; z-index: 1; left: -2%; top: -50%; width: 104%; color: #F6EFE4; transform-origin: 50% 70%; transform: scale(var(--on)) rotate(calc(-12deg * (1 - var(--on)))); transition: transform var(--dur) var(--ease); }
.sm__fruit { position: absolute; display: block; transition: transform var(--dur) var(--ease); }
.sm__fruit img { display: block; width: 100%; animation: smFloat 5s ease-in-out infinite; animation-play-state: var(--play); } /* owoce unoszą się tylko w aktywnej karcie */
.sm__fruit--tyl { z-index: 1; right: -16%; top: -30%; width: 46%; transform: rotate(3deg); } /* widać go zawsze, wystaje zza słoika w prawo */
.sm__fruit--przod { z-index: 3; left: -15%; bottom: -5%; width: 44%; transform-origin: 100% 100%; transform: scale(var(--on)); }
.sm__fruit--przod img { animation-delay: -2.5s; }
@keyframes smFloat { 50% { transform: translateY(-5px) rotate(-2deg); } }

/* przyciski: 20 px od krawędzi karty, 50 px wysokości, 10 px odstępu; drugi wjeżdża 60 ms po pierwszym */
.sm__btns { position: absolute; z-index: 10; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 10px; pointer-events: none; } /* w spoczynku kliknięcia w ten pas idą do linku karty */
.sm__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; padding: 0 20px; border: 2px solid var(--sm-fg); background: none; color: var(--sm-fg); font-family: var(--druk); font-size: 12px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  opacity: var(--on); transform: translateY(calc(25px * (1 - var(--on)))); transition: opacity .35s ease-out, transform .35s cubic-bezier(.22, 1, .36, 1); pointer-events: var(--pe);
  scroll-margin: 40px 0 16px; } /* fokus z klawiatury: przeglądarka ustawia przycisk w spoczynku (25 px niżej), a on zaraz wjeżdża w górę; zapas trzyma go pod paskiem nagłówka */
.sm__btn + .sm__btn { transition-delay: 60ms; }
.sm__btn--add { border-color: #F6EFE4; background: #F6EFE4; color: #131313; }
.sm__btn > span:last-child { font-family: var(--mono); font-size: 14px; text-transform: none; }
.sm__btn svg { flex: none; width: 18px; height: 18px; }

/* stany */
.sm__btn:focus-visible { outline: 2px solid var(--sm-fg); outline-offset: 3px; }
@media (hover: hover) {
  .sm__btn--add:hover { background: #131313; border-color: #131313; color: #F6EFE4; }
  .sm__btn--see:hover { background: var(--sm-fg); color: var(--sm-bg); }
}
.sm__btn:active { transform: scale(.97); transition-duration: .1s; transition-delay: 0s; }

/* do 1024 px karty jedna pod drugą, jak u wzorca */
@media (max-width: 1024px) {
  .sm { padding: 40px 5px 60px; --sm-h: calc((100vw - 14px) / 6.75); } /* telefon nie ma paska przewijania, odstępy sekcji 5 px */
  .sm__tasma { --ik: 72px; --odst: 40px; margin: 0 -5px; padding: 12px 0; }
  .sm__tor { animation-duration: 24s; } /* krótszy zestaw, ta sama prędkość co na komputerze (ok. 36 px/s) */
  .sm__h { margin-top: 40px; gap: 6px; } /* przy małych literach wiersze nagłówka prawie się stykały */
  .sm__h span { font-size: calc(var(--sm-h) * .5); }
  .sm__grid { grid-template-columns: minmax(0, 1fr); }
  .sm__card { height: 500px; } /* wzorzec ma 558 px, ale jego butelka jest wysoka; nasz słoik jest niski */
}
@media (prefers-reduced-motion: reduce) { .sm__title, .sm__stage, .sm__star, .sm__fruit, .sm__btn { transition: none; } .sm__fruit img { animation: none; } }