/* ============================================================
   PRODEJNÍ STRÁNKA PRODUKTU ✦ průkopníci.ai
   Vlevo produkt, vpravo box s objednávkou, který jede se scrollem.
   Sdílí se všemi produkty. Neměň to kvůli jednomu produktu.
   ============================================================ */

/* ---------- PŘECHOD Z GRADIENTU DO BÍLÉ ----------
   Jedna k jedné jako na blogu. Nahoře pod menu ještě prosvítá
   ten žlutorůžový přechod, a asi po 470 pixelech se stránka
   rozplyne do čisté bílé. Číslo 470 je z blogu, neměň ho,
   ať to na obou místech drží stejně. */
body{
  background-color:transparent;
  background-image:linear-gradient(to bottom,
    rgba(253,253,251,0)   170px,
    rgba(253,253,251,0.2) 280px,
    rgba(253,253,251,0.6) 370px,
    #FDFDFB               470px);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

.pgrid2{display:grid;grid-template-columns:1fr 400px;gap:34px;align-items:start;
  padding:26px 0 40px}
@media(max-width:980px){.pgrid2{grid-template-columns:1fr;gap:26px}}

/* ---------- LEVÝ SLOUPEC ---------- */
/* BANNER PRODUKTU JE VIDĚT CELÝ. Rámeček má stejný poměr stran jako bannery,
   tedy 16 ku 9, takže se nic neořezává. Kdyby přišel obrázek s jiným poměrem,
   `contain` ho zmenší tak, aby byl celý vidět, a okolo zůstane gradient. */
.levy .pfoto{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin-bottom:26px;
  background:linear-gradient(135deg,#FFFBCC,#FFD6F0);display:flex;align-items:center;justify-content:center}
.levy .pfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.levy .pfoto .hvezda{font-size:72px;color:var(--neon);opacity:.85;line-height:1}
/* Když je v rámečku fotka, hvězda placeholder se schová. Je jen pro prázdný stav. */
.levy .pfoto:has(img) .hvezda{display:none}
/* Starší prohlížeče bez aspect-ratio ať nemají rámeček nulový. */
@supports not (aspect-ratio: 16/9){.levy .pfoto{height:300px}
  @media(max-width:640px){.levy .pfoto{height:200px}}}

.levy .pstitek{text-transform:uppercase;letter-spacing:0.08em;font-weight:800;font-size:11px;
  color:var(--neon);margin-bottom:10px}
.levy h1{font-weight:900;font-size:42px;letter-spacing:-1.3px;line-height:1.1;margin-bottom:16px}
.levy h1 .hl{color:var(--neon)}
@media(max-width:640px){.levy h1{font-size:30px}}
.levy p.lead{font-size:16.5px;line-height:1.8;margin-bottom:22px}
/* ============================================================
   ÚVODNÍ ODSTAVEC NA TELEFONU ✦ 16. 8. 2026
   DENISO, na mobilu se text lámal brzo a vpravo zbývalo prázdno.
   Sloupec má na iPhonu 346 bodů a při 16,5 px se na řádek vejde
   jen 37 znaků. Po zmenšení na 15,5 px je jich 41 a odstavec
   má o celý řádek míň. Čte se to pořád pohodlně, jen to
   nevypadá roztrhaně. Na počítači zůstává 16,5 px.
   ============================================================ */
@media(max-width:640px){
  .levy p.lead{font-size:15.5px;line-height:1.7}
}

.levy h2.sekce{font-weight:900;font-size:24px;letter-spacing:-0.5px;margin:38px 0 16px;line-height:1.25}
.levy h2.sekce .hl{color:var(--neon)}

.dostanes{display:grid;gap:16px}
.dostanes .pol{display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.dostanes .ik{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--pink-l);color:var(--neon);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900}
.dostanes b{display:block;font-weight:800;font-size:15px;margin-bottom:3px}
.dostanes span{display:block;font-size:14px;color:var(--grey);line-height:1.65}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{font-weight:800;font-size:15.5px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--neon);font-weight:900;font-size:20px;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq p{font-size:14.5px;color:var(--grey);line-height:1.75;margin-top:10px}

/* pruh pro přihlášenou ženu */
.jsi-uvnitr{background:var(--neon-y);border-radius:14px;padding:14px 18px;margin-bottom:22px;
  font-size:14px;font-weight:700;line-height:1.6}
.jsi-uvnitr a{color:var(--charcoal);text-decoration:underline;text-underline-offset:3px;font-weight:900}

/* ============================================================
   PRAVÝ SLOUPEC ✦ BOX S OBJEDNÁVKOU
   Jede se scrollem, takže cena a tlačítko jsou pořád na očích.
   Když je delší než obrazovka, scrolluje sám v sobě.
   ============================================================ */
/* ZMĚNA 16. 8. 2026 ✦ OBJEDNÁVKA SE UŽ NELEPÍ A NEROLUJE SAMA V SOBĚ.
   Dřív se box lepil k obrazovce a když byl delší než displej, měl vevnitř
   vlastní rolování. Působilo to jako okýnko ve stránce. Denisa chce, aby
   byl box celý na plnou délku a tekl se stránkou jako všechno ostatní. */
.pravy{position:static}

/* Box NEMÁ výrazný obrys. Místo ohraničení ho zvedá stín, takže na růžovém
   pozadí působí, že leží nad stránkou, ne že je do ní zarámovaný.
   Jemná linka zůstává jen proto, aby měl hranu i na bílém podkladu. */
.ordbox{background:#fff;border:1px solid rgba(255,61,180,0.20);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(255,61,180,0.18), 0 4px 14px rgba(42,42,42,0.06);
  display:flex;flex-direction:column}
/* Žádné omezení výšky. Box je tak dlouhý, jak je dlouhý jeho obsah. */
.ordbox{max-height:none}

/* ---------- PROČ TU MUSÍ BÝT MIN-HEIGHT:0 ----------
   OPRAVA 13. 8. Objednávka se nedala rolovat a dole byla useknutá, včetně
   tlačítka Koupit. Důvod: pole nesedí přímo v boxu, sedí ve <form class=ordform>,
   a ten formulář mezi boxem a poli o ničem nevěděl. Prohlížeč u položek
   flexboxu sám od sebe nedovolí, aby se zmenšily pod výšku svého obsahu.
   Formulář si tedy držel plnou výšku, box ho měl přes overflow:hidden
   oříznutý a rolovat nešlo nic.
   Řeší to min-height:0 na formuláři i na těle. Tím teprve začne fungovat
   overflow-y:auto a pole se rolují uvnitř boxu. Cena nahoře a tlačítko dole
   zůstávají pořád vidět, což je přesně to, co u objednávky chceme.
   Nemazat, jinak se to vrátí. */
.ordbox > .ordhead{flex:0 0 auto}
.ordbox > .ordform{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ordbox .ordbody{flex:1 1 auto;min-height:0}
.ordbox .ordfoot{flex:0 0 auto}

/* Na běžném notebooku je okno vysoké kolem 700 až 800 pixelů. Kdyby se box
   lepil i tam, zbylo by na pole asi tři sta pixelů a objednávka by se
   vyplňovala jako klíčovou dírkou. Do 900 pixelů výšky okna proto box
   nelepíme a necháme ho normálně téct se stránkou, jako na mobilu.
   Lepí se až na velkém monitoru, kde je na pole opravdu místo. */
/* (Pravidlo pro nízká okna už není potřeba, box se nelepí nikdy.) */

.ordhead{padding:24px 24px 18px;border-bottom:1px solid var(--line)}
.ordhead .lbl{text-transform:uppercase;letter-spacing:0.08em;font-weight:900;font-size:10.5px;
  color:var(--neon);margin-bottom:10px}
.ordhead .cena{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ordhead .cena b{font-weight:900;font-size:38px;letter-spacing:-1px;line-height:1;color:var(--charcoal)}
/* „s DPH" hned za cenou, drobné a jemné, ať nekřičí vedle velké částky. */
.ordhead .cena b .cena-dph{font-size:15px;font-weight:800;letter-spacing:0;color:var(--grey)}
.ordhead .cena span{font-size:13px;font-weight:700;color:var(--grey)}
.ordhead .dph{font-size:11.5px;color:var(--grey);margin-top:8px}

/* U objednávky je to OTOČENĚ oproti zbytku webu, a je to schválně.
   Podklad boxu je teple lomená bílá #FDFCFB (ten odstín, co jinde mají pole),
   a pole v něm jsou čistě bílá, takže z podkladu svítí ven. Na jiných
   stránkách žena čte, tady VYPLŇUJE, takže musí být vidět KAM psát.
   Vyplněné pole pak zežloutne přes .mavalue (#FFFDEE) v clen.css.
   Platí to JEN uvnitř .ordbox, zbytek webu zůstává jak byl. */
.ordbody{padding:20px 24px;overflow-y:auto;flex:1 1 auto;background:#FDFCFB}
.ordbox .field input,.ordbox .field select,.ordbox .field textarea{background:#fff}
/* POZOR, TOHLE TU MUSÍ ZŮSTAT. Pravidlo o bílém poli výš je stejně silné jako
   .mavalue v clen.css, a protože produkt.css se načítá později, přebilo by ho
   a vyplněná pole by v objednávce zůstala bílá. Proto se žlutá musí zopakovat
   se stejnou vahou, tedy taky s .ordbox na začátku. */
.ordbox .field input.mavalue,.ordbox .field select.mavalue,.ordbox .field textarea.mavalue{
  background:#FFFDEE}
.ordbox .field input.mavalue:focus,.ordbox .field textarea.mavalue:focus{background:#fff}
/* V objednávce se pole při psaní NEORÁMOVÁVAJÍ růžovou. Růžový rámeček tu
   vypadal jako chybová hláška. Jediné, co pole hlásí, je žlutá = vyplněno. */
.ordbox .field input:focus,.ordbox .field select:focus,.ordbox .field textarea:focus{
  border-color:rgba(42,42,42,0.30)}

/* Poslední VIDITELNÁ sekce nemá spodní čáru. Skryté sekce (podnikatelka,
   AI účet, platba) by ji jinak nechaly viset nad tlačítkem. Třídu přiděluje
   uklidPosledniCaru() v produkt.js, protože CSS o skrytých sekcích neví. */
.ordsek.bez-cary{border-bottom:none;padding-bottom:0;margin-bottom:0}

/* jemně žlutá kartička s parametry, ať to není jednolitá bílá */
/* Bez žlutého podkladu. Obsah tady zůstat MUSÍ (VOP čl. 3.1, povinné sdělení
   o typu platby, délce závazku a ukončení), ale nemá na sebe upozorňovat. */
.orditem{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:18px;background:#FFFDF2}
/* Nabídka přihlášení nad formulářem pro odhlášenou ženu. Celý účet visí na emailu,
   takže je levnější ji sem pustit přihlášenou, než pak spojovat dva účty. */
.uzucet{background:#FFFDF2;border:1px solid var(--line);border-radius:12px;padding:10px 13px;
  margin-bottom:16px;font-size:12.5px;line-height:1.6;color:var(--grey)}
.orditem .r{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px}
.orditem .r span{color:var(--grey)}
.orditem .r b{font-weight:800;text-align:right}
/* ROZPAD CENY pod fakturačními údaji. ŽÁDNÝ nadpis, ŽÁDNÁ žlutá bublina a
   ŽÁDNÁ vlastní čárka. Dělící linku má už sama sekce (.ordsek), takhle to
   rozpad jen navazuje čistými řádky, bez zdvojených čar. */
.danrozp .r{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px}
.danrozp .r span{color:var(--grey)}
.danrozp .r b{font-weight:800;text-align:right}
.danrozp .r.r-soucet{margin-top:3px;font-size:14px}
.danrozp .r.r-soucet span{color:var(--charcoal);font-weight:800}
.danrozp .r.r-soucet b{font-weight:900}
.dan-pozn{font-size:11.5px;color:var(--grey);line-height:1.5;margin:8px 2px 0}

/* Každá sekce je oddělená linkou a vzduchem, ať je vidět, kde jedna končí. */
.ordsek{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.ordsek:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
/* Nadpisy sekcí jsou verzálkami a o třetinu větší, ať formulář dělí na jasné části. */
/* h3 je tu kvůli /nabidka/. Ta má v objednávce jediný nadpis („Přístup") a pod
   nadpisy stránky h2 by z něj byla přeskočená úroveň. Vypadá úplně stejně jako h4,
   které do objednávky vykresluje produkt.js na ostatních stránkách. */
.ordsek h3,.ordsek h4{font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:0.03em;
  line-height:1.25;margin-bottom:15px;display:flex;align-items:center;gap:7px}
/* Druhý nadpis uvnitř téže sekce (Fakturační údaje pod Údaji k účtu). */
.ordsek h4.dalsi{border-top:1px solid var(--line);padding-top:22px;margin-top:24px}
.ordsek h4 i{font-style:normal;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:0.06em;
  background:var(--neon-y);color:var(--charcoal);border-radius:999px;padding:2px 7px}

.volba{display:flex;gap:10px;align-items:flex-start;background:#fff;
  border:1.5px solid var(--line);border-radius:11px;
  padding:12px 13px;cursor:pointer;margin-bottom:8px;transition:border-color .14s,background .14s}
/* Vybraná dlaždice se chová jako vyplněné pole: zežloutne. Růžová tady
   působila jako výkřik, jako by něco chybělo, a přitom je to naopak hotové. */
.volba:hover{border-color:rgba(42,42,42,0.26)}
.volba.sel{background:#FFFDEE;border-color:#EFE7B8}
.volba input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--neon);cursor:pointer}
.volba b{display:block;font-weight:800;font-size:13.5px;margin-bottom:3px}
.volba span span,.volba > span > span{display:block;font-size:12px;color:var(--grey);line-height:1.6}
.volba u{color:#C0392B;font-weight:800;text-decoration:none}

.zask{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:13px;line-height:1.6;cursor:pointer}
.zask input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--neon);cursor:pointer}
.zask a{color:var(--neon);font-weight:800;text-decoration:none}
.zask a:hover{text-decoration:underline}
.zask .mini{display:block;font-size:11.5px;color:var(--grey);line-height:1.55;margin-top:3px}

.ordbox .field{margin-bottom:12px}
.ordbox .field label{font-size:10.5px}
/* Rozbalovací menu MUSÍ být v seznamu taky, jinak si drží výchozích 15 px
   z clen.css a v boxu je pak nápadně větší než textová pole vedle něj. */
.ordbox .field input,.ordbox .field select{padding:10px 12px;font-size:13.5px;background:#fff;
  border-color:rgba(42,42,42,0.13)}
/* POZOR: tohle pravidlo tu bylo dřív a růžovilo rozbalovací menu při rozkliknutí.
   Je stejně silné jako to obecné výš a stojí NÍŽ, takže ho přebíjelo. V objednávce
   se nic neorámovává růžovou, jediná barva, která něco hlásí, je žlutá = vyplněno. */
.ordbox .field select:focus{outline:none;border-color:rgba(42,42,42,0.30)}
.ordbox .field .hint{font-size:11.5px}
/* Kolečko „načíst znovu" u odkazu do Můj účet. Vypadá jako odkaz, ne jako
   tlačítko, ať to nesoupeří s objednávkovým tlačítkem dole. */
.obnovit{background:none;border:none;padding:0;font-family:inherit;font-size:11.5px;
  font-weight:800;color:var(--neon);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.obnovit:hover{opacity:.75}
.ordbox .fields2{gap:0 12px}

.aibox{background:var(--neon-y);border-radius:11px;padding:12px 14px;font-size:12.5px;line-height:1.6}
.aibox b{font-weight:900}

.ordfoot{padding:16px 24px 22px;border-top:1px solid var(--line);background:#fff}
.ordfoot .btn{width:100%;text-align:center;padding:16px 12px;font-size:15px;line-height:1.35}
.ordfoot .pod{font-size:11.5px;color:var(--grey);line-height:1.6;margin-top:11px;text-align:center}
.chybi{background:var(--pink-l);border:1px solid rgba(255,61,180,0.25);border-radius:10px;
  padding:10px 12px;font-size:12px;line-height:1.6;margin-bottom:12px}
.chybi b{font-weight:900}

/* ============================================================
   SLEVOVÝ KÓD
   Je u KAŽDÉHO produktu. Kódy se dělají ve Stripe.
   ============================================================ */
.kodrow{display:flex;gap:8px}
.kodrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-family:inherit;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;background:#fff}
.kodrow input:focus{outline:none;border-color:rgba(42,42,42,0.30);background:#fff}
/* Stejné pravidlo jako u ostatních polí: co má hodnotu, je žluté. Viz clen.css. */
.kodrow input.mavalue{background:#FFFDEE}
.kodrow input.mavalue:focus{background:#fff}
.kodrow input:-webkit-autofill,
.kodrow input:-webkit-autofill:hover,
.kodrow input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #FFFDEE inset !important;
          box-shadow:0 0 0 1000px #FFFDEE inset !important;
  -webkit-text-fill-color:var(--charcoal) !important;
  caret-color:var(--charcoal)}

/* Pevná dlaždice. Vypadá jako volba, ale volba to není, žena tady nic nevybírá,
   zákon rozhodl za ni. Proto nemá kolečko ani kurzor. Žlutá je schválně ta samá,
   jakou svítí vyplněná pole. Znamená totiž to samé: tohle už je vyřešené.
   Růžová by tu křičela jako varování, a přitom se nic špatného neděje. */
.volba.pevna{cursor:default;background:#FFFDEE;border-color:#EFE7B8}
.kodrow .btn{flex:0 0 auto;padding:10px 16px;font-size:13px}
/* Potvrzení kódu NENÍ další bublina, box i rámeček jsou pryč. Je to jen
   zelený kolečkový fajfka a text vedle, ať to nesoupeří s poli kolem.
   Zelená zůstává, jen ji nese ta fajfka, ne celá plocha. */
.kodok{position:relative;padding:1px 2px 0 24px;font-size:12.5px;line-height:1.55;margin-top:10px;color:var(--charcoal)}
.kodok::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;
  background:#3FBF62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/10px 10px no-repeat}
.kodok b{font-weight:900}
/* Chyba stejným jazykem jako potvrzení, jen červený křížek místo zelené fajfky.
   Žádný box, žádná bublina. */
.kodspatne{position:relative;padding:1px 2px 0 24px;font-size:12.5px;line-height:1.55;margin-top:10px;color:var(--charcoal)}
.kodspatne::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;
  background:#E24B4A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/9px 9px no-repeat}
.kodspatne b{font-weight:900}
.puvodni{text-decoration:line-through;color:var(--grey);font-weight:700;font-size:16px;margin-right:8px}

/* Nadpisy sekcí v levém sloupci prodejní stránky jsou CELÉ černé.
   Růžové zvýraznění zůstává jen hlavnímu H1 s názvem produktu. */
.levy h2.sekce .hl{color:inherit}

/* Text v poli na slevový kód je delší, tak menší písmo, ať se vejde. */
.kodrow input{font-size:11.5px}

/* ============================================================
   NÁPOVĚDA V POLI NA KÓD ✦ OPRAVENO 16. 8. 2026

   DENISO, tohle byl ten obrovský oříznutý text na mobilu.

   Samotné pole je schválně VERZÁLKAMI, tučně a s rozpalem, protože se
   do něj píše KÓD a ten tak vypadá správně. Jenže tenhle vzhled si bral
   i šedý text nápovědy, a „MÁŠ SLEVOVÝ KÓD?" verzálkami s rozpalem
   při 16 px do pole prostě nevlezlo. Ořízlo se to na „MÁŠ SLEVOVÝ KÓD? Z".

   Zmenšit písmo nejde. Pod 16 px si Safari na iPhonu při kliknutí do pole
   přiblíží celou stránku, viz pravidlo o kus níž.

   Takže se mění jen NÁPOVĚDA: normální písmena, normální tloušťka,
   žádný rozpal. Kód, který žena napíše, zůstává verzálkami.
   ============================================================ */
.kodrow input::placeholder{text-transform:none;font-weight:500;letter-spacing:0;
  color:#8A857D;opacity:1}
.kodrow input::-webkit-input-placeholder{text-transform:none;font-weight:500;letter-spacing:0;
  color:#8A857D;opacity:1}

/* Co ještě chybí, se NEVYPISUJE pod tlačítkem. Místo toho se po kliknutí
   na objednávku zvýrazní přímo to místo, kde něco chybí. */
.ordsek.chyba{border:1.5px solid #C0392B;background:#FDF1EF;border-radius:12px;padding:14px}
.field.chyba input, .field.chyba select{border-color:#C0392B;background:#FDF1EF}
.zask.chyba{background:#FDF1EF;border-radius:9px;padding:8px 10px;margin:-8px -10px 0}
.chybahlaska{color:#C0392B;font-size:12px;font-weight:800;margin-top:8px}

/* ============================================================
   UPSELL KARTY ✦ poslední nabídka před platbou
   Ne seznam, ale nabídka. Fotka, cena s kotvou, body, tlačítko.
   ============================================================ */
.odpocet{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--neon-y);border-radius:999px;padding:7px 14px;margin-bottom:16px;
  font-size:12.5px;font-weight:800;color:var(--charcoal)}
.odpocet b{font-weight:900;font-variant-numeric:tabular-nums}

.upsellkarta{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;
  margin-bottom:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.upsellkarta.sel{border-color:var(--neon);box-shadow:0 8px 26px rgba(255,61,180,0.15)}
.upsellkarta .foto{height:110px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFFBCC,#FFD6F0);font-size:40px;color:var(--neon);position:relative}
.upsellkarta .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.upsellkarta .telo{padding:15px 17px}
.upsellkarta h5{font-weight:900;font-size:16px;letter-spacing:-0.3px;margin-bottom:9px}
.upsellkarta .ceny{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.upsellkarta .ceny .stara{text-decoration:line-through;color:var(--grey);font-weight:800;font-size:13.5px}
.upsellkarta .ceny .nova{font-weight:900;font-size:24px;letter-spacing:-0.5px;color:var(--neon);line-height:1}
.upsellkarta .ceny .sleva{background:var(--neon-y);color:var(--charcoal);border-radius:999px;
  padding:3px 9px;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:0.04em}
.upsellkarta ul{list-style:none;margin:0 0 13px}
.upsellkarta li{padding-left:19px;position:relative;font-size:12.5px;color:var(--grey);
  line-height:1.55;margin-bottom:5px}
.upsellkarta li::before{content:"\2726";position:absolute;left:0;color:var(--neon)}
.upsellkarta .pridat{width:100%;text-align:center}
.upsellkarta .kdy{border-top:1px solid var(--line);padding:13px 17px;background:#FAF9F6}
.upsellkarta .kdy .nadpis{font-size:11.5px;font-weight:900;margin-bottom:8px}
.upsellkarta .kdy .volba{margin-bottom:6px}
.upsellkarta .kdy .volba:last-child{margin-bottom:0}

/* ---------- STRÁNKA PO ZAPLACENÍ ---------- */
.poplatbe{max-width:620px;margin:0 auto;padding:26px 0 50px}
.poplatbe .zaplaceno{background:var(--neon-y);border-radius:18px;padding:22px 24px;margin-bottom:26px}
.poplatbe .zaplaceno .lbl{text-transform:uppercase;letter-spacing:0.08em;font-weight:900;
  font-size:10.5px;margin-bottom:8px}
.poplatbe .zaplaceno h2{font-weight:900;font-size:24px;letter-spacing:-0.5px;margin-bottom:6px;line-height:1.2}
.poplatbe .zaplaceno p{font-size:14px;line-height:1.65}
.poplatbe .upsellblok{background:#fff;border:1.5px solid var(--neon);border-radius:18px;
  padding:24px;box-shadow:0 10px 30px rgba(255,61,180,0.14)}
.poplatbe .upsellblok h2{font-weight:900;font-size:24px;letter-spacing:-0.5px;margin-bottom:8px}
.poplatbe .upsellblok p.lead{font-size:14.5px;color:var(--grey);line-height:1.7;margin-bottom:20px}
.poplatbe .upsellblok .btn{width:100%;text-align:center;padding:15px 12px}



/* ============================================================
   NEJUŽŠÍ DISPLEJE (320 px)
   Na 320 pixelech utíkal box s objednávkou doprava. Dva důvody:

   1) Položka v mřížce (grid) má ve výchozím stavu min-width:auto,
      takže se NESMRSKNE pod šířku svého nejširšího obsahu. Stačilo
      jedno dlouhé slovo a celý sloupec se roztáhl přes displej.
      Léčí to min-width:0.
   2) Nadpisy sekcí jsou verzálkami se 17 px a prostrkáním, takže
      „ÚDAJE K VYTVOŘENÍ ÚČTU" bylo širší než vnitřek boxu.

   Řešíme to až od 400 px dolů, ať se větší mobily nezmenšují zbytečně.
   ============================================================ */
@media(max-width:400px){
  .pgrid2 > *{min-width:0}
  .ordbox{max-width:100%}
  .ordhead{padding:20px 16px 15px}
  .ordbody{padding:18px 16px}
  .ordfoot{padding:14px 16px 20px}
  .ordhead .cena b{font-size:32px}
  .ordsek h3,.ordsek h4{font-size:14.5px;letter-spacing:0.02em}
  .ordfoot .btn{font-size:14px;padding:15px 8px}
  /* Dlouhé slovo (email, název firmy) se radši zlomí, než aby trhalo box. */
  .ordbox,.ordbox *{overflow-wrap:anywhere}
  /* Nadpis produktu na 320 px. Menší a s těsnějším prokladem, ať se nerozpadá. */
  .levy h1{font-size:26px;letter-spacing:-0.8px}
}

/* ============================================================
   MOBILNÍ AUDIT ✦ OBJEDNÁVKOVÝ BOX NA TELEFONU
   ============================================================ */

/* ---------- POLE V OBJEDNÁVCE MAJÍ NA TELEFONU 16 PX ----------
   Velikost písma vynucuje clen.css jedním pravidlem pro celý web (jinak si
   Safari na iPhonu při kliknutí do pole přiblíží celou stránku a už nikdy
   nezmenší). Tady se to jen opticky dorovná: box je tím pádem o dva a půl
   pixelu vyšší, tak mu ubereme na odsazení. Objednávka vypadá stejně jako dřív.
   Popisek pole a poznámky se zvětšují na čitelných 13 px, nesou význam. */
@media(max-width:860px),(hover:none) and (pointer:coarse){
  .ordbox .field input,.ordbox .field select{padding:9px 11px}
  .ordbox .field label{font-size:13px}
  .ordbox .field .hint{font-size:13px}
  .kodrow input{padding:9px 10px}
  .ordbox .field textarea{padding:9px 11px}
}

/* ---------- TISK PRODEJNÍ STRÁNKY ----------
   Objednávkový box je jen k proklikání, na papíře nemá co dělat. Zbytek tisku
   (cookie lišta, plovoucí bublina, menu) řeší clen.css, ten se načítá vždycky
   spolu s tímhle souborem. */
@media print{
  .pravy,.ordbox,.mlista{display:none !important}
  .pgrid2{display:block;padding:0}
  .levy .pfoto{break-inside:avoid}
}

/* ============================================================
   PŘILEPENÁ LIŠTA NA MOBIL ✦ ZKRATKA DOLŮ K OBJEDNÁVCE

   DENISO, tohle je ta samá lišta, co máš na /nabidka/. Na telefonu je
   objednávka až pod celým textem stránky, takže žena, která se rozhodla
   po první obrazovce, musí scrollovat přes celou prodejku. Lišta ji tam
   sveze jedním ťuknutím.

   NEKUPUJE SCHVÁLNĚ. Souhlasy (podmínky, 18+, placený Claude, volba
   přístupu) musí odklepnout v objednávce a tohle to nesmí obejít. Proto
   na tlačítku není slovo zaplatit, jen „chci".

   Na počítači se neukáže vůbec, tam objednávka stojí rovnou vpravo.
   Hranice 980 px je ta samá, na které se .pgrid2 láme do jednoho sloupce.

   z-index 60 je schválně NÍZKÝ. Cookie lišta má 900, popup vychytávky
   1000. Lišta musí zůstat pod nimi, ne se jim plácat přes obsah.
   ============================================================ */
.mlista{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:12px;
  align-items:center;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid rgba(42,42,42,0.10);
  box-shadow:0 -8px 24px rgba(42,42,42,0.12)}
.mlista.on{display:flex}
.mlista .mcena{flex:0 0 auto;line-height:1.15}
.mlista .mcena .pozn{display:block;font-size:11.5px;color:var(--grey)}
.mlista .mcena .pozn s{margin-right:5px}
.mlista .mcena b{display:block;font-size:17px;font-weight:900;color:var(--charcoal)}
.mlista .mbtn{flex:1;min-width:0;border:none;cursor:pointer;font-family:inherit;
  font-weight:900;font-size:15px;line-height:1.22;color:#fff;padding:13px 10px;border-radius:12px;
  background:linear-gradient(90deg,var(--neon),#FF7A3D);touch-action:manipulation}
@media(max-width:370px){.mlista .mbtn{font-size:14px}.mlista .mcena b{font-size:16px}}
@media(min-width:981px){.mlista{display:none !important}}

/* ---------- VIDITELNÉ ZAOSTŘENÍ V OBJEDNÁVKOVÉM BOXU ----------
   Růžový RÁMEČEK tady schválně nechceme, vypadal jako chybová hláška (viz
   pravidla výš). Prstenec u :focus-visible ale ano: bez něj žena, která
   objednávku vyplňuje klávesnicí, nevidí, na kterém poli zrovna stojí, a
   naměřeno to tak devět kroků tabulátoru po sobě bylo.
   Selektory musí být stejně silné jako pravidla s outline:none výš v tomhle
   souboru a stát pod nimi, jinak je nepřebijí. Základ je v clen.css. */
.ordbox .field input:focus-visible,.ordbox .field select:focus-visible,
.ordbox .field textarea:focus-visible,.kodrow input:focus-visible{
  outline:2px solid var(--neon);outline-offset:1px;
  box-shadow:0 0 0 3px rgba(255,61,180,0.12)}

/* ============================================================
   MOBIL ✦ TŘI VĚCI, KTERÉ IPHONE DĚLÁ SÁM A ŠKODÍ V OBJEDNÁVCE
   Doplněno 16. 8. 2026. Platí i pro checkout kurzu webu.
   ============================================================ */

/* 1) PÍSMO V POLÍCH MUSÍ BÝT ASPOŇ 16 px.
      Safari na iPhonu při kliknutí do pole s menším písmem SÁM PŘIBLÍŽÍ
      celou stránku. Žena klikne na Křestní jméno, stránka jí poskočí
      a zvětší se, a ona se pak musí odzoomovat u každého dalšího pole.
      V nejhorším to vzdá uprostřed objednávky. Pod 16 px se nesmí jít. */
@media(max-width:720px){
  .ordbox input,.ordbox select,.ordbox textarea,
  .ordbox .field input,.ordbox .field select,.ordbox .field textarea,
  .kodrow input{font-size:16px}
}

/* 2) ŽÁDNÉ ČEKÁNÍ NA DVOJITÉ ŤUKNUTÍ.
      Telefon po ťuknutí vyčkává, jestli nepřijde druhé (přiblížení),
      a teprve pak pošle klik. Vypadá to, že tlačítko nereaguje. */
.ordbox button,.ordbox .btn,.ordbox label.zask,.ordbox label.volba,
.ordbox input,.ordbox select{touch-action:manipulation}

/* 3) ZAŠKRTÁVACÍ POLÍČKA A VOLBY MUSÍ JÍT TREFIT PRSTEM.
      Doporučená plocha na dotyk je 44 px. Samotný čtvereček je menší,
      tak se zvětší plocha kolem něj, ne on sám. */
@media(max-width:720px){
  .ordbox label.zask{padding-top:9px;padding-bottom:9px}
  .ordbox label.zask input[type=checkbox]{min-width:22px;min-height:22px}
  .ordbox label.volba input[type=radio]{min-width:22px;min-height:22px}
}