/* vitalplanet.sk | spojené CSS úpravy | Developed by NETMALL s.r.o.
   Vzniklo spojením: produkt.css, kosik-objednavka.css, hodnotenia.css,
   vplanet.min.css, mobilne-menu.css, zoznam-produktov.css,
   uvod-dlazdice.css, kosik-nahlad.css, priznaky.css, mnozstvo.css,
   suvisiace-dlazdice.css, kosik-odstranenie.css, hero-dlazdice.css
   a faq.css, mnozstvo-cena.css, naskladnene.css.
   Poradie je rovnaké ako pri samostatných súboroch, takže sa nič
   neprebíja inak.
   menu.css sa nepridáva – cielil na kategórie, ktoré už neexistujú.
   Pásik pod hlavičkou a vlajky si štýly vkladajú samy (vp-trust.js,
   vp-jazyky.js), preto tu nie sú.
   Zostavené: 2026-10-31 | v19 – pribudlo faq.css (akordeón s častými
   otázkami pod detailom produktu), mnozstvo-cena.css (cena pri
   množstevnej zľave) a naskladnene.css (pás nad hlavičkou). */


/* ═══════════════ produkt.css ═══════════════ */
/* vitalplanet.sk | detail produktu – vizuálne vylepšenie | Developed by NETMALL s.r.o. */
:root{--vp-g:#4f9a28;--vp-gd:#3b7a1c;--vp-gl:#f3f9ee;--vp-b:#e4eadc;--vp-t:#2b2b2b;--vp-m:#6b6b6b;--vp-r:#d64545}

/* ---------- 1. hlavička produktu ---------- */
body .p-detail h1,body .p-detail .p-detail-inner-header-mobile .h1{font-size:30px;line-height:1.2;font-weight:700;margin:0 0 8px;color:var(--vp-t)}
body .p-detail .ratings-and-brand{align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--vp-b);margin-bottom:14px}
body .p-detail .stars .star-on:before,body .p-detail .stars .star-half:before{color:#f5a623 !important}
body .p-detail .stars .star-off:before{color:#d3d3d3 !important}
body .p-detail .brand-wrapper a{display:inline-block;padding:3px 12px;border:1px solid var(--vp-b);border-radius:20px;background:#fff;font-size:13px;font-weight:700;color:var(--vp-gd);text-decoration:none}
body .p-detail .brand-wrapper a:hover{background:var(--vp-gl);border-color:var(--vp-g)}
body .p-detail .p-short-description{font-size:15px;line-height:1.6;color:#4a4a4a;margin-bottom:18px}

/* ---------- 2. galéria ---------- */
body .p-detail .p-image{background:#fff;border:0px solid var(--vp-b);border-radius:16px;padding:14px;overflow:hidden}
body .p-detail .p-main-image img{transition:transform .35s ease}
body .p-detail .p-main-image:hover img{transform:scale(1.04)}
body .p-detail .p-thumbnails-wrapper{margin-top:12px}
body .p-detail .p-thumbnails img{border:1px solid var(--vp-b);border-radius:10px;transition:border-color .2s,transform .2s;background:#fff}
body .p-detail .p-thumbnails a:hover img,body .p-detail .p-thumbnails .active img{border-color:var(--vp-g);transform:translateY(-2px)}
/* štítky rieši sekcia priznaky.css spoločne pre celý web */

/* ---------- 3. dostupnosť a doručenie ---------- */
body .p-detail table.detail-parameters{width:100%;background:var(--vp-gl);border:1px solid var(--vp-b);border-radius:12px;padding:6px 14px;margin-bottom:18px;border-collapse:separate;border-spacing:0 2px}
body .p-detail table.detail-parameters td{padding:7px 0;border:0;font-size:14.5px;vertical-align:middle}
body .p-detail table.detail-parameters th{padding:7px 0;border:0}
body .p-detail table.detail-parameters th:after{display:none}
body .p-detail table.detail-parameters .row-header-label{background:transparent !important;color:var(--vp-m)}
body .p-detail table.detail-parameters td:last-child{text-align:right;font-weight:700;color:var(--vp-t)}
body .p-detail .availability-label{font-weight:700}
body .p-detail .availability-amount,body .p-detail .delivery-time{font-weight:700}

/* ---------- 4. množstevná zľava ---------- */
body .p-detail .quantity-discounts{background:#fff !important;border:1px solid var(--vp-b);border-radius:16px;padding:18px !important;margin-bottom:18px;box-shadow:0 3px 14px rgba(40,70,20,.07)}
body .p-detail .quantity-discounts__headline{position:relative;font-size:17px;font-weight:700;color:var(--vp-t);padding-left:30px;margin-bottom:14px}
body .p-detail .quantity-discounts__headline:before{content:"%";position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--vp-g);color:#fff;font-size:12px;font-weight:700}
body .p-detail .quantity-discounts__table{border:1px solid var(--vp-b);border-radius:12px;overflow:hidden}
body .p-detail .quantity-discounts__item{align-items:center;background:#fff !important;border:0 !important;border-top:1px solid var(--vp-b) !important;padding:13px 16px !important;font-size:15px;transition:background .15s}
body .p-detail .quantity-discounts__table>.quantity-discounts__item:first-child{border-top:0 !important}
body .p-detail .quantity-discounts__item:hover{background:#fafcf8 !important}
body .p-detail .quantity-discounts__item--highlighted{background:var(--vp-gl) !important;outline:0 !important;box-shadow:inset 3px 0 0 var(--vp-g)}
body .p-detail .quantity-discounts__title{font-weight:600;color:var(--vp-t)}
body .p-detail .quantity-discounts__item--highlighted .quantity-discounts__title{font-weight:700}
body .p-detail .quantity-discounts__price-wrapper{color:var(--vp-m);font-size:13.5px;white-space:nowrap}
body .p-detail .quantity-discounts__price{font-size:16px;font-weight:700;color:var(--vp-gd)}
body .p-detail .quantity-discounts__item--highlighted .quantity-discounts__price{color:var(--vp-t)}
body .p-detail .quantity-discounts__save{margin-top:12px;padding:10px 14px !important;border-radius:10px;background:var(--vp-gl);text-align:center;font-size:14px;color:var(--vp-t)}
body .p-detail .quantity-discounts__saved-amount{color:var(--vp-gd);font-size:16px}
body .p-detail .quantity-discounts__save.vp-save--on{background:#e8f4de;font-weight:700}

/* ---------- 5. vernostné body a košík ---------- */
body .p-detail .mehub-bonus-product-detail-container .card{background:#fffaf0 !important;border:1px solid #f3e2c0;border-radius:12px;padding:11px 14px !important;margin-bottom:14px;font-size:14px;box-shadow:none}
body .p-detail .p-to-cart-block{align-items:center;gap:14px;flex-wrap:wrap;padding:16px;border:1px solid var(--vp-b);border-radius:16px;background:#fff;box-shadow:0 3px 14px rgba(40,70,20,.07)}
body .p-detail .price-final,body .p-detail .price-final-holder{font-size:34px;line-height:1.1;font-weight:800;color:var(--vp-t)}
body .p-detail .price-additional{display:block;font-size:13px;color:var(--vp-m)}
body .p-detail .p-final-price-wrapper .price-standard{font-size:15px;color:#8a8a8a;text-decoration:line-through}
body .p-detail .p-final-price-wrapper .price-save{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:12px;background:#e04947;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;vertical-align:1px}
body .p-detail .add-to-cart .quantity{border:1px solid var(--vp-b);border-radius:24px;overflow:hidden;background:#fff}
body .p-detail .add-to-cart input.amount{border:0;font-weight:700;font-size:16px;background:transparent}
body .p-detail .add-to-cart .increase,body .p-detail .add-to-cart .decrease{background:transparent;border:0;color:var(--vp-gd);font-weight:700}
body .p-detail .add-to-cart .increase:hover,body .p-detail .add-to-cart .decrease:hover{background:var(--vp-gl)}
body .p-detail .add-to-cart-button{border-radius:26px !important;padding:13px 30px !important;font-size:16px;font-weight:700;letter-spacing:.2px;box-shadow:0 4px 14px rgba(79,154,40,.32);transition:transform .15s,box-shadow .15s,background-color .15s}
body .p-detail .add-to-cart-button:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(79,154,40,.42)}

/* ---------- 6. pás výhod ---------- */
/* doplnok má margin-top:-30px a prekrýval kartu s cenou aj widget hodnotení */
body .p-detail .dklabBanplusIkony,body .dklabBanplusIkony{background:var(--vp-gl);border:1px solid var(--vp-b);border-radius:16px;padding:22px 10px !important;margin:26px 0 !important}

/* ---------- 7. záložky a popis ---------- */
body .shp-tabs-row a{font-weight:700;color:var(--vp-m);padding-bottom:10px;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
body .shp-tabs-row a:hover{color:var(--vp-gd)}
body .shp-tabs-row .active a,body .shp-tabs-row a.active{color:var(--vp-t);border-bottom-color:var(--vp-g);text-decoration:none}

/* ---------- 7b. popis produktu (záložka Popis) ---------- */
/* typografia textu – rovnaký charakter ako krátky popis v hornej sekcii */
body .p-detail-tabs-wrapper .basic-description{max-width:860px;font-size:16px;line-height:1.78;color:#3f3f3f;letter-spacing:.1px}
body .p-detail-tabs-wrapper .basic-description p{margin:0 0 15px}
body .p-detail-tabs-wrapper .basic-description p:last-child{margin-bottom:0}
body .p-detail-tabs-wrapper .basic-description strong,body .p-detail-tabs-wrapper .basic-description b{color:var(--vp-t);font-weight:700}
body .p-detail-tabs-wrapper .basic-description em{color:#555}
/* úvodný odstavec ako perex */
body .p-detail-tabs-wrapper .basic-description > p:first-of-type{font-size:17px;line-height:1.7;color:#333}
/* nadpisy */
body .p-detail-tabs-wrapper .basic-description h2,body .p-detail-tabs-wrapper .basic-description h3,body .p-detail-tabs-wrapper .basic-description h4{position:relative;margin:30px 0 10px;padding-left:14px;font-size:19px;line-height:1.3;font-weight:800;color:var(--vp-t)}
body .p-detail-tabs-wrapper .basic-description h2:before,body .p-detail-tabs-wrapper .basic-description h3:before,body .p-detail-tabs-wrapper .basic-description h4:before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:4px;border-radius:3px;background:var(--vp-g)}
/* oddeľovač medzi blokmi textu – jemná zelenkavá linka namiesto šedej */
body .p-detail-tabs-wrapper .basic-description hr{height:0;border:0;border-top:1px solid #dde5d4;margin:30px 0 18px;opacity:1}
/* prvý <strong> hneď za oddeľovačom funguje v texte ako podnadpis
   (ostáva v riadku, aby emotikon 🔹 / ✅ pred ním neostal sám na riadku) */
body .p-detail-tabs-wrapper .basic-description hr + p{margin-bottom:12px}
body .p-detail-tabs-wrapper .basic-description hr + p > strong:first-child{font-size:17.5px;line-height:1.4;font-weight:800;color:var(--vp-t)}
/* odrážky */
body .p-detail-tabs-wrapper .basic-description ul{margin:0 0 18px;padding-left:2px;list-style:none}
body .p-detail-tabs-wrapper .basic-description ul li{position:relative;margin:0 0 8px;padding-left:19px}
/* top je v px zámerne: pri font-size:0 by sa em-jednotka vyrátala na nulu a bodka by vyskočila nahor */
body .p-detail-tabs-wrapper .basic-description ul li:before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--vp-g);box-shadow:0 0 0 3px rgba(79,154,40,.16);font-size:inherit;line-height:0}
body .p-detail-tabs-wrapper .basic-description ol{margin:0 0 18px;padding-left:22px}
body .p-detail-tabs-wrapper .basic-description ol li{margin:0 0 8px}
/* odkazy a tabuľky vnútri popisu */
body .p-detail-tabs-wrapper .basic-description a{color:var(--vp-gd);text-decoration:underline;text-underline-offset:2px}
body .p-detail-tabs-wrapper .basic-description a:hover{color:var(--vp-g)}
body .p-detail-tabs-wrapper .basic-description img{max-width:100%;height:auto;border-radius:12px}
body .p-detail-tabs-wrapper .basic-description blockquote{margin:22px 0;padding:14px 18px;border:0;border-left:4px solid var(--vp-g);border-radius:0 12px 12px 0;background:var(--vp-gl);font-size:15.5px;color:#3b3b3b}
/* tabuľka parametrov ako karta */
body .p-detail-tabs-wrapper .detail-parameters{border:1px solid var(--vp-b);border-radius:14px;overflow:hidden;border-collapse:separate;border-spacing:0}
body .p-detail-tabs-wrapper .detail-parameters th,body .p-detail-tabs-wrapper .detail-parameters td{padding:11px 14px;font-size:14.5px;border-bottom:1px solid #eef1ea}
body .p-detail-tabs-wrapper .detail-parameters tr:last-child th,body .p-detail-tabs-wrapper .detail-parameters tr:last-child td{border-bottom:0}
body .p-detail-tabs-wrapper .detail-parameters tr:nth-child(odd) td,body .p-detail-tabs-wrapper .detail-parameters tr:nth-child(odd) th{background:#fafcf8}
body .p-detail-tabs-wrapper .detail-parameters th{font-weight:700;color:var(--vp-t)}

/* ---------- 8. mobil ---------- */
@media (max-width:767px){
body .p-detail h1,body .p-detail .p-detail-inner-header-mobile .h1{font-size:23px}
body .p-detail .quantity-discounts{padding:14px !important}
body .p-detail .quantity-discounts__item{padding:12px 13px !important;font-size:14.5px}
}
/* --- VOLITEĽNÉ: lepkavá lišta s cenou a košíkom na mobile.
   Hranica 468 px: nad ňou beží doplnok Pobo (fix-header.js) s vlastnou hornou lištou.
   z-index 999: vyskakovacie okno košíka (colorbox) má 1002, takže lišta ho už neprekrýva.

   v2 – všetko do jedného riadku: cena | počet kusov | tlačidlo.
   Predtým sa tlačidlo zalamovalo pod ne a lišta mala 139 px, čo je na
   844 px vysokom displeji veľa. Teraz má okolo 64 px.

   Ak lištu nechcete, zmažte celý tento @media blok. --- */
@media (max-width:468px){
body .p-detail .p-to-cart-block{
  position:fixed;left:0;right:0;bottom:0;z-index:999;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:8px;
  margin:0;padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  border:0;border-top:1px solid var(--vp-b);border-radius:0;
  background:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.14);
}
/* cena */
body .p-detail .p-to-cart-block .p-final-price-wrapper{flex:0 0 auto;margin:0}
body .p-detail .p-to-cart-block .price-final,
body .p-detail .p-to-cart-block .price-final-holder{font-size:20px;line-height:1.1;white-space:nowrap}
body .p-detail .p-to-cart-block .price-additional,
body .p-detail .p-to-cart-block .price-standard,
body .p-detail .p-to-cart-block .price-save{display:none}
/* počet kusov – užšia pilulka než na stránke */
body .p-detail .p-to-cart-block .add-to-cart{flex:0 0 auto;margin:0}
body .p-detail .p-to-cart-block .quantity{height:42px;padding:0 30px!important;border-radius:999px}
body .p-detail .p-to-cart-block .quantity label{height:40px;line-height:40px}
body .p-detail .p-to-cart-block .quantity input.amount{width:34px;height:40px;font-size:15px}
body .p-detail .p-to-cart-block .quantity .decrease,
body .p-detail .p-to-cart-block .quantity .increase{top:0;width:30px;height:40px}
body .p-detail .p-to-cart-block .quantity .decrease{left:0;right:auto}
body .p-detail .p-to-cart-block .quantity .increase{left:auto;right:0}
/* tlačidlo zaberie zvyšok riadku */
body .p-detail .p-to-cart-block .add-to-cart-button{
  flex:1 1 auto;min-width:0;height:44px;padding:0 12px!important;
  font-size:15px;white-space:nowrap;box-shadow:none;
}
body.type-detail{padding-bottom:74px}
/* Plávajúci odznak Heureky by lištu prekryl. Dôveryhodnosť obchodu
   ukazuje pásik pod hlavičkou (vp-trust.js), ktorý je na každej stránke. */
body.type-detail #vp-hb{display:none !important}
}
/* --- koniec: lepkavá lišta --- */
@media (prefers-reduced-motion:reduce){
body .p-detail .p-main-image:hover img,body .p-detail .add-to-cart-button:hover{transform:none}
body .p-detail .p-main-image img,body .p-detail .add-to-cart-button{transition:none}
}

/* ---------- 9. hodnotenia produktu nad záložkami (k recenzie-produktu.js) ---------- */
body .vp-prw{position:relative;clear:both;margin:28px 0 24px;padding:22px 24px;background:#fff;border:1px solid var(--vp-b);border-radius:18px;box-shadow:0 3px 14px rgba(40,70,20,.07)}
body .vp-prw__head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px}
body .vp-prw__title{margin:0;font-size:21px;font-weight:700;color:var(--vp-t)}
body .vp-prw__avg{margin:0}
body .vp-prw__avg .rate-average-inner{display:inline-flex;align-items:center;gap:10px}
body .vp-prw__avg .rate-average{font-size:24px;font-weight:800;line-height:1;color:var(--vp-gd)}
body .vp-prw__avg .rate-star-wrap{display:inline-flex;align-items:center;gap:8px}
body .vp-prw__avg .stars-label{font-size:13.5px;color:var(--vp-m)}
body .vp-prw .stars .star-on:before,body .vp-prw .stars .star-half:before{color:#f5a623 !important}
/* dlaždice vedľa seba */
body .vp-prw__list{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;overflow:visible}
body .vp-prw__list .vote-wrap{display:flex !important;flex-direction:column;width:auto !important;max-width:none !important;float:none !important;margin:0 !important;background:#fff !important;border:1px solid var(--vp-b) !important;border-radius:14px;padding:16px !important;box-shadow:0 2px 8px rgba(40,70,20,.05)}
body .vp-prw__list .vote-header{padding-right:30px}
body .vp-prw__list .vote-name{font-weight:700;font-size:14.5px;color:var(--vp-t)}
body .vp-prw__list .vote-time{font-size:12.5px;color:var(--vp-m)}
body .vp-prw__list .vote-content{margin-top:9px;font-size:14px;line-height:1.55;color:#444}
body .vp-prw--collapsed .vp-prw__list .vote-wrap:nth-child(n+9){display:none !important}
body .vp-prw__foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
body .vp-prw__more{border-radius:22px;padding:9px 20px;font-weight:700}
body .vp-prw__form{display:flex !important;flex-wrap:wrap;align-items:center;gap:10px;flex:1 1 100%;min-width:0;margin:0}
body .vp-prw__form .rate-wrap{display:none !important}
body .vp-prw__form .add-comment{margin:0}
body .vp-prw__form .btn{border-radius:22px;padding:9px 20px;font-weight:700}
body .vp-prw__form .vote-form{flex:1 1 100%;margin-top:6px}
body.vp-prw-on .rate-wrapper-in-description{display:none}
body.vp-prw-on .p-detail-tabs li:has(>a[href="#ratingTab"]),body.vp-prw-on .hidden-links li:has(>a[href="#ratingTab"]){display:none !important}
/* pri jednom alebo dvoch hodnoteniach nenechávame v mriežke prázdne miesta */
@media (min-width:992px){
body .vp-prw__list:not(:has(.vote-wrap:nth-child(2))){grid-template-columns:minmax(0,1fr)}
body .vp-prw__list:has(.vote-wrap:nth-child(2)):not(:has(.vote-wrap:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
body .vp-prw__list:not(:has(.vote-wrap:nth-child(2))) .vote-wrap{max-width:640px !important}
}
@media (max-width:1199px){
body .vp-prw__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:991px){
body .vp-prw__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575px){
body .vp-prw{padding:18px 14px;border-radius:14px;margin:22px 0 20px}
body .vp-prw__title{font-size:18px}
body .vp-prw__list{grid-template-columns:minmax(0,1fr);gap:10px}
body .vp-prw__foot .btn{width:100%;text-align:center}
}

/* ---------- 10. možnosti doručenia ako dlaždice (k doprava-dlazdice.js) ---------- */
body .vp-ship{margin:-8px 0 18px}
body .vp-ship__title{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--vp-m)}
body .vp-ship__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body .vp-ship__item{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:12px 14px;border:1px solid var(--vp-b);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
body .vp-ship__item:hover{border-color:var(--vp-g);box-shadow:0 3px 10px rgba(40,70,20,.08)}
body .vp-ship__top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
body .vp-ship__logo{max-height:24px;max-width:110px;width:auto;height:auto;object-fit:contain}
body .vp-ship__left{display:inline-flex;align-items:center;gap:8px;min-width:0}
body .vp-ship__dot{width:8px;height:8px;border-radius:50%;background:var(--vp-g)}
body .vp-ship__price{font-size:16px;font-weight:800;color:var(--vp-gd);white-space:nowrap}
body .vp-ship__name{font-size:13.5px;line-height:1.4;color:#444}
body .vp-ship__q{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;border-radius:50%;background:#e9eee3;color:var(--vp-gd);font-size:11px;font-weight:700;cursor:help}
body .vp-ship__q:hover,body .vp-ship__q:focus{background:var(--vp-g);color:#fff;outline:none}
@media (max-width:575px){
body .vp-ship__list{grid-template-columns:minmax(0,1fr);gap:8px}
body .vp-ship__item{padding:11px 12px}
}

/* ---------- 11. súvisiaci tovar a podobné produkty ---------- */
/* nadpisy sekcií */
body .p-detail .products-header,body .p-detail .products-related-header,body .p-detail .products-alternative-header{position:relative;margin:56px 0 26px;padding:0;font-size:24px;line-height:1.25;font-weight:800;color:var(--vp-t);text-align:center;text-transform:none;border:0}
body .p-detail .products-header:after{content:"";display:block;width:56px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--vp-g),#8cc63f)}
/* držiak slideru */
/* priestor po bokoch, aby šípky slideru neprekrývali názvy produktov */
body .p-detail .products-wrapper.product-slider-holder{position:relative;padding:0 46px}
body .p-detail .products-additional .products-block{align-items:stretch}
body .p-detail .products-additional .product{padding:6px 7px}
/* karta produktu */
body .p-detail .products-additional .product .p{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--vp-b);border-radius:16px;padding:10px 11px 14px;box-shadow:0 1px 2px rgba(40,70,20,.04);transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
body .p-detail .products-additional .product:hover .p{border-color:#cfe3bf;box-shadow:0 10px 24px rgba(40,70,20,.13);transform:translateY(-3px)}
/* obrázok */
body .p-detail .products-additional .product .image{position:relative;display:block;overflow:hidden;border-radius:12px;background:#fff}
body .p-detail .products-additional .product .image img{transition:transform .35s ease}
body .p-detail .products-additional .product:hover .image img{transform:scale(1.05)}
/* príznaky (akcia, novinka, tip) */
body .p-detail .products-additional .product .flags{z-index:2}
/* názov */
body .p-detail .products-additional .product .p-in{display:flex;flex-direction:column;flex:1 1 auto;padding-top:10px}
body .p-detail .products-additional .product .p-in-in{flex:1 1 auto}
body .p-detail .products-additional .product .name{display:block;padding:0 2px;font-size:14.5px;line-height:1.38;font-weight:600;color:var(--vp-t);text-decoration:none;transition:color .15s}
body .p-detail .products-additional .product:hover .name{color:var(--vp-gd)}
/* hviezdičky */
body .p-detail .products-additional .product .ratings-wrapper{margin:7px 0 0;padding:0 2px}
body .p-detail .products-additional .product .ratings-wrapper .stars-wrapper,body .p-detail .products-additional .product .ratings-wrapper .star{color:#f5a623}
/* cena */
body .p-detail .products-additional .product .p-bottom{margin-top:10px;padding:10px 2px 0;border-top:1px dashed #e8ece2}
body .p-detail .products-additional .product .prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin:0}
body .p-detail .products-additional .product .price-final,body .p-detail .products-additional .product .price-final strong{font-size:19px;line-height:1.2;font-weight:800;color:var(--vp-t)}
body .p-detail .products-additional .product .price-standard{font-size:13px;color:#8a8a8a;text-decoration:line-through}
body .p-detail .products-additional .product .availability,body .p-detail .products-additional .product .availability span{font-size:12.5px}
body .p-detail .products-additional .product .ratings-wrapper .availability{margin-top:4px}
/* krátky popis v dlaždici – orezaný na 3 riadky, aby sa veta nekončila v polovici */
body .p-detail .products-additional .product .p-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 0;font-size:13px;line-height:1.5;color:#7a7a7a}
/* prepínacie tlačidlá slideru */
body .p-detail .product-slider-holder .product-slider-navigation{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #d7e2cc;border-radius:50%;background:#fff;color:var(--vp-gd);box-shadow:0 6px 18px rgba(40,70,20,.16);opacity:1;transition:background-color .18s,color .18s,box-shadow .18s}
body .p-detail .product-slider-holder .product-slider-navigation.navigation-prev{left:0}
body .p-detail .product-slider-holder .product-slider-navigation.navigation-next{right:0}
body .p-detail .product-slider-holder .product-slider-navigation:hover{background:var(--vp-g);border-color:var(--vp-g);color:#fff;box-shadow:0 6px 18px rgba(79,154,40,.34)}
body .p-detail .product-slider-holder .product-slider-navigation:before{font-size:15px}
/* bodky / pásiky pod sliderom */
body .p-detail .product-slider-pagination{margin-top:16px;gap:6px}
body .p-detail .product-slider-pagination button{height:4px;border:0;border-radius:3px;background:#dfe6d8;opacity:1;transition:background-color .2s,width .2s}
body .p-detail .product-slider-pagination button:hover{background:#b9d2a4}
body .p-detail .product-slider-pagination button.active,body .p-detail .product-slider-pagination button[class*="active"]{background:var(--vp-g)}
@media (max-width:767px){
body .p-detail .products-header,body .p-detail .products-related-header,body .p-detail .products-alternative-header{margin:40px 0 20px;font-size:21px}
body .p-detail .products-additional .product .p{border-radius:14px;padding:9px 9px 12px}
body .p-detail .products-wrapper.product-slider-holder{padding:0 34px}
body .p-detail .product-slider-holder .product-slider-navigation{width:32px;height:32px}
body .p-detail .products-additional .product .p-desc{-webkit-line-clamp:2;font-size:12.5px}
body .p-detail-tabs-wrapper .basic-description{font-size:15.5px;line-height:1.72}
body .p-detail-tabs-wrapper .basic-description > p:first-of-type{font-size:16px}
body .p-detail-tabs-wrapper .basic-description h2,body .p-detail-tabs-wrapper .basic-description h3,body .p-detail-tabs-wrapper .basic-description h4{font-size:17.5px;margin:24px 0 8px}
body .p-detail-tabs-wrapper .basic-description ul li:before{top:9px}
}

/* ---------- 12. hlavička produktu na mobile (drobčeková cesta + názov + hodnotenie) ---------- */
@media (max-width:767px){
/* drobčeková cesta na jeden riadok; posledná položka (názov produktu) sa skryje,
   pretože je hneď pod ňou ako H1 – štruktúrované dáta (meta itemprop) zostávajú v HTML */
body .breadcrumbs{margin:0 0 8px;font-size:12.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .breadcrumbs > span:last-child{display:none}
body .breadcrumbs > span:nth-last-child(2) .navigation-bullet{display:none}
body .breadcrumbs .navigation-bullet{margin:0 5px;color:#b9c3ad}
/* názov produktu */
body .p-detail .p-detail-inner-header-mobile .h1{font-size:22px;line-height:1.22;margin:0 0 8px}
/* hviezdy, počet hodnotení, odkaz a značka v jednom bloku namiesto troch riadkov */
body .p-detail .p-detail-inner-header-mobile .ratings-and-brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 4px;padding:0 0 10px;border-bottom:0px solid var(--vp-b)}
body .p-detail .p-detail-inner-header-mobile .stars-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:0;border:0}
body .p-detail .p-detail-inner-header-mobile .stars-label{margin:0;font-size:13px;color:var(--vp-m)}
body .p-detail .p-detail-inner-header-mobile .stars-link{margin:0;font-size:13px}
body .p-detail .p-detail-inner-header-mobile .brand-wrapper{display:flex;align-items:center;gap:6px;margin:0;font-size:13px}
}

/* ═══════════════ kosik-objednavka.css ═══════════════ */
/* vitalplanet.sk | košík, objednávka a okno „Pridané do košíka“ | Developed by NETMALL s.r.o. */
:root{--vp-g:#4f9a28;--vp-gd:#3b7a1c;--vp-gl:#f3f9ee;--vp-b:#e4eadc;--vp-t:#2b2b2b;--vp-m:#6b6b6b}

/* ---------- 1. kroky objednávky (košík → doprava → údaje) ---------- */
body .cart-header .step a,body .cart-header .step strong{color:var(--vp-m);font-weight:600}
body .cart-header .step a:before,body .cart-header .step strong:before{transition:background-color .2s,box-shadow .2s}
body .cart-header .step:not(.active):not(.completed) a:before,body .cart-header .step:not(.active):not(.completed) strong:before{background:#eceee9;color:#8d938a}
body .cart-header .step.completed a,body .cart-header .step.completed strong{color:var(--vp-gd)}
body .cart-header .step.active a,body .cart-header .step.active strong{color:var(--vp-t);font-weight:800}
body .cart-header .step.active a:before,body .cart-header .step.active strong:before{box-shadow:0 0 0 5px rgba(79,154,40,.16)}

/* ---------- 2. košík – tabuľka s tovarom ---------- */
body .cart-inner .cart-table{width:100%;background:#fff;border:1px solid var(--vp-b);border-radius:16px;border-collapse:separate;border-spacing:0;overflow:hidden}
body .cart-table .cart-table-header td{padding:14px 14px 12px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--vp-m);border-bottom:1px solid var(--vp-b)}
body .cart-table tr.removeable td{padding:16px 14px;border-bottom:1px solid #eef1ea;transition:background-color .15s}
body .cart-table tr.removeable:last-child td{border-bottom:0}
body .cart-table tr.removeable:hover td{background:#fafcf8}
body .cart-table .cart-p-image img{border:1px solid var(--vp-b);border-radius:10px;background:#fff}
body .cart-table .p-name .main-link{font-size:15px;line-height:1.35;font-weight:700;color:var(--vp-t);text-decoration:none}
body .cart-table .p-name .main-link:hover{color:var(--vp-gd)}
body .cart-table .p-name .show-related{font-size:13px;color:var(--vp-gd)}
body .cart-table .availability-label{font-size:13px}
/* počet kusov ako pilulka – rovnako ako na detaile produktu */
body .cart-table .quantity{border:1px solid var(--vp-b);border-radius:24px;overflow:hidden;background:#fff}
body .cart-table .quantity input.amount{border:0;background:transparent;font-weight:700;font-size:15px}
body .cart-table .quantity .increase,body .cart-table .quantity .decrease{background:transparent;border:0;color:var(--vp-gd);font-weight:700}
body .cart-table .quantity .increase:hover,body .cart-table .quantity .decrease:hover{background:var(--vp-gl)}
body .cart-table .p-price .price-final{font-size:15px;font-weight:600;color:#3f3f3f}
body .cart-table .p-price .unit-value{font-size:13px;color:var(--vp-m)}
body .cart-table .p-total .price-final{font-size:17px;font-weight:800;color:var(--vp-t)}
body .cart-table .remove-item{color:#a3a3a3;transition:color .15s}
body .cart-table .remove-item:hover{color:#d64545}

/* ---------- 3. bonusový program (košík aj okno po pridaní) ---------- */
/* doplnok vykresľoval kartu s čiernym pozadím, zosúlaďujeme ju so zvyškom webu */
body .mehub-bonus-cart-container h4,body .mehub-bonus-advanced-cart-container h4{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--vp-t)}
body .mehub-bonus-cart-container .card,body .mehub-bonus-advanced-cart-container .card{background:var(--vp-gl)!important;color:#3b6b1c!important;border:1px solid #d9e8cc!important;border-radius:14px!important;box-shadow:none!important}
body .mehub-bonus-cart-container .card-title,body .mehub-bonus-advanced-cart-container .card-title{padding-bottom:0;font-size:14px;color:#3b6b1c!important}
body .mehub-bonus-cart-container .card-text,body .mehub-bonus-advanced-cart-container .card-text{font-size:13.5px;color:#3b6b1c!important}
body .mehub-bonus-cart-container .card b,body .mehub-bonus-advanced-cart-container .card b{color:var(--vp-gd)!important;font-weight:800}

body .mehub-bonus-cart-container{margin:18px 0 0}

/* ---------- 4. košík – kupón, dátum doručenia, súhrn ---------- */
body .coupon-input .toggle-coupon-input-button{color:var(--vp-gd);font-weight:600}
body .delivery-time{font-size:14px;color:var(--vp-m)}
body .delivery-time strong{color:var(--vp-t)}
body .row.summary{margin-top:18px}
body .row.summary .price-wrapper{padding:16px 20px;background:var(--vp-gl);border:1px solid #d9e8cc;border-radius:16px}
body .row.summary .price-label.price-primary{font-size:13px;color:var(--vp-m)}
body .row.summary .price.price-primary{font-size:30px;line-height:1.1;font-weight:800;color:var(--vp-t)}
body .row.summary .price-label.price-secondary,body .row.summary .price.price-secondary{font-size:13px;color:var(--vp-m)}

/* ---------- 5. tlačidlá v procese objednávky ---------- */
body .next-step .btn-conversion,body .next-step .next-step-forward{border-radius:26px!important;padding:14px 30px!important;font-size:16px;font-weight:700;letter-spacing:.2px;box-shadow:0 4px 14px rgba(79,154,40,.32);transition:transform .15s,box-shadow .15s}
body .next-step .btn-conversion:hover,body .next-step .next-step-forward:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(79,154,40,.42)}
body .next-step .next-step-back{border-radius:26px!important;padding:13px 24px!important;background:#fff!important;border:1px solid var(--vp-b)!important;color:var(--vp-t)!important;font-weight:600;transition:background-color .15s,border-color .15s,color .15s}
body .next-step .next-step-back:hover{background:var(--vp-gl)!important;border-color:#cfe3bf!important;color:var(--vp-gd)!important}

/* ---------- 6. objednávka krok 1 – sekcie dopravy a platby ---------- */
body .order-delivery-payment-form .co-box{margin-bottom:18px;padding:18px 20px;background:#fff;border:0px solid var(--vp-b);border-radius:16px}
body .order-delivery-payment-form .co-box > h2.order-icon{margin:0 0 14px;font-size:19px;line-height:1.3;font-weight:800;color:var(--vp-t)}
/* jedna možnosť dopravy / platby ako dlaždica */
body .shipping-billing-table .radio-wrapper{margin:0 0 10px;background:#fff;border:1px solid var(--vp-b);border-radius:14px;transition:border-color .18s,background-color .18s,box-shadow .18s}
body .shipping-billing-table .radio-wrapper:hover{border-color:#cfe3bf;box-shadow:0 4px 14px rgba(40,70,20,.08)}
body .shipping-billing-table .radio-wrapper.active{border-color:var(--vp-g);background:var(--vp-gl)}
body .shipping-billing-table .radio-wrapper > label{align-items:center;gap:14px;padding:14px 18px 14px 48px!important}
body .shipping-billing-table .radio-wrapper > label .payment-info{flex:1 1 auto;min-width:0}
/* prepínač */
body .shipping-billing-table .radio-wrapper > label:before{left:18px;top:19px;width:20px;height:20px;border:2px solid #c6cfbc;background:#fff}
body .shipping-billing-table .radio-wrapper.active > label:before{border-color:var(--vp-g)}
body .shipping-billing-table .radio-wrapper > label:after{left:23px;top:24px;width:10px;height:10px;border:0;background:var(--vp-g);opacity:0;transition:opacity .15s}
body .shipping-billing-table .radio-wrapper.active > label:after,body .shipping-billing-table .radio-wrapper input:checked + label:after{opacity:1}
/* texty */
body .shipping-billing-table .shipping-billing-name{font-size:15px;line-height:1.35;font-weight:700;color:var(--vp-t)}
body .shipping-billing-table .shipp-info-dm{display:block;margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--vp-m)}
body .shipping-billing-table .payment-logo img{max-height:26px;width:auto}
body .shipping-billing-table .payment-shipping-price{margin-left:auto;font-size:16px;font-weight:800;color:var(--vp-t);white-space:nowrap}
/* odkaz „Zvoľte odberné miesto“ ako tlačidlo */
body .shipping-billing-table .sublabel.new-gen-choose{margin-top:9px;width:auto!important;max-width:none!important;border:0!important;padding:0!important}
body .shipping-billing-table .sublabel.new-gen-choose a{display:inline-block;width:auto;white-space:nowrap;padding:7px 15px;background:#fff;border:1px solid var(--vp-g);border-radius:20px;color:var(--vp-gd);font-size:13px;font-weight:700;text-decoration:none;transition:background-color .15s,color .15s}
body .shipping-billing-table .sublabel.new-gen-choose a:hover{background:var(--vp-g);color:#fff}

/* ---------- 7. objednávka krok 1 – zhrnutie objednávky ---------- */
body .order-summary .order-summary-inner{padding:18px 20px;background:#fff;border:1px solid var(--vp-b)!important;border-radius:16px;box-shadow:0 2px 12px rgba(40,70,20,.07)}
body .order-summary .order-summary-inner > h2.h4{margin:0 0 12px;padding:0 0 12px;font-size:18px;font-weight:800;color:var(--vp-t);border-bottom:1px solid var(--vp-b)}
body .order-summary .order-summary-item,body .order-summary .order-recapitulation{border-top-color:#eef1ea!important}
body .order-summary .cart-item-name a{font-size:14px;line-height:1.4;font-weight:600;color:var(--vp-t);text-decoration:none}
body .order-summary .cart-item-name a:hover{color:var(--vp-gd)}
body .order-summary .cart-item-amount,body .order-summary .cart-item-price{font-size:14px;color:#3f3f3f}
body .order-summary .order-summary-item.helper{font-size:15px}
body .order-summary .recapitulation-single{font-size:14px;color:#3f3f3f}
body .order-summary .order-summary-item.price .price-wrapper{margin-top:4px;padding:14px 16px;background:var(--vp-gl);border:1px solid #d9e8cc;border-radius:14px}
body .order-summary .order-summary-item.price .price-label.price-primary{font-size:13px;color:var(--vp-m)}
body .order-summary .order-summary-item.price .price.price-primary{font-size:28px;line-height:1.1;font-weight:800;color:var(--vp-t)}
body .order-summary .order-summary-item.price .price-label.price-secondary,body .order-summary .order-summary-item.price .price.price-secondary{font-size:13px;color:var(--vp-m)}

/* ---------- 8. okno „Pridané do košíka“ ---------- */
body .advanced-order{padding:4px 0 8px}
body .advanced-order .h1{position:relative;margin:0 0 10px;padding-top:54px;font-size:25px;line-height:1.25;font-weight:800;color:var(--vp-t);text-align:center}
body .advanced-order .h1:before{content:"";position:absolute;top:0;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--vp-g) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/22px 22px no-repeat;box-shadow:0 6px 18px rgba(79,154,40,.3)}
body .advanced-order > .h2{margin:0 0 14px;font-size:16.5px;line-height:1.4;font-weight:600;color:#3f3f3f;text-align:center}
body .advanced-order .advancedOrder__buttons{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:22px 0 4px}
body .advanced-order .advancedOrder__buttons .btn{border-radius:26px!important;padding:13px 28px!important;font-size:15px;font-weight:700;letter-spacing:.2px;transition:transform .15s,box-shadow .15s,background-color .15s,color .15s,border-color .15s}
body .advanced-order .advancedOrder__buttons .next-step-back{background:#fff!important;border:1px solid var(--vp-b)!important;color:var(--vp-t)!important}
body .advanced-order .advancedOrder__buttons .next-step-back:hover{background:var(--vp-gl)!important;border-color:#cfe3bf!important;color:var(--vp-gd)!important}
body .advanced-order .advancedOrder__buttons .btn-conversion{box-shadow:0 4px 14px rgba(79,154,40,.32)}
body .advanced-order .advancedOrder__buttons .btn-conversion:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(79,154,40,.42)}
body .advanced-order .advanced-order-suggestion{position:relative;margin:34px 0 22px;padding-top:26px;font-size:21px;line-height:1.3;font-weight:800;color:var(--vp-t);text-align:center;border-top:1px solid var(--vp-b)}
body .advanced-order .advanced-order-suggestion:after{content:"";display:block;width:50px;height:3px;margin:11px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--vp-g),#8cc63f)}
/* dlaždice odporúčaných produktov – rovnaké ako pri súvisiacom tovare */
body .advanced-order .products-additional .product{padding:6px 7px}
body .advanced-order .products-additional .product .p{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--vp-b);border-radius:16px;padding:10px 11px 14px;transition:box-shadow .22s,transform .22s,border-color .22s}
body .advanced-order .products-additional .product:hover .p{border-color:#cfe3bf;box-shadow:0 10px 24px rgba(40,70,20,.13);transform:translateY(-3px)}
body .advanced-order .products-additional .product .image{display:block;overflow:hidden;border-radius:12px}
body .advanced-order .products-additional .product .image img{transition:transform .35s ease}
body .advanced-order .products-additional .product:hover .image img{transform:scale(1.05)}
body .advanced-order .products-additional .product .name{font-size:14px;line-height:1.35;font-weight:600;color:var(--vp-t)}
body .advanced-order .products-additional .product .p-bottom{margin-top:8px;padding-top:9px;border-top:1px dashed #e8ece2}
body .advanced-order .products-additional .product .price-final,body .advanced-order .products-additional .product .price-final strong{font-size:18px;font-weight:800;color:var(--vp-t)}
body .advanced-order .products-additional .product .price-standard{font-size:13px;color:#8a8a8a;text-decoration:line-through}

/* ---------- 10. objednávka krok 2 – údaje o zákazníkovi ---------- */
/* výzva na prihlásenie */
body .sending-order .helper{margin:0 0 18px;padding:14px 18px;background:var(--vp-gl);border:1px solid #d9e8cc;border-radius:14px;font-size:14px;line-height:1.55;color:#3b6b1c}
body .sending-order .helper a{color:var(--vp-gd);font-weight:700}
/* sekcie formulára ako karty */
body .sending-order .cart-content > .co-box,body .sending-order .cart-content > fieldset.co-box{margin:0 0 18px;padding:18px 20px;background:#fff;border:1px solid var(--vp-b);border-radius:16px}
body .sending-order .co-box > h2,body .sending-order .co-box h2.header-billing{margin:0 0 14px;font-size:19px;line-height:1.3;font-weight:800;color:var(--vp-t)}
body .sending-order .co-billing-address > fieldset.box{margin:0;padding:0;border:0;background:transparent}
body .sending-order .form-legend{margin:0 0 10px;font-size:12.5px;color:var(--vp-m)}
/* vstupné polia */
body .sending-order .form-control{border:1px solid var(--vp-b);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
body .sending-order .form-control:focus{border-color:var(--vp-g);box-shadow:0 0 0 3px rgba(79,154,40,.14);outline:0}
body .sending-order .smart-label-wrapper label{color:var(--vp-m)}
/* bonusový program – vonkajšia karta zelená, vnútorná (modrá od doplnku) sa zruší */
body .sending-order .mehub-bonus-checkout-container{background:var(--vp-gl)!important;border-color:#d9e8cc!important}
body .sending-order .mehub-bonus-checkout-container .card{background:transparent!important;border:0!important;box-shadow:none!important}
body .sending-order .mehub-bonus-checkout-container,body .sending-order .mehub-bonus-checkout-container .card,body .sending-order .mehub-bonus-checkout-container .card-title,body .sending-order .mehub-bonus-checkout-container .card-text,body .sending-order .mehub-bonus-checkout-container b{color:#3b6b1c!important}
body .sending-order .mehub-bonus-checkout-container a{color:var(--vp-gd)!important;font-weight:700}
/* nadpis doplnku má ikonu z neexistujúceho znaku – zobrazoval sa ako prázdny štvorček */
body .sending-order .mehub-bonus-checkout-container h4:before{display:none}
/* zaškrtávacie polia (súhlasy, newsletter, iná adresa) */
body .cart-content .consents label:before,body .sending-order label.whole-width:before{border:1px solid #c6cfbc!important;border-radius:5px!important}
body .cart-content .consents input:checked + label:before,body .sending-order input:checked + label.whole-width:before{border-color:var(--vp-g)!important}
body .cart-content .consents input:checked + label:after,body .sending-order input:checked + label.whole-width:after{background:var(--vp-g)!important;border-radius:3px}
body .cart-content .consents label,body .sending-order label.whole-width{font-size:13.5px;line-height:1.5;color:#3f3f3f}
body .cart-content .consents a,body .sending-order label.whole-width a{color:var(--vp-gd)}
/* tlačidlo Objednať s dvojriadkovým popisom */
body .next-step .next-step-finish{border-radius:26px!important;padding:14px 30px!important;font-size:16px;font-weight:700;box-shadow:0 4px 14px rgba(79,154,40,.32);transition:transform .15s,box-shadow .15s}
body .next-step .next-step-finish:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(79,154,40,.42)}
body .next-step--step-2 .next-step-finish .order-button-suffix{display:block;font-size:11.5px;font-weight:600;opacity:.9}
/* riadok „Celkom za tovar“ v zhrnutí nemá byť zelený */
body .order-summary .order-summary-item.helper,body .order-summary .order-summary-item.helper strong,body .order-summary .order-summary-item.helper div{color:var(--vp-t)}

/* ---------- 9. mobil ---------- */
@media (max-width:767px){
body .cart-header .step a,body .cart-header .step strong{font-size:12.5px}
body .cart-table tr.removeable{display:grid!important;grid-template-columns:72px minmax(0,1fr) auto;grid-column-gap:12px;align-items:start;padding:14px 12px}
body .cart-table tr.removeable td{width:auto!important;max-width:none!important;min-width:0;flex:none!important;padding:0;border:0}
body .cart-table .cart-p-image{grid-column:1;grid-row:1/span 3}
body .cart-table .cart-p-image img{max-width:72px;height:auto}
body .cart-table .p-name{grid-column:2/span 2;grid-row:1;position:relative;padding-right:34px!important;font-size:14.5px}
body .cart-table .p-name .delete-cart-item{position:absolute;top:-2px;right:0;margin:0}
body .cart-table .p-price{grid-column:2/span 2;grid-row:2;margin-top:2px;text-align:left!important}
body .cart-table .p-quantity{grid-column:2;grid-row:3;margin-top:10px}
body .cart-table .p-total{grid-column:3;grid-row:3;margin-top:10px;align-self:center;text-align:right!important}
body .row.summary .price-wrapper{padding:14px 16px}
body .row.summary .price.price-primary{font-size:26px}
body .next-step{display:flex;flex-direction:column-reverse;gap:10px}
body .next-step .btn-conversion,body .next-step .next-step-forward,body .next-step .next-step-back{width:100%;justify-content:center;text-align:center}
body .order-delivery-payment-form .co-box{padding:14px 14px;border-radius:14px}
body .shipping-billing-table .radio-wrapper > label{flex-wrap:wrap;align-items:flex-start;gap:8px;padding:13px 14px 13px 42px!important}
body .shipping-billing-table .radio-wrapper > label .payment-info{flex:0 0 100%}
body .shipping-billing-table .payment-logo{order:0;flex:0 0 auto;margin-right:auto}
body .shipping-billing-table .payment-shipping-price{order:1;margin-left:auto;align-self:center}
body .shipping-billing-table .radio-wrapper > label:before{left:14px;top:17px}
body .shipping-billing-table .radio-wrapper > label:after{left:19px;top:22px}
body .shipping-billing-table .payment-shipping-price{font-size:15px}
body .order-summary .order-summary-inner{padding:14px 16px;border-radius:14px}
body .sending-order .cart-content > .co-box,body .sending-order .cart-content > fieldset.co-box{padding:14px;border-radius:14px}
body .sending-order .co-box > h2,body .sending-order .co-box h2.header-billing{font-size:17.5px}
body .sending-order .helper{padding:12px 14px;font-size:13.5px}
body .advanced-order .h1{font-size:21px;padding-top:48px}
body .advanced-order .h1:before{width:38px;height:38px;margin-left:-19px;background-size:19px 19px}
body .advanced-order .advancedOrder__buttons{flex-direction:column-reverse;gap:10px}
body .advanced-order .advancedOrder__buttons .btn{width:100%;text-align:center}
body .advanced-order .advanced-order-suggestion{margin:26px 0 18px;font-size:18.5px}
}

/* ═══════════════ hodnotenia.css ═══════════════ */
/* vitalplanet.sk | hodnotenia obchodu – vizuálne vylepšenie | Developed by NETMALL s.r.o. */
:root{--vh-g:#4f9a28;--vh-gd:#3b7a1c;--vh-gl:#f4f9ef;--vh-b:#e4eadc;--vh-t:#2b2b2b;--vh-m:#6b6b6b}
/* === karty hodnotení (úvodná strana aj podstránka) === */
body .shop-eval .vote-wrap,body .ratingsList .vote-wrap{position:relative;background:#fff !important;border:1px solid var(--vh-b) !important;border-radius:14px;padding:18px 18px 16px !important;box-shadow:0 2px 10px rgba(40,70,20,.06);transition:box-shadow .2s,transform .2s}
body .shop-eval .vote-wrap:hover,body .ratingsList .vote-wrap:hover{box-shadow:0 8px 22px rgba(40,70,20,.13);transform:translateY(-2px)}
body .shop-eval .vote-wrap:before,body .ratingsList .vote-wrap:before{content:"\201C";position:absolute;top:2px;right:14px;font:700 64px/1 Georgia,serif;color:#dcebd0;pointer-events:none}
body .shop-eval .vote-name,body .ratingsList .vote-name{font-weight:700;font-size:15px;color:var(--vh-t)}
body .shop-eval .vote-time,body .ratingsList .vote-time{font-size:12.5px;color:var(--vh-m)}
body .shop-eval .vote-content,body .ratingsList .vote-content{margin-top:10px;font-size:14px;line-height:1.55;color:#444}
body .ratingsList .vote-initials{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--vh-gl);border:1px solid var(--vh-b);color:var(--vh-gd);font-weight:700;font-size:15px}
body .ratingsList .admin-response,body .ratingsList .votes-wrap.admin-response{margin-top:12px;padding:10px 12px !important;border:0 !important;border-left:3px solid var(--vh-g) !important;background:var(--vh-gl) !important;border-radius:0 8px 8px 0;font-size:13.5px}
/* === hviezdy === */
body .stars .star-on:before,body .stars .star-half:before{color:#f5a623 !important}
body .stars .star-off:before{color:#d3d3d3 !important}
/* === úvodná strana: blok Hodnotenie obchodu === */
body .container.row:has(>.shop-eval-stars){background:linear-gradient(180deg,var(--vh-gl) 0,#fff 100%);border-radius:18px;padding:34px 20px 30px;margin-top:56px}
body .container.row:has(>.shop-eval-stars)>h2{text-align:center;font-size:26px;font-weight:700;margin:0 0 12px}
body .container.row:has(>.shop-eval-stars)>h2 a{color:var(--vh-t);text-decoration:none}
body .shop-eval-stars{display:flex;justify-content:center;margin:0 0 6px}
body .shop-eval-stars .rate-average-inner{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--vh-b);border-radius:40px;padding:8px 22px;box-shadow:0 2px 10px rgba(40,70,20,.08)}
body .shop-eval-stars .rate-average{font-size:30px;font-weight:800;line-height:1;color:var(--vh-gd)}
body .shop-eval-stars .rate-star-wrap{display:flex;align-items:center;gap:10px}
body .shop-eval-stars .stars-label{font-size:14px;color:var(--vh-m)}
body .container.row>.shop-eval{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
body .container.row>.shop-eval .vote-wrap{width:auto !important;max-width:none !important;margin:0 !important;float:none}
body .container.row:has(>.shop-eval-stars) .btn{border-radius:24px;padding:10px 26px;font-weight:700}
/* === podstránka Hodnotenie obchodu: súhrn === */
body .rate-wrap{align-items:center;gap:28px;background:linear-gradient(135deg,var(--vh-gl),#fff);border:1px solid var(--vh-b);border-radius:18px;padding:24px 28px;margin:0 0 26px}
body .rate-wrap .rate-average-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
body .rate-wrap .rate-average{font-size:64px;line-height:1;font-weight:800;color:var(--vh-gd)}
body .rate-wrap .rate-star-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
body .rate-wrap .stars-label{font-size:14px;color:var(--vh-m)}
body .rate-wrap .rate-bar{background:linear-gradient(90deg,#7bc043,var(--vh-g));border-radius:6px}
body .rate-wrap .rate-count{font-weight:700;color:var(--vh-t)}
body .ratingsList{gap:16px}
@media (max-width:1000px){
body .container.row>.shop-eval{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
body .container.row>.shop-eval{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
body .container.row>.shop-eval .vote-wrap{scroll-snap-align:start}
body .container.row:has(>.shop-eval-stars){padding:24px 14px 22px;margin-top:36px}
body .container.row:has(>.shop-eval-stars)>h2{font-size:22px}
body .container.row>.shop-eval{gap:12px}
body .rate-wrap{padding:18px 16px;gap:16px}
body .rate-wrap .rate-average{font-size:52px}
body .shop-eval .vote-wrap:hover,body .ratingsList .vote-wrap:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
body .shop-eval .vote-wrap,body .ratingsList .vote-wrap{transition:none}
body .shop-eval .vote-wrap:hover,body .ratingsList .vote-wrap:hover{transform:none}
}

/* ═══════════════ vplanet.min.css ═══════════════ */
/* pravidlo pre .name presunuté do zoznam-produktov.css – pevná výška 66px robila dieru pri krátkych názvoch */@media (max-width:768px){#header .navigation-buttons a[data-target="navigation"]:after{background:unset!important;content:'MENU';border:none;color:#000;transform:unset;display:flex;line-height:10px;font-size:10px;align-items:flex-end;justify-content:center;margin-top:-5px}#header .navigation-buttons a[data-target="navigation"]::before{line-height:20px;margin-top:-5px}.subcategories li a .text{-webkit-line-clamp:unset;max-height:unset}.subcategories li a{height:auto}}

/* ═══════════════ mobilne-menu.css ═══════════════ */
/* vitalplanet.sk | mobilné menu – vzhľad kategórií + prvky, ktoré ho prekrývali
   Developed by NETMALL s.r.o. | v5
   Pozn.: tlačidlo Registrácia do menu dopĺňa vp-menu.js – šablóna ho tam nemá. */

:root{
  --vp-g:#4f9a28;      /* základná zelená */
  --vp-gd:#3b7a1c;     /* tmavšia zelená */
  --vp-gl:#f3f9ee;     /* svetlé zelené pozadie */
  --vp-b:#e4eadc;      /* orámovanie */
  --vp-t:#2b2b2b;      /* text */
  --vp-m:#6b6b6b;      /* doplnkový text */
}

/* ══════════════════════════════════════════════════════════════════
   1. Nič nesmie prekrývať otvorené menu, košík ani hľadanie

   Lepiaca lišta s cenou na detaile produktu (.p-to-cart-block) má
   z-index 999, menu 1000 – lenže lišta je vo vlastnom stacking
   kontexte, takže poradie nerozhoduje a treba ju skryť.
   Zvislý pruh Heureky má z-index 2147483647, čiže maximum – s tým
   sa súťažiť nedá vôbec.
   ══════════════════════════════════════════════════════════════════ */
body.navigation-window-visible .p-to-cart-block,
body.cart-window-visible .p-to-cart-block,
body.search-window-visible .p-to-cart-block,
body.navigation-window-visible #vp-hb,
body.cart-window-visible #vp-hb,
body.search-window-visible #vp-hb,
body.navigation-window-visible div[id^="hw-"][id*="right"],
body.cart-window-visible div[id^="hw-"][id*="right"],
body.search-window-visible div[id^="hw-"][id*="right"],
body.navigation-window-visible #heureka-badge-container,
body.cart-window-visible #heureka-badge-container{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media (max-width:767px){

/* ══════════════════════════════════════════════════════════════════
   2. Panel menu
   ══════════════════════════════════════════════════════════════════ */
body #navigation .navigation-in{
  padding:0 0 24px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
body #navigation ul.menu-level-1{
  margin:0;
  padding:0;
  list-style:none;
}
body #navigation ul.menu-level-1 > li{
  position:relative;
  margin:0;
  border-bottom:1px solid var(--vp-b);
}
body #navigation ul.menu-level-1 > li:last-child{border-bottom:0}

/* ─── položka 1. úrovne ─── */
body #navigation ul.menu-level-1 > li > a{
  display:flex;
  align-items:center;
  min-height:52px;
  padding:13px 54px 13px 18px;
  font-size:16px;
  line-height:1.3;
  color:var(--vp-t);
  text-decoration:none;
  transition:background .15s,color .15s;
}
/* zruší podčiarknutie, ktoré šablóna dáva na <b> */
body #navigation ul.menu-level-1 > li > a > b{
  display:block;
  margin:0;
  padding:0;          /* šablóna tu dáva 15px/11px – kvôli tomu boli riadky vysoké */
  font-weight:700;
  font-size:16px;
  text-decoration:none!important;
  border-bottom:0!important;
  letter-spacing:-.1px;
}
/* zelený prúžok vľavo – objaví sa pri dotyku a pri rozbalenej položke */
body #navigation ul.menu-level-1 > li > a:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--vp-g);
  opacity:0;
  transition:opacity .15s;
}
body #navigation ul.menu-level-1 > li > a:hover,
body #navigation ul.menu-level-1 > li > a:active,
body #navigation ul.menu-level-1 > li.exp > a,
body #navigation ul.menu-level-1 > li.expanded > a,
body #navigation ul.menu-level-1 > li > a[aria-expanded="true"]{
  background:var(--vp-gl);
  color:var(--vp-gd);
}
body #navigation ul.menu-level-1 > li > a:hover:before,
body #navigation ul.menu-level-1 > li > a:active:before,
body #navigation ul.menu-level-1 > li.exp > a:before,
body #navigation ul.menu-level-1 > li.expanded > a:before,
body #navigation ul.menu-level-1 > li > a[aria-expanded="true"]:before{opacity:1}

/* ─── šípka na rozbalenie ─── */
body #navigation .submenu-arrow{
  position:absolute;
  right:0;
  top:0;
  width:54px;
  height:52px;
  background:none!important;
  border:0;
}
body #navigation .submenu-arrow:after{
  content:""!important;
  position:absolute;
  right:21px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-6px;
  border:2px solid var(--vp-m);
  border-width:0 2px 2px 0;
  border-radius:1px;
  transform:rotate(45deg);
  transition:transform .2s,border-color .2s;
  background:none;
}
body #navigation li.exp > a .submenu-arrow:after,
body #navigation li.expanded > a .submenu-arrow:after,
body #navigation a[aria-expanded="true"] .submenu-arrow:after{
  margin-top:-2px;
  transform:rotate(-135deg);
  border-color:var(--vp-g);
}

/* ══════════════════════════════════════════════════════════════════
   3. Druhá a tretia úroveň
   Pozor na štruktúru šablóny: podkategória s tretou úrovňou je zabalená
   v <div>, takže odkaz je li > div > a, nie len li > a. Text je v <span>
   alebo <b> – obidva treba zbaviť podčiarknutia.
   ══════════════════════════════════════════════════════════════════ */
body #navigation ul.menu-level-2{
  margin:0;
  padding:4px 0 8px;
  list-style:none;
  background:var(--vp-gl);
  border-top:1px solid var(--vp-b);
}
body #navigation ul.menu-level-2 > li{
  position:relative;
  margin:0;
  border:0;
}
body #navigation ul.menu-level-2 > li > div{padding:0}

/* odkaz podkategórie – obe varianty štruktúry */
body #navigation ul.menu-level-2 > li > a:not(.menu-image),
body #navigation ul.menu-level-2 > li > div > a{
  display:block!important;
  min-height:0;
  padding:10px 18px 10px 34px!important;
  font-size:15px!important;
  line-height:1.35;
  font-weight:600;
  color:var(--vp-t)!important;
  text-decoration:none!important;
}
body #navigation ul.menu-level-2 > li > a b,
body #navigation ul.menu-level-2 > li > a span,
body #navigation ul.menu-level-2 > li > div > a b,
body #navigation ul.menu-level-2 > li > div > a span{
  margin:0;
  padding:0;
  font-weight:600;
  font-size:15px;
  text-decoration:none!important;
  border-bottom:0!important;
}
/* zelená bodka pred podkategóriou */
body #navigation ul.menu-level-2 > li > a:not(.menu-image):before,
body #navigation ul.menu-level-2 > li > div > a:before{
  content:"";
  position:absolute;
  left:19px;
  width:6px;
  height:6px;
  margin-top:7px;
  border-radius:50%;
  background:var(--vp-g);
  opacity:.6;
}
body #navigation ul.menu-level-2 > li > a:active,
body #navigation ul.menu-level-2 > li > div > a:active{color:var(--vp-gd)!important}

/* ─── tretia úroveň ako drobné štítky ───
   V kóde šablóny je za každým odkazom čiarka ako textový uzol. Nedá sa
   zacieliť selektorom, preto má <li> font-size:0 a text sa vracia až na <a>. */
body #navigation ul.menu-level-3{
  display:flex!important;
  flex-wrap:wrap;
  gap:6px;
  margin:0 18px 8px 34px;
  padding:0;
  list-style:none;
  background:none;
  border:0;
}
body #navigation ul.menu-level-3 > li{
  margin:0;
  padding:0;
  border:0;
  font-size:0;        /* skryje čiarky zo šablóny */
  line-height:0;
}
body #navigation ul.menu-level-3 > li > a{
  display:inline-block!important;
  min-height:0;
  padding:5px 10px!important;
  font-size:12.5px!important;
  line-height:1.3;
  font-weight:500;
  color:var(--vp-m)!important;
  text-decoration:none!important;
  background:#fff;
  border:1px solid var(--vp-b);
  border-radius:999px;
}
body #navigation ul.menu-level-3 > li > a:before{display:none}
body #navigation ul.menu-level-3 > li > a:active{
  color:var(--vp-gd)!important;
  border-color:var(--vp-g);
}
/* štvrtá úroveň v menu nepotrebujeme */
body #navigation ul.menu-level-4{display:none!important}
/* obrázky kategórií v menu na mobile nepotrebujeme */
body #navigation .menu-image{display:none!important}

/* ══════════════════════════════════════════════════════════════════
   4. (vlajky sú od v4 v hlavičke vedľa loga – pozri vp-jazyky.js,
       v menu už nie sú, preto tu nie je čo štýlovať)
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   5. Prihlásenie + Registrácia na konci menu, vedľa seba
   Šablóna má v <ul class="navigationActions"> len Prihlásenie,
   položku s Registráciou dopĺňa vp-menu.js.
   ══════════════════════════════════════════════════════════════════ */
body #navigation .navigationActions{
  display:flex;
  gap:10px;
  margin:16px 18px 24px;
  padding:0;
  list-style:none;
  border:0!important;   /* šablóna tu kreslí sivú linku nad tlačidlami */
}
body #navigation .navigationActions > li{
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
body #navigation .navigationActions > li > a{
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:0!important;
  padding:11px 10px!important;
  font-size:15px;
  font-weight:700;
  text-decoration:none!important;
  border-radius:999px;
  white-space:nowrap;
}
body #navigation .navigationActions > li > a span{
  margin:0;
  padding:0;          /* šablóna tu dáva zvislý padding – pilulka bola príliš vysoká */
  line-height:1.3;
  text-decoration:none!important;
}
/* Prihlásenie – obrysové tlačidlo */
body #navigation .navigationActions > li > a[data-testid="signin"]{
  color:var(--vp-gd)!important;
  background:#fff;
  border:2px solid var(--vp-g);
}
body #navigation .navigationActions > li > a[data-testid="signin"]:before{
  content:"";
  width:17px;
  height:17px;
  margin-right:7px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b7a1c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}
/* Registrácia – plné tlačidlo */
body #navigation .navigationActions > li.vp-reg > a{
  color:#fff!important;
  background:var(--vp-g);
  border:2px solid var(--vp-g);
}
body #navigation .navigationActions > li.vp-reg > a:before{
  content:"";
  width:18px;
  height:18px;
  margin-right:7px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='4'/%3E%3Cpath d='M2.5 21c0-4.2 3.3-6.8 7-6.8 1 0 1.9.2 2.7.5'/%3E%3Cpath d='M17.5 14.5v6M14.5 17.5h6'/%3E%3C/svg%3E");
}

} /* koniec @media max-width:767px */

/* ═══════════════ zoznam-produktov.css ═══════════════ */
/* vitalplanet.sk | zoznam produktov – množstvo a tlačidlo do košíka
   Developed by NETMALL s.r.o.

   Šablóna kreslí hranatý rámček s množstvom nalepený na hranaté zelené
   tlačidlo. Zjednocujeme to s detailom produktu: dve pilulky vedľa seba,
   rovnako vysoké, s rovnakým tieňom a správaním pri prejdení myšou.

   Pozor na štruktúru: .quantity má position:relative a tlačidlá − a +
   sú v ňom absolútne (preto padding 0 36px). Necháme to tak, aby
   fungovala obsluha zo šablóny, meníme len rozmery a tvar. */

/* ─── riadok s ovládaním ─── */
body .products-block .p-tools{padding:14px 0 0}
body .products-block form.pr-action{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:8px;
  max-width:290px;
  margin:0 auto;
}

/* ─── počet kusov ─── */
body .products-block .pr-action .quantity{
  flex:0 0 auto;
  height:44px;
  padding:0 36px!important;
  border:1px solid var(--vp-b);
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}
body .products-block .pr-action .quantity label{height:42px;line-height:42px}
body .products-block .pr-action .quantity input.amount{
  width:44px;
  height:42px;
  padding:0;
  border:0;
  background:transparent;
  font-size:15px;
  font-weight:700;
  color:var(--vp-t);
  text-align:center;
  -moz-appearance:textfield;
}
/* šípky číselníka v prehliadači sú v pilulke zbytočné */
body .products-block .pr-action .quantity input.amount::-webkit-outer-spin-button,
body .products-block .pr-action .quantity input.amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body .products-block .pr-action .quantity .decrease,
body .products-block .pr-action .quantity .increase{
  top:0;
  width:36px;
  height:42px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--vp-gd);
  font-size:17px;
  font-weight:700;
  line-height:1;
  transition:background-color .15s,color .15s;
}
body .products-block .pr-action .quantity .decrease{left:0;right:auto}
body .products-block .pr-action .quantity .increase{left:auto;right:0}
body .products-block .pr-action .quantity .decrease:hover,
body .products-block .pr-action .quantity .increase:hover{background:var(--vp-gl)}

/* ─── tlačidlo Do košíka ─── */
/* farbu pozadia nemeníme – zostáva zelená zo šablóny, aby na webe
   nevznikli dva rôzne odtiene zelenej */
body .products-block .pr-action .btn-cart{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:1 1 auto;
  min-width:0;
  height:44px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  font-size:14.5px;
  font-weight:700;
  line-height:1;
  letter-spacing:.2px;
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(79,154,40,.26);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
body .products-block .pr-action .btn-cart span{line-height:1}
body .products-block .pr-action .btn-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(79,154,40,.36);
  filter:brightness(1.03);
}

/* ─── tlačidlo Viac info (varianty a nedostupné kusy) ─── */
/* aby mali dlaždice rovnako vysoký riadok s ovládaním */
body .products-block .p-tools > a.btn,
body .products-block .p-tools .btn-primary{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:44px!important;
  padding:0 20px!important;
  border-radius:999px!important;
  border:2px solid var(--vp-g)!important;
  background:#fff!important;
  color:var(--vp-gd)!important;
  font-size:14.5px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
  transition:background-color .15s,color .15s;
}
body .products-block .p-tools > a.btn:hover,
body .products-block .p-tools .btn-primary:hover{
  background:var(--vp-g)!important;
  color:#fff!important;
}

/* ─── mobil ─── */
/* šablóna tu počet kusov skrýva, tlačidlo teda roztiahneme na celú šírku */
@media (max-width:767px){
body .products-block .p-tools{padding:10px 0 0}
body .products-block form.pr-action{max-width:none}
body .products-block .pr-action .btn-cart{
  flex:1 1 100%;
  width:100%!important;
  max-width:none!important;
  height:42px!important;
  padding:0 10px!important;
  font-size:13.5px;
}
body .products-block .p-tools > a.btn{width:100%!important;max-width:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   Výška dlaždice – názov, hodnotenie a popis

   Doteraz mal názov pevnú výšku 66 px (miesto na tri riadky). Pri
   krátkom názve tak pod ním zostala diera. Namiesto pevnej výšky
   necháme názov rásť prirodzene a celý horný blok prilepíme na spodok
   – voľné miesto sa presunie pod obrázok, kde ho nie je vidieť.
   Dostupnosť, cena aj tlačidlo tým pádom sedia v jednom riadku naprieč
   celým riadkom dlaždíc, aj keď má jeden produkt hviezdičky a druhý nie.

   Podmienka: krátky popis pod tlačidlom má rovnakú výšku vo všetkých
   dlaždiciach – preto je orezaný na tri riadky a tri riadky si aj
   rezervuje. Produkt bez krátkeho popisu by sa z riadku vychýlil.
   ══════════════════════════════════════════════════════════════════ */
body .products-block .p{display:flex;flex-direction:column}
body .products-block .p .p-in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
body .products-block .p .p-in-in{margin-top:auto}

/* názov: 1 až 3 riadky (na mobile až 4), bez pevnej výšky */
body .products-block .p .name{
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical;
  overflow:hidden;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* krátky popis: vždy tri riadky, aby boli dlaždice v riadku rovnaké */
body .products-block .p .p-desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.5;
  min-height:calc(3 * 1.5em);
}

@media (max-width:767px){
body .products-block .p .name{-webkit-line-clamp:4!important}
}


/* ═══════════════ uvod-dlazdice.css ═══════════════ */
/* vitalplanet.sk | úvodná stránka – TOP produkty a Výhodné balenia
   v mriežke namiesto posuvníka | Developed by NETMALL s.r.o. | v3
   v2 – mriežka platí aj na tablete a telefóne, nielen na desktope
   v3 – viac dlaždíc: 12 na počítači, 8 na tablete aj telefóne

   Shoptet dáva oba bloky do posuvníka: pás dlaždíc (.products-block) má
   inline šírku aj transform a každá dlaždica inline width. Preto je tu
   všade !important – bez neho by inline štýl vyhral. Posuvník ďalej beží
   na pozadí, len ho nevidno; šípky a bodky skryjeme, aby nemali čo ovládať.

   Počet stĺpcov a dlaždíc podľa šírky:
     od 1200 px   4 vedľa seba   12 dlaždíc = 3 plné riadky
     768–1199 px  3 vedľa seba    8 dlaždíc = 2 plné riadky + 2
     do 767 px    2 vedľa seba    8 dlaždíc = 4 plné riadky            */

/* ─── spoločný základ ─── */

/* 1. rám posuvníka prestane orezávať.
      Bočné odsadenie bolo miesto pre šípky, už nie je potrebné. */
body .product-slider-holder:has(> .homepage-products-1),
body .product-slider-holder:has(> .homepage-products-2){
  overflow:visible!important;
  padding:0 0 8px!important;
}

/* 2. samotný posuvník sa správa ako obyčajný blok */
body .homepage-products-1,
body .homepage-products-2{
  width:auto!important;
  overflow:visible!important;
  cursor:auto!important;
}

/* 3. pás dlaždíc → mriežka */
body .homepage-products-1 .products-block,
body .homepage-products-2 .products-block{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  row-gap:10px;
  width:auto!important;
  transform:none!important;
  transition:none!important;
}
body .homepage-products-1 .product,
body .homepage-products-2 .product{
  width:auto!important;
  float:none!important;
}

/* 4. počítač: tri riadky po štyroch */
body .homepage-products-1 .product:nth-child(n+13),
body .homepage-products-2 .product:nth-child(n+13){display:none!important}

/* 5. šípky a bodky už nemajú čo ovládať */
body .product-slider-holder:has(> .homepage-products-1) .product-slider-navigation,
body .product-slider-holder:has(> .homepage-products-1) .product-slider-pagination,
body .product-slider-holder:has(> .homepage-products-2) .product-slider-navigation,
body .product-slider-holder:has(> .homepage-products-2) .product-slider-pagination{
  display:none!important;
}

/* ─── tablet a užší desktop: tri vedľa seba, osem dlaždíc ───
   Pri štyroch stĺpcoch by tu dlaždica klesla pod 250 px a názvy
   s cenou by sa začali lámať. */
@media (max-width:1199px){
body .homepage-products-1 .products-block,
body .homepage-products-2 .products-block{grid-template-columns:repeat(3,minmax(0,1fr))}
body .homepage-products-1 .product:nth-child(n+9),
body .homepage-products-2 .product:nth-child(n+9){display:none!important}
}

/* ─── telefón: dve vedľa seba, počet zostáva osem ───
   Dve vedľa seba je rovnako ako vo výpise kategórií, takže dlaždice
   vyzerajú všade rovnako. Medzeru medzi riadkami stačí menšiu –
   dlaždica má vlastné vnútorné odsadenie 10 px. */
@media (max-width:767px){
body .homepage-products-1 .products-block,
body .homepage-products-2 .products-block{
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:4px;
}
}


/* ═══════════════ kosik-nahlad.css ═══════════════ */
/* vitalplanet.sk | náhľad košíka pod ikonou v hlavičke
   Developed by NETMALL s.r.o. | v1

   Šablóna kreslí okno ako tabuľku (.cart-widget-product má display:table
   a jeho časti table-cell), hranaté, bez tieňa, s obrázkom roztiahnutým
   na štvorec (object-fit:fill). Prerábame riadok na flex, aby sa dalo
   riadiť zarovnanie, a zjednocujeme vzhľad so zvyškom webu: zaoblené
   rohy, pilulka pri počte kusov a pilulkové tlačidlo.

   Štruktúra, na ktorú sa tu spoliehame:
     #cart-widget                      – rám, v :before má hrot nahor
       .cart-widget-inner.full         – biele okno
         .cart-widget-products > -inner
           .cart-widget-product        – jeden riadok
             -image > a > img
             -name > strong > a
             -amount > form > span.quantity   (position:relative,
                                               − a + sú v ňom absolútne)
             -price > strong
             -delete > form > div > button.remove-item   (skryté do
                                               prejdenia myšou po riadku)
         .cart-widget-bottom > .cart-widget-button > a.btn.btn-conversion

   Farbu zeleného tlačidla nemeníme – zostáva zo šablóny, aby na webe
   nevznikli dva odtiene zelenej.                                      */

/* ─── okno ─── */
body #cart-widget{
  border:0!important;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(40,70,20,.17), 0 2px 8px rgba(0,0,0,.06);
}
/* hrot musí zostať pod oknom, aby z neho trčal len vrchný trojuholník
   a nie celý kosoštvorec */
body #cart-widget:before{
  border-color:var(--vp-b)!important;
  z-index:0;
}
body #cart-widget .cart-widget-inner{
  position:relative;
  z-index:1;
  border:1px solid var(--vp-b);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

/* ─── zoznam položiek ─── */
/* pri plnom košíku sa zoznam nerozlezie cez celú obrazovku */
body #cart-widget .cart-widget-products{max-height:330px;overflow-y:auto}

body #cart-widget .cart-widget-product{
  display:flex!important;
  align-items:center;
  gap:12px;
  padding:12px 14px!important;
  border-bottom:1px solid #eef2e8!important;
  transition:background-color .15s;
}
body #cart-widget .cart-widget-product:last-child{border-bottom:0!important}
body #cart-widget .cart-widget-product:hover{background:var(--vp-gl)}

/* obrázok – šablóna ho roztiahne na štvorec, vrátime mu pomer strán */
body #cart-widget .cart-widget-product-image{
  display:block!important;
  flex:0 0 auto;
  box-sizing:border-box;
  width:58px!important;
  height:58px;
  padding:4px;
  border:1px solid var(--vp-b);
  border-radius:10px;
  background:#fff;
}
body #cart-widget .cart-widget-product-image a{display:block;height:100%}
body #cart-widget .cart-widget-product-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block;
}

/* názov – najviac dva riadky, zvyšok sa oreže */
body #cart-widget .cart-widget-product-name{
  display:block!important;
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  line-height:1.35;
}
body #cart-widget .cart-widget-product-name strong{font-weight:600}
body #cart-widget .cart-widget-product-name a{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--vp-t);
  text-decoration:none;
}
body #cart-widget .cart-widget-product-name a:hover{color:var(--vp-gd)}

/* ─── počet kusov: rovnaká pilulka ako vo výpise produktov ───
   − a + zostávajú absolútne, meníme len rozmery a tvar, aby ďalej
   fungovala obsluha zo šablóny. */
body #cart-widget .cart-widget-product-amount{
  display:block!important;
  flex:0 0 auto;
  width:auto!important;
}
body #cart-widget .cart-widget-product-amount form{margin:0}
body #cart-widget .cart-widget-product-amount .quantity{
  display:inline-block;
  height:34px;
  padding:0 30px!important;
  border:1px solid var(--vp-b)!important;
  border-radius:999px!important;
  background:#fff;
  overflow:hidden;
}
body #cart-widget .quantity label{height:32px;line-height:32px;margin:0}
body #cart-widget .quantity input.amount{
  width:34px!important;
  height:32px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:14px;
  font-weight:700;
  color:var(--vp-t);
  text-align:center;
  -moz-appearance:textfield;
}
body #cart-widget .quantity input.amount::-webkit-outer-spin-button,
body #cart-widget .quantity input.amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body #cart-widget .quantity .decrease,
body #cart-widget .quantity .increase{
  top:0;
  width:30px;
  height:32px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--vp-gd);
  font-size:15px;
  font-weight:700;
  line-height:1;
  transition:background-color .15s;
}
body #cart-widget .quantity .decrease{left:0;right:auto}
body #cart-widget .quantity .increase{left:auto;right:0}
body #cart-widget .quantity .decrease:hover,
body #cart-widget .quantity .increase:hover{background:var(--vp-gl)}

/* ─── cena ─── */
body #cart-widget .cart-widget-product-price{
  display:block!important;
  flex:0 0 auto;
  width:auto!important;
  min-width:72px;
  text-align:right;
}
body #cart-widget .cart-widget-product-price strong{
  font-size:15px;
  font-weight:800;
  color:var(--vp-gd);
  white-space:nowrap;
}

/* ─── odstránenie položky ───
   Šablóna ho necháva viditeľné až pri prejdení myšou po riadku.
   Necháme to tak, len mu dáme tvar a výraznejšiu reakciu. */
body #cart-widget .cart-widget-product-delete{
  display:block!important;
  flex:0 0 auto;
  width:28px!important;
}
body #cart-widget .cart-widget-product-delete form,
body #cart-widget .cart-widget-product-delete .inline{margin:0;display:block}
body #cart-widget .remove-item{
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  color:#a0a0a0!important;
  transition:background-color .15s,color .15s;
}
body #cart-widget .remove-item:hover{
  background:#fdecec!important;
  color:var(--vp-r)!important;
}

/* ─── spodná lišta s tlačidlom ─── */
body #cart-widget .cart-widget-bottom{
  background:var(--vp-gl);
  border-top:1px solid var(--vp-b);
}
/* šablóna dáva tomuto prvku biele pozadie, ktoré prekrýva
   svetlozelený prúžok pod položkami */
body #cart-widget .cart-widget-button{padding:12px 14px!important;background:transparent}
body #cart-widget .cart-widget-button .btn{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:46px;
  padding:0 18px!important;
  border-radius:999px!important;
  font-size:15px;
  font-weight:700;
  line-height:1;
  box-shadow:0 3px 10px rgba(79,154,40,.25);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
/* ikona vozíka – vložená ako SVG priamo v CSS, nenačítava sa nič zvonku */
body #cart-widget .cart-widget-button .btn:before{
  content:"";
  flex:none;
  width:18px;
  height:18px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2h3.2l2.3 11.4a2 2 0 0 0 2 1.6h8.4a2 2 0 0 0 2-1.6L21 5H5.3'/%3E%3Ccircle cx='9.5' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3C/svg%3E");
}
body #cart-widget .cart-widget-button .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(79,154,40,.33);
  filter:brightness(1.03);
}


/* ═══════════════ priznaky.css ═══════════════ */
/* vitalplanet.sk | štítky na produktoch (AKCIA, TOP PRODUKT, DOPRAVA ZADARMO…)
   Developed by NETMALL s.r.o. | v1

   Šablóna rozdeľuje štítky do dvoch obalov a každý má inú úlohu:

     .flags.flags-default  – vľavo hore, hranaté nápisy (AKCIA, TOP PRODUKT,
                             VIAC ZA MENEJ, príchute). Šablóna im dáva
                             10 px, tučnosť 400 a ostré rohy.
     .flags.flags-extra    – vpravo dole, guľaté odznaky DOPRAVA ZADARMO
                             a zľava. Šablóna im dáva pevný štvorec
                             (100 px na detaile, 66 px vo výpise),
                             border-radius 50 %, zalamovanie slov
                             a hyphens:auto.

   Doteraz sme štítky štýlovali len na detaile produktu selektorom
   `.flags .flag`, ktorý zasiahol obe skupiny naraz. Guľatým odznakom
   tým narástlo písmo a ubralo sa vnútorné miesto, takže sa slovo
   DOPRAVA rozdelilo na DOP-RAVA. Vo výpisoch a na úvodnej stránke sa
   naopak neštýlovalo nič, preto tam štítky vyzerali inak.

   Tu je to zjednotené: hranaté nápisy dostanú všade rovnakú pilulku,
   guľaté odznaky si nechajú tvar od šablóny, len sa zmenšia a zakáže
   sa im delenie slov.                                               */

/* ══════════════════════════════════════════════════════════════════
   1. Hranaté nápisy – rovnaká pilulka na celom webe
   ══════════════════════════════════════════════════════════════════ */
body .flags-default{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
body .flags-default .flag{
  border-radius:12px;
  padding:3px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.2;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
/* na hlavnom obrázku detailu o kúsok väčšie */
body .p-detail .p-image .flags-default .flag{
  font-size:12px;
  padding:4px 12px;
  border-radius:16px;
}

/* ══════════════════════════════════════════════════════════════════
   2. Guľaté odznaky – tvar necháme šablóne, zakážeme delenie slov
   ══════════════════════════════════════════════════════════════════ */
body .flags-extra .flag{
  border-radius:50%!important;
  letter-spacing:normal;
  -webkit-hyphens:none;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* detail produktu: 100 px je na obrázok zbytočne veľa */
body .p-detail .p-image .flags-extra .flag{
  width:78px!important;
  height:78px!important;
  min-width:78px!important;
  min-height:78px!important;
  padding:4px 7px!important;
}
body .p-detail .p-image .flags-extra .flag-freeshipping{font-size:9px!important}
body .p-detail .p-image .flags-extra .flag-discount{font-size:11px!important}
body .p-detail .p-image .flags-extra .flag-discount .price-standard{font-size:9px;opacity:.85}

/* ══════════════════════════════════════════════════════════════════
   3. Telefóny – všetko menšie, nech štítky neprekrývajú produkt
      V dlaždici širokej 175 px zaberal nápis „VIAC ZA MENEJ“ 99 px,
      teda 57 % šírky. Po zmenšení 78 px, teda 45 %.
      V odznaku zľavy necháme len percentá – pôvodnú cenu zákazník
      vidí pri cene pod obrázkom a v malom kolieske sa aj tak
      nedala prečítať.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
body .flags-default{gap:3px}
body .flags-default .flag{font-size:9px;padding:2px 7px;border-radius:9px;letter-spacing:.1px}
/* na hlavnom obrázku detailu je miesta dosť, stačí o stupeň menej */
body .p-detail .p-image .flags-default .flag{font-size:10px;padding:3px 9px;border-radius:11px}

body .p-detail .p-image .flags-extra .flag{
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  min-height:62px!important;
  padding:3px 5px!important;
}
body .p-detail .p-image .flags-extra .flag-freeshipping{font-size:8px!important}
body .p-detail .p-image .flags-extra .flag-discount{font-size:12px!important}
body .p-detail .p-image .flags-extra .flag-discount .price-standard{display:none}

body .products-block .flags-extra .flag{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  padding:3px 4px!important;
  font-size:8px!important;
}
body .products-block .flags-extra .flag-discount{font-size:11px!important}
body .products-block .flags-extra .flag-discount .price-standard{display:none}
}


/* ═══════════════ mnozstvo.css ═══════════════ */
/* vitalplanet.sk | zarovnanie šípok − a + pri počte kusov
   Developed by NETMALL s.r.o. | v1

   Znamienka − a + nie sú text v tlačidle, ale pseudo-prvok :before
   s ikonovým písmom shoptet. Šablóna mu dáva pevné `line-height:50px`,
   lebo pôvodné tlačidlo bolo vysoké 50 px. Kdekoľvek sme pilulku
   zmenšili, ostal riadok 50 px vysoký a znamienko kleslo pod stred:
     – náhľad košíka, tlačidlo 32 px  → o ~9 px nižšie
     – výpis produktov, tlačidlo 42 px → o ~4 px nižšie
   Na detaile produktu je tlačidlo stále 50 px, preto tam sedelo.

   Riešenie: pseudo-prvok prestane určovať výšku (line-height:1,
   rozmery auto) a o zvislé zarovnanie sa postará samo tlačidlo,
   ktoré je flexibilný kontajner so zarovnaním na stred. Funguje to
   pri ľubovoľnej výške tlačidla, teda aj na detaile produktu.      */

body .quantity .decrease,
body .quantity .increase{
  display:flex;
  align-items:center;
  justify-content:center;
}
body .quantity .decrease:before,
body .quantity .increase:before{
  line-height:1;
  width:auto;
  height:auto;
}


/* ═══════════════ suvisiace-dlazdice.css ═══════════════ */
/* vitalplanet.sk | Súvisiaci tovar a Podobné produkty na detaile produktu
   v mriežke namiesto posuvníka | Developed by NETMALL s.r.o. | v1

   Rovnaký princíp ako na úvodnej stránke (uvod-dlazdice.css): Shoptet
   dáva obom sekciám posuvník, pás dlaždíc má inline šírku aj transform
   a dlaždica inline width, preto je tu všade !important. Posuvník beží
   ďalej na pozadí, len ho nevidno; šípky a bodky skryjeme.

   Obe sekcie majú spoločnú triedu .products-additional:
     .products-related-wrapper     > .products-additional.products-related
     .products-alternative-wrapper > .products-additional.products-alternative
   Selektor je obmedzený na .p-detail, takže sa netýka ponuky doplnkov
   v košíku (.advanced-order .products-additional).

   Počet stĺpcov a dlaždíc podľa šírky:
     od 1200 px   4 vedľa seba   8 dlaždíc = 2 plné riadky
     768–1199 px  3 vedľa seba   6 dlaždíc = 2 plné riadky
     do 767 px    2 vedľa seba   4 dlaždice = 2 plné riadky            */

/* ─── spoločný základ ─── */

/* rám posuvníka prestane orezávať; bočných 46 px bolo miesto pre šípky
   (nastavuje ich produkt.css, preto !important) */
body .p-detail .product-slider-holder:has(> .products-additional){
  overflow:visible!important;
  padding:0 0 8px!important;
}
body .p-detail .products-additional{
  width:auto!important;
  overflow:visible!important;
  cursor:auto!important;
}
body .p-detail .products-additional .products-block{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  row-gap:10px;
  width:auto!important;
  transform:none!important;
  transition:none!important;
}
body .p-detail .products-additional .product{
  width:auto!important;
  float:none!important;
}
body .p-detail .products-additional .product:nth-child(n+9){display:none!important}

body .p-detail .product-slider-holder:has(> .products-additional) .product-slider-navigation,
body .p-detail .product-slider-holder:has(> .products-additional) .product-slider-pagination{
  display:none!important;
}

/* ─── tablet a užší desktop ─── */
@media (max-width:1199px){
body .p-detail .products-additional .products-block{grid-template-columns:repeat(3,minmax(0,1fr))}
body .p-detail .products-additional .product:nth-child(n+7){display:none!important}
}

/* ─── telefón: dve vedľa seba, teda štyri dlaždice ───
   Rovnako ako vo výpise kategórií a na úvodnej stránke. */
@media (max-width:767px){
body .p-detail .products-additional .products-block{
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:4px;
}
body .p-detail .products-additional .product:nth-child(n+5){display:none!important}
}


/* ═══════════════ kosik-odstranenie.css ═══════════════ */
/* vitalplanet.sk | krížik na odstránenie položky z košíka | Developed by NETMALL s.r.o.
   Na počítači sa z košíka nedalo odstrániť nič. Šablóna má na riadok dve
   tlačidlá – jedno v stĺpci „Súčet" a jedno pri názve produktu
   (form.delete-cart-item). Na mobile ukazuje to pri názve, na počítači to
   v stĺpci „Súčet", lenže ten stĺpec má len 100 px, takže tlačidlo z neho
   vypadlo za pravý okraj tabuľky a tá ho orezala (overflow:hidden).
   Navyše ho šablóna nad 992 px skrýva priehľadnosťou a ukazuje až pri
   prejdení myšou – čo zákazník neuhádne.
   Riešenie: na počítači ukážeme to isté tlačidlo, aké vidí mobil, a dáme
   ho k pravému okraju stĺpca s názvom, kde je miesto. Je viditeľné stále. */

@media (min-width:992px){
/* miesto pre krížik na pravom okraji bunky s názvom */
.cart-table tr.removeable td.p-name{position:relative;padding-right:46px}
.cart-table tr.removeable .delete-cart-item{display:block;position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0}
/* šablóna ho inak ukáže až pri prejdení myšou */
.cart-table tr.removeable .delete-cart-item .remove-item{opacity:1;width:auto;padding:8px}
.cart-table tr.removeable .delete-cart-item .remove-item::before{font-size:13px}
/* tlačidlo v stĺpci „Súčet" už netreba – aj tak vypadávalo z tabuľky */
.cart-table tr.removeable td.p-total .remove-item{display:none}
}

/* ═══════════════ hero-dlazdice.css ═══════════════ */
/* vitalplanet.sk | hero dlaždice namiesto veľkého slidera | Developed by NETMALL s.r.o.
   Nahrádza bootstrapový banner-karusel (jeden banner cez celú šírku, skrytý
   za šípkou) pásom dlaždíc. Dlaždice stavia vp-hero.js z tých istých bannerov,
   ktoré sú v administrácii – prebratý je obrázok aj Shoptetove triedy
   .extended-banner-title / -text / -link, takže obsah sa naďalej mení len
   v administrácii.

   Text je DOLE: grafiky majú produkty v hornej polovici (overené na
   wellness_produkty_v_pastelovej_kuchyni – detail obrázka vrcholí v pásoch
   3–4 z 10, spodná polovica je čistá doska). Pozor: každý banner musí mať
   grafiku s produktmi hore, inak mu text sadne na produkty.

   Pomer dlaždice je 440 × 620 (na výšku), rovnako ako vzor Sniper ONE.
   Grafiky 1286 × 1223 sa doň orežú po stranách o 33 % šírky – produkty
   pri okrajoch sa stratia. Keď budú grafiky priamo 440 × 620 (alebo
   880 × 1240), neoreže sa nič. Pomer sa mení jedinou hodnotou nižšie. */

.vp-hero { position: relative; margin: 0 0 26px; }

/* Vodorovný pás so scroll-snap. Žiadna knižnica: na telefóne sa ťahá prstom
   natívne, na počítači sú šípky. */
.vp-hero__pas {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 0 6px;
}
.vp-hero__pas::-webkit-scrollbar { display: none; }

body .vp-hero__d {
  position: relative;
  flex: 0 0 calc((100% - 48px) / 4);
  aspect-ratio: 440 / 620;
  scroll-snap-align: start;
  display: block;
  float: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vp-gl);
  text-decoration: none !important;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vp-hero__d:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(43,43,43,.18); }

body .vp-hero__d > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease;
}
.vp-hero__d:hover > img { transform: scale(1.045); }

/* Blok s textom. Shoptet ho má ako absolútny cez celú plochu, my z neho
   robíme pás pri hornom okraji. Vyššia špecifickosť kvôli šablóne. */
body .vp-hero__d .extended-banner-texts {
  position: absolute;
  bottom: 0; right: 0; left: 0; top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 52px 20px 18px;
  color: #fff;
  /* Päť zarážok, nie dve – dvojbodový prechod má v strede viditeľný „šedý
     závoj". Doznieva do 42 % výšky, teda pod produktmi. */
  background: linear-gradient(to top,
    rgba(22,48,10,.95) 0%,
    rgba(22,48,10,.90) 34%,
    rgba(22,48,10,.68) 62%,
    rgba(22,48,10,.26) 83%,
    rgba(22,48,10,0) 100%);
}

/* Šablóna má všetky tri spany ako position:absolute s percentuálnymi
   odsadeniami. V našom flexe by potom nemali výšku a nadpis by pretiekol
   von z dlaždice – preto ich vraciame do bežného toku. */
body .vp-hero__d .extended-banner-title,
body .vp-hero__d .extended-banner-text,
body .vp-hero__d .extended-banner-link {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  height: auto;
}
/* Šablóna im dáva aj padding 40 px – nadpis by mal 105 px namiesto 25. */
body .vp-hero__d .extended-banner-title,
body .vp-hero__d .extended-banner-text {
  padding: 0;
  margin: 0;
}

body .vp-hero__d .extended-banner-title {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

/* Dva riadky rezervujeme aj pri kratšom texte, nech tlačidlá dlaždíc sedia
   v jednej výške a rad nevyzerá rozsypane. */
body .vp-hero__d .extended-banner-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 2.9em;
  color: #dde9d6;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  font-weight: 300;
}

body .vp-hero__d .extended-banner-link {
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--vp-g);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: background .15s;
}
.vp-hero__d:hover .extended-banner-link { background: #5cb02e; }

/* Banner bez vyplnených textov – nech nad obrázkom nevisí prázdny prechod. */
.vp-hero__d--bez .extended-banner-texts { display: none !important; }

.vp-hero__sip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--vp-b);
  background: #fff;
  box-shadow: 0 3px 12px rgba(43,43,43,.16);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 19px/1 inherit;
  color: var(--vp-t);
  z-index: 3;
}
.vp-hero__sip--p { left: -14px; }
.vp-hero__sip--n { right: -14px; }
.vp-hero__sip[disabled] { opacity: .35; cursor: default; }

/* ─── tablet a užší desktop ─── */
@media (max-width: 1359px) {
  body .vp-hero__d { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 991px) {
  body .vp-hero__d { flex-basis: calc((100% - 16px) / 2); }
  body .vp-hero__d .extended-banner-texts { padding: 46px 17px 16px; }
  body .vp-hero__d .extended-banner-title { font-size: 20px; }
}

/* ─── telefón: jedna a kúsok, aby bolo vidieť, že sa dá ťahať ─── */
@media (max-width: 599px) {
  .vp-hero { margin-bottom: 20px; }
  .vp-hero__pas { gap: 12px; }
  body .vp-hero__d { flex-basis: 80%; }
  body .vp-hero__d .extended-banner-texts { padding: 44px 16px 15px; }
  body .vp-hero__d .extended-banner-title { font-size: 20px; }
  .vp-hero__sip { display: none; }
}


/* ═══════════════ faq.css ═══════════════ */
/* vitalplanet.sk | časté otázky pod produktom | Developed by NETMALL s.r.o.
   Natívny <details>/<summary> – bez knižnice, funguje bez JavaScriptu,
   ovládateľný klávesnicou a Chrome v ňom nájde text aj cez Ctrl+F. */

.vp-faq { margin: 0 0 10px; }

/* Nadpis kopíruje „Súvisiaci tovar" a „Podobné produkty" o kus nižšie:
   na stred, 24 px / 800, pod ním zelená linka 56 × 3 px. Tým blok vyzerá
   ako súčasť šablóny, nie ako prilepený cudzí prvok. */
.vp-faq__nadpis {
  position: relative;
  margin: 56px 0 26px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
  text-align: center;
  color: var(--vp-t);
}
.vp-faq__nadpis::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--vp-g);
}

.vp-faq__p {
  border: 1px solid var(--vp-b);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.vp-faq__p[open] {
  border-color: #cfe0c2;
  box-shadow: 0 2px 12px rgba(43,43,43,.06);
}

/* summary má vlastnú šípku, natívny trojuholník preč */
.vp-faq__o {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vp-t);
}
.vp-faq__o::-webkit-details-marker { display: none; }
.vp-faq__o:hover { color: var(--vp-gd); }
.vp-faq__p[open] .vp-faq__o { color: var(--vp-gd); padding-bottom: 9px; }

/* zelené koliesko so šípkou, ktoré sa po otvorení otočí */
.vp-faq__sip {
  flex: 0 0 auto;
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vp-gl);
  position: relative;
  transition: transform .2s ease, background .15s;
}
.vp-faq__sip::before {
  content: "";
  position: absolute;
  top: 9px; left: 9px;
  width: 7px; height: 7px;
  border-right: 2px solid var(--vp-gd);
  border-bottom: 2px solid var(--vp-gd);
  transform: rotate(45deg);
}
.vp-faq__p[open] .vp-faq__sip { transform: rotate(180deg); background: #e4f1da; }

.vp-faq__a {
  padding: 0 18px 17px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vp-m);
}
.vp-faq__a p { margin: 0; }
.vp-faq__a a { color: var(--vp-gd); text-decoration: underline; }

@media (max-width: 575px) {
  .vp-faq__nadpis { margin-top: 40px; font-size: 20px; line-height: 26px; }
  .vp-faq__o { padding: 13px 14px; font-size: 14.5px; gap: 10px; }
  .vp-faq__a { padding: 0 14px 15px; font-size: 14px; }
}

/* ═══════════════ mnozstvo-cena.css ═══════════════ */
/* vitalplanet.sk | cena pri množstevnej zľave | Developed by NETMALL s.r.o.
   Samotné prepísanie ceny robí vp-mnozstvo-cena.js v existujúcich prvkoch
   šablóny, tu je len riadok so súčtom a úsporou, ktorý skript pridáva
   do .p-final-price-wrapper.

   Na telefóne je .p-to-cart-block prilepený spodný pruh (position: fixed
   už od začiatku, nielen po skrolovaní), takže tam riadok nedávame –
   v pruhu má zostať len cena, množstvo a tlačidlo. Na počítači je ten istý
   blok bežnou súčasťou stránky, tam sa riadok zobrazí. */

body .p-final-price-wrapper .vp-mn {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--vp-m);
}
body .p-final-price-wrapper .vp-mn[hidden] { display: none; }

body .p-final-price-wrapper .vp-mn__suma { font-weight: 800; color: var(--vp-t); }

/* Úspora je to, čo má zákazníka potešiť – jediné zelené číslo v riadku. */
body .p-final-price-wrapper .vp-mn__uset { white-space: nowrap; }
body .p-final-price-wrapper .vp-mn__uset-suma { font-weight: 800; color: var(--vp-gd); }

body .p-final-price-wrapper .vp-mn__kus { white-space: nowrap; }

/* V prilepenom pruhu na telefóne riadok nezobrazujeme. */
@media (max-width: 767px) {
  body .p-to-cart-block .vp-mn { display: none; }
}


/* ═══════════════ naskladnene.css ═══════════════ */
/* vitalplanet.sk | pás „Práve sme naskladnili" | Developed by NETMALL s.r.o.
   Pás vkladá vp-naskladnene.js ako prvé dieťa .overall-wrapper.
   Farby sú zo stránky: tmavá zelená #3b7a1c, jantárová #f5a623 z hviezdičiek. */

.vp-nas {
  background: var(--vp-gd, #3b7a1c);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.3;
}

.vp-nas__in {
  display: flex;
  align-items: center;
  justify-content: center;   /* obsah na stred pásu */
  gap: 9px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 16px;
}

.vp-nas__ik {
  flex: 0 0 auto;
  display: inline-flex;
  color: #f5a623;
}

.vp-nas__ik svg { width: 16px; height: 16px; display: block; }

/* Nadpis je teraz vnútri odkazu (každý produkt má vlastný podľa dátumu
   príjemky), preto už nie je flexová položka pásu, ale len tučný text
   pred názvom. */
.vp-nas__popis {
  font-weight: 700;
  white-space: nowrap;
}

.vp-nas__nazov {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Odkazy ležia na sebe v jednej bunke mriežky. Oproti absolútnemu
   polohovaniu to má jednu výhodu, kvôli ktorej je to takto: mriežka si
   šírku aj výšku vezme z najširšieho odkazu, takže sa dá celý pás
   vycentrovať a pri prepnutí produktu sa nehýbe. */
.vp-nas__okno {
  display: grid;
  flex: 0 1 auto;
  min-width: 0;
}

.vp-nas__p {
  grid-area: 1 / 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.vp-nas__p.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* Zafokusovaný odkaz musí byť vidieť, aj keď práve nie je na rade –
   inak by klávesnica skákala po neviditeľných cieľoch. */
.vp-nas__p:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 3px;
}

.vp-nas__p:hover { text-decoration-color: #fff; }

@media (max-width: 767px) {
  .vp-nas { font-size: 12.5px; }
  .vp-nas__in { gap: 7px; padding: 6px 14px; }
  /* Nadpis tu musí zostať – samotný plameň nikomu nepovie, že ide
     o naskladnenie. Keď je tesno, odreže sa radšej názov produktu. */
  .vp-nas__popis { font-size: 12px; }

  /* Hlavička šablóny je na telefóne position:fixed na top:0, takže obyčajný
     blok by sa pod ňu schoval. Pás je preto tiež fixed, nad ňou (z-index
     hlavičky je 56), a hlavičku posúva o svoju výšku nižšie. */
  .vp-nas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 57;
    transition: transform .25s ease;
  }

  .vp-nas.is-skryty { transform: translateY(-100%); }

  /* Hlavička má id="header" a šablóna jej nastavuje top cez selektor
     s identifikátorom, takže aj my musíme použiť #header – inak nás
     prebije a pás by hlavička prekryla. */
  html.vp-nas-je #header {
    top: var(--vp-nas-h, 29px);
    transition: top .25s ease;
  }

  /* Keď sa pás schová, hlavička musí hore dosadnúť, inak by pod ňou
     presvital obsah stránky. */
  html.vp-nas-skryty #header { top: 0; }

  /* Obsah posunieme o výšku pásu, nech nezačína pod ním. Pôvodnú hodnotu
     si skript odmeral ešte pred vložením pásu. */
  html.vp-nas-je .overall-wrapper {
    padding-top: calc(var(--vp-nas-pt, 50px) + var(--vp-nas-h, 29px));
  }

  /* Keď sa na telefóne otvorí menu, prihlásenie, vyhľadávanie alebo košík,
     šablóna prekryje obrazovku panelom. Pás má z-index 57, teda nad
     hlavičkou, takže by nad otvoreným menu zostal visieť zelený prúžok,
     pod ktorý sa panel nedostane. Na ten čas ho preto odsunieme rovnako
     ako pri skrolovaní a hlavička dosadne na vrch.

     Shoptet dáva pri každom takom paneli na <body> triedu končiacu na
     „window-visible" (navigation-window-visible pri menu, k nemu ešte
     user-action-visible). Chytáme ich preto všetky naraz cez [class*=],
     nech ich nemusíme vymenúvať a nezabudneme na tú, čo pribudne. */
  html.vp-nas-je body[class*="window-visible"] .vp-nas {
    transform: translateY(-100%);
  }

  html.vp-nas-je body[class*="window-visible"] #header {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-nas__p { transition: none; }
}

/* ═══════════════ menu-ikony.css ═══════════════ */
/* vitalplanet.sk | ikony v mobilnom menu | Developed by NETMALL s.r.o.
   Ikony vkladá vp-menu-ikony.js do odkazov v .navigation-in .menu-level-1.

   Šablóna používa pre horné menu na počítači aj pre zásuvku na telefóne
   ten istý zoznam, a pri zmene šírky okna ho neprekresľuje. Ikony sú preto
   v DOM vždy a tu sa len zobrazujú alebo skrývajú. Zásuvka s hamburgerom
   sa zapína pod 768 px (overené: tlačidlo menu je vidno pri 390 px,
   pri 768 px už nie), takže ten istý zlom má aj toto pravidlo. */

.vp-mi { display: none; }

@media (max-width: 767px) {
  .vp-mi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 12px;
    color: var(--vp-gd, #3b7a1c);
  }

  .vp-mi svg { width: 25px; height: 25px; display: block; }

  /* Odkaz musí byť flexový, inak by ikona sadla na účiarie textu
     a pri dvojriadkovom názve by ušla hore. Šípku podmenu šablóna
     polohuje absolútne, takže ju flex nerozhodí. */
  html.vp-mi-je .navigation-in .menu-level-1 > li > a {
    display: flex;
    align-items: center;
  }

  /* Názov nech si zoberie zvyšok riadku a dlhý text sa zalomí,
     nie odtlačí ikonu. */
  html.vp-mi-je .navigation-in .menu-level-1 > li > a > b {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ═══════════════ ecomail-popup.css ═══════════════ */
/* vitalplanet.sk | Ecomail popup na telefóne do stredu | Developed by NETMALL s.r.o.

   Prečo: mobilný widget Ecomailu je prilepený na spodok obrazovky
   (.ec-v-form-holder-mobile_popup, z-index 9999) a na detaile produktu
   prekryl celú spodnú lištu s tlačidlom „Do košíka“ (z-index 999) –
   overené, prekryv 390 × 63 px, teda celá lišta. Zákazník nemohol pridať
   do košíka, kým okno nezavrel.

   Riešenie: na telefóne sa okno presunie do stredu obrazovky, rovnako ako
   na počítači. Lišta s košíkom tak zostane vidieť aj prikliknuteľná.

   Pozor na dve veci:
   1. Widget má polohu aj šírku v INLINE štýloch, takže tu musí byť
      všade !important.
   2. Centruje sa cez inset: 0 + margin: auto, nie cez transform. Transform
      by z okna urobil obsahujúci blok pre position: fixed potomkov a tmavé
      pozadie (::before) by sa potom roztiahlo len cez okno, nie cez celú
      obrazovku.
   3. Výšku, rohy aj overflow drží Ecomail pravidlom
      `#ec_form_… #ec-v-from-mobile-popup-holder .ec-v-form-holder`
      (2 identifikátory + trieda, s !important). Naše pravidlá nižšie ich
      preto neprebijú – rieši to až blok „oprava výšky okna“ na konci. */

@media (max-width: 767px) {
  body .ec-v-form-holder.ec-v-form-holder-mobile_popup {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
    height: max-content !important;
    max-height: calc(100vh - 32px) !important;
    overflow: auto !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
  }

  /* Tmavé pozadie za oknom. pointer-events: none zámerne – obchod pod ním
     nikdy neblokujeme, zatvára sa krížikom. */
  body .ec-v-form-holder.ec-v-form-holder-mobile_popup::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
  }

  /* Krížik drží Ecomail na pevnej vzdialenosti zľava, počítanej zo šírky
     390 px. Po zúžení okna by vyliezol von, preto ho viažeme sprava. */
  body .ec-v-form-holder.ec-v-form-holder-mobile_popup .ec-v-form-cls-mobile {
    left: auto !important;
    right: 2px !important;
    top: 2px !important;
  }

  /* Text má v inline štýle padding 0 69px – na užšom okne by sa nadpis
     lámal po slabikách a narážal do krížika. */
  body .ec-v-form-holder.ec-v-form-holder-mobile_popup .ec-v-form-text {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body .ec-v-form-holder.ec-v-form-holder-mobile_popup .ec-v-form-text h3 {
    padding-right: 46px;
  }
}

/* ── vzhľad podľa webu ─────────────────────────────────────────────────────
   Widget si nesie vlastné písma (Rammetto One, Lato, Open Sans) a farby
   v inline štýloch na jednotlivých <span>och, takže všetko nižšie musí mať
   !important. Web používa Exo 2, zelenú #5C9E35 na tlačidlách a oblé tvary
   (vyhľadávanie v hlavičke aj „Do košíka“ majú polomer 26 px).

   Platí pre obe varianty – okno na počítači aj na telefóne. */

body .ec-v-form-holder,
body .ec-v-form-holder * {
  font-family: "Exo 2", sans-serif !important;
}

/* Nadpis a text v tele okna */
body .ec-v-form-holder .ec-v-form-text h2,
body .ec-v-form-holder .ec-v-form-text h3,
body .ec-v-form-holder .ec-v-form-text h4 {
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 6px !important;
}

body .ec-v-form-holder .ec-v-form-text p,
body .ec-v-form-holder .ec-v-form-text h6 {
  line-height: 1.45 !important;
  margin: 0 0 4px !important;
}

/* Pole pre e-mail – oblé ako vyhľadávanie v hlavičke */
body .ec-v-form-holder .ec-v-forms-form-control {
  height: auto !important;
  padding: 12px 18px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-size: 15px !important;
  color: #2b2b2b !important;
  box-shadow: none !important;
}

body .ec-v-form-holder .ec-v-forms-form-control:focus {
  border-color: var(--vp-g, #4f9a28) !important;
  outline: 2px solid rgba(79, 154, 40, .25) !important;
  outline-offset: 0 !important;
}

/* Tlačidlo – rovnaký tvar aj zelená ako „Do košíka“ */
body .ec-v-form-holder .ec-v-form-submit button {
  padding: 13px 22px !important;
  border-radius: 999px !important;
  background-color: #5C9E35 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background-color .2s ease;
}

body .ec-v-form-holder .ec-v-form-submit button:hover {
  background-color: var(--vp-gd, #3b7a1c) !important;
}

@media (max-width: 767px) {
  /* Na telefóne je pozadím okna fotka produktov a text je na nej biely –
     po presune do stredu bol biely text na nej nečitateľný. Fotka preto
     zostáva, ale dostane tmavozelený závoj vo farbe značky a texty sa
     zosvetlia na biele.

     Skúšané a zavrhnuté: fotka pod bielym závojom (pôsobí ako šmuha)
     a fotka ako pás nad formulárom – výšku okna si widget drží na 253 px
     aj proti height: auto !important, takže by sa orezalo tlačidlo. */
  body .ec-v-form-holder.ec-v-form-holder-mobile_popup {
    background-color: #2c5a18 !important;   /* kým sa fotka načíta */
    border-top: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Zelený závoj NAD fotkou, ale POD textom. Je to ::after s gradientom,
     nie prepísané background-image – fotku si tak ďalej riadi kampaň
     v Ecomaile a keď ju vymeníte, nemusíme siahať do CSS. */
  body .ec-v-form-holder.ec-v-form-holder-mobile_popup::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(26, 56, 11, .58) 0%, rgba(26, 56, 11, .88) 100%);
    pointer-events: none;
  }

  /* Formulár musí byť nad závojom; krížik má od Ecomailu z-index 10. */
  body .ec-v-form-holder-mobile_popup form {
    position: relative;
    z-index: 1;
  }

  body .ec-v-form-holder-mobile_popup .ec-v-form-text h3 span,
  body .ec-v-form-holder-mobile_popup .ec-v-form-text h3 strong {
    color: #fff !important;
    font-size: 21px !important;
  }

  /* Zľava zostáva zelená, ale svetlejšia – tmavá zelená by sa na zelenom
     závoji stratila. */
  body .ec-v-form-holder-mobile_popup .ec-v-form-text h3 span[style*="5c9e35"],
  body .ec-v-form-holder-mobile_popup .ec-v-form-text h3 span[style*="5C9E35"] {
    color: #b9e68a !important;
  }

  body .ec-v-form-holder-mobile_popup .ec-v-form-text h6,
  body .ec-v-form-holder-mobile_popup .ec-v-form-text h6 span {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
  }

  /* Krížik je navrhnutý veľký a svetlozelený; na tmavom závoji stačí
     menší a biely, nech nepreráža nadpis. */
  body .ec-v-form-holder-mobile_popup .ec-v-form-cls-mobile {
    transform: scale(.72);
    transform-origin: top right;
    filter: brightness(4);
    opacity: .9;
  }

  body .ec-v-form-holder-mobile_popup .ec-v-form-input,
  body .ec-v-form-holder-mobile_popup .ec-v-form-submit {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Na zelenom závoji by zelené tlačidlo splynulo – je preto biele
     so zeleným textom. Na počítači zostáva zelené. */
  body .ec-v-form-holder-mobile_popup .ec-v-form-submit button {
    width: 100% !important;
    background-color: #fff !important;
    color: #2f6a14 !important;
  }

  body .ec-v-form-holder-mobile_popup .ec-v-form-submit button:hover {
    background-color: #eef5e6 !important;
  }
}

/* ═══════════════ sablona-inline.css ═══════════════ */
/* vitalplanet.sk | CSS prenesené z HTML kódov šablóny | Developed by NETMALL s.r.o.
   1. 11. 2026

   Toto je obsah <style> bloku, ktorý bol v Shoptete v sekcii HTML kódy
   (4,7 kB na KAŽDOM načítaní stránky). Presunutý sem bez zmeny poradia
   pravidiel, aby sa nič nepohlo.

   PREČO AŽ NA KONCI SÚBORU: vitalplanet.css je do stránky vložený až
   v <body>, teda ZA vloženým <style>. Pôvodne tak naše pravidlá vyhrávali
   nad týmito pri rovnakej špecificite. Keby tento blok skončil na začiatku
   súboru, pomer síl by sa otočil. Na konci je stav rovnaký ako doteraz –
   overené porovnaním vypočítaných štýlov 2 500 prvkov na štyroch stránkach
   (úvod, kategória, detail, košík) pri 390 aj 1440 px: 0 rozdielov.

   Poznámky k jednotlivým pravidlám sú nižšie. Nič som nevymazal – len
   označil, čo je mŕtve alebo si protirečí, nech sa dá rozhodnúť osobitne. */

/* Platí na VŠETKY tabuľky na webe. `border-width` bez `border-style`
   nič nevykreslí – rámček teda záleží na šablóne. */
td, th {
    padding: 5px;
    border-width: 1px;
}


.dklabBanplusIkona span.dklabBanplusIkonaPopis.mensi {
    font-size: 80%;
    opacity: 0.8;
    text-transform: none;
}

/* `margin-top` je zbytočný, prvok je skrytý. */
.ellity-link {
    margin-top: 5px;
    display: none;
}

.products-block>div .p .stars-placeholder {
    display: none;
}

.card.blue {
    background-color: #8b6941;
}

.payment-shipping-price {
    flex: 0 0 3.2em;
    text-align: right;
}

.payment-info {
    flex: 1 1 auto;
    max-width: calc(100% - 10px - 0em);
}

.quantity-discounts {
    margin-bottom: 0px;
}

/* Skryť na desktopoch, zobraziť na mobiloch */
@media (min-width: 1025px) {
.diakat-mobile {
display: none;
}
}
@media (max-width: 1024px) {
.diakat-mobile {
display: block;
}
}

@media (max-width: 767px) {
    .navigation-in>ul>li>a>b, .navigation-in>ul>li>a>span {
        padding-bottom: 11px;
        padding-top: 15px;
    }
}

span.sublabel.new-gen-choose {
    width: 160px;
    border-style: solid;
    border-width: 2px;
    border-color: #639e2c;
    padding-left: 10px;
    margin-bottom: 10px;
}


.navigation-in ul li a {
    padding: 24px 14px;
}

.shipp-info-dm {
font-size:12px;
margin:5px 0;
display:block;
}

@media (max-width: 991px) {
    .order-summary-inner {
        padding: 20px;
    }
}

.order-recapitulation, .order-summary-inner, .order-summary-item, .recapitulation-single {
    border-color: #5c9e35;
}

@media (min-width: 321px) and (max-width: 767px) {
.navigation-in ul li a {
    padding: 0px 16px;
}
}


.order-summary-inner {
    border-width: 4px;
}

.gls-parcel-shop-choose {
text-decoration: underline;
}

.zasilkovna-choose {
text-decoration: underline;
}

.category-header {
    display: none;
}

.flag.flag-freeshipping {
    background-color: #8b6943;
}

.container.navigation-wrapper .site-name {
    flex: 0 1 150px;
}

#header .search-input {
 box-shadow: 0 0 4px rgba(0,0,0,.16)
}

.pagination a.pagination-link {
    color: #000;
}

.pagination a {
    background-color: #5c9e35;
    color: #ffffff;
}

.products-block .p .name {
    height: 45px !important;
}

.pagination-top .pagination-link, .pagination-top>strong {
    background-color: #5c9e35;
    color: #fff;
}

@media (min-width: 321px) and (max-width: 767px) {

.products-block .p .name {
    height: 66px !important;
}
}

@media (min-width: 321px) and (max-width: 767px) {
.carousel-control.left {
    display:none
}
}

@media (min-width: 321px) and (max-width: 767px) {
.carousel-control.right {
    display:none
}
}

@media (min-width: 321px) and (max-width: 767px) {
.products-block>div .p .p-bottom .p-desc {

    font-size: 12px;
}
}

.navigation-in ul li a {
    font-size: 17px;
}


#content p {
    margin: 0 0 10px;
}


/* POZOR: farbu prepisuje rovnaké pravidlo nižšie (#000), takže #235db5
   sa nikdy neprejaví. Účinné zostáva len font-weight: bold. */
#checkoutSidebar .toggle-contacts {
    color: #235db5;
    font-weight: bold;
}

/* MŔTVE: výšku názvu určuje `.products-block .p .name` s !important
   (45 px, na telefóne 66 px). Tieto 20 px sa neprejavia. */
.products-block>div .p .name {
        height: 20px;
    }


table.detail-parameters tbody tr th .row-header-label {
    font-weight: bold;
}

table.shipping-options-layout tr.shipping-options-row a {
    font-weight: bold;
    color: #235db5;
}

/* `padding` je zbytočný, prvok je skrytý. */
.social-buttons-wrapper {
    padding: 22px 0;
    display: none;
}

.products-block>div .p .p-bottom>div .p-tools .btn, .products-block>div .p .p-bottom>div .p-tools .btn.btn-cart {
    font-weight: normal;
}

.flag.flag-discount {
    background-color: #e04947;
}

.btn.btn-default, a.btn.btn-default {
    color: #fff;
    font-weight: normal;
}

.btn.btn-cart, .btn.btn-conversion, a.btn.btn-cart, a.btn.btn-conversion {
    font-weight: normal;
}

.cart-table .main-link {
    font-weight: bold;
}


#checkoutSidebar .toggle-contacts {
    color: #000;
}

ol.cart-header li.active a:before, ol.cart-header li.active strong:before, ol.cart-header li.completed a:before, ol.cart-header li.completed strong:before {
    color: #fff;
}



.products-block .p .name {
    font-weight: bold;
}

/* POZOR: za týmto pravidlom bola v pôvodnom kóde osirelá zatváracia
   zátvorka – zrejme zvyšok po zmazanom @media. Prehliadač ju zahadzoval,
   takže pravidlo platí na všetkých šírkach. Tu je odstránená, správanie
   sa nemení. */
    #header .site-name a img {
        max-height: 60px;
    }


#header .header-top {
    align-items: center;
    padding: 0
}

@media (min-width: 768px) {
    #header .header-top {
        padding:15px 15px 0px 0px;
    }
}

.btn.btn-default, a.btn.btn-default {
    color: #fff;
}

.homepage-group-title {
    font-size: 34px;
    margin-bottom: 20px;
    margin-top: 50px;
    text-align: center;
}

.benefitBanner {
    padding-top: 0px;
}

.products-block>div .p .p-bottom>div .p-tools .btn, .products-block>div .p .p-bottom>div .p-tools .btn.btn-cart {
    color: #fff;
}

.products-block>div .p .p-bottom>div .p-tools>.btn:last-child {
    border-right-style: solid;
    color: #085cb2;
}

.btn.btn-cart, .btn.btn-conversion, a.btn.btn-cart, a.btn.btn-conversion {
    color: #ffffff;
}


.products-block>div .p .p-bottom {
    padding: 10px 15px 0;
}

.products-block>div .p .availability {
    padding-top: 10px;
}

/* ═══════════════ ecomail-popup-vyska.css ═══════════════ */
/* vitalplanet.sk | oprava výšky mobilného okna | Developed by NETMALL s.r.o.
   1. 11. 2026

   Klient hlásil posuvník po boku okna a na niektorých displejoch chýbajúci
   nadpis. Príčina: Ecomail dáva oknu

       #ec_form_<id> #ec-v-from-mobile-popup-holder .ec-v-form-holder
       { max-height: 30% !important; }

   teda tridsať percent výšky OBRAZOVKY. Obsah potrebuje ~330 px, takže na
   bežnom telefóne (844 px → 253 px) sa nezmestil a widget doň dal posuvník;
   na nižšom displeji (568 px → 170 px) ostal nad okrajom visieť nadpis.

   To pravidlo má dva identifikátory a triedu, takže ho naše
   `body .ec-v-form-holder.ec-v-form-holder-mobile_popup` neprebije ani
   s !important – špecificita sa počíta skôr než !important aj poradie.
   Rovnaké id uvedené DVAKRÁT dvíha našu špecificitu na dva identifikátory
   a dve triedy, čím Ecomail prebijeme bez toho, aby sme si do CSS vpisovali
   id konkrétnej kampane (to sa pri novej kampani zmení).

   Výška sa nastavuje na `max-content`, nie `auto`: okno je centrované cez
   inset: 0 + margin: auto a pri `auto` by sa roztiahlo cez celú obrazovku. */

@media (max-width: 767px) {
  #ec-v-from-mobile-popup-holder#ec-v-from-mobile-popup-holder
  .ec-v-form-holder.ec-v-form-holder-mobile_popup {
    height: max-content !important;
    max-height: calc(100vh - 32px) !important;
    overflow: auto !important;
    border-radius: 14px !important;
  }

  /* Vnútro má pevné výšky (form min-height 290 px, krok height 290 px),
     preto by pod tlačidlom ostalo prázdne zelené miesto. */
  #ec-v-from-mobile-popup-holder#ec-v-from-mobile-popup-holder
  .ec-v-form-holder.ec-v-form-holder-mobile_popup form {
    min-height: 0 !important;
    overflow: visible !important;
  }

  #ec-v-from-mobile-popup-holder#ec-v-from-mobile-popup-holder
  .ec-v-form-holder.ec-v-form-holder-mobile_popup .ec-v-form-step {
    height: auto !important;
  }
}