/* Spiżarnia Pupila — warstwa 1: tokeny, fonty, reset
   Jedyne miejsce z wartościami literalnymi. Źródło: DESIGN-SYSTEM-SPIZARNIA-PUPILA.md v07 */

@font-face{font-family:'SP Baskerville';src:url('../fonts/baskerville.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SP Baskerville';src:url('../fonts/baskerville-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  /* kolor */
  --sp-ink:#0E2A1F;      --sp-ink-hover:#244D3B;
  --sp-gold:#9E895E;     --sp-gold-light:#CBB98E;
  --sp-paper:#F7F4ED;    --sp-surface:#FFFFFF;   --sp-soft:#F0ECE3;
  --sp-action:#735F38;   --sp-muted:#6F6A63;     --sp-line:#D8D1C4;
  --sp-field-line:#938979;
  /* rysunek rozdartej krawędzi karty produktu — jeden zapis dla wszystkich powierzchni,
     które mają do niej pasować (karta, panel galerii). Odchylenie w pikselach. */
  --sp-fala-karty:0.0% 0.0px,7.1% 0.4px,14.3% 0.2px,21.4% 1.5px,28.6% 2.2px,35.7% 3.4px,42.9% 4.2px,50.0% 2.9px,57.1% 3.3px,64.3% 2.9px,71.4% 1.8px,78.6% 3.2px,85.7% 3.5px,92.9% 1.2px,100.0% 0.0px,calc(100% - 0.9px) 12.5%,calc(100% - 0.0px) 25.0%,calc(100% - 1.3px) 37.5%,calc(100% - 0.2px) 50.0%,calc(100% - 1.1px) 62.5%,calc(100% - 1.8px) 75.0%,calc(100% - 0.4px) 87.5%,100.0% calc(100% - 0.0px),92.9% calc(100% - 0.1px),85.7% calc(100% - 2.1px),78.6% calc(100% - 4.5px),71.4% calc(100% - 4.8px),64.3% calc(100% - 4.8px),57.1% calc(100% - 4.2px),50.0% calc(100% - 4.6px),42.9% calc(100% - 4.8px),35.7% calc(100% - 4.3px),28.6% calc(100% - 4.8px),21.4% calc(100% - 2.2px),14.3% calc(100% - 3.8px),7.1% calc(100% - 1.9px),0.0% calc(100% - 0.0px),1.6px 87.5%,2.4px 75.0%,2.4px 62.5%,2.9px 50.0%,2.0px 37.5%,1.6px 25.0%,0.2px 12.5%;
  --sp-pole:#FBF8F1;   /* powierzchnia pola — ton papieru, nie biel */
  --sp-notice-surface:#FBF9F5;
  --sp-info:#735F38; --sp-success:#36533F; --sp-warning:#78591F; --sp-error:#8A3B32;
  --sp-disabled-bg:#E7E1D6; --sp-disabled-text:#625E55; --sp-disabled-line:#B7AFA0;

  /* geometria */
  --sp-radius:2px;
  --sp-wrap:1248px;
  --sp-pad:56px;
  --sp-s1:8px; --sp-s2:16px; --sp-s3:24px; --sp-s4:32px; --sp-s5:48px; --sp-s6:64px;
  --sp-section:88px;

  /* typografia */
  --sp-serif:'SP Baskerville',Baskerville,Georgia,serif;
  --sp-h1:clamp(42px,5.4vw,76px);
  --sp-h2:clamp(30px,3.2vw,40px);
  --sp-h3:clamp(24px,2.2vw,30px);
  --sp-lead:clamp(21px,1.7vw,26px);

  /* ruch */
  --sp-fast:180ms; --sp-hover:280ms; --sp-reveal:650ms;
  --sp-ease:cubic-bezier(.22,1,.36,1);

  /* faktura i włoskowate linie */
  --sp-hair:rgba(158,137,94,.55);
  --sp-hair-strong:var(--sp-gold);
  --sp-hair-ink:rgba(203,185,142,.34);

  /* cień — wyłącznie dwa dozwolone */
  --sp-shadow-card:0 9px 25px rgba(14,42,31,.065);
  --sp-shadow-overlay:0 12px 36px rgba(14,42,31,.14);
}

@media(max-width:850px){:root{--sp-pad:28px;--sp-section:56px}}
@media(max-width:600px){:root{--sp-pad:20px;--sp-section:48px}}
@media(max-width:360px){:root{--sp-pad:16px}}

*,*::before,*::after{box-sizing:border-box}
/* tło html = zieleń nagłówka i stopki: przewinięcie poza górę lub dół strony (telefony) pokazuje ją
   zamiast kremu; treść ma krem z body */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--sp-ink)}
body{margin:0;background:var(--sp-paper);color:var(--sp-ink);
  font:18px/1.55 var(--sp-serif);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
/* linia pozioma z treści (edytor klasyczny, wtyczki) w kolorze linii palety zamiast szarej ramki przeglądarki */
hr{height:0;border:0;border-top:1px solid var(--sp-line);color:var(--sp-line)}
h1,h2,h3,h4{font-weight:400;line-height:1.12}
/* Długie słowo w dużym nagłówku (np. „Fruktooligosacharydy” w wąskiej kolumnie) rozpychało stronę
   w poziomie. Łamanie tylko wtedy, gdy słowo nie mieści się w szerokości; dzielenie po polsku (lang). */
/* długie słowo łamie się dopiero, gdy nie mieści się w wierszu - bez automatycznego dzielenia
   z łącznikiem, które rozcinało nazwy receptur („Prze-piórka”, „Ło-sosiem”) */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:manual}
h1{font-size:var(--sp-h1);letter-spacing:-1.2px}
h2{font-size:var(--sp-h2);letter-spacing:-.5px}
h3{font-size:var(--sp-h3)}
img,svg,video{display:block;max-width:100%}
/* hidden musi wygrywać z każdym display komponentu — bez tego .kz{display:grid}
   i .sp-pusty{display:grid} ignorowały atrybut i pusty koszyk nie działał */
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-underline-offset:5px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button,a,input,select,summary{touch-action:manipulation}
ul,ol{margin:0;padding:0}
::selection{background:var(--sp-gold-light);color:var(--sp-ink)}
:focus-visible{outline:1px solid var(--sp-action);outline-offset:3px}
.on-ink :focus-visible,.sp-footer :focus-visible{outline-color:var(--sp-gold-light)}

/* dostępność */
/* .screen-reader-text to klasa WordPressa i WooCommerce (etykiety pól, ogłoszenia wariantów) */
.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-pad);top:-100px;z-index:60;background:var(--sp-ink);color:var(--sp-paper);
  padding:12px 18px;text-decoration:none;transition:top var(--sp-fast)}
.skip-link:focus-visible{top:12px}

/* ograniczenie ruchu — systemowe i ręczne */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation-duration:.001ms!important;transition-duration:.001ms!important;transform:none!important}
html[data-motion="off"]{scroll-behavior:auto}

@media(forced-colors:active){
  .sp-button,.sp-notice,.sp-card{border:1px solid ButtonText}
  .sp-button.rustic::before{display:none}
}