/* ═══════════════════════════════════════════════════════════════════════════
   Królewska Karma — arkusz motywu.

   Każda wartość pochodzi z theme.json przez zmienne --wp--preset--*.
   Po prawej stronie var() stoi wartość zapasowa, żeby edytor i panel wyglądały
   sensownie także tam, gdzie WordPress nie wstawi presetów.

   UWAGA (pułapka z RKMed, 24.09.2026): klasy sekcji motywu, które pokrywają się
   z klasami widoku WordPressa (blog, home, archive, search, single, page…),
   zawsze kotwiczymy w elemencie. Dlatego wszystko ma przedrostek .kk-.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --kk-pergamin: var(--wp--preset--color--pergamin, #F7F2E8);
  --kk-pergamin-c: var(--wp--preset--color--pergamin-ciemny, #EFE7D6);
  --kk-biel: var(--wp--preset--color--biel, #fff);
  --kk-kraft-j: var(--wp--preset--color--kraft-jasny, #E3D2BC);
  --kk-kraft: var(--wp--preset--color--kraft, #C09C78);
  --kk-zielen: var(--wp--preset--color--zielen-krolewska, #14372B);
  --kk-zielen-j: var(--wp--preset--color--zielen-jasna, #1E5240);
  --kk-zloto: var(--wp--preset--color--zloto, #C9A227);
  --kk-zloto-c: var(--wp--preset--color--zloto-ciemne, #7A5E12);
  --kk-burgund: var(--wp--preset--color--burgund, #6E1B28);
  --kk-atrament: var(--wp--preset--color--atrament, #1C1A16);
  --kk-szary: var(--wp--preset--color--szary-tekst, #57503F);
  --kk-linia: var(--wp--preset--color--linia, #DDD3BF);

  --kk-naglowki: var(--wp--preset--font-family--naglowki, Georgia, serif);
  --kk-tekst: var(--wp--preset--font-family--tekst, system-ui, sans-serif);

  --kk-r-s: 4px; --kk-r-m: 8px; --kk-r-l: 14px; --kk-r-p: 999px;
  --kk-cien: 0 1px 2px rgba(28,26,22,.05), 0 8px 24px -12px rgba(28,26,22,.18);
  --kk-cien-u: 0 2px 4px rgba(28,26,22,.06), 0 18px 40px -16px rgba(28,26,22,.28);
  --kk-przej: 200ms cubic-bezier(.2,.7,.4,1);
  --kk-ramka-max: 78rem;
  --kk-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ── podstawy ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body.kk{margin:0;background:var(--kk-pergamin);color:var(--kk-atrament);
  font-family:var(--kk-tekst);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
body.kk img{max-width:100%;height:auto}
/* :where() trzyma te reguly na specyficznosci 0-1-0. Inaczej `body.kk h2` (0-1-2) bije
   kazda regule komponentu w rodzaju `.kk-stopka h2` (0-1-1) i naglowki stopki gasna
   na ciemnym tle — zmierzone dwa razy w T-12 i T-17. */
body.kk :where(h1,h2,h3,h4){font-family:var(--kk-naglowki);color:var(--kk-zielen);
  font-weight:600;line-height:1.14;letter-spacing:-.005em;text-wrap:balance;margin:0 0 .6em}
body.kk :where(a){color:var(--kk-zielen-j)}
body.kk :where(a):hover{color:var(--kk-burgund)}
body.kk :focus-visible{outline:2px solid var(--kk-zloto-c);outline-offset:3px;border-radius:var(--kk-r-s)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap}
.kk-pomin{position:absolute;left:-9999px;top:0;z-index:100;background:var(--kk-zielen);color:var(--kk-pergamin);
  padding:.75rem 1.25rem;border-radius:0 0 var(--kk-r-m) 0}
.kk-pomin:focus{left:0}
@media (prefers-reduced-motion:reduce){body.kk *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.kk-ramka{max-width:var(--kk-ramka-max);margin-inline:auto;padding-inline:var(--kk-gutter)}
.kk-ramka--waska{max-width:46rem}
.kk-glowna{min-height:50vh;padding-bottom:var(--wp--preset--spacing--90, 5rem)}

.kk-etykieta{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kk-zloto-c);font-family:var(--kk-tekst)}
.kk-tytul-strony{font-size:clamp(2rem,1.5rem + 2.4vw,3rem);margin-block:.3em .5em}

/* ── przyciski ───────────────────────────────────────────────────────── */
body.kk .kk-przycisk,
body.kk .woocommerce-button,
body.kk button.button,
body.kk a.button,
body.kk input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--kk-tekst);font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  padding:.9rem 1.9rem;border-radius:var(--kk-r-p);border:0;cursor:pointer;text-decoration:none;
  background:var(--kk-zielen);color:var(--kk-pergamin);
  transition:background var(--kk-przej),transform var(--kk-przej)}
body.kk .kk-przycisk:hover,
body.kk .woocommerce-button:hover,
body.kk button.button:hover,
body.kk a.button:hover,
body.kk input[type=submit]:hover{background:var(--kk-zielen-j);color:var(--kk-pergamin);transform:translateY(-1px)}
body.kk .kk-przycisk--obwodka{background:transparent;color:var(--kk-zielen);box-shadow:inset 0 0 0 1.5px var(--kk-zielen)}
body.kk .kk-przycisk--obwodka:hover{background:var(--kk-zielen);color:var(--kk-pergamin)}
body.kk .kk-przycisk[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Przyciski WooCommerce z klasa `alt` (01.10.2026, Z-437).
   `.woocommerce button.button.alt{background-color:#7f54b3}` z woocommerce.css ma
   specyficznosc 0-3-1 i bije motywowe `body.kk button.button` (0-2-2) - stad fiolet
   na karcie produktu prostego, w koszyku („Przejdz do kasy") i na kasie („Kupuje i place").
   Zmierzone na /produkt/probki-dla-psow-malych-ras-zestaw/. Ponizsze selektory maja
   0-4-1 i 0-5-1 (hover), czyli wygrywaja bez `!important`. Klasa `.woocommerce` bywa
   na <body> i na opakowaniu - dlatego dwa warianty kazdego selektora. */
body.kk .woocommerce a.button.alt,
body.kk .woocommerce button.button.alt,
body.kk .woocommerce input.button.alt,
body.kk.woocommerce a.button.alt,
body.kk.woocommerce button.button.alt,
body.kk.woocommerce input.button.alt{
  background:var(--kk-zielen);color:var(--kk-pergamin);border-radius:var(--kk-r-p);
  font-family:var(--kk-tekst);font-weight:600;letter-spacing:.02em;padding:.9rem 1.9rem;border:0}
body.kk .woocommerce a.button.alt:hover,
body.kk .woocommerce button.button.alt:hover,
body.kk .woocommerce input.button.alt:hover,
body.kk.woocommerce a.button.alt:hover,
body.kk.woocommerce button.button.alt:hover,
body.kk.woocommerce input.button.alt:hover{background:var(--kk-zielen-j);color:var(--kk-pergamin)}
body.kk .woocommerce a.button.alt.disabled,
body.kk .woocommerce button.button.alt[disabled],
body.kk .woocommerce button.button.alt:disabled,
body.kk.woocommerce button.button.alt[disabled],
body.kk.woocommerce button.button.alt:disabled{
  background:var(--kk-zielen);color:var(--kk-pergamin);opacity:.55;cursor:not-allowed}

/* Celowo NIE pisze tu ogolnej reguly na `form.cart div.quantity input.qty`.
   Sprawdzone na papierze, zanim weszla: `body.kk .woocommerce form.cart div.quantity input.qty`
   ma 0-5-4 i bije `body.kk .kk-ilosc input.qty` (0-3-2), czyli dolozylaby obwodke
   WEWNATRZ pigulki ilosci - druga ramka w ramce. Oba szablony dodania do koszyka
   (simple.php i variable.php) sa nasze i daja `.kk-ilosc`, wiec regula nizej w tym
   pliku wystarcza. */

/* ── nagłówek ────────────────────────────────────────────────────────── */
.kk-gora{background:var(--kk-zielen);color:var(--kk-pergamin)}
.kk-gora__pasek{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .75rem;padding-block:.5rem;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,242,232,.75);
  border-bottom:1px solid rgba(201,162,39,.25);text-align:center}
