/*
Theme Name: Caritas Skin
Theme URI: https://caritasgliwice.pl/sklep/
Description: Skorka sklepu. Celowo poza schematem reszty portfela: paleta sliwkowa zamiast zieleni i blekitow, krój ROZSZERZONY zamiast sciesnionego groteska, uklad asymetryczny bez kafelkow, bez ramek i bez cieni. Dwa efekty wiodace: packshot podazajacy za kursorem w indeksie oraz naglowek odwracajacy sie na tle przez mix-blend-mode.
Author: Krzysztof
Template: generatepress
Version: 1.0
Text Domain: caritas-skin
*/

/* =========================================================================
   1. ZMIENNE
   Paleta celowo ciepla i sliwkowa - w portfelu nie ma ani jednej takiej.
   Zielenie, blekity i miedz sa juz zajete przez inne domeny.
   ========================================================================= */
:root{
  --atrament:#1A1320;        /* baklazanowa czern - tlo pasm ciemnych */
  --atrament-2:#241A2C;      /* o ton jasniejsza, do wyroznien */
  --kosc:#EFE8DC;            /* tlo pasm jasnych */
  --kosc-2:#E2D8C7;
  --musztarda:#D9A400;       /* akcent na ciemnym tle */
  --musztarda-na-jasnym:#7A5000; /* ten sam akcent na kosci - D9A400 dawal
                                    kontrast 1,86:1, czyli nieczytelna cene */
  --na-ciemnym:#EFE8DC;
  --na-ciemnym-cichy:#AB9CB6;
  --na-jasnym:#1A1320;
  --na-jasnym-cichy:#655A6E;

  --display:'Archivo',system-ui,Arial,sans-serif;
  --tekst:'Source Serif 4',Georgia,'Times New Roman',serif;

  /* uklad asymetryczny: waska szyna + szeroka kolumna tresci */
  --szyna:16rem;
  --luz:clamp(1.25rem,4vw,4rem);
  --rytm:clamp(4rem,9vw,8rem);
}

/* krój rozszerzony - odwrotnosc sciesnietego groteska, ktory mi sie powtarzal */
.rozszerz{font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:700;letter-spacing:.005em}

/* =========================================================================
   2. PODSTAWA
   ========================================================================= */
body{
  background:var(--atrament);
  color:var(--na-ciemnym);
  font-family:var(--tekst);
  font-size:1.0625rem;
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
/* zero promieni, zero cieni - rozdziela odstep i plama koloru, nie ramka */
*,*::before,*::after{border-radius:0 !important;box-shadow:none !important}

h1,h2,h3,h4,.cena,.nr{font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:700;letter-spacing:.005em;line-height:1.02}
h1{font-size:clamp(2.6rem,8.5vw,6.5rem);margin:0 0 .35em}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem);margin:0 0 .5em}
h3{font-size:clamp(1.2rem,2vw,1.55rem);margin:0 0 .4em}
p{margin:0 0 1.15em;max-width:62ch}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}

/* GP ogranicza szerokosc na .site.grid-container - zdejmuje to, bo pasma maja
   isc przez caly ekran (pulapka zapisana przy detoksmed).
   `.inside-article` ma wlasne biale tlo i 40 px odstepu - zmierzone w DOM,
   bez tego w srodku kosciowego pasma siedzi biale pudlo. */
.site.grid-container{max-width:none;padding:0}
.site-content,.content-area,.entry-content,#primary,#main,
.inside-article,.woocommerce-archive-wrapper{
  max-width:none;margin:0;padding:0;background:transparent;border:0}
/* GP maluje biale tlo przez `.separate-containers .inside-article` (0,2,0)
   i wstawia te regule INLINE, czyli po moim arkuszu. Samo `.inside-article`
   przegrywa - trzeba powtorzyc jego selektory. Zmierzone w DOM. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .container,
.inside-page-header{background:transparent;padding:0;margin:0;border:0}
.site-content{display:block}

/* =========================================================================
   3. PASMA - pelna szerokosc, naprzemiennie atrament / kosc
   ========================================================================= */
