/*
Theme Name: DetoksMed Sklep
Template: generatepress
Description: Skorka sklepu detoksmed.pl/sklep. Moduly kart silnika "aktow" (prefiks dmk-). Paleta i typografia wspolne z serwisem w korzeniu domeny, zeby to byla jedna marka, ale uklad kart wlasny.
Version: 1.0
Text Domain: detoksmed-sklep
*/

/* Zmienne MUSZA stac na :root. Przy poprzedniej domenie zdefiniowalem je
   na kontenerze skorki i wszystko ponizej dostawalo wartosci puste. */
:root {
  --dmk-atrament: #1C1917;
  --dmk-papier: #F4EFE7;
  --dmk-papier-ciemniej: #EAE3D7;
  --dmk-akcent: #8C2F2A;
  --dmk-akcent-tlo: #F7EDE9;
  --dmk-linia: #C9BFB0;
  --dmk-szary: #6B6256;
  --dmk-r: 2px;              /* katy niemal proste — inaczej niz zaokraglone karty imeda */
}

.dmk {
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.68;
  color: var(--dmk-atrament);
}

.dmk p { margin: 0 0 1.05em; }
.dmk b, .dmk strong { font-weight: 600; }

/* Naglowki: linia NAD naglowkiem, nie pod — wlasny znak tej strony. */
.dmk .dmk-h2 {
  font-size: 1.44em;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.7em;
  padding-top: 0.7em;
  border-top: 2px solid var(--dmk-atrament);
}
.dmk .dmk-h2:first-child { margin-top: 0.2em; }
.dmk h3 {
  font-size: 1.04em;
  font-weight: 600;
  margin: 0 0 0.35em;
  letter-spacing: 0.01em;
}

/* --- karta stanu: otwarcie karty, dwie kolumny --- */
.dmk-stan {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--dmk-linia);
  margin: 1.6em 0;
}
@media (min-width: 720px) {
  .dmk-stan { grid-template-columns: 1fr 1fr; }
  .dmk-stan__kol + .dmk-stan__kol { border-left: 1px solid var(--dmk-linia); border-top: 0; }
}
.dmk-stan__kol { padding: 20px 22px; }
.dmk-stan__kol + .dmk-stan__kol { border-top: 1px solid var(--dmk-linia); }
.dmk-stan__kol--akcent { background: var(--dmk-akcent-tlo); }
.dmk-stan__kol h3 {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dmk-szary);
  margin-bottom: 0.7em;
}
.dmk-stan__kol--akcent h3 { color: var(--dmk-akcent); }
.dmk-stan ul { margin: 0; padding: 0; list-style: none; }
.dmk-stan li {
  padding: 7px 0 7px 18px;
  position: relative;
  font-size: 0.95em;
  border-bottom: 1px dotted var(--dmk-linia);
}
.dmk-stan li:last-child { border-bottom: 0; }
.dmk-stan li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--dmk-linia);
}
.dmk-stan__kol--akcent li::before { content: "+"; color: var(--dmk-akcent); font-weight: 700; }

/* --- sklad jako lista --- */
.dmk-sklad { margin: 1.3em 0; padding: 0; list-style: none; }
.dmk-sklad li {
  padding: 11px 0 11px 0;
  border-bottom: 1px solid var(--dmk-papier-ciemniej);
  font-size: 0.97em;
}
.dmk-sklad li:last-child { border-bottom: 0; }
.dmk-ile {
  display: inline-block;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.82em;
  background: var(--dmk-papier);
  border: 1px solid var(--dmk-linia);
  padding: 1px 6px;
  margin-left: 6px;
  color: var(--dmk-szary);
}

/* --- sklad jako siatka kart --- */
.dmk-siatka {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--dmk-linia);
  border: 1px solid var(--dmk-linia);
  margin: 1.5em 0;
}
@media (min-width: 640px) { .dmk-siatka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .dmk-siatka { grid-template-columns: repeat(3, 1fr); } }
.dmk-skladnik { background: #fff; padding: 18px 20px; }
.dmk-skladnik p { margin: 0.45em 0 0; font-size: 0.9em; color: var(--dmk-szary); }

/* --- etapy i kroki: numer w kolumnie, bez kolek --- */
.dmk-etapy, .dmk-kroki { margin: 1.5em 0; padding: 0; list-style: none; counter-reset: none; }
.dmk-etapy li, .dmk-kroki li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--dmk-papier-ciemniej);
}
.dmk-etapy li:last-child, .dmk-kroki li:last-child { border-bottom: 1px solid var(--dmk-papier-ciemniej); }
.dmk-nr {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 1.5em;
  line-height: 1;
  color: var(--dmk-linia);
  font-weight: 700;
}
.dmk-etapy p, .dmk-kroki p { margin: 0.25em 0 0; font-size: 0.93em; color: var(--dmk-szary); }
.dmk-uwaga {
  border-left: 3px solid var(--dmk-akcent);
  background: var(--dmk-akcent-tlo);
  padding: 13px 16px;
  font-size: 0.94em;
  margin: 1.2em 0 1.6em;
}

/* --- zestawienie: co wnosi / czego nie zrobi --- */
.dmk-zestaw {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4em;
  margin: 1.5em 0;
}
@media (min-width: 720px) { .dmk-zestaw { grid-template-columns: 1fr 1fr; gap: 2.2em; } }
.dmk-zestaw__kol h3 {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dmk-szary);
  border-bottom: 2px solid var(--dmk-atrament);
  padding-bottom: 0.45em;
  margin-bottom: 0.8em;
}
.dmk-zestaw ul { margin: 0; padding: 0; list-style: none; }
.dmk-zestaw li {
  padding: 8px 0 8px 20px;
  position: relative;
  font-size: 0.95em;
}
.dmk-zestaw li::before { content: "·"; position: absolute; left: 4px; font-weight: 700; color: var(--dmk-akcent); }

/* --- pary pytanie / odpowiedz w tresci --- */
.dmk-pary { margin: 1.4em 0; }
.dmk-para { padding: 15px 0; border-top: 1px solid var(--dmk-papier-ciemniej); }
.dmk-para:last-child { border-bottom: 1px solid var(--dmk-papier-ciemniej); }
.dmk-para h3 { color: var(--dmk-akcent); }
.dmk-para p { margin: 0.3em 0 0; font-size: 0.95em; }