.kk-gora__pasek b{color:var(--kk-zloto);font-weight:600}
.kk-gora__main{display:flex;align-items:center;gap:clamp(.75rem,3vw,2.5rem);padding-block:1.1rem}
.kk-cypher{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit;flex:none;min-width:0}
.kk-cypher__znak{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1.5px solid var(--kk-zloto);
  color:var(--kk-zloto);font-family:var(--kk-naglowki);font-size:1.3rem;font-weight:600;letter-spacing:-.04em}
.kk-cypher__nazwa{display:block;font-family:var(--kk-naglowki);font-size:1.4rem;font-weight:600;line-height:1.05;
  color:var(--kk-pergamin)}
.kk-cypher__pod{display:block;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(201,162,39,.9)}
body.kk .kk-gora a.kk-cypher,body.kk .kk-gora a.kk-cypher:hover{color:inherit;text-decoration:none}
body.kk .kk-ikona{color:var(--kk-pergamin);text-decoration:none}
body.kk .kk-ikona:hover{color:var(--kk-zloto)}

.kk-menu{margin-inline:auto}
.kk-menu__lista{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0;font-size:.9375rem;font-weight:500}
body.kk .kk-menu__lista a{color:rgba(247,242,232,.9);text-decoration:none;padding-block:.35rem;position:relative;display:inline-block}
.kk-menu__lista a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--kk-zloto);
  transform:scaleX(0);transition:transform var(--kk-przej)}
.kk-menu__lista a:hover::after,.kk-menu__lista .current-menu-item>a::after{transform:scaleX(1)}
body.kk .kk-menu__lista a:hover{color:var(--kk-pergamin)}

.kk-gora__akcje{display:flex;gap:.4rem;align-items:center;flex:none;margin-left:auto}
.kk-ikona{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--kk-r-p);
  color:var(--kk-pergamin);background:transparent;border:1px solid rgba(247,242,232,.22);cursor:pointer;
  transition:border-color var(--kk-przej),color var(--kk-przej);position:relative;text-decoration:none;flex:none}
.kk-ikona:hover{border-color:var(--kk-zloto);color:var(--kk-zloto)}
.kk-licznik{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;border-radius:var(--kk-r-p);
  background:var(--kk-zloto);color:var(--kk-atrament);font-size:.6875rem;font-weight:700;
  display:grid;place-items:center;padding:0 5px;font-variant-numeric:tabular-nums lining-nums}
.kk-licznik--pusty{display:none}
.kk-menu-przel{display:none}
@media (max-width:900px){
  .kk-menu-przel{display:grid}
  .kk-menu{position:absolute;left:0;right:0;top:100%;background:var(--kk-zielen);
    border-top:1px solid rgba(201,162,39,.3);margin:0;padding:1rem var(--kk-gutter);display:none;z-index:40}
  .kk-gora__main{position:relative}
  body.kk-menu-otwarte .kk-menu{display:block}
  .kk-menu__lista{flex-direction:column;gap:.25rem}
  .kk-menu__lista a{padding-block:.65rem;display:block}
}
@media (max-width:560px){
  .kk-gora__main{gap:.6rem;padding-block:.85rem}
  .kk-cypher__znak{width:38px;height:38px;font-size:1.05rem}
  .kk-cypher__nazwa{font-size:1.125rem}
  .kk-cypher__pod{font-size:.5625rem;letter-spacing:.16em}
  .kk-ikona{width:36px;height:36px}
  .kk-gora__pasek{font-size:.6875rem;letter-spacing:.05em}
}

/* ── okruszek ────────────────────────────────────────────────────────── */
.kk-okruszek{padding-block:1.25rem;font-size:.8125rem;color:var(--kk-szary)}
.kk-okruszek ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.kk-okruszek li+li::before{content:"/";margin-right:.5rem;color:var(--kk-kraft)}
body.kk .kk-okruszek a{color:var(--kk-szary);text-decoration:none}
body.kk .kk-okruszek a:hover{color:var(--kk-zielen);text-decoration:underline}

/* ── archiwum ────────────────────────────────────────────────────────── */
.kk-archiwum__gora{padding-block:.5rem 1.5rem;max-width:46rem}
.kk-archiwum__opis{color:var(--kk-szary)}
/* Odstep u gory nalezy do samych filtrow, nie do sasiada. Wczesniej dawala go
   regula `.kk-hero-kat + .kk-ramka`, ktora zniknela przy przebudowie sekcji
   otwierajacej kategorii — zmierzone: filtry stykaly sie z pasmem hero (0 px). */
.kk-filtry{display:flex;flex-wrap:wrap;gap:.5rem;padding-block:clamp(1.5rem,3vw,2.25rem) 2rem}
.kk-filtr{font-family:var(--kk-tekst);font-size:.8125rem;font-weight:600;padding:.45rem 1rem;
  border-radius:var(--kk-r-p);border:1.5px solid var(--kk-linia);background:var(--kk-biel);
  color:var(--kk-zielen);text-decoration:none;transition:all var(--kk-przej);display:inline-flex;gap:.35rem}
body.kk .kk-filtr{color:var(--kk-zielen);text-decoration:none}
body.kk .kk-filtr:hover{border-color:var(--kk-zielen);color:var(--kk-zielen)}
body.kk .kk-filtr[aria-current="true"]{color:var(--kk-pergamin)}
.kk-filtr[aria-current="true"]{background:var(--kk-zielen);border-color:var(--kk-zielen);color:var(--kk-pergamin)}
.kk-filtr__n{color:var(--kk-szary);font-weight:500;font-variant-numeric:tabular-nums lining-nums}
.kk-filtr[aria-current="true"] .kk-filtr__n{color:var(--kk-zloto)}
.kk-pusto{padding-block:3rem;color:var(--kk-szary)}

/* ── krata produktów (T-14) ──────────────────────────────────────────── */
body.kk ul.products,.kk-krata--produkty{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:clamp(1rem,2vw,1.75rem);list-style:none;margin:0 0 3rem;padding:0}
@media (max-width:480px){
  body.kk ul.products,.kk-krata--produkty{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem}
}
body.kk li.kk-karta{margin:0;padding:0;list-style:none;min-width:0;container-type:inline-size}
body.kk li.kk-karta::before{content:none}
.kk-karta__link{display:flex;flex-direction:column;height:100%;background:var(--kk-biel);
  border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color var(--kk-przej),box-shadow var(--kk-przej),transform var(--kk-przej)}
body.kk .kk-karta__link{color:inherit;text-decoration:none}
body.kk .kk-karta__link:hover{border-color:rgba(201,162,39,.7);box-shadow:var(--kk-cien);transform:translateY(-2px);color:inherit}
.kk-karta__obraz{aspect-ratio:1;background:var(--kk-pergamin);display:grid;place-items:center;padding:1.25rem;
  max-width:100%;overflow:hidden}
