/* Spiżarnia Pupila — warstwa 2: układ i komponenty
   Bez wartości literalnych poza tokenami z tokens.css (wyjątki opisane komentarzem). */

/* ── UKŁAD ─────────────────────────────────────────── */
.sp-wrap{max-width:var(--sp-wrap);margin-inline:auto;padding-inline:var(--sp-pad)}
.sp-section{padding-block:var(--sp-section)}
.sp-section--tight{padding-block:var(--sp-s6)}
.sp-narrow{max-width:720px}
.sp-kicker{font-size:14px;letter-spacing:1.3px;text-transform:uppercase;color:var(--sp-action);margin-bottom:var(--sp-s2);
  display:flex;align-items:center;gap:14px}
.sp-kicker::before{content:'';width:34px;height:1px;background:var(--sp-hair-strong);flex:none}

.sp-kicker--bare{display:block}
.sp-kicker--bare::before{display:none}
.sp-lead{font-size:var(--sp-lead);line-height:1.4;color:var(--sp-ink)}
.sp-muted{color:var(--sp-muted)}
.sp-note{font-size:16px;color:var(--sp-muted)}
em,.sp-italic{font-style:italic}
.sp-head{max-width:760px;margin-bottom:var(--sp-s5)}
.sp-head p{margin-top:var(--sp-s2);font-size:19px;color:var(--sp-muted)}
.sp-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-s4);align-items:end}
@media(max-width:850px){.sp-head--split{grid-template-columns:1fr;align-items:start}}

/* pas pełnej szerokości z rozdartymi krawędziami */

 /* czytelny opis na zieleni */


/* fotografia w organicznym obrysie */

/* ── IKONY ─────────────────────────────────────────── */
.sp-icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sp-icon--sm{width:18px;height:18px}

/* ── PRZYCISKI ─────────────────────────────────────── */
.sp-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 23px;font-size:18px;line-height:1.2;text-decoration:none;
  border:1px solid transparent;border-radius:var(--sp-radius);background:var(--sp-action);color:var(--sp-surface);
  position:relative;transition:background var(--sp-fast),color var(--sp-fast),border-color var(--sp-fast),
    transform var(--sp-hover) var(--sp-ease),box-shadow var(--sp-hover)}
.sp-button--green{background:var(--sp-ink)}
.sp-button--secondary{background:transparent;color:var(--sp-action);border-color:var(--sp-action)}
.sp-button--inverse{background:var(--sp-paper);color:var(--sp-ink)}
.sp-button--sm{min-height:44px;padding:9px 16px;font-size:17px}
.sp-button--full{width:100%}
.sp-button .sp-icon{transition:transform var(--sp-hover) var(--sp-ease)}

@media(hover:hover) and (pointer:fine){
  .sp-button:not(:disabled):not([aria-busy="true"]):not(.sp-link):not(.rustic):hover{
    transform:translateY(-2px);box-shadow:inset 0 -2px 0 var(--sp-gold-light)}
  .sp-button:not(:disabled):not(.sp-link):not(.rustic):not(.sp-button--secondary):not(.sp-button--inverse):not(.sp-button--green):hover{background:var(--sp-ink)}
  .sp-button--green:not(:disabled):not(.rustic):hover{background:var(--sp-ink-hover)}
  .sp-button--secondary:not(:disabled):hover{background:var(--sp-soft);border-color:var(--sp-ink);color:var(--sp-ink)}
  .sp-button--inverse:not(:disabled):hover{background:#E3DAC8} /* jedyny odcień kremu dla hover na zieleni */
  .sp-button:hover .sp-icon--arrow{transform:translateX(4px)}
}
.sp-button:active{transform:none}
.sp-button:disabled,.sp-button[aria-disabled="true"]{
  background:var(--sp-disabled-bg);color:var(--sp-disabled-text);border-color:var(--sp-disabled-line);
  transform:none;box-shadow:none}
.sp-button[aria-busy="true"]{transform:none;box-shadow:none;cursor:progress}
/* zajęty przycisk (np. dodawanie do koszyka, DS §20.6): pierścień jak .sp-loader w barwach na zieleni,
   rozmiar przycisku trzyma skrypt; bez ruchu przy ograniczeniu animacji zostaje statyczny pierścień */
.sp-button:not(.rustic)[aria-busy="true"]::before{content:'';width:18px;height:18px;flex:none;box-sizing:border-box;
  border-radius:50%;border:1.5px solid var(--sp-hair-ink);border-top-color:var(--sp-gold-light);animation:sp-spin 1.2s linear infinite}
.sp-button--secondary[aria-busy="true"]::before{border-color:var(--sp-line);border-top-color:var(--sp-action)}
@media(prefers-reduced-motion:reduce){.sp-button[aria-busy="true"]::before{animation:none}}
html[data-motion="off"] .sp-button[aria-busy="true"]::before{animation:none}
/* Woo dokleja „Zobacz koszyk” pod przyciskiem z listy - link do koszyka jest w powiadomieniu */
.sp-product-foot .added_to_cart{display:none}

/* CTA wizerunkowe — nieregularne jest wyłącznie tło */
.sp-button.rustic{background:transparent;border-color:transparent;color:var(--sp-surface);--fill:var(--sp-action);isolation:isolate}
.sp-button.rustic::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%)}
.sp-button.rustic--green{--fill:var(--sp-ink)}
.sp-button.rustic--inverse{--fill:var(--sp-paper);color:var(--sp-ink)}
/* cichy: w spoczynku ton lnu z atramentowym tekstem, po najechaniu i przy fokusie
   ciemniejsze złoto (--sp-action) z białym tekstem — jaśniejsze złoto dawało pod bielą
   kontrast 3,4, poniżej progu 4,5. Do wejść w listę („Wszystkie receptury”,
   „Wszystkie wpisy”) — spokojniejszy niż zielone CTA, ale nadal organiczny. */
.sp-button.rustic--cichy{--fill:var(--sp-soft);color:var(--sp-ink)}
.sp-button.rustic--cichy:focus-visible{--fill:var(--sp-action);color:var(--sp-surface)}
.sp-button.rustic--b::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%)}
@media(hover:hover) and (pointer:fine){
  .sp-button.rustic:hover{--fill:var(--sp-ink);box-shadow:none}
  .sp-button.rustic--green:hover{--fill:var(--sp-ink-hover)}
  .sp-button.rustic--inverse:hover{--fill:#E3DAC8}
  .sp-button.rustic--cichy:hover{--fill:var(--sp-action);color:var(--sp-surface)}
}

/* przycisk narzędziowy (zamykanie panelu, drobne akcje) — używany też przez panel koszyka,
   dlatego musi być w ui.css, a nie w arkuszu stron roboczych */
.sp-tool:hover,.sp-header[data-top="true"] .sp-nav a:hover{color:var(--sp-gold-light)}
.sp-tools{display:flex;align-items:center;gap:4px}
.sp-tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;
  background:none;border:0;text-decoration:none;color:inherit;border-radius:var(--sp-radius);transition:color var(--sp-fast)}
.sp-tool:hover{color:var(--sp-action)}
.sp-tools{margin-left:auto}
.sp-tool--search,.sp-tool--account{display:none}
.sp-tool{min-width:44px}

/* ── ODNOŚNIK (.sp-link) ─────────────────────────────────
   Link i przycisk tekstowy. W spoczynku prosta włoskowata linia (::after),
   po najechaniu zwija się ona w prawo, a DOPIERO POTEM rysuje się ślad długopisem
   (tło elementu). Rozdzielenie na dwie warstwy i opóźnienie sprawiają, że linie
   nigdy nie są widoczne naraz — wcześniej przez ułamek sekundy się gryzły.
   Padding i 48 px wysokości zostają także w stanie wyłączonym. */
.sp-link{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  padding:12px 0;min-height:48px;color:var(--sp-action);text-decoration:none;box-shadow:none;transform:none;cursor:pointer;
  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 6px;background-repeat:no-repeat;background-size:0% 6px;
  transition:background-size 200ms var(--sp-ease),color var(--sp-hover) var(--sp-ease)}
.sp-link::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--sp-gold);
  transform:scaleX(1);transform-origin:right center;transition:transform 160ms var(--sp-ease) 200ms}
.sp-link .sp-icon{transition:transform var(--sp-hover) var(--sp-ease)}
/* stan aktywny: najpierw znika włoskowata (160 ms), ślad rusza z opóźnieniem 170 ms */
.sp-link:hover,.sp-link:focus-visible,a:hover .sp-link,a:focus-visible .sp-link{
  color:var(--sp-ink);background-size:100% 6px;transition-delay:170ms,0ms}
.sp-link:hover::after,.sp-link:focus-visible::after,a:hover .sp-link::after,a:focus-visible .sp-link::after{
  transform:scaleX(0);transition-delay:0ms}
@media(hover:hover) and (pointer:fine){
  .sp-link:hover .sp-icon--arrow,a:hover .sp-link .sp-icon--arrow{transform:translateX(3px)}
}
.sp-link:active{color:var(--sp-ink)}
/* na zieleni: złoto zamiast sepii, żeby linia była widoczna */
.sp-link--inverse,.on-ink .sp-link,.lojalnosc .sp-link{color:var(--sp-paper);
  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='%23CBB98E' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E")}
.sp-link--inverse::after,.on-ink .sp-link::after,.lojalnosc .sp-link::after{background:var(--sp-gold-light)}
.sp-link--inverse:hover,.on-ink .sp-link:hover,.lojalnosc .sp-link:hover{color:var(--sp-gold-light)}
.sp-link:disabled,.sp-link[aria-disabled="true"]{color:var(--sp-disabled-text);background-image:none;cursor:default}
.sp-link:disabled::after,.sp-link[aria-disabled="true"]::after{display:none}
html[data-motion="off"] .sp-link,html[data-motion="off"] .sp-link::after{transition:none}
html[data-motion="off"] .sp-link:hover .sp-icon--arrow{transform:none}

/* ślad długopisem pod każdą linią */
.sp-pen{display:inline;padding-bottom:5px;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)}
a:focus-visible .sp-pen{background-size:100% 6px}
@media(hover:hover) and (pointer:fine){a:hover .sp-pen{background-size:100% 6px}}
@media(hover:none){.sp-pen{background-size:100% 6px}}
html[data-motion="off"] .sp-pen{transition:none}

/* ── NAGŁÓWEK (.sp-naglowek) ─────────────────────────
   Zaakceptowany w rundzie 19. Znaczniki: narzedzia/naglowek.py; zachowanie: app.js, sekcja „Nagłówek”.
   Reaguje na szerokość SAMEGO siebie (container queries); dolny pasek na telefonie — media query 760 px. */
/* ── rozdarcia — te same rysunki co system krawędzi (torn.css), ale bez wyłączania
   na telefonie: rozdarty nagłówek i arkusz mają być rozdarte także tam ── */
