/* kafle.css 1.6.0 (2026-10-06) — 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 */
/* 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 wspolne.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:0 1px 3px rgba(7,36,60,.14);color:#07243C;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:#EAF2FA;}
#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:#07243C;}
#app #advcms .svp-kf .svp-kf__media--o{background:#E45A2B;}
#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:#F3A07F;}
#app #advcms .svp-kf .svp-kf__media--o .svp-kf__big span{color:#07243C;}
/* 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:#E9EDF2;}
#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:#07243C;}
#app #advcms .svp-kf .svp-kf__badge--b{background:#1568AB;}
#app #advcms .svp-kf .svp-kf__badge--o{background:#E45A2B;}
#app #advcms .svp-kf .svp-kf__badge--g{background:#1F6B3A;}
#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:#07243C;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:#1568AB;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:#07243C;font-size:18px;font-weight:700;line-height:1.2;}
#app #advcms .svp-kf .svp-kf__p{display:block;margin:0;color:#4A5A6A;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:#5E9AD6;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
#app #advcms .svp-kf:hover .svp-kf__cta{background:#4A87C4;}
#app #advcms .svp-kf .svp-kf__cta--dl{background:#fff;color:#1568AB;box-shadow:inset 0 0 0 2px #5E9AD6;}
#app #advcms .svp-kf:hover .svp-kf__cta--dl{background:#EAF2FA;}
/* 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:#F5F5F5;
  box-shadow:0 0 0 100vmax #F5F5F5;clip-path:inset(0 -100vmax);}
#app.phone section#advcms:has(.svp-kf){margin-bottom:32px!important;padding:28px 0;}