/* wspolne.css 1.10.0 (2026-10-06) — wszystkie style slidera strony głównej esavpol.pl (halloween, hero, maszyny, thermohauser).
   Plik generowany: erp/home-slajdy/zrodla/build.mjs — nie edytuj ręcznie. Historia: erp/home-slajdy/BACKLOG.md */
/* Font jak w sklepie: "Open Sans", sans-serif bez pliku fontu (sklep żadnego nie ładuje) — tylko 400 i 700, cieńszych systemowe nie mają. */
/* Slider: wysokość z naszych slajdów, nie z obrazków 1920x600. Plik jest w <head> na każdej stronie — :has() włącza to
   tylko, gdy w sliderze jest nowy slajd (stare obrazki zostają nietknięte). */
#app.phone .c-window.csB2BHome section#banner .c-html-content-panel:has(.svp-hs){height:auto!important;}
#app.phone #banner .c-html-content-panel:has(.svp-hs) > .c-prev-btn,#app.phone #banner .c-html-content-panel:has(.svp-hs) > .c-next-btn{top:calc(min(62.5vw,360px)/2 - 22px)!important;bottom:auto!important;margin-top:0!important;}
/* Okres przejściowy: stare slajdy-obrazki obok nowych dostają naszą wysokość — pokaż je w całości zamiast przycinać. */
#app.phone #banner .c-html-content-panel:has(.svp-hs) .c-item:not(:has(.svp-hs)) img{object-fit:contain!important;background:#fff;}
/* Slider wyrównuje slajdy do najwyższego — pod niższym nie może prześwitywać niebieskie tło sekcji #banner. */
#app #banner .c-html-content-panel:has(.svp-hs) .c-item{background:#fff;}
/* CLS: slajdy nie są w HTML z serwera — przychodzą z API po starcie aplikacji (~3–4 s na telefonie), a do tego czasu
   #banner ma 0 px i treść pod nim wskakuje wyżej, potem zjeżdża (Lighthouse mobile: CLS 0,51). Dopóki w sliderze nie ma
   slajdów (.c-item), rezerwujemy jego wysokość na białym tle; potem rezerwa znika i zostaje różnica kilkudziesięciu px.
   Nie .c-window-det-null: ta klasa znika przy starcie aplikacji ~2 s przed slajdami (rezerwa 2× przesuwała stronę).
   Bez #app.phone — w HTML z serwera tej klasy jeszcze nie ma, stąd @media. */
#banner:not(:has(.c-item)){position:relative;min-height:clamp(340px,30vw,540px);background:#fff;}
/* Szkielet w rezerwie (jak w pdp-xsell: szare paski z przebiegającym światłem): tekst + kropla w układzie slajdu.
   ::before = bloki tekstu (maska z prostokątów na pasku z animacją), ::after = kropla. Absolutne — nie wpływają na CLS. */