.sp-naglowek-rozdarcie-dol{clip-path:polygon(0% 0px,100% 0px,100.00% calc(100% - 3.3px),99.47% calc(100% - 2.45px),98.95% calc(100% - 2.09px),98.42% calc(100% - 2.72px),97.89% calc(100% - 2.64px),97.37% calc(100% - 2.3px),96.84% calc(100% - 2.57px),96.32% calc(100% - 2.82px),95.79% calc(100% - 3.47px),95.79% calc(100% - 2.25px),95.26% calc(100% - 3.57px),94.74% calc(100% - 4.0px),94.21% calc(100% - 3.11px),93.68% calc(100% - 3.32px),93.16% calc(100% - 3.69px),92.63% calc(100% - 3.34px),92.11% calc(100% - 3.25px),91.58% calc(100% - 3.71px),91.05% calc(100% - 4.46px),90.53% calc(100% - 3.41px),90.00% calc(100% - 3.84px),89.47% calc(100% - 4.26px),88.95% calc(100% - 3.77px),88.42% calc(100% - 4.18px),87.89% calc(100% - 3.68px),87.37% calc(100% - 3.49px),86.84% calc(100% - 4.08px),86.32% calc(100% - 4.6px),85.79% calc(100% - 4.02px),85.26% calc(100% - 3.53px),84.74% calc(100% - 3.79px),84.21% calc(100% - 4.16px),83.68% calc(100% - 4.14px),83.16% calc(100% - 3.43px),82.63% calc(100% - 4.4px),82.11% calc(100% - 4.13px),81.58% calc(100% - 3.61px),81.05% calc(100% - 4.28px),80.53% calc(100% - 4.04px),80.00% calc(100% - 4.38px),79.47% calc(100% - 3.8px),78.95% calc(100% - 3.56px),78.42% calc(100% - 2.71px),77.89% calc(100% - 3.36px),77.37% calc(100% - 3.99px),76.84% calc(100% - 2.97px),76.32% calc(100% - 3.19px),75.79% calc(100% - 2.86px),75.26% calc(100% - 3.17px),74.74% calc(100% - 2.85px),74.21% calc(100% - 3.68px),73.68% calc(100% - 3.91px),73.68% calc(100% - 1.78px),73.16% calc(100% - 4.09px),72.63% calc(100% - 4.36px),72.11% calc(100% - 3.89px),71.58% calc(100% - 4.22px),71.05% calc(100% - 4.14px),70.53% calc(100% - 4.24px),70.00% calc(100% - 3.64px),69.47% calc(100% - 3.26px),68.95% calc(100% - 3.89px),68.42% calc(100% - 4.02px),67.89% calc(100% - 4.11px),67.37% calc(100% - 3.04px),66.84% calc(100% - 3.66px),66.32% calc(100% - 3.87px),65.79% calc(100% - 3.38px),65.26% calc(100% - 3.62px),64.74% calc(100% - 4.06px),64.21% calc(100% - 4.22px),63.68% calc(100% - 4.2px),63.16% calc(100% - 4.22px),62.63% calc(100% - 4.02px),62.11% calc(100% - 4.16px),61.58% calc(100% - 4.2px),61.05% calc(100% - 3.14px),60.53% calc(100% - 3.96px),60.00% calc(100% - 4.13px),59.47% calc(100% - 4.48px),58.95% calc(100% - 4.0px),58.42% calc(100% - 3.79px),57.89% calc(100% - 4.41px),57.37% calc(100% - 4.07px),56.84% calc(100% - 3.79px),56.32% calc(100% - 3.93px),55.79% calc(100% - 4.13px),55.26% calc(100% - 4.24px),54.74% calc(100% - 4.31px),54.21% calc(100% - 4.05px),53.68% calc(100% - 3.3px),53.16% calc(100% - 4.53px),52.63% calc(100% - 3.84px),52.11% calc(100% - 3.47px),51.58% calc(100% - 2.75px),51.05% calc(100% - 2.66px),50.53% calc(100% - 2.92px),50.00% calc(100% - 2.59px),49.47% calc(100% - 3.62px),48.95% calc(100% - 4.16px),48.42% calc(100% - 4.27px),47.89% calc(100% - 4.27px),47.37% calc(100% - 3.35px),46.84% calc(100% - 3.29px),46.32% calc(100% - 3.48px),45.79% calc(100% - 4.5px),45.26% calc(100% - 3.6px),44.74% calc(100% - 3.13px),44.21% calc(100% - 3.81px),43.68% calc(100% - 3.29px),43.16% calc(100% - 3.34px),42.63% calc(100% - 3.55px),42.11% calc(100% - 4.47px),41.58% calc(100% - 3.67px),41.05% calc(100% - 3.59px),40.53% calc(100% - 4.19px),40.00% calc(100% - 3.76px),39.47% calc(100% - 4.34px),38.95% calc(100% - 4.2px),38.42% calc(100% - 4.26px),37.89% calc(100% - 3.18px),37.37% calc(100% - 3.51px),36.84% calc(100% - 3.28px),36.32% calc(100% - 2.09px),35.79% calc(100% - 2.47px),35.26% calc(100% - 2.56px),34.74% calc(100% - 2.81px),34.21% calc(100% - 2.63px),33.68% calc(100% - 2.95px),33.16% calc(100% - 2.74px),32.63% calc(100% - 1.97px),32.11% calc(100% - 2.11px),31.58% calc(100% - 1.64px),31.05% calc(100% - 2.67px),30.53% calc(100% - 3.32px),30.00% calc(100% - 2.77px),29.47% calc(100% - 2.57px),28.95% calc(100% - 2.04px),28.42% calc(100% - 2.63px),27.89% calc(100% - 3.09px),27.37% calc(100% - 2.48px),26.84% calc(100% - 2.03px),26.32% calc(100% - 2.58px),25.79% calc(100% - 2.51px),25.26% calc(100% - 2.46px),24.74% calc(100% - 1.99px),24.21% calc(100% - 1.69px),23.68% calc(100% - 2.36px),23.16% calc(100% - 3.13px),22.63% calc(100% - 3.76px),22.11% calc(100% - 3.38px),21.58% calc(100% - 2.59px),21.05% calc(100% - 2.94px),20.53% calc(100% - 1.92px),20.00% calc(100% - 1.71px),19.47% calc(100% - 1.91px),18.95% calc(100% - 3.09px),18.42% calc(100% - 1.37px),17.89% calc(100% - 1.34px),17.37% calc(100% - 1.72px),16.84% calc(100% - 1.32px),16.32% calc(100% - 1.43px),15.79% calc(100% - 1.03px),15.26% calc(100% - 1.67px),14.74% calc(100% - 1.6px),14.21% calc(100% - 2.46px),13.68% calc(100% - 3.82px),13.16% calc(100% - 3.11px),12.63% calc(100% - 4.4px),12.11% calc(100% - 4.23px),11.58% calc(100% - 3.93px),11.05% calc(100% - 3.88px),10.53% calc(100% - 2.81px),10.00% calc(100% - 3.75px),9.47% calc(100% - 3.0px),8.95% calc(100% - 3.29px),8.42% calc(100% - 2.85px),7.89% calc(100% - 2.59px),7.37% calc(100% - 1.66px),6.84% calc(100% - 1.43px),6.32% calc(100% - 1.86px),5.79% calc(100% - 1.91px),5.26% calc(100% - 2.82px),4.74% calc(100% - 2.02px),4.21% calc(100% - 2.3px),3.68% calc(100% - 2.7px),3.16% calc(100% - 2.95px),2.63% calc(100% - 2.36px),2.11% calc(100% - 1.5px),2.11% calc(100% - 0.2px),1.58% calc(100% - 2.64px),1.05% calc(100% - 2.04px),0.53% calc(100% - 2.86px),0.00% calc(100% - 2.98px))}
/* wyniki wyszukiwania: rozdarte boki i spód, prosty wierzch (leży pod rozdarciem nagłówka) */
.sp-naglowek-rozdarcie-boki{clip-path:polygon(0px 0px,100% 0px,calc(100% - 3.7px) 6.7%,calc(100% - 4.8px) 13.3%,calc(100% - 4.9px) 20.0%,calc(100% - 5.0px) 26.7%,calc(100% - 5.0px) 33.3%,calc(100% - 4.1px) 40.0%,calc(100% - 4.0px) 46.7%,calc(100% - 4.6px) 53.3%,calc(100% - 4.8px) 60.0%,calc(100% - 5.0px) 66.7%,calc(100% - 4.6px) 73.3%,calc(100% - 3.2px) 80.0%,calc(100% - 3.5px) 86.7%,calc(100% - 3.3px) 93.3%,100.00% calc(100% - 3.3px),99.47% calc(100% - 2.45px),98.95% calc(100% - 2.09px),98.42% calc(100% - 2.72px),97.89% calc(100% - 2.64px),97.37% calc(100% - 2.3px),96.84% calc(100% - 2.57px),96.32% calc(100% - 2.82px),95.79% calc(100% - 3.47px),95.79% calc(100% - 2.25px),95.26% calc(100% - 3.57px),94.74% calc(100% - 4.0px),94.21% calc(100% - 3.11px),93.68% calc(100% - 3.32px),93.16% calc(100% - 3.69px),92.63% calc(100% - 3.34px),92.11% calc(100% - 3.25px),91.58% calc(100% - 3.71px),91.05% calc(100% - 4.46px),90.53% calc(100% - 3.41px),90.00% calc(100% - 3.84px),89.47% calc(100% - 4.26px),88.95% calc(100% - 3.77px),88.42% calc(100% - 4.18px),87.89% calc(100% - 3.68px),87.37% calc(100% - 3.49px),86.84% calc(100% - 4.08px),86.32% calc(100% - 4.6px),85.79% calc(100% - 4.02px),85.26% calc(100% - 3.53px),84.74% calc(100% - 3.79px),84.21% calc(100% - 4.16px),83.68% calc(100% - 4.14px),83.16% calc(100% - 3.43px),82.63% calc(100% - 4.4px),82.11% calc(100% - 4.13px),81.58% calc(100% - 3.61px),81.05% calc(100% - 4.28px),80.53% calc(100% - 4.04px),80.00% calc(100% - 4.38px),79.47% calc(100% - 3.8px),78.95% calc(100% - 3.56px),78.42% calc(100% - 2.71px),77.89% calc(100% - 3.36px),77.37% calc(100% - 3.99px),76.84% calc(100% - 2.97px),76.32% calc(100% - 3.19px),75.79% calc(100% - 2.86px),75.26% calc(100% - 3.17px),74.74% calc(100% - 2.85px),74.21% calc(100% - 3.68px),73.68% calc(100% - 3.91px),73.68% calc(100% - 1.78px),73.16% calc(100% - 4.09px),72.63% calc(100% - 4.36px),72.11% calc(100% - 3.89px),71.58% calc(100% - 4.22px),71.05% calc(100% - 4.14px),70.53% calc(100% - 4.24px),70.00% calc(100% - 3.64px),69.47% calc(100% - 3.26px),68.95% calc(100% - 3.89px),68.42% calc(100% - 4.02px),67.89% calc(100% - 4.11px),67.37% calc(100% - 3.04px),66.84% calc(100% - 3.66px),66.32% calc(100% - 3.87px),65.79% calc(100% - 3.38px),65.26% calc(100% - 3.62px),64.74% calc(100% - 4.06px),64.21% calc(100% - 4.22px),63.68% calc(100% - 4.2px),63.16% calc(100% - 4.22px),62.63% calc(100% - 4.02px),62.11% calc(100% - 4.16px),61.58% calc(100% - 4.2px),61.05% calc(100% - 3.14px),60.53% calc(100% - 3.96px),60.00% calc(100% - 4.13px),59.47% calc(100% - 4.48px),58.95% calc(100% - 4.0px),58.42% calc(100% - 3.79px),57.89% calc(100% - 4.41px),57.37% calc(100% - 4.07px),56.84% calc(100% - 3.79px),56.32% calc(100% - 3.93px),55.79% calc(100% - 4.13px),55.26% calc(100% - 4.24px),54.74% calc(100% - 4.31px),54.21% calc(100% - 4.05px),53.68% calc(100% - 3.3px),53.16% calc(100% - 4.53px),52.63% calc(100% - 3.84px),52.11% calc(100% - 3.47px),51.58% calc(100% - 2.75px),51.05% calc(100% - 2.66px),50.53% calc(100% - 2.92px),50.00% calc(100% - 2.59px),49.47% calc(100% - 3.62px),48.95% calc(100% - 4.16px),48.42% calc(100% - 4.27px),47.89% calc(100% - 4.27px),47.37% calc(100% - 3.35px),46.84% calc(100% - 3.29px),46.32% calc(100% - 3.48px),45.79% calc(100% - 4.5px),45.26% calc(100% - 3.6px),44.74% calc(100% - 3.13px),44.21% calc(100% - 3.81px),43.68% calc(100% - 3.29px),43.16% calc(100% - 3.34px),42.63% calc(100% - 3.55px),42.11% calc(100% - 4.47px),41.58% calc(100% - 3.67px),41.05% calc(100% - 3.59px),40.53% calc(100% - 4.19px),40.00% calc(100% - 3.76px),39.47% calc(100% - 4.34px),38.95% calc(100% - 4.2px),38.42% calc(100% - 4.26px),37.89% calc(100% - 3.18px),37.37% calc(100% - 3.51px),36.84% calc(100% - 3.28px),36.32% calc(100% - 2.09px),35.79% calc(100% - 2.47px),35.26% calc(100% - 2.56px),34.74% calc(100% - 2.81px),34.21% calc(100% - 2.63px),33.68% calc(100% - 2.95px),33.16% calc(100% - 2.74px),32.63% calc(100% - 1.97px),32.11% calc(100% - 2.11px),31.58% calc(100% - 1.64px),31.05% calc(100% - 2.67px),30.53% calc(100% - 3.32px),30.00% calc(100% - 2.77px),29.47% calc(100% - 2.57px),28.95% calc(100% - 2.04px),28.42% calc(100% - 2.63px),27.89% calc(100% - 3.09px),27.37% calc(100% - 2.48px),26.84% calc(100% - 2.03px),26.32% calc(100% - 2.58px),25.79% calc(100% - 2.51px),25.26% calc(100% - 2.46px),24.74% calc(100% - 1.99px),24.21% calc(100% - 1.69px),23.68% calc(100% - 2.36px),23.16% calc(100% - 3.13px),22.63% calc(100% - 3.76px),22.11% calc(100% - 3.38px),21.58% calc(100% - 2.59px),21.05% calc(100% - 2.94px),20.53% calc(100% - 1.92px),20.00% calc(100% - 1.71px),19.47% calc(100% - 1.91px),18.95% calc(100% - 3.09px),18.42% calc(100% - 1.37px),17.89% calc(100% - 1.34px),17.37% calc(100% - 1.72px),16.84% calc(100% - 1.32px),16.32% calc(100% - 1.43px),15.79% calc(100% - 1.03px),15.26% calc(100% - 1.67px),14.74% calc(100% - 1.6px),14.21% calc(100% - 2.46px),13.68% calc(100% - 3.82px),13.16% calc(100% - 3.11px),12.63% calc(100% - 4.4px),12.11% calc(100% - 4.23px),11.58% calc(100% - 3.93px),11.05% calc(100% - 3.88px),10.53% calc(100% - 2.81px),10.00% calc(100% - 3.75px),9.47% calc(100% - 3.0px),8.95% calc(100% - 3.29px),8.42% calc(100% - 2.85px),7.89% calc(100% - 2.59px),7.37% calc(100% - 1.66px),6.84% calc(100% - 1.43px),6.32% calc(100% - 1.86px),5.79% calc(100% - 1.91px),5.26% calc(100% - 2.82px),4.74% calc(100% - 2.02px),4.21% calc(100% - 2.3px),3.68% calc(100% - 2.7px),3.16% calc(100% - 2.95px),2.63% calc(100% - 2.36px),2.11% calc(100% - 1.5px),2.11% calc(100% - 0.2px),1.58% calc(100% - 2.64px),1.05% calc(100% - 2.04px),0.53% calc(100% - 2.86px),0.00% calc(100% - 2.98px),3.1px 93.3%,4.5px 86.7%,5.0px 80.0%,5.0px 73.3%,5.0px 66.7%,4.4px 60.0%,4.5px 53.3%,4.8px 46.7%,3.9px 40.0%,3.3px 33.3%,2.4px 26.7%,3.2px 20.0%,2.9px 13.3%,1.6px 6.7%)}
.sp-naglowek-rozdarcie-gora{clip-path:polygon(0.00% 3.52px,0.53% 3.44px,1.05% 4.13px,1.58% 4.32px,2.11% 3.83px,2.63% 3.96px,3.16% 4.03px,3.68% 3.93px,4.21% 3.69px,4.74% 3.84px,5.26% 4.21px,5.79% 2.77px,6.32% 3.16px,6.84% 3.07px,7.37% 2.71px,7.89% 2.86px,8.42% 2.46px,8.95% 3.35px,9.47% 1.52px,9.47% 3.99px,10.00% 4.52px,10.53% 2.31px,10.53% 3.87px,11.05% 3.97px,11.58% 4.51px,12.11% 4.28px,12.63% 4.07px,13.16% 3.86px,13.68% 4.66px,14.21% 4.18px,14.74% 3.98px,15.26% 4.26px,15.79% 3.75px,16.32% 3.31px,16.84% 3.1px,17.37% 3.1px,17.89% 2.68px,18.42% 2.67px,18.95% 2.22px,19.47% 1.36px,20.00% 1.62px,20.53% 1.32px,21.05% 1.59px,21.58% 0.78px,22.11% 1.15px,22.63% 1.5px,23.16% 1.42px,23.68% 1.23px,24.21% 1.13px,24.74% 1.71px,25.26% 1.46px,25.79% 1.85px,26.32% 1.99px,26.84% 2.73px,27.37% 3.43px,27.89% 3.18px,28.42% 2.24px,28.95% 2.0px,29.47% 2.57px,30.00% 2.53px,30.53% 1.96px,31.05% 1.82px,31.58% 2.21px,32.11% 2.11px,32.63% 1.88px,33.16% 2.82px,33.68% 2.29px,34.21% 3.01px,34.74% 3.3px,35.26% 2.54px,35.79% 2.13px,36.32% 1.97px,36.84% 2.13px,37.37% 2.02px,37.89% 2.31px,38.42% 2.95px,38.95% 2.18px,39.47% 2.45px,40.00% 2.17px,40.53% 1.46px,41.05% 1.32px,41.58% 1.22px,42.11% 1.37px,42.63% 0.9px,43.16% 1.56px,43.68% 1.29px,44.21% 1.01px,44.74% 0.99px,45.26% 1.45px,45.79% 1.51px,46.32% 1.2px,46.84% 1.37px,47.37% 1.25px,47.89% 1.29px,48.42% 1.12px,48.95% 1.13px,49.47% 1.25px,50.00% 1.09px,50.53% 2.14px,51.05% 1.19px,51.58% 1.37px,52.11% 1.43px,52.63% 1.94px,53.16% 2.53px,53.68% 2.18px,54.21% 3.84px,54.74% 3.72px,55.26% 4.09px,55.79% 3.87px,56.32% 4.24px,56.84% 4.31px,57.37% 3.45px,57.89% 3.88px,58.42% 2.68px,58.95% 2.66px,59.47% 2.25px,60.00% 1.55px,60.53% 2.41px,61.05% 3.2px,61.58% 0.98px,61.58% 3.35px,62.11% 2.48px,62.63% 3.03px,63.16% 3.3px,63.68% 2.73px,64.21% 2.16px,64.74% 1.65px,65.26% 2.83px,65.79% 2.18px,66.32% 3.1px,66.84% 2.81px,67.37% 2.05px,67.89% 2.38px,68.42% 2.35px,68.95% 1.95px,69.47% 0.85px,70.00% 1.65px,70.53% 1.22px,71.05% 0.93px,71.58% 1.27px,72.11% 1.19px,72.63% 1.37px,73.16% 1.03px,73.68% 1.54px,74.21% 0.98px,74.74% 1.59px,75.26% 1.51px,75.79% 0.85px,76.32% 1.14px,76.84% 1.31px,77.37% 1.53px,77.89% 1.25px,78.42% 1.86px,78.95% 1.99px,79.47% 1.51px,80.00% 1.86px,80.53% 1.03px,81.05% 1.52px,81.58% 1.12px,82.11% 1.89px,82.63% 1.77px,83.16% 1.71px,83.68% 2.23px,84.21% 1.36px,84.74% 1.08px,85.26% 0.9px,85.79% 2.19px,86.32% 2.35px,86.84% 1.65px,87.37% 1.65px,87.89% 1.88px,88.42% 2.52px,88.95% 1.53px,89.47% 1.23px,90.00% 1.15px,90.53% 1.34px,91.05% 2.31px,91.58% 2.18px,92.11% 2.7px,92.63% 2.84px,93.16% 3.18px,93.68% 2.96px,94.21% 3.75px,94.74% 3.76px,95.26% 3.35px,95.79% 4.0px,96.32% 3.71px,96.84% 4.02px,97.37% 3.61px,97.89% 4.01px,98.42% 3.05px,98.95% 2.76px,99.47% 4.41px,100.00% 4.3px,100% 100%,0% 100%)}

