/* Spiżarnia Pupila — strona główna złożona wyłącznie z zaakceptowanych elementów.
   Hero J z dwoma przyciskami organicznymi · pas zasad sklepu · dobór karmy na lnie
   z krawędziami z plików marki · sklep z kaflami i kartami organicznymi · etapy ·
   poradnik · FAQ · pas korzyści zakupów · stopka.
   Nagłówki sekcji przeplatają cztery układy systemu. Sekcja „Co jest w środku”
   wypadła 11.09.2026 razem ze swoimi regułami. */

/* ── HERO J: jeden kadr, typografia wyśrodkowana ──── */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--sp-ink)}
.hero-foto{position:absolute;inset:0;z-index:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* Woalka dwuwarstwowa: płaski podkład na całości + zagęszczenie pod typografią.
   Pod tekstem daje ok. 0.78 krycia (czytelność), przy brzegach 0.48 (zdjęcie zostaje widoczne). */
.hero-woalka{position:absolute;inset:0;z-index:1;
  background:radial-gradient(72% 72% at 50% 48%,rgba(9,28,20,.58) 0%,rgba(9,28,20,.42) 44%,rgba(9,28,20,0) 82%),
    rgba(14,42,31,.48)}
.hero-tresc{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;
  padding-block:clamp(76px,11vw,150px) clamp(68px,9vw,124px)}
.hero-kreska{width:56px;height:1px;background:var(--sp-gold-light);margin-bottom:20px}
.hero-kicker{font-size:13px;letter-spacing:2.6px;text-transform:uppercase;color:var(--sp-gold-light);margin-bottom:22px;
  text-shadow:0 1px 2px rgba(9,28,20,.4)}
.hero h1{font-size:clamp(38px,5.4vw,76px);line-height:1.03;letter-spacing:-1.6px;max-width:17ch;color:var(--sp-paper);
  text-shadow:0 1px 3px rgba(9,28,20,.42)}
.hero h1 em{color:var(--sp-gold-light)}
.hero-lead{margin-top:22px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:46ch;color:#EDE8DC;
  text-shadow:0 1px 2px rgba(9,28,20,.38)}
.hero-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
/* Oba wezwania są organiczne (decyzja z rundy 7). Drugie w tonie akcji — zieleń
   marki zlałaby się z woalką, a kremowe dwa razy odebrałoby pierwszemu pierwszeństwo. */
.hero-cta .rustic--b{--fill:var(--sp-action);color:var(--sp-surface)}
@media(hover:hover) and (pointer:fine){
  /* domyślne przejście na zieleń marki zniknęłoby na ciemnym kadrze */
  .hero-cta .rustic--b:hover{--fill:#8A7245}
}

/* ── PAS ZASAD SKLEPU ───────────────────────────────
   Tylko zasady, które ustala sklep. Progu darmowej dostawy tu nie ma — pasek w koszyku bierze go z ustawień motywu. */
.fakty{padding-block:var(--sp-s5)}
.fakty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-s4)}
.fakty-grid>div{padding-left:var(--sp-s3);border-left:1px solid var(--sp-hair)}
.fakty-grid>div:first-child{padding-left:0;border-left:0}
.fakty-grid b{display:block;font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1;color:var(--sp-action);
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.fakty-grid strong{display:block;font-weight:400;font-size:19px;margin-top:10px}
.fakty-grid p{font-size:16px;color:var(--sp-muted);margin-top:5px;max-width:26ch}
@media(max-width:640px){.fakty-grid{grid-template-columns:1fr}
  .fakty-grid>div{padding-left:0;border-left:0;padding-top:var(--sp-s2);border-top:1px solid var(--sp-hair)}
  .fakty-grid>div:first-child{border-top:0;padding-top:0}}

/* ── DLA KOGO: sekcja na lnie ──────────────────────────
   Len na kremie to mały kontrast, więc krawędzie z plików marki (.sp-rag), nie clip-path. */
.sekcja-len{background:var(--sp-soft);--rag-kolor:var(--sp-paper)}

/* wspólne zakończenie sekcji: jedno wezwanie na środku, pod treścią */
.sekcja-cta{margin-top:var(--sp-s5);text-align:center}

/* ── DLA KOGO ──────────────────────────────────────── */
.psy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-s3)}
.psy a{display:block;text-decoration:none;color:inherit}
.psy img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform var(--sp-hover) var(--sp-ease)}
.psy h3{margin-top:var(--sp-s2);padding-top:var(--sp-s2);border-top:1px solid var(--sp-hair);font-size:23px}
.psy p{margin-top:6px;color:var(--sp-muted);font-size:16px}
@media(hover:hover) and (pointer:fine){.psy a:hover img{transform:scale(1.02)}
  .psy a:hover h3{border-top-color:var(--sp-gold)}}