.pas{padding:var(--rytm) var(--luz)}
.pas--kosc{background:var(--kosc);color:var(--na-jasnym)}
.pas--kosc .cichy{color:var(--na-jasnym-cichy)}
.cichy{color:var(--na-ciemnym-cichy);font-size:.95rem}

/* siatka asymetryczna: szyna z metryczka + szeroka kolumna */
.uklad{display:grid;grid-template-columns:var(--szyna) minmax(0,1fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:start;max-width:94rem;margin:0 auto}
.szyna{position:sticky;top:7rem;font-family:var(--display);font-variation-settings:'wdth' 108;font-size:.78rem;line-height:1.5;font-weight:500}
.szyna dt{color:var(--na-ciemnym-cichy);margin-top:1.1rem}
.pas--kosc .szyna dt{color:var(--na-jasnym-cichy)}
.szyna dd{margin:0}
.szyna dt:first-child{margin-top:0}

/* =========================================================================
   4. BAJER 1 - naglowek odwracajacy sie na tle
   mix-blend-mode: difference sprawia, ze pasek czyta sie poprawnie i na
   atramencie, i na kosci, bez zadnego skryptu i bez wlasnego tla.
   ========================================================================= */
.pasek{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem var(--luz);mix-blend-mode:difference;color:#fff;pointer-events:none}
.pasek a{pointer-events:auto}
.pasek .znak{font-family:var(--display);font-variation-settings:'wdth' 125;font-weight:700;font-size:1.05rem;text-decoration:none}
.pasek nav{display:flex;gap:clamp(.9rem,2vw,2rem);font-family:var(--display);font-variation-settings:'wdth' 106;font-size:.82rem;font-weight:500}
.pasek nav a{text-decoration:none;opacity:.85}
.pasek nav a:hover,.pasek nav a:focus-visible{opacity:1;text-decoration:underline}
/* przy ograniczonych animacjach i w druku blend tylko przeszkadza */
@media print{.pasek{position:static;mix-blend-mode:normal;color:#000}}

/* =========================================================================
   5. WEJSCIE - nie pasmo hero z gradientem, tylko strona tytulowa
   ========================================================================= */
.wejscie{min-height:88vh;display:grid;align-content:end;padding:calc(var(--rytm) + 3rem) var(--luz) var(--rytm);
  max-width:94rem;margin:0 auto;gap:1.5rem}
.wejscie h1{max-width:16ch}
.wejscie .lead{font-size:clamp(1.05rem,1.6vw,1.35rem);max-width:46ch;color:var(--na-ciemnym-cichy)}
.wejscie .metryka{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;font-family:var(--display);
  font-variation-settings:'wdth' 108;font-size:.8rem;font-weight:500;color:var(--na-ciemnym-cichy)}
.wejscie .metryka b{color:var(--musztarda);font-weight:700}
.pas--kosc .wejscie .metryka b{color:var(--musztarda-na-jasnym)}

/* =========================================================================
   6. BAJER 2 - indeks produktow jako lista tekstowa
   Zadnych kafelkow. Zdjecie pojawia sie dopiero pod kursorem i plynie za nim.
   ========================================================================= */
.indeks{list-style:none;margin:0;padding:0;counter-reset:poz}
.indeks li{counter-increment:poz;margin:0}
.indeks .wiersz{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:clamp(.75rem,2vw,2rem);
  align-items:baseline;padding:clamp(1rem,2.2vw,1.7rem) .75rem;text-decoration:none;
  transition:background-color .25s ease,padding-left .25s ease}
.indeks .wiersz:hover,.indeks .wiersz:focus-visible{background:var(--atrament-2);padding-left:1.6rem;outline:none}
.pas--kosc .indeks .wiersz:hover,.pas--kosc .indeks .wiersz:focus-visible{background:var(--kosc-2)}
.indeks .nr{font-size:.8rem;font-variation-settings:'wdth' 100;color:var(--na-ciemnym-cichy);font-weight:500}
.pas--kosc .indeks .nr{color:var(--na-jasnym-cichy)}
.indeks .nr::before{content:counter(poz,decimal-leading-zero)}
.indeks .nazwa{font-family:var(--display);font-variation-settings:'wdth' 115;font-weight:700;
  font-size:clamp(1.35rem,3.4vw,2.6rem);line-height:1.08}
.indeks .cena{font-size:clamp(1rem,1.7vw,1.4rem);white-space:nowrap;color:var(--musztarda)}
.pas--kosc .indeks .cena{color:var(--musztarda-na-jasnym)}
/* przekreslona cena przez `opacity` spadala ponizej progu - wlasny kolor zamiast krycia */
.indeks .cena del{opacity:1;margin-right:.4em;font-weight:400;color:var(--na-ciemnym-cichy)}
.pas--kosc .indeks .cena del{color:var(--na-jasnym-cichy)}
.indeks .cena ins{text-decoration:none}
.indeks .opis{grid-column:2;font-size:.95rem;color:var(--na-ciemnym-cichy);max-width:52ch;margin:.35rem 0 0}
.pas--kosc .indeks .opis{color:var(--na-jasnym-cichy)}

/* plywajacy packshot - tylko tam, gdzie jest prawdziwy kursor */
.podglad{position:fixed;top:0;left:0;width:min(22vw,17rem);aspect-ratio:1;z-index:40;
  pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .22s ease,transform .22s ease;will-change:transform,opacity}
.podglad.widac{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.podglad img{width:100%;height:100%;object-fit:contain;display:block}
@media (hover:none),(pointer:coarse){.podglad{display:none}}

/* na dotyku zamiast plywajacego podgladu - miniatura w wierszu */
.indeks .mini{display:none;grid-row:span 2;width:4.5rem;height:4.5rem;object-fit:contain}
@media (hover:none),(pointer:coarse){
  .indeks .wiersz{grid-template-columns:4.5rem minmax(0,1fr) auto}
  .indeks .nr{display:none}
  .indeks .mini{display:block}
}

/* belka nad indeksem: licznik i sortowanie - cicho, w kroju display */
.woocommerce-result-count,.woocommerce-ordering{font-family:var(--display);
  font-variation-settings:'wdth' 106;font-size:.78rem;font-weight:500;margin:0 0 1.5rem}
.pas--kosc .woocommerce-result-count{color:var(--na-jasnym-cichy)}
.woocommerce-ordering{float:right}
.woocommerce-ordering select{background:transparent;border:0;border-bottom:1px solid currentColor;
  color:inherit;font-family:var(--display);font-size:.8rem;padding:.25rem 1.2rem .25rem 0}
.woocommerce-notices-wrapper:empty{display:none}

/* =========================================================================
   7. PRZYCISKI - zwykla wielkosc liter, bez rozstrzelenia (moj nawyk)
   ========================================================================= */
.dzialanie,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wp-element-button{
  display:inline-block;background:var(--musztarda);color:#1A1320;font-family:var(--display);
  font-variation-settings:'wdth' 112;font-weight:700;font-size:.95rem;letter-spacing:0;
  text-transform:none;padding:.85rem 1.6rem;border:0;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease}
/* `.alt` to glowny przycisk Woo - bez niego w selektorze wygrywal fiolet
   rgb(127,84,179) z woocommerce.css */
.woocommerce button.button.alt,.woocommerce a.button.alt,
.woocommerce input.button.alt,.woocommerce #respond input#submit.alt{
  background:var(--musztarda);color:#1A1320}
.dzialanie:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.wp-element-button:hover,
.woocommerce button.button.alt:hover,.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover{background:#F0B81A;color:#1A1320;transform:translateY(-2px)}
.dzialanie--cichy{background:none;color:inherit;padding:.85rem 0;text-decoration:underline}

/* =========================================================================
   8. WOOCOMMERCE - karta produktu i reszta sklepu
   ========================================================================= */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--atrament-2);border-top:2px solid var(--musztarda);color:var(--na-ciemnym);padding:1rem 1.25rem}
.pas--kosc .woocommerce-message,.pas--kosc .woocommerce-info{background:var(--kosc-2);color:var(--na-jasnym)}

/* Karta produktu. Woo uklada kolumny PLYWANIEM (`div.product .images{float:left;
   width:48%}`), wiec siatke trzeba zalozyc na samym `div.product` i zdjac float -
   inaczej galeria sciska tytul do 297 px i lamie go w polowie slowa. Zmierzone. */
.produkt{max-width:94rem;margin:0 auto}
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:start}
/* ⚠ Woo ma te regule zapisana jako liste:
   `.woocommerce #content div.product div.summary, .woocommerce div.product div.summary`.
   Liczy sie specyficznosc TEGO selektora z listy, ktory pasuje - a GeneratePress
   nazywa swoj kontener wlasnie `#content`, wiec w grze jest wariant
   z IDENTYFIKATOREM (1,3,2). Bez `#content` po mojej stronie kolumny zostawaly
   po 48% i tytul lamal sie w polowie slowa. Zmierzone. */
.woocommerce #content div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery{
  float:none;width:auto;max-width:none;margin:0}
.woocommerce div.product .woocommerce-product-gallery img{width:100%;height:auto;display:block}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1}
.woocommerce div.product .product_title{font-size:clamp(2rem,4vw,3.4rem)}
.produkt .price{font-family:var(--display);font-variation-settings:'wdth' 115;font-weight:700;
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--musztarda);display:block;margin:0 0 1.2rem}
.pas--kosc .produkt .price{color:var(--musztarda-na-jasnym)}
.woocommerce div.product form.cart{display:flex;gap:.75rem;flex-wrap:wrap;align-items:stretch;margin:1.5rem 0}
.woocommerce .quantity input[type=number]{background:transparent;color:inherit;border:1px solid currentColor;
  padding:.8rem .6rem;width:5rem;font-family:var(--display);font-size:1rem}

