/* kafle.css 1.7.1 (2026-10-08) — kafle drugiego slidera strony głównej esavpol.pl (#advcms). Wgraj w ERP jako arkusz
   w <head> gałęzi „/” (Meta info → Linki, jak cssHomeSlides). Źródło: erp/home-kafle/zrodla/kafle.src.css, historia: erp/home-kafle/BACKLOG.md */
/* svp-tokeny: start — kopia biblioteka/tokeny-sklep.css, nie edytuj ręcznie (narzedzia/tokeny_erp.py) */
:root{--svp-btn:#5E9AD6;--svp-btn-hover:#4A87C4;--svp-blue-dark:#1568AB;--svp-link:#1C75BC;--svp-blue-brand:#69A2D9;--svp-tint:#EAF2FA;--svp-tint-hover:#DCEAF7;--svp-orange:#CE5F30;--svp-orange-light:#F3A07F;--svp-orange-tint:#FDEEE8;--svp-ink:#07243C;--svp-ink-pdp:#000;--svp-muted:#595959;--svp-muted-2:#5B6B7A;--svp-surface:#FFFFFF;--svp-surface-alt:#F5F5F5;--svp-surface-cool:#EDF0F3;--svp-dark:#1A1A1A;--svp-line:#E0E0E0;--svp-btn-line:#D5D9E1;--svp-ok:#3B8A5A;--svp-ok-dark:#1F6B3A;--svp-ok-strong:#14C95D;--svp-error:#B3261E;--svp-warning:#D98E1F;--svp-native-text:#333333;--svp-native-label:#7F7F7F;--svp-native-promo:#EB864C;--svp-native-stock:#00A541;--svp-font:inherit;--svp-r-btn:3px;--svp-r-tile:6px;--svp-r:8px;--svp-r-card:12px;--svp-r-modal:16px;--svp-r-block:24px;--svp-r-pill:9999px;--svp-shadow-float:0 4px 16px rgba(0,0,0,.08);--svp-shadow-modal:0 20px 60px rgba(0,0,0,.25);--svp-shadow-drawer:-12px 0 40px rgba(0,0,0,.18);--svp-shadow-hair:0 1px 2px rgba(0,0,0,.06)}
/* svp-tokeny: koniec */
/* Element slidera: komputer 292,5 x 396 px (padding 0 10 px), telefon 315 x 392 px (bez paddingu). Kafel wypełnia go w całości. Reguła z slajdy.css
   „#app #advcms .c-item img{width:275px}” i sklepowe .c-item img — stąd wyższa specyficzność i !important na zdjęciach. */
#app #advcms .c-item:has(.svp-kf){text-align:left;}
#app #advcms .svp-kf{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:396px;overflow:hidden;
  border-radius:6px;background:#fff;box-shadow:var(--svp-shadow-hair);color:var(--svp-ink);text-decoration:none;text-align:left;
  font-family:"Open Sans",sans-serif;}
#app.phone #advcms .svp-kf{height:392px;}
#app #advcms .svp-kf span{position:static;}
#app #advcms .svp-kf .svp-kf__media{position:relative;display:block;flex:0 0 190px;height:190px;overflow:hidden;background:var(--svp-tint);}
#app #advcms .c-item .svp-kf .svp-kf__media img{display:block;width:100%!important;max-width:none!important;height:190px!important;
  object-fit:cover;object-position:50% 50%;}
#app #advcms .svp-kf .svp-kf__media--n{background:var(--svp-ink);}
#app #advcms .svp-kf .svp-kf__media--o{background:var(--svp-orange);}
#app #advcms .svp-kf .svp-kf__ico{position:absolute;left:50%;top:36%;width:60px;height:60px;transform:translate(-50%,-50%);}
#app #advcms .svp-kf .svp-kf__ico--r{left:auto;right:18px;top:18px;transform:none;}
#app #advcms .svp-kf .svp-kf__big{position:absolute;left:18px;right:18px;bottom:16px;display:block;color:#fff;font-size:26px;
  line-height:1.15;font-weight:700;}
#app #advcms .svp-kf .svp-kf__media--n .svp-kf__big span{color:var(--svp-orange-light);}
#app #advcms .svp-kf .svp-kf__media--o .svp-kf__big span{color:var(--svp-ink);}
/* Okładka PDF jako zwykły obrazek (informator — nowy numer = wgrać samą okładkę): obrót i cień z CSS, jak w kaflach katalogów */
#app #advcms .svp-kf .svp-kf__media--cover{display:flex;align-items:flex-end;justify-content:center;background:var(--svp-surface-cool);}
#app #advcms .c-item .svp-kf .svp-kf__media--cover img{width:auto!important;height:150px!important;object-fit:contain;
  margin-bottom:-4px;transform:rotate(-3deg);box-shadow:0 6px 16px rgba(7,36,60,.3);}
/* plakietki na zdjęciu */
#app #advcms .svp-kf .svp-kf__badge{position:absolute;top:12px;left:12px;display:block;padding:4px 8px;border-radius:3px;color:#fff;
  font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;background:var(--svp-ink);}
#app #advcms .svp-kf .svp-kf__badge--b{background:var(--svp-blue-dark);}
#app #advcms .svp-kf .svp-kf__badge--o{background:var(--svp-orange);}
#app #advcms .svp-kf .svp-kf__badge--g{background:var(--svp-ok-dark);}
#app #advcms .svp-kf .svp-kf__pdf{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:6px;padding:6px 9px;
  border-radius:3px;background:var(--svp-ink);color:#fff;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;}