/* ── nagłówek ────────────────────────────────────────────────── */
.sp-naglowek{container-type:inline-size;position:sticky;top:0;z-index:40;background:var(--sp-ink);color:var(--sp-paper);
  transition:transform var(--sp-hover) var(--sp-ease)}
/* chowa się razem z rozdarciem — samo -100% zostawiłoby u góry okna 12 px zielonego brzegu */
.sp-naglowek[data-hidden="true"]{transform:translateY(calc(-100% - 14px))}
/* podgląd (system.html): bez przyklejania */
.sp-naglowek--podglad{position:relative;z-index:20}
.sp-naglowek-licznik[data-bump="true"]{animation:sp-bump 420ms var(--sp-ease)}
@keyframes sp-bump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
/* :not(.sp-button) — kolor dziedziczony z panelu nie może przebić koloru przycisku */
.sp-naglowek a:not(.sp-button){color:inherit;text-decoration:none}
.sp-naglowek :focus-visible{outline:1px solid var(--sp-gold-light);outline-offset:3px}
.sp-naglowek-wnetrze{display:flex;align-items:center;gap:clamp(16px,3cqi,40px);padding:14px clamp(16px,4cqi,56px)}
.sp-naglowek-logo{flex:none}
.sp-naglowek-logo img{display:block;width:clamp(150px,17cqi,210px);height:auto}
.sp-naglowek-nav{margin-inline:auto}
.sp-naglowek-lista{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2.4cqi,30px)}
.sp-naglowek-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 2px;
  background:none;border:0;color:inherit;font:inherit;font-size:18px;cursor:pointer;transition:color var(--sp-hover) var(--sp-ease)}
.sp-naglowek-link::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--sp-gold-light);
  transform:scaleX(0);transform-origin:left;transition:transform var(--sp-hover) var(--sp-ease)}
.sp-naglowek-link:hover,.sp-naglowek-poz.is-otwarte>.sp-naglowek-link{color:var(--sp-gold-light)}
.sp-naglowek-link:hover::after,.sp-naglowek-poz.is-otwarte>.sp-naglowek-link::after{transform:scaleX(1)}
.sp-naglowek-link .sp-icon{transition:transform var(--sp-hover) var(--sp-ease)}
.sp-naglowek-poz.is-otwarte>.sp-naglowek-link .sp-icon{transform:rotate(180deg)}
.sp-naglowek-narzedzia{display:flex;align-items:center;gap:2px}
.sp-naglowek-narz{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;
  background:none;border:0;color:inherit;cursor:pointer;transition:color var(--sp-hover) var(--sp-ease)}
.sp-naglowek-narz:hover{color:var(--sp-gold-light)}
/* licznik to moneta (wyjątek funkcjonalny z key visualu), nie kapsułka — stąd 50% i stały kwadrat */
.sp-naglowek-licznik{position:absolute;top:5px;right:3px;width:20px;height:20px;aspect-ratio:1;padding:0;border-radius:50%;
  background:var(--sp-gold-light);color:var(--sp-ink);font-size:12px;display:grid;place-items:center;font-variant-numeric:tabular-nums}

/* Rozdarty spód nagłówka — zawsze. Osobny pasek pod nagłówkiem, nie clip-path na nim samym
   (ten obciąłby panele). z-index nad panelami: jasny panel wychodzi SPOD zielonego rozdarcia,
   więc brzeg zostaje widoczny także po otwarciu megamenu i wyszukiwania. */
.sp-naglowek-fredzla{display:block;position:absolute;left:0;right:0;top:100%;height:12px;margin-top:-1px;
  background:var(--sp-ink);z-index:40;pointer-events:none}

/* ── panele rozwijane (A) ────────────────────────────────────── */
.sp-naglowek-poz{position:static}
/* Panel jest przycięty równo ze spodem nagłówka (clip-path inset z wierzchem 0; boki i dół ujemne, żeby
   cień z drop-shadow się mieścił), a wysuwa się jego TREŚĆ. Wcześniej cały panel startował 6 px wyżej
   i przez chwilę jasny pasek wchodził na zielony nagłówek — to były poziome artefakty. */
.sp-naglowek-panel{position:absolute;left:0;right:0;top:100%;z-index:30;color:var(--sp-ink);
  visibility:hidden;opacity:0;clip-path:inset(0 -48px -96px -48px);
  transition:opacity 200ms var(--sp-ease),visibility 0s linear 200ms}
.sp-naglowek-panel>.sp-naglowek-mega{transform:translateY(-16px);transition:transform 260ms var(--sp-ease)}
.sp-naglowek-poz.is-otwarte>.sp-naglowek-panel{visibility:visible;opacity:1;transition-delay:0s}
.sp-naglowek-poz.is-otwarte>.sp-naglowek-panel>.sp-naglowek-mega{transform:none}
/* przełączanie Sklep ↔ Poradnik: zamykany panel znika od razu — dwa półprzezroczyste panele
   o różnej wysokości nakładały się i ich spody rysowały poziome linie */
.sp-naglowek-bez-przejscia>.sp-naglowek-panel,.sp-naglowek-bez-przejscia>.sp-naglowek-panel>.sp-naglowek-mega{transition:none}
/* cień rzuca rodzic przez drop-shadow — idzie za rozdarciem, box-shadow narysowałby prostokąt */
.sp-naglowek-panel--mega{filter:drop-shadow(0 16px 22px rgba(14,42,31,.14))}
.sp-naglowek-mega{background:var(--sp-paper)}
.sp-naglowek-panel a:not(.sp-button):hover{color:var(--sp-action)}
.sp-naglowek-mega-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);gap:clamp(20px,3cqi,48px);
  padding:calc(clamp(24px,3.5cqi,44px) + 12px) clamp(16px,4cqi,56px) clamp(40px,5cqi,60px)}
.sp-naglowek-kol-tytul{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--sp-action);margin:0 0 14px;font-weight:400}
.sp-naglowek-kol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:18px}
.sp-naglowek-wszystkie{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:16px;
  color:var(--sp-action)!important;border-bottom:1px solid var(--sp-hair);padding-bottom:2px}
.sp-naglowek-kafel{display:grid;gap:10px;align-content:start}
.sp-naglowek-kafel img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sp-naglowek-kafel b{font-weight:400;font-size:22px}
.sp-naglowek-kafel p{margin:0;color:var(--sp-muted);font-size:16px}
.sp-naglowek-kafel .sp-button{justify-self:start}
.sp-naglowek-wpisy{grid-column:span 2;display:grid;gap:16px}
.sp-naglowek-wpis{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.sp-naglowek-wpis img{width:120px;aspect-ratio:4/3;object-fit:cover}
.sp-naglowek-wpis b{font-weight:400;font-size:19px;line-height:1.25;display:block}
.sp-naglowek-wpis small{color:var(--sp-muted);font-size:14px}

/* ── wyszukiwarka (S2) ───────────────────────────────────────── */
.sp-naglowek-pole{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--sp-ink);padding-bottom:8px}
.sp-naglowek-pole input{flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;font-size:20px}
.sp-naglowek-pole input:focus{outline:none}
/* natywny krzyżyk pola wyszukiwania ukryty — był drugim „x” obok naszego „wyczyść” */
.sp-naglowek-pole input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.sp-naglowek-pole>.sp-icon{flex:none}
.sp-naglowek-wyczysc{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;
  background:none;border:0;color:inherit;cursor:pointer;opacity:.75;transition:opacity var(--sp-hover) var(--sp-ease)}
.sp-naglowek-wyczysc:hover{opacity:1}
.sp-naglowek-szukaj{display:none;flex:1;max-width:640px;margin-inline:auto}
.sp-naglowek.is-szukaj .sp-naglowek-nav{display:none}
/* pole sięga od góry do dołu nagłówka (ujemny margines znosi padding), więc wyniki z top:100%
   zaczynają się dokładnie na spodzie nagłówka — pod jego rozdarciem — i mają szerokość pola */
.sp-naglowek.is-szukaj .sp-naglowek-szukaj{display:flex;align-items:center;gap:14px;align-self:stretch;margin-block:-14px}
/* w trybie wyszukiwania lupa z narzędzi znika — w polu jest już jedna */
.sp-naglowek.is-szukaj [data-naglowek-szukaj]{display:none}
.sp-naglowek-szukaj form{flex:1;align-self:stretch;display:flex;align-items:center;position:relative}
.sp-naglowek-szukaj form>.sp-naglowek-pole{flex:1}
.sp-naglowek-szukaj .sp-naglowek-pole{border-bottom-color:rgba(203,185,142,.6)}
.sp-naglowek-szukaj .sp-naglowek-pole input{color:var(--sp-paper)}
.sp-naglowek-szukaj .sp-naglowek-pole input::placeholder{color:#CFC9BC}
.sp-naglowek-szukaj .sp-naglowek-pole>.sp-icon{color:var(--sp-gold-light)}
.sp-naglowek-szukaj .sp-naglowek-pole:focus-within{border-bottom-color:var(--sp-gold-light);box-shadow:0 1px 0 var(--sp-gold-light)}
/* wyjście z trybu wyszukiwania: słowo, nie drugi krzyżyk */
.sp-naglowek-anuluj{flex:none;min-height:44px;padding:0 4px;background:none;border:0;color:var(--sp-gold-light);font:inherit;font-size:16px;
  cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(203,185,142,.5)}
.sp-naglowek-anuluj:hover{color:var(--sp-paper)}
.sp-naglowek-wyniki-panel{position:absolute;left:-20px;right:-20px;top:100%;z-index:30;filter:drop-shadow(0 14px 20px rgba(14,42,31,.16))}
.sp-naglowek-wyniki-karta{background:var(--sp-paper);color:var(--sp-ink);padding:24px 24px 32px}
.sp-naglowek-wyniki-karta .sp-naglowek-kol-tytul{margin:6px 8px 8px}
.sp-naglowek-wyniki{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* Wiersz wyniku na bieli o nieregularnych czterech krawędziach — packshoty mają białe tło i na papierze
   odcinały się prostokątem. Rysunek krawędzi własny (niżej) — fala karty była tu za mocna.
   Na najechanie tylko uniesienie — biel się nie zmienia (ta sama zasada co przy karcie). */
.sp-naglowek-wynik a{position:relative;isolation:isolate;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:10px 14px;transition:transform var(--sp-hover) var(--sp-ease)}
/* Własny, drobny rysunek krawędzi wiersza. Fala karty (do 4,8 px) na polu wysokim na ~70 px wyginała się
   za mocno — tu do 1,6 px góra i dół, 1,2 px boki, gęste punkty, spokojne narożniki; w pikselach. */
.sp-naglowek-wynik a::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--sp-surface);
  clip-path:polygon(0.0% 0.0px,4.0% 0.47px,8.0% 1.44px,12.0% 1.6px,16.0% 1.37px,20.0% 1.57px,24.0% 1.17px,28.0% 0.51px,32.0% 0.49px,36.0% 0.11px,40.0% 0.0px,44.0% 0.3px,48.0% 0.76px,52.0% 0.55px,56.0% 1.06px,60.0% 1.16px,64.0% 0.99px,68.0% 1.12px,72.0% 1.4px,76.0% 1.58px,80.0% 1.0px,84.0% 0.85px,88.0% 1.38px,92.0% 1.6px,96.0% 0.8px,100.0% 0.0px,calc(100% - 1.2px) 16.7%,calc(100% - 0.96px) 33.3%,calc(100% - 1.2px) 50.0%,calc(100% - 1.2px) 66.7%,calc(100% - 1.14px) 83.3%,100.0% calc(100% - 0.0px),96.0% calc(100% - 0.0px),92.0% calc(100% - 0.0px),88.0% calc(100% - 0.52px),84.0% calc(100% - 0.92px),80.0% calc(100% - 0.7px),76.0% calc(100% - 0.13px),72.0% calc(100% - 0.17px),68.0% calc(100% - 0.17px),64.0% calc(100% - 0.0px),60.0% calc(100% - 0.43px),56.0% calc(100% - 0.0px),52.0% calc(100% - 0.4px),48.0% calc(100% - 0.69px),44.0% calc(100% - 0.55px),40.0% calc(100% - 0.79px),36.0% calc(100% - 0.21px),32.0% calc(100% - 0.41px),28.0% calc(100% - 0.81px),24.0% calc(100% - 0.6px),20.0% calc(100% - 1.2px),16.0% calc(100% - 1.41px),12.0% calc(100% - 1.1px),8.0% calc(100% - 1.12px),4.0% calc(100% - 0.76px),0.0% calc(100% - 0.0px),1.2px 83.3%,1.2px 66.7%,1.2px 50.0%,0.98px 33.3%,0.54px 16.7%)}
