/* Animacja koszyka po dodaniu produktu (html[data-kan]). Logika w assets/js/warianty-kan.js. */
 * Styl jak w motywie: tusz, kolory kafli z palety, kwadratowe rogi, twarde cienie, mono. Czerwień zostaje dla cen i promocji, więc tu jej nie ma. */

/* w wersjach 1–10 wyłączamy obecny podskok, żeby nie grały dwie animacje naraz */
html[data-kan]:not([data-kan="0"]) .czc-bump,
html[data-kan]:not([data-kan="0"]) .mn-bump,
html[data-kan]:not([data-kan="0"]) .fb-bump{animation:none!important}
html[data-kan]:not([data-kan="0"]) .czc-bump .wc-block-mini-cart__badge,
html[data-kan]:not([data-kan="0"]) .mn-bump .mn-n{background:var(--c-ink)!important;color:#fff!important}

.kan-fx{position:fixed;left:0;top:0;z-index:100000;pointer-events:none;font:500 12px/1 'IBM Plex Mono','Sometype Mono',ui-monospace,monospace}

/* błysk koszyka po doleceniu (1, 2): na chwilę kolor kafla, skokowo, bez przejść */
@keyframes kan-hit{0%,60%{background:var(--kan-c,var(--c-1));color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}100%{}}
.kan-hit{animation:kan-hit .45s steps(1,end)}

/* 1 kwadracik w kolorze kafla */
.kan-sq{border:1px solid var(--c-ink);box-sizing:border-box}

/* 2 miniatura w ramce */
.kan-img{border:1px solid var(--c-ink);background:#fff;box-sizing:border-box;overflow:hidden}
.kan-img img{width:100%;height:100%;object-fit:contain;display:block}

/* 3 bęben licznika: nakładka nad licznikiem */
.kan-drum{overflow:hidden;box-sizing:border-box}
.kan-drum span{display:flex;flex-direction:column}
.kan-drum i{font-style:normal;display:grid;place-items:center;line-height:1}

/* 4 chip +1 */
.kan-plus{background:var(--c-ink);color:#fff;padding:4px 7px;font-weight:600}

/* 5 wypełnienie */
/* bez ramki 1 px (decyzja Bartka 19.10.2026) */
.kan-fill{display:grid;place-items:center;text-transform:lowercase}

/* 6 pieczątka */
.kan-stamp{padding:5px 10px;border:2px solid var(--c-ink);background:var(--c-bg,#fff);color:var(--c-ink);text-transform:uppercase;letter-spacing:.12em;font-weight:600;box-shadow:3px 3px 0 var(--c-ink)}

/* 7 paragon spod koszyka */
.kan-slip{background:#fff;color:var(--c-ink);border:1px solid var(--c-ink);border-bottom:0;padding:10px 12px 14px;box-sizing:border-box;font-size:11px;line-height:1.4;
	-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 6px) no-repeat,conic-gradient(from -45deg at 50% 6px,#000 90deg,#0000 0) bottom/10px 6px repeat-x;
	mask:linear-gradient(#000,#000) top/100% calc(100% - 6px) no-repeat,conic-gradient(from -45deg at 50% 6px,#000 90deg,#0000 0) bottom/10px 6px repeat-x}
.kan-slip span{display:flex;gap:6px;align-items:baseline}
.kan-slip u{text-decoration:none;margin-left:auto;font-weight:600;white-space:nowrap}

/* 8 twardy cień jak kafle */
@keyframes kan-lift{0%{transform:none;box-shadow:0 0 0 var(--c-ink)}35%{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--c-ink);background:var(--kan-c,var(--c-1));color:var(--c-ink)}75%{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--c-ink);background:var(--kan-c,var(--c-1));color:var(--c-ink)}100%{transform:none;box-shadow:0 0 0 var(--c-ink)}}
.kan-lift{animation:kan-lift .5s cubic-bezier(.2,.8,.2,1)!important;position:relative;z-index:2}

/* 9 potrząśnięcie skokami */
@keyframes kan-shake{0%,100%{translate:0}12%{translate:-4px}25%{translate:4px}37%{translate:-3px}50%{translate:3px}62%{translate:-2px}75%{translate:2px}87%{translate:-1px}}
.kan-shake{animation:kan-shake .4s steps(1,end)!important}

/* 10 maszyna do pisania na koszyku */
.kan-type{left:auto;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;box-sizing:border-box;box-shadow:inset 0 0 0 1px currentColor;text-transform:lowercase}
.kan-type span{display:inline-block;overflow:hidden;white-space:nowrap;width:0;
	animation:kan-t-in calc(var(--n) * 45ms) steps(var(--n),end) .1s both,kan-t-out calc(var(--n) * 18ms) steps(var(--n),end) calc(var(--n) * 45ms + 1000ms) forwards}
.kan-type span::after{content:'';display:inline-block;width:1ch;height:1em;vertical-align:-2px;background:currentColor;margin-left:1px}
@keyframes kan-t-in{from{width:0}to{width:calc(var(--n) * 1ch + 1ch)}}
@keyframes kan-t-out{from{width:calc(var(--n) * 1ch + 1ch)}to{width:0}}