#app #advcms .svp-kf svg{display:block;}
#app #advcms .svp-kf .svp-kf__pdf svg,#app #advcms .svp-kf .svp-kf__cta--dl svg{width:14px;height:14px;flex:0 0 14px;}
/* treść */
#app #advcms .svp-kf .svp-kf__body{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 16px 16px;}
#app #advcms .svp-kf .svp-kf__eb{display:block;margin-bottom:5px;color:var(--svp-blue-dark);font-size:11px;font-weight:700;line-height:1.3;
  letter-spacing:.07em;text-transform:uppercase;}
#app #advcms .svp-kf .svp-kf__h{display:block;margin:0 0 6px;color:var(--svp-ink);font-size:18px;font-weight:700;line-height:1.2;}
#app #advcms .svp-kf .svp-kf__p{display:block;margin:0;color:var(--svp-muted-2);font-size:13px;line-height:1.45;}
/* przycisk jak „Do koszyka” sklepu (.c-btna): #5E9AD6, rogi 3 px, wersaliki; hover #4A87C4 jak w slajdach */
#app #advcms .svp-kf .svp-kf__cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;height:36px;
  padding:0 16px;border-radius:3px;background:var(--svp-btn);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
#app #advcms .svp-kf:hover .svp-kf__cta{background:var(--svp-btn-hover);}
#app #advcms .svp-kf .svp-kf__cta--dl{background:#fff;color:var(--svp-blue-dark);box-shadow:inset 0 0 0 2px var(--svp-btn);}
#app #advcms .svp-kf:hover .svp-kf__cta--dl{background:var(--svp-tint);}
/* Wyrównanie do treści strony (komputer): elementy slidera mają padding 0 10 px, więc pierwszy kafel zaczynał się 10 px
   na prawo od krawędzi treści (karty „Ostatnio oglądane” wyżej startują równo z nią). Panel poszerzony do 1190 px
   i cofnięty o 10 px — slider sam liczy szerokość elementu z panelu (297,5 px), kafle 368–1538 px jak karty wyżej.
   Sklep wymusza panelowi 1170 px regułą „#app.desktop .c-window.csB2BHome section#advcms > .c-section-content …” —
   stąd ten sam selektor + :has (wyższa specyficzność). */
#app.desktop .c-window.csB2BHome section#advcms > .c-section-content .c-html-content-panel:has(.svp-kf){width:1190px!important;
  margin:0 -10px!important;}
/* Strzałki jak w „Ostatnio oglądane”: w pasie 50 px poza kaflami, na środku wysokości. Telefon: brak pasa — strzałki
   na środku zdjęcia (73 px), żeby nie zasłaniały tekstu. */
#app.desktop #advcms .c-html-content-panel:has(.svp-kf) > .c-prev-btn{left:-40px!important;right:auto!important;top:176px!important;
  bottom:auto!important;margin-top:0!important;}
#app.desktop #advcms .c-html-content-panel:has(.svp-kf) > .c-next-btn{left:auto!important;right:-40px!important;top:176px!important;
  bottom:auto!important;margin-top:0!important;}
#app.phone #advcms .c-html-content-panel:has(.svp-kf) > .c-prev-btn,#app.phone #advcms .c-html-content-panel:has(.svp-kf) > .c-next-btn{
  top:73px!important;bottom:auto!important;margin-top:0!important;}
/* Telefon jak „Ostatnio oglądane”: kafel 260 px + odstęp 15 px od lewej krawędzi ekranu, z prawej widać ~85 px następnego.
   Slider liczy szerokość elementu z panelu (275 px). Sąsiednie elementy wychodzą poza panel (.c-items overflow visible),
   przycina je dopiero sekcja; clip-path tnie lewą stronę (cień poprzedniego kafla przy krawędzi). */
#app.phone #advcms .c-section-content:has(.svp-kf){overflow:hidden!important;}
#app.phone .c-window.csB2BHome section#advcms > .c-section-content .c-html-content-panel:has(.svp-kf){width:275px!important;
  margin-left:-15px!important;}
#app.phone #advcms .c-html-content-panel:has(.svp-kf) .c-items{overflow:visible!important;clip-path:inset(-10px -100vw -10px 0);
  touch-action:pan-y;}
#app.phone #advcms .c-item .svp-kf{width:260px!important;}
/* Strzałki chowamy tylko, gdy działa tag GTM home-kafle-swipe (klasa na <html>) — slider sklepu nie obsługuje gestów. */
html.svp-kf-swipe #app.phone #advcms .c-html-content-panel:has(.svp-kf) > .c-prev-btn,
html.svp-kf-swipe #app.phone #advcms .c-html-content-panel:has(.svp-kf) > .c-next-btn{display:none!important;}
/* Szary pas na całą szerokość (jak sekcje alt na PDP, #F5F5F5): odcina kafle od „Ostatnio oglądane” nad nimi.
   box-shadow 100vmax + clip-path zamiast 100vw — bez poziomego scrolla (wzorzec z gtm/pdp-xsell.html).
   Sklep daje sekcji margin 75 px i wysokość z treści — margines zamieniony na padding, żeby pas objął odstęp. */
#app section#advcms:has(.svp-kf){margin:0 0 48px!important;padding:48px 0;height:auto!important;background:var(--svp-surface-alt);
  box-shadow:0 0 0 100vmax var(--svp-surface-alt);clip-path:inset(0 -100vmax);}
#app.phone section#advcms:has(.svp-kf){margin-bottom:32px!important;padding:28px 0;}