@media(hover:hover) and (pointer:fine){.sp-naglowek-wynik a:hover{transform:translateY(-2px)}}
html[data-motion="off"] .sp-naglowek-wynik a:hover{transform:none}
.sp-naglowek-wynik img{width:56px;height:56px;object-fit:contain;background:var(--sp-surface)}
.sp-naglowek-wynik b{font-weight:400;font-size:17px}
.sp-naglowek-wynik small{display:block;color:var(--sp-muted);font-size:14px}
.sp-naglowek-cena{font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-naglowek-wynik mark{background:rgba(203,185,142,.5);color:inherit;padding:0 1px}
.sp-naglowek-brak{color:var(--sp-muted);font-size:16px;margin:8px}

/* ── telefon: dolny pasek i arkusze (M3) ─────────────────────── */
@container (max-width:760px){
  .sp-naglowek-nav,.sp-naglowek-narzedzia{display:none}
  .sp-naglowek-wnetrze{padding:10px 16px;justify-content:center}
}
/* dolny pasek z rozdartym wierzchem (.sp-naglowek-rozdarcie-gora w znacznikach); arkusze wchodzą pod niego */
.sp-naglowek-dol{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--sp-ink);color:var(--sp-paper);list-style:none;margin:0;padding:6px 0 0}
.sp-naglowek-dol a,.sp-naglowek-dol button{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:60px;width:100%;
  background:none;border:0;color:inherit;font:inherit;font-size:12px;letter-spacing:.2px;text-decoration:none;cursor:pointer}
.sp-naglowek-dol .sp-icon{width:22px;height:22px}
/* znacznik aktywnej zakładki na dole — u góry gryzł się z rozdartym wierzchem paska */
.sp-naglowek-dol [aria-expanded="true"]::before{content:'';position:absolute;bottom:5px;left:26%;right:26%;height:1px;background:var(--sp-gold-light)}  /* 1 px — grubość kreski ikon */
.sp-naglowek-dol [aria-expanded="true"]{color:var(--sp-gold-light)}
.sp-naglowek-dol .sp-naglowek-licznik{top:6px;right:calc(50% - 22px)}
/* arkusz: wrapper rzuca cień (drop-shadow idzie za rozdarciem), karta ma rozdarty wierzch */
.sp-naglowek-arkusz{position:fixed;left:0;right:0;bottom:58px;z-index:25;max-height:74%;display:flex;flex-direction:column;
  filter:drop-shadow(0 -10px 18px rgba(14,42,31,.18));transform:translateY(calc(100% + 70px));transition:transform 300ms var(--sp-ease)}
.sp-naglowek-arkusz.is-otwarty{transform:none}
.sp-naglowek-arkusz-karta{background:var(--sp-paper);color:var(--sp-ink);padding:22px 16px 26px;overflow:auto}
.sp-naglowek-arkusz a{color:inherit;text-decoration:none}
.sp-naglowek-arkusz-glowa{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-naglowek-arkusz-glowa b{font-weight:400;font-size:22px}
.sp-naglowek-zamknij{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;color:inherit;cursor:pointer}
.sp-naglowek-arkusz-siatka{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp-naglowek-arkusz-siatka img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.sp-naglowek-arkusz-siatka span{font-size:17px}
.sp-naglowek-arkusz .sp-naglowek-pole{margin-bottom:10px}
.sp-naglowek-arkusz .sp-naglowek-pole>.sp-icon{color:var(--sp-action)}
.sp-naglowek-arkusz .sp-naglowek-pole:focus-within{border-bottom-color:var(--sp-action);box-shadow:0 1px 0 var(--sp-action)}
.sp-naglowek-arkusz .sp-naglowek-wynik a{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:8px 10px}
.sp-naglowek-arkusz .sp-naglowek-wynik img{width:48px;height:48px}
.sp-naglowek-arkusz .sp-naglowek-wynik b{font-size:16px}

@media(prefers-reduced-motion:reduce){
  .sp-naglowek-panel,.sp-naglowek-panel>.sp-naglowek-mega,.sp-naglowek-arkusz,.sp-naglowek-link::after,.sp-naglowek-link .sp-icon{transition:none}
}
html[data-motion="off"] .sp-naglowek-panel,html[data-motion="off"] .sp-naglowek-panel>.sp-naglowek-mega,html[data-motion="off"] .sp-naglowek-arkusz{transition:none}

/* telefon: dolny pasek i arkusze tylko na wąskim ekranie; strona dostaje miejsce pod paskiem
   (komunikaty pływające podnoszą się nad niego - reguła przy .sp-toast-host) */
.sp-naglowek-mobilne{display:none}
@media(max-width:760px){
  .sp-naglowek-mobilne{display:block}
  body{padding-bottom:66px}
}

/* panel boczny: koszyk */
.sp-drawer{position:fixed;inset:0;z-index:50;visibility:hidden}
.sp-drawer[open],.sp-drawer.is-open{visibility:visible}
.sp-drawer-backdrop{position:absolute;inset:0;background:rgba(14,42,31,.4);opacity:0;transition:opacity var(--sp-hover)}
.sp-drawer.is-open .sp-drawer-backdrop{opacity:1}
.sp-drawer-panel{position:absolute;top:0;bottom:0;right:0;width:min(420px,100%);background:var(--sp-paper);
  border-left:1px solid var(--sp-line);box-shadow:var(--sp-shadow-overlay);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--sp-hover) var(--sp-ease)}
.sp-drawer.is-open .sp-drawer-panel{transform:none}
.sp-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s2);
  padding:var(--sp-s3) var(--sp-s3);border-bottom:1px solid var(--sp-line)}
.sp-drawer-body{padding:var(--sp-s3);overflow:auto;flex:1}
.sp-drawer-foot{padding:var(--sp-s3);border-top:1px solid var(--sp-line);background:var(--sp-surface)}

/* ── KARTY ─────────────────────────────────────────── */
.sp-card{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:var(--sp-s4)}
@media(max-width:600px){.sp-card{padding:var(--sp-s3)}}

/* karty w rzędzie mają tę samą wysokość — stretch jest domyślny, ale zapisujemy go wprost,
   żeby nie dało się go zgubić przy kolejnych układach */
.sp-grid{display:grid;gap:var(--sp-s3);align-items:stretch}
.sp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1024px){.sp-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.sp-grid--4,.sp-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sp-grid--4,.sp-grid--3,.sp-grid--2{grid-template-columns:1fr}}

/* karta produktu — kontener zapytań, żeby działała w każdej kolumnie */
/* Karta produktu — organiczna z założenia: białe tło, nieregularna krawędź zawsze widoczna,
   bez prostokątnej ramki. Odchylenie liczone w PIKSELACH, nie w procentach — fala nie
   rozciąga się razem z wysokością karty. Wariant procentowy odpadł w rundzie 6. */
.sp-product{container-type:inline-size;position:relative;isolation:isolate;background:transparent;border:0;
  display:flex;flex-direction:column;min-width:0;height:100%;
  transition:transform var(--sp-hover) var(--sp-ease)}
.sp-product::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--sp-surface);
  clip-path:polygon(var(--sp-fala-karty))}
.sp-product-badges{display:flex;flex-wrap:wrap;gap:6px;padding:var(--sp-s2) var(--sp-s2) 0;min-height:34px}
.sp-product-window{width:100%;height:230px;padding:var(--sp-s1);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sp-surface);border-radius:var(--sp-radius)}
.sp-product-window img{width:100%;height:100%;max-width:210px;object-fit:contain;transition:transform var(--sp-hover) var(--sp-ease)}
.sp-product-body{padding:var(--sp-s3);display:flex;flex-direction:column;gap:6px;flex:1}
/* nazwa rezerwuje dwie linie — bez tego karta z krótką nazwą podnosi cenę wyżej
   niż sąsiadka i cały rząd traci poziomy rytm */
.sp-product-name{font-size:22px;line-height:1.25;min-height:2.5em}
.sp-product-name a{text-decoration:none}
.sp-product-meta{font-size:13px;letter-spacing:1.1px;text-transform:uppercase;color:var(--sp-muted)}
.sp-product-body .sp-product-name+.sp-product-meta{margin-top:2px}
/* cena NIE jest dociskana do dołu: wtedy dłuższa etykieta przycisku podnosiłaby ją
   w jednej karcie i rząd tracił poziomy rytm. Treść płynie od góry, luz zbiera się
   nad stopką karty, a stopka i tak jest wyrównana wysokością całej karty. */
.sp-product-price{margin-top:var(--sp-s2);padding-top:var(--sp-s2);border-top:1px solid var(--sp-gold);
  font-size:26px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-product-price del{color:var(--sp-muted);font-size:18px;margin-right:8px}
/* wiersz jednostkowy rezerwuje dwie linie: przy przecenie dochodzi tu obowiązkowa
   informacja o najniższej cenie z 30 dni i bez rezerwy cena skakałaby w rzędzie */
.sp-product-unit{font-size:15px;line-height:1.5;color:var(--sp-muted);font-variant-numeric:tabular-nums;min-height:3em}
.sp-product-stock{font-size:16px;display:flex;align-items:center;gap:7px;margin-top:var(--sp-s1)}
.sp-product-stock--in{color:var(--sp-success)}
.sp-product-stock--low{color:var(--sp-warning)}
.sp-product-stock--out{color:var(--sp-muted)}
.sp-product-foot{padding:0 var(--sp-s3) var(--sp-s3);margin-top:auto;display:grid;gap:var(--sp-s1)}
/* Odzew na najechanie — „uniesiony papier” (runda 7).
   Cień rzuca ::before, a nie sama karta: drop-shadow działa na kształcie PO clip-path,
   więc idzie za rozdartą krawędzią. box-shadow narysowałby prostokąt pod nieprostokątną kartą.
   Biel karty nie zmienia się — to warunek stały. */
.sp-product::before{transition:filter 260ms var(--sp-ease)}
@media(hover:hover) and (pointer:fine){
  .sp-product:hover,.sp-product:focus-within{transform:translateY(-6px)}
  .sp-product:hover::before,.sp-product:focus-within::before{
    filter:drop-shadow(0 10px 18px rgba(31,26,18,.16)) drop-shadow(0 2px 4px rgba(31,26,18,.10))}
  .sp-product:hover .sp-product-window img{transform:scale(1.035)}
}
html[data-motion="off"] .sp-product:hover{transform:none}
@container (max-width:240px){.sp-product-name{font-size:20px}.sp-product-window{height:170px}}


.sp-badge{display:inline-block;background:var(--sp-soft);color:var(--sp-action);border:1px solid var(--sp-line);
  padding:4px 8px;font-size:14px;line-height:1.25;border-radius:var(--sp-radius)}
.sp-badge--ink{background:var(--sp-ink);color:var(--sp-paper);border-color:var(--sp-ink)}
.sp-badge--gold{background:transparent;color:var(--sp-action);border-color:var(--sp-gold)}

/* kafel kategorii — bez ruchu karty, ślad pod nazwą */


/* wpis poradnika */


/* ── FORMULARZE ────────────────────────────────────── */
.sp-field{display:block;margin-bottom:var(--sp-s3)}
.sp-field>span{display:block;font-size:17px;margin-bottom:7px}
.sp-field input,.sp-field select,.sp-field textarea{
  display:block;width:100%;min-height:48px;padding:11px 13px;background:var(--sp-pole); /* papierowa biel pola */
  border:1px solid var(--sp-field-line);border-radius:var(--sp-radius);font-size:18px}
/* Lista rozwijana: własna strzałka z zapasem 14 px od krawędzi. Systemowa strzałka klejiła się
   do brzegu pola i zderzała z tekstem — dlatego appearance:none i miejsce po prawej. */
.sp-field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23735F38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;
  background-position:right 14px center;background-size:20px 20px}
.sp-field select::-ms-expand{display:none}
.sp-field input:focus-visible,.sp-field select:focus-visible,.sp-field textarea:focus-visible{outline:1px solid var(--sp-action);outline-offset:-1px;border-color:var(--sp-action)}
.sp-field small{display:block;margin-top:6px;font-size:15px;color:var(--sp-muted)}
.sp-field input[aria-invalid="true"]{border-color:var(--sp-error)}
.sp-field-req{color:var(--sp-action)}

.sp-choices{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-s1)}
.sp-choices legend{font-size:17px;margin-bottom:10px;padding:0}
.sp-choice{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:11px 16px;
  border:1px solid var(--sp-field-line);border-radius:var(--sp-radius);cursor:pointer;background:var(--sp-pole);
  transition:background var(--sp-fast),border-color var(--sp-fast)}
.sp-choice input{accent-color:var(--sp-action);width:17px;height:17px;margin:0}
.sp-choice:has(input:checked){border-color:var(--sp-action);background:var(--sp-soft)}
.sp-choice:hover{border-color:var(--sp-action);background:var(--sp-soft)}