.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:1.75rem;padding:0;margin:0 0 1.5rem;
  font-family:var(--display);font-variation-settings:'wdth' 108;font-size:.9rem;font-weight:600}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs a{text-decoration:none;opacity:.6;padding-bottom:.35rem;display:inline-block}
.woocommerce-tabs ul.tabs li.active a{opacity:1;border-bottom:2px solid var(--musztarda)}

/* koszyk i zamowienie - czytelne na ciemnym */
.woocommerce table.shop_table{border:0;width:100%;border-collapse:collapse}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border:0;border-bottom:1px solid rgba(239,232,220,.14);padding:1rem .5rem;text-align:left}
.pas--kosc .woocommerce table.shop_table th,.pas--kosc .woocommerce table.shop_table td{
  border-bottom-color:rgba(26,19,32,.14)}
.woocommerce table.shop_table th{font-family:var(--display);font-variation-settings:'wdth' 106;
  font-size:.8rem;font-weight:600;color:var(--na-ciemnym-cichy)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  background:transparent;border:0;border-bottom:1px solid currentColor;color:inherit;
  padding:.7rem .2rem;width:100%;font-family:var(--tekst);font-size:1rem}
.woocommerce form .form-row label{font-family:var(--display);font-variation-settings:'wdth' 106;
  font-size:.78rem;font-weight:600;color:var(--na-ciemnym-cichy)}