@media(max-width:850px){.psy{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.psy{grid-template-columns:1fr}.psy img{aspect-ratio:4/3}}

/* ── SKLEP ─────────────────────────────────────────── */
.kategorie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-s4);margin-bottom:var(--sp-s5)}
.kategorie a{display:block;text-decoration:none;border-top:1px solid var(--sp-gold);padding-top:var(--sp-s3)}
.kategorie img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--sp-s3);
  transition:transform var(--sp-hover) var(--sp-ease)}
.kategorie h3{font-size:clamp(24px,2.2vw,30px)}
.kategorie p{margin-top:var(--sp-s1);color:var(--sp-muted);font-size:17px}
@media(hover:hover) and (pointer:fine){.kategorie a:hover img{transform:scale(1.02)}}
@media(max-width:850px){.kategorie{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.kategorie{grid-template-columns:1fr}}

/* ── JAK POWSTAJE ──────────────────────────────────── */
.etapy-inner{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,86px);align-items:start}
.etapy-aside{position:sticky;top:120px}
.etapy{display:grid;gap:var(--sp-s5);position:relative;padding-left:clamp(48px,5vw,72px)}
.etapy::before{content:'';position:absolute;left:16px;top:12px;bottom:12px;width:1px;background:var(--sp-hair)}
.etapy::after{content:'';position:absolute;left:16px;top:12px;width:1px;height:var(--progress,0%);
  background:var(--sp-gold);transition:height var(--sp-hover) linear}
.etapy li{list-style:none;position:relative}
.etapy li::before{content:'';position:absolute;left:calc(-1 * clamp(48px,5vw,72px) + 11px);top:13px;width:11px;height:11px;
  border:1px solid var(--sp-gold);border-radius:50%;background:var(--sp-paper);transition:background var(--sp-hover)}
.etapy li[data-done="true"]::before{background:var(--sp-gold)}
.etapy i{font-style:normal;color:var(--sp-action);font-size:14px;letter-spacing:2.2px;text-transform:uppercase}
.etapy h3{margin-top:6px;font-size:clamp(24px,2.3vw,30px)}
.etapy p{margin-top:10px;color:var(--sp-muted);font-size:17px;max-width:52ch}
@media(max-width:850px){.etapy-inner{grid-template-columns:1fr;gap:var(--sp-s5)}.etapy-aside{position:static}}
html[data-motion="off"] .etapy-aside{position:static}
@media(prefers-reduced-motion:reduce){.etapy-aside{position:static}}

/* ── OBIETNICE MARKI: ustalony wzorzec rycin (.cechy z ui.css) ──
   Tu tylko odstęp sekcji; rozmiar rycin, układ i najechanie (uniesienie 4 px
   z obrotem 1,5°) pochodzą z elementu „Ryciny marki”. */
.usp{padding-block:var(--sp-s5)}
.usp .cechy{margin-top:0;padding-top:0;border-top:0}

/* ── ULUBIONE BIAŁKO: rycina zwierzęcia i nazwa mięsa ──── */
.bialka-lista{list-style:none;margin:var(--sp-s4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-s3)}
.bialka-lista li{flex:0 1 196px;display:grid}
.bialko{display:grid;justify-items:center;gap:10px;padding:18px 10px 16px;border:1px solid transparent;
  text-decoration:none;transition:background var(--sp-hover) var(--sp-ease),border-color var(--sp-hover) var(--sp-ease);border-radius:var(--sp-radius)}
