/* Panel „Napisz do nas” i kafel „Nie ma tego…” — 1:1 z obecnego sklepu CGH (sb.css, tokeny marki CGH z sb-marka.css). [Yuri 11.10] */
:root{--sb-akcent:#15131F;--sb-akcent-rgb:21,19,31;--sb-akcent2:#FBAD18;--sb-cta:#15131F;--sb-cta-tekst:#FFFFFF;--sb-tusz:#15131F;--sb-grafit:#585566;
  --sb-kreska:#E6E4EA;--sb-tlo:#FFFFFF;--sb-mgla:#F6F5F8;--sb-pap:#F4F3F6;--sb-baner-tlo:#FFF6D6;--sb-kroj:var(--font);--sb-kafel-promien:12px}
/* [Yuri 13.10: zdjęcie skacze przy szufladzie] tylko html: overflow na body robił z body pojemnik dla sticky galerii */
html{scrollbar-gutter:stable}.sbp-blokada{overflow:hidden}
.sbp-tlo{position:fixed;inset:0;z-index:2147483000;background:rgba(19,22,28,.32);opacity:0;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1)}   /* [Yuri 14.10] ruch płynny, lekki, elegancki */
.sbp-tlo.on{opacity:1}
.sbp{position:fixed;top:0;right:0;bottom:0;z-index:2147483001;width:min(460px,100vw);background:var(--sb-tlo);
  color:var(--sb-tusz);font-family:var(--sb-kroj);display:flex;flex-direction:column;
  border-radius:16px 0 0 16px;transform:translateX(40px);opacity:0;
  transition:transform .56s cubic-bezier(.22,.61,.36,1),opacity .4s cubic-bezier(.22,.61,.36,1)}
.sbp.on{transform:none;opacity:1}
.sbp__gora{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 4px}
.sbp__gora h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.sbp__x{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--sb-baner-tlo);color:var(--sb-tusz);
  display:grid;place-items:center;cursor:pointer}
.sbp__x:hover{background:var(--sb-kreska)}
.sbp__form{flex:1;display:flex;flex-direction:column;min-height:0}
.sbp__tresc{flex:1;overflow:auto;padding:16px 24px 24px;display:flex;flex-direction:column;gap:18px}
.sbp-naglowek{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sbp-ctx{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--sb-kreska);border-radius:12px;background:var(--sb-baner-tlo)}
.sbp-ctx img{width:52px;height:52px;object-fit:contain;background:var(--sb-tlo);border-radius:8px;flex:none}
.sbp-ctx b{display:block;font-size:14px;font-weight:600}
.sbp-ctx span{font-size:12.5px;color:var(--sb-grafit)}
.sbp-pole label,.sbp-h3{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--sb-tusz)}
.sbp-pole label span,.sbp-plik em{font-weight:400;font-style:normal;color:var(--sb-grafit)}
.sbp-pole input,.sbp-pole textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--sb-tusz);
  background:var(--sb-tlo);border:1px solid var(--sb-kreska);border-radius:10px;padding:12px 14px}
