/* Základ z design helmetu (Grafické vylepšení nabídky 2) — platí pro nový markup. */
.vl p { text-align: justify; }
.vl a { color: #16211c; text-decoration: none; }
.vl a:hover { color: #0b7c3d; }
/* Plné knoflíky si na hover drží bílý text — obecné .vl a:hover má vyšší
   specificitu než .h-btn--green:hover ze skinu (David 4. 9., košík). */
.vl a.h-btn--green:hover, .vl a.h-btn--blue:hover { color: #fff; }
/* Zelené CTA vykreslené jako odkaz: `.vl a` výš má vyšší specificitu než třída
   komponenty a přebíjel jejich bílý text tmavým — „Sdílet na WhatsAppu" na
   děkovačce, „Zaplatit" v objednávkách účtu (David 5. 9.: zelené sekundární CTA
   = bílý text, obecně). Nová zelená třída pro <a> patří sem. */
.vl a.h-btn--green, .vl a.h-btn--blue, .vl a.h-thx__sharebtn--wa, .vl a.h-acct-order__paybtn,
.vl a.h-ptile__btn--green, .vl a.h-ptile__btn--blue, .vl a.h-panel__cta, .vl a.h-vse-contact__btn,
.vl .h-tile--account a.h-tile__cta--btn, .vl .h-gd-help__link a,
.vl a.h-thx__sharebtn--wa:hover, .vl a.h-acct-order__paybtn:hover, .vl a.h-ptile__btn--green:hover,
.vl a.h-ptile__btn--blue:hover, .vl a.h-panel__cta:hover, .vl a.h-vse-contact__btn:hover,
.vl .h-tile--account a.h-tile__cta--btn:hover, .vl .h-gd-help__link a:hover { color: #fff; }
/* Karta sdílení na děkovačce ve stejné zelené jako karta „Extra body" v účtu (David 5. 9.). */
.vl .h-thx__card--share { background: #1f4d3a; border-color: #1f4d3a; }
/* Hero: fotka drží vždy plnou výšku sekce (auto 100 %), přebytek se ořezává
   zprava. Na užších šířkách se sekce snižuje a text posouvá nahoru; pod 1000 px
   fotka ustupuje textu úplně (vzor starého webu s transparent-pixelem). */
/* Velké displeje: fotka (1192 px) končí před pravým okrajem — prázdný roh
   vpravo dole dostává zrcadlový decentní gradient (pseudo ::before, pod obsahem;
   .vl-hero z-index:0 kvůli stacking contextu, jinak by pseudo kleslo pod pozadí). */
.vl-hero { z-index: 0; }
@media (min-width: 2000px) {
	.vl-hero::before {
		content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
		background: radial-gradient(70% 38% at 100% 100%, rgba(231,229,240,.6) 0%, rgba(231,229,240,0) 70%) no-repeat;
	}
}
@media (max-width: 1240px) {
	.vl-hero { min-height: 540px !important; }
	.vl-hero-copy { padding-top: 36px !important; padding-bottom: 36px !important; }
}
@media (max-width: 1100px) {
	.vl-hero { min-height: 560px !important; }
	.vl-hero-copy { padding-top: 28px !important; gap: 16px !important; }
}
/* Do 1. 9. tu bylo `background-image: none` pod 1000 px — hero se na úzkém
   desktopu srazilo a fotka se vypnula. Teď má tablet vlastní rozložení (viz
   media query na konci souboru), fotka tedy zůstává; pod 760 px se desktopová
   vrstva stejně skrývá a nastupuje .vl-mobile. */
/* Karta recenze se čte jako citace: citace, fotky, „Ověřený nákup", podpis.
   Hvězdy jsou na řádku podpisu vpravo (`margin-left:auto`), ne nahoře —
   Davidovo rozhodnutí z 2. 9. „Ověřený nákup" patří k podpisu, ne do toku
   karty, proto vlastní obal s menší mezerou (8 px místo `gap:12px` karty). */
/* Žlutá linka vlevo s odsazením z návrhu pryč (David 3. 9.) — text recenze na celou šířku karty. */
.vl-revcard__quote { display: flex; flex-direction: column; gap: 6px; }
.vl-revcard__head { display: flex; flex-direction: column; gap: 8px; }
.vl-revcard__badge { display: flex; align-items: center; gap: 10px; }
.vl-revcard__date { margin-left: auto; font-size: 12px; color: #8a887f; white-space: nowrap; }
.vl-revcard__by { display: flex; align-items: center; gap: 10px; }
.vl-revcard__stars { margin-left: auto; color: #c99a12; font-size: 13px; letter-spacing: .05em; }
.vl-revcard__name { font-size: 14px; font-weight: 600; color: #16211c; }

/* Časté dotazy — jeden vzhled pro celý web podle návrhu „Dárkové poukazy"
   (zip 7, David 4. 9.): bílá karta s rámem #e3e0d4 a rádiusem 14, otázka
   15,5 px / 600, vpravo textové + (šedé) / − (zelené) v tučném řezu, odpověď
   14 px / 1,65 pod ní. Sekce `.vl-faqsec` = pás #f6f5ef, sloupec 940 px,
   nadpis 29 / 600 na střed; tablet 36/32 px a 26 px podle tabletového návrhu,
   mobil 32/20 px a 22 px jako obecný vzor `.vl-dcontent` pro 29px nadpisy
   (mobilní návrh poukazů FAQ nemá). Nativní <details>, aby fungoval bez JS
   i pro čtečky; marker se schovává zvlášť pro WebKit — `list-style:none`
   na summary tam nestačí. Znaménko je `::before`, ne text v DOM — otevřená
   otázka nemění nic jiného (žádný rám, žádný podklad), přesně jako v návrhu. */
.vl-faqsec { background: #f6f5ef; }
.vl-faqsec__in { max-width: 940px; margin: 0 auto; padding: 56px 48px; }
.vl-faqsec__title { margin: 0; font-size: 29px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: #16211c; text-align: center; }
.vl-faqsec__title + .vl-faq-list { margin-top: 26px; }
.vl-faq-list { display: flex; flex-direction: column; gap: 10px; }
.vl-faq { background: #ffffff; border: 1px solid #e3e0d4; border-radius: 14px; padding: 18px 24px; }
.vl-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: #16211c; }
.vl-faq__q::-webkit-details-marker { display: none; }
.vl-faq__ico { flex: none; min-width: 12px; text-align: center; font-weight: 700; color: #8a887f; }
.vl-faq__ico::before { content: '+'; }
.vl-faq[open] .vl-faq__ico { color: #0b7c3d; }
.vl-faq[open] .vl-faq__ico::before { content: '\2212'; }
.vl-faq__a { margin-top: 10px; font-size: 14px; line-height: 1.65; color: #3d443e; }
.vl-faq__a p { margin: 0 0 10px; }
.vl-faq__a p:last-child { margin-bottom: 0; }
.vl-faq__a a { color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-faqsec__in { padding: 36px 32px; }
	.vl-faqsec__title { font-size: 26px; }
}
@media (max-width: 768px) {
	.vl-faqsec__in { padding: 32px 20px; }
	.vl-faqsec__title { font-size: 22px; }
	.vl-faq { padding: 16px 18px; }
	.vl-faq__q { font-size: 15px; }
}

/* ---- Doháněná grafika stránek, které pořád jedou na vlasimím markupu ----
   Tyhle bloky nemají vlasimí .dc návrh (Vše o nákupu, FAQ hub, Vrácení…),
   takže se nedají přegenerovat — dorovnávají se sem do stejné řeči jako
   karty z návrhů: krémový podklad #fdfcf8, rám #e3e0d4, rádius 16, zelený
   prostrkaný nadpisek, ink #16211c na hodnotě a #8a887f na poznámce.
   Markup zůstává nedotčený, texty dál jdou z Customizeru. */

/* Kontaktní pruh (/vse-o-nakupu/#kontakt, /vraceni-a-reklamace/) — od XCIV
   vlastní markup v `parts/contact-help.php`, žádné doplňkové CSS už nepotřebuje. */

/* Rozbalovací otázky (FAQ hub) — karta jako v návrhu, otevřená se zvýrazní
   zeleným rámem místo šedého, ať je vidět, co je rozbalené. */
.h-faq2 { background: #fdfcf8; }
.h-faq2__item { background: #ffffff; border: 1px solid #e3e0d4; border-radius: 16px; }
.h-faq2__item.is-open { border-color: #0b7c3d; box-shadow: 0 6px 18px rgba(22,33,28,.06); }
.h-faq2__qtext { font-size: 16.5px; font-weight: 600; color: #16211c; }

/* Tlačítka zděděná z Vlasima (.h-btn) na vlasimí design. Používá je 20 šablon
   (košík, pokladna, účet, 404, recenze…), takže se to řeší tady, ne v markupu.
   Vlasimo má oproti Vlasima: sytější zelenou #0d8f46, pevný 3px lem dole
   místo měkkého stínu (a při :active se tlačítko o ten lem propadne) a váhu
   600 místo 700/800. Bílá varianta je krémový rám #e3e0d4, ne modrý. */
.vl .h-btn, .h-btn { border-radius: 12px; font-weight: 600; transition: filter .15s, transform .06s, box-shadow .06s; }
.vl .h-btn--green, .h-btn--green,
.vl .h-btn--blue, .h-btn--blue { background: #0d8f46; color: #fff; font-weight: 600; box-shadow: 0 3px 0 #075c2e; }
.h-btn--green:active, .h-btn--blue:active { transform: translateY(3px); box-shadow: 0 0 0 #075c2e; }
.vl .h-btn--outline, .h-btn--outline { background: #fff; border: 1px solid #e3e0d4; color: #16211c; font-weight: 600; box-shadow: none; }
.h-btn--outline:hover { border-color: #0b7c3d; color: #0b7c3d; }
.vl .h-btn--blueoutline, .h-btn--blueoutline { background: #fff; border: 1.5px solid #0b7c3d; color: #0b7c3d; font-weight: 600; box-shadow: none; }
.h-btn--blueoutline:hover { background: #e4eee6; color: #0b7c3d; }
.vl .h-btn--sm, .h-btn--sm { border-radius: 10px; font-size: 14px; }

/* Lepivý pás záložek na PDP (parts/pdp-tabs.php). Hlavička webu lepivá není,
   takže pás drží na top:0. Pozor: `.vl-dcontent [style*="position:sticky"]`
   dělá pod 768 px ze sticky prvků static — pás proto NESMÍ být uvnitř
   .vl-dcontent a stylování jede přes třídu, ne inline styl. */
.vl-ptabs { position: sticky; top: 0; z-index: 30; background: #fdfcf8; border-top: 1px solid #e3e0d4; border-bottom: 1px solid #e3e0d4; }
.vl-ptabs__in { max-width: 1440px; margin: 0 auto; padding: 0 48px; display: flex; gap: 30px; overflow-x: auto; font-size: 15px; font-weight: 600; scrollbar-width: none; }
.vl-ptabs__in::-webkit-scrollbar { display: none; }
.vl-ptabs__in a { padding: 14px 0; color: #5d6b62; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.vl-ptabs__in a.is-active, .vl-ptabs__in a:hover { color: #0b7c3d; border-bottom-color: #0b7c3d; }
/* Lišta s nákupem drží u spodní hrany okna vždy, i nad patičkou. Se `sticky`
   odjela, jakmile skončil obal vrstvy (zhruba u patičky) — David 4. 9.
   `fixed` uvnitř skryté vrstvy se nevykresluje, takže si každá vrstva dál
   nese svou a nepřekrývají se. Patička si přidá o výšku lišty víc odsazení,
   aby poslední řádek nezůstal navždy schovaný. */
/* Nákupní lišta na mobilním PDP.
   – Vyjíždí až pod pásem záložek (Popis / Složení / …), ne hned po otevření:
     nahoře je tlačítko do košíku i tak na dosah a lišta jen ubírala výšku
     (Davidovo zadání 4. 9.). Přepíná ji skript v parts/pdp-tabs.php.
   – Tlačítko si bralo dvě třetiny šířky a na cenu s názvem varianty zbývalo
     málo, proto strop 58 %. */
.vl-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	transform: translateY(110%);
	transition: transform .2s ease;
}
.vl-buybar.is-on { transform: none; }
/* Tlačítko drží pravý okraj a je široké podle textu — vlevo je miniatura, cena
   a název, které potřebují místo (Davidovo zadání 4. 9.). Strop 58 % zůstává
   pro případ dlouhého popisku, aby text nevytlačilo z lišty. */
.vl-buybar > [data-vl-add],
.vl-buybar > [data-vl-ajax-add] {
	flex: 0 0 auto !important;
	margin-left: auto;
	max-width: 58%;
	padding: 0 20px;
}
body.single-product .vl-footdark { padding-bottom: 84px; }
@media (max-width: 768px) {
	body.single-product .vl-footdark { padding-bottom: 92px; }
}

/* Kotva nesmí skončit pod lepivým pásem. */
#popis, #slozeni, #davkovani, #recenze, #prednosti, #pouziti, #hodnoceni,
#m-popis, #m-slozeni, #m-davkovani, #m-recenze, #m-prednosti, #m-pouziti { scroll-margin-top: 58px; }
@media (max-width: 768px) {
	.vl-ptabs__in { padding: 0 20px; gap: 20px; font-size: 13.5px; }
	.vl-ptabs__in a { padding: 11px 0; }
	/* Pás lepí přímo na kartu poradny nad ním — na mobilu mají karty odsazení
	   20 px a pás jde přes celou šířku, takže bez mezery vypadal nalepený. */
	.vl-mobile .vl-ptabs { margin-top: 20px; }
}

/* Hvězdičky celkového hodnocení (vlasimo_stars). Bledá pětice vespod, zlatá
   přes ni s ořezem na procenta — proto overflow:hidden a nowrap na obou. */
.vl-stars { position: relative; display: inline-block; white-space: nowrap; color: #e6e1cd; line-height: 1; vertical-align: -1px; }
.vl-stars__fg { position: absolute; left: 0; top: 0; overflow: hidden; color: #c99a12; white-space: nowrap; pointer-events: none; }

/* Topbar: tři zóny. Postranní bloky mají stejný flex podíl (1 1 0), takže text
   akce uprostřed sedí na skutečném středu lišty bez ohledu na to, jak dlouhá je
   která strana — `margin-left:auto` ho dřív jen odsunul za levou skupinu.
   Oddělovače jsou samostatné flex položky, mezery kolem nich tedy vycházejí
   z jednoho `gap` a jsou všude stejné. */
.vl-topbar__side { display: flex; align-items: center; gap: 16px; flex: 1 1 0; min-width: 0; }
.vl-topbar__side--end { justify-content: flex-end; gap: 12px; }
.vl-topbar__promo { flex: 0 0 auto; white-space: nowrap; }
/* Boční zóny se pod 1000 px lámaly na dva řádky („Vše o\a0nákupu", telefon),
   protože lišta je pevně 34 px vysoká — položky proto nezlomitelné a delší
   část střední věty se pod tou hranicí schová. */
.vl-topbar__side > * { white-space: nowrap; }
.vl-topbar__sep { opacity: .5; }
/* Jazykový přepínač je pilulka s vnitřním odsazením, takže od šipky
   k oddělovači vycházela opticky skoro trojnásobná mezera než mezi
   položkami vedle. Odsazení pilulky se vytáhne zpět záporným marginem. */
[data-vl-lang] + .vl-topbar__sep { margin-left: -6px; }

/* Kontakt v desktopové patičce. Tenhle blok NEPOCHÁZÍ z dc renderu — psal se
   ručně na zadání, takže nemá důvod nosit inline styly a jede přes třídy.
   Telefon má schválně stejnou typografii jako e-mail (ne akcentní žlutou jako
   jinde na webu) — Davidovo rozhodnutí z 2. 9. */
/* Čára je pseudoelement, ne border-top: má být kratší než sloupec (365 px na
   1440, 248 px na 1024), ale zkrátit blok samotný nejde — nese obsah. 180 px je
   kousek za nejdelší řádek (e-mail 157 px), a ten je konstantní, takže poměr
   sedí na desktopu i tabletu. */
.vl-fcontact { position: relative; margin-top: 4px; padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.vl-fcontact::before { content: ""; position: absolute; top: 0; left: 0; width: 180px; max-width: 100%; height: 1px; background: #26332b; }
.vl-fcontact__row { display: flex; flex-direction: column; gap: 3px; }
.vl-fcontact__val { font-size: 14.5px; font-weight: 600; color: #ffffff; }
.vl-fcontact__note { font-size: 12.5px; color: #8fa396; }
.vl-fcontact__note--dot { display: flex; align-items: center; gap: 7px; }

/* Typografie článku podle návrhu (obsah jde z editoru, styl dodává obal). */
.vl-article p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.75; color: #3d443e; }
.vl-article h2 { margin: 34px 0 14px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: #16211c; }
.vl-article h3 { margin: 26px 0 10px; font-size: 19px; font-weight: 600; color: #16211c; }
.vl-article ul, .vl-article ol { margin: 0 0 18px; padding-left: 22px; color: #3d443e; font-size: 16.5px; line-height: 1.7; }
.vl-article img { max-width: 100%; height: auto; border-radius: 12px; }
/* Zarovnání obrázků z klasického editoru (staré články: `alignleft` /
   `alignright` / `aligncenter` na img i figure). Šablona třídy neznala, takže
   obrázek zůstal řádkový uvnitř odstavce v přirozené velikosti a celoodstavcové
   `.vl p { text-align: justify }` roztáhlo řádek textu před ním do mezer (David
   6. 9., článek Měď). Plovoucí varianty na polovinu sloupce s odsazením, aby
   text obtékal; střed na střed; blokové zobrazení zároveň řeší justify, protože
   text před obrázkem je pak poslední řádek svého bloku. Tabulky, citace, obsah
   a datumová věta obrázek neobtékají; nadpisy ANO — stejně jako na staré
   produkci, jinak vysoká fotka následovaná nadpisem nechá vpravo prázdno
   (Vitamín A). Pod 768 px plovoucí obrázek na celou šířku (polovina z 320 px
   je nečitelná). */
.vl-article .alignright { float: right; clear: right; margin: 6px 0 16px 28px; max-width: 50%; }
.vl-article .alignleft { float: left; clear: left; margin: 6px 28px 16px 0; max-width: 50%; }
.vl-article .aligncenter { display: block; clear: both; margin: 24px auto; }
.vl-article img.alignnone { display: block; margin: 18px 0; }
.vl-article figure.alignright, .vl-article figure.alignleft, .vl-article figure.aligncenter { width: auto; }
.vl-article figure.alignright img, .vl-article figure.alignleft img { width: 100%; }
.vl-article table, .vl-article blockquote, .vl-article .vl-toc, .vl-article__dates { clear: both; }
@media (max-width: 768px) {
	.vl-article .alignright, .vl-article .alignleft { float: none; display: block; max-width: 100%; margin: 18px auto; }
}
.vl-article a { color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; }
/* Odkazy v článcích jsou psané jako holé URL (zdroje pod textem). Bez zalomení
   drží nezlomitelné slovo min-content celého sloupce mřížky — na 390 px to
   roztáhlo obsah na 481 px a stránka rolovala do strany. `anywhere`, ne
   `break-word`: jen `anywhere` snižuje i intrinsic min-content, o což tu jde. */
.vl-article { overflow-wrap: anywhere; }
/* Citace v článku (David 5. 9.): karta v tónu bočních boxů se zeleným proužkem
   vlevo — proužek je pseudoelement, ne border-left, aby rohy zůstaly kulaté.
   Redakce ji používá jako zvýrazněnou větu (uvnitř bývá <strong>), ne jako
   cizí výrok; platí pro klasické <blockquote> i blok wp-block-quote. */
.vl-article blockquote { position: relative; margin: 28px 0; padding: 20px 24px 20px 30px; background: #f6f5ef; border: 1px solid #e3e0d4; border-radius: 14px; }
.vl-article blockquote::before { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: #0b7c3d; }
.vl-article blockquote p { margin: 0; font-size: 17px; line-height: 1.65; color: #16211c; font-weight: 500; }
.vl-article blockquote p + p { margin-top: 12px; }
.vl-article blockquote strong { font-weight: 600; }
.vl-article blockquote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; color: #5d6b62; }
@media (max-width: 768px) {
	.vl-article blockquote { padding: 16px 18px 16px 26px; }
	.vl-article blockquote::before { left: 12px; top: 16px; bottom: 16px; }
	.vl-article blockquote p { font-size: 16px; }
}

/* Tabulky v článcích (David 5. 9.): jeden výchozí vzhled pro každou <table>
   v obsahu příspěvku, v tónu bočních boxů a tabulky bonusového programu
   (`.h-loyal-table`): bílá karta s rámem #e3e0d4 a rohy 14 px, hlavička
   krémová s malými kapitálkami, řádky oddělené linkou, první sloupec jako
   popisek. Články ze staré produkce měly tabulky s inline styly (limetková
   hlavička #7db32d, zebra, Arial) — ty jsou z obsahu vyčištěné
   (CHANGELOG CCL) a šablona inline styly na tabulkách stejně zahazuje
   (`inc/article-tables.php`), aby se to pastou z Wordu nevrátilo.
   Scope je `.vl-article` = jen detail příspěvku (single.php); stránky ani
   produkty tuhle třídu nemají. Rám nese obal `.vl-table` z filtru, ne
   tabulka — obal zároveň dává vodorovný posuv, kdyby se tabulka do sloupce
   nevešla. `border-collapse: separate` kvůli kulatým rohům. */
.vl-article .vl-table { margin: 28px 0; border: 1px solid #e3e0d4; border-radius: 14px; background: #ffffff; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vl-article .vl-table > table { margin: 0; }
.vl-article table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.55; color: #3d443e; }
.vl-article th, .vl-article td { padding: 13px 18px; text-align: left; vertical-align: top; border: 0; background: transparent; }
/* `.vl-article` má `overflow-wrap: anywhere` kvůli holým URL v textu — v buňce
   to ale lámalo slova uprostřed („Rozmarý-nový olej“ v úzkém prvním sloupci).
   V tabulce slova nelámat: sloupec se roztáhne na nejdelší slovo a případný
   přesah řeší posuv obalu, ne rozsekané slovo. */
.vl-article th, .vl-article td { overflow-wrap: normal; }
.vl-article th { background: #f6f5ef; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #16211c; line-height: 1.4; vertical-align: bottom; }
.vl-article thead th { border-bottom: 1px solid #e3e0d4; }
.vl-article tbody tr + tr td, .vl-article tbody tr + tr th { border-top: 1px solid #ebe9df; }
.vl-article tbody td:first-child { color: #16211c; font-weight: 500; }
.vl-article table p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.vl-article table p + p { margin-top: 6px; }
/* Tabulka se čtyřmi a více sloupci (přehled olejů) se do 700 px sloupce
   nevejde čitelně — dostane minimální šířku a v obalu se posouvá. */
.vl-article table:has(tr > :nth-child(4)) { min-width: 640px; }
@media (max-width: 768px) {
	.vl-article .vl-table { margin: 22px 0; border-radius: 12px; }
	.vl-article table { font-size: 14.5px; }
	.vl-article th, .vl-article td { padding: 11px 14px; }
	.vl-article th { font-size: 11.5px; }
}

/* ==== Partnerská sekce (SliceWP) — page-partner.php (David 5. 9.) ====
   Markup kreslí plugin (šablony se nepřepisují, viz hlavička šablony),
   vzhled dává tenhle blok v tónu Můj účet: karta s formulářem jako
   přihlášení účtu, oblast partnera jako nástěnka — menu záložek vlevo
   (260 px, sticky) místo sidebaru, karty s rámem #e3e0d4 a rohy 16 px,
   KPI dlaždice, tabulky jako v článcích. Plugin má vlastní CSS
   (style-front-end.css) s !important na okrajích menu a s pravidly
   `body table.slicewp-list-table` — proto jsou selektory tady o `.vl-aff`
   delší a u menu je !important. Mobil ≤ 768: menu jako pilulky s posuvem
   (stejně jako účet), mřížky do sloupce, tabulky posuvné. Plugin skrývá
   pod 720 px texty záložek (nechává ikony) — tady je to naopak. */
.vl-aff { min-width: 0; }
.vl-aff--card { max-width: 560px; border: 1px solid #e3e0d4; background: #ffffff; border-radius: 18px; padding: 30px 32px; }
.vl-aff--card.vl-aff--wide { max-width: 720px; }
.vl-aff__hint { max-width: 560px; margin: 16px 0 0; padding: 0 4px; font-size: 13.5px; line-height: 1.6; color: #5d6b62; }
.vl-aff__hint a { color: #0b7c3d; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* formuláře (přihlášení, registrace, heslo, nastavení) — pole jako v účtu */
.vl-aff .slicewp-form { margin: 0; }
.vl-aff .slicewp-form > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: #3d443e; }
.vl-aff .slicewp-field-wrapper { margin: 0 0 14px; }
.vl-aff .slicewp-field-wrapper:last-of-type { margin-bottom: 0; }
.vl-aff .slicewp-form > .slicewp-field-wrapper:last-of-type { margin-bottom: 14px; }
.vl-aff .slicewp-field-label-wrapper label { display: block; font-size: 12.5px; font-weight: 600; color: #3d443e; margin-bottom: 6px; }
.vl-aff .slicewp-field-required-marker { color: #8a887f; font-weight: 500; }
.vl-aff input[type="text"], .vl-aff input[type="email"], .vl-aff input[type="url"], .vl-aff input[type="password"], .vl-aff input[type="number"], .vl-aff textarea, .vl-aff select { width: 100%; max-width: 100%; border: 1.5px solid #e3e0d4; border-radius: 10px; padding: 0 14px; height: 48px; box-sizing: border-box; font-family: inherit; font-size: 14px; color: #16211c; background: #ffffff; outline: 0; box-shadow: none; }
.vl-aff textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.vl-aff input:focus, .vl-aff textarea:focus, .vl-aff select:focus { border-color: #0b7c3d; }
.vl-aff input[disabled], .vl-aff input[readonly] { background: #f6f5ef; color: #5d6b62; }
.vl-aff .slicewp-field-description { font-size: 12.5px; line-height: 1.5; color: #8a887f; }
.vl-aff .slicewp-field-description p { margin: 0; font-size: 12.5px; }
.vl-aff .slicewp-field-description-placement-before .slicewp-field-description { margin: -2px 0 8px; }
.vl-aff .slicewp-field-error-message { margin-top: 6px; font-size: 12.5px; color: #c2452d; }
.vl-aff .slicewp-field-has-error input, .vl-aff .slicewp-field-has-error textarea { border-color: #c2452d; background: #fdf6f5; }
.vl-aff .slicewp-field-wrapper-inline label, .vl-aff .slicewp-field-wrapper-terms-and-conditions label { display: inline; font-size: 13.5px; font-weight: 500; }
.vl-aff input[type="checkbox"], .vl-aff input[type="radio"] { width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: #0d8f46; }
/* tlačítka = primární CTA webu */
.vl-aff .slicewp-button-primary, .vl-aff input[type="submit"], .vl-aff button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; margin: 0; background: #0d8f46; color: #ffffff; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; border: 0; border-radius: 11px; box-shadow: 0 3px 0 #075c2e; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; }
.vl-aff .slicewp-button-primary:hover, .vl-aff input[type="submit"]:hover, .vl-aff button[type="submit"]:hover { transform: translateY(1px); box-shadow: 0 2px 0 #075c2e; color: #ffffff; }
.vl-aff .slicewp-button-primary svg { width: 16px; height: 16px; margin: 0; }
.vl-aff--card input[type="submit"] { width: 100%; height: 54px; margin-top: 8px; font-size: 15px; }
.vl-aff .slicewp-lost-password { margin-top: 14px; text-align: center; font-size: 13.5px; }
.vl-aff .slicewp-lost-password a { color: #0b7c3d; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* hlášky pluginu v barvách webu */
.vl-aff .slicewp-user-notice { width: auto; margin: 0 0 18px; padding: 12px 16px; border: 1px solid #e3e0d4; border-radius: 12px; background: #f6f5ef; font-size: 14px; line-height: 1.55; color: #3d443e; }
.vl-aff .slicewp-user-notice p { margin: 0; }
.vl-aff .slicewp-user-notice.slicewp-warning { background: #fef9f1; border-color: #e8c48a; color: #6b4a12; }
.vl-aff .slicewp-user-notice.slicewp-error { background: #fdf6f5; border-color: #f2cfc5; color: #7a2a18; }
.vl-aff .slicewp-user-notice.slicewp-updated { background: #eaf7ee; border-color: #c6dbcb; color: #1f4d3a; }
.vl-aff .slicewp-user-notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* oblast partnera: menu vlevo jako sidebar účtu, obsah vpravo */
.vl-aff #slicewp-affiliate-account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.vl-aff #slicewp-affiliate-account-nav-tab { position: sticky; top: 20px; }
.vl-aff .slicewp-nav-tab-wrapper { display: flex !important; flex-direction: column; gap: 0 !important; margin: 0 !important; padding: 10px 0 !important; list-style: none !important; border: 1px solid #e3e0d4; background: #ffffff; border-radius: 16px; }
.vl-aff .slicewp-nav-tab-wrapper::after { display: none; }
.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab a { display: flex !important; align-items: center; gap: 10px; width: auto; margin: 0 10px; padding: 12px 16px; border: 1px solid transparent !important; border-radius: 11px; font-size: 15px; font-weight: 500; line-height: 1.3; color: #3d443e; background: transparent; box-sizing: border-box; }
.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab a:hover, .vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab a:focus { background: #fdfcf8; color: #16211c; }
.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a { background: #e4eee6; border-color: #c6dbcb !important; color: #0b7c3d; font-weight: 600; }
.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab svg { flex: none; width: 18px; height: 18px; margin: 0; color: #8a887f; }
.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active svg { color: #0b7c3d; }
.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab span { display: inline !important; }
.vl-aff #slicewp-affiliate-account-tab { min-width: 0; }
.vl-aff .slicewp-tab { margin: 0; }
.vl-aff .slicewp-tab.slicewp-active { display: flex; flex-direction: column; gap: 18px; }
.vl-aff .slicewp-tab > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #3d443e; }
/* karty a KPI dlaždice */
.vl-aff .slicewp-card { margin: 0; border: 1px solid #e3e0d4; border-radius: 16px; background: #ffffff; box-shadow: none; overflow: hidden; }
.vl-aff .slicewp-card-inner { padding: 20px 22px; }
.vl-aff .slicewp-card-footer { padding: 12px 22px; border-top: 1px solid #f0ede1; background: #fdfcf8; font-size: 13px; }
.vl-aff .slicewp-card-footer a { color: #0b7c3d; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vl-aff .slicewp-grid { gap: 16px; margin: 0; }
.vl-aff .slicewp-grid > div { display: flex; }
.vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-last-30-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-all-time { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-program-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner { padding: 18px 22px 16px; gap: 8px; }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-card-title { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a887f; }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #16211c; line-height: 1.2; }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-direction { padding: 3px 9px; border-radius: 999px; background: #f6f5ef; color: #5d6b62; font-size: 12px; font-weight: 600; }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-direction.slicewp-positive { background: #e4eee6; color: #0b7c3d; }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-direction.slicewp-negative { background: #fdf6f5; color: #c2452d; }
.vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-footer { padding: 10px 22px; }
.vl-aff #slicewp-affiliate-account [class^="slicewp-commission-rate-tag"] { font-size: 18px; font-weight: 600; color: #16211c; }
.vl-aff .slicewp-section-heading { margin: 6px 0 -6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #16211c; }
/* filtr období (výběr rozsahu dat) */
.vl-aff .slicewp-affiliate-dashboard-filters, .vl-aff .slicewp-list-table-before, .vl-aff .slicewp-list-table-after { margin: 0; }
.vl-aff .slicewp-list-table-before { flex-wrap: wrap; align-items: center; gap: 12px; }
.vl-aff .slicewp-date-picker-input { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1.5px solid #e3e0d4; border-radius: 10px; background: #ffffff; font-size: 14px; font-weight: 500; color: #16211c; cursor: pointer; }
.vl-aff .slicewp-date-picker-input svg { width: 16px; height: 16px; color: #8a887f; }
.vl-aff .slicewp-list-table-filters button[type="submit"], .vl-aff .slicewp-affiliate-dashboard-filters button[type="submit"] { height: 44px; padding: 0 18px; font-size: 14px; }
/* tabulky provizí, návštěv a výplat */
.vl-aff table.slicewp-list-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid #e3e0d4; border-radius: 14px; background: #ffffff; font-size: 14px; line-height: 1.5; }
.vl-aff table.slicewp-list-table th, .vl-aff table.slicewp-list-table td { padding: 12px 16px; text-align: left; vertical-align: top; word-break: normal; }
.vl-aff table.slicewp-list-table th { background: #f6f5ef; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #16211c; border-bottom: 1px solid #e3e0d4; }
.vl-aff table.slicewp-list-table thead th:first-child { border-top-left-radius: 13px; }
.vl-aff table.slicewp-list-table thead th:last-child { border-top-right-radius: 13px; }
.vl-aff table.slicewp-list-table td { color: #3d443e; }
.vl-aff table.slicewp-list-table tbody tr + tr td { border-top: 1px solid #ebe9df; }
.vl-aff table.slicewp-list-table td.slicewp-column-id { color: #8a887f; }
.vl-aff table.slicewp-list-table td.slicewp-column-amount { font-weight: 600; color: #16211c; white-space: nowrap; }
.vl-aff table.slicewp-list-table td.slicewp-column-date { white-space: nowrap; }
.vl-aff table.slicewp-list-table td a { color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; }
.vl-aff .slicewp-list-table-after { align-items: center; gap: 12px; font-size: 13px; color: #8a887f; }
.vl-aff .slicewp-list-table-pagination { margin-left: auto; gap: 10px; }
.vl-aff .slicewp-pagination-links { margin: 0; gap: 6px; }
.vl-aff .slicewp-pagination-links .slicewp-pagination-link { width: 34px; height: 34px; line-height: 34px; border-radius: 9px; background: #ffffff; border: 1px solid #e3e0d4; color: #16211c; font-size: 13px; }
.vl-aff .slicewp-pagination-links a.slicewp-pagination-link:hover { border-color: #16211c; }
.vl-aff .slicewp-list-table-per-page-selector select { height: 40px; width: auto !important; padding: 0 32px 0 12px; }
/* affiliate odkaz + kopírování, generátor odkazů */
.vl-aff #slicewp-affiliate-link, .vl-aff #slicewp-affiliate-custom-link-output { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 600; color: #0b7c3d; background: #f6f5ef; }
.vl-aff .slicewp-input-copy, .vl-aff .slicewp-generate-affiliate-link { margin-top: 12px; height: 44px; }
.vl-aff .slicewp-affiliate-custom-link-output { margin-top: 18px; }
/* nastavení */
.vl-aff .slicewp-tab[data-slicewp-tab="settings"] .slicewp-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.vl-aff .slicewp-tab[data-slicewp-tab="settings"] .slicewp-card { align-self: stretch; }
.vl-aff .slicewp-tab[data-slicewp-tab="settings"] .slicewp-card-inner .slicewp-field-wrapper:last-child { margin-bottom: 0; }
/* e-mail účtu v Nastavení partnera: jen pro čtení */
.vl-aff .vl-aff-locked input[disabled] { color: #16211c; background: #f6f5ef; cursor: not-allowed; }
.vl-aff .vl-aff-locked .slicewp-field-description { margin-top: 6px; }
/* karta Výplata provizí (inc/affiliate.php, hook nad tabulkou plateb) */
.vl-aff .vl-affpay__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #16211c; }
.vl-aff .vl-affpay__text { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: #3d443e; }
.vl-aff .vl-affpay__msg { margin: 14px 0 0; }
.vl-aff .vl-affpay__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0ede1; }
.vl-aff .vl-affpay__sum { font-size: 18px; font-weight: 600; color: #16211c; }
.vl-aff .vl-affpay__sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #5d6b62; }
.vl-aff .vl-affpay__sub a { color: #0b7c3d; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vl-aff .vl-affpay form { margin: 0; }
/* graf */
.vl-aff .slicewp-chart-before { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vl-aff .slicewp-chart-time-unit-selector { width: auto; height: 40px; padding: 0 32px 0 12px; font-size: 13.5px; }
@media (max-width: 1024px) {
	.vl-aff #slicewp-affiliate-account { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
	.vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-all-time { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.vl-aff--card, .vl-aff--card.vl-aff--wide { max-width: none; padding: 22px 18px; border-radius: 16px; }
	.vl-aff #slicewp-affiliate-account { display: block; }
	.vl-aff #slicewp-affiliate-account-nav-tab { position: static; margin-bottom: 16px; }
	.vl-aff .slicewp-nav-tab-wrapper { flex-direction: row; overflow-x: auto; gap: 8px !important; padding: 0 0 4px !important; border: 0; border-radius: 0; background: transparent; -webkit-overflow-scrolling: touch; }
	.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab { flex: none; }
	.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab a { margin: 0; padding: 9px 14px; border: 1.5px solid #e3e0d4 !important; border-radius: 999px; font-size: 13px; background: #ffffff; }
	.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a { border-color: #c6dbcb !important; }
	.vl-aff .slicewp-nav-tab-wrapper .slicewp-nav-tab svg { display: none; }
	.vl-aff .slicewp-grid, .vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-last-30-days, .vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-all-time, .vl-aff .slicewp-grid.slicewp-grid-affiliate-dashboard-program-details { grid-template-columns: 1fr !important; gap: 12px; }
	.vl-aff .slicewp-card-inner, .vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-inner { padding: 16px 18px; }
	.vl-aff .slicewp-card-footer, .vl-aff .slicewp-card-affiliate-dashboard .slicewp-card-footer { padding: 10px 18px; }
	.vl-aff table.slicewp-list-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13.5px; }
	.vl-aff table.slicewp-list-table th, .vl-aff table.slicewp-list-table td { padding: 10px 12px; white-space: nowrap; }
	.vl-aff .slicewp-list-table-filters, .vl-aff .slicewp-list-table-filters form, .vl-aff .slicewp-affiliate-dashboard-filters form { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
	.vl-aff .slicewp-list-table-filters button[type="submit"], .vl-aff .slicewp-affiliate-dashboard-filters button[type="submit"] { width: 100%; }
	/* výběr období: popisek rozsahu a data pod sebou, ne vedle sebe v úzkém sloupci */
	.vl-aff .slicewp-date-picker-wrapper { width: 100%; }
	.vl-aff .slicewp-date-picker-input { flex-wrap: wrap; width: 100%; height: auto; min-height: 44px; padding: 10px 14px; box-sizing: border-box; }
	.vl-aff .slicewp-date-picker-input .slicewp-date-picker-input-dates { flex-basis: 100%; padding: 0; border: 0; font-size: 13px; color: #8a887f; }
	.vl-aff .slicewp-date-picker-input .slicewp-date-picker-input-dates:empty { display: none; }
	.vl-aff .slicewp-list-table-after { flex-wrap: wrap; }
}

/* Obsah článku (inc/toc.php) — karta v tónu bočních boxů návrhu, vložená do
   obsahu před první nadpis. <details> drží sbalení bez JS. Selektory jdou
   přes `.vl-toc`, aby přebily obecná pravidla `.vl-article ol` / `.vl-article a`. */
/* Nad kartou vždy mezera od předchozího prvku (obrázek bloku má nulový okraj,
   karta na něm seděla) — okraje se s odstavcem sčítají do jednoho, takže
   30 px platí po obrázku i po textu. Když je karta první v obsahu, mezeru
   dává už padding sloupce. */
.vl-toc { margin: 30px 0; }
.vl-article > .vl-toc:first-child { margin-top: 0; }
.vl-toc__box { border: 1px solid #e3e0d4; background: #f6f5ef; border-radius: 14px; padding: 0 20px; }
.vl-toc__head { display: flex; align-items: center; gap: 10px; padding: 15px 0; cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0b7c3d; user-select: none; }
.vl-toc__head::-webkit-details-marker { display: none; }
.vl-toc__head::marker { content: ""; }
.vl-toc__chev { margin-left: auto; flex: none; color: #8a887f; transition: transform .2s; }
.vl-toc__box[open] .vl-toc__chev { transform: rotate(180deg); }
.vl-toc .vl-toc__list, .vl-toc .vl-toc__sub { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: #16211c; }
.vl-toc .vl-toc__list { counter-reset: vltoc; padding: 4px 0 18px; border-top: 1px solid #e3e0d4; }
.vl-toc .vl-toc__list > li { counter-increment: vltoc; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 6px; padding-top: 8px; }
.vl-toc .vl-toc__list > li::before { content: counter(vltoc); padding-top: 2px; font-size: 12.5px; font-weight: 600; color: #0b7c3d; font-variant-numeric: tabular-nums; }
.vl-toc .vl-toc__sub { grid-column: 2; margin: 5px 0 2px 1px; padding-left: 13px; border-left: 1px solid #d5d2c6; font-size: 14px; color: #5d6b62; }
.vl-toc .vl-toc__sub > li { padding: 3px 0; }
.vl-toc .vl-toc__list a { color: inherit; text-decoration: none; }
.vl-toc .vl-toc__list a:hover { color: #0b7c3d; text-decoration: underline; text-underline-offset: 3px; }
.vl-article :is(h2, h3)[id] { scroll-margin-top: 24px; }
@media (max-width: 768px) {
	.vl-toc__box { padding: 0 16px; }
	.vl-toc__head { padding: 13px 0; }
	.vl-toc .vl-toc__list { font-size: 14.5px; }
}

/* ---- Pokladna: jemné dorovnání zděděné kostry na vzhled návrhu „Vlasimo pokladna" ---- */
.vl .h-chk2-sec { padding: 30px 32px; }
.vl .h-chk2-sec__title { font-size: 20px; font-weight: 600; }
.vl .h-chk2-sec__num { font-weight: 600; background: #0d8f46; }
.vl .h-chk2-loginlink, .vl .h-chk2-login__title { font-weight: 600; }
.vl .h-field__label { font-size: 12.5px; font-weight: 600; color: #3d443e; }
.vl .h-input, .vl .h-chk2 select.h-input {
	border: 1px solid #d5d2c6; border-radius: 10px; padding: 13px 15px;
	font-size: 14px; background: #fdfcf8; min-height: 46px; color: #16211c;
}
.vl .h-input:focus { border-color: #0b7c3d; }
.vl .h-chk2 ::placeholder { color: #8a887f; }
.vl .h-chk2-errors b { font-weight: 600; }
/* CTA objednávky — zelené se „stiskem" jako v návrhu */
.vl .h-chk2 #place_order, .vl .h-chk2 button[type="submit"] {
	background: #0d8f46; color: #fff; border: 0; border-radius: 14px;
	min-height: 58px; font-size: 17px; font-weight: 600;
	box-shadow: 0 4px 0 #075c2e; transition: transform .12s ease, box-shadow .12s ease;
}
.vl .h-chk2 #place_order:hover { transform: translateY(2px); box-shadow: 0 2px 0 #075c2e; filter: none; }

/* ---- Kontaktní formulář (page-kontakty.php) — skutečná pole nad markupem z návrhu.
   Rozměry a barvy nesou inline styly (cílí na ně tabletová/mobilní pravidla),
   tady je jen to, co div z návrhu neměl: reset prvků formuláře, placeholder,
   focus, vlastní checkbox a stisk tlačítka. ---- */
.vl-cform__in { width: 100%; box-sizing: border-box; font-family: inherit; outline: 0; margin: 0; appearance: none; -webkit-appearance: none; }
.vl-cform__in::placeholder { color: #8a887f; opacity: 1; }
.vl-cform__in:focus { border-color: #0b7c3d !important; }
.vl-cform__sel { cursor: pointer; }
.vl-cform__cb { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: 0; opacity: 0; pointer-events: none; }
.vl-cform__box svg { opacity: 0; }
.vl-cform__cb:checked + .vl-cform__box { background: #0d8f46 !important; border-color: #0d8f46 !important; }
.vl-cform__cb:checked + .vl-cform__box svg { opacity: 1; }
.vl-cform__cb:focus-visible + .vl-cform__box { outline: 2px solid #0b7c3d; outline-offset: 2px; }
.vl-cform__btn { width: 100%; border: 0; margin: 0; padding: 0; font-family: inherit; }
.vl-cform__btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #075c2e !important; }
.vl-cform__btn:active { transform: translateY(4px); box-shadow: 0 0 0 #075c2e !important; }
.vl-cform__btn:disabled { opacity: .6; cursor: wait; transform: none; }
.vl-cform .h-cform__ok, .vl-cform .h-cform__err { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.vl-cform .h-cform__ok b { display: inline-flex; }

/* Mapa na Kontaktech (page-kontakty.php) — Leaflet z CPP pluginu, stejný
   podklad CARTO jako modal výdejních míst (enqueue + inicializace ve
   functions.php). Bez JS nebo bez pluginu zůstává šrafovaný blok z návrhu
   (inline styly v šabloně), s mapou JS přidá `is-live` — proto !important. */
.vl-kmap.is-live { height: 260px !important; display: block !important; overflow: hidden; background: #f2f1e9 !important; }
.vl-kmap.is-live > .vl-kmap__note { display: none; }
.vl-kmap__marker { filter: drop-shadow(0 6px 10px rgba(7, 92, 46, .35)); }
.vl-kmap .leaflet-control-attribution { font-size: 10px; color: #7d8a80; background: rgba(255, 255, 255, .75); }
.vl-kmap .leaflet-control-attribution a { color: #5d6b62; }

/* Modal „Napsat dotaz" (parts/ask-modal.php) — vlasimí kostra .h-ask v paletě
   Vlasima: závoj z #16211c, karty #fdfcf8/#e3e0d4, pole jako v kontaktním
   formuláři, tlačítko se „stiskem" jako ostatní CTA. */
.vl .h-ask__overlay { background: rgba(22, 33, 28, .55); }
.vl .h-ask__box { border-radius: 16px; box-shadow: 0 26px 60px rgba(22, 33, 28, .28); }
.vl .h-ask__x { background: #f3f1ea; color: #5d6b62; }
.vl .h-ask__x:hover { background: #e8e5d9; }
.vl .h-ask__kicker { font-weight: 600; color: #0b7c3d; }
.vl .h-ask__title { font-weight: 600; }
.vl .h-ask__product { background: #fdfcf8; border-color: #e3e0d4; border-radius: 12px; }
.vl .h-ask__product span { font-weight: 600; }
.vl .h-ask .h-field__label { font-weight: 600; color: #16211c; font-size: 12.5px; }
.vl .h-ask .h-field__label i { color: #c2452d; }
.vl .h-ask input[type=text], .vl .h-ask input[type=email], .vl .h-ask textarea { border: 1px solid #d5d2c6; border-radius: 10px; background: #fdfcf8; font-size: 14px; }
.vl .h-ask input::placeholder, .vl .h-ask textarea::placeholder { color: #8a887f; opacity: 1; }
.vl .h-ask input:focus, .vl .h-ask textarea:focus { border-color: #0b7c3d; box-shadow: none; }
.vl .h-ask__gdpr { color: #3d443e; align-items: flex-start; }
.vl .h-ask__msg { font-weight: 500; }
.vl .h-ask__send { background: #0d8f46; border-radius: 12px; font-weight: 600; box-shadow: 0 4px 0 #075c2e; transition: transform .12s ease, box-shadow .12s ease; }
.vl .h-ask__send:hover { filter: none; transform: translateY(2px); box-shadow: 0 2px 0 #075c2e; }
.vl .h-ask__send:disabled { opacity: .6; transform: none; }
/* Scroll uvnitř modalu se nesmí řetězit na stránku (viz CXX) a na mobilu je
   to spodní panel: kulaté jen horní rohy (obecné .vl pravidlo výš by jinak
   přebilo vlasimí 20px 20px 0 0) a výška z dvh — iOS počítá vh s lištou. */
.vl .h-ask__box { overscroll-behavior: contain; }
@media (max-width: 600px) {
	.vl .h-ask__box { border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; }
}

/* Zvýraznění v hero headline — zlatá #8a6a00 (odstín, kterým návrh kreslí
   žluté akcenty na světlém podkladu — kickery krémových variant; brand #ffd21f
   je na světlé nečitelná). Nese ho <strong>, v adminu stačí slovo ztučnit. */
.vl-hero h2 strong {
	font-weight: inherit;
	color: #0b7c3d;
}

/* Průvodce výběrem v liště tabů výpisu — trigger pluginu ve vzhledu návrhu. */
[data-vl-tabs] .vpv-modal-trigger--simple {
	background: none; border: 0; padding: 0 4px 12px; margin: 0;
	display: inline-flex; align-items: center; gap: 7px;
	font-family: inherit; font-size: 13.5px; font-weight: 500;
	color: #0b7c3d; cursor: pointer; white-space: nowrap;
}
[data-vl-tabs] .vpv-modal-trigger--simple:hover { color: #06552a; }
/* Ikonu pluginu (plná FA) nahrazuje tenká obrysová z návrhu — maskou, ať drží currentColor i hover. */
[data-vl-tabs] .vpv-modal-trigger--simple .vpv-trigger-icon {
	width: 13px; height: 13px; fill: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
[data-vl-tabs] .vpv-modal-trigger--simple .vpv-trigger-icon path { display: none; }
[data-vl-tabs] .vpv-modal-trigger--simple span { text-decoration: underline; text-underline-offset: 3px; }
/* Delší návěští („Nevíte si rady?") jen na desktopu — na tabletu se lišta
   s dvěma taby, poznámkou o skladu a odkazem nevejde. Text nese proměnná
   --vl-quiz-lead ze šablony, ať nezůstane česky natvrdo v CSS. */
@media (min-width: 1025px) {
	[data-vl-tabs] .vpv-modal-trigger--simple span::before { content: var(--vl-quiz-lead, ''); }
}
.vpv-modal-overlay { z-index: 300; }

/* Sekundární (žluté) CTA: šipka bez tmavého kolečka, jako na mobilu
   (Davidovo zadání 2. 9.). Pravidlo je v CSS a ne v šabloně, aby platilo
   pro všechny výskyty — dnes je jediný v závěrečném pásu na HP, ostatní žluté
   CTA (Affiliate, Doprava a platba, Bonusový program, Poukazy) mají holou
   šipku už z návrhu. Inline styl jde přebít jen přes !important. */
[style*="background:#ffd21f"] > span[style*="border-radius:50%"][style*="background:#16211c"] {
	width: auto !important;
	height: auto !important;
	background: none !important;
	color: inherit !important;
	font-size: inherit !important;
}

/* Závěrečné CTA na HP: text leží přímo na fotce, čitelnost drží jemný světlý
   závoj přesně v místě textu (Davidovo zadání 2. 9.), text-shadow zůstal jen
   jako slabá pojistka. Insety jsou záporné, aby přechod doběhl do nuly až za
   textem — jako background bloku by ho useknula hrana paddingu. Blok musí mít
   `isolation: isolate`: bez něj netvoří stacking context (position:relative
   se z-indexem auto nestačí), pseudoelement se z-indexem -1 spadne až do
   kořenového kontextu a vykreslí se POD fotku pásu — závoj pak není vidět
   vůbec (ověřeno diffem screenshotů s ním a bez něj, rozdíl 0 px). */
.vl-ctaveil { isolation: isolate; }
.vl-ctaveil::before {
	content: "";
	position: absolute;
	inset: -40px -90px;
	/* Poloměry musí být 50 % / 46 % boxu, ne výchozí farthest-corner: ten
	   ellipsu natáhne do rohů, u hran boxu je přechod pořád částečně krycí
	   a na fotce je pak vidět světlý obdélník s ostrou hranou. */
	background: radial-gradient(ellipse 50% 46% at 50% 46%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,.26) 72%, rgba(255,255,255,0) 100%);
	z-index: -1;
	pointer-events: none;
}

/* Mobilní lišta výpisu: taby a odkaz na průvodce se musí vejít vedle sebe i na
   úzkém telefonu (Davidovo zadání 2. 9.). Mezery, odsazení i písmo se plynule
   zmenšují s šířkou okna; nad ~430 px zůstávají hodnoty z návrhu, takže na
   běžném telefonu se vzhled nemění. Bez toho lišta přetékala o 24 px na 390 px
   a o 94 px na 320 px. !important kvůli inline stylům z dc renderu. */
.vl-mtabs {
	gap: clamp(7px, 3.7vw, 22px) !important;
	padding-left: clamp(9px, 3.7vw, 20px) !important;
	padding-right: clamp(9px, 3.7vw, 20px) !important;
}
/* Se čtyřmi položkami (běží balíčková akce) se taby na telefon nevejdou ani
   při nejmenším písmu — potřebují 308 px, k dispozici je 203. Posuv tedy
   zůstává, jen ho prozradí měkký okraj místo useknutého tabu. */
.vl-mtabs__scroll {
	gap: clamp(7px, 3.7vw, 22px) !important;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.vl-mtabs a { font-size: clamp(11.5px, 3.4vw, 14px) !important; }
.vl-mtabs > button {
	font-size: clamp(10.5px, 3.1vw, 12.5px) !important;
	/* Levý padding měl dělat odstup od tabů, jenže po zalomení odsazoval ikonu
	   od levého okraje (Davidovo zadání 4. 9. — má lícovat s „Vlasová kúra").
	   Odstup na společném řádku obstará column-gap lišty; zbylé 2 px srovnají
	   tlačítko s vnitřním paddingem tabů. */
	padding-left: 2px !important;
	gap: 5px !important;
}
.vl-mtabs > button svg { width: clamp(11px, 3.2vw, 13px); height: clamp(11px, 3.2vw, 13px); }
/* Průvodce si z lišty ukrajuje tolik, že se taby při balíčkové akci odsunou do
   posuvu (Davidův screenshot 4. 9.: z „Balíčků" zbyl kus písmene). Kontejner
   proto smí zalomit a scroll oblast si říká o šířku celého obsahu
   (flex-basis: min-content), takže průvodce spadne na druhý řádek dřív, než se
   začne scrollovat. Posuv zůstává pro opravdovou nouzi — když se na řádek
   nevejdou ani samotné taby, min-width: 0 je nechá zmenšit. */
.vl-mtabs { flex-wrap: wrap; row-gap: 4px !important; }
.vl-mtabs__scroll { flex: 1 1 min-content !important; }
/* Průvodce drží pravý okraj jen dokud sedí na řádku s taby — tam ho tam
   vytlačí flex-grow scroll oblasti. Po zalomení zůstává na svém řádku sám
   a patří vlevo (Davidovo zadání 4. 9.), takže žádné margin-left: auto. */
.vl-vch-scale { zoom: .58; }

/* Dlouhá recenze na mobilu: návrh počítal s krátkými texty, importované mají
   klidně dvacet řádků a karta pak zabere dvě obrazovky. Ořez na šest řádků
   s „číst dál"; tlačítko odkrývá JS jen tam, kde se text opravdu ořízl, aby
   pod krátkou recenzí neviselo naprázdno. Od 3. 9. platí i na desktopu:
   v třísloupcové mřížce dělaly různě dlouhé recenze karty od dvou do devíti
   řádků a mřížka se rozpadala. */
/* Karty recenzí v návrhu mají kolečko 34 px, .h-ava je 30 px. */
.h-ava.vl-ava-34 { width: 34px; height: 34px; font-size: 12.5px; }
.vl-rev-more { display: none; }
.vl-rev-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.vl-rev-clamp.is-open { -webkit-line-clamp: unset; overflow: visible; }
.vl-rev-more.is-on { display: inline-block; }
@media (max-width: 768px) {
	/* Tabulka aktivních látek: na desktopu dva sloupce po devíti/deseti řádcích,
	   na 390 px se druhý sloupec nevešel a přetékal o 43 px. Obecná pravidla
	   .vl-dcontent tenhle vzor (`gap:0 48px`) nepokrývají, proto natvrdo. */
	.vl-dcontent [style*="padding:10px 28px 16px; display:grid; grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; padding: 4px 16px 12px !important; }

}

/* Stránka Zkušenosti zákazníků — jediná vlastní vrstva jsou tyhle mřížky.
   Zbytek (typografie, karty) dědí z návrhu; obal .vl-dcontent řeší jen obsah
   klasických stránek, tyhle sekce mají vlastní odsazení, proto vlastní třída. */
@media (min-width: 769px) and (max-width: 1024px) {

	/* Výpis produktů na tabletu: sekce si z návrhu nesou vodorovný padding
	   48 px, ale tabletová pravidla ho srazila na 32 jen u hlavičky výpisu
	   a nadpisu kúr — mřížky, nadpis kosmetiky a bloky pod nimi zůstaly na 48.
	   Karty pak stály o 16 px vpravo od nadpisu nad nimi a o 36 px od loga
	   v hlavičce (Davidův screenshot 4. 9.). Vodorovné odsazení proto řídí
	   jedno místo — wrap — a vnitřní bloky ho mají nulové; 32 px sedí s logem.
	   Svislé odsazení zůstává, řeší ho pravidla u jednotlivých bloků. */
	body.post-type-archive-product .vl-desktop > .vl-wrap {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	body.post-type-archive-product .vl-desktop > .vl-wrap > * {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.vl-zk-wrap { padding-left: 32px !important; padding-right: 32px !important; }
	/* Souhrn hodnocení potřebuje 330 px, aby řádek „91 % potvrdilo účinek…"
	   zůstal na jednom řádku jako v návrhu; v původních 260 se lámalo i to
	   číslo samo. */
	.vl-zk-top { grid-template-columns: 330px minmax(0,1fr) !important; gap: 24px !important; }
	.vl-zk-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.vl-shoprev { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.vl-zk-story [style*="grid-template-columns:1.15fr 1fr"] { display: flex !important; flex-direction: column !important; }
	/* Sociální mřížky (Facebook 3, Instagram 4) drží počet sloupců i na tabletu —
	   dlaždice jsou obrázkové, ubrat sloupec by je zbytečně nafouklo. */
	.vl-zk-social { gap: 12px !important; }
}
@media (max-width: 768px) {
	.vl-zk-wrap { padding-left: 20px !important; padding-right: 20px !important; }
	.vl-zk-top, .vl-zk-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
	/* Facebook: screenshot komentáře je text, ve dvou sloupcích na telefonu
	   nepřečitelný — jeden pod druhým. Instagram jsou fotky, ty snesou dva. */
	.vl-zk-social { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
	.vl-zk-social[style*="repeat(3,"] { grid-template-columns: 1fr !important; }
	/* Instagramová zeď: dva sloupce embedů se na telefonu srazí na jeden —
	   embed od Instagramu má vlastní minimální šířku a v půlce displeje se
	   ořízne. */
	.vl-zk-igwall { grid-template-columns: 1fr !important; }
	.vl-zk-story [style*="grid-template-columns:1.15fr 1fr"] { display: flex !important; flex-direction: column !important; gap: 16px !important; }
	.vl-zk-story [style*="padding:34px 36px"] { padding: 22px 16px !important; }
}

/* Hlavička sekce výpisu (nadpis · poznámka): pod 1240 px se poznámka vedle
   nadpisu nevejde a dobíhala pod zvýrazněnou kartu, která do řádku vyčnívá
   (má margin-top:-37px) a svým pozadím ji překryla. Poznámka jde pod nadpis
   a smí se zalomit; oddělovací tečka je pak zbytečná. */
@media (max-width: 1240px) {
	.vl-sechead { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
	.vl-sechead > span[style*="color:#d5d2c6"] { display: none !important; }
	.vl-sechead > span[style*="color:#5d6b62"] { max-width: 46ch; }
}

/* Kvíz průvodce (plugin vlasimo-pruvodce) — sjednocení s CTA a barvami webu.
   Do pluginu se nesahá; přepis jde přes jeho vlastní tokeny na wrapperu. */
.vpv-quiz-wrapper {
	--vpv-primary: #0d8f46;
	--vpv-primary-hover: #0b7c3d;
	--vpv-primary-light: #e4eee6;
	--vpv-secondary: #5d6b62;
	--vpv-secondary-hover: #3d443e;
	--vpv-text: #16211c;
	--vpv-text-muted: #5d6b62;
	--vpv-bg: #ffffff;
	--vpv-bg-alt: #fdfcf8;
	--vpv-border: #e3e0d4;
	--vpv-radius: 14px;
	--vpv-radius-sm: 10px;
	--vpv-font: Poppins, Helvetica, Arial, sans-serif;
}
.vpv-quiz-wrapper .vpv-btn--primary {
	border-radius: 12px;
	font-weight: 600;
	box-shadow: 0 3px 0 #075c2e;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.vpv-quiz-wrapper .vpv-btn--primary:hover:not(:disabled) {
	background: var(--vpv-primary);
	transform: translateY(2px);
	box-shadow: 0 1px 0 #075c2e;
}
.vpv-quiz-wrapper .vpv-btn--secondary {
	border-radius: 12px;
	font-weight: 600;
	border: 1.5px solid #d5d2c6;
	color: #16211c;
}
.vpv-quiz-wrapper .vpv-btn--secondary:hover { border-color: #0b7c3d; background: #ffffff; }
/* Výsledkové karty kvízu — „Do košíku" ve stejném střihu jako webová CTA. */
.vpv-quiz-wrapper .vpv-product-btn {
	background: #0d8f46;
	color: #ffffff;
	border: 0;
	border-radius: 12px;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	min-height: 48px;
	box-shadow: 0 3px 0 #075c2e;
	transition: transform .12s ease, box-shadow .12s ease;
	cursor: pointer;
}
.vpv-quiz-wrapper .vpv-product-btn:hover:not(:disabled) {
	background: #0d8f46;
	transform: translateY(2px);
	box-shadow: 0 1px 0 #075c2e;
}
.vpv-quiz-wrapper .vpv-product-btn:disabled {
	background: #e3e0d4; color: #8a887f; box-shadow: none; cursor: not-allowed;
}

/* Wrapper otevírací tečky (cpp-oh-w) — reveal skript maže inline display:none,
   tohle drží tečku svisle na středu řádku. */
.vl .cpp-oh-w { display: inline-flex; align-items: center; }

/* Mobilní vrstva (návrh „Vlasimo homepage – mobil"): markup desktop/mobil se přepíná v 760 px. */
.vl-mobile { display: none; }
.vl-mobile h1 strong { font-weight: inherit; color: #0b7c3d; }
/* Mobilní menu (návrh „Vlasimo mobilní menu“, zip 11, 6. 9.): markup je inline
   z návrhu v parts/header-mobile.php (generuje tools/build-mobile.py), tady jen
   to, co inline nejde — poslední položka bez linky. Banner akce nahoře kreslí
   parts/mmenu-promo.php z běžící kampaně. */
.vl-mm-nav a:last-child { border-bottom: 0 !important; }
/* Hranice vrstev: mobil do 768 px včetně (Davidovo zadání 1. 9. — starší iPady
   a iPad mini mají 744–768 px a mobilní rozložení jim sluší víc), tablet od
   769 px. Do té doby to bylo 760 px. */
@media (max-width: 768px) {
	.vl-desktop { display: none !important; }
	.vl-mobile { display: block; }
	/* Modaly (story/recipe) sdílí desktopový markup — na mobilu jeden sloupec,
	   přes celou šířku okna (Davidova korekce 2. 9.: bez okrajů a zaoblení). */
	[data-vl-modal] > div { padding: 0 !important; align-items: stretch !important; }
	[data-vl-modal] > div > div { max-height: 100vh !important; max-height: 100dvh !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; }
	[data-vl-modal] div[style*="padding:44px 48px"] { padding: 20px 14px !important; }
	/* Citační karta příběhu — obsah přes celou šířku (Davidova korekce 2. 9.). */
	[data-vl-modal] div[style*="padding:34px 36px 30px"] { padding: 22px 16px 18px !important; }
	/* Ozdobné uvozovky (vlasimo_quote_badge) blíž k hraně a menší — na mobilu
	   je modal na plnou šířku a 24 px odsazení odsud vypadalo náhodně. */
	[data-vl-modal] .vl-quote { left: 14px !important; width: 32px !important; height: 32px !important; top: -16px !important; }
	/* Křížek s float:right nutí flexový obsah uhnout (BFC) — o 54 px užší obsah. */
	[data-vl-modal] div[style*="float:right"] { float: none !important; margin-bottom: -38px; }
	/* Patička modalu: poznámka + CTA pod sebe, tlačítko přes celou šířku. */
	[data-vl-modal] div[style*="justify-content:space-between"][style*="padding-top:22px"] { flex-direction: column; align-items: stretch !important; gap: 14px !important; }
	[data-vl-modal] div[style*="padding-top:22px"] > a[style*="box-shadow:0 3px 0"] { justify-content: center; }
	[data-vl-modal] div[style*="grid-template-columns:1.15fr 1fr"] { display: flex !important; flex-direction: column !important; }
	[data-vl-modal] div[style*="grid-template-columns:1fr 1fr;"] { display: flex !important; flex-direction: column !important; }
	[data-vl-modal] p[style*="text-align:justify"], [data-vl-modal] div[style*="text-align:justify"] { text-align: left !important; }
}

/* Mobilní výpis: tlačítko průvodce (shortcode design=simple) ve stylu zeleného CTA
   z návrhu. Plugin má na simple variantě background:none !important — přebíjí se
   vyšší specificitou (.vl-mobile + oba classy) a vlastním !important. */
.vl-mobile .vpv-modal-trigger.vpv-modal-trigger--simple,
.vl-mobile .vpv-modal-trigger.vpv-modal-trigger--simple:hover {
	height: 40px; padding: 0 16px !important;
	background: #0d8f46 !important; color: #ffffff;
	border: 0 !important; border-radius: 10px;
	display: flex; align-items: center;
	font-size: 13px; font-weight: 600;
	box-shadow: 0 3px 0 #075c2e !important;
	cursor: pointer; white-space: nowrap; font-family: inherit;
}
.vl-mobile .vpv-modal-trigger--simple .vpv-trigger-icon { display: none; }

/* PDP hlavní CTA — „stisk" z návrhu (style-hover/active inline nejde). */
.vl [data-vl-add]:hover { transform: translateY(2px); box-shadow: 0 2px 0 #075c2e !important; }
.vl [data-vl-add]:active { transform: translateY(4px); box-shadow: 0 0 0 #075c2e !important; }

/* Kupónový rámeček EXTRA: pod 1300 px (úzká okna, iPad na šířku) se badge
   zkracuje na „%" — plný text se na 4sloupcové mřížce lámal na tři řádky. */
.vl-ex-sm { display: none; }
@media (max-width: 1300px) {
	.vl-ex-lg { display: none; }
	.vl-ex-sm { display: inline; }
}

/* Notch / status bar. Stránka kreslí pod safe area (viewport-fit=cover
   v header.php), takže o její výšku odsadíme horní mobilní lištu a stejnou
   barvou vyplníme pruh nad ní — barvu drží --vl-notch, kterou podle běžící
   kampaně vypisuje functions.php (stejná hodnota jako v meta theme-color).
   Odsazovat body nešlo: jeho pozadí (#fdfcf8) se kreslí i pod padding, takže
   by pruh zůstal bílý. Na desktopu je inset 0 a .vl-mtop je display:none. */
.vl-mtop {
	padding-top: env(safe-area-inset-top);
	background: var(--vl-notch, #ffd21f);
}
/* Hlavička se přepíná dřív než obsah stránek (Davidovo zadání 2. 9.): desktopový
   topbar (telefon · otevírací doba · kód akce · jazyk · odkazy) je jednořádkový
   a pod 840 px se začne mačkat, proto od 839 px níž nastupuje mobilní hlavička.
   O akci se tím nepřijde — mobilní vrstva ji má nahoře v promo-bar-mobile.
   Obsah stránek dál přepíná .vl-desktop/.vl-mobile na 768 px, tohle je jen
   hlavička (proto vlastní třídy, ne posun obecné hranice vrstev). */
@media (max-width: 839px) {
	.vl-hdr { display: none !important; }
	.vl-hdr-m { display: block !important; }
}
/* Pojistka pro prohlížeče, které barvu horního pruhu berou z canvasu, ne
   z obsahu — pozadí <html> se propaguje do safe area i do bounce oblasti.
   Jen na mobilu: na desktopu by se barva lišty ukázala při přetažení stránky. */
@media (max-width: 760px) {
	html { background: var(--vl-notch, #ffd21f); }
}
/* Celoobrazovkové overlaye (mobilní menu) kreslí přes safe area samy. */
[data-vl-mmenu] { padding-top: env(safe-area-inset-top); }

/* Karty kúr: nad nadpisem „Vlasová kúra" byla na širokých obrazovkách zbytečně
   velká díra (hlavička je jednořádková, popisek se vejde vedle nadpisu). Nad
   1024 px se odsazení zkracuje o 25 px; pod tím zůstává původních 42 px pro
   případ, že se popisek („Čím delší kúra… ušetříte až X Kč") zalomí — s dnešní
   délkou textu se v desktopovém rozsahu nezalomí, hranice je proto na šířce. */
@media (min-width: 1024px) {
	.vl-kury-grid { --vl-kury-top: 17px; }
}

/* Meta pruh pod hero CTA (hvězdičky · počet hodnocení · denní dávka).
   Bez media query: hádat breakpoint podle šířky textu se neosvědčilo — headless
   měření (374 px) i odhady 385 a 400 px byly pod skutečnou potřebou iPhonu,
   protože systémové renderování písma je širší a text se navíc mění s cenou
   i počtem hodnocení. Místo toho `nowrap` na položkách (žádná se nesmí zlomit
   uvnitř) a `flex-wrap` na pruhu: dokud se vejdou, drží jeden řádek, jinak
   cena spadne pod hvězdičky s hodnocením, obojí vycentrované. Mezery jsou
   v inline stylu rozepsané na osy (column-gap 14px, row-gap 5px): zkratka
   `gap` by se sem nedala přebít z třídy, inline vyhrává nad selektorem.
   Oddělovací tečka je pryč, při zalomení by zůstala viset na konci řádku. */
.vl-meta { flex-wrap: wrap; }
.vl-meta__stars,
.vl-meta__reviews,
.vl-meta__price { white-space: nowrap; }
.vl-meta__sep { display: none; }

/* Nadpisek nad H1 na mobilu: „České výrobky · Sedm let pomáháme vlasům růst".
   Změřeno, že obě části s tečkou a odsazením potřebují 403 px viewportu
   (107 + 4 + 234 px textu + 18 px mezer + 40 px paddingu); pod tím se zalomí
   na dva řádky, tak se první část i tečka schovají a zůstane jen delší půlka.
   Hranice 409 px nechává rezervu ~6 px a drží obě části na 412px Androidech. */
@media (max-width: 409px) {
	.vl-kicker__pre,
	.vl-kicker__dot { display: none !important; }
}

/* ---------------------------------------------------------------------------
   TABLET (≤ 1024 px) — rozložení podle návrhu „Vlasimo homepage – 1B – tablet",
   ale grafika i texty zůstávají desktopové (Davidovo zadání 1. 9.). Desktopová
   vrstva se tedy nepřepisuje, jen se v media query stahují rozměry, na kterých
   návrh stojí: wrapper 1440 → 1024 px, vodorovné odsazení 48 → 32 px, USP pás
   ze čtyř sloupců na dva, hero nižší a s fotkou vpravo dole, nadpisy o pětinu
   menší (40→32, 34→27, 30→24, 64→51 px).

   Inline styly z dc renderu jde přebít jen `!important`; kde na prvku není
   třída, míří se na hodnotu v `style` atributu. Je to křehčí než třída, ale
   nevyžaduje sahat do markupu na desítkách míst — a hodnoty jsou z návrhu,
   takže se mění společně s ním.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.vl-wrap {
		max-width: 1024px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	/* USP pás: čtyři položky vedle sebe se do 1024 px nevejdou */
	.vl-wrap[style*="repeat(4, auto)"] {
		grid-template-columns: repeat(2, 1fr) !important;
		justify-content: normal !important;
		row-gap: 20px !important;
	}

	/* Hero: nižší, fotka zarovnaná k pravému dolnímu rohu a zmenšená na výšku */
	/* Fotka drží výšku hero i tady (Davidovo zadání) — na desktopu i tabletu
	   `auto 100%`. Levý okraj fotky sedí na 45vw (procenta by tu nefungovala —
	   `background-position` v procentech je poměr, ne offset, a fotka širší než
	   kontejner by skončila skoro na nule a přejela text). Zprava se ořezává:
	   na 1024 px zbude krabička se šamponem, na užších jen krabička. */
	.vl-hero {
		min-height: 560px !important;
		background-position: 0 100%, 0 0, 45vw 0 !important;
		background-size: auto, auto, auto 100% !important;
	}
	.vl-hero-copy {
		max-width: 520px !important;
		padding: 32px 32px 40px !important;
	}

	/* Nadpisy — poměr z návrhu */
	.vl-desktop [style*="font-size:40px"] { font-size: 32px !important; }
	.vl-desktop [style*="font-size:34px"] { font-size: 27px !important; }
	.vl-desktop [style*="font-size:30px"] { font-size: 24px !important; }
	.vl-desktop [style*="font-size:64px"] { font-size: 51px !important; }

	/* Hlavička: na 1024 px se logo, menu a obě tlačítka ještě vejdou, na 768 už
	   ne (tlačítko Produkty přetékalo o 44 px). Stahují se proto mezery a písmo
	   menu — schovávat položky by na tabletu byla zbytečná ztráta navigace. */
	.vl-wrap[style*="height:76px"],
	.vl-wrap[style*="height:72px"] { gap: 22px !important; }
	.vl-wrap[style*="height:34px"] { gap: 16px !important; }
	.vl-topbar__side { gap: 12px; }
	.vl-topbar__side--end { gap: 10px; }
	.vl-topbar__promo2 { display: none; }
	/* Logo a tlačítko košíku se ve zúženém flexu smrskávaly (logo na 1 px,
	   košík se lámal na dva řádky). */
	.vl-wrap[style*="height:76px"] img,
	.vl-wrap[style*="height:72px"] img { flex: none; }
	.vl-wrap[style*="height:76px"] a,
	.vl-wrap[style*="height:72px"] a { white-space: nowrap; flex: none; }

	/* Vnitřní odsazení karet 01–04 a sekcí s vlastním pozadím */
	.vl-desktop [style*="padding:52px 56px"] { padding: 52px 36px !important; }
	.vl-desktop [style*="padding:56px 48px"] { padding: 36px 32px !important; }
	.vl-desktop [style*="padding:44px 48px"] { padding: 44px 32px !important; }
}

@media (max-width: 900px) {
	/* Užší tablety (769–900 px). Návrh je kreslený na 1024, takže
	   se tu jen dál stahuje: menší písmo a mezery v menu, aby se vedle loga
	   vešla obě tlačítka, a užší fotka v hero, aby nelezla pod text. */
	.vl-wrap[style*="height:76px"] a,
	.vl-wrap[style*="height:72px"] a { font-size: 13.5px !important; }
	.vl-wrap[style*="height:76px"],
	.vl-wrap[style*="height:72px"] { gap: 10px !important; }
	/* Menu samo bylo 474 px a hlavička se do 753 px nevešla o 42 px — stahuje
	   se proto i jeho vnitřní mezera a písmo, ne jen mezery mezi bloky. */
	.vl-wrap[style*="height:76px"] [style*="gap:30px"],
	.vl-wrap[style*="height:72px"] [style*="gap:30px"] {
		gap: 13px !important;
		font-size: 13.5px !important;
	}
	.vl-wrap { padding-left: 20px !important; padding-right: 20px !important; }

	.vl-hero-copy { max-width: 56% !important; padding-left: 20px !important; }
}

/* Košík v hlavičce: na širokém desktopu slovo + počet, od 1100 px níž ikona
   + počet — v sražené hlavičce je slovo zbytečná šířka a ikona je stejná jako
   v mobilní vrstvě, takže se vzhled napříč vrstvami neroztříští. Hranice byla
   do 2. 9. na 1024 px, jenže mezi 1025 a 1100 se tlačítko srazilo tak, že se
   „Košík · 14" zalomilo na dva řádky a přeteklo z rámečku. Zákaz zalomení drží
   `white-space` i nad 1100, aby to nešlo zopakovat delším popiskem. */
.vl-cart__icon { display: none; }
.vl-cart { white-space: nowrap; }
@media (max-width: 1100px) {
	.vl-cart__icon { display: block; }
	.vl-cart__label { display: none; }
	.vl-cart { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 1024px) {
	/* Domeček v menu je na tabletu zbytečný — logo vede na úvod taky a v sražené
	   hlavičce je každý pixel znát. */
	.vl-wrap [aria-label="Domů"], .vl-wrap [aria-label="Domov"] { display: none !important; }
}
/* ==== Tablet 769–1024 px pro všechny stránky — layout z design/tablet
   návrhů (tools/gen-tablet.py + ruční revize), grafika zůstává desktopová.
   Cílení přes [style*=…]: inline styly z dc renderu jinak přebít nejde. ==== */
@media (min-width: 769px) and (max-width: 1024px) {
	[style*="max-width:1440px; margin:0 auto; height:34px; display:flex; align-items:center"] { max-width: 1024px !important; padding: 0 32px !important; }
	[style*="max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:40px; padding:0 48px; height:76px"] { max-width: 1024px !important; padding: 0 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:24px 48px 0; font-size:13px; color:#8a887f"] { max-width: 1024px !important; padding: 24px 32px 0 !important; }
	[style*="max-width:1440px; margin:0 auto; padding:36px 48px 64px; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center"] { gap: 36px !important; max-width: 1024px !important; padding: 36px 32px 64px !important; }
	[style*="margin:18px 0 0; font-size:42px; line-height:1.12; font-weight:600; letter-spacing:-.025em; color:#16211c; text-wrap:pretty"] { font-size: 34px !important; }
	[style*="display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:10px; max-width:520px"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="font-size:46px; font-weight:600; letter-spacing:-.02em"] { font-size: 37px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:44px 48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px"] { max-width: 1024px !important; padding: 44px 32px !important; }
	[style*="max-width:940px; margin:0 auto; padding:56px 48px"] { padding: 36px 32px !important; }
	[style*="margin:0; font-size:29px; font-weight:600; letter-spacing:-.02em; color:#16211c; text-align:center"] { font-size: 26px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap"] { max-width: 1024px !important; padding: 44px 32px !important; }
	[style*="font-size:24px; font-weight:600; letter-spacing:-.02em; color:#fdfcf8"] { font-size: 22px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:44px 48px; display:grid"] { grid-template-columns: repeat(2, 1fr) !important; max-width: 1024px !important; padding: 44px 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:36px 48px 8px; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap"] { max-width: 1024px !important; padding: 36px 32px 8px !important; }
	[style*="margin:0; font-size:40px; line-height:1.14; font-weight:600; letter-spacing:-.025em; color:#16211c; text-wrap:balance"] { font-size: 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:32px 48px 0"] { max-width: 1024px !important; padding: 32px 32px 0 !important; }
	[style*="margin:0; font-size:24px; font-weight:600; letter-spacing:-.015em; color:#16211c"] { font-size: 22px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:44px 48px 0"] { max-width: 1024px !important; padding: 44px 32px 0 !important; }
	[style*="max-width:1440px; margin:0 auto; padding:48px 48px 56px"] { max-width: 1024px !important; padding: 32px 48px 36px !important; }
	[style*="margin-top:20px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="max-width:1440px; margin:0 auto; padding:36px 48px 56px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center"] { gap: 36px !important; max-width: 1024px !important; padding: 36px 32px 36px !important; }
	[style*="font-size:46px; font-weight:600; color:#ffffff; line-height:1"] { font-size: 37px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:52px 48px 0"] { max-width: 1024px !important; padding: 52px 32px 0 !important; }
	[style*="margin-top:18px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="max-width:1440px; margin:0 auto; padding:44px 48px 56px"] { max-width: 1024px !important; padding: 44px 32px 36px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:52px 48px 0; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start"] { gap: 36px !important; max-width: 1024px !important; padding: 52px 32px 0 !important; }
	[style*="margin:24px 0 0; font-size:24px; font-weight:600; letter-spacing:-.015em; color:#16211c"] { font-size: 22px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:44px 48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px"] { grid-template-columns: repeat(2, 1fr) !important; max-width: 1024px !important; padding: 44px 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:52px 48px 56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center"] { gap: 32px !important; max-width: 1024px !important; padding: 52px 32px 36px !important; }
	[style*="max-width:900px; margin:0 auto; padding:40px 48px 8px; text-align:center"] { padding: 40px 32px 8px !important; }
	[style*="margin:16px 0 0; font-size:42px; line-height:1.14; font-weight:600; letter-spacing:-.025em; color:#16211c; text-wrap:balance"] { font-size: 34px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:36px 48px 12px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px"] { max-width: 1024px !important; padding: 36px 32px 12px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:32px 48px 56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center"] { gap: 32px !important; max-width: 1024px !important; padding: 32px 32px 36px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:10px 48px"] { max-width: 1024px !important; padding: 10px 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:20px 48px 0; display:flex; flex-direction:column; gap:10px"] { max-width: 1024px !important; padding: 20px 32px 0 !important; }
	[style*="margin:0; font-size:38px; line-height:1.1; font-weight:600; letter-spacing:-.025em; color:#16211c"] { font-size: 30px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:32px 48px 56px; display:grid"] { max-width: 1024px !important; padding: 32px 32px 36px !important; }
	[style*="font-size:26px; font-weight:600; letter-spacing:-.01em; color:#ffd21f"] { font-size: 23px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:64px 48px"] { gap: 40px !important; max-width: 1024px !important; padding: 64px 32px !important; }
	[style*="margin:0; font-size:34px; line-height:1.15; font-weight:600; letter-spacing:-.02em; color:#16211c; text-wrap:pretty"] { font-size: 27px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:56px 48px; display:flex; flex-direction:column; gap:28px"] { max-width: 1024px !important; padding: 36px 32px !important; }
	[style*="margin:0; font-size:28px; line-height:1.15; font-weight:600; letter-spacing:-.02em; color:#16211c"] { font-size: 25px !important; }
	[style*="border-top:1px solid #e8e5d9; border-bottom:1px solid #e8e5d9"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="max-width:1440px; margin:0 auto; padding:0 48px 56px"] { max-width: 1024px !important; padding: 0 32px 36px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:32px 48px 56px; display:grid; grid-template-columns:1fr 1.35fr; gap:32px; align-items:start"] { max-width: 1024px !important; padding: 32px 32px 36px !important; }
	[style*="font-size:24px; font-weight:600; color:#0b7c3d"] { font-size: 22px !important; }
	[style*="max-width:860px; margin:0 auto; padding:36px 48px 0; text-align:center"] { padding: 36px 32px 0 !important; }
	[style*="margin:18px 0 0; font-size:40px; line-height:1.16; font-weight:600; letter-spacing:-.02em; color:#16211c; text-wrap:balance"] { font-size: 32px !important; }
	[style*="max-width:1160px; margin:0 auto; padding:28px 48px 0"] { padding: 28px 32px 0 !important; }
	[style*="max-width:1160px; margin:0 auto; padding:40px 48px 72px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:52px; align-items:start"] { padding: 40px 32px 72px !important; }
	[style*="max-width:1160px; margin:0 auto; padding:44px 48px 56px"] { padding: 44px 32px 36px !important; }
	[style*="margin:0; font-size:25px; font-weight:600; letter-spacing:-.015em; color:#16211c"] { font-size: 23px !important; }
	[style*="max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:12px 48px"] { max-width: 1024px !important; padding: 12px 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:48px; display:flex; flex-direction:column; gap:24px"] { max-width: 1024px !important; padding: 32px !important; }
	[style*="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px"] { grid-template-columns: repeat(2, 1fr) !important; }
	[style*="max-width:1440px; margin:0 auto"] { max-width: 1024px !important; }
	[style*="padding:44px 48px 0; display:flex; align-items:center; justify-content:space-between; gap:24px"] { padding: 44px 32px 0 !important; }
	[style*="font-size:32px; font-weight:600; color:#16211c; line-height:1"] { font-size: 26px !important; }
	[style*="padding:40px 48px 0; display:flex; align-items:flex-end; justify-content:space-between; gap:24px"] { padding: 40px 32px 0 !important; }
	[style*="margin:0; font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.02em; color:#16211c"] { font-size: 24px !important; }
	[style*="font-size:27px; font-weight:600; letter-spacing:-.02em"] { font-size: 24px !important; }
	[style*="padding:48px 48px 0; display:flex; align-items:flex-end; justify-content:space-between; gap:24px"] { padding: 32px 48px 0 !important; }
	[style*="font-size:24px; font-weight:600; letter-spacing:-.02em; color:#16211c; line-height:1"] { font-size: 22px !important; }
	[style*="font-size:29px; font-weight:600; letter-spacing:-.01em; color:#ffd21f"] { font-size: 26px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:52px 48px 56px"] { max-width: 1024px !important; padding: 52px 32px 36px !important; }
	[style*="margin:0; font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.02em; color:#ffffff"] { font-size: 24px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:48px 48px 56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center"] { gap: 32px !important; max-width: 1024px !important; padding: 32px 48px 36px !important; }
	[style*="margin:14px 0 0; font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.02em; color:#16211c"] { font-size: 24px !important; }
	[style*="font-size:38px; font-weight:600"] { font-size: 30px !important; }
	[style*="padding:24px 48px 0; font-size:13px; color:#8a887f"] { padding: 24px 32px 0 !important; }
	[style*="display:grid; grid-template-columns:1fr 1.1fr; gap:56px; padding:24px 48px 56px"] { gap: 36px !important; padding: 24px 32px 36px !important; }
	[style*="display:grid; grid-template-columns:repeat(6, 1fr); gap:8px"] { grid-template-columns: repeat(3, 1fr) !important; }
	[style*="font-size:40px; font-weight:600; letter-spacing:-.03em; color:#16211c; line-height:.95"] { font-size: 32px !important; }
	[style*="padding:16px 48px 56px; display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:start"] { gap: 36px !important; padding: 16px 32px 36px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:48px; display:flex; flex-direction:column; gap:20px"] { max-width: 1024px !important; padding: 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:48px 48px 8px; display:grid; grid-template-columns:1fr 1fr; gap:24px"] { max-width: 1024px !important; padding: 32px 48px 8px !important; }
	[style*="font-size:44px; font-weight:600; color:#16211c; line-height:.9"] { font-size: 35px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:0 48px 56px; display:flex; flex-direction:column; gap:20px"] { max-width: 1024px !important; padding: 0 32px 36px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:10px 48px; display:flex; align-items:center; gap:14px"] { max-width: 1024px !important; padding: 10px 32px !important; }
	[style*="margin:0; font-size:38px; line-height:1.12; font-weight:600; letter-spacing:-.025em; color:#16211c; text-wrap:pretty"] { font-size: 30px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:32px 48px 8px"] { max-width: 1024px !important; padding: 32px 32px 8px !important; }
	[style*="margin:0; font-size:38px"] { font-size: 30px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:28px 48px 64px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start"] { max-width: 1024px !important; padding: 28px 32px 64px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:28px 48px 8px; display:flex; align-items:baseline; justify-content:space-between; gap:20px"] { max-width: 1024px !important; padding: 28px 32px 8px !important; }
	[style*="margin:0; font-size:34px; font-weight:600; letter-spacing:-.025em; color:#16211c"] { font-size: 27px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:20px 48px 64px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; align-items:start"] { grid-template-columns: 210px minmax(0,1fr) !important; max-width: 1024px !important; padding: 20px 32px 64px !important; }
	[style*="font-size:38px; font-weight:600; color:#ffffff; line-height:1"] { font-size: 30px !important; }
	[style*="font-size:42px; font-weight:600; color:#ffffff; line-height:1"] { font-size: 34px !important; }
	[style*="font-size:24px; font-weight:600; letter-spacing:-.02em"] { font-size: 22px !important; }
	[style*="font-size:28px; font-weight:600; letter-spacing:-.02em; color:#16211c; line-height:1"] { font-size: 25px !important; }
	[style*="max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:40px; padding:0 48px; height:72px"] { max-width: 1024px !important; padding: 0 32px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:36px 48px 64px; display:grid"] { max-width: 1024px !important; padding: 36px 32px 64px !important; }
	[style*="max-width:1440px; margin:0 auto; padding:18px 48px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12.5px; color:#8a887f"] { max-width: 1024px !important; padding: 18px 32px !important; }
	/* Sekce recenzí na detailu produktu: sloupec `1fr` má automatické minimum,
	   takže ho dvojice karet vedle sebe roztáhne na svou min-content šířku
	   (496 px) místo aby se zmenšil — celá stránka pak přetékala doprava
	   (na 820 px o 53 px) a na fixed liště „Do košíku" chyběl pravý okraj.
	   `minmax(0, 1fr)` zmenšení dovolí, karty jdou pod sebe. Generátor tabletu
	   tenhle vzor nezná: sekce je až v single-product.php, ne v dc renderu. */
	.vl-pdp [style*="grid-template-columns:320px 1fr"] { grid-template-columns: 260px minmax(0, 1fr) !important; }
	.vl-pdp [data-vl-rev-grid] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==== MOBIL ≤768: obsah content stránek (.vl-dcontent) — layout dle
   mobilních návrhů (jednosloupcový stack, menší škála), grafika i texty
   zůstávají ze současného desktopu. Hlavičku/patičku řeší .vl-mobile vrstva. ==== */
@media (max-width: 768px) {
	/* kontejnery: odsazení 48 → 20 px (mapa reálných hodnot ze šablon) */
	.vl-dcontent [style*="padding:24px 48px 0"] { padding: 14px 20px 0 !important; }
	.vl-dcontent [style*="padding:44px 48px"] { padding: 28px 20px !important; }
	.vl-dcontent [style*="padding:48px"] { padding: 28px 20px !important; }
	.vl-dcontent [style*="padding:44px 48px 56px"] { padding: 28px 20px 36px !important; }
	.vl-dcontent [style*="padding:36px 48px 56px"] { padding: 24px 20px 36px !important; }
	.vl-dcontent [style*="padding:52px 48px 0"] { padding: 30px 20px 0 !important; }
	.vl-dcontent [style*="padding:32px 48px 56px"] { padding: 22px 20px 36px !important; }
	.vl-dcontent [style*="padding:56px 48px"] { padding: 32px 20px !important; }
	.vl-dcontent [style*="padding:52px 48px 56px"] { padding: 30px 20px 36px !important; }
	.vl-dcontent [style*="padding:48px 48px 8px"] { padding: 28px 20px 8px !important; }
	.vl-dcontent [style*="padding:32px 48px 8px"] { padding: 22px 20px 6px !important; }
	/* Karty přihlášení a registrace (/muj-ucet/): návrh má uvnitř 30/32 px,
	   na 390px telefonu z toho na obsah zbyde 286 px a nadpis stránky nad
	   nimi visel o 28 px dál doprava než ony (David 4. 9.). */
	.vl-dcontent [style*="padding:30px 32px"] { padding: 20px !important; }
	.vl-dcontent [style*="justify-content:space-between; align-items:center; margin-top:14px"] { flex-wrap: wrap; gap: 10px; }
	/* /muj-ucet/ (přihlášení i dashboard): obal WC stránek `.h-wc-page` přidává
	   po stranách 24 px a obsah účtu k tomu svoje odsazení — dohromady 44 px,
	   zatímco zbytek webu (vzor /vse-o-nakupu/) má 16 px. Obal se tu tedy
	   vynuluje stejně jako na pokladně (`.woocommerce-checkout .h-wc-page`)
	   a bloky stránky dostanou 16 px po stranách (David 4. 9.). */
	/* Jen stránky s novou vrstvou (.vl-dcontent) — dashboard účtu svou mobilní
	   verzi zatím nemá a 24 px po stranách je tam pořád lepší než nic. */
	.woocommerce-account .h-wc-page:has(.vl-dcontent) { padding-left: 0; padding-right: 0; }
	.woocommerce-account .vl-dcontent > div { padding-left: 16px !important; padding-right: 16px !important; }
	.woocommerce-account .vl-dcontent > div:first-child { padding-bottom: 0 !important; }
	/* Nástěnka účtu: sidebar 260px + obsah vedle sebe se na telefon nevejde. */
	/* Sidebar 260px + obsah vedle sebe se na telefon nevejde. `display:block`
	   místo přepsání tracků: `minmax(0,1fr)` tu track stejně roztáhl na 431 px
	   (obsah karet má větší min-content) a stránka přetékala. */
	.vl-dcontent [style*="grid-template-columns:260px minmax(0,1fr)"] { display: block !important; }
	.vl-dcontent [style*="grid-template-columns:260px minmax(0,1fr)"] > * + * { margin-top: 16px; }
	/* Řádek poslední objednávky (číslo | položky | stav | Objednat znovu) —
	   čtyři sloupce se na 390 px nevejdou, štítek stavu vylézal ze stránky. */
	.vl-dcontent [style*="grid-template-columns:auto 1fr auto auto"] { display: flex !important; flex-wrap: wrap; gap: 10px 12px !important; }
	.vl-dcontent [style*="grid-template-columns:auto 1fr auto auto"] > div[style*="min-width:0"] { flex: 1 1 100%; order: -1; }
	/* Karty nástěnky (Moje kúra, Extra body): text vedle tlačítka se na 390 px
	   mačká do dvou znaků na řádek — pod sebe. Vnitřní odsazení 26/30 px na 20. */
	.woocommerce-account .vl-dcontent [style*="grid-template-columns:1fr auto"] { display: block !important; }
	.woocommerce-account .vl-dcontent [style*="grid-template-columns:1fr auto"] > * + * { margin-top: 16px; }
	.woocommerce-account .vl-dcontent [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
	.woocommerce-account .vl-dcontent [style*="padding:26px 30px"] { padding: 20px !important; }
	.woocommerce-account .vl-dcontent [style*="padding:24px 26px"] { padding: 20px !important; }
	/* Karta „Dochází vám zásoba" (.h-acct-restock) se sice od 900 px zalamuje,
	   ale text má `flex:1; min-width:0`, takže se místo zalomení smrskl na pět
	   znaků na řádek. Základ 180 px ho drží vedle fotky, tlačítko jde pod ně. */
	.h-acct-restock__body { flex: 1 1 180px; }
	/* Totéž pro kartu zásoby na nástěnce (vlastní markup stavu B, ne
	   .h-acct-restock): fotka | text | tlačítko v jedné řadě. Text má
	   `flex:1; min-width:0`, takže se bez základu smrskl na pět znaků. */
	.woocommerce-account .vl-dcontent [style*="padding:20px 24px; display:flex"] { flex-wrap: wrap; }
	.woocommerce-account .vl-dcontent [style*="padding:20px 24px; display:flex"] > [style*="flex:1; min-width:0"] { flex: 1 1 180px; }
	.woocommerce-account .vl-dcontent [style*="padding:20px 24px; display:flex"] > [style*="height:48px"] { flex: 1 1 100%; }
	.woocommerce-account .vl-dcontent [style*="padding:32px 48px 8px"] { padding-top: 14px !important; padding-bottom: 4px !important; }
	.vl-dcontent [style*="padding:48px 48px 56px"] { padding: 28px 20px 36px !important; }
	.vl-dcontent [style*="padding:44px 48px 0"] { padding: 28px 20px 0 !important; }
	.vl-dcontent [style*="padding:40px 48px 8px"] { padding: 26px 20px 8px !important; }
	.vl-dcontent [style*="padding:40px 48px 72px"] { padding: 26px 20px 40px !important; }
	.vl-dcontent [style*="padding:36px 48px 8px"] { padding: 24px 20px 8px !important; }
	.vl-dcontent [style*="padding:36px 48px 64px"] { padding: 24px 20px 40px !important; }
	.vl-dcontent [style*="padding:36px 48px 12px"] { padding: 24px 20px 12px !important; }
	.vl-dcontent [style*="padding:36px 48px 0"] { padding: 24px 20px 0 !important; }
	.vl-dcontent [style*="padding:0 48px"] { padding: 0 20px !important; }
	/* `padding:0 48px` je substring i pro `padding:0 48px 56px`, proto musí
	   konkrétnější pravidlo stát AŽ ZA obecným — jinak pás zpětné vazby na
	   Kontaktech seděl na CTA pruhu bez mezery (David 6. 9.). */
	.vl-dcontent [style*="padding:0 48px 56px"] { padding: 0 20px 36px !important; }
	.vl-dcontent [style*="padding:16px 48px"] { padding: 12px 20px !important; }
	.vl-dcontent [style*="padding:28px 48px"] { padding: 20px 20px !important; }
	.vl-dcontent [style*="padding:24px 48px"] { padding: 16px 20px !important; }
	.vl-dcontent [style*="padding:24px 48px 56px"] { padding: 16px 20px 36px !important; }
	.vl-dcontent [style*="padding:40px 48px 0"] { padding: 26px 20px 0 !important; }
	.vl-dcontent [style*="padding:40px 48px 56px"] { padding: 26px 20px 36px !important; }
	.vl-dcontent [style*="padding:56px 48px 64px"] { padding: 32px 20px 40px !important; }
	.vl-dcontent [style*="padding:64px 48px"] { padding: 36px 20px !important; }
	.vl-dcontent [style*="padding:48px 48px 64px"] { padding: 28px 20px 40px !important; }
	.vl-dcontent [style*="padding:52px 48px 8px"] { padding: 30px 20px 8px !important; }
	.vl-dcontent [style*="padding:44px 48px 52px"] { padding: 28px 20px 34px !important; }
	.vl-dcontent [style*="padding:42px 48px 8px"] { padding: 26px 20px 8px !important; }
	.vl-dcontent [style*="padding:12px 48px"] { padding: 10px 20px !important; }
	/* vícesloupcové layouty → jeden sloupec */
	.vl-dcontent [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.05fr .95fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.02fr .98fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1fr 1.35fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1fr 1.1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.15fr 1fr"] { grid-template-columns: 1fr !important; }
	/* `minmax(0,1fr)`, ne `1fr`: `1fr` má auto minimum, takže široký obsah
	   (dlouhé URL, tabulka) sloupec roztáhne místo aby se zmenšil. */
	.vl-dcontent [style*="grid-template-columns:minmax(0,1fr) 320px"] { grid-template-columns: minmax(0, 1fr) !important; }
	.vl-dcontent [style*="grid-template-columns:320px 1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:260px minmax(0,1fr)"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.55fr 1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.02fr 1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.1fr .9fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1.6fr 1fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:1fr 1.05fr"] { grid-template-columns: 1fr !important; }
	.vl-dcontent [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	.vl-dcontent [style*="grid-template-columns:repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
	/* srovnávací tabulky (4 sloupce) — zmenšit, ať se vejdou */
	.vl-dcontent [style*="grid-template-columns:1.7fr .8fr .7fr"] { gap: 8px !important; }
	/* typografická škála */
	.vl-dcontent [style*="font-size:46px"] { font-size: 32px !important; }
	.vl-dcontent [style*="font-size:42px"] { font-size: 29px !important; }
	.vl-dcontent [style*="font-size:40px"] { font-size: 28px !important; }
	.vl-dcontent [style*="font-size:38px"] { font-size: 27px !important; }
	.vl-dcontent [style*="font-size:36px"] { font-size: 26px !important; }
	.vl-dcontent [style*="font-size:34px"] { font-size: 25px !important; }
	.vl-dcontent [style*="font-size:32px"] { font-size: 24px !important; }
	.vl-dcontent [style*="font-size:30px"] { font-size: 22px !important; }
	.vl-dcontent [style*="font-size:29px"] { font-size: 22px !important; }
	.vl-dcontent [style*="font-size:28px"] { font-size: 22px !important; }
	.vl-dcontent [style*="font-size:27px"] { font-size: 21px !important; }
	.vl-dcontent [style*="font-size:26px"] { font-size: 20px !important; }
	.vl-dcontent [style*="font-size:25px"] { font-size: 20px !important; }
	.vl-dcontent [style*="font-size:24px"] { font-size: 19px !important; }
	/* sticky sloupce (obsah legal, karta článku) na mobilu v toku */
	.vl-dcontent [style*="position:sticky"] { position: static !important; }
}

/* ==== Pokladní ořezaná hlavička na mobilu/tabletu: krokový indikátor se
   zalamuje a stahuje, „Zabezpečená pokladna" se pod 768 px schovává —
   desktopová šířka 1440/72 px jinak na telefonu přetékala (dw 658). ==== */
@media (max-width: 1024px) {
	[style*="max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:40px; padding:0 48px; height:72px"] {
		max-width: 100% !important; gap: 16px !important; padding: 10px 16px !important;
		height: auto !important; min-height: 56px; flex-wrap: wrap;
	}
}
@media (max-width: 768px) {
	[style*="max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:40px; padding:0 48px; height:72px"] [style*="white-space:nowrap"] {
		white-space: normal !important; font-size: 12.5px !important;
	}
	/* „Zabezpečená pokladna" vpravo — na telefonu jen zabírá místo */
	[style*="max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:40px; padding:0 48px; height:72px"] > div:last-child { display: none !important; }
}
/* Pokladní trust bar v patičce (© + platební loga) — na telefonu se zalamuje. */
@media (max-width: 768px) {
	[style*="max-width:1440px; margin:0 auto; padding:18px 48px; display:flex"] {
		padding: 12px 16px !important; flex-wrap: wrap; gap: 8px 14px !important; justify-content: center;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	[style*="max-width:1440px; margin:0 auto; padding:18px 48px; display:flex"] { padding: 16px 32px !important; }
}
/* Poukazy: CTA řádek (tlačítko + poznámka) se na telefonu skládá pod sebe,
   tlačítko na plnou šířku — vedle poznámky se lámalo uvnitř textu. */
@media (max-width: 768px) {
	.vl-dcontent [style*="display:flex; align-items:center; gap:18px; margin-top:26px"] { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
	.vl-dcontent [style*="display:flex; align-items:center; gap:18px; margin-top:26px"] > [style*="height:58px"] { justify-content: center; }
	.vl-dcontent [style*="display:flex; align-items:center; gap:18px; margin-top:26px"] > span { text-align: center; }
}

/* Doprava a platba: 4sloupcové tabulky se pod 768 px mění na karty dle
   mobilního návrhu (.vl-cards) — táž data (dop_rows/pay_rows), tabulka mizí. */
.vl-cards { display: none; }
/* Hlavičky sekcí (nadpis + popisek vedle sebe) se na telefonu skládají pod sebe. */
@media (max-width: 768px) {
	.vl-dcontent [style*="display:flex; align-items:baseline; justify-content:space-between; gap:24px"] { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
}
@media (max-width: 768px) {
	.vl-dcontent .vl-tbl { display: none; }
	.vl-dcontent .vl-cards { display: flex; }
}

/* Loga dopravy a plateb v patičce (místo textových pilulek — Davidovo zadání
   3. 9.): 3×3 mřížka ve sloupci Kontakt, buňky se zmenšují, mřížka drží 3×3;
   na mobilu všech 9 v jednom řádku. */
.vl-coop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vl-coop__cell { background: #ffffff; border-radius: 10px; height: 56px; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 6px; }
.vl-coop__cell img { max-height: 26px; max-width: 78%; width: auto; display: block; }
@media (max-width: 768px) {
	.vl-coop__grid { display: flex; gap: 5px; }
	/* Devět log v jednom řádku dělá z buňky svislý obdélník — na 390 px vychází
	   šířka ~34 px proti pevné výšce 42 a loga vypadala natažená (Davidovo
	   zadání 4. 9.). Výška se proto řídí šířkou; 42 px zůstává stropem, aby
	   buňky na širokém telefonu nenarostly do zbytečné výšky. */
	.vl-coop__cell { flex: 1; height: auto; aspect-ratio: 1 / 1; max-height: 42px; border-radius: 8px; padding: 0 3px; }
	.vl-coop__cell img { max-height: 20px; max-width: 92%; }
}

/* Miniatury PDP galerie: na telefonu přesně 4 vedle sebe (Davidovo zadání
   3. 9.) — pevných 88 px dávalo jen 3 na řádek. Výšku drží aspect-ratio. */
@media (max-width: 768px) {
	.vl-dcontent .vl-galt { width: calc((100% - 30px) / 4) !important; height: auto !important; aspect-ratio: 1 / 1; }
}
/* PDP sticky spodní lišta: na telefonu jen miniatura + cena + CTA — dlouhý
   název s ratingem lištu přeléval (šampon: dw 448). Tablet stahuje odsazení. */
@media (max-width: 768px) {
	[style*="margin:0 auto; padding:10px 48px; display:flex; align-items:center; gap:14px"] { padding: 8px 14px !important; gap: 10px !important; }
	[style*="margin:0 auto; padding:10px 48px; display:flex; align-items:center; gap:14px"] > div:nth-child(2),
	[style*="margin:0 auto; padding:10px 48px; display:flex; align-items:center; gap:14px"] > div:nth-child(3) { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	[style*="margin:0 auto; padding:10px 48px; display:flex; align-items:center; gap:14px"] { padding: 10px 32px !important; }
}

/* ---- Formulář hodnocení (parts/review-form.php + woocommerce/single-product-reviews.php) ---- */
/* Hvězdičky: WooCommerce 8+ balí odkazy do <span>, takže flex z vlasimo.css
   blokifikoval jen ten wrapper a odkazy zůstaly inline — width/height ani
   text-indent na ně nezabraly a vedle hvězdy svítilo „1 z 5 hvězdiček". */
.h-revform p.stars > span { display: flex; gap: 6px; }
.h-revform p.stars a { display: block; }
.h-revform .comment-form-photos { margin: 0 0 16px; }
/* Čestné prohlášení k fotkám — řádek se ukazuje až po výběru souboru
   (`hidden` shodí skript v inc/reviews.php), proto tu není nic, co by ho
   zobrazovalo natvrdo. Zaškrtávátko 18px kvůli dotyku, text zalomený. */
.h-revform .comment-form-photos__err { display: block; margin-top: 7px; font-size: 13px; font-weight: 600; color: #b3261e; }
.h-revform .comment-form-photo-consent { margin: -6px 0 16px; }
.h-revform .comment-form-photo-consent label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #3d443e; cursor: pointer; }
.h-revform .comment-form-photo-consent input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin-top: 1px; accent-color: #0d8f46; }
.h-revform .comment-form-photos label { display: block; font-size: 13.5px; font-weight: 700; color: #3d443e; margin-bottom: 7px; }
.h-revform .comment-form-photos input[type="file"] { width: 100%; box-sizing: border-box; border: 1.5px dashed #e3e0d4; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: #3d443e; background: #fdfcf8; }
.h-revform .comment-form-photos input[type="file"]::file-selector-button { margin-right: 10px; border: 0; border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 600; color: #16211c; background: #f2efe4; cursor: pointer; }
@media (max-width: 768px) {
	/* 16px, ať iOS pole při zaostření nezvětšuje. */
	.h-revform textarea, .h-revform .comment-form-photos input[type="file"] { font-size: 16px; }
}

/* Kosmetika v modalu receptury (front-page.php). Modal je fixed prvek mimo
   .vl-dcontent i mimo vrstvy .vl-desktop/.vl-mobile, takže se na něj žádné
   z mobilních pravidel nevztahuje a hranici si nese sám. Tři karty potřebují
   po ~270 px; při 1024 px zbývá na sloupec 170 a tabulka složek přetéká. */
@media (max-width: 1024px) {
	.vl-cosm-grid { grid-template-columns: 1fr !important; }
}
/* Výběr produktu na stránce „Napsat vlastní zkušenost" — stejný vzhled jako
   ostatní pole formuláře hodnocení. */
.h-revform .comment-form-product { margin: 0 0 16px; }
.h-revform .comment-form-product label { display: block; font-size: 13.5px; font-weight: 700; color: #3d443e; margin-bottom: 7px; }
.h-revform .comment-form-product select { width: 100%; box-sizing: border-box; border: 1.5px solid #e3e0d4; border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14.5px; color: #16211c; background: #ffffff; outline: 0; }
.h-revform .comment-form-product select:focus { border-color: #0b7c3d; }
@media (max-width: 768px) {
	.h-revform .comment-form-product select { font-size: 16px; }
	.vl-nzform { padding: 22px 18px !important; border-radius: 16px !important; }
}

/* Modaly (receptura, příběh, fotka recenze, mobilní menu). Dvě věci, které se
   projevily až na telefonu:

   1. `overscroll-behavior: contain` — bez něj se po doscrollování modalu na
      konec začne hýbat stránka pod ním a modal vypadá zaseknutě (Davidův nález
      3. 9.). Samotné zamčení body nestačí, řetězení scrollu je jiný mechanismus.
   2. Na mobilu je overlay padding 40 px zbytečně velký a `100vh` na iOS počítá
      s adresním řádkem, takže se spodek modalu schová pod ním — proto 12 px
      a `100dvh` s `100vh` jako záložkou pro starší prohlížeče. */
[data-vl-modal] [style*="overflow:auto"], [data-vl-pmodal] [style*="overflow:auto"] {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
	[data-vl-modal] [style*="padding:40px"] { padding: 12px !important; }
	[data-vl-modal] [style*="max-height:calc(100vh - 80px)"] {
		max-height: calc(100vh - 24px) !important;
		max-height: calc(100dvh - 24px) !important;
	}
}

/* /kontakty/ — pás zpětné vazby („Pochvala, výtka…"). Na 390 px přetékal
   stránku o 99 px: rámeček s e-mailem má padding 22 px a jednořádkový text
   zpetnavazba@vlasimo.cz, obecná mobilní pravidla ho nesrazila. Pás pod sebe,
   rámeček na šířku pásu a e-mail smí zlomit (overflow-wrap). */
@media (max-width: 768px) {
	.vl-dcontent [style*="background:#1f4d3a; border-radius:20px; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:32px"] { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; padding: 24px 20px !important; }
	.vl-dcontent [style*="border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:14px 22px"] { padding: 12px 14px !important; min-width: 0; }
	.vl-dcontent [style*="border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:14px 22px"] > span { min-width: 0; overflow-wrap: anywhere; font-size: 15px !important; }
}

/* Stránka Složení (page-slozeni.php). Mobilní návrh pro ni není, takže
   layout jde media queries nad desktopovým markupem: hero a hlavičky sekcí
   pod sebe, karty kosmetiky (300px + 1fr) do jednoho sloupce, CTA pás je
   sdílený parts/cta-order.php. Odsazení kontejnerů 32/48/56 px nahoře
   obecná mapa nepokrývala. Háčky `.vl-slz-*` nesou jen layout, vzhled
   zůstává v inline stylech z návrhu. */
@media (max-width: 768px) {
	.vl-dcontent [style*="padding:32px 48px 0"] { padding: 22px 20px 0 !important; }
	.vl-dcontent [style*="padding:48px 48px 0"] { padding: 28px 20px 0 !important; }
	.vl-dcontent [style*="padding:56px 48px 0"] { padding: 32px 20px 0 !important; }
	.vl-slz-hero { flex-direction: column; align-items: stretch !important; gap: 20px !important; }
	.vl-slz-hero p[style*="text-align:justify"] { text-align: left !important; }
	.vl-story-card strong { white-space: normal !important; }
	.vl-slz-thead { padding: 16px !important; }
	.vl-slz-tbl { padding: 12px 16px 6px !important; }
	.vl-slz-tbl + div { padding: 10px 16px 16px !important; }
	.vl-slz-cos-head { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
	.vl-slz-cos-head > span { text-align: left !important; max-width: none !important; }
	.vl-slz-cos { grid-template-columns: 1fr !important; }
	.vl-slz-cos > div:first-child { border-right: 0 !important; border-bottom: 1px solid #e3e0d4; padding: 20px !important; }
	.vl-slz-cos > div:first-child img { max-height: 180px !important; }
	.vl-slz-cos > div:last-child { padding: 18px 16px !important; }
	.vl-slz-cos p[style*="text-align:justify"] { text-align: left !important; }
	.vl-slz-cos-cta { flex-direction: column; align-items: stretch !important; }
	.vl-slz-cos-cta > a { justify-content: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-slz-cos { grid-template-columns: 240px 1fr !important; }
}

/* Závěrečný CTA pruh (parts/cta-order.php, 11 stránek). Návrh má jen desktop:
   text vlevo, žluté tlačítko vpravo. Pod 768 px se tlačítko zalamovalo pod
   text (flex-wrap z návrhu) — David chce i na mobilu vedle sebe jako na
   desktopu, jen menší písmo a tlačítko. Cílí se přes inline styly partu;
   selektor obal+prvek proto, že obecné `.vl-dcontent [style*="font-size:24px"]`
   (19 px) by jinak nadpis přebilo tam, kde je pruh uvnitř .vl-dcontent. */
@media (max-width: 1024px) {
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] { padding: 36px 32px !important; gap: 24px !important; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="font-size:24px; font-weight:600; letter-spacing:-.02em; color:#fdfcf8"] { font-size: 22px !important; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="height:56px; padding:0 28px; background:#ffd21f"] { height: 52px !important; padding: 0 24px !important; font-size: 15px !important; }
}
@media (max-width: 768px) {
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] { padding: 24px 20px !important; gap: 14px !important; flex-wrap: nowrap !important; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] > div { min-width: 0; flex: 1 1 auto; gap: 4px !important; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="font-size:24px; font-weight:600; letter-spacing:-.02em; color:#fdfcf8"] { font-size: 17px !important; line-height: 1.25; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="font-size:14.5px; color:#c8d4cb"] { font-size: 12.5px !important; line-height: 1.45; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="height:56px; padding:0 28px; background:#ffd21f"] { height: 42px !important; padding: 0 16px !important; font-size: 13.5px !important; gap: 8px !important; border-radius: 10px !important; box-shadow: 0 3px 0 #d9a800 !important; flex: none; }
}
@media (max-width: 400px) {
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="font-size:24px; font-weight:600; letter-spacing:-.02em; color:#fdfcf8"] { font-size: 16px !important; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="font-size:14.5px; color:#c8d4cb"] { font-size: 12px !important; }
	.vl-wrap[style*="padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px"] [style*="height:56px; padding:0 28px; background:#ffd21f"] { padding: 0 14px !important; font-size: 13px !important; }
}
/* Řádky tabulky receptury: obecné pravidlo `[style*="grid-template-columns:1.6fr 1fr"]`
   (dvousloupcové layouty jiných stránek) chytalo i `1.6fr 1fr .6fr` a rozložilo
   látku, množství a RVH pod sebe. Vyšší specificita vrací tři sloupce. */
@media (max-width: 768px) {
	.vl-dcontent .vl-slz-tbl [style*="grid-template-columns:1.6fr 1fr .6fr"] { grid-template-columns: 1.6fr 1fr .6fr !important; gap: 8px !important; }
}

/* Perex u mřížky ohlasů (parts/social-grid.php): na desktopu jeden řádek
   zarovnaný doprava, ať končí nad pravou hranou mřížky; na tabletu se smí
   zalomit (šířka ~52ch), na mobilu spadne pod nadpis a zarovná se vlevo. */
@media (max-width: 1024px) {
	.vl-sg-note { white-space: normal !important; max-width: 52ch; }
}
@media (max-width: 768px) {
	.vl-sg-note { text-align: left !important; max-width: none; }
}

/* Modal se zkušenostmi na PDP (parts/reviews-modal.php): na mobilu a tabletu
   přes celou obrazovku, žádné zaoblení; uvnitř je stránka zkušeností v holém
   režimu (?vl_embed=1) — tělo .vl-embed nemá hlavičku ani patičku, jen odsazení
   nahoře pro křížek, který leží přes iframe. */
@media (max-width: 1024px) {
	[data-vl-rmodal] { padding: 0 !important; }
	[data-vl-rmodal-box] { height: 100vh !important; height: 100dvh !important; max-width: 100% !important; border-radius: 0 !important; }
}
body.vl-embed { background: #fdfcf8; }
body.vl-embed > .vl-dcontent { padding-top: 12px; }

/* Výpis produktů: odkaz „Přečíst další zkušenosti" jen na desktopu (David 3. 9.).
   Tablet sdílí desktopovou vrstvu, mobilní vrstva odkaz nemá. */
@media (max-width: 1024px) {
	.vl-shoprev-more { display: none !important; }
}

/* Pokladna: `.h-chk2` má z Herbasu `padding-bottom: 0`, takže poslední
   přepínače (firma / kód / poznámka) končily těsně na patičce (Davidův nález
   3. 9.). Desktop dostává 56 px, ať spodek dýchá jako ostatní stránky. */
@media (min-width: 769px) {
	.vl .h-chk2 { padding-bottom: 56px; }
}
/* Na mobilu seděl souhrn přímo na mini patičce (David 5. 9.) — menší dech než desktop. */
@media (max-width: 768px) {
	.vl .h-chk2 { padding-bottom: 28px; }
}
/* „včetně DPH“ v řádku Celkem jako v postranním košíku (parts/cart-panel.php). */
.vl .h-total-row--grand .h-chk-review__vat { display: inline; margin: 0 0 0 4px; font-size: 12px; font-weight: 400; color: #8a887f; }

/* Postranní košík (parts/cart-panel.php): položky sbalené se zobáčkem a fade
   jako panel Herbasu (.h-panel__items/__more ve vlasimo.css) a jako souhrn
   na pokladně. Fade jde do podkladu panelu #fdfcf8, ne do bílé. */
.vl-cpanel__items { max-height: 272px; }
.vl-cpanel__items.is-open { max-height: none; }
.vl-cpanel__more { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 0 6px; margin: 0; background: none; border: 0; color: #8a887f; cursor: pointer; position: relative; flex: none; }
.vl-cpanel__more::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 58px; background: linear-gradient(180deg, rgba(253, 252, 248, 0), #fdfcf8 88%); pointer-events: none; }
.vl-cpanel__items.is-open + .vl-cpanel__more::before { content: none; }
.vl-cpanel__more svg { display: block; transition: transform .18s; }
.vl-cpanel__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.vl-cpanel__more:hover { color: #0b7c3d; }

/* Souhrn na pokladně: zlevněný řádek zeleně jako v postranním košíku
   (stejný odstín jako „Zdarma" u dárku) + přeškrtnutá běžná cena pod ním. */
.h-chk2-item__price.is-sale { color: #0b7c3d; }
.h-chk2-item__old { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #8a887f; text-decoration: line-through; text-align: right; }
.h-chk2-upsell__old { margin-left: 4px; font-size: 11.5px; color: #8a887f; text-decoration: line-through; }

/* Rozcestník témat na /caste-dotazy/. Grid je `auto-fit`, takže se sám
   přizpůsobí počtu témat v adminu; na mobilu ale potřebuje jeden sloupec
   a menší odsazení — vzor `padding:16px 48px 8px` v obecných pravidlech
   `.vl-dcontent` není a karty se scvrkly na 83 px. */
@media (max-width: 768px) {
	.vl-faq-cards {
		grid-template-columns: 1fr !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		gap: 12px !important;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-faq-cards { padding-left: 32px !important; padding-right: 32px !important; }
}

/* Obsah na právních stránkách (/obchodni-podminky/ a spol.). Box je lepivý
   a v návrhu měl `max-height: calc(100vh - 180px)`: na 1280×720 z něj zbylo
   540 px na 714 px obsahu, takže poslední kapitola byla useknutá a vedle textu
   svítil posuvník (David 4. 9. — „protáhni sidebar, ať se tam vejdou všechny
   body"). Lepí se 16 px pod horní hranu, rozpočet je tedy celé okno minus
   32 px; k tomu o píď sevřenější řádky, ať se 13 kapitol vejde i na nižším
   notebooku (714 → ~660 px). Posuvník zůstává schovaný jako pojistka pro
   opravdu nízká okna — stejný postup jako u pásu záložek na PDP. */
.h-legal__toc { max-height: calc(100vh - 32px); scrollbar-width: none; }
.h-legal__toc::-webkit-scrollbar { display: none; }
.h-legal__toc-item { padding: 7px 0; }

/* Hero na tabletu: vodorovné odsazení drží jen .vl-hero-copy, wrap je nulový.
   Dřív se sčítalo obojí — wrap 20 px z obecného pravidla plus 32 px z copy —
   takže nadpis začínal na 52 px, zatímco logo v hlavičce na 32 (Davidův
   screenshot 4. 9.). Text tím zleva získá 20 px šířky navíc; pravý okraj
   drží dál max-width copy, takže se text fotce nepřiblíží.
   Blok je až na konci souboru schválně: pravidla pro copy jsou rozeseta ve
   dvou dřívějších media blocích (max-width 1024 a 900) a musí je přebít. */
@media (min-width: 769px) and (max-width: 1024px) {
	.vl-hero > .vl-wrap { padding-left: 0 !important; padding-right: 0 !important; }
	.vl-hero-copy { padding-left: 32px !important; }
}

/* Hero copy o 30 px výš, jen desktop (Davidovo zadání 4. 9.). Posun je přes
   `top`, ne přes paddingy: hero centruje obsah svisle a copy má na desktopu
   tři různá odsazení (56 px nad 1240, 36 px pod ní, 28 px pod 1100), takže
   přepočet by musel být třikrát — a pod 1100 by vyšel záporný padding.
   Copy už `position: relative` má z inline stylu, výška hero se nemění.
   Hranice je 1241 px, ne 1025: pod ní hero klesne na 540 px a copy má odsazení
   36 px, takže sedí vysoko sama od sebe — dalších 30 px nahoru by nadpisek
   vrazilo pod žlutou hlavičku (na 1200 px zbývalo 14 px). */
@media (min-width: 1241px) {
	.vl-hero-copy { top: -30px; }
}

/* Widget „Jakou kombinaci zvolit" na výpisu: do 1300 px pod sebe jako na mobilu
   (Davidovo zadání 4. 9.). Ve dvou sloupcích zbylo na levý ~570 px a poměrový
   pruh se lámal — z „25 %" byly dva řádky a z „kosmetika / péče zvenčí" tři.
   Na celou šířku má pruh dost místa a telefonní blok se přesune pod něj, takže
   svislý předěl vystřídá vodorovný. Platí jen na výpisu, selektory míří na
   inline styly z dc renderu. */
@media (max-width: 1300px) {
	body.post-type-archive-product .vl-desktop [style*="grid-template-columns:1.55fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
	body.post-type-archive-product .vl-desktop [style*="border-left:1px solid rgba(255,255,255,.14)"] {
		border-left: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, .14) !important;
	}
}

/* Info bublina u karet ve výpisu (parts/info-tip.php). `.vl-tip` schválně
   nepozicuje — desktopová karta má overflow:hidden, takže bublina se kotví
   k textovému bloku karty (--wide) a nemá jak vytéct ven; mobilní řádková
   karta ji kotví zprava k prostřednímu sloupci (--right), tam je místo. */
.vl-tip { position: static; display: inline; }
.vl-tip__btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; vertical-align: -3px; padding: 0; border: 0; background: none; color: #8a887f; cursor: pointer; line-height: 0; }
.vl-tip__btn:hover, .vl-tip.is-on .vl-tip__btn { color: #0b7c3d; }
.vl-tip__box { display: none; position: absolute; z-index: 20; top: 100%; margin-top: 8px; background: #16211c; color: #ffffff; border-radius: 12px; padding: 11px 13px; font-size: 12px; line-height: 1.55; letter-spacing: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); text-align: left; }
/* Nahoru, ne dolů: karta má overflow:hidden a čtrnáctipoložkový seznam
   pod textem se u spodní hrany ořízl. Nad textem je 280px obrázku. */
.vl-tip__box--wide { left: 0; right: 0; top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }
/* Mobilní řádková karta: bublina pod celou kartou, ne u ikony — prostřední
   sloupec je na 390 px jen ~150 px široký a cokoli širšího z displeje vytékalo. */
.vl-tip__box--below { left: 0; right: 0; }
.vl-tip.is-on .vl-tip__box { display: block; }
.vl-tip__t { display: block; font-weight: 600; margin-bottom: 3px; }
.vl-tip__n { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .18); color: #c9d4cd; }
/* Hover jen tam, kde opravdu existuje — na dotyku by zůstal „zaseknutý". */
@media (hover: hover) {
	.vl-tip:hover .vl-tip__box { display: block; }
	.vl-tip:hover .vl-tip__btn { color: #0b7c3d; }
}

/* ---------------------------------------------------------------------------
   LANDING PAGE VĚRNOSTNÍ SLEVY (page-doplneni-zasob.php)

   Jediná stránka bez druhé markupové vrstvy: návrh „Vlasimo doplneni zasob"
   dodal desktop, tablet i mobil se **stejným markupem** a lišícími se rozměry
   (prop `zarizeni` přepínal jen tabulku hodnot). Přepisuje se proto sada
   proměnných, ne layout — a nemusí se nic generovat ani udržovat dvakrát.

   Hodnoty jsou 1:1 z návrhu: desktop / tablet (≤1024) / mobil (≤768).
   --------------------------------------------------------------------------- */
.vl-lp {
	--lp-pad: 48px;
	--lp-hero-pad: 52px 48px 40px;
	--lp-hero-grid: 1.1fr .9fr;
	--lp-hero-gap: 56px;
	--lp-h1: 44px;
	--lp-h2: 28px;
	--lp-p: 16.5px;
	--lp-pct: 72px;
	--lp-secy: 36px;
	--lp-sectop: 48px;
	--lp-cols3: repeat(3, 1fr);
	--lp-gap3: 28px;
	--lp-kury: repeat(3, 1fr);
	--lp-pece: repeat(4, 1fr);
	--lp-advice: 1.2fr .8fr;
	--lp-trust: repeat(4, 1fr);
	--lp-gap: 20px;
}
.vl-lp__wrap { max-width: 1440px; margin: 0 auto; }
/* Kotva „Doplnit zásobu se slevou" nesmí skončit těsně pod okrajem okna. */
.vl-lp__anchor { scroll-margin-top: 16px; }
/* Knoflík se „stiskne" jako v návrhu; inline style-hover/active z dc renderu
   prohlížeč nezná, takže efekt musí přijít z třídy. */
.vl-btn-press { transition: transform .12s ease, box-shadow .12s ease; }
.vl-btn-press:hover { transform: translateY(2px); box-shadow: 0 2px 0 #075c2e; }
.vl-btn-press:active { transform: translateY(4px); box-shadow: 0 0 0 #075c2e; }
.vl-btn-press--amber:hover { box-shadow: 0 2px 0 #d9a800; }
.vl-btn-press--amber:active { box-shadow: 0 0 0 #d9a800; }

@media (max-width: 1024px) {
	.vl-lp {
		--lp-pad: 32px;
		--lp-hero-pad: 40px 32px 32px;
		--lp-hero-grid: 1fr 1fr;
		--lp-hero-gap: 32px;
		--lp-h1: 36px;
		--lp-h2: 24px;
		--lp-p: 15px;
		--lp-pct: 60px;
		--lp-secy: 30px;
		--lp-sectop: 40px;
		--lp-gap3: 20px;
		--lp-kury: repeat(2, 1fr);
		--lp-pece: repeat(2, 1fr);
		--lp-advice: 1fr;
		--lp-trust: repeat(2, 1fr);
		--lp-gap: 16px;
	}
	.vl-lp__wrap { max-width: 1024px; }
}

@media (max-width: 768px) {
	.vl-lp {
		--lp-pad: 20px;
		--lp-hero-pad: 28px 20px 24px;
		--lp-hero-grid: 1fr;
		--lp-hero-gap: 24px;
		--lp-h1: 28px;
		--lp-h2: 21px;
		--lp-p: 14px;
		--lp-pct: 56px;
		--lp-secy: 24px;
		--lp-sectop: 32px;
		--lp-cols3: 1fr;
		--lp-gap3: 16px;
		--lp-kury: 1fr;
		--lp-pece: 1fr;
		--lp-trust: 1fr;
		--lp-gap: 12px;
	}
	/* Druhá věta pásu se na mobil nevejde vedle odpočtu (návrh ji taky vypouští). */
	.vl-lp__hide-m { display: none !important; }
	/* Perex na 390 px: zarovnání do bloku dělá v úzkém sloupci řídké mezery. */
	.vl-lp p { text-align: left !important; }
}

/* Primární CTA z návrhu jako třída — zelený knoflík s pevným stínem, stejný
   jako „Uplatnit při nákupu" / „Doplnit zásobu" na nástěnce účtu (tam inline).
   Používá seznam objednávek (Objednat znovu) a detail objednávky (Sledovat
   zásilku). Ne `.h-btn--green` — ten je z herbasího skinu (jiný stín i řez). */
.vl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; background: #0d8f46; color: #ffffff !important; font-size: 14px; font-weight: 600; border-radius: 11px; box-shadow: 0 3px 0 #075c2e; text-decoration: none !important; white-space: nowrap; border: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.vl-cta:hover { transform: translateY(1px); box-shadow: 0 2px 0 #075c2e; color: #ffffff; }
.h-acct-order__acts .vl-cta { padding: 0 18px; height: 42px; font-size: 13.5px; }
@media (max-width: 900px) {
	.h-acct-order__acts .vl-cta { justify-content: center; }
}

/* Pole hesla v účtu (Detaily účtu): WooCommerce skriptem obalí input do
   .password-input a přidá tlačítko „zobrazit heslo" + ukazatel síly hesla.
   Bez stylů WooCommerce (šablona je nenačítá) byl z tlačítka prázdný
   rámeček pod polem — tady sedí v poli vpravo jako oko, ukazatel je řádek
   pod polem. */
.h-chk2 .password-input { display: block; position: relative; }
.h-chk2 .show-password-input { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 26px; height: 26px; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; box-shadow: none; }
.h-chk2 .show-password-input::after { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto; background: #8a887f; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.h-chk2 .show-password-input.display-password::after { background: #0b7c3d; }
.h-chk2 .woocommerce-password-strength { font-size: 12px; font-weight: 600; margin-top: 6px; }
.h-chk2 .woocommerce-password-strength.short, .h-chk2 .woocommerce-password-strength.bad { color: #C2452D; }
.h-chk2 .woocommerce-password-strength.good { color: #8a6a00; }
.h-chk2 .woocommerce-password-strength.strong { color: #0b7c3d; }
.h-chk2 .woocommerce-password-hint { font-size: 12px; color: #8b9389; margin-top: 4px; }

/* Děkovačka 1:1 podle návrhu „Vlasimo dekovna stranka" (woocommerce/checkout/thankyou.php):
   desktop nese inline styly návrhu, tablet (≤1024) a mobil (≤768) přebírají hodnoty
   ze sad proměnných návrhu (tablet/mobil) přes třídy vl-thx__*. Obal drží i `h-thx`
   kvůli `:not(:has(.h-thx))` ve vlasimo.css, jeho herbasí rozměry se tu ruší. */
body.woocommerce-order-received { background: #f6f5ef; }
.vl .h-thx.vl-thx { max-width: none; padding: 0 0 32px; }
.vl-thx__btn-outline:hover, .vl-thx__copy.is-done { border-color: #0d8f46 !important; color: #0b7c3d !important; }
.vl-thx__ghost:hover { background: #f4faf6 !important; }
.vl-thx__wa:hover { filter: brightness(1.05); }
/* Kolečko „Čekáme na platbu…" se točí jako dřív v bloku brány (David 5. 9.). */
@keyframes vl-spin { to { transform: rotate(360deg); } }
.vl-thx__spin { animation: vl-spin 1s linear infinite; transform-origin: 50% 50%; }
@media (max-width: 1024px) {
	.vl-thx__wrap { padding: 24px 32px 0 !important; }
	.vl-thx__main { padding: 20px 32px 0 !important; grid-template-columns: minmax(0, 1fr) 320px !important; }
	.vl-thx__hero { padding: 30px 28px 24px !important; }
	.vl-thx__h1 { font-size: 28px !important; }
	.vl-thx__h2 { font-size: 22px !important; }
	.vl-thx__p { font-size: 14.5px !important; }
	.vl-thx__card { padding: 22px !important; }
	.vl-thx__qrgrid { grid-template-columns: 1fr !important; }
	.vl-thx__qr { width: 200px !important; height: 200px !important; }
	.vl-thx__thanks, .vl-thx__cols3, .vl-thx__cols2 { grid-template-columns: 1fr !important; }
	.vl-thx__photo { min-height: 240px !important; }
}
@media (max-width: 768px) {
	.vl-thx__wrap { padding: 16px 16px 0 !important; }
	.vl-thx__main { padding: 16px 16px 0 !important; grid-template-columns: 1fr !important; }
	.vl-thx__hero { padding: 26px 18px 20px !important; }
	.vl-thx__h1 { font-size: 24px !important; }
	.vl-thx__h2 { font-size: 20px !important; }
	.vl-thx__p { font-size: 14px !important; }
	.vl-thx__card { padding: 18px !important; }
	.vl-thx__tiles { grid-template-columns: 1fr 1fr !important; }
	.vl-thx__photo { min-height: 200px !important; }
	.vl-thx__side { position: static !important; }
	.vl-thx__qrhead, .vl-thx__payfoot { padding-left: 18px !important; padding-right: 18px !important; }
}

/* Certifikace se 3 dlaždicemi (SK bez dlaždice MZe — David 6. 9.): roztáhnout na
   celou šířku. Inline repeat(4, 1fr) v partu musí zůstat (tabletová a mobilní
   pravidla na něj cílí přes [style*]), proto přebití třídou s vyšší specificitou.
   Na mobilu dva sloupce a poslední dlaždice přes oba; totéž v mobilní variantě
   (.vl-certs-m). Se 4 dlaždicemi se nic nemění. */
.vl-certs.vl-certs--3[style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 768px) {
	.vl-certs.vl-certs--3[style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	.vl-certs.vl-certs--3 > :last-child { grid-column: 1 / -1; }
}
.vl-certs-m.vl-certs-m--3 > :last-child { grid-column: 1 / -1; }