.kk-karta__obraz img{max-height:100%;width:auto;object-fit:contain;display:block}
.kk-karta__tresc{padding:1rem 1.1rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;flex:1;min-width:0}
.kk-karta__panowanie{font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--kk-zloto-c);font-weight:600}
.kk-karta__nazwa{font-size:1.0625rem;line-height:1.3;margin:0;overflow-wrap:break-word;hyphens:auto}
.kk-karta__bialko{font-size:.8125rem;color:var(--kk-szary)}
.kk-pigulki{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:.1rem 0 0;padding:0}
.kk-pigulka{font-size:.6875rem;font-weight:600;padding:.2rem .55rem;border-radius:var(--kk-r-p);
  background:var(--kk-kraft-j);color:var(--kk-zielen);border:1px solid rgba(192,156,120,.5)}
.kk-karta__stopka{margin-top:auto;padding-top:.85rem;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.35rem .5rem;border-top:1px solid var(--kk-linia)}
.kk-cena{font-family:var(--kk-tekst);font-size:1.125rem;font-weight:700;color:var(--kk-zielen);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.kk-cena small{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:var(--kk-szary);
  line-height:1.2;margin-top:.15rem;white-space:nowrap}
.kk-cena .kk-od{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kk-szary)}
.kk-probka-tag{font-size:.6875rem;font-weight:600;color:var(--kk-burgund);white-space:nowrap}
@container (max-width:13rem){
  .kk-karta__nazwa{font-size:.9375rem}
  .kk-karta__bialko,.kk-karta__panowanie{display:none}
  .kk-karta__tresc{padding:.75rem .8rem 1rem}
  .kk-cena{font-size:1rem}
}

/* ── karta produktu ──────────────────────────────────────────────────── */
.kk-produkt__siatka{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,4rem);
  align-items:start;padding-block:.5rem 3rem}
.kk-produkt__siatka>*{min-width:0}
@media (max-width:900px){.kk-produkt__siatka{grid-template-columns:1fr;gap:2rem}}
.kk-produkt__media .woocommerce-product-gallery{background:var(--kk-biel);border:1px solid var(--kk-linia);
  border-radius:var(--kk-r-m);padding:clamp(1rem,3vw,2rem);overflow:hidden}
.kk-produkt__media .woocommerce-product-gallery__wrapper{margin:0}
.kk-produkt__media .woocommerce-product-gallery__image{aspect-ratio:1;display:grid;place-items:center}
.kk-produkt__media .woocommerce-product-gallery__image img{max-height:100%;width:auto;object-fit:contain}
.kk-produkt__media .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;
  list-style:none;margin:.75rem 0 0;padding:0}
.kk-produkt__media .flex-control-thumbs li{min-width:0}
.kk-produkt__media .flex-control-thumbs img{aspect-ratio:1;object-fit:contain;border:1px solid var(--kk-linia);
  border-radius:var(--kk-r-s);padding:.4rem;background:var(--kk-biel);cursor:pointer;width:100%}
.kk-produkt__media .flex-control-thumbs img.flex-active{border-color:var(--kk-zloto)}

.kk-produkt__panowanie{display:flex;align-items:center;gap:.7rem;margin:0 0 .6rem}
.kk-produkt__panowanie .kk-kreska{flex:1;height:1px;background:var(--kk-linia)}
.kk-produkt__nazwa{font-size:clamp(1.875rem,1.4rem + 2vw,2.625rem);margin:0 0 1rem}
.kk-cena-blok{display:grid;gap:.35rem;justify-items:start;
  min-height:3.6rem} /* rezerwacja miejsca + osobne wiersze: zmiana ceny nie przesuwa sasiada (CLS = 0) */
.kk-cena-duza{font-family:var(--kk-tekst);font-size:2.125rem;font-weight:700;color:var(--kk-zielen);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.kk-cena-duza .woocommerce-Price-amount{font-size:inherit;font-weight:inherit;color:inherit}
.kk-cena-za{font-size:.875rem;color:var(--kk-szary);min-height:1.3em;line-height:1.3}
.kk-produkt__krotki{margin-block:1.25rem;color:var(--kk-szary)}
.kk-produkt__krotki ul{margin:0;padding-left:0;list-style:none;display:grid;gap:.5rem}
.kk-produkt__krotki li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem}
.kk-produkt__krotki li::before{content:"";width:6px;height:6px;background:var(--kk-zloto);transform:rotate(45deg);
  flex:none;margin-top:.5rem}
.kk-produkt__bialko{margin-block:1rem;font-size:.9375rem}
.kk-produkt__bialko strong{color:var(--kk-zielen)}
.kk-produkt__opis{margin-block:2.5rem;max-width:46rem}
.kk-zaufanie{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:1.5rem 0 0;padding:0;
  font-size:.8125rem;color:var(--kk-szary)}
.kk-zaufanie li{display:flex;gap:.45rem;align-items:center}
.kk-zaufanie li::before{content:"";width:5px;height:5px;background:var(--kk-zloto);transform:rotate(45deg);flex:none}

/* ── selektor gramatury (T-13) ───────────────────────────────────────── */
.kk-selektor{border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);padding:1.25rem;background:var(--kk-biel);
  margin-block:1.5rem}
.kk-selektor__gora{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.kk-selektor__gora .kk-etykieta{color:var(--kk-zielen)}
.kk-selektor__wybrane{font-size:.8125rem;color:var(--kk-szary);min-height:1.2em;
  flex:1;text-align:right} /* wypelnia reszte wiersza — zmiana tekstu nie przesuwa pudelka (CLS = 0) */
.kk-gramatury{display:flex;flex-wrap:wrap;gap:.6rem}
.kk-gramatura{position:relative;display:flex;flex-direction:column;gap:.15rem;min-width:6.5rem;
  padding:.7rem 1rem;border-radius:var(--kk-r-m);border:1.5px solid var(--kk-linia);background:var(--kk-pergamin);
  cursor:pointer;font-family:var(--kk-tekst);text-align:left;transition:border-color var(--kk-przej),background var(--kk-przej)}
.kk-gramatura:hover:not([disabled]){border-color:var(--kk-zielen-j)}
.kk-gramatura__waga{font-size:.9375rem;font-weight:700;color:var(--kk-atrament);letter-spacing:.01em}
.kk-gramatura__kwota{font-size:.8125rem;font-weight:600;color:var(--kk-szary);
  font-variant-numeric:tabular-nums lining-nums}
.kk-gramatura__kwota .woocommerce-Price-amount{font-size:inherit;color:inherit}
.kk-gramatura[aria-pressed="true"]{border-color:var(--kk-zielen);background:var(--kk-zielen);box-shadow:var(--kk-cien)}
.kk-gramatura[aria-pressed="true"] .kk-gramatura__waga{color:var(--kk-pergamin)}
.kk-gramatura[aria-pressed="true"] .kk-gramatura__kwota{color:var(--kk-zloto)}
.kk-gramatura[disabled]{cursor:not-allowed;border-style:dashed;border-color:var(--kk-kraft);background:transparent}
.kk-gramatura[disabled] .kk-gramatura__waga,.kk-gramatura[disabled] .kk-gramatura__kwota{color:var(--kk-szary)}
.kk-gramatura__brak{position:absolute;top:-8px;right:8px;font-size:.625rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--kk-pergamin);color:var(--kk-burgund);padding:0 .35rem;
  border:1px solid var(--kk-burgund);border-radius:var(--kk-r-s)}
.kk-gramatura--probka{border-style:dashed;border-color:rgba(201,162,39,.85);background:rgba(201,162,39,.08)}
.kk-gramatura--probka .kk-gramatura__waga{color:var(--kk-zloto-c)}
.kk-probka-nota{margin:.9rem 0 0;font-size:.8125rem;color:var(--kk-szary)}