/* Ryciny marki — element systemu, nie strony głównej. Do 10.09.2026 mieszkały w home.css,
   przez co na stronach klocków w ogóle się nie stylowały. */
/* ── RYCINY 140 px, tekst wyśrodkowany, hover z obrotem ── */
.cechy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);
  margin-top:var(--sp-s5);padding-top:var(--sp-s5);border-top:1px solid var(--sp-hair)}
.cechy>li{list-style:none;display:grid;grid-template-rows:auto auto;align-content:start;justify-items:center;text-align:center;gap:10px}
/* stała wysokość kadru: ryciny mają różne proporcje, a podpisy muszą ruszać od jednej linii */
.cechy img{width:140px;height:140px;object-fit:contain;transition:transform var(--sp-hover) var(--sp-ease)}
.cechy b{font-weight:400;font-size:19px}
.cechy p{font-size:16px;color:var(--sp-muted)}
@media(hover:hover) and (pointer:fine){.cechy>li:hover img{transform:translateY(-4px) rotate(-1.5deg)}}
html[data-motion="off"] .cechy>li:hover img{transform:none}
@media(max-width:760px){.cechy{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.cechy img{width:112px;height:112px}}

/* segment wariantu / tak-nie */
/* align-self:start — w kolumnie (blok zakupu) domyślny stretch rozciągał segment na całą
   szerokość i rozjeżdżał podział na trzy pola */
.sp-segment{display:inline-flex;align-self:start;border:1px solid var(--sp-field-line);border-radius:var(--sp-radius);overflow:hidden;flex-wrap:wrap}
.sp-segment label{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 18px;cursor:pointer;
  border-right:1px solid var(--sp-field-line);transition:background var(--sp-fast),color var(--sp-fast)}
.sp-segment label:last-child{border-right:0}
.sp-segment input{position:absolute;opacity:0;width:1px;height:1px}
.sp-segment label:has(input:checked){background:var(--sp-ink);color:var(--sp-paper)}
.sp-segment label:has(input:focus-visible){outline:1px solid var(--sp-action);outline-offset:-3px}
.sp-segment label:hover:not(:has(input:checked)){background:var(--sp-soft)}

/* ilość */
.sp-qty{display:inline-flex;align-items:center;border:1px solid var(--sp-field-line);border-radius:var(--sp-radius)}
.sp-qty button{width:48px;height:48px;display:grid;place-items:center;background:none;border:0}
.sp-qty button:hover{background:var(--sp-soft)}
.sp-qty input{width:62px;height:48px;text-align:center;border:0;border-inline:1px solid var(--sp-field-line);
  background:var(--sp-pole);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.sp-qty input::-webkit-outer-spin-button,.sp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* filtry */
.sp-filters{display:flex;flex-wrap:wrap;gap:var(--sp-s1)}
.sp-filter{background:var(--sp-pole);border:1px solid var(--sp-field-line);color:var(--sp-ink);
  border-radius:var(--sp-radius);padding:9px 14px;min-height:44px;font-size:17px;transition:background var(--sp-fast),color var(--sp-fast),border-color var(--sp-fast)}
.sp-filter[aria-pressed="true"]{background:var(--sp-ink);color:var(--sp-paper);border-color:var(--sp-ink)}
.sp-filter:hover{border-color:var(--sp-action);background:var(--sp-soft)}
.sp-filter[aria-pressed="true"]:hover{background:var(--sp-ink-hover);border-color:var(--sp-ink-hover);color:var(--sp-paper)}
/* filtr organiczny — papierowa powierzchnia, przezroczyste obramowanie */
.sp-filter--organic{border-color:transparent;background:transparent;position:relative;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s2);width:100%;text-align:left}
.sp-filter--organic::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--sp-surface);transition:background var(--sp-hover);
  clip-path:polygon(0 3%,22% 0,65% 2%,99% 1%,100% 94%,67% 100%,34% 97%,0 100%)}
.sp-filter--organic:hover{background:transparent;border-color:transparent}
.sp-filter--organic:hover::before{background:#EAE1D0} /* papier w hover */
/* bazowa reguła .sp-filter[aria-pressed=true]:hover ma wyższą wagę i podkładała zieleń — gasimy ją tutaj */
.sp-filter--organic[aria-pressed="true"],
.sp-filter--organic[aria-pressed="true"]:hover,
.sp-filter--organic:hover{background:transparent;border-color:transparent;color:var(--sp-ink)}
.sp-filter--organic[aria-pressed="true"]::before,.sp-filter--organic[aria-pressed="true"]:hover::before{background:var(--sp-gold-light)}

/* ── KARTY WPISÓW ───────────────────────────────────
   Do 12.09.2026 mieszkały w home.css, ale używa ich także archiwum poradnika,
   wpis (podobne wpisy) i wyniki wyszukiwania — a tamtego arkusza generowane widoki
   nie wczytują. Ten sam przypadek co .cechy: komponent wspólny należy do ui.css. */
.wpisy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-s4)}
.wpisy a{display:flex;flex-direction:column;gap:var(--sp-s2);text-decoration:none;height:100%}
.wpisy img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--sp-hover) var(--sp-ease)}
.wpisy h3{font-size:25px;line-height:1.2}
.wpisy p{color:var(--sp-muted);font-size:17px}
.wpisy .wiecej{margin-top:auto;align-self:start;min-height:0;padding:6px 0 12px}
@media(hover:hover) and (pointer:fine){.wpisy a:hover img{transform:scale(1.02)}}
/* krok dwukolumnowy: przy 900 px trzy karty schodziły do 240 px, czyli za ciasno
   na kadr 16:9 i tytuł 25 px */
@media(max-width:1100px){.wpisy{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.wpisy{grid-template-columns:1fr}}

/* ── ARTYKUŁ PORADNIKA ───────────────────────────────
   Kolumna treści 640–720 px (docs/01). Nagłówek na papierze, spis treści z boku
   na dużym ekranie, autor i data aktualizacji pod tytułem — wymóg z docs/03 §25. */
.art-glowa{padding-block:var(--sp-s5) var(--sp-s4)}
.art-glowa h1{font-size:var(--sp-h1);max-width:26ch;margin-top:12px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px var(--sp-s3);align-items:center;margin-top:var(--sp-s3);
  font-size:16px;color:var(--sp-muted)}
.art-meta span{display:inline-flex;align-items:center;gap:8px}
.art-meta .sp-icon{color:var(--sp-gold)}
.art-kadr{margin-block:var(--sp-s3) var(--sp-s5)}
.art-kadr img{width:100%;aspect-ratio:16/9;object-fit:cover}
.art{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:var(--sp-s5);align-items:start}
/* Ostatni blok wpisu lub strony nie może dotykać stopki - ten sam odstęp sekcji co widoki sklepu (.sp-widok). */
.sp-wrap>.art:last-child,.sp-wrap>.art-komentarze:last-child,.sp-wrap>.post-navigation:last-child,
.sp-wrap:not(.sp-widok)>.lst-dol:last-child{margin-bottom:var(--sp-section)}
.art-tresc>*+*{margin-top:var(--sp-s3)}
.art-tresc h2{font-size:var(--sp-h3);margin-top:var(--sp-s5)}
.art-tresc h3{font-size:24px;margin-top:var(--sp-s4)}
.art-tresc p,.art-tresc li{font-size:19px;line-height:1.62}
.art-tresc ul,.art-tresc ol{padding-left:22px;display:grid;gap:8px}
.art-tresc blockquote{margin-block:var(--sp-s4);padding:var(--sp-s3) var(--sp-s4);background:var(--sp-soft);
  border-left:2px solid var(--sp-gold);border-radius:var(--sp-radius);font-style:italic;font-size:21px}
.art-spis{position:sticky;top:100px;padding:var(--sp-s3);background:var(--sp-pole);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius)}
.art-spis b{display:block;font-weight:400;font-size:16px;color:var(--sp-muted);margin-bottom:10px}
.art-spis ul{list-style:none;display:grid;gap:2px}
.art-spis a{font-size:17px}
.art-autor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--sp-s3);align-items:center;
  margin-top:var(--sp-s5);padding-top:var(--sp-s4);border-top:1px solid var(--sp-hair)}
.art-autor img{width:64px;height:64px;border-radius:50%;grid-row:span 2;object-fit:cover}
.art-autor b{font-weight:400;font-size:19px}
.art-autor p{font-size:16px;color:var(--sp-muted)}
@media(max-width:1000px){.art{grid-template-columns:1fr}.art-spis{position:static}}

/* ── WYNIKI WYSZUKIWANIA ─────────────────────────────
   Jedna strona na produkty i poradniki: grupa z nagłówkiem i licznikiem.
   Podpowiedzi w polu nagłówka to osobna funkcja (docs/03 §22, etap 2). */
.wyn-glowa{padding-block:var(--sp-s5) var(--sp-s4);border-bottom:1px solid var(--sp-line)}
.wyn-glowa h1{font-size:var(--sp-h2);margin-top:10px}
.wyn-glowa h1 q{font-style:italic}
.wyn-ile{margin-top:12px;font-size:18px;color:var(--sp-muted)}
.wyn-ile strong{font-weight:400;color:var(--sp-ink);font-variant-numeric:tabular-nums}
.wyn-grupa{padding-block:var(--sp-s5)}
.wyn-grupa+.wyn-grupa{border-top:1px solid var(--sp-hair)}
.wyn-grupa-glowa{display:flex;flex-wrap:wrap;gap:var(--sp-s2) var(--sp-s3);align-items:baseline;
  justify-content:space-between;margin-bottom:var(--sp-s4)}
.wyn-grupa-glowa h2{font-size:var(--sp-h3)}
.wyn-brak{display:grid;justify-items:center;text-align:center;gap:12px;padding:var(--sp-s6) var(--sp-s3)}
/* rycina jak w pozostałych stanach pustych: ustalony efekt z elementu „Ryciny marki” */
.wyn-brak img{width:190px;height:auto;transition:transform var(--sp-hover) var(--sp-ease)}
.wyn-brak h2{font-size:28px}
.wyn-brak p{font-size:18px;color:var(--sp-muted);max-width:52ch}
.wyn-brak-akcje{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--sp-s3)}

/* ── STRONA 404 ──────────────────────────────────────── */
.e404{display:grid;justify-items:center;text-align:center;gap:14px;padding-block:var(--sp-s6)}
.e404 img{width:220px;height:auto;transition:transform var(--sp-hover) var(--sp-ease)}
.e404 h1{font-size:var(--sp-h2);max-width:22ch}
.e404 p{font-size:19px;color:var(--sp-muted);max-width:52ch}
.e404-akcje{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:var(--sp-s2)}

/* ── KOMUNIKATY ────────────────────────────────────── */
.sp-notice{--tone:var(--sp-info);display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
  background:var(--sp-notice-surface);border:1px solid var(--sp-line);border-left:2px solid var(--tone);
  border-radius:var(--sp-radius);color:var(--sp-ink);font-size:17px;line-height:1.45;text-align:left}
.sp-notice[data-tone="success"]{--tone:var(--sp-success)}
.sp-notice[data-tone="warning"]{--tone:var(--sp-warning)}
.sp-notice[data-tone="error"]{--tone:var(--sp-error)}
.sp-notice>.sp-icon{color:var(--tone);margin-top:3px}
.sp-notice-body{min-width:0;flex:1}
.sp-notice-body strong{display:block;font-weight:400;font-size:21px;line-height:1.2;color:var(--tone);margin-bottom:4px}
.sp-notice-close{width:44px;height:44px;margin:-11px -11px -11px 0;display:grid;place-items:center;background:none;border:0;color:var(--sp-muted)}
.sp-notice-close:hover{color:var(--sp-ink)}
@media(max-width:600px){.sp-notice{padding:16px;gap:11px}}
.sp-toast-host{position:fixed;right:var(--sp-s3);bottom:var(--sp-s3);z-index:60;width:min(420px,calc(100vw - 2*var(--sp-s3)))}
/* telefon: nad dolnym paskiem nawigacji (66px) z odstępem */
@media(max-width:760px){.sp-toast-host{bottom:78px}}
.sp-toast-host .sp-notice{box-shadow:var(--sp-shadow-overlay);animation:sp-toast-in var(--sp-hover) var(--sp-ease)}
@keyframes sp-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── TABELA ────────────────────────────────────────── */
.sp-table-scroll{overflow-x:auto}
.sp-table{width:100%;border-collapse:collapse;font-size:17px}
.sp-table caption{text-align:left;font-size:16px;color:var(--sp-muted);padding-bottom:var(--sp-s2)}
.sp-table thead th{background:#FAF8F4;text-align:left;font-weight:400} /* bardzo jasne tło nagłówka */
.sp-table th,.sp-table td{padding:13px 14px;border-bottom:1px solid var(--sp-line);background:transparent}
.sp-table tbody th{text-align:left;font-weight:400}
.sp-table td.num,.sp-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.sp-table tbody tr:hover{background:#FAF8F4}

/* ── FAQ ───────────────────────────────────────────── */
.sp-faq details{border-bottom:1px solid var(--sp-line);transition:background var(--sp-fast)}
.sp-faq details:hover,.sp-faq details:focus-within,.sp-faq details[open]{background:var(--sp-soft)}
.sp-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-s3);
  padding:20px var(--sp-s3);font-size:22px;line-height:1.3}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary .sp-icon{margin-top:5px;color:var(--sp-action);transition:transform var(--sp-hover) var(--sp-ease)}
.sp-faq details[open] summary .sp-icon{transform:rotate(180deg)}
.sp-faq .sp-faq-answer{padding:0 var(--sp-s3) 22px;font-size:18px;max-width:70ch}
.sp-faq details[open] .sp-faq-answer{animation:sp-fade var(--sp-hover) var(--sp-ease)}
@keyframes sp-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── KONTO ─────────────────────────────────────────────
   Runda 9: weszła lista boczna razem z kaflami na pulpicie (kombo), zamówienia
   jako karty, adresy w podglądzie z edycją w miejscu. Zakładki poziome, tabela
   zamówień i formularz od razu odpadły i nie ma po nich reguł. */
.mk-panel{background:var(--sp-pole);border:1px solid var(--sp-line);padding:var(--sp-s3);border-radius:var(--sp-radius)}
.mk-wejscie--dwie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s3)}
@media(max-width:700px){.mk-wejscie--dwie{grid-template-columns:1fr}}
/* „Nie pamiętam hasła” stoi POD przyciskiem: nad nim przerywało drogę do zalogowania */
.mk-pod{margin-top:14px;text-align:center}

