/* Informator online (pierwszy test: „Hity cenowe”, nr 7/2026) — prefiks .svp-inf__  · wersja 1.0.0
   Wgrywane w ERP: Szablony menu → pozycja strony → CSS tylko dla tego adresu.
   Wygląd zatwierdzony przez Lecha na podglądzie (kampanie/informator/podglad-web.html, 2026-10-15):
   hero w kolorze okładki wydania (--svp-inf-okl, podaje HTML), aktywna pigułka w tym samym kolorze,
   wielosztuki na --svp-surface-cool (naklejka 10+1 pomarańczowa), hity na --svp-tint (plakietka --svp-blue-dark).
   Karta: nazwa/cena/przycisk jak kafle „Ostatnio oglądane” (.svr-) na stronie głównej.
   Selektory #app#app#app: style sklepu dla treści malują linki/h2 i centrują — trzeba je przebić.
   Fonty: tylko 400/600/700 (sklep nie wczytuje Open Sans). Kolory: blok svp-tokeny (narzedzia/tokeny_erp.py). */
/* 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 */

#app#app#app .svp-inf{color:var(--svp-ink);line-height:1.45;font-family:inherit;text-align:left;margin:24px 0 8px}
#app#app#app .svp-inf *{box-sizing:border-box}
#app#app#app .svp-inf p{margin:0;text-align:left}
#app#app#app .svp-inf h1,#app#app#app .svp-inf h2{text-transform:none;letter-spacing:normal;text-align:left;padding:0;border:0}
#app#app#app .svp-inf a{text-decoration:none}
#app#app#app .svp-inf [id]{scroll-margin-top:110px}

/* Okładka wydania */
#app#app#app .svp-inf__hero{position:relative;display:flex;align-items:center;background:var(--svp-inf-okl,var(--svp-ink));color:#fff;border-radius:var(--svp-r-block);overflow:hidden;min-height:320px}
#app#app#app .svp-inf__htxt{position:relative;z-index:1;width:46%;padding:40px 44px}
#app#app#app .svp-inf p.svp-inf__eye{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.8;margin:0 0 14px}
/* Tytuł: dwie linie ciasno (drugie słowo bez wydłużeń w górę — przy zwykłej interlinii wygląda na odklejone),
   drugie słowo w kolorze akcentu wydania (--svp-inf-akc, z okładki — nr 7: pomarańcz ciasta) */
#app#app#app .svp-inf__hero h1{margin:0;font-size:64px;line-height:1;letter-spacing:-.01em;color:#fff}
#app#app#app .svp-inf__hero h1 b{display:block;font-weight:700;line-height:.86;color:#fff}
#app#app#app .svp-inf__hero h1 span{display:block;font-weight:600;line-height:.95;color:var(--svp-inf-akc,var(--svp-orange-light))}
#app#app#app .svp-inf__ph{position:absolute;top:0;right:0;bottom:0;width:62%;background-position:center;background-size:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}

/* Pigułki działów */
#app#app#app .svp-inf__nav{display:flex;gap:8px;overflow-x:auto;margin:18px 0 28px;padding-bottom:4px;scrollbar-width:none}
#app#app#app .svp-inf__nav::-webkit-scrollbar{display:none}
#app#app#app .svp-inf__pill{flex-shrink:0;padding:8px 16px;border:1px solid var(--svp-line);border-radius:var(--svp-r-pill);font-size:14px;font-weight:600;line-height:1.3;color:var(--svp-ink);background:#fff;white-space:nowrap}
#app#app#app .svp-inf__pill:hover{border-color:var(--svp-ink)}
#app#app#app .svp-inf__pill--on,#app#app#app .svp-inf__pill--on:hover{background:var(--svp-inf-okl,var(--svp-ink));border-color:var(--svp-inf-okl,var(--svp-ink));color:#fff}

/* Nagłówek działu */
#app#app#app .svp-inf__sh{display:flex;align-items:center;gap:16px;margin:0 0 18px}
#app#app#app .svp-inf__sh h2{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000}
#app#app#app .svp-inf__sh h2 span{font-weight:400;color:var(--svp-muted)}
#app#app#app .svp-inf__sh:after{content:"";flex:1;height:2px;background:var(--svp-line)}

/* Pasek wielosztuk */
#app#app#app .svp-inf__info{display:flex;align-items:center;gap:16px;background:var(--svp-surface-cool);color:var(--svp-ink);border-radius:var(--svp-r-card);padding:14px 18px;margin:0 0 22px}
#app#app#app .svp-inf__ic{flex-shrink:0;background:#fff;border:2px solid var(--svp-orange);color:var(--svp-orange);font-weight:700;font-size:15px;border-radius:var(--svp-r-btn);padding:6px 8px;transform:rotate(-4deg)}
#app#app#app .svp-inf__it{flex:1;min-width:0}
#app#app#app .svp-inf__it b{display:block;font-size:15px;font-weight:700}
#app#app#app .svp-inf__it span{font-size:13px;color:var(--svp-muted)}

