/* vitalplanet.sk | Kalkulačka spotreby farieb | Developed by NETMALL s.r.o.
   v8 – 30. 10. 2026
   Farby preberá z premenných témy (--vp-g zelená, --vp-b rámy a podobne),
   aby kalkulačka vyzerala ako zvyšok webu. */

.vpk, .vpk-box-obal {
  /* Zelená patrí značke, ale keď je všade, stráca dôraz. Preto ju držíme
     len na hlavných tlačidlách a na vybranej možnosti. Plochy a rámy sú
     neutrálne pieskové, čísla tmavé, jantárová je len na zvýraznenie. */
  --vpk-g: var(--vp-g, #4f9a28);     /* zelená – hlavné akcie */
  --vpk-gd: var(--vp-gd, #3b7a1c);
  --vpk-gl: #f1f7ec;                 /* jemná zelená – vybraná možnosť */
  --vpk-b: #e4e2dd;                  /* neutrálne linky a rámy */
  --vpk-b2: #cfccc5;                 /* výraznejšia linka */
  --vpk-t: var(--vp-t, #2b2b2b);
  --vpk-ink: #2f3a40;                /* čísla, nadpisy */
  --vpk-m: #6f6a63;
  --vpk-plocha: #f7f6f3;             /* pieskové plochy */
  --vpk-akcent: #9a6320;             /* jantárová – zvýraznenie */
  --vpk-akcent-l: #fdf5e9;
  color: var(--vpk-t);
  font-size: 15px;
  line-height: 1.5;
}

.vpk-h, .vpk-karta-hl h4, .vpk-nar h5 { color: var(--vpk-ink); }

.vpk *, .vpk-box * { box-sizing: border-box; }

/* Poistka proti štýlom témy: v obsahu stránky dopĺňa odkazom šípky
   a zoznamom odrážky. V kalkulačke ich nechceme. */
.vpk a::before, .vpk a::after,
.vpk li::before, .vpk li::after { content: none !important; }

.vpk ul, .vpk ol, .vpk li { list-style: none !important; margin: 0; padding: 0; }

.vpk .vpk-karta-hl h4 { display: -webkit-box !important; }

.vpk-krok {
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid var(--vpk-b);
  border-radius: 16px;
  background: #fff;
}

.vpk-h {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
}

.vpk-pozn {
  margin: 12px 0 0;
  color: var(--vpk-m);
  font-size: 13px;
}

/* ── voľby (dlaždice) ── */
.vpk-volby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.vpk-volby--velke { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vpk-volby--male { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 12px; }
/* Predvolené objekty v scenári so sprejmi – menšie dlaždice, viac v riadku. */
.vpk-volby--objekty { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.vpk-volba {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--vpk-b);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.vpk-volba:hover { border-color: var(--vpk-b2); background: var(--vpk-plocha); }

.vpk-volba.vpk-vybrane {
  border-color: var(--vpk-g);
  background: var(--vpk-gl);
  box-shadow: inset 0 0 0 1px var(--vpk-g);
}

.vpk-volba--mala { flex-direction: row; align-items: center; padding: 10px 14px; }

.vpk-volba-n { font-weight: 600; }
.vpk-volba-o { color: var(--vpk-m); font-size: 13px; }

.vpk-ik { display: block; width: 26px; height: 26px; color: var(--vpk-g); }
.vpk-ik svg { width: 100%; height: 100%; }

/* ── prepínač režimu ── */
.vpk-prepinac {
  display: inline-flex;
  margin: 0 0 16px;
  padding: 3px;
  border: 1px solid var(--vpk-b);
  border-radius: 99px;
  background: var(--vpk-plocha);
  flex-wrap: wrap;
}

.vpk-prep-tl {
  padding: 7px 16px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--vpk-m);
}

.vpk-prep-tl.vpk-vybrane { background: var(--vpk-g); color: #fff; font-weight: 600; }

/* ── polia ── */
.vpk-mriezka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.vpk-pole { display: block; }
/* popisok poľa; nie každý span vnútri (napr. prepínač počtu vrstiev) */
.vpk-pole > span:first-child { display: block; margin-bottom: 5px; font-size: 13px; color: var(--vpk-m); }

.vpk-vstup { position: relative; display: block; }

.vpk-vstup input {
  width: 100%;
  padding: 10px 44px 10px 12px;
  border: 1.5px solid var(--vpk-b);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: #fff;
}

.vpk-vstup input:focus { outline: 0; border-color: var(--vpk-g); }

.vpk-vstup i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vpk-m);
  font-style: normal;
  font-size: 13px;
  pointer-events: none;
}

.vpk-pole--odtien { margin: 0 0 14px; }

.vpk-pole--odtien select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--vpk-b);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}

.vpk-prep {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0;
  cursor: pointer;
  font-size: 14px;
}

.vpk-prep:last-child { margin-bottom: 0; }

.vpk-prep input { width: 18px; height: 18px; accent-color: var(--vpk-g); }

/* ── výsledná plocha ── */
.vpk-plocha {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--vpk-plocha);
  border: 1px solid var(--vpk-b);
}