.mk-uklad--bok{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-s4);align-items:start}
@media(max-width:700px){.mk-uklad--bok{grid-template-columns:1fr}}
/* ── Klasy WordPressa w treści, komentarze, formularze (audyt 13.09.2026) ──
   Motyw nie miał żadnych reguł dla znaczników, które wypisuje sam WordPress: wyrównanie
   i podpisy obrazów z edytora klasycznego, galeria klasyczna, formularz hasła, podział wpisu
   na strony, tagi, nawigacja wpisów, komentarze i formularz wyszukiwania. Klocki systemu:
   pole .sp-field, przycisk .sp-button, powierzchnia --sp-pole z linią --sp-line, promień 2 px,
   odstępy 8/16/24/32/48 px. */
.alignleft{float:left;margin:0 var(--sp-s3) var(--sp-s2) 0}
.alignright{float:right;margin:0 0 var(--sp-s2) var(--sp-s3)}
.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption img{display:block}
.wp-caption-text,.gallery-caption,.wp-element-caption{margin-top:var(--sp-s1);font-size:15px;line-height:1.45;color:var(--sp-muted)}
.art-tresc .gallery{display:grid;grid-template-columns:repeat(var(--kolumny,3),minmax(0,1fr));gap:var(--sp-s2)}
.art-tresc .gallery-columns-2{--kolumny:2}.art-tresc .gallery-columns-4{--kolumny:4}
@media(max-width:600px){.art-tresc .gallery{--kolumny:2}}
.art-tresc .gallery-item{margin:0}
.art-tresc .gallery img{width:100%;height:auto;border-radius:var(--sp-radius)}
.bypostauthor>.comment-body .fn::after{content:' · autor';font-weight:400;color:var(--sp-muted)}
.post-password-form{display:grid;gap:var(--sp-s2);max-width:520px;padding:var(--sp-s3);background:var(--sp-pole);
  border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
.post-password-form p{margin:0;display:grid;gap:var(--sp-s2);justify-items:start}
.post-password-form p label{justify-self:stretch}
.post-password-form label{display:grid;gap:7px;font-size:17px}
.post-password-form input[type="password"]{min-height:48px;padding:11px 13px;background:var(--sp-surface);border:1px solid var(--sp-field-line);
  border-radius:var(--sp-radius);font-size:18px}
.post-password-form input[type="submit"]{min-height:48px;padding:12px 23px;line-height:1.2;background:var(--sp-ink);color:var(--sp-surface);border:1px solid transparent;
  border-radius:var(--sp-radius);font-size:18px;cursor:pointer}
.page-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s1);margin-top:var(--sp-s4)}
.page-links-tytul{color:var(--sp-muted);margin-right:var(--sp-s1)}
.page-links a,.page-links>span:not(.page-links-tytul){min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);text-decoration:none}
.page-links>span:not(.page-links-tytul){background:var(--sp-ink);color:var(--sp-paper);border-color:var(--sp-ink)}
.tags-links{margin-top:var(--sp-s4);display:flex;flex-wrap:wrap;gap:var(--sp-s1);font-size:16px}
.tags-links-tytul{color:var(--sp-muted)}
.tags-links a{padding:4px 10px;border:1px solid var(--sp-line);border-radius:var(--sp-radius);text-decoration:none}
.post-navigation{margin-top:var(--sp-s5);padding-top:var(--sp-s3);border-top:1px solid var(--sp-line)}
.post-navigation .nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s3)}
.post-navigation .nav-next{text-align:right;grid-column:2}
.post-navigation a{display:grid;gap:4px;text-decoration:none}
.post-navigation .nav-subtitle{font-size:14px;letter-spacing:1.3px;text-transform:uppercase;color:var(--sp-muted)}
.post-navigation .nav-title{font-size:21px;line-height:1.25}
@media(max-width:600px){.post-navigation .nav-links{grid-template-columns:1fr}.post-navigation .nav-next{grid-column:1;text-align:left}}
.art-komentarze{max-width:720px;margin-top:var(--sp-s5)}
.komentarze-lista,.komentarze-lista .children{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s2)}
.komentarze-lista{margin-top:var(--sp-s3)}
.komentarze-lista .children{margin-top:var(--sp-s2);padding-left:var(--sp-s4)}
.komentarze-lista .comment-body{padding:var(--sp-s3);background:var(--sp-pole);border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
.komentarze-lista .comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s1) var(--sp-s2);margin-bottom:var(--sp-s2);font-size:15px;color:var(--sp-muted)}
.komentarze-lista .comment-author{display:flex;align-items:center;gap:12px;color:var(--sp-ink);font-size:18px}
.komentarze-lista .comment-author .fn{font-style:normal;font-weight:400}
.komentarze-lista .comment-author .says{display:none}
.komentarze-lista .avatar{width:48px;height:48px;border-radius:50%}
.komentarze-lista .comment-metadata a{color:inherit}
.komentarze-lista .comment-content>*+*{margin-top:var(--sp-s1)}
.komentarze-lista .reply{margin-top:var(--sp-s2)}
.komentarze-lista .comment-awaiting-moderation{display:block;margin-top:var(--sp-s1);color:var(--sp-warning);font-size:15px}
.komentarze-zamkniete{margin-top:var(--sp-s3);color:var(--sp-muted)}
.komentarze-formularz{margin-top:var(--sp-s5)}
.komentarze-formularz .comment-reply-title small{margin-left:var(--sp-s2);font-size:16px}
.komentarze-formularz .comment-form{display:grid;gap:var(--sp-s3);margin-top:var(--sp-s3)}
.komentarze-formularz .comment-form>p{margin:0}
.komentarze-formularz .comment-notes,.komentarze-formularz .logged-in-as{font-size:15px;color:var(--sp-muted)}
.komentarze-formularz .comment-form label{display:block;margin-bottom:7px;font-size:17px}
.komentarze-formularz .comment-form input[type="text"],.komentarze-formularz .comment-form input[type="email"],
.komentarze-formularz .comment-form input[type="url"],.komentarze-formularz .comment-form textarea{display:block;width:100%;min-height:48px;padding:11px 13px;
  background:var(--sp-pole);border:1px solid var(--sp-field-line);border-radius:var(--sp-radius);font-size:18px}
.komentarze-formularz .comment-form textarea{min-height:160px}
.komentarze-formularz .comment-form-cookies-consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.komentarze-formularz .comment-form-cookies-consent label{margin:0;font-size:16px}
.komentarze-formularz .comment-form-cookies-consent input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--sp-ink)}
.komentarze-formularz .required{color:var(--sp-action)}
.sp-szukaj-form{display:flex;gap:10px;align-items:stretch;max-width:560px}
.sp-szukaj-form .sp-field{flex:1;min-width:0;margin:0}
.sp-szukaj-form .sp-field input{height:100%}
.sp-szukaj-form .sp-button{flex:none}
.wyn-szukaj{margin-top:var(--sp-s3)}
.e404-szukaj{margin-top:var(--sp-s3);display:flex;justify-content:center}

.mk-nav{display:grid;gap:2px}
/* nawigacja to lista Woo (ul > li z klasami pozycji) - lista nie tworzy pudełek, odnośniki zostają
   komórkami siatki .mk-nav jak wcześniej */
.mk-nav ul,.mk-nav li{display:contents}
/* numer zamówienia jest linkiem do zamówienia (jak w Woo) - w wyglądzie nagłówka karty */
.mk-zam-glowa b a{color:inherit;text-decoration:none}
.mk-zam-glowa b a:hover{text-decoration:underline}
.mk-zam-kolumna{display:flex;gap:8px;flex-wrap:wrap;font-size:15px}
.mk-zam-kolumna-nazwa{color:var(--sp-muted)}
.mk-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;text-decoration:none;
  color:var(--sp-ink);border-left:2px solid transparent;
  transition:background-color var(--sp-hover) var(--sp-ease),border-color var(--sp-hover) var(--sp-ease)}
.mk-nav a .sp-icon{color:var(--sp-action)}
.mk-nav a[aria-current]{border-left-color:var(--sp-gold);background:var(--sp-pole)}
@media(hover:hover) and (pointer:fine){.mk-nav a:hover{background:var(--sp-pole)}}

/* kafle są skrótem na pulpicie, nie zamiennikiem nawigacji — lista boczna zostaje widoczna */
.mk-kafle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s2)}
@media(max-width:600px){.mk-kafle{grid-template-columns:1fr}}
.mk-kafel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:var(--sp-s3);background:var(--sp-pole);border:1px solid var(--sp-line);text-decoration:none;color:var(--sp-ink);
  transition:border-color var(--sp-hover) var(--sp-ease),transform var(--sp-hover) var(--sp-ease);border-radius:var(--sp-radius)}
.mk-kafel .sp-icon{grid-row:1 / span 2;color:var(--sp-action)}
.mk-kafel b{font-size:20px}
.mk-kafel span{font-size:15px;color:var(--sp-muted)}
.mk-kafel>.sp-icon--sm{grid-row:1 / span 2;grid-column:3}
@media(hover:hover) and (pointer:fine){.mk-kafel:hover{border-color:var(--sp-gold);transform:translateY(-2px)}}
html[data-motion="off"] .mk-kafel:hover{transform:none}

.mk-zam{display:grid;gap:var(--sp-s2)}
.mk-zam-karta{background:var(--sp-pole);border:1px solid var(--sp-line);padding:var(--sp-s3);display:grid;gap:6px;border-radius:var(--sp-radius)}
.mk-zam-glowa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mk-zam-glowa b{font-size:20px;font-variant-numeric:tabular-nums}
.mk-zam-stopka{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
/* status zamówienia: ikona + etykieta w kolorze tonu. Każdy status WooCommerce ma swój */
.mk-status{display:inline-flex;align-items:center;gap:7px;font-size:16px}
.mk-status .sp-icon{flex:none}
.mk-status--oczekuje,.mk-status--wstrzymane{color:var(--sp-warning)}
.mk-status--realizacja,.mk-status--droga{color:var(--sp-action)}
.mk-status--zrealizowane{color:var(--sp-success)}
.mk-status--anulowane,.mk-status--zwrocone{color:var(--sp-muted)}
.mk-status--nieudane{color:var(--sp-error)}
.mk-zam-notka{font-size:15px;color:var(--sp-muted)}
/* zamówienia wymagające działania dostają złotą krawędź z lewej */
.mk-zam-karta:has(.mk-status--oczekuje),.mk-zam-karta:has(.mk-status--nieudane){border-left:2px solid var(--sp-gold)}

.mk-dane{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s2)}
@media(max-width:640px){.mk-dane{grid-template-columns:1fr}}
.mk-dane-glowa{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.mk-dane-glowa h4{font-size:20px}
.mk-dane address{font-style:normal;line-height:1.7}
.mk-form-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-s2)}
@media(max-width:520px){.mk-form-siatka{grid-template-columns:1fr}}
.mk-form-akcje{display:flex;gap:10px;flex-wrap:wrap}

/* ── OŚ STATUSU ────────────────────────────────────────
   Jeden komponent, dwa układy: poziomy od 700 px, pionowy niżej. Modyfikator
   .os--pion wymusza pion także w szerokiej kolumnie (wąskie panele, potwierdzenie
   zamówienia). Kreska zawsze wychodzi ze środka kropki i kończy się 4 px przed
   następną — bez tego łączenia się rozjeżdżały. W pionie: kropka 12 px z marginesem
   5 px, kreska od 21 px (4 px pod kropką) do -1 px (4 px nad kropką następnego kroku). */
.os{list-style:none;margin:0;padding:0}
.os-krok b{display:block;font-size:17px}
.os-krok small{color:var(--sp-muted);font-size:14px}
.os-kropka{width:12px;height:12px;border-radius:50%;border:1px solid var(--sp-gold);
  background:var(--sp-paper);display:block;flex:none;box-sizing:border-box}
.os-krok.is-zrobione .os-kropka{background:var(--sp-gold)}
.os-krok.is-teraz .os-kropka{background:var(--sp-ink);border-color:var(--sp-ink);
  box-shadow:0 0 0 4px rgba(158,137,94,.22)}

/* wejście: kropki wskakują po kolei, kreski dorysowują się między nimi */
.js .os[data-os] .os-kropka{transform:scale(.2);opacity:0;
  transition:transform 360ms var(--sp-ease),opacity 260ms var(--sp-ease);
  transition-delay:calc(var(--i,0) * 130ms)}
.js .os[data-os] .os-krok::before{transform-origin:left top;
  transition:transform 460ms var(--sp-ease);transition-delay:calc(var(--i,0) * 130ms + 90ms)}
.js .os[data-os].is-widoczna .os-kropka{transform:scale(1);opacity:1}
html[data-motion="off"] .js .os[data-os] .os-kropka,
html[data-motion="off"] .js .os[data-os] .os-krok::before{transform:none;opacity:1;transition:none}

/* układ poziomy */
@media(min-width:700px){
  .os:not(.os--pion){display:grid;grid-template-columns:repeat(var(--os-krokow,4),minmax(0,1fr));gap:var(--sp-s2)}
  .os:not(.os--pion) .os-krok{position:relative;padding-top:26px}
  .os:not(.os--pion) .os-kropka{position:absolute;top:0;left:0}
  /* kreska: od prawej krawędzi kropki do 4 px przed kropką następnego kroku */
  .os:not(.os--pion) .os-krok::before{content:'';position:absolute;top:5.5px;left:16px;
    right:calc(4px - var(--sp-s2));height:1px;background:var(--sp-hair)}
  .js .os[data-os]:not(.os--pion) .os-krok::before{transform:scaleX(0)}
  .os:not(.os--pion) .os-krok:last-child::before{display:none}
}
/* układ pionowy — poniżej 700 px i zawsze przy .os--pion */
.os{display:grid;gap:0}
.os-krok{position:relative}
@media(max-width:699.98px){
  .os:not(.os--pion) .os-krok{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding-bottom:22px}
  .os:not(.os--pion) .os-kropka{margin-top:5px;grid-row:1 / span 2}
  .os:not(.os--pion) .os-krok::before{content:'';position:absolute;left:5.5px;top:21px;bottom:-1px;width:1px;
    background:var(--sp-hair)}
  .js .os[data-os]:not(.os--pion) .os-krok::before{transform:scaleY(0)}
  .os:not(.os--pion) .os-krok:last-child{padding-bottom:0}
  .os:not(.os--pion) .os-krok:last-child::before{display:none}
}
.os--pion .os-krok{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding-bottom:22px}
.os--pion .os-kropka{margin-top:5px;grid-row:1 / span 2}
.os--pion .os-krok::before{content:'';position:absolute;left:5.5px;top:21px;bottom:-1px;width:1px;background:var(--sp-hair)}
.js .os[data-os].os--pion .os-krok::before{transform:scaleY(0)}
.os--pion .os-krok:last-child{padding-bottom:0}
.os--pion .os-krok:last-child::before{display:none}
/* stan narysowany stoi na końcu: ma tę samą specyficzność co scaleX(0)/scaleY(0)
   powyżej, więc wygrywa kolejnością. Wcześniej stał przed nimi i kreski nie rysowały się nigdy. */