#banner:not(:has(.c-item))::before,#banner:not(:has(.c-item))::after{content:"";position:absolute;
  background:linear-gradient(90deg,#EDF0F3 25%,#F7F8FA 50%,#EDF0F3 75%);background-size:200% 100%;animation:svp-sk 1.2s linear infinite;}
#banner:not(:has(.c-item))::before{top:calc(50% - 126px);left:calc((100% - min(1270px,100%))/2 + max(50px,min(70px,calc(70px - (100vw - 1270px)/2))));
  width:calc((min(1270px,100%) - 2*max(50px,min(70px,calc(70px - (100vw - 1270px)/2))))*.45);height:252px;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/180px 12px no-repeat,linear-gradient(#000 0 0) 0 30px/80% 40px no-repeat,
    linear-gradient(#000 0 0) 0 80px/55% 40px no-repeat,linear-gradient(#000 0 0) 0 142px/90% 14px no-repeat,
    linear-gradient(#000 0 0) 0 166px/65% 14px no-repeat,linear-gradient(#000 0 0) 0 206px/190px 46px no-repeat;
  mask:linear-gradient(#000 0 0) 0 0/180px 12px no-repeat,linear-gradient(#000 0 0) 0 30px/80% 40px no-repeat,
    linear-gradient(#000 0 0) 0 80px/55% 40px no-repeat,linear-gradient(#000 0 0) 0 142px/90% 14px no-repeat,
    linear-gradient(#000 0 0) 0 166px/65% 14px no-repeat,linear-gradient(#000 0 0) 0 206px/190px 46px no-repeat;}
#banner:not(:has(.c-item))::after{top:calc(50% - clamp(340px,30vw,540px)*.41);right:calc((100% - min(1270px,100%))/2 + max(50px,min(70px,calc(70px - (100vw - 1270px)/2))));
  width:calc(clamp(340px,30vw,540px)*.82);height:calc(clamp(340px,30vw,540px)*.82);border-radius:50% 50% 50% 0;}
@keyframes svp-sk{from{background-position:200% 0;}to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){#banner:not(:has(.c-item))::before,#banner:not(:has(.c-item))::after{animation:none;}}
@media (max-width:1023px){
  #banner:not(:has(.c-item)){min-height:calc(min(62.5vw,360px) + 250px);}
  #banner:not(:has(.c-item))::after{top:0;left:0;right:0;width:auto;height:min(62.5vw,360px);border-radius:0;}
  #banner:not(:has(.c-item))::before{top:calc(min(62.5vw,360px) + 18px);left:20px;right:20px;width:auto;height:192px;
    -webkit-mask:linear-gradient(#000 0 0) 0 0/140px 11px no-repeat,linear-gradient(#000 0 0) 0 22px/85% 30px no-repeat,
      linear-gradient(#000 0 0) 0 58px/60% 30px no-repeat,linear-gradient(#000 0 0) 0 102px/95% 13px no-repeat,
      linear-gradient(#000 0 0) 0 122px/70% 13px no-repeat,linear-gradient(#000 0 0) 0 150px/170px 42px no-repeat;
    mask:linear-gradient(#000 0 0) 0 0/140px 11px no-repeat,linear-gradient(#000 0 0) 0 22px/85% 30px no-repeat,
      linear-gradient(#000 0 0) 0 58px/60% 30px no-repeat,linear-gradient(#000 0 0) 0 102px/95% 13px no-repeat,
      linear-gradient(#000 0 0) 0 122px/70% 13px no-repeat,linear-gradient(#000 0 0) 0 150px/170px 42px no-repeat;}
}
/* Drugi slider (katalogi PDF, #advcms): okładki mają 275 px szerokości, ale slider ogranicza je tylko max-width:100%.
   Okładka wgrana w pełnym A4 (2480x3507) rosła do szerokości slajdu i wychodziła poza sekcję (sztywne 400 px). */
#app #advcms .c-item img{width:275px;max-width:100%;height:auto;}
/* Nawigacja slidera (.c-panel-navigation, dzieci = kropki 12 px): paski. Desktop: krótkie, wyśrodkowane. Telefon / ≤ 1023 px:
   na całą szerokość treści, dzielą się po równo. Pasek 4 px, obszar kliknięcia 20 px (przezroczysta ramka + background-clip). */
#app #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation{gap:6px;}
#app #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation > div{width:36px;height:20px;margin:0;padding:0;box-sizing:border-box;
  border:8px solid transparent;border-width:8px 0;border-radius:0;background:#D6DEE8;background-clip:padding-box;cursor:pointer;}
#app #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation > div.c-active{border:8px solid transparent;border-width:8px 0;background:#5E9AD6;background-clip:padding-box;}
#app .svp-hs{position:relative;display:block;width:100%;height:clamp(340px,30vw,540px);overflow:hidden;background:#fff;
  color:#07243C;text-align:left;font-family:"Open Sans",sans-serif;}
#app .svp-hs a{text-decoration:none;}
/* wyrównane do kontenera treści sklepu (.c-section-content: max 1270 px, 50 px marginesu); przy wąskim oknie min. 70 px od
   krawędzi ekranu, żeby strzałka slidera (14–59 px) nie wchodziła na tekst */
#app .svp-hs__in{position:absolute;top:0;right:0;bottom:0;left:0;max-width:1270px;margin:0 auto;padding:0 max(50px,min(70px,calc(70px - (100vw - 1270px)/2)));
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;}
#app .svp-hs__txt{position:static;display:block;width:50%;}
#app .svp-hs__eyebrow{display:block;margin-bottom:.9em;font-size:clamp(11px,.95vw,14px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#1568AB;}
#app .svp-hs__h{display:block;margin:0;font-size:clamp(28px,3vw,50px);line-height:1.12;font-weight:400;letter-spacing:-.01em;color:#07243C;}
#app .svp-hs__h b{font-weight:700;}
#app .svp-hs__lead{display:block;max-width:32em;margin:.9em 0 1.5em;font-size:clamp(14px,1.15vw,18px);line-height:1.5;
  font-weight:400;color:#4A5A6A;}
/* przycisk = natywny .c-btna sklepu (kolor, rogi, Open Sans, wersaliki jak „Do koszyka”); zdejmujemy tylko stałe 175x40 */
#app #banner .svp-hs .c-btna.svp-hs__cta{display:inline-flex;width:auto;height:46px;padding:0 26px;}
#app #banner .svp-hs .c-btna.svp-hs__cta:hover{background-color:#4A87C4;}
#app .svp-hs__media{position:relative;display:flex;justify-content:flex-end;align-items:center;width:46%;height:100%;}
/* „kropla” jak w hero Odoo; elementy kolażu w % jej boku. Zdjęcia produktów mają tło 250–255: filtr dobija je do bieli, multiply chowa biel */
#app .svp-hs__art{position:relative;display:block;width:calc(clamp(340px,30vw,540px)*.82);height:calc(clamp(340px,30vw,540px)*.82);}
#app .svp-hs__drop{position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:50% 50% 50% 0;overflow:hidden;background:#EAF2FA;}
#app #banner .svp-hs img{display:block;max-width:none;height:auto!important;object-fit:contain;}
#app #banner .svp-hs__drop img{width:100%!important;height:100%!important;object-fit:cover;}
#app #banner .svp-hs__it{position:absolute;mix-blend-mode:multiply;filter:brightness(1.04) contrast(1.04);}
/* Telefon — jak hero Odoo na telefonie: zdjęcie na pełną szerokość 16:10 (max 360 px), bez kropli, tekst pod nim do lewej.
   Strzałki slidera na środku zdjęcia, paski nawigacji pod przyciskiem (52 px). Wysokość z treści (font systemowy łamie się różnie);
   slider wyrównuje slajdy do najwyższego. Sklep daje dzieciom .c-item height:100% z wyższą specyficznością — stąd !important.
   Klasę #app.phone sklep nadaje po typie urządzenia, nie po szerokości (wąskie okno komputera i tablet mają #app.desktop)
   — ten sam układ także w @media do 1023 px. */
#app.phone #banner .c-item > .svp-hs{height:auto!important;}
#app.phone .svp-hs__in{position:relative;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0 0 52px;}
#app.phone #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation{left:20px;right:20px;width:auto;bottom:16px;}
#app.phone #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation > div{flex:1 1 0;width:auto;}
#app.phone .svp-hs__media{order:-1;width:100%;height:min(62.5vw,360px);justify-content:center;margin-bottom:18px;background:#EAF2FA;}
#app.phone .svp-hs__art{width:100%;height:100%;}
#app.phone .svp-hs__drop{border-radius:0;}
#app.phone .svp-hs__txt{width:100%;padding:0 20px;box-sizing:border-box;text-align:left;}
#app.phone .svp-hs__eyebrow{margin-bottom:.6em;font-size:11px;}
/* nagłówek: jeden rozmiar dla wszystkich slajdów — najdłuższy (hero) mieści się w 2 liniach przy 360 px do 26,5 px */
#app.phone #banner .svp-hs .svp-hs__h{font-size:min(7vw,30px);line-height:1.15;}
#app.phone .svp-hs__lead{margin:.6em 0 1em;font-size:14px;line-height:1.45;}
#app.phone #banner .svp-hs .c-btna.svp-hs__cta{height:42px;padding:0 20px;font-size:13px;}
@media (max-width:1023px){
  #app #banner .c-html-content-panel:has(.svp-hs) .c-item:not(:has(.svp-hs)) img{object-fit:contain!important;background:#fff;}
  #app #banner .c-html-content-panel:has(.svp-hs) > .c-prev-btn,#app #banner .c-html-content-panel:has(.svp-hs) > .c-next-btn{top:calc(min(62.5vw,360px)/2 - 22px)!important;bottom:auto!important;margin-top:0!important;}
  #app #banner .c-item > .svp-hs{height:auto!important;}
  #app .svp-hs__in{position:relative;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0 0 52px;}
  #app #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation{left:20px;right:20px;width:auto;bottom:16px;}
  #app #banner .c-html-content-panel:has(.svp-hs) > .c-panel-navigation > div{flex:1 1 0;width:auto;}
  #app .svp-hs__media{order:-1;width:100%;height:min(62.5vw,360px);justify-content:center;margin-bottom:18px;background:#EAF2FA;}
  #app .svp-hs__art{width:100%;height:100%;}
  #app .svp-hs__drop{border-radius:0;}
  #app .svp-hs__txt{width:100%;padding:0 20px;box-sizing:border-box;text-align:left;}
  #app .svp-hs__eyebrow{margin-bottom:.6em;font-size:11px;}
  #app #banner .svp-hs .svp-hs__h{font-size:min(7vw,30px);line-height:1.15;}
  #app .svp-hs__lead{margin:.6em 0 1em;font-size:14px;line-height:1.45;}
  #app #banner .svp-hs .c-btna.svp-hs__cta{height:42px;padding:0 20px;font-size:13px;}
}

/* ---- slajd: halloween ---- */
#app .svp-hs--hw .svp-hs__eyebrow{color:#E45A2B;}
#app .svp-hs--hw .svp-hs__drop{background:#FCE8DA;}
#app #banner .svp-hs--hw .hw-dynie{left:14%;top:30%;width:72%!important;}
#app #banner .svp-hs--hw .hw-nietoperz{left:-16%;top:-3%;width:46%!important;transform:rotate(-14deg);}
#app #banner .svp-hs--hw .hw-duchy{right:-6%;top:2%;width:34%!important;transform:rotate(9deg);}
#app #banner .svp-hs--hw .hw-czaszki{right:-10%;bottom:1%;width:29%!important;transform:rotate(-7deg);}
/* telefon: kolaż w kwadracie na środku pomarańczowego pasa */
#app.phone .svp-hs--hw .svp-hs__media{background:#FCE8DA;}
#app.phone .svp-hs--hw .svp-hs__art{width:auto;aspect-ratio:1;}
#app.phone .svp-hs--hw .svp-hs__drop{background:none;}
@media (max-width:1023px){
  #app .svp-hs--hw .svp-hs__media{background:#FCE8DA;}
  #app .svp-hs--hw .svp-hs__art{width:auto;aspect-ratio:1;}
  #app .svp-hs--hw .svp-hs__drop{background:none;}
}

/* ---- slajd: hero ---- */
#app .svp-hs__chips-t{display:block;margin:1.4em 0 .6em;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4A5A6A;}
#app .svp-hs__chips{display:flex;flex-wrap:wrap;gap:8px;}
#app .svp-hs .svp-hs__chip{display:inline-block;padding:7px 14px;border:1px solid #E0E0E0;border-radius:3px;background:#fff;
  color:#07243C;font-size:13px;font-weight:700;line-height:1.2;transition:border-color .15s,color .15s;}
#app .svp-hs .svp-hs__chip:hover{border-color:#5E9AD6;color:#1568AB;}
#app .svp-hs--hero .svp-hs__h{font-size:clamp(28px,2.7vw,46px);}
#app .svp-hs--hero .svp-hs__lead{margin-bottom:1.2em;}
#app.phone .svp-hs--hero .svp-hs__lead,#app.phone .svp-hs__chips-t{display:none;}
#app.phone #banner .svp-hs--hero .c-btna.svp-hs__cta{margin-top:14px;}
/* telefon: branże jako równe paski na całą szerokość (flex:1 1 0 — dzielą się po równo przy dowolnej liczbie) */
#app.phone .svp-hs__chips{flex-wrap:nowrap;gap:6px;margin-top:12px;}
#app.phone .svp-hs .svp-hs__chip{flex:1 1 0;min-width:0;padding:10px 4px;font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:1199px){
  #app .svp-hs--hero .svp-hs__h{font-size:26px;}
  #app .svp-hs__chips-t{display:none;}
  #app .svp-hs__chips{margin-top:14px;}
}
@media (max-width:1023px){
  #app .svp-hs--hero .svp-hs__lead,#app .svp-hs__chips-t{display:none;}
  #app #banner .svp-hs--hero .c-btna.svp-hs__cta{margin-top:14px;}
  #app .svp-hs__chips{flex-wrap:nowrap;gap:6px;margin-top:12px;}
  #app .svp-hs .svp-hs__chip{flex:1 1 0;min-width:0;padding:10px 4px;font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* ---- slajd: maszyny ---- */
/* zdjęcie z katalogu Valmar TTi (s. 8): maszyna w użyciu; na telefonie kadr z logo i lejem */
#app .svp-hs--masz .svp-hs__drop{background:#EAF2FA;}
/* drugi link: dla zakładających lodziarnię (twojalodziarnia.pl), słabszy od przycisku */
#app .svp-hs .svp-hs__more{display:block;margin-top:1.1em;font-size:clamp(13px,1vw,15px);font-weight:700;color:#1568AB;line-height:1.4;}
#app .svp-hs .svp-hs__more:hover{text-decoration:underline;}
#app .svp-hs__more span{display:block;margin-top:2px;font-weight:400;color:#4A5A6A;white-space:normal;}
#app.phone .svp-hs--masz .svp-hs__lead{display:none;}
#app.phone #banner .svp-hs--masz .c-btna.svp-hs__cta{margin-top:14px;}
#app.phone .svp-hs .svp-hs__more{font-size:13px;margin-top:14px;}
#app.phone .svp-hs--masz .svp-hs__drop img{object-position:50% 35%;}
@media (max-width:1023px){
  #app .svp-hs--masz .svp-hs__lead{display:none;}
  #app #banner .svp-hs--masz .c-btna.svp-hs__cta{margin-top:14px;}
  #app .svp-hs .svp-hs__more{font-size:13px;margin-top:14px;}
  #app .svp-hs--masz .svp-hs__drop img{object-position:50% 35%;}
}

/* ---- slajd: thermohauser ---- */
/* zdjęcie z katalogu Thermohauser (rózga + miska); na pasie telefonu (16:10) kadr na misce i rózdze, nie na suficie */
#app.phone #banner .svp-hs--th .svp-hs__drop img{object-position:50% 60%;}
@media (max-width:1023px){
  #app #banner .svp-hs--th .svp-hs__drop img{object-position:50% 60%;}
}