.sbp-pole textarea{min-height:120px;resize:vertical;line-height:1.5}
.sbp-pole input::placeholder,.sbp-pole textarea::placeholder{color:#7A869A}
.sbp-pole input:focus-visible,.sbp-pole textarea:focus-visible,.sbp__x:focus-visible,.sbp__cta:focus-visible,
.sbp-plik input:focus-visible + label,.sbp-samo:focus-visible{outline:2px solid var(--sb-akcent);outline-offset:2px}
.sbp-pole.zle input,.sbp-pole.zle textarea{border-color:#C0392B}
.sbp-dwa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sbp-plik input{position:absolute;opacity:0;width:1px;height:1px}
.sbp-plik label{display:flex;gap:12px;align-items:center;padding:16px;border:1.5px dashed #C9D3E0;border-radius:12px;
  font-size:13.5px;line-height:1.45;color:var(--sb-grafit);cursor:pointer}
.sbp-plik label:hover{border-color:var(--sb-akcent2)}
.sbp-plik i{font-style:normal;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sb-mgla);color:var(--sb-akcent);
  display:grid;place-items:center;font-size:18px}
.sbp-plik b{color:var(--sb-tusz);font-weight:600}
.sbp-pliki{list-style:none;margin:8px 0 0;padding:0;font-size:13px;color:var(--sb-tusz)}
.sbp-pliki li::before{content:"✓ ";color:#1F9254}
.sbp-pliki li.za-duzy{color:#C0392B}.sbp-pliki li.za-duzy::before{content:"✕ ";color:#C0392B}
.sbp-samo{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--sb-mgla);
  color:var(--sb-tusz);text-decoration:none;font-size:14px}
.sbp-samo b{display:block}.sbp-samo small{font-size:12.5px;color:var(--sb-grafit)}
.sbp-samo em{margin-left:auto;font-style:normal;font-weight:600;color:var(--sb-akcent);white-space:nowrap}
.sbp-lub{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--sb-grafit)}
.sbp-lub::before,.sbp-lub::after{content:"";flex:1;height:1px;background:var(--sb-kreska)}
.sbp-h3{font-size:18px;font-weight:700;margin:0}
.sbp-miod{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sbp-blad{margin:0;font-size:13.5px;color:#B03A2E}
.sbp__dol{border-top:1px solid var(--sb-kreska);padding:16px 24px 20px;display:flex;flex-direction:column;gap:10px}
.sbp__cta{position:relative;height:52px;border:0;border-radius:999px;background:var(--sb-cta);color:var(--sb-cta-tekst);
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:filter .15s}
.sbp__cta:hover{filter:brightness(.96)}
.sbp__cta[disabled]{cursor:progress}
.sbp__cta.laduje{color:transparent}
.sbp__cta.laduje::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid var(--sb-cta-tekst);border-right-color:transparent;animation:sbp-kreci .7s linear infinite}
@keyframes sbp-kreci{to{transform:rotate(360deg)}}
.sbp__cta--cichy{background:var(--sb-baner-tlo);color:var(--sb-tusz)}
.sbp__sla{margin:0;display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--sb-grafit)}
.sbp__sla::before{content:"";width:7px;height:7px;border-radius:50%;background:#1F9254}
.sbp-ok h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sbp-ok__znak{width:52px;height:52px;border-radius:50%;background:#E7F5EC;color:#1F9254;display:grid;place-items:center;font-size:24px}
.sbp-ok dl{margin:0;padding:14px 16px;border:1px solid var(--sb-kreska);border-radius:12px;font-size:14px;line-height:1.55}
.sbp-ok dt{font-size:12px;color:var(--sb-grafit);margin-top:8px}.sbp-ok dt:first-child{margin-top:0}
.sbp-ok dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:749px){
  .sbp{top:auto;height:min(92vh,92dvh);width:100vw;border-radius:16px 16px 0 0;transform:translateY(24px)}
  .sbp-dwa{grid-template-columns:1fr}
  .sbp__tresc{padding:14px 18px 20px}.sbp__gora{padding:18px 18px 4px}.sbp__dol{padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){ .sbp,.sbp-tlo{transition:none} }

/* WEJŚCIA. Karta nadruku pod przyciskiem koszyka, link wyceny pod progami,
   kafel „Nie ma tego, czego szukasz?” na końcu siatki — w kształcie produktu. */
.sbp-wejscie{display:flex;gap:12px;align-items:center;width:100%;margin-top:14px;padding:14px 16px;
  border:1px solid var(--sb-kreska);border-radius:12px;background:var(--sb-tlo);color:var(--sb-tusz);
  font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.sbp-wejscie:hover{border-color:var(--sb-akcent2)}
.sbp-wejscie:focus-visible,.sbp-link:focus-visible,.sbp-kafel:focus-visible{outline:2px solid var(--sb-akcent);outline-offset:2px}
.sbp-wejscie i{font-style:normal;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sb-mgla);color:var(--sb-akcent);display:grid;place-items:center}
.sbp-wejscie b{display:block;font-size:14px;font-weight:600;color:var(--sb-tusz)}
.sbp-wejscie span{font-size:12.5px;color:var(--sb-grafit)}
.sbp-wejscie em{margin-left:auto;font-style:normal;color:var(--sb-grafit)}
.sbp-link{display:inline-flex;margin-top:10px;font-size:14px;font-weight:600;color:var(--sb-akcent);text-decoration:none;
  border-bottom:1px solid var(--sb-akcent2);background:none;border-top:0;border-left:0;border-right:0;padding:0;cursor:pointer;font-family:inherit}
/* [Yuri 2026-10-07] „dużo delikatniejszy, nie krzyczący ciemny niebieski i żółty —
   prosty i elegancki", jak sekcja „Jak to działa": jasne pole, grafitowy tekst
   akapitu, biała pigułka z kreską i rozstrzelonymi wersalikami. Akcent tylko
   w strzałce. */
.sbp-kafel{display:flex;flex-direction:column;gap:8px;color:var(--sb-tusz);cursor:pointer;
  background:none;border:0;padding:0;font:inherit;text-align:left;width:100%}
.sbp-kafel__kadr{aspect-ratio:1/1;border-radius:var(--sb-kafel-promien);
  background:linear-gradient(160deg,var(--sb-tlo) 0%,var(--sb-tlo) 35%,var(--sb-mgla) 100%);
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  padding:clamp(20px,2.2vw,32px);box-sizing:border-box;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.sbp-kafel__kadr b{font-size:clamp(20px,1.7vw,26px);font-weight:400;line-height:1.3;letter-spacing:-.005em;
  color:var(--sb-grafit);max-width:12ch}
.sbp-kafel__pig{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:12px 20px;
  border:1px solid var(--sb-kreska);border-radius:999px;background:var(--sb-tlo);
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-akcent)}
.sbp-kafel__pig i{font-style:normal;color:var(--sb-akcent2);letter-spacing:0;font-weight:600}
@media (hover:hover){ .sbp-kafel:hover .sbp-kafel__kadr{transform:scale(1.015)}
  .sbp-kafel:hover .sbp-kafel__pig{border-color:var(--sb-akcent2)} }
@media (prefers-reduced-motion:reduce){ .sbp-kafel__kadr{transition:none} }

/* SBP-OK — wejście potwierdzenia w panelu „Napisz do nas”. [Yuri 2026-10-07]
   Każdy element rusza o 90 ms po poprzednim; znak dodatkowo rośnie z 0,6,
   a ptaszek rysuje się kreską, gdy kółko już stoi. */
.sbp-ok dt{margin-top:0}
.sbp-ok dl>div+div{margin-top:12px}
.sbp-ok__znak svg{display:block}
@media (prefers-reduced-motion:no-preference){
  .sbp-wej{opacity:0;animation:sbp-wej .55s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
  .sbp-ok__znak.sbp-wej{animation-name:sbp-znak}
  .sbp-ok__znak path{stroke-dasharray:24;stroke-dashoffset:24;animation:sbp-kreska .45s cubic-bezier(.25,.46,.45,.94) .32s forwards}
}
@keyframes sbp-wej{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sbp-znak{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sbp-kreska{to{stroke-dashoffset:0}}


/* ──────────────────────────────────────────────────────────────────────────
   SBP-OK v2 — potwierdzenie „co dalej” [Yuri 2026-10-07: „ten ekran jest niedopracowany”].
   Ptaszek w kolorze CTA marki (był zielony spoza systemu), trzy kroki na jednej osi,
   pod spodem to, co klient wysłał. Wejście z SBP-OK (sbp-wej, --i) bez zmian. */
.sbp-ok{display:flex;flex-direction:column;gap:22px}
.sbp-ok__znak{background:var(--sb-cta);color:var(--sb-cta-tekst)}
.sbp-ok h3{font-size:24px;line-height:1.2}
/* BILET zgłoszenia [Jerzy 19.10] zamiast osi kroków: nagłówek biletu (stan, kiedy, numer jak stempel), perforacja, treść (co dalej, adres, to, co wysłano).
   Stempel ląduje po bilecie: z 1,18 do 1, 0,45 s power2.out, bez odbicia. */
.sbp-bilet{border:1px solid var(--sb-kreska);border-radius:12px;background:var(--sb-tlo);overflow:hidden}
.sbp-bilet__g{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--sb-mgla);border-bottom:1px dashed var(--sb-kreska)}
.sbp-bilet__st{font-size:13px;font-weight:600;color:var(--sb-tusz);display:flex;align-items:center;gap:8px}
.sbp-bilet__st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sb-cta)}
.sbp-bilet__kiedy{font-size:13px;color:var(--sb-grafit)}
.sbp-bilet__nr{margin-left:auto;font:600 13px/1 var(--sb-mono,ui-monospace,Menlo,monospace);letter-spacing:.1em;color:var(--sb-cta);border:1.5px solid var(--sb-cta);border-radius:6px;padding:7px 9px;white-space:nowrap}
.sbp-bilet__t{padding:14px 16px 16px;display:grid;gap:10px;font-size:14px;line-height:1.5;color:var(--sb-tusz)}
.sbp-bilet__t p{margin:0;display:grid;grid-template-columns:96px 1fr;gap:12px}
.sbp-bilet__t p b{font-weight:400;font-size:13px;color:var(--sb-grafit)}
.sbp-bilet__t dl{margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--sb-kreska);font-size:14px;line-height:1.5}
.sbp-bilet__t dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px}
.sbp-bilet__t dl>div+div{margin-top:8px}
.sbp-bilet__t dt{margin:0;font-size:13px;color:var(--sb-grafit)}
.sbp-bilet__t dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){.sbp-bilet__nr{animation:sbp-stempel .45s cubic-bezier(.215,.61,.355,1) .62s both}}
@keyframes sbp-stempel{from{opacity:0;transform:scale(1.18)}}
.sbp-kroki{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sbp-krok{position:relative;display:grid;grid-template-columns:22px 1fr;gap:14px;padding:0 0 18px}
.sbp-krok:last-child{padding-bottom:0}
.sbp-krok:not(:last-child)::before{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--sb-kreska)}
.sbp-krok i{width:22px;height:22px;border-radius:50%;box-sizing:border-box;border:2px solid var(--sb-kreska);background:var(--sb-tlo);margin-top:1px}
.sbp-krok--zrobione i{position:relative;background:var(--sb-cta);border-color:var(--sb-cta)}
.sbp-krok--zrobione i::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid var(--sb-cta-tekst);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sbp-krok--zrobione:not(:last-child)::before{background:var(--sb-cta)}
.sbp-krok--teraz i{border-color:var(--sb-cta);box-shadow:inset 0 0 0 4px var(--sb-tlo);background:var(--sb-cta)}
.sbp-krok b{display:block;font-size:15px;font-weight:650;line-height:1.35;color:var(--sb-tusz)}
.sbp-krok span{display:block;font-size:13px;line-height:1.45;color:var(--sb-grafit);margin-top:2px;overflow-wrap:anywhere}
.sbp-krok--potem b{font-weight:500;color:var(--sb-grafit)}
.sbp-ok__wyslane{border-top:1px solid var(--sb-kreska);padding-top:18px}
.sbp-ok__et{margin:0 0 10px;font:400 11px/1 var(--sb-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sb-grafit)}
.sbp-ok__wyslane dl{margin:0;padding:0;border:0;border-radius:0;font-size:14px;line-height:1.5}
.sbp-ok__wyslane dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px}
.sbp-ok__wyslane dl>div+div{margin-top:8px}
.sbp-ok__wyslane dt{margin:0;font-size:13px;color:var(--sb-grafit)}
.sbp-kolejne{border:0;background:none;padding:6px;font:inherit;font-size:13.5px;color:var(--sb-grafit);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sbp-kolejne:hover{color:var(--sb-tusz)}
.sbp-kolejne:focus-visible{outline:2px solid var(--sb-akcent);outline-offset:2px}

/* PRZEŁĄCZNIK PL | EN (sb-jezyk.js) — zamiast rozwijanej listy Horizona przy dwóch językach. */
.sb-jezyk--ukryty{display:none!important}
.sb-jezyk{display:inline-flex;align-items:center;gap:6px;font-size:13px;letter-spacing:.06em;margin-right:6px}
.sb-jezyk__opcja{border:0;background:none;padding:6px 4px;font:inherit;font-weight:600;color:var(--sb-grafit);cursor:pointer;border-bottom:1.5px solid transparent}
.sb-jezyk__opcja.on{color:var(--sb-tusz);border-bottom-color:var(--sb-akcent2)}
.sb-jezyk__opcja:hover{color:var(--sb-tusz)}
.sb-jezyk__opcja:focus-visible{outline:2px solid var(--sb-akcent);outline-offset:2px}
.sb-jezyk__kreska{color:var(--sb-kreska)}

/* WOAL POD NAPISEM [Yuri 08.10, CGH dostawa: „przypisz to tak, żeby zawsze było widoczne, responsive”].
   Woal banera ma stały kształt liczony od krawędzi kadru, a napis stoi w kolumnie treści —
   przy innej szerokości okna i przycięciu kadru (cover) rozjeżdżały się i tekst wchodził na rampę.
   Ta poświata jest przypięta do BLOKU napisu, więc idzie za nim przy każdej szerokości.
   isolation: tworzy własny kontekst, żeby ::before (z-index -1) został nad kadrem, pod tekstem. */
@media (min-width:761px){
  .sb-woal-copy .sb-baner__blok{position:relative;isolation:isolate}
  .sb-woal-copy .sb-baner__blok::before{content:"";position:absolute;z-index:-1;inset:-18% -14% -18% -14%;
    background:radial-gradient(closest-side,rgba(var(--sb-woal),.9) 0%,rgba(var(--sb-woal),.8) 55%,rgba(var(--sb-woal),0) 100%);
    pointer-events:none}
}

/* ======================= POLE COPY NA KADRZE =======================
   [Yuri 08.10, CGH] „nie trafiają napisy w dobre miejsca grafik". Przyczyna była
   systemowa: obraz idzie przez całe okno, a napis stał w kolumnie 1248 z wcięciami
   zmierzonymi na kadrach ALAB-a — więc przy innym oknie i innej paczce lądował na
   przedmiocie. Z ustawieniem `pole` (mierzone na pliku w wdroz.py) napis trzyma się
   OBRAZU: zaczyna i kończy się w % szerokości kadru, stopień pisma idzie z szerokością
   okna jak obraz, więc kompozycja jest ta sama od 761 px do 2560 px.
   Gdy treść wymaga wyższego banera (sb-ma-prop), cover kotwiczy obraz po stronie copy —
   spokojne pole rośnie w pikselach, a nie ucieka spod napisu. */
@media (min-width:761px){
  .sb-pole .sb-baner__tresc{width:calc(var(--sb-pole-do) - var(--sb-pole-od));
    margin-left:var(--sb-pole-od);margin-right:0;padding-inline:5.5% 1.5%;box-sizing:border-box}
  .sb-pole.sb-baner--prawo .sb-baner__tresc{padding-inline:1.5% 5.5%}
  .sb-pole .sb-baner__blok,.sb-pole.sb-baner--prawo .sb-baner__blok{margin:0;max-width:none}
  .sb-pole .sb-baner__blok h1,.sb-pole .sb-baner__blok h2,.sb-pole .sb-baner__lead{max-width:100%}
  .sb-pole .sb-baner__foto,.sb-pole .sb-baner__wideo{object-position:left center}
  .sb-pole.sb-baner--prawo .sb-baner__foto,.sb-pole.sb-baner--prawo .sb-baner__wideo{object-position:right center}
  /* stopień w vw bez wysokich podłóg: przy 761-1100 podłoga z ALAB-a robiła napis
     większy od pola. Nagłówek dzieli pole, nie kolumnę. */
  .sb-pole.sb-baner--hero h1{font-size:max(28px,5.2vw)}
  .sb-pole h2{font-size:max(24px,3.7vw)}
  .sb-pole .sb-baner__lead{font-size:max(15px,1.35vw)}
  /* domknięcie: ten sam mechanizm; jego treść nosi .sb-kolumna, stąd podwójna klasa */
  .sb-domkniecie.sb-pole .sb-domkniecie__tresc.sb-kolumna{width:calc(var(--sb-pole-do) - var(--sb-pole-od));
    max-width:none;margin-left:var(--sb-pole-od);margin-right:0;padding-inline:5.5% 1.5%;box-sizing:border-box}
  .sb-domkniecie.sb-pole h2,.sb-domkniecie.sb-pole p{max-width:100%}
  .sb-domkniecie.sb-pole h2{font-size:max(26px,4.2vw)}
  .sb-domkniecie.sb-pole p{font-size:max(15px,1.35vw)}
  .sb-domkniecie.sb-pole .sb-domkniecie__foto{object-position:left center}
}

/* Tło nagłówka: kolor tła strony w 84 % + rozmycie, żeby pasek nie był płaski, ale
   treść pod nim nigdy nie konkurowała z menu. Bez wsparcia backdrop-filter — pełne tło. */
.header__underlay-closed{
  background:color-mix(in srgb,var(--color-background-bottom-row,#fff) 84%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header__underlay-closed{background:var(--color-background-bottom-row,#fff)}
}

/* ======================= TELEFON: NAPIS NA KADRZE =======================
   [Yuri 08.10, CGH mobile] „jest oddzielnie plakat i tekst, nie może tak być”.
   Baza sadzała na telefonie obraz NAD napisem (kadry ALAB-a były docięte do treści).
   Paczka według docs/sklep/PACZKA-ASSETOW.md ma kadr mobilny 3:4 z WOLNYM górnym
   ~45 % (manifest: copy_space_mobile) — czyli jest rysowana pod napis na obrazie.
   Bramką jest `.sb-pole`: dostaje ją tylko baner, którego pole copy zmierzył
   wdroz.py, więc sklepy sprzed paczki (ALAB) zostają przy starym układzie.
   Kadr stoi zawsze w pełnej proporcji 3:4 przy DOLNEJ krawędzi sekcji, a napis
   idzie w przepływie od góry i pod nim sekcja rezerwuje `--sb-mob-przedmiot`
   — tę część kadru, w której stoi przedmiot. Dłuższy napis wydłuża sekcję
   w górę, nad spokojną ścianą kadru, i nigdy nie wchodzi na przedmiot.
   [zmierzone na kadrach CGH] przedmiot zaczyna się na 45-48 % wysokości
   (dostawa, jesień, święta), w hero już na 34 % — stąd osobna wartość. */
@media (max-width:760px){
  .sb-baner.sb-pole{--sb-mob-kadr:calc(100vw * 4 / 3);--sb-mob-przedmiot:.56;
    display:block;position:relative;min-height:var(--sb-mob-kadr);
    padding-bottom:calc(var(--sb-mob-kadr) * var(--sb-mob-przedmiot));box-sizing:border-box;
    background:rgb(var(--sb-woal))}
  .sb-baner--hero.sb-pole{--sb-mob-przedmiot:.68}
  /* [zmierzone] dostawa: korony drzew zaczynają się po lewej już na ~31 % kadru;
     przy .56 link „Zamów teraz” stał na liściach — 3,6:1. */
  .sb-baner--dostawa.sb-pole{--sb-mob-przedmiot:.74}
  .sb-pole .sb-baner__foto,.sb-pole .sb-baner__wideo{position:absolute;inset:auto 0 0 0;
    width:100%;height:var(--sb-mob-kadr);object-fit:cover;object-position:center bottom}
  /* woal: górna krawędź kadru znika w tle sekcji, napis ma jasną ścianę,
     dół roztapia się w tło sąsiada */
  .sb-pole .sb-baner__woal{inset:auto 0 0 0;height:var(--sb-mob-kadr);background:
    linear-gradient(180deg,rgb(var(--sb-woal)) 0%,rgba(var(--sb-woal),.7) 18%,
      rgba(var(--sb-woal),0) 40%,rgba(var(--sb-woal),0) 90%,rgb(var(--sb-woal)) 100%)}
  .sb-pole .sb-baner__tresc{padding:clamp(28px,8vw,40px) 0 0}
  .sb-pole .sb-baner__blok,.sb-pole.sb-baner--prawo .sb-baner__blok{margin:0;max-width:none;padding:0}
  .sb-pole .sb-baner__blok h1,.sb-pole .sb-baner__blok h2,.sb-pole .sb-baner__lead{max-width:none}
  .sb-pole.sb-baner--hero h1{font-size:clamp(32px,9vw,40px);line-height:1.04}
  .sb-pole h2{font-size:clamp(28px,8vw,36px);line-height:1.06}
  .sb-pole .sb-baner__lead{font-size:16px;line-height:1.45;margin-top:12px}
  .sb-pole .sb-etykieta{margin-bottom:10px}
  .sb-pole .sb-pigulka{margin-top:18px;height:50px}
  .sb-pole .sb-link{margin-top:14px}
}
/* „prawo” na telefonie nie ma sensu — jedna kolumna. Bez tego blok dostawy
   zostawał w 52 % szerokości przy prawej krawędzi (specyficzność wygrywała
   z resetem w bloku TELEFON). */
@media (max-width:760px){
  .sb-baner--prawo .sb-baner__blok{margin-left:0;max-width:none}
}

/* ======================= TELEFON: JAK TO DZIAŁA, ZWARTE =======================
   [Yuri 08.10, CGH] „jak to działa zajmuje ci 3 scrolle, zanim zobaczysz towar”.
   Trzy kroki pod sobą z kadrem na całą szerokość to ~1900 px przed pierwszym
   produktem. Na telefonie krok staje się WIERSZEM: miniatura po lewej, numer
   i zdanie po prawej (kierunek lewo → prawo zostaje). Kreska łącząca kroki
   biegnie przez środek miniatur — ta sama oś, tylko krótsza. */
@media (max-width:760px){
  .sb-proces{padding-bottom:36px}
  .sb-proces .sb-proces__siatka{gap:14px;margin-top:14px}
  .sb-krok{display:grid;grid-template-columns:96px 1fr;column-gap:16px;align-items:center}
  .sb-krok__kadr{grid-row:1 / span 2;align-self:center;margin:0;aspect-ratio:1/1;
    border-radius:var(--sb-promien)}
  /* <picture> jest blokiem bez wysokości — bez tego img z height:100% bierze
     własną proporcję 3:2 i pod nim zostaje biały pas kwadratu */
  .sb-krok__kadr picture{height:100%}
  .sb-proces .sb-krok__numer{justify-self:start;align-self:end;margin:0 0 6px;
    min-height:0;padding:0;border:0;background:none;gap:8px;font-size:11px}
  .sb-proces .sb-krok p{grid-column:2;align-self:start;margin:0;max-width:none;
    font-size:15px;line-height:1.45}
  .sb-proces__siatka::before{left:48px}
}

/* ======================= TELEFON: RZĘDY PRODUKTÓW CIAŚNIEJ =======================
   [Yuri 08.10, CGH] „zmniejsz odstępy w rzędach na mobile”. [zmierzone na 390]
   Horizon skaluje odstęp sekcji (100/88 → 70/62 px) i dokłada 40 px pod nagłówkiem
   + 24 px przerwy: od tytułu rzędu do kafli było 64 px, rząd zajmował 503 px.
   Zostaje rytm: 32 px nad nagłówkiem, 16 px do kafli, 40 px na wyjście. */
@media (max-width:749px){
  .section:has(> .section-resource-list__header){padding-block:32px 40px;row-gap:16px}
  .section-resource-list__header .text-block{padding-block-end:0}
}
.sbp-info{margin:0;font-size:13.5px;color:var(--sb-grafit);padding:10px 14px;border-radius:10px;background:var(--sb-mgla)}