/* --- tabela danych: idzie na KONIEC karty, przy zamowieniu --- */
.dmk-dane {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.95em;
}
.dmk-dane th, .dmk-dane td {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--dmk-linia);
  vertical-align: top;
}
.dmk-dane th {
  width: 36%;
  background: var(--dmk-papier);
  font-weight: 600;
  color: var(--dmk-szary);
}

/* --- FAQ: rozwijane, bez ikon --- */
.dmk-faq { margin: 1.3em 0; border-top: 1px solid var(--dmk-atrament); }
.dmk-faq__poz { border-bottom: 1px solid var(--dmk-papier-ciemniej); }
.dmk-faq__poz summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  font-size: 0.98em;
  list-style: none;
}
.dmk-faq__poz summary::-webkit-details-marker { display: none; }
.dmk-faq__poz summary::after { content: "+"; float: right; color: var(--dmk-akcent); font-weight: 700; }
.dmk-faq__poz[open] summary::after { content: "–"; }
.dmk-faq__poz p { margin: 0 0 14px; font-size: 0.95em; color: var(--dmk-szary); }

/* --- archiwum serwisu: tego nie ma zaden inny nasz sklep --- */
.dmk-archiwum, .dmk-powiazane { margin: 1.2em 0 1.8em; padding: 0; list-style: none; }
.dmk-archiwum li, .dmk-powiazane li { border-top: 1px dotted var(--dmk-linia); }
.dmk-archiwum li:last-child { border-bottom: 1px dotted var(--dmk-linia); }
.dmk-archiwum a, .dmk-powiazane a {
  display: block;
  padding: 12px 0 12px 26px;
  position: relative;
  color: var(--dmk-akcent);
  text-decoration: none;
  font-size: 0.96em;
}
.dmk-archiwum a::before { content: "›"; position: absolute; left: 6px; font-size: 1.2em; line-height: 1; }
.dmk-archiwum a:hover { text-decoration: underline; }

/* Woo: karta produktu bez panelu bocznego i bez zaokragleń. */
.single-product .wp-block-button__link,
.single-product .button,
.woocommerce .button { border-radius: var(--dmk-r) !important; }

/* ====================================================================
   KARTA RECEPTUROWA — znak rozpoznawczy tej strony.
   Trzy odczyty liczone ze składu i dawkowania: udziały w porcji dobowej,
   pora przyjmowania (tarcza doby) i na ile starczy opakowanie.
   Blok, dla którego nie ma danych, po prostu się nie pojawia.
   ==================================================================== */
.dmk-rec {
  border: 1px solid var(--dmk-atrament);
  background: #fff;
  margin: 2em 0 2.4em;
}
.dmk-rec__tytul {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--dmk-atrament);
  color: var(--dmk-papier);
}
.dmk-rec__tytul span {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.dmk-rec__tytul b { font-size: 0.92em; font-weight: 600; }

.dmk-rec__siatka {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  /* Tlo rysuje linie miedzy blokami przez 1px odstepu. MUSI byc biale:
     przy nieparzystej liczbie blokow pusta komorka siatki pokazywala
     to tlo i swiecila szarym prostokatem na pol panelu. Linie robia
     teraz cienie bloku, ktore pustej komorki nie dotycza. */
  background: #fff;
}
.dmk-rec__blok { box-shadow: 0 0 0 1px var(--dmk-linia); }
@media (min-width: 760px) {
  .dmk-rec__siatka { grid-template-columns: 1fr 1fr; }
  .dmk-rec__blok--szeroki { grid-column: 1 / -1; }
}
.dmk-rec__blok { background: #fff; padding: 18px 20px 20px; }
.dmk-rec__blok h3 {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dmk-szary);
  margin: 0 0 14px;
}

/* udziały składników w porcji dobowej */
.dmk-rec__pas { display: block; width: 100%; height: 26px; }
.dmk-rec__lista { margin: 12px 0 0; padding: 0; list-style: none; }
.dmk-rec__lista li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85em;
  padding: 4px 0;
  border-bottom: 1px dotted var(--dmk-papier-ciemniej);
}
.dmk-rec__lista li:last-child { border-bottom: 0; }
.dmk-rec__lista b { font-weight: 500; flex: 1; }
.dmk-rec__kropka {
  width: 9px; height: 9px;
  flex: 0 0 9px;
  display: inline-block;
}
.dmk-rec__mg {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--dmk-szary);
  white-space: nowrap;
}
.dmk-rec__suma {
  margin: 10px 0 0;
  font-size: 0.8em;
  color: var(--dmk-szary);
  text-align: right;
}

/* tarcza doby i porcja dzienna */
.dmk-rec__tarcza { display: block; width: 128px; height: 128px; margin: 0 auto; }
.dmk-rec__ziarna { display: block; height: 28px; margin: 18px 0 0; }
.dmk-rec__podpis {
  margin: 12px 0 0;
  font-size: 0.85em;
  color: var(--dmk-szary);
  text-align: center;
}