.bialko img{width:132px;height:132px;object-fit:contain;transition:transform var(--sp-hover) var(--sp-ease)}
.bialko .sp-pen{font-size:18px;text-align:center;color:var(--sp-ink)}
.bialko:hover{background:var(--sp-soft);border-color:var(--sp-hair)}
@media(hover:hover) and (pointer:fine){.bialko:hover img{transform:translateY(-4px) rotate(-1.5deg)}}
html[data-motion="off"] .bialko:hover img{transform:none}

/* ── PRÓBKI: wąski pas na lnie ─────────────────────────── */
.probki{padding-block:var(--sp-s4)}
.probki-inner{display:grid;grid-template-columns:1fr auto;gap:var(--sp-s4);align-items:center;
  padding:var(--sp-s4);background:var(--sp-soft);border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
.probki-inner h2{margin-top:4px}
.probki-inner>div>p{margin-top:12px;max-width:52ch}

/* ── PROGRAM LOJALNOŚCIOWY: pas na zieleni ─────────────── */
.lojalnosc{background:var(--sp-ink);color:var(--sp-paper)}
.lojalnosc h2 em{color:var(--sp-gold-light)}
.lojalnosc .sp-kicker{color:var(--sp-gold-light)}
.lojalnosc .sp-head p{color:#CFC9BC}
.lojalnosc-siatka{list-style:none;margin:var(--sp-s4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-s4)}
.lojalnosc-siatka li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.lojalnosc-siatka .sp-icon{grid-row:span 2;color:var(--sp-gold-light)}
.lojalnosc-siatka b{font-family:var(--sp-serif);font-size:19px;line-height:1.3}
.lojalnosc-siatka p{font-size:16px;color:#CFC9BC}
.lojalnosc-stopka{display:flex;flex-wrap:wrap;gap:var(--sp-s3);align-items:center;justify-content:space-between;
  margin-top:var(--sp-s4);padding-top:var(--sp-s3);border-top:1px solid rgba(203,185,142,.28)}
.lojalnosc-stopka .sp-note{display:flex;gap:8px;align-items:flex-start;max-width:62ch;margin:0;color:#CFC9BC}

/* ── FAQ: pytania po lewej, pomoc po prawej ────────────── */
.faq-uklad{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-s5);align-items:start}
.faq-pomoc{padding:var(--sp-s4);background:var(--sp-soft);border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
/* na dużym ekranie karta jedzie z pytaniami — nagłówek strony ma 80 px, stąd 100 px */
@media(min-width:901px){.faq-pomoc{position:sticky;top:100px}}
.faq-pomoc h3{font-size:22px}
.faq-pomoc>p{margin-top:10px;font-size:17px;color:var(--sp-muted)}
.faq-pomoc ul{list-style:none;margin:var(--sp-s3) 0 0;padding:0;display:grid;gap:10px}
.faq-pomoc li{display:flex;gap:10px;align-items:center;font-size:17px}
/* godziny nie są linkiem, ale mają ten sam ton co linki w spoczynku — inaczej odstają */
.faq-pomoc li>span{color:var(--sp-action)}
.faq-pomoc li .sp-link{min-height:40px;padding:6px 0;font-size:17px}
.faq-pomoc .sp-icon{color:var(--sp-gold);flex:none}
.faq-pomoc-cta{margin-top:var(--sp-s3)}

/* ── KORZYŚCI ZAKUPÓW: pas czterech zasad ──────────────── */
.korzysci-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-s4);padding-block:var(--sp-s4)}
.korzysci-grid>div{display:grid;grid-template-columns:auto 1fr;gap:2px 12px}
.korzysci-grid .sp-icon{grid-row:span 2;color:var(--sp-gold)}
.korzysci-grid b{font-family:var(--sp-serif);font-size:19px}
.korzysci-grid p{font-size:16px;color:var(--sp-muted)}

@media(max-width:1080px){.bialka-lista li{flex-basis:184px}}
@media(max-width:900px){
  .korzysci-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lojalnosc-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .probki-inner,.faq-uklad{grid-template-columns:1fr}
}
@media(max-width:760px){.bialka-lista li{flex-basis:172px}}
@media(max-width:600px){
  .korzysci-grid,.lojalnosc-siatka{grid-template-columns:1fr}
  .bialka-lista{gap:10px}
  /* kafle rosną do szerokości rzędu (96-110 px): przy stałych 96 px podpis „z Wieprzowiną”
     (96 px przy 16 px) nie mieścił się i łamał na dwa wiersze; bez bocznego wcięcia od 360 px
     ma 100 px miejsca */
  .bialka-lista li{flex:1 1 96px;max-width:110px}
  .bialko{padding:12px 0 10px;gap:6px}
  .bialko img{width:96px;height:96px}
  .bialko .sp-pen{font-size:16px}
}

/* ── SEKCJE Z BLOKÓW (edycja z panelu, docs/02 13.09.2026) ────────────────
   Wzorce z patterns/ składają sekcje z bloków core. Znaczniki bloków różnią się
   od szablonów PHP, więc tu są tylko różnice: elementy dekoracyjne jako
   pseudo-elementy (w edytorze zostaje sama treść) i przyciski organiczne
   przepisane na znaczniki bloku przycisku (klasa siedzi na opakowaniu). */

/* Hero: woalka na zdjęciu i kreska nad nadtytułem */
.hero--bloki::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 72% at 50% 48%,rgba(9,28,20,.58) 0%,rgba(9,28,20,.42) 44%,rgba(9,28,20,0) 82%),
    rgba(14,42,31,.48)}