/* =========================================================================
   9. STOPKA
   ========================================================================= */
.stopka{background:var(--atrament);color:var(--na-ciemnym);padding:var(--rytm) var(--luz) 3rem}
.stopka .uklad{align-items:end}
.stopka .znak{font-family:var(--display);font-variation-settings:'wdth' 125;font-weight:700;
  font-size:clamp(2.5rem,9vw,7rem);line-height:.9;color:var(--atrament-2)}
.stopka small{color:var(--na-ciemnym-cichy);font-size:.82rem}

/* =========================================================================
   10. WASKIE EKRANY - szyna schodzi nad tresc, nic nie wystaje w bok
   ========================================================================= */
@media (max-width:60rem){
  :root{--szyna:auto}
  .uklad{grid-template-columns:minmax(0,1fr)}
  .szyna{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem 1.25rem}
  .szyna dt{margin-top:0}
  .woocommerce div.product{grid-template-columns:minmax(0,1fr)}
  .indeks .wiersz{grid-template-columns:2.5rem minmax(0,1fr);row-gap:.2rem}
  .indeks .cena{grid-column:2;justify-self:start}
  .indeks .opis{grid-column:2}
}
@media (max-width:30rem){
  .indeks .wiersz{grid-template-columns:minmax(0,1fr)}
  .indeks .nr{display:none}
  .indeks .cena,.indeks .opis{grid-column:1}
}