.kk-do-koszyka{display:flex;gap:.75rem;margin-top:1.1rem;align-items:stretch;flex-wrap:wrap}
.kk-ilosc{display:flex;align-items:center;border:1.5px solid var(--kk-linia);border-radius:var(--kk-r-p);
  overflow:hidden;background:var(--kk-pergamin);flex:none}
.kk-ilosc__btn{width:42px;min-height:48px;border:0;background:transparent;font-size:1.15rem;color:var(--kk-zielen);
  cursor:pointer;font-family:var(--kk-tekst);line-height:1}
.kk-ilosc__btn:hover{background:var(--kk-kraft-j)}
body.kk .kk-ilosc .quantity{margin:0}
body.kk .kk-ilosc input.qty{width:3rem;border:0;background:transparent;text-align:center;font-weight:700;
  font-family:var(--kk-tekst);font-size:.9375rem;font-variant-numeric:tabular-nums lining-nums;
  -moz-appearance:textfield;padding:0;min-height:48px}
body.kk .kk-ilosc input.qty::-webkit-outer-spin-button,
body.kk .kk-ilosc input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kk-do-koszyka .kk-przycisk{flex:1;min-width:12rem}
.kk-komunikat{margin:.75rem 0 0;font-size:.875rem;color:var(--kk-burgund);font-weight:600}
.kk-form [hidden],[class^="kk-"][hidden]{display:none!important}

/* ── koszyk i kasa ───────────────────────────────────────────────────── */
body.kk .woocommerce-cart-form,body.kk .cart-collaterals,body.kk .woocommerce-checkout{font-size:.9375rem}
body.kk table.shop_table{width:100%;border-collapse:collapse;background:transparent;border:0}
body.kk table.shop_table th{text-align:left;font-family:var(--kk-tekst);font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--kk-zielen);padding:.75rem .5rem;border-bottom:1px solid var(--kk-linia);font-weight:600}
body.kk table.shop_table td{padding:1rem .5rem;border-bottom:1px solid var(--kk-linia);vertical-align:middle}
body.kk table.shop_table img{width:72px;height:auto;border:1px solid var(--kk-linia);border-radius:var(--kk-r-s);
  background:var(--kk-biel);padding:.35rem}
body.kk .cart_totals,body.kk .woocommerce-checkout-review-order{background:var(--kk-biel);
  border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);padding:1.5rem}
body.kk .woocommerce-Price-amount{font-variant-numeric:tabular-nums lining-nums;font-weight:600;color:var(--kk-zielen)}
body.kk .woocommerce-message,body.kk .woocommerce-info,body.kk .woocommerce-error{
  background:var(--kk-pergamin-c);border-left:3px solid var(--kk-zloto);border-radius:0 var(--kk-r-s) var(--kk-r-s) 0;
  padding:1rem 1.25rem;margin-block:1.5rem;list-style:none}
body.kk .woocommerce-error{border-left-color:var(--kk-burgund)}
body.kk .woocommerce form .form-row input.input-text,
body.kk .woocommerce form .form-row textarea,
body.kk .woocommerce form .form-row select,
body.kk input[type=text],body.kk input[type=email],body.kk input[type=tel],
body.kk input[type=search],body.kk input[type=password],body.kk textarea,body.kk select{
  width:100%;padding:.7rem .9rem;border:1.5px solid var(--kk-linia);border-radius:var(--kk-r-m);
  background:var(--kk-biel);font-family:var(--kk-tekst);font-size:.9375rem;color:var(--kk-atrament)}
body.kk input:focus,body.kk textarea:focus,body.kk select:focus{border-color:var(--kk-zielen-j);outline:none;
  box-shadow:0 0 0 3px rgba(30,82,64,.12)}

/* ── wyszukiwarka, 404, wpisy ────────────────────────────────────────── */
.kk-szukaj{display:flex;gap:.5rem;margin-block:1.5rem;flex-wrap:wrap}
.kk-szukaj input[type=search]{flex:1;min-width:12rem}
.kk-szukaj button{white-space:nowrap}
.kk-404{padding-block:1rem 5rem;text-align:center}
.kk-404 .kk-etykieta{display:block;margin-bottom:.75rem}
.kk-404__akcje{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-block:2rem}
.kk-404__szukaj{max-width:30rem;margin-inline:auto}
.kk-wpisy{display:grid;gap:2rem;padding-bottom:3rem}
.kk-wpis h2{font-size:1.5rem;margin-bottom:.35rem}
.kk-tresc-wpisu>*+*{margin-top:1.1em}
.kk-tresc-wpisu img{border-radius:var(--kk-r-m)}

/* ── stopka ──────────────────────────────────────────────────────────── */
.kk-stopka{background:var(--kk-atrament);color:rgba(247,242,232,.72);padding-block:3.5rem 2rem;font-size:.875rem}
.kk-stopka__siatka{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:820px){.kk-stopka__siatka{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.kk-stopka__siatka{grid-template-columns:1fr}}
.kk-stopka h2{color:var(--kk-zloto);font-family:var(--kk-tekst);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.9rem;font-weight:600}
.kk-stopka__lista,.kk-stopka ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
body.kk .kk-stopka a{color:rgba(247,242,232,.72);text-decoration:none}
body.kk .kk-stopka a:hover{color:var(--kk-zloto)}
.kk-stopka__marka p{max-width:24rem;margin-top:1rem}
.kk-stopka .kk-cypher__nazwa{font-size:1.25rem}
.kk-stopka__dol{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(247,242,232,.14);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8125rem;color:rgba(247,242,232,.5)}

/* ── sprzątanie po WooCommerce ───────────────────────────────────────── */
body.kk .woocommerce-breadcrumb,body.kk .woocommerce-products-header{display:none}
body.kk .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:0}
body.kk .added_to_cart{display:none}

/* Gdyby woocommerce-layout.css jednak się wczytał (inna wtyczka, cache) — układ i tak nasz. */
body.kk .woocommerce ul.products li.product,
body.kk ul.products li.product{width:auto;float:none;margin:0}
body.kk .woocommerce div.product div.images,
body.kk .woocommerce div.product div.summary{width:auto;float:none;margin:0}
body.kk .woocommerce div.product div.images img{width:auto;max-width:100%}
body.kk section.related,body.kk section.up-sells{margin-top:var(--wp--preset--spacing--80,4rem);clear:both}
body.kk section.related>h2,body.kk section.up-sells>h2{font-size:1.75rem;margin-bottom:1.5rem}