/* Siatka kart: 4 kolumny, wyróżnione 2×2 */
#app#app#app .svp-inf__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:16px}
#app#app#app .svp-inf__grid+.svp-inf__grid{margin-top:16px}
#app#app#app .svp-inf__card{border-radius:var(--svp-r-card);background:#fff;border:1px solid var(--svp-btn-line);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s,transform .15s}
#app#app#app .svp-inf__card:hover{box-shadow:var(--svp-shadow-float);transform:translateY(-2px)}
#app#app#app .svp-inf__img{position:relative;display:block;aspect-ratio:1/.82;background:var(--svp-tint);overflow:hidden}
#app#app#app .svp-inf__card--wielo .svp-inf__img{background:var(--svp-surface-cool)}
#app#app#app .svp-inf__blob{position:absolute;left:50%;top:54%;width:78%;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:.75}
#app#app#app .svp-inf__img img{position:absolute;left:10%;top:10%;width:80%;height:80%;max-width:none;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(7,36,60,.18))}
#app#app#app .svp-inf__img img.svp-inf__pdp{mix-blend-mode:multiply;filter:none}
#app#app#app .svp-inf__stk{position:absolute;right:10px;top:10px;background:#fff;border:3px solid var(--svp-orange);color:var(--svp-orange);text-align:center;padding:4px 8px 3px;border-radius:var(--svp-r-btn);transform:rotate(4deg);box-shadow:0 4px 10px rgba(0,0,0,.12)}
#app#app#app .svp-inf__stk b{display:block;font-size:24px;line-height:1;font-weight:700}
#app#app#app .svp-inf__stk small{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#app#app#app .svp-inf__hit{position:absolute;left:10px;top:10px;background:var(--svp-blue-dark);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--svp-r-btn);line-height:1.3}
#app#app#app .svp-inf__txt{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
#app#app#app .svp-inf__brand{margin:0 0 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--svp-muted-2)}
#app#app#app .svp-inf__name{display:block;font-weight:600;font-size:16px;line-height:1.15;color:var(--svp-btn);margin:2px 0 12px}
#app#app#app .svp-inf__name:hover{color:var(--svp-blue-dark)}
#app#app#app .svp-inf__hand{margin:-6px 0 10px;font-size:12px;font-weight:600;color:var(--svp-muted)}
#app#app#app .svp-inf__buy{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px}
#app#app#app .svp-inf__price{display:flex;flex-direction:column;line-height:1.2}
#app#app#app .svp-inf__pmain{font-size:20px;font-weight:600;color:var(--svp-btn)}
#app#app#app .svp-inf__pmain small{font-size:13px;font-weight:600;color:var(--svp-btn)}
#app#app#app .svp-inf__psub{font-size:13px;color:var(--svp-native-text);margin-top:3px}
#app#app#app .svp-inf__na{font-size:13px;font-weight:600;color:var(--svp-muted)}
#app#app#app .svp-inf__add,#app#app#app .svp-inf__see{display:inline-flex;align-items:center;justify-content:center;width:100%;border:0;background:var(--svp-btn);color:#fff;font:inherit;font-size:14px;font-weight:700;text-transform:uppercase;height:34px;padding:0 14px;border-radius:var(--svp-r-btn);cursor:pointer}
#app#app#app .svp-inf__add:hover,#app#app#app .svp-inf__see:hover{background:var(--svp-btn-hover);color:#fff}
#app#app#app .svp-inf__add:disabled{opacity:.6;cursor:default}
#app#app#app .svp-inf__add--ok,#app#app#app .svp-inf__add--ok:hover{background:var(--svp-ok);opacity:1}
/* Karta wyróżniona */
#app#app#app .svp-inf__card--big{grid-column:span 2;grid-row:span 2}
#app#app#app .svp-inf__card--big .svp-inf__img{aspect-ratio:auto;flex:1;min-height:300px}
#app#app#app .svp-inf__card--big .svp-inf__blob{opacity:1;width:62%}
#app#app#app .svp-inf__card--big .svp-inf__stk{right:24px;top:24px;padding:8px 14px 6px}
#app#app#app .svp-inf__card--big .svp-inf__stk b{font-size:44px}
#app#app#app .svp-inf__card--big .svp-inf__stk small{font-size:12px}
#app#app#app .svp-inf__card--big .svp-inf__hit{left:20px;top:20px;font-size:13px;padding:7px 12px}
#app#app#app .svp-inf__card--big .svp-inf__txt{padding:18px 22px 22px;flex:0 0 auto}
#app#app#app .svp-inf__card--big .svp-inf__brand{min-height:1.5em}
#app#app#app .svp-inf__card--big .svp-inf__name{font-size:20px;margin-bottom:10px;min-height:2.3em}
#app#app#app .svp-inf__card--big .svp-inf__pmain{font-size:24px}
#app#app#app .svp-inf__card--big .svp-inf__buy{flex-direction:row;align-items:flex-end;justify-content:space-between}
#app#app#app .svp-inf__card--big .svp-inf__add,#app#app#app .svp-inf__card--big .svp-inf__see{width:auto}