.vpk-plocha strong { font-size: 18px; color: var(--vpk-ink); }
.vpk-plocha--prazdna { background: #fbfaf8; color: var(--vpk-m); }

/* ── karty produktov ── */
.vpk-karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.vpk-karta {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1.5px solid var(--vpk-b);
  border-radius: 14px;
  background: #fff;
}

.vpk-karta-hl { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.vpk-karta-hl h4 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; }
.vpk-vyrobca { margin: 0 0 12px; color: var(--vpk-m); font-size: 13px; }

.vpk-znak {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 99px;
  background: #f2f2f2;
  color: var(--vpk-m);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.vpk-znak--ok { background: #eef1ec; color: #4a5a46; }

.vpk-potreba {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--vpk-plocha);
  border: 1px solid var(--vpk-b);
}

.vpk-potreba > span:first-child { color: var(--vpk-m); font-size: 13px; }
.vpk-potreba strong { font-size: 22px; color: var(--vpk-ink); }
.vpk-potreba-o { color: var(--vpk-m); font-size: 12px; }

/* Pri tmeloch nahrádza riadok s počtom vrstiev údaj o škáre – karty
   tak majú rovnakú výšku ako ostatné. */
.vpk-vrstvy--tmel { justify-content: space-between; }

.vpk-vrstvy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--vpk-m);
}

.vpk-pocet {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--vpk-b);
  border-radius: 99px;
  overflow: hidden;
}

.vpk-pocet button {
  width: 30px;
  height: 30px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  color: var(--vpk-ink);
}

.vpk-pocet button:disabled { color: #c9c9c9; cursor: default; }
.vpk-pocet button:hover:not(:disabled) { background: var(--vpk-plocha); }
.vpk-pocet b { min-width: 24px; text-align: center; color: var(--vpk-t); font-size: 15px; }

/* ── balenia ── */
.vpk-balenia { margin: 0 0 12px; }

.vpk-bal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--vpk-b);
}

.vpk-bal-n { flex: 1 1 auto; font-weight: 600; }
.vpk-bal-c { color: var(--vpk-m); font-size: 14px; }