/* ── strona główna ───────────────────────────────────────────────────── */
.kk-hero{background:var(--kk-pergamin);overflow:hidden}
.kk-hero__siatka{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem)}
.kk-hero__siatka>*{min-width:0}
@media (max-width:900px){.kk-hero__siatka{grid-template-columns:1fr;gap:2.5rem}}
.kk-hero__tekst .kk-etykieta{display:block;margin-bottom:1.1rem}
body.kk .kk-hero h1{font-size:clamp(2.375rem,1.6rem + 3.4vw,3.75rem);margin:0}
.kk-hero__lead{font-size:1.1875rem;color:var(--kk-szary);margin-top:1.5rem;max-width:34rem}
.kk-hero__akcje{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.kk-fakty{display:flex;flex-wrap:wrap;gap:2rem;margin:3rem 0 0;padding-top:1.75rem;border-top:1px solid var(--kk-linia)}
.kk-fakty div{min-width:0}
.kk-fakty dt{font-family:var(--kk-tekst);font-size:1.75rem;font-weight:700;color:var(--kk-zielen);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.kk-fakty dd{margin:.35rem 0 0;font-size:.8125rem;color:var(--kk-szary)}
.kk-plyta{display:block;position:relative;background:linear-gradient(160deg,#1E5240,#14372B 60%,#0E261D);
  border-radius:var(--kk-r-l);padding:clamp(1.5rem,4vw,3rem);box-shadow:var(--kk-cien-u);overflow:hidden;
  text-decoration:none}
.kk-plyta::after{content:"";position:absolute;inset:10px;border:1px solid rgba(201,162,39,.3);
  border-radius:calc(var(--kk-r-l) - 4px);pointer-events:none}
.kk-plyta img{margin-inline:auto;max-height:380px;width:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.4))}
.kk-plyta__podpis{display:block;text-align:center;margin-top:1.25rem;font-family:var(--kk-naglowki);
  font-size:1.25rem;color:var(--kk-pergamin);position:relative;z-index:1}

.kk-sekcja{padding-block:clamp(3rem,6vw,5rem)}
.kk-sekcja--ciemna{background:var(--kk-zielen);color:var(--kk-pergamin)}
body.kk .kk-sekcja--ciemna h2{color:var(--kk-pergamin)}
.kk-sekcja--kraft{background:var(--kk-pergamin-c)}
.kk-naglowek-sekcji{text-align:center;max-width:42rem;margin:0 auto 3rem}
.kk-naglowek-sekcji p{color:var(--kk-szary);margin:.9rem 0 0}
.kk-sekcja--ciemna .kk-naglowek-sekcji p{color:rgba(247,242,232,.72)}
.kk-romb{display:flex;align-items:center;gap:.9rem;color:var(--kk-zloto);margin-bottom:1.1rem}
.kk-romb::before,.kk-romb::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.55) 22%,rgba(201,162,39,.55) 78%,transparent)}
.kk-romb i{width:7px;height:7px;background:var(--kk-zloto);transform:rotate(45deg);flex:none}
.kk-sekcja__wiecej{text-align:center;margin:2.5rem 0 0}
.kk-zaufanie-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.kk-zaufanie-siatka>div{min-width:0;display:flex;flex-direction:column;gap:.4rem}
.kk-zaufanie-siatka .kk-etykieta{color:var(--kk-zloto)}
.kk-zaufanie-siatka p{font-size:.9375rem;color:rgba(247,242,232,.75);margin:0}
.kk-zamkniecie{text-align:center}
.kk-zamkniecie p{color:var(--kk-szary);margin-top:1rem}
.kk-zamkniecie p:last-child{margin-top:2rem}

/* ── skala nagłówków ─────────────────────────────────────────────────────
   Rozmiary wpisane jawnie, a nie przez elements.h* z theme.json: w motywie
   klasycznym te reguły nie trafiają na front, a przy okazji WordPress odrzuca
   presety, których slug zaczyna się od cyfry (zmierzone: --wp--preset--font-size--2xl
   było puste, stąd h2 renderowało się w 17 px). Wartości poniżej są tą samą skalą,
   którą theme.json daje edytorowi. */
body.kk :where(h1){font-size:var(--wp--preset--font-size--xxxl, clamp(2.375rem, 1.6rem + 3.4vw, 3.75rem))}
body.kk :where(h2){font-size:var(--wp--preset--font-size--xxl, clamp(1.875rem, 1.4rem + 2vw, 2.625rem))}
body.kk :where(h3){font-size:var(--wp--preset--font-size--xl, clamp(1.4375rem, 1.2rem + .9vw, 1.875rem))}
body.kk :where(h4){font-size:var(--wp--preset--font-size--l, 1.25rem)}
body.kk .kk-karta__nazwa{font-size:1.0625rem}
body.kk .kk-produkt__nazwa{font-size:clamp(1.875rem, 1.4rem + 2vw, 2.625rem)}
body.kk .kk-tytul-strony{font-size:clamp(2rem, 1.5rem + 2.4vw, 3rem)}
body.kk .kk-hero h1{font-size:clamp(2.375rem, 1.6rem + 3.4vw, 3.75rem)}
body.kk .kk-wpis h2{font-size:1.5rem}
body.kk section.related>h2,body.kk section.up-sells>h2{font-size:1.75rem}
body.kk .kk-stopka h2{font-size:.75rem}

/* Kolumna cen w koszyku blokowym dotykala krawedzi karty — daj jej oddech. */
body.kk .wc-block-components-totals-item__value,
body.kk .wc-block-cart-item__total{padding-right:.15rem}

/* ── dwie pułapki zmierzone w T-17 ────────────────────────────────────────

   1. `ul.products` dostaje z WooCommerce clearfix `::before`/`::after`. W układzie
      float to tylko czyszczenie, ale w CSS grid pseudoelement STAJE SIĘ komórką
      siatki i zjada pierwsze miejsce — stąd „Zobacz też" zaczynało się od drugiej
      kolumny, a czwarty produkt spadał do nowego rzędu.

   2. Miniatury galerii przegrywały specyficzność z regułą WooCommerce
      `.woocommerce div.product div.images .flex-control-thumbs li img` (0-3-4).
      Kopiujemy jej pełny selektor zamiast zgadywać. */

body.kk ul.products::before,
body.kk ul.products::after,
body.kk .kk-krata--produkty::before,
body.kk .kk-krata--produkty::after{content:none;display:none}

body.kk .woocommerce div.product div.images .flex-control-thumbs li img,
body.kk .kk-produkt__media .flex-control-thumbs li img,
body.kk .flex-control-thumbs li img{
  width:100%;height:auto;aspect-ratio:1;object-fit:contain;max-width:100%;
  border:1px solid var(--kk-linia);border-radius:var(--kk-r-s);padding:.4rem;
  background:var(--kk-biel);cursor:pointer;opacity:1}
body.kk .flex-control-thumbs li img.flex-active,
body.kk .flex-control-thumbs li img:hover{border-color:var(--kk-zloto)}
body.kk .flex-control-thumbs li{list-style:none;margin:0}

/* Winna reguła znaleziona pętlą po document.styleSheets, nie na oko:
   `.woocommerce div.product div.images .flex-control-thumbs li { width:25% }`.
   W siatce CSS 25 % liczy się od ścieżki (121 px), więc miniatura miała 30 px.
   Kopiujemy pełny selektor WooCommerce i dokładamy body.kk. */
body.kk .woocommerce div.product div.images .flex-control-thumbs li,
body.kk div.product div.images .flex-control-thumbs li,
body.kk .flex-control-thumbs li{width:auto;max-width:none;float:none;margin:0}
body.kk .woocommerce div.product div.images img{width:auto;max-width:100%}
body.kk .woocommerce div.product div.images .woocommerce-product-gallery__image img{width:auto;max-height:100%}

/* ── slider kolekcji (strona główna) ──────────────────────────────────── */
/* Wysokość slajdu jest ustalona, a oba obrazy leżą w pudełku o znanej wysokości
   pozycjonowane bezwzględnie — dzięki temu doładowanie zdjęcia niczego nie przesuwa
   (CLS = 0, mierzone tak jak w T-17). */
.kk-otwarcie{background:var(--kk-zielen);color:var(--kk-pergamin);padding-block:clamp(1.5rem,3vw,2.25rem) 0}
.kk-otwarcie--sam-slider{padding-block:0}
.kk-otwarcie--sam-slider .kk-slider{margin-top:0}
.kk-otwarcie__naglowek{max-width:52rem}
.kk-otwarcie__naglowek h1{color:var(--kk-pergamin);font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);margin:.3em 0 .25em}
.kk-otwarcie__lead{color:rgba(247,242,232,.8);font-size:1.0625rem;max-width:44rem;margin:0}
.kk-etykieta--jasna{color:var(--kk-zloto)}