.hero--bloki .hero-foto{margin:0}
.hero--bloki .hero-foto img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 46%}
.hero--bloki .hero-tresc::before{content:'';width:56px;height:1px;background:var(--sp-gold-light);margin-bottom:20px}
.hero--bloki .hero-tresc>*{margin-block:0}
.hero--bloki .hero-lead{margin-top:22px}
.hero--bloki .hero-cta{margin-top:34px;gap:12px}

/* Przycisk organiczny z bloku: to samo co .sp-button.rustic, strzałka z maski */
.wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link{position:relative;isolation:isolate;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;min-height:48px;padding:12px 23px;font-size:18px;font-weight:400;line-height:1.2;
  text-decoration:none;color:var(--sp-surface);background:transparent;border:1px solid transparent;border-radius:var(--sp-radius);
  --fill:var(--sp-action);transition:color var(--sp-fast),transform var(--sp-hover) var(--sp-ease)}
.wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fill);
  transition:background var(--sp-hover);
  clip-path:polygon(.7% 4%,18% 1%,36% 2%,63% 0,85% 1%,99.2% 4%,100% 33%,99.6% 72%,99% 96%,77% 100%,49% 98%,21% 100%,1% 96%,0 65%)}
.wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link::after{content:'';flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--sp-hover) var(--sp-ease)}
.wp-block-button:is(.rustic--green,.is-style-organiczny-zielony)>.wp-block-button__link{--fill:var(--sp-ink)}
.wp-block-button:is(.rustic--inverse,.is-style-organiczny-kremowy)>.wp-block-button__link{--fill:var(--sp-paper);color:var(--sp-ink)}
.wp-block-button.rustic--cichy>.wp-block-button__link{--fill:var(--sp-soft);color:var(--sp-ink)}
.wp-block-button.rustic--b>.wp-block-button__link::before{clip-path:polygon(1.2% 3%,24% 0,47% 2.4%,71% .6%,92% 2%,100% 5%,
    99.4% 30%,100% 58%,99.2% 95%,84% 100%,61% 97.6%,38% 100%,15% 98%,.6% 95%,0 62%,.8% 28%)}
