/*! Karta dostupnosti a expedície | vitalplanet.sk | v2 | 30. 10. 2026
 *  Developed by NETMALL s.r.o.
 *
 *  Nahrádza Shoptetove riadky „Dostupnosť" a „Môžeme doručiť do" vlastnou
 *  kartou. Riadok s možnosťami doručenia zostáva pôvodný.
 *
 *  Farby sú prevzaté zo stránky, nie vymyslené:
 *    #3b7a1c  zelená webu – odkazy, ceny dopravy, tlačidlá množstva
 *    #2b2b2b  text nadpisov a ceny
 *    #767676  sivá drobčekovej navigácie
 *    #f5a623  jantárová hviezdičiek hodnotenia
 *    #f3f9ee  pozadie pôvodného boxu dostupnosti
 *    #e4eadc  jeho orámovanie
 */

/* ── skrytie toho, čo karta nahrádza ─────────────────────────────────────── */

.vps-dost-prec {
  display: none !important;
}

/* Tabuľke zoberieme vzhľad boxu – kartu kreslíme my, inak by boli dva rámy.
   Šablóna ju farbí pravidlom `body .p-detail table.detail-parameters`, ktoré
   je špecifickejšie, preto rovnako dlhý selektor. Keď sú všetky jej riadky
   skryté, zmrští sa na nulu a nezostane po nej prázdny zelený pásik. */
body .p-detail table.detail-parameters.vps-dost-skryt,
.detail-parameters.vps-dost-skryt {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ── karta ───────────────────────────────────────────────────────────────── */

.vps-dost {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #e4eadc;
  border-radius: 14px;
  background: #f3f9ee;
  color: #2b2b2b;
  line-height: 1.4;
}

.vps-dost__hlava,
.vps-dost__telo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vps-dost__telo {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4eadc;
}

/* ikony v zelenom štvorci */
.vps-dost__ikona {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #e4f1da;
  color: #3b7a1c;
}

.vps-dost__ikona svg {
  width: 23px;
  height: 23px;
  display: block;
}

.vps-dost__nadpis {
  flex: 1 1 auto;
  min-width: 0;
}

.vps-dost__nadpis strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: #2b2b2b;
}

.vps-dost__nadpis > span {
  display: block;
  font-size: 13px;
  color: #767676;
}

/* štítok s dostupnosťou zo Shoptetu */
.vps-dost__stav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: #e4f1da;
  color: #3b7a1c;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

.vps-dost__ikona--fajka {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #2f7a12;
}

.vps-dost__ikona--fajka svg {
  width: 19px;
  height: 19px;
}

/* hlavný text o expedícii */
.vps-dost__text {
  flex: 1 1 auto;
  min-width: 0;
}

.vps-dost .vps-exp-hlavne {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #3b7a1c;
  text-wrap: pretty;         /* nenechá na konci vety osamotené slovo */
}

/* tovar, ktorý u nás na polici nie je – zelená patrí tomu, čo máme hneď */
.vps-dost--dod .vps-exp-hlavne {
  color: #2b2b2b;
}

.vps-dost .vps-exp-detail {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: #767676;
  text-wrap: pretty;
}

/* posledné kusy */
.vps-dost__posledne {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #f5a623;
  color: #2b2b2b;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

.vps-dost__posledne svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* pätička; na mobile do nej skript presunie aj oranžový štítok */
.vps-dost__pata {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  font-size: 13px;
  color: #767676;
}

.vps-dost__pata > span:not([class]) {
  flex: 0 1 auto;
  min-width: 0;
}

.vps-dost__ikona--info {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #767676;
}

.vps-dost__ikona--info svg {
  width: 17px;
  height: 17px;
}

/* ── mobil ───────────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
  .vps-dost {
    padding: 13px 14px;
  }

  .vps-dost__hlava,
  .vps-dost__telo {
    gap: 10px;
  }

  .vps-dost__ikona {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .vps-dost__ikona svg {
    width: 20px;
    height: 20px;
  }

  .vps-dost__nadpis strong { font-size: 14.5px; }
  .vps-dost__nadpis > span { font-size: 12px; }

  .vps-dost__stav {
    padding: 5px 12px 5px 9px;
    font-size: 13.5px;
  }

  .vps-dost__telo {
    flex-wrap: wrap;
  }

  /* Ikona a text majú spolu zabrať presne prvý riadok (ikona 36 + medzera 10),
     aby sa zalomil len oranžový štítok. Bez toho by flex zalomil text
     aj s ikonou a ikona by zostala visieť nad ním. */
  .vps-dost__telo .vps-dost__text {
    flex: 1 1 calc(100% - 46px);
  }

  .vps-dost .vps-exp-hlavne { font-size: 15px; }
  .vps-dost .vps-exp-detail { font-size: 12.5px; }

  /* Štítok je na mobile v pätičke vedľa poznámky. Veľkosti sú v clamp(),
     takže na užšom telefóne sa obe potlačia a zostanú na jednom riadku. */
  .vps-dost__pata {
    gap: 7px;
    font-size: clamp(10px, 2.9vw, 12.5px);
  }

  /* Poznámka sa nesmie zalomiť, inak by štítok spadol pod ňu. Pri 320 px
     vyjde písmo na 10 px, text má ~118 px a štítok ~112 px – zmestia sa. */
  .vps-dost__pata > span:not([class]) {
    white-space: nowrap;
  }

  .vps-dost__pata .vps-dost__posledne {
    margin-left: auto;
    padding: 6px clamp(8px, 2.6vw, 14px);
    font-size: clamp(10.5px, 3.1vw, 13.5px);
    gap: 5px;
    white-space: nowrap;
  }

  .vps-dost__pata .vps-dost__posledne svg {
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);
  }

  .vps-dost__ikona--info svg {
    width: clamp(14px, 4vw, 17px);
    height: clamp(14px, 4vw, 17px);
  }
}

/* veľmi úzke displeje – štítok dostupnosti sa zmestí pod nadpis */
@media (max-width: 400px) {
  .vps-dost__hlava {
    flex-wrap: wrap;
  }

  .vps-dost__stav {
    margin-left: auto;
  }
}

/* ── ikona pred nadpisom „Možnosti doručenia" ────────────────────────────────
   Nadpis patrí dopravným dlaždiciam (.vp-ship__title), nie Shoptetu. Pravidlo
   je tu preto, že tento súbor sa na detaile produktu načítava tak či tak.
   Kruh kopíruje nadpis „Množstevná zľava" – 50 % rádius a zelená #4f9a28 –
   len je menší, lebo tento nadpis má 13 px. */

.vp-ship__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp-ship__title::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4f9a28 center / 12px 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h10v9H3z'/%3E%3Cpath d='M13 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
}