.kk-slider{position:relative;margin-top:clamp(1.5rem,3vw,2.5rem)}
.kk-slider__tor{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.kk-slider__tor::-webkit-scrollbar{display:none}
.kk-slider__tor:focus-visible{outline:2px solid var(--kk-zloto);outline-offset:-4px}

.kk-slajd{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  min-height:clamp(27rem,38vw,32rem);display:grid;align-items:center;isolation:isolate;overflow:hidden}
.kk-slajd__tlo{position:absolute;inset:0;z-index:-1}
.kk-slajd__tlo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.kk-slajd__tlo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,55,43,.94) 0%,rgba(20,55,43,.86) 44%,rgba(20,55,43,.35) 100%)}
.kk-slajd__siatka{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  padding-block:clamp(2rem,4vw,3rem);width:100%}
.kk-slajd__tresc{max-width:34rem}
.kk-slajd__tytul{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);margin:.3em 0 .45em;line-height:1.1}
.kk-slajd__tytul a{color:var(--kk-pergamin);text-decoration:none}
.kk-slajd__tytul a:hover{color:var(--kk-zloto)}
.kk-slajd__opis{color:rgba(247,242,232,.86);font-size:1rem;margin:0 0 1rem;max-width:32rem}
.kk-slajd__meta{display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin:0 0 1.5rem;
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--kk-zloto)}
.kk-slajd__meta span{border:1px solid rgba(201,162,39,.45);border-radius:var(--kk-r-p);padding:.3rem .8rem}
.kk-slajd__akcje{display:flex;flex-wrap:wrap;gap:.75rem}
.kk-przycisk--jasny{color:var(--kk-pergamin);box-shadow:inset 0 0 0 1.5px rgba(247,242,232,.55)}
.kk-przycisk--jasny:hover{background:var(--kk-pergamin);color:var(--kk-zielen)}
.kk-slajd__produkt{display:none}

@media (min-width:60rem){
  .kk-slajd__siatka{grid-template-columns:minmax(0,1fr) 20rem}
  .kk-slajd__produkt{display:block;justify-self:end}
  .kk-slajd__produkt a{display:block;background:rgba(247,242,232,.06);border:1px solid rgba(201,162,39,.35);
    border-radius:var(--kk-r-l);padding:1.25rem;backdrop-filter:blur(2px)}
  .kk-slajd__produkt img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
}

.kk-slider__strzalka{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--kk-r-p);cursor:pointer;
  background:rgba(247,242,232,.14);color:var(--kk-pergamin);
  box-shadow:inset 0 0 0 1px rgba(247,242,232,.35);transition:background var(--kk-przej)}
.kk-slider__strzalka:hover:not(:disabled){background:var(--kk-zloto);color:var(--kk-zielen)}
.kk-slider__strzalka:disabled{opacity:.3;cursor:default}
.kk-slider__strzalka--wstecz{left:clamp(.5rem,2vw,1.25rem)}
.kk-slider__strzalka--dalej{right:clamp(.5rem,2vw,1.25rem)}
/* Na waskim ekranie strzalki lezalyby na tresci slajdu — tam przewija sie palcem,
   a do skakania po slajdach sluza kropki pod sliderem. */
@media (max-width:48rem){
  .kk-slider__strzalka{display:none}
}

.kk-slider__kropki{display:flex;justify-content:center;gap:.5rem;padding-block:1.25rem;
  background:var(--kk-zielen)}
/* Kropki sa w HTML-u `hidden` i odslania je JS. Gdyby `hidden` zwijalo je do zera,
   odsloniecie przesuneloby wszystko ponizej — zmierzone: CLS 0,0013 zamiast 0.
   Dlatego miejsce jest zarezerwowane od pierwszego renderu, a chowa je `visibility`
   (to takze wyjmuje przyciski z kolejnosci tabulacji). */
.kk-slider__kropki[hidden]{display:flex;visibility:hidden}
.kk-slider__kropka{width:10px;height:10px;padding:0;border:0;border-radius:var(--kk-r-p);cursor:pointer;
  background:rgba(247,242,232,.3);transition:background var(--kk-przej),width var(--kk-przej)}
.kk-slider__kropka[aria-selected=true]{background:var(--kk-zloto);width:26px}

/* Pasek faktow przeniesiony w faze 2 na ciemne tlo sekcji otwierajacej.
   Reguly bazowe daja `dt` kolor zieleni krolewskiej — na tym tle liczby znikaly
   (zmierzone na zrzucie: ciemna zielen na ciemnej zieleni). Tu maja wlasny kolor. */
.kk-fakty--otwarcie{background:var(--kk-zielen);margin:0;padding-block:0 clamp(2rem,4vw,3rem);
  border-top-color:rgba(201,162,39,.3)}
.kk-fakty--otwarcie dt{color:var(--kk-zloto)}
.kk-fakty--otwarcie dd{color:rgba(247,242,232,.78)}

/* ── archiwum kolekcji ────────────────────────────────────────────────── */
.kk-kolekcje-pozostale{margin-block:clamp(2.5rem,5vw,4rem)}
.kk-kolekcje-pozostale h2{font-size:1.125rem;padding-bottom:.6rem;border-bottom:1px solid var(--kk-linia)}
.kk-kolekcje-pozostale ul{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.kk-kolekcje-pozostale a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.55rem 1.1rem;border-radius:var(--kk-r-p);background:var(--kk-biel);
  border:1px solid var(--kk-linia);color:var(--kk-zielen);font-size:.9375rem}
.kk-kolekcje-pozostale a:hover{background:var(--kk-zielen);color:var(--kk-pergamin);border-color:var(--kk-zielen)}
.kk-kolekcje-pozostale a span{font-size:.75rem;color:var(--kk-szary);font-variant-numeric:tabular-nums}
.kk-kolekcje-pozostale a:hover span{color:var(--kk-zloto)}

/* ── sekcja otwierająca kategorii ─────────────────────────────────────── */
/* Zdjęcie jest PANELEM, nie tłem. Pierwsza wersja kładła je pod tekstem z gradientem
   i przy tych kadrach (martwa natura przy świecy, ciemny łupek) z pasma zostawała
   ciemna plama — zdjęcie formalnie było, a nie było go widać. Panel z ustaloną
   proporcją nic nie przesuwa po doładowaniu, więc CLS zostaje zerowy. */
.kk-hero-kat{background:var(--kk-zielen);color:var(--kk-pergamin);
  padding-block:clamp(1.25rem,3vw,2.25rem) clamp(1.5rem,3.5vw,2.75rem)}
.kk-hero-kat__siatka{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
.kk-hero-kat__tresc>*{max-width:42rem}
.kk-hero-kat__tresc .kk-tytul-strony{color:var(--kk-pergamin);margin:.2em 0 .25em}
/* `body.kk .kk-okruszek a` ma swoistosc 0-2-2 i bilo te regule (0-2-1) — linki
   okruszka zostawaly szare (#57503F) na ciemnej zieleni, kontrast 1,6:1.
   Prefiks `body.kk` wyrownuje rachunek do 0-3-2. */
body.kk .kk-hero-kat__tresc .kk-okruszek,
body.kk .kk-hero-kat__tresc .kk-okruszek a{color:rgba(247,242,232,.82)}
body.kk .kk-hero-kat__tresc .kk-okruszek li+li::before{color:rgba(201,162,39,.7)}
.kk-hero-kat__tresc .kk-okruszek{padding-block:0 .75rem}
body.kk .kk-hero-kat__tresc .kk-okruszek a:hover{color:var(--kk-zloto)}
.kk-hero-kat__opis{color:rgba(247,242,232,.85);font-size:.9375rem}
.kk-hero-kat__obraz{border-radius:var(--kk-r-l);overflow:hidden;border:1px solid rgba(201,162,39,.35);
  background:rgba(247,242,232,.05);line-height:0}
.kk-hero-kat__obraz img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;
  object-position:center 62%}