/* PDF wydania */
#app#app#app .svp-inf__pdf{margin-top:32px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--svp-surface-cool);color:var(--svp-ink);border-radius:var(--svp-r-modal);padding:18px 22px}
#app#app#app .svp-inf__pdf img{width:64px;max-width:none;border-radius:4px;transform:rotate(-4deg);box-shadow:0 6px 16px rgba(7,36,60,.2)}
#app#app#app .svp-inf__pdf b{font-size:17px;font-weight:700}
#app#app#app .svp-inf__pdf a{background:var(--svp-btn);color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:var(--svp-r-btn);white-space:nowrap}
#app#app#app .svp-inf__pdf a:hover{background:var(--svp-btn-hover);color:#fff}

@media (max-width:900px){
  #app#app#app .svp-inf__grid{grid-template-columns:repeat(2,1fr)}
  #app#app#app .svp-inf__card--big{grid-row:auto}
  #app#app#app .svp-inf__card--big .svp-inf__img{min-height:220px}
  #app#app#app .svp-inf__hero{flex-direction:column;align-items:stretch}
  #app#app#app .svp-inf__ph{position:relative;width:100%;height:220px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
  #app#app#app .svp-inf__htxt{width:100%;padding:24px}
  #app#app#app .svp-inf__hero h1{font-size:44px}
  #app#app#app .svp-inf p.svp-inf__eye{margin-bottom:10px}
  #app#app#app .svp-inf__pdf{grid-template-columns:auto 1fr}
  #app#app#app .svp-inf__pdf a{grid-column:1/-1}
}
/* Telefon: karta jak na liście kategorii — zdjęcie z lewej, tekst z prawej, przycisk na całą szerokość */
@media (max-width:600px){
  #app#app#app .svp-inf__grid{grid-template-columns:1fr;gap:12px}
  #app#app#app .svp-inf__card,#app#app#app .svp-inf__card--big{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:42% 1fr}
  #app#app#app .svp-inf__img,#app#app#app .svp-inf__card--big .svp-inf__img{aspect-ratio:auto;height:100%;min-height:150px;flex:none}
  #app#app#app .svp-inf__card--big .svp-inf__blob{width:78%}
  #app#app#app .svp-inf__stk,#app#app#app .svp-inf__card--big .svp-inf__stk{right:8px;top:8px;padding:3px 7px 2px}
  #app#app#app .svp-inf__stk b,#app#app#app .svp-inf__card--big .svp-inf__stk b{font-size:20px}
  #app#app#app .svp-inf__stk small,#app#app#app .svp-inf__card--big .svp-inf__stk small{font-size:8px}
  #app#app#app .svp-inf__hit,#app#app#app .svp-inf__card--big .svp-inf__hit{left:8px;top:8px;font-size:11px;padding:4px 8px}
  #app#app#app .svp-inf__txt,#app#app#app .svp-inf__card--big .svp-inf__txt{padding:10px 12px;flex:1}
  #app#app#app .svp-inf__card--big .svp-inf__brand{min-height:0}
  #app#app#app .svp-inf__name,#app#app#app .svp-inf__card--big .svp-inf__name{font-size:15px;margin-bottom:8px;min-height:0}
  #app#app#app .svp-inf__pmain,#app#app#app .svp-inf__card--big .svp-inf__pmain{font-size:20px}
  #app#app#app .svp-inf__buy,#app#app#app .svp-inf__card--big .svp-inf__buy{grid-column:1/-1;flex-direction:column;align-items:stretch}
  #app#app#app .svp-inf__add,#app#app#app .svp-inf__see,#app#app#app .svp-inf__card--big .svp-inf__add,#app#app#app .svp-inf__card--big .svp-inf__see{width:100%}
  #app#app#app .svp-inf__info{flex-wrap:wrap}
}

/* Linki natywne modułu Promocje („Pokaż produkty w promocji” nad i pod treścią). Górny dubluje kafle tuż pod nim — ukryty;
   dolny = przycisk obrysowany na środku, pod blokiem PDF (lista tych samych produktów z filtrami). */
#app#app#app .csB2BSaleHeader section>a.c-lnk-sale-items:first-child{display:none}
#app#app#app .csB2BSaleHeader section>a.c-lnk-sale-items:last-child{display:flex;width:-webkit-fit-content;width:fit-content;height:46px;align-items:center;justify-content:center;margin:24px auto 40px;padding:0 26px;background:#fff;border:1px solid var(--svp-btn);border-radius:var(--svp-r-btn);color:var(--svp-btn);font-size:14px;font-weight:700;text-transform:uppercase;text-decoration:none;white-space:nowrap}
#app#app#app .csB2BSaleHeader section>a.c-lnk-sale-items:last-child:hover{background:var(--svp-btn);color:#fff}

/* Komunikat „Dodano do koszyka” — w <body>, poza #app */
html body .svp-inf__toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--svp-dark);color:#fff;font-size:14px;font-weight:600;padding:12px 20px;border-radius:var(--svp-r);box-shadow:var(--svp-shadow-modal);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100000}
html body .svp-inf__toast--on{opacity:1;transform:translate(-50%,0)}