/* =========================================================================
   11. SZANUJEMY USTAWIENIE OGRANICZONEGO RUCHU
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .podglad{display:none}
}

/* =========================================================================
   12. TRZY MODULY KARTY PRODUKTU
   Prompt (manual_prompts/caritas.txt) emituje sam HTML z klasami
   k-zapas / k-czas / k-tory. Wyglad i dzialanie sa TUTAJ - w tresci karty
   nie wolno trzymac <style> ani <script>, bo zapis przez WooCommerce je
   wycina i CSS laduje na stronie jako goly tekst.
   ========================================================================= */

/* --- 1. kalkulator zapasu ------------------------------------------- */
.k-zapas{background:var(--atrament-2);color:var(--na-ciemnym);
  padding:clamp(1.5rem,3vw,2.5rem);margin:2rem 0;display:grid;gap:1.1rem}
.pas--kosc .k-zapas{background:var(--kosc-2);color:var(--na-jasnym)}
.k-zapas p{max-width:62ch}
.k-zapas ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem 1.5rem}
.k-zapas li{font-size:.9rem;color:var(--na-ciemnym-cichy)}
.pas--kosc .k-zapas li{color:var(--na-jasnym-cichy)}
.k-zapas li strong{display:block;font-family:var(--display);
  font-variation-settings:'wdth' 115;font-weight:700;font-size:1.5rem;
  color:var(--musztarda);margin-top:.15rem}
.pas--kosc .k-zapas li strong{color:var(--musztarda-na-jasnym)}
.k-zapas-uwaga{font-size:.92rem;border-left:3px solid var(--musztarda);padding-left:1rem}
.pas--kosc .k-zapas-uwaga{border-left-color:var(--musztarda-na-jasnym)}

/* suwak i wynik dokladane skryptem */
.k-suwak{display:grid;gap:.6rem;margin-top:.4rem}
.k-suwak label{font-family:var(--display);font-variation-settings:'wdth' 106;
  font-size:.78rem;font-weight:600;letter-spacing:.02em}
.k-suwak input[type=range]{width:min(100%,26rem);accent-color:var(--musztarda);height:1.6rem}
.pas--kosc .k-suwak input[type=range]{accent-color:var(--musztarda-na-jasnym)}
.k-wynik{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:.9rem 1.5rem;margin-top:.3rem}
.k-wynik div{font-size:.85rem;color:var(--na-ciemnym-cichy)}
.pas--kosc .k-wynik div{color:var(--na-jasnym-cichy)}
.k-wynik b{display:block;font-family:var(--display);font-variation-settings:'wdth' 115;
  font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.05;
  color:var(--musztarda);font-variant-numeric:tabular-nums}
.pas--kosc .k-wynik b{color:var(--musztarda-na-jasnym)}