@media (min-width:60rem){
  .kk-hero-kat__siatka{grid-template-columns:minmax(0,1fr) 24rem}
}

/* ── strony tematyczne (poczet władców, proces, dobór karmy) ──────────── */
.kk-otwarcie--strona{padding-block:clamp(1.25rem,3vw,2.25rem) clamp(1.75rem,4vw,3rem)}
body.kk .kk-otwarcie--strona .kk-okruszek,
body.kk .kk-otwarcie--strona .kk-okruszek a{color:rgba(247,242,232,.82)}
body.kk .kk-otwarcie--strona .kk-okruszek li+li::before{color:rgba(201,162,39,.7)}
.kk-otwarcie--strona .kk-okruszek{padding-block:0 .75rem}
body.kk .kk-otwarcie--strona .kk-okruszek a:hover{color:var(--kk-zloto)}

/* poczet władców */
.kk-poczet{list-style:none;margin:clamp(2rem,4vw,3rem) 0;padding:0;display:grid;gap:1.25rem}
.kk-wladca{background:var(--kk-biel);border:1px solid var(--kk-linia);border-radius:var(--kk-r-l);
  padding:clamp(1.1rem,2.5vw,1.75rem);display:grid;gap:1rem}
.kk-wladca__glowa h2{font-size:1.375rem;margin:0}
.kk-wladca__lata{margin:.2rem 0 0;font-size:.8125rem;letter-spacing:.06em;color:var(--kk-zloto-c)}
.kk-wladca__bialka{margin:.4rem 0 0;font-size:.875rem;color:var(--kk-szary)}
.kk-wladca__nota{margin:.85rem 0 0;font-size:.9375rem;color:var(--kk-atrament);line-height:1.55;
  padding-top:.85rem;border-top:1px solid var(--kk-linia)}
.kk-wladca__receptury{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.kk-wladca__receptury a{display:grid;gap:.4rem;align-content:start;text-decoration:none;
  color:var(--kk-atrament);font-size:.8125rem;line-height:1.4;height:100%}
.kk-wladca__receptury img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:var(--kk-pergamin);border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);padding:.4rem}
.kk-wladca__nazwa{font-family:var(--kk-naglowki);font-size:.9375rem;color:var(--kk-zielen);line-height:1.25}
.kk-wladca__bialko{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--kk-zloto-c);
  justify-self:start;border:1px solid var(--kk-linia);border-radius:var(--kk-r-p);padding:.15rem .6rem}
.kk-wladca__opis{color:var(--kk-szary);font-size:.8125rem}
.kk-wladca__receptury a:hover .kk-wladca__nazwa{color:var(--kk-burgund)}
@media (min-width:52rem){ .kk-wladca{grid-template-columns:14rem minmax(0,1fr);gap:1.75rem;align-items:start} }

/* drogi produkcji */
.kk-drogi{display:grid;gap:1.25rem;margin-block:clamp(2rem,4vw,3rem)}
.kk-droga{background:var(--kk-biel);border:1px solid var(--kk-linia);border-radius:var(--kk-r-l);
  padding:clamp(1.1rem,2.5vw,1.75rem)}
.kk-droga__glowa{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.75rem}
.kk-droga__nr{flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--kk-r-p);
  background:var(--kk-zielen);color:var(--kk-zloto);font-family:var(--kk-naglowki);font-size:1.25rem}
.kk-droga__glowa h2{font-size:1.25rem;margin:0}
.kk-droga__pod{margin:.15rem 0 0;font-size:.875rem;color:var(--kk-szary)}
.kk-droga__ile{margin:.3rem 0 0;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--kk-zloto-c)}
.kk-droga__tekst p{margin:0 0 .75rem;font-size:.9375rem}
.kk-droga__produkty{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.kk-droga__produkty a{display:inline-block;padding:.4rem .9rem;border-radius:var(--kk-r-p);
  background:var(--kk-pergamin-c);color:var(--kk-zielen);text-decoration:none;font-size:.8125rem}
.kk-droga__produkty a:hover{background:var(--kk-zielen);color:var(--kk-pergamin)}

.kk-bialka{margin-block:clamp(2rem,4vw,3rem)}
.kk-bialka__lista{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.kk-bialka__lista li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  background:var(--kk-biel);border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);padding:.7rem 1rem;font-size:.9375rem}
.kk-bialka__lista b{color:var(--kk-zloto-c);font-variant-numeric:tabular-nums}

/* dobór karmy */
.kk-krok{margin-block:clamp(2rem,4vw,3.25rem)}
.kk-kolekcje-karty{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.kk-kolekcje-karty a{display:grid;gap:.4rem;height:100%;text-decoration:none;background:var(--kk-biel);
  border:1px solid var(--kk-linia);border-radius:var(--kk-r-l);padding:1.25rem;color:var(--kk-atrament);
  transition:border-color var(--kk-przej),transform var(--kk-przej)}
.kk-kolekcje-karty a:hover{border-color:var(--kk-zloto);transform:translateY(-2px)}
.kk-kolekcje-karty h3{font-size:1.125rem;margin:0}
.kk-kolekcje-karty p{margin:0;font-size:.875rem;color:var(--kk-szary)}
.kk-kolekcje-karty__ile{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--kk-zloto-c);align-self:end}

.kk-dawki{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;background:var(--kk-biel);
  border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);overflow:hidden}
.kk-dawki caption{caption-side:top;text-align:left;font-family:var(--kk-naglowki);font-size:1.0625rem;
  color:var(--kk-zielen);padding-bottom:.6rem}
.kk-dawki th,.kk-dawki td{padding:.75rem 1rem;border-bottom:1px solid var(--kk-linia);text-align:left;font-size:.9375rem}
.kk-dawki thead th{font-family:var(--kk-tekst);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kk-zielen);font-weight:600}
.kk-dawki tbody th{font-weight:600;color:var(--kk-zielen)}
.kk-dawki td{font-variant-numeric:tabular-nums}
.kk-dawki tbody tr:last-child th,.kk-dawki tbody tr:last-child td{border-bottom:0}

.kk-reguly{background:var(--kk-pergamin-c);border-radius:var(--kk-r-m);padding:1.25rem 1.5rem}
.kk-reguly h3{font-size:1rem;margin:0 0 .75rem}
.kk-reguly ul{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:.9375rem}
.kk-reguly span{color:var(--kk-szary);font-size:.8125rem}
.kk-reguly p{margin:0 0 .85rem;font-size:.9375rem;color:var(--kk-szary)}
/* Regula to jedna liczba, nie akapit — stad kafelki zamiast punktorow. */
.kk-reguly__lista{list-style:none;padding:0;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.kk-reguly__lista li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .5rem;
  background:var(--kk-pergamin);border-radius:var(--kk-r-s);padding:.7rem .9rem}