.js .os[data-os].is-widoczna .os-krok::before{transform:none}

/* ── OKRUSZKI, PAGINACJA ───────────────────────────── */
.sp-crumbs{font-size:14px;letter-spacing:.5px;color:var(--sp-muted);display:flex;flex-wrap:wrap;
  gap:4px 9px;align-items:center;min-height:26px}
.sp-crumbs a{color:var(--sp-muted);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color var(--sp-hover) var(--sp-ease),border-color var(--sp-hover) var(--sp-ease)}
@media(hover:hover) and (pointer:fine){.sp-crumbs a:hover{color:var(--sp-ink);border-bottom-color:var(--sp-gold)}}
.sp-crumbs a:focus-visible{color:var(--sp-ink)}
/* separator złoty, poza drzewem dostępności */
.sp-crumbs [aria-hidden="true"]{color:var(--sp-gold);font-size:13px;line-height:1;transform:translateY(-1px)}
/* pozycja bieżąca: nie jest odnośnikiem, długie nazwy skracamy wielokropkiem */
.sp-crumbs [aria-current]{color:var(--sp-ink);max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){
  /* na telefonie jeden wiersz przewijany w bok — ścieżka nie zabiera trzech linii */
  .sp-crumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,#000 84%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 84%,transparent 100%)}
  .sp-crumbs::-webkit-scrollbar{display:none}
  .sp-crumbs a,.sp-crumbs [aria-current]{white-space:nowrap;flex:none}
  .sp-crumbs [aria-current]{max-width:none;padding-right:var(--sp-s2)}
}

.sp-pagination{display:flex;gap:6px;flex-wrap:wrap}
/* the_posts_pagination() owija numery w .nav-links - bez tego każdy numer stał w osobnym wierszu (blog). */
.sp-pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sp-pagination a,.sp-pagination span{min-width:44px;min-height:44px;display:grid;place-items:center;
  background:var(--sp-pole);
  border:1px solid var(--sp-line);border-radius:var(--sp-radius);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:transform var(--sp-hover) var(--sp-ease),border-color var(--sp-hover) var(--sp-ease),
    color var(--sp-hover) var(--sp-ease),background-color var(--sp-hover) var(--sp-ease)}
.sp-pagination .sp-icon{transition:transform var(--sp-hover) var(--sp-ease)}
@media(hover:hover) and (pointer:fine){
  .sp-pagination a:hover{color:var(--sp-ink);background:var(--sp-surface);
    border-color:var(--sp-gold);transform:translateY(-2px)}
  /* strzałka „następna” dostaje ten sam mikroruch co w przyciskach */
  .sp-pagination a:hover .sp-icon{transform:translateX(2px)}
  .sp-pagination [aria-current]:hover{transform:none}
}
.sp-pagination a:active{transform:translateY(0)}
.sp-pagination [aria-current]{background:var(--sp-ink);color:var(--sp-paper);border-color:var(--sp-ink)}
html[data-motion="off"] .sp-pagination a:hover,
html[data-motion="off"] .sp-pagination a:hover .sp-icon{transform:none}

/* ── ŁADOWANIE ─────────────────────────────────────── */
.sp-skeleton{background:var(--sp-soft);border-radius:var(--sp-radius);animation:sp-pulse 2s ease-in-out infinite}
@keyframes sp-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.sp-spinner{width:20px;height:20px;border:1.4px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:sp-spin 1.2s linear infinite}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-progress{height:3px;background:var(--sp-line);border-radius:var(--sp-radius);overflow:hidden}
.sp-progress>span{display:block;height:100%;background:var(--sp-gold);transition:width var(--sp-hover) var(--sp-ease)}

/* ── STOPKA (.sp-stopka) ──────────────────────────────
   Zaakceptowana w rundzie 14: wariant „Pomocna” + akordeon na telefonie.
   Znaczniki mają jedno źródło: narzedzia/stopka.py. Zachowanie: app.js, sekcja „Stopka”.
   Układ reaguje na szerokość SAMEJ stopki (container queries). */
.sp-stopka{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;
  background:var(--sp-ink);color:var(--sp-paper);--sp-stopka-linia:rgba(203,185,142,.28);--sp-stopka-cichy:#CFC9BC}
.sp-stopka a{color:inherit;text-decoration:none}
.sp-stopka a:hover{color:var(--sp-gold-light);text-decoration:underline;text-underline-offset:4px}
.sp-stopka :focus-visible{outline-color:var(--sp-gold-light)}
.sp-stopka-wrap{position:relative;z-index:1;padding:clamp(48px,7cqi,96px) clamp(20px,4.5cqi,64px) clamp(24px,3cqi,36px)}
/* górna krawędź rozdarta: zieleń na kremie = duży kontrast, więc clip-path (system krawędzi) */
.sp-stopka--rozdarcie{clip-path:polygon(0.00% 3.52px,0.53% 3.44px,1.05% 4.13px,1.58% 4.32px,2.11% 3.83px,2.63% 3.96px,3.16% 4.03px,3.68% 3.93px,4.21% 3.69px,4.74% 3.84px,5.26% 4.21px,5.79% 2.77px,6.32% 3.16px,6.84% 3.07px,7.37% 2.71px,7.89% 2.86px,8.42% 2.46px,8.95% 3.35px,9.47% 1.52px,9.47% 3.99px,10.00% 4.52px,10.53% 2.31px,10.53% 3.87px,11.05% 3.97px,11.58% 4.51px,12.11% 4.28px,12.63% 4.07px,13.16% 3.86px,13.68% 4.66px,14.21% 4.18px,14.74% 3.98px,15.26% 4.26px,15.79% 3.75px,16.32% 3.31px,16.84% 3.1px,17.37% 3.1px,17.89% 2.68px,18.42% 2.67px,18.95% 2.22px,19.47% 1.36px,20.00% 1.62px,20.53% 1.32px,21.05% 1.59px,21.58% 0.78px,22.11% 1.15px,22.63% 1.5px,23.16% 1.42px,23.68% 1.23px,24.21% 1.13px,24.74% 1.71px,25.26% 1.46px,25.79% 1.85px,26.32% 1.99px,26.84% 2.73px,27.37% 3.43px,27.89% 3.18px,28.42% 2.24px,28.95% 2.0px,29.47% 2.57px,30.00% 2.53px,30.53% 1.96px,31.05% 1.82px,31.58% 2.21px,32.11% 2.11px,32.63% 1.88px,33.16% 2.82px,33.68% 2.29px,34.21% 3.01px,34.74% 3.3px,35.26% 2.54px,35.79% 2.13px,36.32% 1.97px,36.84% 2.13px,37.37% 2.02px,37.89% 2.31px,38.42% 2.95px,38.95% 2.18px,39.47% 2.45px,40.00% 2.17px,40.53% 1.46px,41.05% 1.32px,41.58% 1.22px,42.11% 1.37px,42.63% 0.9px,43.16% 1.56px,43.68% 1.29px,44.21% 1.01px,44.74% 0.99px,45.26% 1.45px,45.79% 1.51px,46.32% 1.2px,46.84% 1.37px,47.37% 1.25px,47.89% 1.29px,48.42% 1.12px,48.95% 1.13px,49.47% 1.25px,50.00% 1.09px,50.53% 2.14px,51.05% 1.19px,51.58% 1.37px,52.11% 1.43px,52.63% 1.94px,53.16% 2.53px,53.68% 2.18px,54.21% 3.84px,54.74% 3.72px,55.26% 4.09px,55.79% 3.87px,56.32% 4.24px,56.84% 4.31px,57.37% 3.45px,57.89% 3.88px,58.42% 2.68px,58.95% 2.66px,59.47% 2.25px,60.00% 1.55px,60.53% 2.41px,61.05% 3.2px,61.58% 0.98px,61.58% 3.35px,62.11% 2.48px,62.63% 3.03px,63.16% 3.3px,63.68% 2.73px,64.21% 2.16px,64.74% 1.65px,65.26% 2.83px,65.79% 2.18px,66.32% 3.1px,66.84% 2.81px,67.37% 2.05px,67.89% 2.38px,68.42% 2.35px,68.95% 1.95px,69.47% 0.85px,70.00% 1.65px,70.53% 1.22px,71.05% 0.93px,71.58% 1.27px,72.11% 1.19px,72.63% 1.37px,73.16% 1.03px,73.68% 1.54px,74.21% 0.98px,74.74% 1.59px,75.26% 1.51px,75.79% 0.85px,76.32% 1.14px,76.84% 1.31px,77.37% 1.53px,77.89% 1.25px,78.42% 1.86px,78.95% 1.99px,79.47% 1.51px,80.00% 1.86px,80.53% 1.03px,81.05% 1.52px,81.58% 1.12px,82.11% 1.89px,82.63% 1.77px,83.16% 1.71px,83.68% 2.23px,84.21% 1.36px,84.74% 1.08px,85.26% 0.9px,85.79% 2.19px,86.32% 2.35px,86.84% 1.65px,87.37% 1.65px,87.89% 1.88px,88.42% 2.52px,88.95% 1.53px,89.47% 1.23px,90.00% 1.15px,90.53% 1.34px,91.05% 2.31px,91.58% 2.18px,92.11% 2.7px,92.63% 2.84px,93.16% 3.18px,93.68% 2.96px,94.21% 3.75px,94.74% 3.76px,95.26% 3.35px,95.79% 4.0px,96.32% 3.71px,96.84% 4.02px,97.37% 3.61px,97.89% 4.01px,98.42% 3.05px,98.95% 2.76px,99.47% 4.41px,100.00% 4.3px,100% 100%,0% 100%)}

/* ── trzy najczęstsze sprawy ─────────────────────────────────── */
.sp-stopka-akcje{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:clamp(40px,5cqi,64px)}
.sp-stopka-akcja{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:20px;
  border:1px solid rgba(203,185,142,.35);background:rgba(247,244,237,.04);
  transition:border-color var(--sp-hover) var(--sp-ease),transform var(--sp-hover) var(--sp-ease),background-color var(--sp-hover) var(--sp-ease);border-radius:var(--sp-radius)}
.sp-stopka .sp-stopka-akcja:hover{text-decoration:none;color:var(--sp-paper);border-color:var(--sp-gold-light);background:rgba(247,244,237,.08)}
@media(hover:hover) and (pointer:fine){.sp-stopka-akcja:hover{transform:translateY(-3px)}}
html[data-motion="off"] .sp-stopka-akcja:hover{transform:none}
.sp-stopka-akcja>.sp-icon:first-child{grid-row:1 / span 2;width:26px;height:26px;color:var(--sp-gold-light)}
.sp-stopka-akcja b{font-weight:400;font-size:20px}
.sp-stopka-akcja span{font-size:15px;color:var(--sp-stopka-cichy)}
.sp-stopka-akcja>.sp-icon:last-child{grid-row:1 / span 2;grid-column:3;color:var(--sp-gold-light);transition:transform var(--sp-hover) var(--sp-ease)}
.sp-stopka-akcja:hover>.sp-icon:last-child{transform:translateX(3px)}

/* ── logo + kontakt obok linków ──────────────────────────────── */
.sp-stopka-srodek{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,3fr);gap:clamp(24px,3.5cqi,56px)}
.sp-stopka-kolumny{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2cqi,28px)}
.sp-stopka-grupa>summary{list-style:none;font-size:19px;color:var(--sp-gold-light);margin-bottom:14px}
.sp-stopka-grupa>summary::-webkit-details-marker{display:none}
.sp-stopka-grupa ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px}
.sp-stopka-grupa a{display:inline-block;padding-block:2px}

.sp-stopka-kontakt{display:grid;gap:10px;font-size:17px;align-content:start}
.sp-stopka-kontakt p{display:flex;align-items:center;gap:10px;margin:0}
.sp-stopka-kontakt .sp-icon{color:var(--sp-gold-light);flex:none}
.sp-stopka-kontakt small{color:var(--sp-stopka-cichy);font-size:14px}
.sp-stopka-wysylka{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--sp-gold-light);
  border:1px solid rgba(203,185,142,.4);padding:8px 14px;justify-self:start;border-radius:var(--sp-radius)}

/* ikony mediów społecznościowych — cel dotykowy 44 × 44 px */
.sp-stopka-social{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:6px}
.sp-stopka-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(203,185,142,.35);
  transition:border-color var(--sp-hover) var(--sp-ease),color var(--sp-hover) var(--sp-ease),transform var(--sp-hover) var(--sp-ease);border-radius:var(--sp-radius)}
.sp-stopka .sp-stopka-social a:hover{text-decoration:none;color:var(--sp-gold-light);border-color:var(--sp-gold-light)}
@media(hover:hover) and (pointer:fine){.sp-stopka-social a:hover{transform:translateY(-2px)}}
html[data-motion="off"] .sp-stopka-social a:hover{transform:none}
.sp-stopka-social .sp-icon{width:20px;height:20px;color:inherit}

/* ── pas prawny: sprzedaż weterynaryjnych produktów OTC na odległość ──
   art. 104 ust. 5 rozporządzenia (UE) 2019/6 — dane organu, odnośnik do wykazu, wspólne logo UE
   prowadzące do wpisu sklepu. Logo to chroniony znak: w motywie wstawiamy plik od inspekcji, nie rysunek. */
.sp-stopka-prawo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3cqi,32px);align-items:center;
  margin-top:clamp(36px,5cqi,56px);padding:clamp(18px,2.5cqi,24px);border:1px solid var(--sp-stopka-linia);border-radius:var(--sp-radius)}