/* --- 2. tasma czasu -------------------------------------------------- */
.k-czas{list-style:none;margin:2rem 0;padding:0 0 1rem;display:flex;gap:0;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.k-czas li{counter-increment:none;flex:0 0 min(17rem,72vw);scroll-snap-align:start;
  padding:2.6rem 1.25rem 0 0;position:relative}
/* linia osi biegnie przez wszystkie punkty */
.k-czas li:before{content:'';position:absolute;left:0;right:0;top:1.15rem;height:1px;
  background:currentColor;opacity:.22}
.k-czas li:after{content:attr(data-dzien);position:absolute;left:0;top:0;
  font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:700;
  font-size:.95rem;background:var(--atrament);padding-right:.7rem;
  color:var(--musztarda);font-variant-numeric:tabular-nums}
.pas--kosc .k-czas li:after{background:var(--kosc);color:var(--musztarda-na-jasnym)}
.k-czas li h3{font-size:1.05rem;margin:0 0 .35rem}
.k-czas li p{font-size:.9rem;margin:0;color:var(--na-ciemnym-cichy);max-width:30ch}
.pas--kosc .k-czas li p{color:var(--na-jasnym-cichy)}
/* podpis jednostki przy pierwszym punkcie */
.k-czas[data-podpis]:before{content:attr(data-podpis)}

/* --- 3. dwa tory ----------------------------------------------------- */
.k-tory{margin:2rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:1.4rem clamp(1.5rem,4vw,3.5rem);align-items:start}
.k-tory dt{font-size:1.02rem;line-height:1.55;margin:0;max-width:40ch}
.k-tory dd{margin:0;font-size:.92rem;line-height:1.6;color:var(--na-ciemnym-cichy);
  max-width:40ch;padding-left:1rem;border-left:1px solid currentColor}
.pas--kosc .k-tory dd{color:var(--na-jasnym-cichy)}
/* etykiety torow tylko raz, nad pierwsza para */
.k-tory:before,.k-tory:after{font-family:var(--display);
  font-variation-settings:'wdth' 106;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.k-tory:before{content:'Co czujesz'}
.k-tory:after{content:'Co się dzieje'}

@media (max-width:48rem){
  .k-tory{grid-template-columns:1fr;gap:.45rem 0}
  .k-tory:before,.k-tory:after{display:none}
  .k-tory dd{margin-bottom:1.2rem}
  .k-czas li{flex-basis:min(14rem,78vw)}
}

/* =========================================================================
   13. HERO KARTY PRODUKTU
   Sklada go motyw z danych WooCommerce, nie tresc karty - dzieki temu
   wyglada tak samo niezaleznie od tego, co napisze generator.
   ========================================================================= */
.k-hero{background:var(--atrament);color:var(--na-ciemnym);padding:clamp(3.5rem,8vw,6rem) var(--luz) clamp(2.5rem,5vw,4rem)}
.k-hero-in{max-width:94rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.k-hero .kick{font-family:var(--display);font-variation-settings:'wdth' 108;font-size:.76rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--musztarda);margin:0 0 1rem}
.k-hero h1{font-size:clamp(2.6rem,7vw,5.5rem);margin:0 0 .3em;max-width:14ch}
.k-hero .lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--na-ciemnym-cichy);max-width:46ch;margin:0 0 1.6rem}
.k-hero .ceny{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 1.6rem}
.k-hero .teraz{font-family:var(--display);font-variation-settings:'wdth' 118;font-weight:700;
  font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--musztarda);line-height:1}
.k-hero .bylo{font-size:1.05rem;color:var(--na-ciemnym-cichy);text-decoration:line-through}
.k-hero .oszcz{font-family:var(--display);font-variation-settings:'wdth' 106;font-size:.78rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--na-ciemnym)}
.k-hero .pasek-faktow{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.5rem;
  font-family:var(--display);font-variation-settings:'wdth' 106;font-size:.78rem;color:var(--na-ciemnym-cichy)}
.k-hero .pasek-faktow b{color:var(--na-ciemnym);font-weight:700}
.k-hero figure{margin:0}
.k-hero img{width:100%;height:auto;display:block}
@media (max-width:60rem){.k-hero-in{grid-template-columns:minmax(0,1fr)}.k-hero figure{order:-1;max-width:22rem}}

/* =========================================================================
   14. DOBA Z PRODUKTEM - tarcza 24 h
   Rysunek robi skrypt; bez niego zostaje czytelna lista godzin.
   ========================================================================= */
.k-doba{margin:2rem 0;display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:clamp(1.25rem,4vw,3rem);align-items:center}
.k-doba ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.k-doba li{padding:.7rem .9rem;transition:background-color .2s ease;cursor:default}
.k-doba li.aktywna{background:var(--atrament-2)}
.pas--kosc .k-doba li.aktywna{background:var(--kosc-2)}
.k-doba li h3{font-size:1rem;margin:0 0 .2rem;display:flex;gap:.7rem;align-items:baseline}
.k-doba li h3:before{content:attr(data-podpis);font-variation-settings:'wdth' 100;font-size:.8rem;
  color:var(--musztarda);font-variant-numeric:tabular-nums;min-width:3.2rem}
