/* Lokamo :: kafle "Co dostajesz" (v4, zadanie E). Szesc duzych kafli, kazdy = jedna mini-scena
   z prawdziwego elementu produktu i jeden podpis w lewym dolnym rogu.
   Tla: ten sam system co panel hero (kobalt + rozswietlenie + statyczne ziarno), na zmiane
   z jasnymi i jednym grafitowym. Ruch: petle CSS tylko transform/opacity (pisanie: clip-path),
   graja tylko w widoku (.is-gra z kafle.js), wejscie kafla raz (.is-w).
   prefers-reduced-motion: stan koncowy scen, bez ruchu. */

.kl{padding:104px 0 40px}
.kl__head{max-width:760px;margin-bottom:40px}
.kl__head h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.04em;line-height:1.05;margin:0;text-wrap:balance}
.kl__siatka{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kl__dop{margin:16px 0 0;font-size:13.5px;color:var(--steel,#626268)}

.kl__k{--kl-ink:#0D0D0F;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--bx-r,32px);color:var(--kl-ink)}
.kl__k::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("/assets/v4/ziarno-ciemne.svg") 0 0/180px 180px;opacity:.05}
.kl__sc{flex:1;display:grid;place-items:center;padding:16px 0 30px;transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.kl__k:hover .kl__sc{transform:scale(1.02)}}
.kl__p{margin:0;max-width:17em;font-size:23px;line-height:1.22;font-weight:600;letter-spacing:-.025em;text-wrap:balance}

/* Tla: tokeny z system.css (jedna rodzina dla calej strony) */
.kl__k--kobalt{--kl-ink:#fff;background:var(--bx-kobalt);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.kl__k--kobalt2{background:
    radial-gradient(70% 80% at 6% 0%,rgba(186,202,255,.55),rgba(186,202,255,0) 62%),
    radial-gradient(60% 70% at 100% 100%,rgba(9,18,120,.5),rgba(9,18,120,0) 70%),
    linear-gradient(256deg,#1D36DC 0%,#2B47F7 50%,#4462FF 100%)}
.kl__k--kobalt::after,.kl__k--grafit::after{background-image:url("/assets/v4/ziarno.svg");opacity:.26;mix-blend-mode:soft-light}
.kl__k--jasne{background:var(--bx-jasny);box-shadow:inset 0 0 0 .5px rgba(13,13,15,.06)}
.kl__k--krem{background:var(--bx-krem);box-shadow:inset 0 0 0 .5px rgba(120,80,30,.08)}
.kl__k--mgla{background:var(--bx-mgla);box-shadow:inset 0 0 0 .5px rgba(46,75,255,.08)}
.kl__k--grafit{--kl-ink:#fff;background:var(--bx-granat)}

/* Wejscie kafla (raz, przy przewinieciu) */
/* (wejscie: system.css, [data-kl]) */

/* Wspolne elementy scen */
.kl__sc :where(p,ul){margin:0;padding:0;list-style:none}
.kl__sc img{display:block;width:100%;height:100%;object-fit:cover}
.kl-logo{position:relative;display:block;width:40px;height:40px;border-radius:11px;overflow:hidden;flex:none;background:#EDEEF2}
.kl-logo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px rgba(13,13,15,.14)}
.kl-karta{background:#fff;border-radius:20px;box-shadow:0 0 0 .5px rgba(13,13,15,.08),0 2px 4px rgba(16,24,40,.05),0 24px 48px -24px rgba(16,24,40,.35)}
.kl__sc [class*="kl-"] :where(b){font-weight:600}
.kl__sc small{display:block}
.kl__k{--kl-a:paused}
.kl__k.is-gra{--kl-a:running}

/* 1. Google: pisanie frazy i wynik z Twoim lokalem */
.kl-g{width:min(420px,100%);display:grid;gap:12px;text-align:left}
.kl-g__pole{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:99px;background:#fff;color:#0D0D0F;font-size:17px;font-weight:500;box-shadow:0 20px 40px -20px rgba(4,9,58,.55)}
.kl-g__pole svg{width:19px;height:19px;flex:none;fill:none;stroke:#45454B;stroke-width:2.2;stroke-linecap:round}
.kl-g__tekst{position:relative;white-space:nowrap}
.kl-g__tekst span{display:inline-block;clip-path:inset(0 0 0 0);animation:kl-pisz 8s steps(24,end) infinite var(--kl-a)}
.kl-g__tekst::after{content:"";position:absolute;right:-3px;top:2px;bottom:2px;width:1.5px;background:#2E4BFF;animation:kl-kursor 8s linear infinite var(--kl-a)}
@keyframes kl-pisz{0%,4%{clip-path:inset(0 100% 0 0)}26%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes kl-kursor{0%,26%{opacity:1}27%,100%{opacity:0}}
.kl-g__lista{display:grid;gap:8px}
.kl-g__w{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);animation:kl-wiersz 8s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
.kl-g__w:nth-child(2){animation-delay:.12s}.kl-g__w:nth-child(3){animation-delay:.24s}
@keyframes kl-wiersz{0%,28%{opacity:0;transform:translate3d(0,12px,0)}36%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.kl-g__w--ty{background:#fff;color:#0D0D0F;box-shadow:0 0 0 .5px rgba(13,13,15,.06),0 18px 36px -18px rgba(4,9,58,.6)}
.kl-g__w--ty b{display:block;font-size:15.5px;letter-spacing:-.015em}
.kl-g__w--ty small{font-size:13px;color:#626268}
.kl-gw{font-style:normal;color:#F5A524;letter-spacing:.02em}
.kl-g__w--ty em{font-style:normal;padding:8px 12px;border-radius:99px;background:#2E4BFF;color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.kl-szk{display:block;border-radius:10px;background:rgba(255,255,255,.28)}
.kl-g__w>.kl-szk{width:40px;height:40px;border-radius:11px}
.kl-szk--l{width:70%;height:9px;margin-bottom:8px}
.kl-szk--s{width:45%;height:8px;opacity:.7}

/* 2. Zamowienia: karta dania, plus, koszyk bez prowizji */
.kl-z{position:relative;width:min(400px,100%);display:grid;gap:14px;justify-items:center}
.kl-z__karta{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:16px;width:100%;padding:12px 16px 12px 12px;text-align:left;background:#fff;border-radius:22px;box-shadow:0 0 0 .5px rgba(13,13,15,.07),0 2px 4px rgba(16,24,40,.05),0 28px 56px -28px rgba(16,24,40,.4)}
.kl-z__fot{position:relative;width:96px;height:96px;border-radius:16px;overflow:hidden}
.kl-z__fot i{position:absolute;left:6px;top:6px;padding:3px 7px;border-radius:99px;background:#fff;color:#1D33C9;font-style:normal;font-size:11px;font-weight:650}
.kl-z__t b{display:block;font-size:18px;letter-spacing:-.02em}
.kl-z__t small{margin-top:2px;font-size:13.5px;color:#626268;line-height:1.35}
.kl-z__t em{display:block;margin-top:8px;font-style:normal;font-size:15px;font-weight:600;font-feature-settings:"tnum"}
.kl-z__plus{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0D0D0F;color:#fff;animation:kl-wcisk 7s cubic-bezier(.3,1.4,.5,1) infinite var(--kl-a)}
.kl-z__plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@keyframes kl-wcisk{0%,24%{transform:none}27%{transform:scale(.86)}32%,100%{transform:none}}
.kl-z__kosz{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 10px;border-radius:99px;background:#0D0D0F;color:#fff;font-size:15px;box-shadow:0 18px 36px -18px rgba(16,24,40,.6);animation:kl-kosz 7s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
@keyframes kl-kosz{0%,28%{opacity:0;transform:translate3d(0,14px,0) scale(.96)}36%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.kl-z__ile{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2E4BFF;font-size:13px;font-weight:700;animation:kl-pyk 7s cubic-bezier(.3,1.5,.5,1) infinite var(--kl-a)}
@keyframes kl-pyk{0%,31%{transform:scale(.4)}37%,100%{transform:none}}
.kl-z__kosz b{font-weight:600;font-feature-settings:"tnum"}
.kl-z__kosz i{margin-left:4px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.12);font-style:normal;font-size:13px;font-weight:600;color:#B9C6FF}

/* 3. Menu w jezykach: ta sama karta, zmieniajacy sie jezyk */
.kl-m{width:min(420px,100%);display:grid;gap:16px;text-align:left}
.kl-m__jez{display:flex;gap:6px;justify-content:center}
.kl-m__jez span{position:relative;display:grid;place-items:center;min-width:44px;height:34px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.7);color:#45454B;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 .5px rgba(13,13,15,.08);isolation:isolate}
.kl-m__jez span::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#0D0D0F;opacity:0}
.kl-m__jez span:nth-child(-n+5){animation:kl-chip-t 10s linear infinite var(--kl-a)}
.kl-m__jez span:nth-child(-n+5)::before{animation:kl-chip 10s linear infinite var(--kl-a)}
.kl-m__jez span:nth-child(2),.kl-m__jez span:nth-child(2)::before{animation-delay:2s}
.kl-m__jez span:nth-child(3),.kl-m__jez span:nth-child(3)::before{animation-delay:4s}
.kl-m__jez span:nth-child(4),.kl-m__jez span:nth-child(4)::before{animation-delay:6s}
.kl-m__jez span:nth-child(5),.kl-m__jez span:nth-child(5)::before{animation-delay:8s}
@keyframes kl-chip{0%,1%{opacity:0}3%,19%{opacity:1}21%,100%{opacity:0}}
@keyframes kl-chip-t{0%,1%{color:#45454B}3%,19%{color:#fff}21%,100%{color:#45454B}}
.kl-m__karta{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;padding:12px 18px 12px 12px;border-radius:22px;background:#fff;box-shadow:0 0 0 .5px rgba(13,13,15,.07),0 2px 4px rgba(16,24,40,.05),0 28px 56px -28px rgba(30,50,160,.35)}
.kl-m__fot{width:112px;height:112px;border-radius:16px;overflow:hidden}
.kl-m__t{display:grid}
.kl-m__wer{grid-area:1/1;opacity:0;animation:kl-jez 10s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
.kl-m__wer:nth-child(2){animation-delay:2s}.kl-m__wer:nth-child(3){animation-delay:4s}.kl-m__wer:nth-child(4){animation-delay:6s}.kl-m__wer:nth-child(5){animation-delay:8s}
@keyframes kl-jez{0%{opacity:0;transform:translate3d(0,8px,0)}4%,18%{opacity:1;transform:none}22%,100%{opacity:0;transform:translate3d(0,-6px,0)}}
.kl-m__wer b{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.25}
.kl-m__wer small{margin-top:4px;font-size:13.5px;color:#626268;line-height:1.4}

/* 4. Telefon LokamoAI: rozmowa, fala glosu, zamowienie w panelu */
.kl-t{width:min(420px,100%);display:grid;gap:10px;text-align:left}
.kl-t__rozm{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.kl-t__av{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#2E4BFF;color:#fff}
.kl-t__av svg{width:18px;height:18px}
.kl-t__av::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(120,145,255,.6);animation:kl-puls 1.8s ease-out infinite var(--kl-a)}
@keyframes kl-puls{from{transform:scale(.85);opacity:1}to{transform:scale(1.25);opacity:0}}
.kl-t__rozm b{display:block;font-size:15.5px}
.kl-t__rozm small{font-size:13px;color:rgba(255,255,255,.62)}
.kl-t__fala{display:flex;align-items:center;gap:3px;height:28px}
.kl-t__fala i{width:3px;height:100%;border-radius:2px;background:#8FA0FF;transform:scaleY(.3);animation:kl-fala 1.1s ease-in-out infinite alternate var(--kl-a)}
.kl-t__fala i:nth-child(2){animation-delay:-.2s}.kl-t__fala i:nth-child(3){animation-delay:-.5s}.kl-t__fala i:nth-child(4){animation-delay:-.1s}.kl-t__fala i:nth-child(5){animation-delay:-.7s}.kl-t__fala i:nth-child(6){animation-delay:-.35s}.kl-t__fala i:nth-child(7){animation-delay:-.6s}
@keyframes kl-fala{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.kl-t__d{max-width:82%;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.35;animation:kl-dymek 9s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
.kl-t__d--gosc{justify-self:start;border-bottom-left-radius:6px;background:#2A2A31;color:#fff}
.kl-t__d--ai{justify-self:end;border-bottom-right-radius:6px;background:#2E4BFF;color:#fff;animation-delay:1.6s}
@keyframes kl-dymek{0%,8%{opacity:0;transform:translate3d(0,10px,0) scale(.97)}14%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.kl-t__ok{display:flex;align-items:center;gap:10px;justify-self:center;margin-top:6px!important;padding:9px 14px 9px 10px;border-radius:99px;background:rgba(48,164,108,.16);color:#9BE3BE;font-size:14px;font-weight:600;animation:kl-dymek 9s cubic-bezier(.16,1,.3,1) infinite var(--kl-a);animation-delay:3.4s}
.kl-t__ok i{position:relative;width:20px;height:20px;border-radius:50%;background:#30A46C}
.kl-t__ok i::after{content:"";position:absolute;left:6px;top:5px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* 5. Opinie: gwiazdki wypelniaja sie, naklejka ze stolika */
.kl-o{position:relative;width:min(400px,100%);display:grid;gap:14px;text-align:left}
.kl-o__karta{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:18px 20px 20px;border-radius:22px;background:#fff;box-shadow:0 0 0 .5px rgba(13,13,15,.07),0 2px 4px rgba(16,24,40,.05),0 28px 56px -28px rgba(16,24,40,.4)}
.kl-o__av{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E8EDFF;color:#1D33C9;font-weight:700;font-size:17px}
.kl-o__t b{display:block;font-size:16px}
.kl-o__t small{font-size:13px;color:#626268}
.kl-o__gw{grid-column:2;display:flex;gap:3px}
.kl-o__gw i{width:18px;height:18px;background:#F5A524;clip-path:polygon(50% 0,61.8% 35.3%,100% 38.2%,69.1% 61.8%,80.9% 100%,50% 76.4%,19.1% 100%,30.9% 61.8%,0 38.2%,38.2% 35.3%);animation:kl-gw 7s cubic-bezier(.3,1.5,.5,1) infinite var(--kl-a)}
.kl-o__gw i:nth-child(2){animation-delay:.12s}.kl-o__gw i:nth-child(3){animation-delay:.24s}.kl-o__gw i:nth-child(4){animation-delay:.36s}.kl-o__gw i:nth-child(5){animation-delay:.48s}
@keyframes kl-gw{0%,10%{transform:scale(0)}16%,100%{transform:none}}
.kl-o__karta p{grid-column:1/-1;margin-top:10px!important;font-size:16px;line-height:1.45;color:#2B2B30;animation:kl-tekst 7s ease infinite var(--kl-a)}
@keyframes kl-tekst{0%,22%{opacity:0}30%,100%{opacity:1}}
.kl-o__nakl{justify-self:start;display:flex;align-items:center;gap:12px;margin-left:-6px;padding:10px 16px 10px 10px;border-radius:18px;background:#0D0D0F;color:#fff;transform:rotate(-2.5deg);box-shadow:0 18px 36px -18px rgba(16,24,40,.6)}
.kl-o__qr{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:40px;height:40px;padding:5px;border-radius:9px;background:#fff}
.kl-o__qr i{border-radius:2px;background:#0D0D0F;box-shadow:inset 0 0 0 2px #0D0D0F,inset 0 0 0 4px #fff}
.kl-o__qr i:nth-child(4){background:repeating-linear-gradient(90deg,#0D0D0F 0 2px,#fff 2px 4px);box-shadow:none}
.kl-o__nakl b{display:block;font-size:14.5px}
.kl-o__nakl small{font-size:12.5px;color:rgba(255,255,255,.65)}

/* 6. Panel: nowe zamowienie wsuwa sie na gore listy */
.kl-p{width:min(420px,100%);padding:16px 14px 10px;border-radius:24px;background:#fff;color:#0D0D0F;text-align:left;box-shadow:0 0 0 .5px rgba(13,13,15,.06),0 30px 60px -30px rgba(4,9,58,.65)}
.kl-p__gl{display:flex;align-items:center;justify-content:space-between;padding:0 6px 12px}
.kl-p__gl b{font-size:17px;letter-spacing:-.02em}
.kl-p__gl span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#1F7A4D}
.kl-p__gl span i{width:8px;height:8px;border-radius:50%;background:#30A46C;box-shadow:0 0 0 3px rgba(48,164,108,.18)}
.kl-p ul{display:grid;gap:6px;animation:kl-lista 8s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
@keyframes kl-lista{0%,20%{transform:translate3d(0,-70px,0)}30%,100%{transform:none}}
.kl-p__w{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;min-height:64px;padding:10px 10px;border-radius:16px;background:#F5F6F9}
.kl-p__w b{display:block;font-size:15px;letter-spacing:-.01em}
.kl-p__w small{font-size:13px;color:#626268}
.kl-p__w em{font-style:normal;padding:5px 10px;border-radius:99px;font-size:12.5px;font-weight:650;background:#E9F7EF;color:#1F7A4D}
.kl-p__w:nth-child(2) em{background:#FFF4DB;color:#8A5200}
.kl-p__w--nowe{background:#EEF1FF;box-shadow:inset 0 0 0 .5px rgba(46,75,255,.3);animation:kl-nowe 8s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
.kl-p__w--nowe em{background:#2E4BFF;color:#fff}
@keyframes kl-nowe{0%,22%{opacity:0;transform:scale(.96)}32%,100%{opacity:1;transform:none}}
.kl-p__ik{position:relative;width:38px;height:38px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 .5px rgba(13,13,15,.1)}
.kl-p__ik::before{content:"";position:absolute;inset:11px;border-radius:3px;background:#45454B;-webkit-mask:var(--ik) center/contain no-repeat;mask:var(--ik) center/contain no-repeat}
.kl-p__ik--tel{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.kl-p__ik--www{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E")}
.kl-p__ik--qr{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zm2 2v4h4V5zm8-2h8v8h-8zm2 2v4h4V5zM3 13h8v8H3zm2 2v4h4v-4zm8-2h2v2h-2zm4 0h4v2h-4zm-4 4h2v4h-2zm4 0h2v2h2v4h-4z'/%3E%3C/svg%3E")}

@media (max-width:960px){

}
@media (max-width:560px){
  .kl__sc{padding:14px 0 24px}
  .kl__p{font-size:20px}
  .kl-z__karta{grid-template-columns:76px 1fr 40px;gap:12px}
  .kl-z__fot{width:76px;height:76px}
  .kl-m__karta{grid-template-columns:84px 1fr}
  .kl-m__fot{width:84px;height:84px}
  .kl-m__jez{flex-wrap:wrap}
  .kl-g__w--ty em{display:none}
  .kl-g__pole{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .kl__sc *,.kl__sc *::before,.kl__sc *::after{animation:none!important}
  .kl__k:hover .kl__sc{transform:none}
  .kl-m__wer:not(:first-child){display:none}
  .kl-m__wer:first-child{opacity:1}
  .kl-m__jez span:first-child{color:#fff}
  .kl-m__jez span:first-child::before{opacity:1}
}

/* H7: realizm kafli. Zadnych pustych pol w zadnej klatce petli: tresc stoi zawsze,
   ruch dotyczy tylko nowego elementu (wchodzi, a stary ustepuje). */
/* 1. Wyszukiwanie: kafel mapy z pinezkami, prawdziwe wiersze wynikow */
.kl-g__mapa{position:relative;height:104px;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),0 18px 36px -22px rgba(4,9,58,.7)}
.kl-g__mapa>img{width:100%;height:100%;object-fit:cover}
.kl-g__pin{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 0;background:#8E8E96;box-shadow:0 2px 4px rgba(13,13,15,.35);transform:rotate(-45deg);animation:kl-pin 8s cubic-bezier(.3,1.5,.5,1) infinite var(--kl-a)}
.kl-g__pin:nth-of-type(2){animation-delay:.1s}.kl-g__pin:nth-of-type(3){animation-delay:.2s}
.kl-g__pin--ty{width:34px;height:34px;margin:-36px 0 0 -17px;padding:3px;background:#2E4BFF;box-shadow:0 0 0 3px #fff,0 8px 16px -4px rgba(4,9,58,.6);animation-name:kl-pin-ty}
.kl-g__pin--ty img{border-radius:50%;transform:rotate(45deg);background:#fff}
@keyframes kl-pin{0%,26%{opacity:0;transform:rotate(-45deg) translate3d(6px,-6px,0)}32%,94%{opacity:1;transform:rotate(-45deg)}100%{opacity:0;transform:rotate(-45deg)}}
@keyframes kl-pin-ty{0%,28%{opacity:0;transform:rotate(-45deg) translate3d(10px,-10px,0) scale(.6)}36%,94%{opacity:1;transform:rotate(-45deg)}100%{opacity:0;transform:rotate(-45deg)}}
.kl-g__w{animation-name:kl-wiersz2}
@keyframes kl-wiersz2{0%,4%{opacity:1;transform:none}10%,28%{opacity:.35;transform:translate3d(0,4px,0)}36%,100%{opacity:1;transform:none}}
.kl-g__w:not(.kl-g__w--ty){background:rgba(255,255,255,.14);color:#fff}
.kl-g__w:not(.kl-g__w--ty) b{display:block;font-size:15px}
.kl-g__w:not(.kl-g__w--ty) small{font-size:12.5px;color:rgba(255,255,255,.72)}
.kl-gw--off{color:rgba(255,255,255,.35)}
.kl-logo{display:block;width:40px;height:40px;border-radius:12px;overflow:hidden;background:#fff}
/* 2. Zamowienia: adres strony lokalu i druga pozycja */
.kl-z{gap:10px}
.kl-z__url{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 .5px rgba(120,80,30,.14);font-size:13px;font-weight:550;color:#45454B}
.kl-z__url svg{width:13px;height:13px;fill:none;stroke:#1F7A4D;stroke-width:2}
.kl-z__karta--2{opacity:.92;transform:scale(.97);box-shadow:0 0 0 .5px rgba(13,13,15,.07),0 14px 28px -20px rgba(16,24,40,.35)}
.kl-z__karta--2 .kl-z__fot{width:72px;height:72px;border-radius:14px}
.kl-z__karta--2{grid-template-columns:72px 1fr 40px}
.kl-z__plus--jasny{width:40px;height:40px;background:#F1F1F4;color:#0D0D0F;animation:none}
.kl-z__kosz{animation-name:kl-kosz2}
@keyframes kl-kosz2{0%,28%{transform:scale(.97)}31%{transform:scale(1.04)}36%,100%{transform:none}}
.kl-z__ile{animation-name:kl-pyk2}
@keyframes kl-pyk2{0%,28%{transform:scale(1)}31%{transform:scale(1.35)}37%,100%{transform:none}}
/* 5. Opinie: podsumowanie z licznikiem, stos kart (nowa wchodzi na starszą) */
.kl-o{gap:12px}
.kl-o__sum{display:flex;align-items:center;gap:8px;font-size:14px;color:#45454B}
.kl-o__sum>b{font-size:22px;letter-spacing:-.02em;color:#0D0D0F;font-feature-settings:"tnum"}
.kl-o__gw--s i{width:14px!important;height:14px!important;animation:none!important}
.kl-o__gw--s i.is-pol{background:linear-gradient(90deg,#F5A524 20%,#D9D9DE 20%)}
.kl-o__ile{position:relative;display:inline-grid;font-weight:650;color:#0D0D0F;font-feature-settings:"tnum"}
.kl-o__ile span{grid-area:1/1;animation:kl-ile-a 7s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
.kl-o__ile span+span{animation-name:kl-ile-b}
@keyframes kl-ile-a{0%,24%{opacity:1;transform:none}30%,100%{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes kl-ile-b{0%,24%{opacity:0;transform:translate3d(0,8px,0)}30%,100%{opacity:1;transform:none}}
.kl-o__stos{display:grid}
.kl-o__stos>.kl-o__karta{grid-area:1/1}
.kl-o__karta--stara{transform:translate3d(0,-14px,0) scale(.94);opacity:.6;box-shadow:0 0 0 .5px rgba(13,13,15,.07);animation:kl-stara 7s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
@keyframes kl-stara{0%,4%{transform:none;opacity:1}14%,100%{transform:translate3d(0,-14px,0) scale(.94);opacity:.6}}
.kl-o__karta--nowa{grid-template-columns:44px 1fr 64px;animation:kl-nowa 7s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
@keyframes kl-nowa{0%,4%{opacity:0;transform:translate3d(0,28px,0) scale(.98)}14%,100%{opacity:1;transform:none}}
.kl-o__karta--nowa .kl-o__av{grid-row:1/3}
.kl-o__karta--nowa .kl-o__gw,.kl-o__karta--nowa .kl-o__t{grid-column:2}
.kl-o__karta--nowa p{grid-column:1/3}
.kl-o__fot{grid-column:3;grid-row:1/4;align-self:center;width:64px;height:64px;border-radius:12px;overflow:hidden}
.kl-o__gw i{animation-name:kl-gw2}
@keyframes kl-gw2{0%,12%{transform:scale(.75);background:#E1E1E6}17%,100%{transform:none;background:#F5A524}}
.kl-o__gw--stale i{animation:none}
.kl-o__karta p{animation:none}
.kl-o__av--b{background:#FFF1E0;color:#8A5200}
/* 6. Panel: okno na trzy wiersze, nowy wpycha sie od gory, najstarszy wypada w dol */
.kl-p__okno{height:204px;overflow:hidden;border-radius:16px}
.kl-p ul{animation-name:kl-lista2}
@keyframes kl-lista2{0%,20%{transform:translate3d(0,-70px,0)}30%,100%{transform:none}}
.kl-p__w:nth-child(4) em{background:#F1F1F4;color:#45454B}
.kl-p__st{display:flex;align-items:baseline;gap:6px;margin:10px 6px 2px!important;font-size:13.5px;color:#626268}
.kl-p__st>span:first-child{color:#0D0D0F;font-weight:600}
.kl-p__licz{position:relative;display:inline-grid;font-weight:650;color:#0D0D0F;font-feature-settings:"tnum"}
.kl-p__licz span{grid-area:1/1;animation:kl-ile-a 8s cubic-bezier(.16,1,.3,1) infinite var(--kl-a)}
.kl-p__licz span+span{animation-name:kl-ile-b}
@media (max-width:560px){
  .kl-g__mapa{height:88px}
  .kl-z__karta--2 .kl-z__t small{display:none}
  .kl-o__karta--nowa{grid-template-columns:44px 1fr 52px}
  .kl-o__fot{width:52px;height:52px}
}
.kl-o__ile span:first-child,.kl-p__licz span:first-child{opacity:0}
.kl-o__nfot{flex:none;width:72px;height:52px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.kl-o__nfot img{width:100%;height:100%;object-fit:cover;object-position:85% 40%}
.kl-o__karta--nowa{position:relative;z-index:1}