/* pasek dni — ile wystarczy opakowanie */
.dmk-rec__dni {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.dmk-rec__dzien {
  width: 14px; height: 14px;
  background: var(--dmk-akcent-tlo);
  border: 1px solid var(--dmk-akcent);
}
.dmk-rec__wiecej {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.8em;
  color: var(--dmk-szary);
  margin-left: 4px;
}
.dmk-rec__blok--szeroki .dmk-rec__podpis { text-align: left; }

/* ====================================================================
   ANIMACJE KARTY RECEPTUROWEJ — czysty CSS, bez jednego skryptu.
   Skrypty w treści WordPress wycina, SMIL-a świadomie nie wpuszczamy.
   Opóźnienia idą zmienną --op wstawianą przy elemencie (sprawdzone:
   własności niestandardowe w atrybucie style przechodzą przez filtr).

   ⚠ KAŻDA ANIMACJA GRA RAZ I ZOSTAJE W STANIE KOŃCOWYM (forwards).
   Pierwsza wersja chodziła w pętli i co cykl wszystko znikało — karta
   produktu miała wtedy przez kilka sekund pustą ramkę zamiast rysunku.
   Wyjątek: wskazówka zegara, która z natury ma chodzić w kółko, i jej
   znaczniki — te niczego nie ukrywają.
   ==================================================================== */

/* --- kapsułka się rozkłada (raz, zostaje otwarta) --- */
.dmk-kaps { display: block; width: 100%; max-width: 250px; margin: 0 auto; }
.dmk-kaps__gora { animation: dmkGora 1.5s cubic-bezier(.6,0,.3,1) .25s both; }
.dmk-kaps__dol  { animation: dmkDol  1.5s cubic-bezier(.6,0,.3,1) .25s both; }
@keyframes dmkGora { from { transform: translateY(0); } to { transform: translateY(-30px); } }
@keyframes dmkDol  { from { transform: translateY(0); } to { transform: translateY(24px); } }
.dmk-wars {
  transform-box: fill-box; transform-origin: center;
  animation: dmkWarstwa .7s ease var(--op, 0s) both;
}
@keyframes dmkWarstwa { from { opacity: 0; transform: scaleX(.1); }
                        to   { opacity: 1; transform: scaleX(1); } }
.dmk-wyn { animation: dmkWyn .6s ease var(--op, 0s) both; }
@keyframes dmkWyn { from { opacity: 0; transform: translateX(-6px); }
                    to   { opacity: 1; transform: translateX(0); } }
.dmk-txt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9px; fill: #6B6256; }

/* --- roślina rysowana kreską (raz, zostaje narysowana) --- */
.dmk-rosl { display: block; width: 100%; max-width: 170px; margin: 0 auto; }
.dmk-lod, .dmk-lis {
  fill: none; stroke: var(--dmk-atrament); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 220; animation: dmkRys 1.6s ease .2s both;
}
.dmk-lis { stroke-dasharray: 110; animation-delay: .8s; }
@keyframes dmkRys { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.dmk-was {
  fill: none; stroke: var(--dmk-akcent); stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 80; animation: dmkWas 1.1s ease var(--op, 0s) both;
}
@keyframes dmkWas { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
.dmk-rosl .dmk-zia, .dmk-rosl .dmk-zia2 {
  fill: var(--dmk-papier); stroke: var(--dmk-atrament); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: dmkZiarno .6s ease var(--op, 0s) both;
}
.dmk-rosl .dmk-zia2 { fill: var(--dmk-akcent-tlo); }
@keyframes dmkZiarno { from { opacity: 0; transform: scale(.3); }
                       to   { opacity: 1; transform: scale(1); } }

/* --- zegar doby: TU pętla jest na miejscu, bo nic nie ukrywa --- */
.dmk-zegar { display: block; width: 128px; height: 128px; margin: 0 auto; }
.dmk-wskaz { transform-origin: 60px 60px; animation: dmkObrot 9s linear infinite; }
@keyframes dmkObrot { to { transform: rotate(360deg); } }
.dmk-znak {
  transform-box: fill-box; transform-origin: center;
  animation: dmkPuls 9s linear infinite; animation-delay: var(--op, 0s);
}
@keyframes dmkPuls { 0% { transform: scale(1); } 3% { transform: scale(2.1); }
                     9% { transform: scale(1); } 100% { transform: scale(1); } }

/* --- porcja dzienna (gdy brief nie podaje pory) --- */
.dmk-ziarna .dmk-zia {
  fill: var(--dmk-akcent); transform-box: fill-box; transform-origin: center;
  animation: dmkZiarno .6s ease var(--op, 0s) both;
}

/* --- pasek dni wchodzi polami, raz --- */
.dmk-rec__dzien { animation: dmkDzien .45s ease var(--op, 0s) both; }
@keyframes dmkDzien { from { opacity: 0; transform: scale(.4); }
                      to   { opacity: 1; transform: scale(1); } }

/* Kto ma wyłączone animacje w systemie, dostaje stan KOŃCOWY, nie pustkę. */
@media (prefers-reduced-motion: reduce) {
  .dmk-kaps__gora, .dmk-kaps__dol, .dmk-wars, .dmk-wyn, .dmk-lod, .dmk-lis, .dmk-was,
  .dmk-rosl .dmk-zia, .dmk-rosl .dmk-zia2, .dmk-wskaz, .dmk-znak, .dmk-ziarna .dmk-zia,
  .dmk-rec__dzien {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .dmk-kaps__gora { transform: translateY(-30px) !important; }
  .dmk-kaps__dol  { transform: translateY(24px) !important; }
}

/* ====================================================================
   RYSUNKI PRZY SEKCJACH — panel „karta recepturowa" zniknął.
   Kapsułka, roślina i waga stoją przy składzie, zegar przy stosowaniu.
   ==================================================================== */
.dmk-figury {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 1.8em 0 2.2em;
  padding: 22px 0;
  border-top: 1px solid var(--dmk-linia);
  border-bottom: 1px solid var(--dmk-linia);
  align-items: end;
}
@media (min-width: 720px) {
  .dmk-figury { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
}
.dmk-fig { margin: 0; text-align: center; }
.dmk-fig figcaption {
  margin-top: 12px;
  font-size: .8em;
  line-height: 1.45;
  color: var(--dmk-szary);
}
.dmk-fig--waska { max-width: 240px; margin: 0 auto; }

/* --- waga: ile suszu stoi za porcją ekstraktu --- */
.dmk-waga { display: block; width: 100%; max-width: 280px; margin: 0 auto; }
.dmk-waga__belka {
  transform-origin: 130px 46px;
  animation: dmkWaga 2.4s cubic-bezier(.33,1.4,.5,1) .3s both;
}
@keyframes dmkWaga { 0% { transform: rotate(-9deg); } 45% { transform: rotate(5deg); }
                     75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.dmk-kop {
  transform-box: fill-box; transform-origin: bottom;
  animation: dmkKop .7s ease .45s both;
}
@keyframes dmkKop { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
.dmk-txt2 { font-size: 12px; fill: var(--dmk-atrament); font-weight: 600;
            font-family: Literata, Georgia, serif; }
.dmk-txt3 { font-size: 8.5px; fill: var(--dmk-szary); letter-spacing: .12em;
            text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .dmk-waga__belka, .dmk-kop { animation: none !important; transform: none !important; }
}

/* ====================================================================
   OPINIE — CHMURKI Z TWARZAMI (wariant wybrany 25.10).
   Treść i oceny pisze Grok; skrypt rysuje twarze i składa układ.
   Celowo BEZ wielkiej średniej, słupków rozkładu ocen i plakietek
   „zweryfikowany zakup" — to ma imed i strony mają się różnić.
   ==================================================================== */
.dmk-chmurki {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin: 1.6em 0 1.8em;
}
@media (min-width: 780px) { .dmk-chmurki { grid-template-columns: repeat(3, 1fr); } }

.dmk-chm { animation: dmkChmurka .55s cubic-bezier(.34,1.45,.64,1) var(--op, 0s) both; }
@keyframes dmkChmurka { from { opacity: 0; transform: translateY(14px) scale(.96); }
                        to   { opacity: 1; transform: none; } }
.dmk-chm__dym {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--dmk-atrament);
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: 4px 5px 0 var(--dmk-papier-ciemniej);
}
.dmk-chm__dym::after {
  content: "";
  position: absolute;
  bottom: -13px; left: 34px;
  width: 18px; height: 18px;
  background: #fff;
  border-right: 1.5px solid var(--dmk-atrament);
  border-bottom: 1.5px solid var(--dmk-atrament);
  transform: rotate(45deg);
}
.dmk-chm__dym p { margin: 0 0 10px; font-size: .9em; }
.dmk-chm__stopka { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.dmk-chm__stopka b { display: block; font-size: .92em; }
.dmk-chm__stopka span { font-size: .76em; color: var(--dmk-szary); }

/* --- twarz: rysowana, nie zdjęciowa --- */
.dmk-twarz {
  width: 72px; height: 72px; flex: 0 0 72px;
  animation: dmkTwarz .5s cubic-bezier(.34,1.5,.64,1) var(--op, 0s) both;
}
@keyframes dmkTwarz { from { opacity: 0; transform: scale(.6) translateY(6px); }
                      to   { opacity: 1; transform: none; } }
.dmk-tlo { fill: var(--dmk-akcent-tlo); }
.dmk-obrecz { fill: none; stroke: var(--dmk-atrament); stroke-width: 2; }
.dmk-glowa, .dmk-szyja { fill: var(--dmk-papier); stroke: var(--dmk-atrament); stroke-width: 2; }
.dmk-wlosy path, .dmk-wlosy circle { fill: var(--dmk-atrament); }
.dmk-zarost { fill: var(--dmk-atrament); opacity: .82; }
.dmk-okulary circle { fill: none; stroke: var(--dmk-atrament); stroke-width: 2; }
.dmk-okulary line { stroke: var(--dmk-atrament); stroke-width: 2; }
.dmk-brwi { fill: none; stroke: var(--dmk-atrament); stroke-width: 2; stroke-linecap: round; }
.dmk-oczy ellipse {
  fill: var(--dmk-atrament); transform-box: fill-box; transform-origin: center;
  animation: dmkMrug 5.5s steps(1, end) infinite;
}
@keyframes dmkMrug { 0%,92% { transform: scaleY(1); } 94% { transform: scaleY(.12); }
                     96% { transform: scaleY(1); } }
/* Usta „mówią" skalowaniem, nie zmianą ścieżki `d`: animacji `d` nie
   obsługuje każda przeglądarka, a scaleY działa wszędzie. */
.dmk-usta {
  fill: none; stroke: var(--dmk-atrament); stroke-width: 2.4; stroke-linecap: round;
  transform-box: fill-box; transform-origin: top center;
  animation: dmkUsta .62s ease-in-out var(--op, 0s) 5;
}
@keyframes dmkUsta { 0%,100% { transform: scaleY(1); }
                     40% { transform: scaleY(2.4) scaleX(.9); }
                     70% { transform: scaleY(1.3); } }

/* --- gwiazdki (złote, rozsypują się kolejno) --- */
.dmk-gwiazdki { display: inline-flex; gap: 2px; line-height: 1; }
.dmk-gwiazdki span {
  color: #B8893B; font-size: 15px; display: inline-block; transform: scale(0);
  animation: dmkGw .4s cubic-bezier(.34,1.6,.64,1) var(--op, 0s) both;
}
.dmk-gw--pusta { color: var(--dmk-linia); }
@keyframes dmkGw { to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .dmk-chm, .dmk-twarz, .dmk-gwiazdki span, .dmk-usta, .dmk-oczy ellipse {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* Dodatki twarzy: kolczyki (kobiety) i zarost przystrzyżony (mężczyźni). */
.dmk-kolczyk circle { fill: #B8893B; }
.dmk-zarost--lekki { opacity: .45; }
.dmk-okulary rect { fill: none; stroke: var(--dmk-atrament); stroke-width: 2; }

/* ====================================================================
   HERO KARTY PRODUKTU. Przed poprawką: szara zaślepka, fioletowy guzik
   ze skórki rodzica, cena zwykłym tekstem, „Kategoria: Uncategorized".
   ==================================================================== */
.single-product div.product { margin-bottom: 0; }
.single-product .product_title {
  font-size: 2.1em;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.dmh-lead {
  margin: 0 0 18px;
  font-size: .95em;
  color: var(--dmk-szary);
  max-width: 46ch;
}

/* cena: stara przekreślona drobno, nowa duża w akcencie */
.single-product .price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px !important;
  font-size: 1em !important;
}
.single-product .price del {
  opacity: 1;
  color: var(--dmk-szary);
  font-size: 1em;
  text-decoration-thickness: 1px;
}
.single-product .price ins {
  text-decoration: none;
  font-size: 1.85em;
  font-weight: 600;
  color: var(--dmk-akcent);
}
.single-product .price .woocommerce-Price-amount { white-space: nowrap; }

/* guzik w skórce, nie w fiolecie GeneratePress */
.single-product .single_add_to_cart_button,
.woocommerce .button.alt {
  background: var(--dmk-akcent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--dmk-r) !important;
  font-family: Literata, Georgia, serif;
  font-size: 1em;
  letter-spacing: .02em;
  padding: 14px 26px !important;
}
.single-product .single_add_to_cart_button:hover { background: #73231f !important; }
.single-product .quantity input {
  border: 1px solid var(--dmk-linia);
  border-radius: var(--dmk-r);
  padding: 12px 8px;
  font-family: Literata, Georgia, serif;
}

/* pasek faktów o zamówieniu */
.dmh-fakty {
  list-style: none;
  margin: 22px 0 6px;
  padding: 18px 0 0;
  border-top: 1px solid var(--dmk-linia);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) { .dmh-fakty { grid-template-columns: 1fr 1fr; gap: 14px 22px; } }
.dmh-fakty li { padding-left: 20px; position: relative; }
.dmh-fakty li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 9px; height: 9px;
  background: var(--dmk-akcent);
}
.dmh-fakty b { display: block; font-size: .92em; font-weight: 600; }
.dmh-fakty span { display: block; font-size: .8em; color: var(--dmk-szary); }

/* rysowany słoik zamiast zaślepki */
.dmh-sloik { text-align: center; }
.dmh-sloik svg { width: 100%; max-width: 300px; height: auto; }
.dmh-wieko { fill: var(--dmk-atrament); }
.dmh-korpus { fill: var(--dmk-papier); stroke: var(--dmk-atrament); stroke-width: 2.5; }
.dmh-etykieta { fill: #fff; stroke: var(--dmk-akcent); stroke-width: 1.5; }
.dmh-nazwa {
  font-family: Literata, Georgia, serif;
  font-size: 17px; font-weight: 600; fill: var(--dmk-atrament);
  letter-spacing: .04em;
}
.dmh-kreska { stroke: var(--dmk-akcent); stroke-width: 1; }
.dmh-podpis { font-size: 8px; fill: var(--dmk-szary); letter-spacing: .22em; }
.dmh-kapsula { fill: var(--dmk-akcent-tlo); stroke: var(--dmk-akcent); stroke-width: 1.5; }
.dmh-sloik__nota {
  display: block;
  margin-top: 10px;
  font-size: .72em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dmk-szary);
}

/* metryczka i zakładki w stylu karty */
.single-product .product_meta { font-size: .82em; color: var(--dmk-szary); }
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--dmk-atrament) !important; }
.woocommerce-tabs ul.tabs li {
  border: 0 !important; background: transparent !important; border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li.active a { border-bottom: 3px solid var(--dmk-akcent); }
.woocommerce-tabs .panel > h2:first-child { display: none; }

/* plakietka promocji w skórce, nie w domyślnej oliwce GeneratePress */
.woocommerce span.onsale {
  background: var(--dmk-akcent) !important;
  color: #fff !important;
  border-radius: var(--dmk-r) !important;
  font-family: Literata, Georgia, serif;
  font-size: .72em;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 12px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
}

/* ====================================================================
   START ANIMACJI PO WEJŚCIU W EKRAN.
   Dopóki blok nie jest widoczny, animacje są wyłączone i elementy stoją
   w stanie początkowym. Klasa `dmk-js` na <html> pochodzi ze skryptu —
   bez niej (skrypt nie wystartował) NIC się nie ukrywa i rysunki są
   od razu w stanie końcowym. Lepiej bez animacji niż z pustą ramką.
   ==================================================================== */
.dmk-js .dmk-figury:not(.dmk-widoczne) *,
.dmk-js .dmk-chmurki:not(.dmk-widoczne) * { animation: none !important; }

.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-wars,
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-wyn,
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-rosl .dmk-zia,
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-rosl .dmk-zia2,
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-ziarna .dmk-zia,
.dmk-js .dmk-chmurki:not(.dmk-widoczne) .dmk-chm,
.dmk-js .dmk-chmurki:not(.dmk-widoczne) .dmk-twarz,
.dmk-js .dmk-chmurki:not(.dmk-widoczne) .dmk-gwiazdki span { opacity: 0; }

.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-lod,
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-lis { stroke-dashoffset: 220; }
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-was { stroke-dashoffset: 80; }
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-kop { transform: scaleY(.08); }
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-kaps__gora,
.dmk-js .dmk-figury:not(.dmk-widoczne) .dmk-kaps__dol { transform: translateY(0); }

/* ====================================================================
   FORMULARZ ZAMÓWIENIA zamiast koszyka.
   Karta COD sprzedaje przez telefon: imię + numer, resztę ustala
   konsultant. Koszyka, kasy i konta klienta tu nie ma.
   ==================================================================== */
.dmk-zamow {
  border: 1.5px solid var(--dmk-atrament);
  background: var(--dmk-akcent-tlo);
  padding: 20px 20px 18px;
  margin: 4px 0 22px;
}
.dmk-zamow__naglowek {
  margin: 0 0 4px;
  font-size: .74em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dmk-akcent);
}
.dmk-zamow__cena {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.dmk-zamow__cena b { font-size: 1.7em; font-weight: 600; color: var(--dmk-atrament); }
.dmk-zamow__cena span { font-size: .8em; color: var(--dmk-szary); }
.dmk-zamow__pole { display: block; margin: 0 0 12px; }
.dmk-zamow__pole span {
  display: block;
  font-size: .76em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dmk-szary);
  margin-bottom: 5px;
}
.dmk-zamow__pole input {
  width: 100%;
  border: 1px solid var(--dmk-linia);
  border-radius: var(--dmk-r);
  background: #fff;
  padding: 13px 14px;
  font-family: Literata, Georgia, serif;
  font-size: 1em;
  color: var(--dmk-atrament);
}
.dmk-zamow__pole input:focus {
  outline: 2px solid var(--dmk-akcent);
  outline-offset: 1px;
  border-color: var(--dmk-akcent);
}
/* Pułapka na boty: schowana poza ekran, NIE przez display:none na polu
   z etykietą — widoczny honeypot zjada prawdziwe zgłoszenia. */
.dmk-zamow__pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.dmk-zamow__guzik {
  width: 100%;
  border: 0;
  border-radius: var(--dmk-r);
  background: var(--dmk-akcent);
  color: #fff;
  font-family: Literata, Georgia, serif;
  font-size: 1.02em;
  padding: 15px 18px;
  cursor: pointer;
  margin-top: 4px;
}
.dmk-zamow__guzik:hover { background: #73231f; }
.dmk-zamow__guzik:disabled { background: var(--dmk-szary); cursor: default; }
.dmk-zamow .lf-ok {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: #fff;
  border-left: 3px solid var(--dmk-akcent);
  font-size: .9em;
}
.dmk-zamow__nota {
  margin: 12px 0 0;
  font-size: .78em;
  line-height: 1.5;
  color: var(--dmk-szary);
}

/* ====================================================================
   ZDJĘCIE: STAŁY FORMAT, KOLUMNA JEDZIE Z FORMULARZEM.

   Pierwsza wersja rozciągała zdjęcie na całą wysokość prawej kolumny.
   Efekt: kadr zależał od tego, ile treści ma formularz — przy dłuższej
   karcie obcinało więcej, przy krótszej mniej, więc KAŻDY produkt miał
   inne proporcje. Teraz zdjęcie ma stały kwadrat (tak oddaje je Grok
   i takie są packshoty reklamodawców), a dół wyrównuje się tym, że cała
   kolumna ze zdjęciem przykleja się przy przewijaniu i schodzi razem
   z formularzem.
   ==================================================================== */
@media (min-width: 769px) {
  .single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 42px;
    align-items: start;
  }
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .summary {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .up-sells,
  .single-product div.product > .upsells { grid-column: 1 / -1; }

  /* ⚠ NIE PRZYKLEJAC tej kolumny (`position: sticky`). Element jedzie
     wtedy dalej niz kolumna z formularzem i NACHODZI NA OPIS karty —
     zdjecie laduje na akapitach i na karcie stanu. Kolumny wyrownuje
     teraz pasek faktow przeniesiony pod zdjecie, a nie ruch. */

  /* Stały format 1:1. `!important`, bo arkusz WooCommerce ładuje się PO
     naszym i ustawia obrazkom `height: auto`. */
  .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }
  /* rysowany słoik (gdy karta nie ma zdjęcia) — ten sam kwadrat */
  .single-product .dmh-sloik {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Na telefonie i tablecie układ zostaje blokowy, a zdjęcie kwadratowe. */
.woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: cover; }

/* === kolory ikon skladnikow (dopisane 25.10.2026) ===
   Zielen dla lisci, zloto dla klaczy i korzeni, purpura dla jagod,
   blekit dla mineralow i wody, ziemia dla kory. Kazdy kolor ma wersje
   kreski i wersje wypelnienia, bo ikona rysuje sie kreska, a plamy
   wchodza wypelnieniem. */
:root {
  --dmk-ziel: #4A6B3A;        --dmk-ziel-tlo: #E9F0E3;
  --dmk-zloto: #A8751C;       --dmk-zloto-tlo: #FAF0DA;
  --dmk-purpura: #6E2C4C;     --dmk-purpura-tlo: #F6E7EE;
  --dmk-blekit: #3B5C73;      --dmk-blekit-tlo: #E7EEF3;
  --dmk-ziemia: #6B4A2F;      --dmk-ziemia-tlo: #F1E8DF;
}
/* kreska w kolorze — te same animacje, inny stroke */
.dmk-rosl .dmk-lis--z,  .dmk-rosl .dmk-lod--z  { stroke: var(--dmk-ziel); }
.dmk-rosl .dmk-lis--zl, .dmk-rosl .dmk-lod--zl { stroke: var(--dmk-zloto); }
.dmk-rosl .dmk-lis--p,  .dmk-rosl .dmk-lod--p  { stroke: var(--dmk-purpura); }
.dmk-rosl .dmk-lis--b,  .dmk-rosl .dmk-lod--b  { stroke: var(--dmk-blekit); }
.dmk-rosl .dmk-lis--zm, .dmk-rosl .dmk-lod--zm { stroke: var(--dmk-ziemia); }
.dmk-rosl .dmk-was--z  { stroke: var(--dmk-ziel); }
.dmk-rosl .dmk-was--zl { stroke: var(--dmk-zloto); }
.dmk-rosl .dmk-was--p  { stroke: var(--dmk-purpura); }
.dmk-rosl .dmk-was--b  { stroke: var(--dmk-blekit); }
.dmk-rosl .dmk-was--zm { stroke: var(--dmk-ziemia); }
/* wypelnienie plam — stroke zostaje ciemniejszy od wypelnienia */
.dmk-rosl .dmk-zia--z  { fill: var(--dmk-ziel-tlo);    stroke: var(--dmk-ziel); }
.dmk-rosl .dmk-zia--zl { fill: var(--dmk-zloto-tlo);   stroke: var(--dmk-zloto); }
.dmk-rosl .dmk-zia--p  { fill: var(--dmk-purpura-tlo); stroke: var(--dmk-purpura); }
.dmk-rosl .dmk-zia--b  { fill: var(--dmk-blekit-tlo);  stroke: var(--dmk-blekit); }
.dmk-rosl .dmk-zia--zm { fill: var(--dmk-ziemia-tlo);  stroke: var(--dmk-ziemia); }
/* pelna plama, gdy ikona ma byc czytelna z daleka (jagody, krysztaly) */
.dmk-rosl .dmk-zia--pelna-z  { fill: var(--dmk-ziel);    stroke: var(--dmk-ziel); }
.dmk-rosl .dmk-zia--pelna-p  { fill: var(--dmk-purpura); stroke: var(--dmk-purpura); }
.dmk-rosl .dmk-zia--pelna-zl { fill: var(--dmk-zloto);   stroke: var(--dmk-zloto); }
.dmk-rosl .dmk-zia--pelna-b  { fill: var(--dmk-blekit);  stroke: var(--dmk-blekit); }
.dmk-rosl .dmk-zia--pelna-zm { fill: var(--dmk-ziemia);  stroke: var(--dmk-ziemia); }
.dmk-znak--b { fill: var(--dmk-blekit); }
.dmk-znak--z { fill: var(--dmk-ziel); }

/* === siatka ikon skladnikow (wiecej, wiec mniejsze) ===
   Klasa `dmk-figury--ikony` dziedziczy po `dmk-figury`, wiec gating
   „animacja dopiero w kadrze" dziala bez zmian. */
.dmk-figury--ikony { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 18px; }
.dmk-figury--ikony .dmk-rosl { max-width: 104px; }
.dmk-figury--ikony figcaption { font-size: 12.5px; line-height: 1.3; }
@media (min-width: 769px) {
  .dmk-figury--ikony { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
}

/* ====================================================================
   IKONA PRZY KAZDYM SKLADNIKU — uklad listy skladu (dopisane 25.10.2026)

   Krzysiek z telefonu: „ikonki powinny byc przy kazdym skladniku,
   a teraz nie sa". Wczesniej rysunki staly w osobnej siatce POD lista
   i czytelnik musial wiazac je z pozycjami po kolejnosci. Teraz ikona
   siedzi w tej samej linii co nazwa skladnika.

   ⚠ `.dmk-rosl` ma w korzeniu `max-width: 170px; margin: 0 auto` —
   w liscie trzeba to nadpisac, inaczej rysunek rozpycha wiersz.
   ==================================================================== */
.dmk-sklad--ikony { list-style: none; padding-left: 0; }
.dmk-sklad--ikony li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--dmk-linia);
}
.dmk-sklad--ikony li:last-child { border-bottom: 0; }
.dmk-sklad--ikony .dmk-ikonka { flex: 0 0 64px; width: 64px; }
.dmk-sklad--ikony .dmk-ikonka .dmk-rosl { max-width: 64px; margin: 0; }
.dmk-sklad--ikony .dmk-skl__tresc { flex: 1 1 auto; min-width: 0; }
.dmk-sklad--ikony .dmk-skl__tresc b { display: block; }
.dmk-sklad--ikony .dmk-ile { color: var(--dmk-szary); font-size: .92em; }

/* Telefon: rysunek mniejszy, ale NADAL obok nazwy — przeniesienie go
   nad tekst rozrywalo pare „ikona + skladnik", o ktora chodzilo. */
@media (max-width: 520px) {
  .dmk-sklad--ikony li { gap: 12px; padding: 12px 0; }
  .dmk-sklad--ikony .dmk-ikonka { flex-basis: 50px; width: 50px; }
  .dmk-sklad--ikony .dmk-ikonka .dmk-rosl { max-width: 50px; }
}

/* Animacja rusza dopiero, gdy lista wjedzie w ekran — te same reguly,
   co dla `.dmk-figury`, bo lista nie dziedziczy po tej klasie. */
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) * { animation: none !important; }
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-zia,
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-zia2,
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-znak,
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-mal { opacity: 0; }
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-lod,
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-lis { stroke-dashoffset: 220; }
.dmk-js .dmk-sklad--ikony:not(.dmk-widoczne) .dmk-was { stroke-dashoffset: 80; }

/* ====================================================================
   SUBSTANCJE POMOCNICZE — wlasna ikona, celowo inna (25.10.2026)

   Krzysiek: „te dodatkowe mogą mieć jakąś ikonę, ale żeby było wiadome,
   że to nie składnik". Granulka jest szara, wyblakla i podpisana
   „nosnik" — wiersz nie wyglada na niedokonczony, a nikt nie bierze
   otoczki za substancje czynna.
   ==================================================================== */
.dmk-rosl--pomoc .dmk-zia--pomoc {
  fill: var(--dmk-papier-ciemniej); stroke: var(--dmk-szary); stroke-width: 1.4;
}
.dmk-mal--pomoc {
  fill: var(--dmk-szary); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase;
}
.dmk-ikonka--pomoc { opacity: .6; }
.dmk-sklad--ikony li:has(.dmk-ikonka--pomoc) .dmk-skl__tresc b {
  color: var(--dmk-szary); font-weight: 500;
}

/* Kapsulka ma teraz szerszy kadr (360 zamiast 235), wiec podpisy warstw
   sie mieszcza. Nie rozciagamy jej na pelna szerokosc kolumny. */
.dmk-kaps { max-width: 320px; }

/* ====================================================================
   KAPSULKA WIEKSZA, PODPISY CZYTELNE (26.10.2026)

   Krzysiek z telefonu: „ta kapsulka jest za mala, czcionka za drobne".
   Zmierzone na ekranie 375 px: rysunek wychodzil 315 px szerokosci,
   a podpisy warstw 7,9 px na ekranie (9 px w jednostkach SVG przy skali
   0,88). Korpus kapsulki mial 60 z 360 jednostek kadru, czyli 52 px.

   Korpus poszerzony w silniku do 90 jednostek, podpisy przesuniete
   na x=144. Tutaj zostaje rozmiar pisma i szerokosc rysunku.
   ==================================================================== */
.dmk-kaps { max-width: 440px; }
.dmk-kaps .dmk-txt { font-size: 13px; }

@media (max-width: 520px) {
  /* Na telefonie rysunek bierze cala szerokosc kolumny — kadr i tak ma
     stale proporcje, wiec nic sie nie rozciaga. */
  .dmk-kaps { max-width: 100%; }
  .dmk-kaps .dmk-txt { font-size: 14px; }
}

/* ====================================================================
   LISTA SKLADNIKOW: ODSLANIANIE WIERSZ PO WIERSZU

   ⚠ Dotad caly blok listy dostawal `dmk-widoczne` naraz. Przy trzynastu
   pozycjach lista ma 2171 px wysokosci — wszystkie ikony animowaly sie
   w tym samym momencie i te na dole konczyly, zanim czytelnik do nich
   doscrollowal. Gorzej: prog widocznosci 0.18 dla elementu wyzszego niz
   okno bywa nieosiagalny i animacja nie ruszala wcale.

   Teraz `dmk-widoczne` dostaje POJEDYNCZY WIERSZ. Stare reguly na
   calym bloku zostaja niżej jako zapas — gdyby skrypt odslonil blok,
   a nie wiersze, nic sie nie zablokuje.
   ==================================================================== */
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) * { animation: none !important; }
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-zia,
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-zia2,
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-znak,
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-mal { opacity: 0; }
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-lod,
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-lis { stroke-dashoffset: 220; }
.dmk-js .dmk-sklad--ikony li:not(.dmk-widoczne) .dmk-was { stroke-dashoffset: 80; }

/* Wiersz, ktory juz wszedl w ekran, animuje sie normalnie — i tylko on. */
.dmk-js .dmk-sklad--ikony li.dmk-widoczne * { animation-play-state: running; }

/* ====================================================================
   IKONY SKLADNIKOW WIEKSZE (26.10.2026)

   Krzysiek z telefonu: „te animacje i obrazki moga byc nieco wieksze,
   maks wielkosc jaka tam sie zmiesci".

   Zmierzone na ekranie 375 px: lista ma 315 px, ikona zajmowala 50 px,
   odstep 12 px, na tekst zostawalo 253 px (okolo 29 znakow w linii).
   Rysunek wychodzil znaczkiem obok sciany tekstu.

   Ikona idzie na 92 px (prawie dwa razy wiecej). Tekst dostaje wtedy
   209 px, czyli okolo 24 znaki w linii — wiersz jest wezszy, ale to
   dalej czytelna szerokosc dla polskiego tekstu. Ponizej 20 znakow
   lamanie zaczyna wygladac zle, wiec 92 px to gorna granica przy tym
   ukladzie.

   ⚠ Ikona ZOSTAJE OBOK nazwy. Przeniesienie jej nad tekst dawaloby
   wiecej miejsca, ale rozrywa pare „ikona + skladnik", o ktora chodzilo.
   ==================================================================== */
.dmk-sklad--ikony li { gap: 16px; }
.dmk-sklad--ikony .dmk-ikonka { flex: 0 0 96px; width: 96px; }
.dmk-sklad--ikony .dmk-ikonka .dmk-rosl { max-width: 96px; }

@media (max-width: 520px) {
  .dmk-sklad--ikony li { gap: 14px; padding: 16px 0; }
  .dmk-sklad--ikony .dmk-ikonka { flex-basis: 92px; width: 92px; }
  .dmk-sklad--ikony .dmk-ikonka .dmk-rosl { max-width: 92px; }
}

/* Osobna siatka rysunkow (gdy kiedys wroci) — ta sama skala. */
.dmk-figury--ikony { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dmk-figury--ikony .dmk-rosl { max-width: 132px; }

/* ====================================================================
   PODPISY W IKONACH — WYSRODKOWANIE (26.10.2026)

   ⚠ Zmierzone w przegladarce: `text-anchor: start`. Silnik stawia KAZDY
   podpis na x=60, czyli w srodku kadru 120 jednostek — zakladajac
   wysrodkowanie, ktorego arkusz nigdy nie ustawil. Tekst leci wiec
   w prawo i wychodzi poza kadr: „likopen" konczy sie na 123 przy kadrze
   120 i na stronie widac „likoper". Dotyczy 80 podpisow, z czego 70 ma
   wiecej niz szesc znakow.
   ==================================================================== */
.dmk-mal, .dmk-znak { text-anchor: middle; }

/* Blok powiazanych tekstow — klasa bez slowa „archiwum" (26.10.2026).
   Stara zostaje, zeby karty sprzed zmiany nie stracily stylu. */
.dmk-powiazane { list-style: none; padding-left: 0; }
.dmk-powiazane li { margin: 0 0 10px; }

/* ====================================================================
   SKLEP I KATEGORIE W STYLU KART (26.10.2026)

   Krzysiek: „dostosuj wyglad sklepu i cala reszte do naszych produktow".

   Lista produktow szla domyslnym WooCommerce: bezszeryfowy krój, niebieskie
   linki, zaokraglone rogi — a karta produktu jest szeryfowa, na papierowym
   tle, z katami niemal prostymi i czerwonym akcentem. Dwa rozne sklepy
   w jednym sklepie.

   Bierzemy te sama paleta i te sama typografie co karta: --dmk-atrament,
   --dmk-papier, --dmk-akcent, 'Literata'.
   ==================================================================== */
.woocommerce .page-title,
.woocommerce-products-header__title,
body.post-type-archive-product .entry-title,
body.tax-product_cat .page-title {
  font-family: 'Literata', Georgia, serif;
  color: var(--dmk-atrament);
  letter-spacing: -.01em;
}

/* Licznik wynikow i sortowanie to przy dwoch produktach sam szum. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: none; }

/* --- kafelek produktu ------------------------------------------------ */
.woocommerce ul.products li.product {
  background: var(--dmk-papier);
  border: 1px solid var(--dmk-linia);
  border-radius: var(--dmk-r);
  padding: 14px 14px 18px;
  text-align: left;
}
.woocommerce ul.products li.product a img {
  /* Jedno zdjecie to fotografia, drugie rysunek — bez stalych proporcji
     i dopasowania „contain" kafelki rozjezdzaly sie wysokoscia. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--dmk-linia);
  border-radius: var(--dmk-r);
  margin-bottom: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Literata', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--dmk-atrament);
  padding: 0;
}
.woocommerce ul.products li.product .price {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--dmk-akcent);
  font-weight: 700;
}
.woocommerce ul.products li.product .price del {
  color: var(--dmk-szary);
  font-weight: 400;
  opacity: .8;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Plakietka promocji: kwadratowa i w naszym czerwonym, nie w zielonym. */
.woocommerce span.onsale {
  background: var(--dmk-akcent);
  color: #fff;
  border-radius: var(--dmk-r);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  min-height: 0;
  line-height: 1.4;
}

/* Przycisk „do koszyka" na liscie prowadzi do karty — wiec wyglada
   jak odnosnik do karty, a nie jak zakup jednym kliknieciem. */
.woocommerce ul.products li.product .button {
  background: var(--dmk-atrament);
  color: var(--dmk-papier);
  border-radius: var(--dmk-r);
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  padding: 10px 16px;
  margin-top: 10px;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--dmk-akcent);
  color: #fff;
}

/* --- okruszki i opis kategorii --------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8rem;
  color: var(--dmk-szary);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--dmk-szary); }
.woocommerce .term-description { font-family: 'Literata', Georgia, serif; }

@media (max-width: 520px) {
  .woocommerce ul.products li.product { padding: 12px 12px 14px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; }
}

/* Zegar doby wiekszy — na telefonie wychodzil 128 px, czyli znaczek.
   Ta sama skala co ikony skladnikow po powiekszeniu (26.10.2026). */
.dmk-zegar { max-width: 200px; }
@media (max-width: 520px) { .dmk-zegar { max-width: 190px; } }

.dmk-zegar { width: 200px; height: 200px; max-width: 100%; }
@media (max-width: 520px) { .dmk-zegar { width: 190px; height: 190px; } }

/* ===================== przyklejony pasek zamowienia ===================== */
/* Pokazujemy do 1024 px. Wyzej formularz i przycisk sa widoczne same,
   a plywajacy element tylko zaslanialby tresc. */
.dmk-pasek{display:none}
@media (max-width:1024px){
  .dmk-pasek{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#1C1917;border-top:2px solid #8C2F2A;
  }
  .dmk-pasek__opis{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
  .dmk-pasek__nazwa{
    color:#F4EFE7;font-weight:700;font-size:15px;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dmk-pasek__cena{color:#C9BFB0;font-size:14px;line-height:1.3}
  .dmk-pasek__cena del{opacity:.6;margin-right:4px}
  .dmk-pasek__guzik{
    flex:0 0 auto;background:#8C2F2A;color:#fff;text-decoration:none;
    padding:12px 20px;font-weight:700;font-size:15px;line-height:1.2;
    border:1px solid #F4EFE7;
  }
  .dmk-pasek__guzik:hover,.dmk-pasek__guzik:focus{background:#A8544C;color:#fff}
  /* zeby pasek nie zaslanial stopki */
  body.single-product{padding-bottom:76px}
}