.pas--kosc .k-doba li h3:before{color:var(--musztarda-na-jasnym)}
.k-doba li p{margin:0;font-size:.88rem;color:var(--na-ciemnym-cichy);max-width:42ch}
.pas--kosc .k-doba li p{color:var(--na-jasnym-cichy)}
.k-tarcza{width:100%;max-width:19rem;height:auto;display:block}
.k-tarcza .tlo{fill:none;stroke:currentColor;stroke-opacity:.18;stroke-width:1}
.k-tarcza .godzina{fill:none;stroke:currentColor;stroke-opacity:.3;stroke-width:1.5}
.k-tarcza .godzina.pelna{stroke-opacity:.55;stroke-width:2.5}
.k-tarcza .wycinek{fill:none;stroke:var(--musztarda);stroke-width:9;stroke-linecap:butt;opacity:.9}
.pas--kosc .k-tarcza .wycinek{stroke:var(--musztarda-na-jasnym)}
.k-tarcza .punkt{fill:currentColor;opacity:.42;transition:opacity .2s ease,r .2s ease}
.k-tarcza .punkt.aktywny{fill:var(--musztarda);opacity:1}
.pas--kosc .k-tarcza .punkt.aktywny{fill:var(--musztarda-na-jasnym)}
.k-tarcza text{font-family:var(--display);font-size:9px;font-weight:700;fill:currentColor;opacity:.5}
.k-tarcza .srodek{font-size:15px;opacity:1;font-variation-settings:'wdth' 118}
@media (max-width:52rem){.k-doba{grid-template-columns:minmax(0,1fr)}.k-tarcza{margin:0 auto}}

/* =========================================================================
   15. GLOSY Z AVATARAMI
   Avatar to RYSUNEK skladany ze znaku - zadnych zdjec osob.
   ========================================================================= */
.k-glosy{list-style:none;margin:2rem 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.k-glosy li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1rem;align-items:start}
.k-glosy .awatar{width:3.5rem;height:3.5rem;display:block}
.k-glosy p{margin:0 0 .5rem;font-size:.95rem;line-height:1.6}
.k-glosy .kto{font-family:var(--display);font-variation-settings:'wdth' 106;font-size:.76rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--na-ciemnym-cichy)}
.pas--kosc .k-glosy .kto{color:var(--na-jasnym-cichy)}

/* =========================================================================
   16. FORMULARZ ZAMOWIENIA (imie + telefon)
   ========================================================================= */
.k-formularz{background:var(--atrament-2);color:var(--na-ciemnym);padding:clamp(1.75rem,4vw,3rem);margin:2.5rem 0}
.pas--kosc .k-formularz{background:var(--kosc-2);color:var(--na-jasnym)}
.k-formularz h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 .5rem}
.k-formularz .pod{color:var(--na-ciemnym-cichy);margin:0 0 1.5rem;max-width:52ch}
.pas--kosc .k-formularz .pod{color:var(--na-jasnym-cichy)}
.k-formularz form{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;align-items:end}
.k-pole{display:grid;gap:.35rem}
.k-pole label{font-family:var(--display);font-variation-settings:'wdth' 106;font-size:.74rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--na-ciemnym-cichy)}
.pas--kosc .k-pole label{color:var(--na-jasnym-cichy)}
.k-pole input{background:transparent;border:0;border-bottom:1px solid currentColor;color:inherit;
  padding:.65rem .1rem;font-family:var(--tekst);font-size:1.05rem;width:100%}
.k-pole input:focus{outline:none;border-bottom-color:var(--musztarda);border-bottom-width:2px}
.k-pole.zly input{border-bottom-color:#E4572E}
.k-blad{font-size:.78rem;color:#E4572E;display:none}
.k-pole.zly .k-blad{display:block}
.k-pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.k-formularz .dopisek{grid-column:1/-1;font-size:.78rem;color:var(--na-ciemnym-cichy);margin:.5rem 0 0;max-width:62ch}
.pas--kosc .k-formularz .dopisek{color:var(--na-jasnym-cichy)}
.k-ok{grid-column:1/-1;background:var(--musztarda);color:#1A1320;padding:1rem 1.25rem;font-weight:700;display:none}
.k-formularz.wyslany .k-ok{display:block}
.k-formularz.wyslany form>*:not(.k-ok){display:none}