.hero-cta .wp-block-button.rustic--b>.wp-block-button__link{--fill:var(--sp-action);color:var(--sp-surface)}
@media(hover:hover) and (pointer:fine){
  .wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link:hover{--fill:var(--sp-ink);color:var(--sp-surface);transform:translateY(-2px)}
  .wp-block-button:is(.rustic--green,.is-style-organiczny-zielony)>.wp-block-button__link:hover{--fill:var(--sp-ink-hover)}
  .wp-block-button:is(.rustic--inverse,.is-style-organiczny-kremowy)>.wp-block-button__link:hover{--fill:#E3DAC8;color:var(--sp-ink)}
  .wp-block-button.rustic--cichy>.wp-block-button__link:hover{--fill:var(--sp-action);color:var(--sp-surface)}
  .hero-cta .wp-block-button.rustic--b>.wp-block-button__link:hover{--fill:#8A7245}
  .wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link:hover::after{transform:translateX(4px)}
}
html[data-motion="off"] .wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link:hover{transform:none}
/* Zerowanie marginesów dzieci zabrało nadtytułowi jego 22 px pod spodem
   (hero z bloków było o 22 px niższe niż wersja z szablonu). */
.hero--bloki .hero-tresc>.hero-kicker{margin-bottom:22px}
/* Edytor: każdy blok dostaje position:relative z reguły o dwóch klasach, a obraz
   inline height:auto - zdjęcie leżało w przepływie i tekst lądował pod nim. */
.hero.hero--bloki>.hero-foto{position:absolute;inset:0;z-index:0}
.editor-styles-wrapper .hero--bloki .hero-foto img{height:100%!important}
/* Strzałka jak .sp-icon--sm w szablonie (18 px) - przy 16 px przyciski
   z bloków były o 2 px węższe. */
.wp-block-button:is(.rustic,.is-style-organiczny,.is-style-organiczny-zielony,.is-style-organiczny-kremowy)>.wp-block-button__link::after{width:18px;height:18px}

/* Ryciny pod hero z bloków: pozycje są grupami, nie li. Odstępy jak w szablonie -
   10 px pod ryciną, tytuł i opis bez przerwy (w szablonie siedziały w jednym span). */
.cechy--bloki>.cechy-poz{display:grid;grid-template-rows:auto;align-content:start;justify-items:center;text-align:center;gap:0}
.cechy--bloki .cechy-rycina{margin:0 0 10px}
.cechy--bloki .cechy-rycina img{width:140px;height:140px;object-fit:contain;transition:transform var(--sp-hover) var(--sp-ease)}
.cechy--bloki .cechy-tytul{margin:0;font-size:19px;line-height:1.55;color:var(--sp-ink)}
.cechy--bloki .cechy-opis{margin:0}
@media(hover:hover) and (pointer:fine){.cechy--bloki>.cechy-poz:hover img{transform:translateY(-4px) rotate(-1.5deg)}}
html[data-motion="off"] .cechy--bloki>.cechy-poz:hover img{transform:none}
@media(max-width:420px){.cechy--bloki .cechy-rycina img{width:112px;height:112px}}

/* Kategorie z bloków: karta jest grupą, a link siedzi w tytule i obejmuje całą
   kartę pseudo-elementem. Reguła .kategorie a (karta-link z szablonu) łapałaby
   też link w tytule, stąd jej wyzerowanie. Podkreślenie pisakiem jak .sp-pen. */
.kategorie--bloki>.kategorie-karta{position:relative;display:block;border-top:1px solid var(--sp-gold);padding-top:var(--sp-s3)}
.kategorie--bloki .kategorie-karta .wp-block-image{margin:0}
.kategorie--bloki .kategorie-karta img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--sp-s3);
  transition:transform var(--sp-hover) var(--sp-ease)}