.sp-stopka-logo-ue{display:grid;place-items:center;align-content:center;gap:4px;width:150px;min-height:96px;padding:10px;text-align:center;
  border:1px dashed rgba(203,185,142,.6);font-size:14px;line-height:1.3;border-radius:var(--sp-radius)}
.sp-stopka-logo-ue small{font-size:11px;color:var(--sp-stopka-cichy)}
.sp-stopka-prawo-tytul{font-size:18px;color:var(--sp-gold-light);margin:0 0 6px}
.sp-stopka-prawo p{margin:0;font-size:15px;color:var(--sp-stopka-cichy)}
.sp-stopka-prawo strong{font-weight:400;color:var(--sp-paper)}
.sp-stopka-prawo-linki{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px!important}
.sp-stopka-prawo-linki a{color:var(--sp-paper);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(203,185,142,.5)}

/* ── pasek dolny ─────────────────────────────────────────────── */
.sp-stopka-dolny{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  margin-top:clamp(24px,3cqi,32px);padding-top:20px;border-top:1px solid var(--sp-stopka-linia);font-size:14px;color:var(--sp-stopka-cichy)}
.sp-stopka-prawne{display:flex;flex-wrap:wrap;gap:6px 18px}
.sp-stopka-chipy{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sp-stopka-chip{border:1px solid rgba(203,185,142,.4);padding:3px 9px;font-size:13px;letter-spacing:.3px;white-space:nowrap;border-radius:var(--sp-radius)}
.sp-stopka-guzik{background:none;border:1px solid rgba(203,185,142,.5);color:inherit;font:inherit;font-size:14px;
  min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:border-color var(--sp-hover) var(--sp-ease),color var(--sp-hover) var(--sp-ease),transform var(--sp-hover) var(--sp-ease);border-radius:var(--sp-radius)}
@media(hover:hover) and (pointer:fine){.sp-stopka-guzik:hover{border-color:var(--sp-gold-light);color:var(--sp-gold-light);transform:translateY(-2px)}}
html[data-motion="off"] .sp-stopka-guzik:hover{transform:none}

/* ── węższa stopka ───────────────────────────────────────────── */
/* do ok. 1080 px cztery kolumny linków i kontakt obok siebie się nie mieszczą — kontakt schodzi nad linki */
@container (max-width:1080px){.sp-stopka-srodek{grid-template-columns:1fr}}
@container (max-width:900px){
  .sp-stopka-kolumny{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-stopka-akcje{grid-template-columns:1fr}
}
@container (max-width:560px){
  .sp-stopka-kolumny{grid-template-columns:1fr;gap:0}
  .sp-stopka-prawo{grid-template-columns:1fr}
  .sp-stopka-dolny{flex-direction:column;align-items:flex-start}
  /* akordeon: grupy linków zwinięte, jedna linia na grupę */
  .sp-stopka--akordeon .sp-stopka-grupa{border-bottom:1px solid var(--sp-stopka-linia)}
  .sp-stopka--akordeon .sp-stopka-grupa>summary{display:flex;justify-content:space-between;align-items:center;min-height:54px;margin:0;cursor:pointer}
  .sp-stopka--akordeon .sp-stopka-grupa>summary::after{content:'';width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:translateY(-3px) rotate(45deg);transition:transform var(--sp-hover) var(--sp-ease)}
  .sp-stopka--akordeon .sp-stopka-grupa[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
  .sp-stopka--akordeon .sp-stopka-grupa ul{padding-bottom:18px}
}

/* ── WEJŚCIA SEKCJI ────────────────────────────────── */
[data-reveal]{opacity:1} /* brak JS = treść widoczna */
.js [data-reveal]{opacity:0;transform:translateY(16px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--sp-reveal) var(--sp-ease),transform var(--sp-reveal) var(--sp-ease)}
html[data-motion="off"] .js [data-reveal]{opacity:1;transform:none}

/* pasek postępu strony */
.sp-readbar{position:fixed;top:0;left:0;height:3px;background:var(--sp-gold);width:0;z-index:70;pointer-events:none}

/* ── ROZDARTE KRAWĘDZIE ────────────────────────────
   clip-path zamiast maski SVG: maska wymaga prefiksu -webkit- w Safari,
   a przy otwarciu z pliku lokalnego jest tam blokowana jako zasób obcego pochodzenia.
   x w procentach, y w pikselach — amplituda nie rośnie razem z wysokością sekcji. */


/* ── ZŁOTE WŁOSKOWATE LINIE ────────────────────────── */
.sp-rule{border:0;height:1px;background:var(--sp-hair);margin:0}
.sp-rule--ink{background:var(--sp-hair-ink)}
.sp-rule--double{height:4px;background:none;border-top:1px solid var(--sp-hair);border-bottom:1px solid var(--sp-hair)}
.sp-rule--short{width:64px}

/* ── TYPOGRAFIA JAKO DEKORACJA ─────────────────────── */
.sp-numeral{font-size:clamp(56px,7vw,96px);line-height:.9;color:transparent;
  -webkit-text-stroke:1px var(--sp-gold);letter-spacing:-2px;font-variant-numeric:lining-nums}
.sp-numeral--solid{color:var(--sp-gold);-webkit-text-stroke:0}
.on-ink .sp-numeral{-webkit-text-stroke-color:var(--sp-gold-light)}
.sp-display{font-size:clamp(34px,3.6vw,48px);line-height:1.15;font-variant-numeric:tabular-nums}


/* ══════════════════════════════════════════════════════════════════
   JĘZYK ETYKIETY — komponenty przeniesione wprost z opakowań marki.
   Źródło: Marka/Etykiety/*.png. Konstrukcja etykiety to: rycina w tle,
   nazwa w dwóch liniach (prosta + kursywa), złota linia, kursywa z „&",
   rząd rycin w rozdartych krążkach.
   ══════════════════════════════════════════════════════════════════ */

/* ── Nazwa w dwóch liniach: prosta i kursywa (jak PSTRĄG / z ŁOSOSIEM) ── */


/* ── Kursywa z ampersandem — podpis receptury spod nazwy ── */



/* ── Rycina jako warstwa tła sekcji (jak ryba za typografią na etykiecie) ── */
/* na zieleni złota rycina musi być wyraźniejsza, jak na etykiecie */

/* ── Krążek z ryciną — krawędź wycięta ręcznie, nie idealne koło ── */


/* ── Rząd cech z rycinami (dolny pas etykiety) ── */


/* ── Rycina jako ilustracja modułu (80–160 px, bez cienia) ── */

/* ══════════ POPRAWKI PO PRZEGLĄDZIE KODU ══════════ */

/* ── Nagłówek sekcji w trzech układach (różnorodność w budowaniu sekcji) ── */
.sp-head--srodek{text-align:center;margin-inline:auto;display:grid;justify-items:center}
.sp-head--srodek .sp-kicker{justify-content:center}
.sp-head--srodek .sp-kicker::after{content:'';width:34px;height:1px;background:var(--sp-hair-strong);flex:none}
.sp-head--srodek.on-ink .sp-kicker::after{background:var(--sp-gold-light)}
.sp-head--srodek p{max-width:56ch}
.sp-head--linia{display:grid;gap:var(--sp-s3)}
.sp-head--linia h2{padding-bottom:var(--sp-s3);border-bottom:1px solid var(--sp-hair)}
.sp-head--boczny{display:grid;grid-template-columns:minmax(0,20ch) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.sp-head--boczny .sp-kicker{margin:0}
@media(max-width:760px){.sp-head--boczny{grid-template-columns:1fr}}

/* ── Filtr organiczny: dopracowany hover ── */
.sp-filter--organic{border-color:transparent;background:transparent;position:relative;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s2);width:100%;text-align:left;
  transition:color var(--sp-fast)}
.sp-filter--organic::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--sp-surface);
  transition:background var(--sp-hover),transform var(--sp-hover) var(--sp-ease);
  clip-path:polygon(0 3%,22% 0,65% 2%,99% 1%,100% 94%,67% 100%,34% 97%,0 100%)}
.sp-filter--organic .sp-icon{transition:transform var(--sp-hover) var(--sp-ease),opacity var(--sp-fast);opacity:.55}
@media(hover:hover) and (pointer:fine){
  .sp-filter--organic:hover::before{background:var(--sp-soft);transform:translateY(-2px) rotate(-.4deg)}
  .sp-filter--organic:hover .sp-icon{opacity:1;transform:rotate(90deg)}
  .sp-filter--organic[aria-pressed="true"]:hover .sp-icon{transform:none}
}
/* bazowa reguła .sp-filter[aria-pressed=true]:hover ma wyższą wagę i podkładała zieleń — gasimy ją tutaj */
.sp-filter--organic[aria-pressed="true"],
.sp-filter--organic[aria-pressed="true"]:hover,
.sp-filter--organic:hover{background:transparent;border-color:transparent;color:var(--sp-ink)}
.sp-filter--organic[aria-pressed="true"]::before{background:var(--sp-gold-light)}
.sp-filter--organic[aria-pressed="true"] .sp-icon{opacity:1}

/* ── Zakładki: ruch przy najechaniu ──
   Przyciski (system) i odnośniki zakładek Woo (ul.wc-tabs > li > a) wyglądają tak samo. */
.sp-tabs{display:flex;gap:var(--sp-s3);border-bottom:1px solid var(--sp-line);flex-wrap:wrap}
.sp-tabs button,.sp-tabs a[role="tab"]{background:none;border:0;padding:13px 2px;font-size:19px;color:var(--sp-muted);position:relative;
  transition:color var(--sp-fast)}
.sp-tabs a[role="tab"]{display:block;text-decoration:none}
.sp-tabs button::after,.sp-tabs a[role="tab"]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sp-gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--sp-hover) var(--sp-ease)}
.sp-tabs button:hover,.sp-tabs a[role="tab"]:hover{color:var(--sp-ink)}
.sp-tabs button:hover::after,.sp-tabs a[role="tab"]:hover::after{transform:scaleX(.4)}
.sp-tabs button[aria-selected="true"],.sp-tabs a[role="tab"][aria-selected="true"]{color:var(--sp-ink)}
.sp-tabs button[aria-selected="true"]::after,.sp-tabs a[role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
html[data-motion="off"] .sp-tabs button::after,html[data-motion="off"] .sp-tabs a[role="tab"]::after{transition:none}

/* ── Stany puste: z ryciną, nie z samą pustką ── */
.sp-pusty{display:grid;justify-items:center;text-align:center;gap:var(--sp-s2);padding:var(--sp-s5) var(--sp-s3)}
/* Ryciny w stanach pustych w pełnym tuszu, jak w pasie cech. Obniżone krycie (.9 / .55)
   dokładało się do z natury jaśniejszego rysunku nr 39 i ryciny wyglądały na wyblakłe. */
.sp-pusty img{width:120px;height:auto;transition:transform var(--sp-hover) var(--sp-ease)}
@media(hover:hover) and (pointer:fine){
  .sp-pusty:hover img,.wyn-brak:hover img,.e404:hover img,.lst-brak:hover img{transform:translateY(-4px) rotate(-1.5deg)}
}
html[data-motion="off"] .sp-pusty:hover img,html[data-motion="off"] .wyn-brak:hover img,
html[data-motion="off"] .e404:hover img,html[data-motion="off"] .lst-brak:hover img{transform:none}
.sp-pusty h3{font-size:24px;margin-top:var(--sp-s2)}
.sp-pusty p{color:var(--sp-muted);font-size:17px;max-width:40ch}
.sp-pusty .sp-button{margin-top:var(--sp-s2)}
/* Zaślepka packshotu zostaje na bieli karty, bez obrysu — każdy prostokąt w środku
   gryzie się z nieregularną krawędzią karty. Miejsce znaczy sama rycina i podpis. */
.sp-product-empty{height:230px;display:grid;place-items:center;align-content:center;gap:10px;
  background:transparent;border:0;
  color:var(--sp-muted);font-size:15px;text-align:center;padding:var(--sp-s2)}
.sp-product-empty img{width:74px;transition:transform var(--sp-hover) var(--sp-ease)}
@media(hover:hover) and (pointer:fine){.sp-product:hover .sp-product-empty img{transform:translateY(-4px) rotate(-1.5deg)}}

/* ── Komunikat pływający: pasek upływającego czasu ── */
.sp-toast-host .sp-notice{overflow:hidden}
.sp-notice-czas{position:absolute;left:0;bottom:0;height:2px;background:var(--tone);width:100%;
  transform-origin:left;transform:scaleX(1)}
.sp-notice-czas.leci{animation:sp-czas var(--czas,6s) linear forwards}
.sp-toast-host .sp-notice:hover .sp-notice-czas,
.sp-toast-host .sp-notice:focus-within .sp-notice-czas{animation-play-state:paused}
@keyframes sp-czas{to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.sp-notice-czas.leci{animation:none;transform:scaleX(1)}}
html[data-motion="off"] .sp-notice-czas.leci{animation:none}

/* ── FAQ: łagodne rozwijanie steruje skrypt ── */
.sp-faq .sp-faq-answer{will-change:height}

/* ── Wskaźnik ładowania ─────────────────────────────
   Cienki pierścień w kolorze złota z ciemniejszym łukiem — nie systemowy spinner.
   Przy ograniczeniu ruchu zatrzymuje się i pokazuje statyczny pierścień. */
.sp-loader{--l:34px;width:var(--l);height:var(--l);flex:none;display:inline-block;position:relative}
.sp-loader::before,.sp-loader::after{content:'';position:absolute;inset:0;border-radius:50%}
.sp-loader::before{border:1.5px solid var(--sp-line)}
.sp-loader::after{border:1.5px solid transparent;border-top-color:var(--sp-action);
  animation:sp-spin 1.2s linear infinite}
.sp-loader--sm{--l:20px}
.sp-loader--lg{--l:56px}
.on-ink .sp-loader::before{border-color:var(--sp-hair-ink)}
.on-ink .sp-loader::after{border-top-color:var(--sp-gold-light)}
.sp-loader-blok{display:grid;justify-items:center;gap:var(--sp-s2);padding:var(--sp-s5) var(--sp-s3);text-align:center}
.sp-loader-blok p{color:var(--sp-muted);font-size:17px}
@media(prefers-reduced-motion:reduce){.sp-loader::after{animation:none;border-top-color:var(--sp-line)}}
html[data-motion="off"] .sp-loader::after{animation:none}