.kk-reguly__lista b{font-family:var(--kk-font-naglowki);font-size:1.4rem;color:var(--kk-zielen);line-height:1}
.kk-reguly__lista span{flex:1 1 6rem}
.kk-reguly__lista i{flex:0 0 100%;font-style:normal;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kk-zloto-c)}
.kk-reguly__przyklad{margin:.85rem 0 0!important;font-style:italic}
.kk-krok--zamkniecie{text-align:center;background:var(--kk-biel);border:1px solid var(--kk-linia);
  border-radius:var(--kk-r-l);padding:clamp(1.75rem,4vw,2.75rem)}

/* pasek pocztu władców na stronie głównej */
.kk-poczet-pasek{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.kk-poczet-pasek a{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;
  padding:.5rem 1rem;border-radius:var(--kk-r-p);border:1px solid rgba(201,162,39,.35);
  color:var(--kk-pergamin);font-size:.9375rem;transition:background var(--kk-przej)}
.kk-poczet-pasek a:hover{background:var(--kk-zloto);color:var(--kk-zielen);border-color:var(--kk-zloto)}
.kk-poczet-pasek b{font-weight:600}
.kk-poczet-pasek span{font-size:.75rem;color:var(--kk-zloto);letter-spacing:.04em}
.kk-poczet-pasek a:hover span{color:var(--kk-zielen)}
.kk-sekcja--ciemna .kk-sekcja__wiecej{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}

/* ── quiz doboru karmy ────────────────────────────────────────────────── */
/* Bez JS widać wszystkie kroki naraz jako zwykły formularz — dopiero skrypt
   dokłada klasę .kk-quiz--aktywny, chowanie kroków i pasek postępu. */
.kk-quiz{background:var(--kk-biel);border:1px solid var(--kk-linia);border-radius:var(--kk-r-l);
  padding:clamp(1.25rem,3vw,2.25rem);margin-block:clamp(1.5rem,3vw,2.5rem)}
.kk-quiz__postep{margin:0 0 1rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kk-zloto-c);font-weight:600}
.kk-quiz__krok{border:0;margin:0;padding:0;min-width:0}
.kk-quiz__krok+.kk-quiz__krok{margin-top:2rem}
.kk-quiz--aktywny .kk-quiz__krok+.kk-quiz__krok{margin-top:0}
.kk-quiz__krok legend{font-family:var(--kk-naglowki);font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  color:var(--kk-zielen);line-height:1.2;padding:0;margin-bottom:1.25rem}
.kk-quiz__opcje{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.kk-quiz__opcje label{position:relative;display:block;cursor:pointer}
.kk-quiz__opcje input{position:absolute;opacity:0;width:1px;height:1px}
.kk-quiz__opcje span{display:grid;gap:.15rem;height:100%;padding:.9rem 1.1rem;border-radius:var(--kk-r-m);
  border:1.5px solid var(--kk-linia);background:var(--kk-pergamin);
  transition:border-color var(--kk-przej),background var(--kk-przej)}
.kk-quiz__opcje b{font-weight:600;color:var(--kk-zielen);font-size:.9375rem}
.kk-quiz__opcje small{color:var(--kk-szary);font-size:.8125rem}
.kk-quiz__opcje label:hover span{border-color:var(--kk-kraft)}
.kk-quiz__opcje input:focus-visible+span{outline:2px solid var(--kk-zloto-c);outline-offset:2px}
.kk-quiz__opcje input:checked+span{border-color:var(--kk-zielen);background:var(--kk-zielen);}
.kk-quiz__opcje input:checked+span b{color:var(--kk-pergamin)}
.kk-quiz__opcje input:checked+span small{color:rgba(247,242,232,.8)}

.kk-quiz__nawigacja{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.kk-quiz__wynik .kk-quiz__nawigacja{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--kk-linia)}
.kk-quiz__nawigacja button:disabled{opacity:.45;cursor:not-allowed}

.kk-quiz__wynik{margin-top:.5rem}
.kk-quiz__wynik:focus{outline:none}
.kk-quiz__naglowek{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);margin:0 0 .75rem}
.kk-quiz__kolekcja{margin:0 0 1.25rem;font-size:.9375rem;color:var(--kk-szary)}
.kk-quiz__kolekcja a{color:var(--kk-zielen);text-decoration:none;border-bottom:1px solid var(--kk-zloto)}
.kk-quiz__kolekcja a:hover{color:var(--kk-burgund)}
.kk-quiz__dawka{display:grid;gap:.15rem;margin:0 0 1.5rem;padding:1rem 1.25rem;border-radius:var(--kk-r-m);
  background:var(--kk-pergamin-c)}
.kk-quiz__dawka span{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--kk-zloto-c)}
.kk-quiz__dawka b{font-size:1.5rem;color:var(--kk-zielen);font-variant-numeric:tabular-nums lining-nums}
.kk-quiz__dawka small{color:var(--kk-szary);font-size:.8125rem}
.kk-quiz__produkty{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.kk-quiz__produkty a{display:grid;gap:.35rem;align-content:start;height:100%;text-decoration:none;
  padding:1rem;border:1px solid var(--kk-linia);border-radius:var(--kk-r-m);background:var(--kk-pergamin);
  transition:border-color var(--kk-przej),transform var(--kk-przej)}
.kk-quiz__produkty a:hover{border-color:var(--kk-zloto);transform:translateY(-2px)}
.kk-quiz__produkty img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:var(--kk-biel);border-radius:var(--kk-r-s)}
.kk-quiz__nazwa{font-family:var(--kk-naglowki);font-size:1rem;color:var(--kk-zielen);line-height:1.25}
.kk-quiz__bialko{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--kk-zloto-c);
  justify-self:start;border:1px solid var(--kk-linia);border-radius:var(--kk-r-p);padding:.15rem .6rem}
.kk-quiz__cena{font-weight:600;color:var(--kk-zielen);font-variant-numeric:tabular-nums}
.kk-quiz__probka{font-size:.75rem;color:var(--kk-szary)}
.kk-quiz__cta{margin:1.5rem 0 0}
.kk-quiz__pusto{margin:0;padding:1rem 1.25rem;border-radius:var(--kk-r-m);background:var(--kk-pergamin-c);
  color:var(--kk-szary);font-size:.9375rem}
.kk-quiz__regula{margin:1.25rem 0 0;padding:.85rem 1.1rem;border-radius:var(--kk-r-m);
  background:var(--kk-pergamin-c);color:var(--kk-szary);font-size:.875rem}
.kk-quiz__regula b{color:var(--kk-zielen)}
.kk-quiz__dawka--bez-liczby b{font-size:1.0625rem;font-family:var(--kk-naglowki)}
.kk-reguly--szczenie p{margin:0 0 .85rem}
.kk-reguly--szczenie b{color:var(--kk-zielen)}

/* Wynik quizu dla szczeniaka: dawka nie jest jedna liczba, tylko krzywa
   przez kolejne miesiace — stad tabelka zamiast wielkiego napisu. */
.kk-quiz__dawka--tabela{display:block}
.kk-quiz__krzywa{width:100%;border-collapse:collapse;margin:.5rem 0 .6rem;
  font-variant-numeric:tabular-nums lining-nums}
.kk-quiz__krzywa th,.kk-quiz__krzywa td{padding:.4rem .1rem;border-bottom:1px solid var(--kk-linia);
  font-size:.9375rem;text-align:left}
.kk-quiz__krzywa th{font-weight:600;color:var(--kk-atrament);white-space:nowrap}
.kk-quiz__krzywa td{text-align:right;font-weight:700;color:var(--kk-zielen);white-space:nowrap}
.kk-quiz__krzywa tr:last-child th,.kk-quiz__krzywa tr:last-child td{border-bottom:0}
.kk-quiz__krzywa i{display:block;font-style:normal;font-weight:400;font-size:.75rem;
  letter-spacing:.04em;color:var(--kk-szary)}