.kategorie--bloki h3 a{display:inline;padding:0 0 5px;border:0;text-decoration:none;color:inherit;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C57 3.4 126 5.1 199 3.5' fill='none' stroke='%23735F38' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position:left bottom;background-repeat:no-repeat;background-size:0% 6px;transition:background-size 420ms var(--sp-ease)}
/* W edytorze arkusz dostaje prefiks .editor-styles-wrapper, więc ta reguła tam nie
   działa - nakładka nie zasłania zdjęcia i opisu przy zaznaczaniu bloków. */
body:not(.editor-styles-wrapper) .kategorie--bloki h3 a::after{content:'';position:absolute;inset:0}
.kategorie--bloki h3 a:focus-visible{background-size:100% 6px}
@media(hover:hover) and (pointer:fine){
  .kategorie--bloki>.kategorie-karta:hover h3 a{background-size:100% 6px}
  .kategorie--bloki>.kategorie-karta:hover img{transform:scale(1.02)}
  .kategorie--bloki>.kategorie-karta:hover .kr-2{filter:saturate(1.06) brightness(1.02)}
}
@media(hover:none){.kategorie--bloki h3 a{background-size:100% 6px}}
html[data-motion="off"] .kategorie--bloki h3 a{transition:none}
html[data-motion="off"] .kategorie--bloki>.kategorie-karta:hover img{transform:none}

/* Korzyści z bloków: ikony z zestawu SVG (<use>) nie zapiszą się w bloku, więc są
   maską CSS wybieraną klasą pozycji. Pseudo-element jest pierwszym elementem siatki
   pozycji - ten sam układ co svg + b + p w szablonie. Linie to blok separatora. */
.korzysci .wp-block-separator.sp-rule{width:auto;height:1px;margin:0;border:0;background:var(--sp-hair);opacity:1}
.korzysci--bloki>.korzysci-poz::before{content:'';grid-row:span 2;width:22px;height:22px;background:var(--sp-gold);
  -webkit-mask:var(--sp-ikona) center/contain no-repeat;mask:var(--sp-ikona) center/contain no-repeat}
.korzysci--bloki .korzysci-tytul{font-size:19px;color:var(--sp-ink)}
.ikona-truck{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M14 9h4l3 3v5a1 1 0 0 1-1 1h-1'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E")}
.ikona-repeat{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E")}
.ikona-paw{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='8' cy='7.4' rx='2.1' ry='2.9' transform='rotate(-15 8 7.4)'/%3E%3Cellipse cx='16' cy='7.4' rx='2.1' ry='2.9' transform='rotate(15 16 7.4)'/%3E%3Cellipse cx='4' cy='13.2' rx='1.9' ry='2.5' transform='rotate(-28 4 13.2)'/%3E%3Cellipse cx='20' cy='13.2' rx='1.9' ry='2.5' transform='rotate(28 20 13.2)'/%3E%3Cpath d='M12 12.6c3.2 0 5.7 2.8 5.7 5.5 0 1.7-1.3 2.9-2.9 2.9-1.1 0-1.9-.6-2.8-.6s-1.7.6-2.8.6c-1.6 0-2.9-1.2-2.9-2.9 0-2.7 2.5-5.5 5.7-5.5Z'/%3E%3C/svg%3E")}
.ikona-lock{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}

/* Ulubione białko z bloków: kafel to grupa z klasą .bialko (wygląd i hover
   z szablonu), podpis z linkiem do tagu rozciągniętym na cały kafel. Podpis ma
   5 px pod tekstem jak span .sp-pen w szablonie - kafle zachowują wysokość. */
.bialka--bloki>.bialko--blok{position:relative;flex:0 1 196px}
.bialko--blok .wp-block-image{margin:0}
.bialko--blok .bialko-nazwa{margin:0;padding-bottom:5px;font-size:18px;text-align:center;color:var(--sp-ink)}
.bialko--blok .bialko-nazwa a{padding-bottom:5px;text-decoration:none;color:inherit;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C57 3.4 126 5.1 199 3.5' fill='none' stroke='%23735F38' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position:left bottom;background-repeat:no-repeat;background-size:0% 6px;transition:background-size 420ms var(--sp-ease)}
body:not(.editor-styles-wrapper) .bialko--blok .bialko-nazwa a::after{content:'';position:absolute;inset:0}
.bialko--blok .bialko-nazwa a:focus-visible{background-size:100% 6px}
@media(hover:hover) and (pointer:fine){.bialko--blok:hover .bialko-nazwa a{background-size:100% 6px}}
@media(hover:none){.bialko--blok .bialko-nazwa a{background-size:100% 6px}}
html[data-motion="off"] .bialko--blok .bialko-nazwa a{transition:none}
@media(max-width:1080px){.bialka--bloki>.bialko--blok{flex-basis:184px}}
@media(max-width:760px){.bialka--bloki>.bialko--blok{flex-basis:172px}}
@media(max-width:600px){
  .bialka--bloki>.bialko--blok{flex:1 1 96px;max-width:110px;padding-inline:0}
  .bialko--blok .bialko-nazwa{font-size:16px}
}
/* W szablonie span.sp-pen jest elementem siatki, więc blokowym: jedno podkreślenie
   pod całym podpisem, 5 px pod wierszem. Link inline dawał kreskę 3 px bliżej
   tekstu i osobną pod każdym wierszem zawiniętego podpisu („z / Wieprzowiną”). */
.bialko--blok .bialko-nazwa{padding-bottom:0}
.bialko--blok .bialko-nazwa a{display:inline-block;vertical-align:top}
/* Podpis rozciągnięty na wysokość rzędu jak span.sp-pen (element siatki) w szablonie:
   gdy sąsiedni podpis ma dwa wiersze, podkreślenie stoi na dole rzędu, nie 12 px wyżej
   (sprawdzone na stagingu: ramki podpisów identyczne z wersją ze skrótu). */
.bialko--blok .bialko-nazwa{display:grid;justify-items:center}
/* Przycisk cichy z bloku przy fokusie klawiatury: jak .sp-button.rustic--cichy
   w szablonie - sepia z białym tekstem (jaśniejsze złoto dawało kontrast 3,4). */
.wp-block-button.rustic--cichy>.wp-block-button__link:focus-visible{--fill:var(--sp-action);color:var(--sp-surface)}

/* Dobór karmy z bloków: karta psa jest grupą, link w tytule obejmuje całą kartę
   (jak w kategoriach). Reguła .psy a z szablonu (karta-link) łapałaby też link
   w tytule, stąd jej wyzerowanie. Zdjęcie z maską .kr-2 na figurze. */
.psy--bloki>.psy-karta{position:relative}
.psy--bloki .psy-karta .wp-block-image{margin:0}
.psy--bloki .psy-karta img{display:block;height:auto}
.psy--bloki h3 a{display:inline;padding:0;border:0;text-decoration:none;color:inherit}
body:not(.editor-styles-wrapper) .psy--bloki h3 a::after{content:'';position:absolute;inset:0}
@media(hover:hover) and (pointer:fine){
  .psy--bloki>.psy-karta:hover img{transform:scale(1.02)}
  .psy--bloki>.psy-karta:hover h3{border-top-color:var(--sp-gold)}
  .psy--bloki>.psy-karta:hover .kr-2{filter:saturate(1.06) brightness(1.02)}
}
html[data-motion="off"] .psy--bloki>.psy-karta:hover img{transform:none}

/* ── Pozostałe sekcje z bloków (próbki, etapy, lojalność, poradnik, pytania) ──
   Wzorce patterns/sekcja-*.php. Tu tylko różnice znaczników bloków względem szablonów
   PHP: grupy zamiast li, maski ikon zamiast <use>, klasy zamiast stylów w linii. */

/* Ikony zestawu jako maski - te same ścieżki co w template-parts/sprite.php. */
.ikona-card{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E")}
.ikona-user{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E")}
.ikona-package{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4'/%3E%3Cpath d='M12 11v10'/%3E%3C/svg%3E")}
.ikona-calendar{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E")}
.ikona-heart{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E")}
.ikona-clock{--sp-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}

/* Bloki w tych sekcjach: odstępy wyłącznie z reguł sekcji, bez domyślnych marginesów bloków. */
/* Próbki bez zerowania: h2 (4 px) i opis (12 px) mają marginesy z reguł .probki-inner. */
.etapy-aside>*:not(.sp-kicker),.etapy--bloki .etap>*,.lojalnosc--bloki .lojalnosc-poz>*,
.lojalnosc-stopka>*,.sp-faq--bloki .wp-block-details,.faq-pomoc>*{margin-block:0}

/* Próbki: przycisk z bloku po prawej, jak p.probki-cta w szablonie. */
.probki--bloki .probki-cta{margin:0;justify-content:flex-end}
/* W jednej kolumnie (≤900 px) przycisk stoi pod tekstem przy lewej krawędzi, jak w szablonie. */
@media(max-width:900px){.probki--bloki .probki-cta{justify-content:flex-start}}

/* Etapy: odstępy z dawnych stylów w linii szablonu. */
.etapy-aside .etapy-notka{margin-top:var(--sp-s2);max-width:38ch;font-size:18px}
.etapy-aside .etapy-cta{margin-top:var(--sp-s3)}
.etapy-aside .etapy-foto{margin-top:var(--sp-s4)}
/* Kadr 4:3 jak img 900×675 w szablonie i makiecie - blok pokazywał plik w oryginalnych proporcjach (kwadrat). */
.etapy-aside .etapy-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Pozycja osi: grupa .etap zamiast li - kropka i stan „zrobione” jak w szablonie. */
.etapy--bloki>.etap{position:relative}
.etapy--bloki>.etap::before{content:'';position:absolute;left:calc(-1 * clamp(48px,5vw,72px) + 11px);top:13px;width:11px;height:11px;
  border:1px solid var(--sp-gold);border-radius:50%;background:var(--sp-paper);transition:background var(--sp-hover)}
.etapy--bloki>.etap[data-done="true"]::before{background:var(--sp-gold)}
/* W szablonie „Etap I” to <i> w wierszu li (wiersz 28 px) - akapit bloku dostaje ten sam wiersz, h3 stoi 34 px niżej jak tam. */
.etapy--bloki .etap-nr{margin:0;max-width:none;line-height:28px;color:var(--sp-action);font-size:14px;letter-spacing:2.2px;text-transform:uppercase}
.etapy--bloki .etap>h3{margin-top:6px}
.etapy--bloki .etap>p:not(.etap-nr){margin-top:10px}

/* Lojalność: pozycja jako grupa z ikoną z maski (grid-row jak svg w li). */
.lojalnosc--bloki>.lojalnosc-poz{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.lojalnosc--bloki>.lojalnosc-poz::before{content:'';grid-row:span 2;width:24px;height:24px;background:var(--sp-gold-light);
  -webkit-mask:var(--sp-ikona) center/contain no-repeat;mask:var(--sp-ikona) center/contain no-repeat}
.lojalnosc--bloki .lojalnosc-tytul{font-size:19px;line-height:1.3;color:var(--sp-paper)}
.lojalnosc-stopka>.sp-note.ikona-clock::before{content:'';flex:none;width:18px;height:18px;margin-top:4px;background:currentColor;
  -webkit-mask:var(--sp-ikona) center/contain no-repeat;mask:var(--sp-ikona) center/contain no-repeat}

/* Poradnik: skrót z kartami między nagłówkiem a przyciskiem. */
#poradnik .wpisy{margin-top:0}

/* Pytania: blok Szczegóły w wyglądzie .sp-faq; strzałka z maski zamiast <svg> w summary. */
.sp-faq--bloki summary::after{content:'';flex:none;width:24px;height:24px;margin-top:5px;background:var(--sp-action);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--sp-hover) var(--sp-ease)}
.sp-faq--bloki details[open] summary::after{transform:rotate(180deg)}
.sp-faq--bloki .sp-faq-answer{margin:0}
.faq-pomoc>p{margin-top:10px}
.faq-pomoc .faq-pomoc-cta{margin-top:var(--sp-s3)}

/* Przycisk z obrysem z bloku - wygląd .sp-button.sp-button--secondary z ui.css. */
.wp-block-button.sp-przycisk-obrys>.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 23px;font-size:18px;font-weight:400;line-height:1.2;text-decoration:none;
  color:var(--sp-action);background:transparent;border:1px solid var(--sp-action);border-radius:var(--sp-radius);
  transition:background var(--sp-fast),border-color var(--sp-fast),color var(--sp-fast)}
/* Strzałka jak svg .sp-icon--sm.sp-icon--arrow w szablonie (18 px, 10 px od tekstu). */
.wp-block-button.sp-przycisk-obrys>.wp-block-button__link::after{content:'';flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--sp-hover) var(--sp-ease)}
@media(hover:hover) and (pointer:fine){
  .wp-block-button.sp-przycisk-obrys>.wp-block-button__link:hover{background:var(--sp-soft);border-color:var(--sp-ink);color:var(--sp-ink)}
  .wp-block-button.sp-przycisk-obrys>.wp-block-button__link:hover::after{transform:translateX(3px)}
}
html[data-motion="off"] .wp-block-button.sp-przycisk-obrys>.wp-block-button__link:hover::after{transform:none}