.vpk-kos {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1.5px solid var(--vpk-b2);
  border-radius: 99px;
  background: #fff;
  color: var(--vpk-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}

.vpk-kos:hover:not(:disabled) {
  background: var(--vpk-g);
  border-color: var(--vpk-g);
  color: #fff;
}
.vpk-kos:disabled { opacity: .65; cursor: wait; }
.vpk-kos.vpk-ok { background: var(--vpk-g); border-color: var(--vpk-g); color: #fff; }
.vpk-kos.vpk-busy { opacity: .6; }

.vpk-suhrn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1.5px solid var(--vpk-b);
}

.vpk-suhrn > span { color: var(--vpk-m); font-size: 13px; }
.vpk-suhrn strong { flex: 1 1 auto; font-size: 18px; }

.vpk-kos--vsetko { padding: 9px 16px; background: var(--vpk-g); color: #fff; }
.vpk-kos--vsetko:hover:not(:disabled) { background: var(--vpk-gd); border-color: var(--vpk-gd); }

.vpk-zdroj { margin: 10px 0 0; color: var(--vpk-m); font-size: 11.5px; }
.vpk-zdroj a { color: var(--vpk-g); }

.vpk-chyba {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf2f2;
  color: var(--vp-r, #d64545);
  font-size: 13px;
}

/* ── náradie ──
   Každá skupina je pás cez celú šírku s dlaždicami. V úzkych stĺpcoch
   vedľa seba sa názvy lámali na štyri riadky a blok pôsobil zhustene. */
.vpk-nary { display: block; }

.vpk-nar + .vpk-nar { margin-top: 22px; }

.vpk-nar h5 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vpk-b);
  font-size: 15px;
}

.vpk-nar h5 span { color: var(--vpk-m); font-size: 12.5px; font-weight: 400; }

.vpk .vpk-nar-mriezka {
  /* pevné štyri stĺpce – v skupine sú vždy štyri kusy, takže riadok
     nezostane s prázdnym miestom vpravo */
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 980px) {
  .vpk .vpk-nar-mriezka { grid-template-columns: repeat(3, 1fr); }
}

.vpk-nar-kus {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--vpk-b);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.vpk-nar-kus:hover {
  border-color: var(--vpk-b2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

.vpk-nar-f {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin-bottom: 10px;
}

.vpk-nar-f img {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.vpk .vpk-nar-n {
  /* Téma e-shopu nastavuje odkazom vlastný display a podčiarknutie, preto
     tu vyššia špecifickosť a !important – inak sa názov neoreže na dva
     riadky a cena sa k nemu prilepí. */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin-bottom: 8px;
  color: inherit;
  text-decoration: none !important;
  font-size: 13.5px;
  line-height: 1.4;
}

.vpk .vpk-nar-n:hover { color: var(--vpk-g); text-decoration: underline !important; }

.vpk-nar-spod {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.vpk-nar-c { color: var(--vpk-ink); font-weight: 600; white-space: nowrap; }
.vpk-nar-kus .vpk-kos { padding: 6px 11px; font-size: 12px; }

/* ── telefóny ── */
@media (max-width: 767px) {
  .vpk { font-size: 14.5px; }
  .vpk-krok { padding: 16px; border-radius: 14px; margin-bottom: 20px; }
  .vpk-h { font-size: 17px; }
  .vpk-volby, .vpk-volby--velke { grid-template-columns: 1fr; }
  /* minmax(0, 1fr), nie 1fr – inak dlhý text roztiahne stĺpec nad šírku
     mriežky a na úzkych telefónoch vznikne vodorovný posun. */
  .vpk-volby--male { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpk-volby--objekty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpk-karty { grid-template-columns: 1fr; }
  .vpk-potreba strong { font-size: 20px; }
  .vpk-prepinac { width: 100%; }
  .vpk-prep-tl {
    flex: 1 1 0;
    padding: 9px 8px;
    text-align: center;
    font-size: 13.5px;
    white-space: nowrap;
  }
  .vpk-vstup input { padding: 11px 44px 11px 12px; font-size: 16px; }
  .vpk-bal { flex-wrap: wrap; }
  .vpk-bal-n { flex: 1 1 100%; }
}

.vpk-podh {
  margin: 26px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--vpk-b);
  font-size: 15px;
  color: var(--vpk-m);
  font-weight: 600;
}

/* ── najlacnejšia možnosť a varovania ── */
.vpk-karta { position: relative; }

.vpk-karta--naj {
  border-color: var(--vpk-akcent);
  box-shadow: 0 2px 14px rgba(154, 99, 32, .14);
}

.vpk-naj {
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--vpk-akcent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}

.vpk-karta--naj .vpk-karta-hl { margin-top: 4px; }

.vpk-varovanie {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff8e8;
  border: 1px solid #f0dca8;
  font-size: 12.5px;
  color: #7a5a12;
}

.vpk-nacitavam {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--vpk-b);
  border-radius: 14px;
  background: #fff;
  color: var(--vpk-m);
  text-align: center;
}

/* ───────── krabička v detaile produktu ───────── */
.vpk-box-obal { margin: 18px 0; }

.vpk-box {
  padding: 16px 18px;
  border: 1.5px solid var(--vpk-b);
  border-radius: 14px;
  background: var(--vpk-plocha);
}

.vpk-box-h { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

.vpk-box-riadok {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

/* Krabička pri tmeloch – tri rozmery škáry vedľa seba. */
.vpk-box-riadok--3 { grid-template-columns: 1fr 1fr 1fr; }

.vpk-box .vpk-vstup input { background: #fff; }

.vpk-pocet--box { background: #fff; }

.vpk-box-podklad {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 3px;
  border: 1px solid var(--vpk-b);
  border-radius: 99px;
  background: #fff;
}

.vpk-box-podklad .vpk-prep-tl {
  flex: 1 1 auto;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid transparent;
}

.vpk-box-podklad .vpk-prep-tl:not(.vpk-vybrane):hover {
  border-color: var(--vpk-b2);
  background: var(--vpk-plocha);
}

.vpk-box-vysledok {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--vpk-b);
}

.vpk-box-vysledok p { margin: 0 0 10px; }
.vpk-box-vysledok strong { color: var(--vpk-ink); }

.vpk-box-kup {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
}

.vpk-box-kup > span { flex: 1 1 180px; font-size: 14px; }

.vpk-box-pozn { margin: 10px 0 0; color: var(--vpk-m); font-size: 12.5px; }
.vpk-box-pozn a { color: var(--vpk-g); }

@media (max-width: 767px) {
  .vpk-box { padding: 14px; }
  .vpk-box-riadok { grid-template-columns: 1fr; gap: 10px; }
  .vpk-box-riadok--3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .vpk-box-podklad { border-radius: 12px; flex-direction: column; gap: 3px; }
  .vpk-box-podklad .vpk-prep-tl { flex: 1 1 auto; border-radius: 9px; text-align: center; }
  .vpk-box-podklad .vpk-prep-tl:not(.vpk-vybrane) { border-color: var(--vpk-b); }
  .vpk-box-kup .vpk-kos--vsetko { width: 100%; }
}

/* ───────── obrázky a zarovnanie kariet ─────────
   Karty v jednom riadku musia mať rovnakú výšku, inak mriežka vyzerá
   rozsypane. Preto má obrázok pevnú výšku, názov dva riadky a riadok
   s odtieňom je v karte vždy, aj keď je odtieň jediný. */

.vpk-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin: -4px 0 12px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.vpk-foto img {
  max-width: 100%;
  max-height: 128px;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.vpk-foto--ziadne {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--vpk-plocha);
}

/* odznaky sú v rohoch obrázka, nie v hlavičke – hlavička tak zostane rovnaká */
.vpk-foto .vpk-naj,
.vpk-foto .vpk-znak {
  position: absolute;
  top: 6px;
  max-width: 60%;
  white-space: normal;
  line-height: 1.25;
}

.vpk-foto .vpk-naj { left: 6px; }
.vpk-foto .vpk-znak { right: 6px; text-align: right; }

.vpk-karta--naj .vpk-karta-hl { margin-top: 0; }

.vpk-karta-hl { display: block; }

.vpk-karta-hl h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0 0 3px;
}

.vpk-vyrobca {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.5em;
}

.vpk-pole--odtien > span:first-child { margin-bottom: 5px; }

.vpk-odtien-jeden {
  display: block;
  padding: 10px 12px;
  border: 1.5px dashed var(--vpk-b);
  border-radius: 10px;
  color: var(--vpk-m);
  background: var(--vpk-plocha);
}

.vpk-balenia { margin-top: auto; }

/* skryté karty nad limit */
.vpk-skryta { display: none; }

.vpk-viac {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1.5px solid var(--vpk-b);
  border-radius: 12px;
  background: #fff;
  color: var(--vpk-gd);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.vpk-viac:hover { border-color: var(--vpk-b2); background: var(--vpk-plocha); }

@media (max-width: 767px) {
  /* Na telefóne dávame zo skupiny len dva kusy – šesť skupín po štyroch
     by bol nekonečný zoznam. Na počítači zostávajú štyri.
     POZOR: platí len pre bloky náradia v sprievodcovi. V Pláne práce je
     v jednej mriežke po dva kusy z viacerých skupín, tam by sa skrývali
     celé skupiny. */
  .vpk .vpk-nar-mriezka { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vpk .vpk-nar > .vpk-nar-mriezka > .vpk-nar-kus:nth-child(n+3) { display: none; }
  .vpk .vpk-nar-n { -webkit-line-clamp: 3; min-height: 4.2em; }
  .vpk-nar-kus { padding: 10px; }
  .vpk-nar-f { height: 70px; }
  .vpk-nar-f img { max-height: 70px; }
  .vpk-nar-spod { flex-direction: column; align-items: stretch; gap: 6px; }
  .vpk-nar-kus .vpk-kos { width: 100%; }
  .vpk-foto { height: 120px; }
  .vpk-foto img { max-height: 110px; }
  .vpk-karta-hl h4 { min-height: 0; -webkit-line-clamp: 3; }
}

/* riadok „výrobca odporúča" vždy pod prepínačom, nech karty nerozhadzuje */
.vpk-odporucanie { flex: 1 1 100%; }

/* ═══════════════════ PLÁN PRÁCE ═══════════════════
   Stránka s postupom práce: kroky, množstvá, harmonogram a počasie.
   Developed by NETMALL s.r.o.

   POZOR na špecifickosť: kroky sú <li> a texty <p>, a šablóna e-shopu
   im nastavuje vlastné odsadenie pravidlami typu `.content ul li`. Jeden
   názov triedy (0,1,0) na ne nestačí – bloky potom sedeli nalepené na
   sebe. Preto má každé pravidlo, ktoré nastavuje margin alebo padding
   zoznamu či odseku, pred sebou `.vpk`. */

.vpk .vpk-uvod {
  margin: 0 0 18px;
  color: var(--vpk-m);
  font-size: 14px;
  line-height: 1.55;
}

.vpk .vpk-postup { list-style: none; margin: 0; padding: 0; counter-reset: krok; }

.vpk .vpk-kr {
  border: 1px solid var(--vpk-b);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 18px;
  background: #fff;
}
.vpk .vpk-kr:last-child { margin-bottom: 0; }

/* Vypnutý krok nestmavujeme celý – zákazník musí vedieť prečítať, čo si
   práve vypol. Stlmí sa len text a číslo kroku. */
.vpk-kr--vyp { background: #fcfcfb; border-style: dashed; }
.vpk-kr--vyp .vpk-kr-c { background: var(--vpk-m); }
.vpk-kr--vyp .vpk-kr-t { opacity: .7; }
.vpk-kr--vyp .vpk-kr-hl h4 { color: var(--vpk-m); }

.vpk-kr-hl {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-start;
}
.vpk .vpk-kr-hl h4 { margin: 0; font-size: 16.5px; font-weight: 700; flex: 0 1 auto; }

.vpk-kr-c {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vpk-g); color: #fff; font-size: 13px; font-weight: 700;
  flex: 0 0 auto;
}

/* prepínač voliteľného kroku – ako štítok pri názve, nie osamotený
   text pri pravom okraji */
.vpk-prep--kr {
  margin: 0; font-size: 12px; color: var(--vpk-m);
  padding: 4px 10px 4px 8px; border: 1px solid var(--vpk-b);
  border-radius: 999px; background: #fff; white-space: nowrap;
}

.vpk .vpk-kr-t {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--vpk-m);
}

/* ── výber produktu ku kroku ──
   Karty sú rovnaké ako v sprievodcovi. Mriežka je auto-fill, nie
   auto-fit: pri jedinej možnosti sa karta neroztiahne cez celú šírku,
   zostane v stĺpci ako ostatné. */
.vpk-kr-vyber { margin-top: 18px; }

.vpk .vpk-karty--plan {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  margin: 0;
}

/* Karta, ktorú má zákazník v pláne. Zelený rám a štítok – ostatné sú
   neutrálne, aby bolo na prvý pohľad jasné, s čím plán počíta. */
.vpk-karta--vplane {
  border-color: var(--vpk-g);
  box-shadow: 0 2px 14px rgba(79, 154, 40, .14);
}
.vpk-naj--plan { background: var(--vpk-g); }

.vpk-vrstvy--pevne .vpk-vrstvy-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1.5px solid var(--vpk-b); border-radius: 99px;
  color: var(--vpk-t); font-size: 15px;
}

.vpk-vybrat { background: #fff; border-color: var(--vpk-g); color: var(--vpk-gd); }
.vpk-vybrat:hover:not(:disabled) { background: var(--vpk-g); color: #fff; }

.vpk .vpk-zdroj--sch { margin-top: 8px; }

.vpk .vpk-kr-vyber .vpk-viac { margin-top: 12px; }

/* ── náradie ku kroku ──
   Oddelíme ho linkou, inak dlaždice nadväzovali priamo na karty
   produktov a krok pôsobil ako jedna hustá kopa. */
.vpk-kr-naradie {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--vpk-b);
}
.vpk-kr-naradie .vpk-nar-kus { padding: 10px; }
.vpk-kr-naradie .vpk-nar-f { height: 64px; margin-bottom: 8px; }
.vpk-kr-naradie .vpk-nar-f img { max-height: 64px; }
.vpk-kr-naradie .vpk-nar-n { font-size: 12.5px; }
.vpk-kr-nn {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--vpk-m); margin-bottom: 10px;
}

.vpk-plan-suma {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px; border-radius: 12px;
  background: var(--vpk-gl); border: 1px solid var(--vpk-g);
}
.vpk-plan-suma > span { color: var(--vpk-m); font-size: 14px; }
.vpk-plan-suma > strong { font-size: 22px; margin-right: auto; }

/* harmonogram */
.vpk .vpk-dni { list-style: none; margin: 0; padding: 0; }
.vpk .vpk-den {
  border-left: 3px solid var(--vpk-g);
  padding: 2px 0 16px 16px;
  margin: 0 0 0 6px;
}
.vpk .vpk-den:last-child { padding-bottom: 0; }
.vpk-den-hl { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vpk-den-hl strong { font-size: 15px; }
.vpk-den-hl span { font-size: 12px; color: var(--vpk-m); }
.vpk .vpk-den ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--vpk-m); }
.vpk .vpk-den li { margin: 3px 0; }

/* počasie */
.vpk-pocasie-vstup {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px;
}
.vpk-pocasie-vstup .vpk-pole { flex: 1 1 220px; }
.vpk-tl {
  padding: 10px 16px; border: 0; border-radius: 10px;
  background: var(--vpk-g); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer;
}
.vpk-tl:hover { background: var(--vpk-gd, #3b7a1c); }

.vpk-dni-mriezka {
  display: grid; gap: 8px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.vpk-dp {
  border: 1px solid var(--vpk-b); border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 3px; background: #fff;
}
.vpk-dp--ok { border-color: var(--vpk-g); background: var(--vpk-gl); }
.vpk-dp-d { font-size: 12.5px; font-weight: 700; }
.vpk-dp-t { font-size: 13px; }
.vpk-dp-s { font-size: 11.5px; color: var(--vpk-m); }

@media (max-width: 767px) {
  .vpk .vpk-kr { padding: 16px 14px; margin-bottom: 14px; }
  .vpk-kr-vyber { margin-top: 14px; }
  .vpk .vpk-karty--plan { grid-template-columns: 1fr; }
  .vpk-kr-naradie { margin-top: 16px; padding-top: 14px; }
  .vpk-kr-kup > strong, .vpk-plan-suma > strong { margin-right: 0; }
  .vpk-dni-mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpk-pocasie-vstup .vpk-tl { width: 100%; }
}