@charset "UTF-8";
/* ==========================================================================
   Domácí lékárna — mobilní styly (Fáze 2, PRD kap. 6)
   Psáno mobile-first: základ platí pro nejužší zařízení, vrstvy `min-width`
   přidávají tablet. Soubor se načítá JEN pod 1024 px (media="(max-width:1023px)");
   od 1024 px platí beze změny desktopový styl.css.
   ========================================================================== */


/* ==== Převzaté vizuální vlastnosti ze styl.css (barvy, pozadí, okraje, písmo; BEZ rozvržení) — vygenerováno 2. 10. 2026, ručně neupravovat ==== */
td, th {color:#000;}
a:link, a:visited {color:#000; text-decoration:underline;}
a:active, a:hover {color:#000; text-decoration:none;}
.red {color:#d80218;}
a:active, a:hover {text-decoration:none; color:#000;}
.big {font-weight:700; background-image:url(/img/vlnka.jpg); background-repeat:no-repeat; background-position:left bottom;}
.sloupec {background-color:#f5fdd9; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.pokracovani {font-style:italic;}
.sloupec h2 {color:#678503; font-weight:300;}
.sloupec h2 {border-bottom:dashed #678503 1px; color:#008926;}
.sloupec h2 a:link, .sloupec h2 a:visited {text-decoration:none;}
.sloupec h2 a:active, .sloupec h2 a:hover {text-decoration:underline;}
.sloupec2 .sloupec h2 {color:#678503; font-weight:300;}
.sloupec2 .sloupec h2 a:link, .sloupec2 .sloupec h2 a:visited {color:#678503; text-decoration:underline;}
.sloupec2 .sloupec h2 a:active, .sloupec2 .sloupec h2 a:hover {color:#678503; text-decoration:none;}
.sloupec h3 {color:#678503; font-weight:300;}
.sloupec h3 {border-bottom:dashed #678503 1px; color:#008926;}
.sloupec2 h2 span {font-weight:400;}
.sloupec a:link, .sloupec a:visited {color:#678503; text-decoration:underline;}
.sloupec a:active, .sloupec a:hover {text-decoration:none; color:#678503;}
.sloupec h2 a:link, .sloupec h2 a:visited {text-decoration:none; color:#008926;}
.sloupec h2 a:active, .sloupec h2 a:hover {text-decoration:underline; color:#008926;}
.dva_sloupce_vpravo {border-bottom:2px solid #678503;}
.dva_sloupce_vlevo {border-bottom:2px solid #678503;}
.popis1 li {background-color:#008926; color:#FFF; font-weight:700;}
.popis1 h3 {background-color:#008926; color:#FFF; font-weight:700;}
.popis2 p span {color:#008926;}
.popis2 table {border:1px solid #678503;}
.popis2 table tr {border:1px solid #678503;}
.popis2 table td, .popis2 table th {border:1px solid #678503;}
.tabulka {border:1px solid #678503;}
.tabulka tr {border:1px solid #678503;}
.tabulka td, .tabulka th {border:1px solid #678503;}
.do_kosiku {background:url(/img/do-kosiku.gif) -114px top no-repeat;}
.do_kosiku a {text-decoration:none; background:url(/img/do-kosiku.gif) left top no-repeat;}
.do_kosiku a:hover {background-image:none;}
.vlozit {background-image:url(/img/do-kosiku2.gif);}
.cena {color:#008926; font-weight:700;}
.sleva {font-weight:700;}
.sleva2 {font-weight:700;}
.sleva span, .sleva2 span {color:#d80218;}
.popis1 h1 span {font-weight:400;}
.popis1 .odesilame {color:#008926;}
.slozeni {border:2px solid #678503; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.souvisejici {border-bottom:2px solid #678503;}
.souvisejici h3 {font-weight:700; background-image:url(/img/vlnka-mensi.jpg); background-repeat:no-repeat; background-position:left 60px; color:#678503;}
.souvisejici_pripravek p {font-weight:700;}
.souvisejici a:link, .souvisejici a:visited {color:#000; text-decoration:underline;}
.souvisejici a:active, .souvisejici a:hover {text-decoration:none; color:#678503;}
.produkty h1, .siroky_nadpis {font-weight:700; background-image:url(/img/vlnka.jpg); background-repeat:no-repeat; background-position:left bottom;}
.produkt h2 {color:#FFF; background-color:#008926;}
.produkt h2 a:link, .produkt h2 a:visited {color:#FFF; text-decoration:none;}
.produkt h2 a:active, .produkt h2 a:hover {color:#FFF; text-decoration:underline;}
.produkt_dole p a {color:#678503;}
.siroky_text p span {color:#008926;}
.siroky_text li span {color:#008926;}
.siroky_text table {border:1px solid #678503;}
.siroky_text table tr {border:1px solid #678503;}
.siroky_text table td {border:1px solid #678503;}
.siroky_text h2 {color:#008926;}
.siroky_text h2.clanek {font-weight:700; color:#000;}
.siroky_text h3.clanek {font-weight:700; color:#008926;}
.siroky_text h4.clanek {font-weight:700; color:#008926;}
.oko_kocka {-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; border:2px solid #bde921;}
.clanek_produkt {border:dashed #678503 1px;}
.ramecek {border:2px solid #678503;}
.sloupec2 li {background-color:#008926; color:#FFF; font-weight:700;}
.indikace {background-color:#008926; color:#FFF; font-weight:700;}
.sloupec2 h2 a:link, .sloupec2 h2 a:visited {color:#000; text-decoration:none;}
.sloupec2 h2 a:active, .sloupec2 h2 a:hover {color:#000; text-decoration:underline;}
.sloupec2 h2.zeleny {color:#FFF; background-color:#008926; -webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
.sloupec2 h2.zeleny a {color:#fff;}
.vice {color:#678503; font-style:italic;}
.vice a:link, .vice a:visited {color:#678503; text-decoration:underline;}
.vice a:active, .vice a:hover {color:#678503; text-decoration:none;}
.podtrhnout a:link, .podtrhnout a:visited {text-decoration:none;}
.podtrhnout a:active, .podtrhnout a:hover {text-decoration:underline;}
.kosik {border:0 solid #678503;}
.kosik tr {border:0 solid #678503;}
.kosik td {border:1px solid #dfe6c5; border-width:0 0 1px 0;}
.kosik th {border:1px solid #adcf6a; border-width:0 0 1px 0; font-weight:400;}
.objednavky h1 {font-weight:700; background-image:url(/img/vlnka.jpg); background-repeat:no-repeat;}
.objednavka {border:0 solid #678503;}
.objednavka tr {border:0 solid #678503;}
.objednavka td {border:1px solid #dfe6c5;}
.objednavka th {border:1px solid #adcf6a; font-weight:400;}
.smazat {background-color:#678503; font-weight:700;}
.smazat a:link, .smazat a:visited {color:#fff; text-decoration:none;}
.smazat a:active, .smazat a:hover {color:#d80218; text-decoration:none;}
.kusu {border:1px solid #678503;}
.registrace h1 {font-weight:700; background-image:url(/img/vlnka-mensi.jpg); background-repeat:no-repeat; background-position:left 10px; color:#000;}
.pole {border:2px solid #678503;}
.registrace p {font-weight:700; color:#d80218;}
.black {color:#000;}
.nejprodavanejsi_vyrobek {background-image:url(/img/gelmodel.jpg); background-repeat:no-repeat; background-position:0 38px;}
.nejprodavanejsi_vyrobek_100ml {background-image:url(/img/gelmodel_100ml.jpg); background-repeat:no-repeat; background-position:0 38px;}
.nejprodavanejsi {color:#d80218; font-weight:400; background-image:url(/img/vlnka-nejmensi.jpg); background-position:0 0; background-repeat:no-repeat;}
.velky_text {font-weight:700; color:#008926;}
.velky_text a:link, .velky_text a:visited {color:#008926; text-decoration:none;}
.velky_text a:active, .velky_text a:hover {text-decoration:underline; color:#008926;}
.nejprodavanejsi_vyrobek h2 {background-color:#008926; color:#FFF; font-weight:700;}
.nejprodavanejsi_vyrobek h2 a:link, .nejprodavanejsi_vyrobek h2 a:visited {color:#fff; text-decoration:none;}
.nejprodavanejsi_vyrobek h2 a:active, .nejprodavanejsi_vyrobek h2 a:hover {text-decoration:underline; color:#fff;}
.nejprodavanejsi_vyrobek ul {list-style-image:url(/img/puntiq.png);}
.nejprodavanejsi_vyrobek .pokracovani a:link, .nejprodavanejsi_vyrobek .pokracovani a:visited {color:#678503; text-decoration:underline;}
.nejprodavanejsi_vyrobek .pokracovani a:active, .nejprodavanejsi_vyrobek .pokracovani a:hover {text-decoration:none; color:#678503;}
.novinka h3 {border-bottom:2px solid #bde921; color:#d80218; font-weight:400;}
.novinka h2 {background-color:#008926; color:#FFF; font-weight:700;}
.novinka a:link, .novinka a:visited {color:#678503; text-decoration:underline;}
.novinka a:active, .novinka a:hover {text-decoration:none; color:#678503;}
.novinka h2 a:link, .novinka h2 a:visited {color:#fff; text-decoration:none;}
.novinka h2 a:active, .novinka h2 a:hover {text-decoration:underline; color:#fff;}
.vyhod_nakup_in {background-image:url(/img/bg-vyhod-nakup.png); background-repeat:repeat-y; background-position:3px 0;}
.vyhod_nakup h4 {background-color:#FFF; font-weight:400;}
.vyhod_nakup h3 {background-image:url(/img/vlnka-vyhodny-nakup.png); background-repeat:no-repeat; background-position:0 15px; color:#d80218; font-weight:400;}
.vyhod_nakup h2 {background-color:#008926; color:#FFF; font-weight:700;}
.vyhod_nakup h2 a:link, .vyhod_nakup h2 a:visited {color:#fff; text-decoration:none;}
.vyhod_nakup h2 a:active, .vyhod_nakup h2 a:hover {text-decoration:underline; color:#fff;}
.nabidka {background-repeat:no-repeat; background-position:center 22px;}
.certifikaty img {border:5px solid #f5fdd9;}
.neni {color:#d80218; font-weight:700;}
.pole2 {border:2px solid #678503;}
.zeptejte textarea {border:2px solid #678503;}
.siroky_text_poradna h5 {font-weight:400; border-bottom:2px solid #678503;}
.siroky_text_poradna h6 {font-weight:400;}
.validace {color:#d80218; font-weight:700;}
.odpoved textarea {border:2px solid #678503;}
.pole3 {border:2px solid #678503;}
.darek {color:#d80218;}
.form_warning {color:#d80218; font-weight:700;}
.objednavky-tabulka td {border:solid 1px #688303;}
/* ==== konec převzatého bloku ==== */

/* ---- Základ ------------------------------------------------------------ */
*, *::before, *::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
body, td, th {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #000;}
body {margin: 0; background: #fff; line-height: 1.5;}
img {max-width: 100%; height: auto; border: 0;}
a:link, a:visited {color: #000; text-decoration: underline;}
a:hover, a:active {text-decoration: none;}
iframe, video, object, embed {max-width: 100%;}
.red {color: #d80218;}
hr.cleaner {clear: both; height: 1px; margin: -1px 0 0; padding: 0; border: 0; visibility: hidden;}
.schovat {position: absolute; left: -9999px; height: 1px; overflow: hidden;}

/* ---- Obálka stránky ---------------------------------------------------- */
#main {position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; min-height: 100vh; background: #fff; text-align: left;}
#main > #obsah {flex: 1 0 auto; width: 100%;}
#main > #footer {margin-top: auto;}
#obsah {position: relative; width: auto; margin: 0 auto; max-width: none; padding: 0 20px 72px;   /* nad patičkou 2× mezera pod menu (36 px) */ background: none;}

/* ---- Hlavička ---------------------------------------------------------- */
#srdce {display: none;}
#top {height: auto; margin: 0 -20px; padding: 0; background: #eef9c4;}
#logo-male-top {display: block; position: absolute; top: 8px; left: 20px; z-index: 5;}
#logo-male-top img {display: block; width: 64px; height: auto;}
#nad_menu {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; height: auto; margin: 0; padding: 10px 20px 8px 96px; min-height: 80px;}
#login {order: 2; float: none; flex: 1 1 100%; width: auto; margin: 0; padding: 0; text-align: right; font-size: 12px; line-height: 1.6;}
/* e-shop / ikona + košík / přípravky v košíku — každé na vlastním řádku, bez mezer */
#login h3 {display: block; margin: 0; padding: 0; font-size: 14px; color: #678503;}
#login br {display: inline;}
#login h3 + br, #login > img {display: none;}
/* „zobrazit košík": vlastní řádek s mezerou nad i pod, písmo o 1 px větší (řádek pod ním už dělá blok, ne <br>) */
#login strong {display: block; margin: 5px 0; font-size: 13px;}
#login strong + br {display: none;}
/* ikona košíku: Lucide „shopping-cart" (licence ISC), místo obrázku kosik.gif */
#login strong a::before {content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -4px; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23678503%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278%27 cy=%2721%27 r=%271%27/%3E%3Ccircle cx=%2719%27 cy=%2721%27 r=%271%27/%3E%3Cpath d=%27M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12%27/%3E%3C/svg%3E") no-repeat center / contain;}
#login a:link, #login a:visited {color: #000; text-decoration: none; font-weight: 700;}
#claim {order: 1; flex: 1 1 160px; margin: 0 !important; padding: 0 !important; font-size: 13px; font-weight: 400; line-height: 1.35; color: #008926;}
#claim span {display: block; margin-top: 2px; color: #000; font-size: 105%; line-height: 1.35;}

/* ---- Menu: hamburger a akordeon ---------------------------------------- */
.menu {position: relative; z-index: 10; margin: 0; padding: 0; height: auto; background: #678503; border-radius: 0;}
.menu-prepinac {display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 20px; border: 0; background: transparent; color: #fff; font: 700 15px/1 Verdana, Geneva, sans-serif; text-align: left; cursor: pointer;}
.menu-prepinac:focus-visible, .menu-sipka:focus-visible, .menu a:focus-visible {outline: 3px solid #bde921; outline-offset: -3px;}
.menu-prepinac-ikona, .menu-prepinac-ikona::before, .menu-prepinac-ikona::after {display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; content: ""; position: relative;}
.menu-prepinac-ikona::before {position: absolute; top: -7px; left: 0;}
.menu-prepinac-ikona::after {position: absolute; top: 7px; left: 0;}
.menu > ul {display: none; margin: 0; padding: 0; list-style: none; background: #fff; border-bottom: 3px solid #bde921;}
.menu.menu-otevrene > ul {display: block;}
.menu > ul > li {position: relative; margin: 0; padding: 0; border-top: 1px solid #dfe6c5;}
.menu > ul > li > a {display: block; min-height: 44px; margin: 0; padding: 0 56px 0 20px; color: #678503; font-size: 15px; line-height: 44px; text-decoration: none;}
.menu > ul > li > a b {display: inline; font-weight: 700; padding: 0;}
.menu > ul > li.current > a {color: #008926;}
.menu-sipka {display: block; position: absolute; top: 0; right: 0; width: 56px; height: 44px; margin: 0; padding: 0; border: 0; border-left: 1px solid #dfe6c5; background: transparent; cursor: pointer;}
.menu-sipka::after {content: ""; position: absolute; top: 16px; left: 22px; width: 9px; height: 9px; border-right: 2px solid #678503; border-bottom: 2px solid #678503; transform: rotate(45deg); transition: transform .15s;}
li.otevrena > .menu-sipka::after {top: 19px; transform: rotate(-135deg);}
.menu ul ul {display: none; margin: 0; padding: 0 0 6px; list-style: none; background: #f5fdd9;}
.menu li.otevrena > ul {display: block;}
.menu li {position: relative;}
.menu ul ul ul {display: none; background: #e9f6bd; padding: 0;}
.menu ul ul li.otevrena > ul {display: block;}
.menu ul ul li {margin: 0; padding: 0;}
.menu ul ul a {display: block; min-height: 44px; padding: 0 56px 0 28px; color: #d80218; font-size: 14px; line-height: 44px; text-decoration: none;}
.menu ul ul ul a {padding-left: 44px;}
.menu ul ul .menu-sipka {border-left-color: #cfe58a;}
.menu .close, .menu:hover .close {display: none !important;}

/* ---- Patička ----------------------------------------------------------- */
#footer {position: static; height: auto; overflow: visible; width: auto; margin: 0; padding: 20px 20px 24px; background: #678503 url(/img/bg-footer.gif) repeat-x; color: #fff;}
#footer_text {width: auto; margin: 0; padding: 0; background: none;}
#footer_text p {margin: 0 0 12px !important; padding: 0 !important; color: #fff; font-size: 12px; line-height: 1.6;}
#footer a:link, #footer a:visited {color: #fff; text-decoration: underline; display: inline-block; padding: 4px 0;}
#footer .heureka, #fb, #logo {float: none; display: inline-block; margin: 0 12px 12px 0; vertical-align: middle;}
#footer br {display: none;}
/* doprava a odběr, obchodní podmínky a zásady ochrany údajů — každé na vlastním řádku */
#footer_text p .paticka-doprava, #footer_text p a[href*="obchodni-podminky"], #footer_text p a[href*="osobni_udaje"] {display: block; margin-top: 8px;}
#footer_text p a[href*="osobni_udaje"] {margin-top: 0;}
/* odkazy v textu patičky bez svislého odsazení (žádné mezery mezi řádky); e-mail na novém řádku */
#footer_text p a:link, #footer_text p a:visited {padding: 0;}
#footer_text p br:first-of-type {display: inline;}
#footer_text p .paticka-mezera {display: none;}
#logo-male-top + * {clear: both;}
#footer-clear {clear: both;}

/* ---- Obecné rozvržení obsahu ------------------------------------------- */
.homepage, .sirsi_sloupec, .sloupec2, .sloupec, .siroky_text, .siroky_text_poradna, .produkty, .zbozi, .popis1, .popis2, .vyhod_nakup, .vyhod_nakup_in, .novinka, .produkt, .prvni, .druhy, .ikonky, .objednavky, .registrace {float: none; width: auto; max-width: 100%; margin-left: 0; margin-right: 0;}
.homepage {padding: 12px 0 0;}
.produkty {margin: 12px 0;}
.produkty h1, .siroky_nadpis, .big, .objednavky h1, .registrace h1 {margin: 18px 0 14px; padding: 0 0 10px; height: auto; font-size: 21px; line-height: 1.25; background-position: left bottom;}
h1 {font-size: 24px; line-height: 1.2;}
.siroky_text p, .siroky_text ul, .siroky_text table, .siroky_text h2.clanek, .siroky_text h3.clanek, .siroky_text h4.clanek, .siroky_text_poradna h3, .siroky_text_poradna h5, .siroky_text_poradna h6, .siroky_text_poradna p, .profil_text p {margin-left: 0; margin-right: 0; text-align: left;}
.siroky_text img {max-width: 100%;}
.siroky_text, .siroky_text_poradna, .profil_text, .produkt, .popis1, .popis2 {overflow-wrap: anywhere;}
/* nadpisy: názvy článků mají v DB nezlomitelné mezery (&nbsp;) — na úzkém displeji zalomit, jinak přetečou */
h1, .siroky_nadpis, .big {overflow-wrap: anywhere;}
.siroky_text_poradna h3, .siroky_text_poradna h5, .siroky_text_poradna h6 {font-size: 100%;}   /* podpis tazatele (h6) a odpovídajícího (h5) velký jako text, jako ve styl.css */
.siroky_text_poradna h6 {margin-top: 1.5em; margin-bottom: 1.5em;}   /* mezery jako před zvětšením písma (2.33em z 0.67em) */
.siroky_text_poradna h5 {margin-top: 1.4em; margin-bottom: 1.4em;}   /* (1.67em z 0.83em) */
.sloupec, .sloupec2 {margin: 0 0 16px;}
/* zelené bloky: vnitřní okraje jako na desktopu (styl.css) */
.sloupec {padding-bottom: 5px;}
.sloupec p {margin: 0; padding: 0 15px 10px;}
.sloupec ul {margin: 0 0 0 35px; padding: 0 15px 10px 0;}
.sloupec h2, .sloupec h3 {margin: 0 0 10px; padding: 5px 15px;}
.slozeni, .ramecek {margin: 16px 0;}
.slozeni {padding: 10px 15px;}
.produkt {margin-bottom: 20px;}
.produkt h2 {margin-right: 0;}
.produkt_vpravo, .sleva_vpravo {margin: 10px 0 0;}
.produkt_vlevo {float: none; margin: 10px 0 8px;}
.produkt ul {clear: both; margin: 8px 0 0 18px; padding: 0; list-style-position: outside;}
.produkt_dole {margin: 8px 0 0;}
/* seznam přípravků: nadpis 36 px pod menu jako na detailu, název přípravku velký jako „Indikace" (h3) na detailu */
.produkty:has(> .produkt) > h1 {margin-top: 36px; margin-bottom: 36px;}
.produkt h2 {font-size: 1.17em; padding-top: 4px; padding-bottom: 4px; padding-left: 10.5px;}   /* text od stejného místa jako nadpis (inline padding-left 0.5em z 21 px) */
.produkt {margin-bottom: 36px;}   /* mezera nad názvem dalšího přípravku */
.produkt_dole > p {margin-left: 18px;}   /* „více informací" od textu odrážek (.produkt ul) */
/* cena a vedle ní „do košíku", obojí zarovnané doprava — jako na detailu (.popis1) */
.produkt_vpravo, .sleva_vpravo {display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; column-gap: 20px;}
.produkt_vpravo > *, .sleva_vpravo > *, .produkt_vpravo_darek > * {flex: 0 0 100%; min-width: 0;}
/* „Dárek zdarma": šablona obal .produkt_vpravo_darek nezavírá (je v něm obrázek 1 Kč, .produkt_vpravo, odrážky
   i „více informací") — obal se ruší, jeho obsah se skládá jako u ostatních přípravků */
.produkt_vpravo_darek {display: contents;}
.produkt_vpravo_darek > img {display: block; margin: 10px 0 0 auto;}
.produkt .cena {order: 1; flex: 0 1 auto; margin: 10px 0 0; font-size: 1.5em; line-height: 1.2;}
.produkt .neni {order: 0; flex: 1 1 0; margin: 10px 0 0; text-align: right; align-self: baseline;}
.produkt_vpravo:has(> .neni) > .cena {align-self: baseline;}
.produkt .do_kosiku2 {order: 2; flex: 0 0 auto;}
.pole, .pole2, .pole3, .zeptejte textarea, .odpoved textarea {width: 100%; max-width: 100%; margin-left: 0;}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {font-size: 16px; max-width: 100%;}
input[type="submit"], input[type="button"], button {min-height: 44px;}
input[type="submit"], input[type="button"] {background-repeat: no-repeat; background-position: center;}
.zeptejte p[style], .odpoved p[style] {padding-left: 0 !important;}
/* Poradna: odkaz na formulář — vzhled podle styl.css (tam display: none, proto ho převzaté vlastnosti nemají), písmo menší než 1.3em ze styl.css (David); od 900 px skrytý */
.otazka {margin: 1em 0 !important; color: #008926; font-size: 1.1em; font-weight: 700;}
.otazka a:link, .otazka a:visited, .otazka a:hover, .otazka a:active {color: #008926;}
.sloupec .foto_cv {display: block; margin-left: 15px;}   /* Poradna, Naši spolupracovníci: fotka zarovnaná s textem bloku (.sloupec p 15 px) */

/* ---- Úvodní stránka ---------------------------------------------------- */
/* Markup má dvojice bloků pro desktop a mobil: stejný obsah jako na desktopu, jen pod sebou.
   .zobrazovat_729 je starší alternativa Gelmodelu (na desktopu skrytá) — nezobrazuje se.
   Video „Názor veterináře" je dvakrát: nahoře (.nezobrazovat_resp2) a ve veterinárních přípravcích
   (.nezobrazovat_resp) — jako na desktopu dole. */
.zobrazovat_729, .nezobrazovat_resp2 {display: none;}
/* Pořadí bloků (jen CSS, šablona se nemění): prostřední sloupec desktopu (Gelmodel, pak PROGen) → levý
   (videa Trč a Bulava) → pravý (Novinka, Nenašli jste?) → Řekli o nás → humánní → veterinární přípravky */
#obsah:has(> .homepage) {display: flex; flex-direction: column;}
#obsah:has(> .homepage) > hr.cleaner, .homepage > hr.cleaner {display: none;}
.homepage {display: contents;}
.homepage > .sirsi_sloupec:has(.nejprodavanejsi_vyrobek_100ml) {order: 1; margin-top: 36px;}   /* pod menu 36 px jako nadpis na ostatních stránkách (.produkty h1) */
.homepage > .sirsi_sloupec {order: 2;}
.homepage > .sloupec {order: 3;}
#obsah:has(> .homepage) > .vyhod_nakup {order: 4;}
.homepage > .novinka {order: 5;}
#obsah:has(> .homepage) > .siroky_nadpis, #obsah:has(> .homepage) > .pripravky {order: 6;}
.homepage .sloupec, .sirsi_sloupec .sloupec {float: none !important; margin: 0 0 20px !important; width: auto;}
.sirsi_sloupec .novinka, .homepage .novinka {float: none !important; width: auto !important; margin: 20px 0 !important;}
.novinka h2, .novinka h2[style] {margin-left: 0 !important; font-size: 16px;}
/* zelené nadpisy bloků (Novinka, Řekli o nás, Tip měsíce…) jako název přípravku na /pripravky (.produkt h2) */
.homepage .novinka h2, .souvisejici .novinka h2, .vyhod_nakup h2 {margin: 7px 0 0 !important; padding: 4px 10.5px; font-size: 1.17em; line-height: 1.5; text-align: left;}
.novinka img {float: none; display: block; margin: 0 0 10px;}
/* obrázek dole: nápis přípravku (spodní polovina obrázku, do 96 px nad jeho spodní hranou) leží pod textem, ne přes něj */
.nejprodavanejsi_vyrobek {background-image: url(/img/gelmodel.jpg); position: relative; margin: 0 0 20px; padding: 0 0 80px; min-height: 230px; box-sizing: border-box; background-repeat: no-repeat; background-position: right bottom; background-size: auto 190px;}
.nejprodavanejsi_vyrobek_100ml {background-image: url(/img/gelmodel_100ml.jpg);}
.nejprodavanejsi_vyrobek[style*="progen"] {background-position: right 10% bottom;}   /* jen PROGen: obrázek kousek od pravého okraje */
.nejprodavanejsi_vyrobek h2 {width: auto; margin-right: 0;}
.nejprodavanejsi_vyrobek .velky_text, .velky_text {margin: 0 45% 0 5px; font-size: 16px;}
.nejprodavanejsi_vyrobek ul {margin: 10px 45% 0 5px; padding: 0; list-style-position: inside;}   /* odrážky pod zeleným textem (.velky_text 5 px) */
.nejprodavanejsi_vyrobek p[style] {padding-left: 5px !important;}   /* „více informací" také */
.nejprodavanejsi_vyrobek p {margin-right: 45%;}
.nejprodavanejsi_vyrobek img {float: none; margin: 0;}
.nejprodavanejsi_vyrobek img.vyhodne-baleni {position: absolute; bottom: 104px; right: 78px; width: 70px; height: 70px;}   /* vlevo vedle lahve (lahev od 74 px zprava), nad nápisem přípravku */
/* „Nejprodávanější přípravek", „Novinka na trhu": větší písmo, tah vlnky (16.–28. řádek obrázku 31 px) pod textem, text odsazený 0.5em jako nadpis na /pripravky */
.nejprodavanejsi {height: auto; margin: 0; padding: 0 0 14px 0.5em; font-size: 19px; line-height: 1.5; background-position: left bottom;}
.klik a {height: 0;}
.vyhod_nakup {float: none; width: auto; margin: 0 0 20px; padding: 0;}
/* šedý blok Novinka / Nenašli jste?: obsah uvnitř šedého podkladu, šířka nejvýš jako blok Znáte z TV */
.vyhod_nakup_in {width: auto; max-width: 300px; margin: 0 auto; padding-bottom: 1px; background: #f5f2f2;}
.vyhod_nakup h4 {margin: 0; padding: 0 0 5px;}
.vyhod_nakup h3 {margin: 10px 0 0; padding: 0 15px 16px; height: auto; font-size: 1.17em; background-position: left bottom;}   /* vlnka pod textem */
.vyhod_nakup_in .partner {padding: 0 0 15px;}
.vyhod_nakup_in .partner h2 {margin: 5px 15px 0 !important;}
.vyhod_nakup_in .partner p, .vyhod_nakup_in .partner ul {margin: 5px 15px;}
.vyhod_nakup_in .partner ul {padding-left: 20px;}
.vyhod_nakup_in .partner img.partner-img {display: block; margin: 0 15px; max-width: calc(100% - 30px); height: auto;}
.vyhod_nakup .nabidka p a {height: 60px;}
.souvisejici, .souvisejici[style] {clear: both; width: auto !important; max-width: 100%; height: auto !important; margin: 0 !important; padding: 0 0 16px; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center;}   /* do 600 px pod sebou, na střed */
.souvisejici h3 {grid-column: 1 / -1; padding-left: 0; background-position: left bottom; height: auto; padding: 0 0 32px 60px;   /* tah vlnky (řádky 15–27 obrázku 42 px) až pod textem */ font-size: 18px; justify-self: stretch; text-align: left;}
.souvisejici_pripravek, .souvisejici_pripravek[style] {float: none; width: auto; margin: 0 !important;}
/* Tip měsíce a další články mezi přípravky: přes celou šířku, text zarovnaný vlevo; velký obrázek nad textem, malá fotka obtékaná */
.souvisejici .novinka {grid-column: 1 / -1; justify-self: stretch; text-align: left;}
.souvisejici .novinka h3 {padding: 0 0 3px; background: none;}   /* Tip měsíce: jen rovná čára (border .novinka h3), bez vlnky */
.souvisejici .novinka img[width="270"] {float: none !important; max-width: 100%; height: auto;}
.souvisejici > .novinka + .novinka {margin-top: 24px;}   /* Trávící problémy: 36 px pod Tipem měsíce (s mezerou mřížky či flexu 12 px) */
/* úvodní stránka: široké nadpisy na jeden řádek od 440 px (Verdana tučně 18 px: „…veterinární přípravky" 386 px) */
#obsah:has(> .homepage) > .siroky_nadpis {font-size: 18px; padding-bottom: 18px;}   /* tah vlnky (29.–41. řádek obrázku 46 px) pod textem */
.pripravky.nazor {margin: 0 0 20px !important; padding-bottom: 0 !important;}
.pripravky.nazor .sloupec {float: none !important;}
.video_nahled {margin: 0 0 8px; max-width: 100%; height: auto;}
/* Znáte z TV: blok jako na desktopu (300 px, štítek vpravo přes nadpis, video odsazené 13 px) */
#obsah .sloupec:has(> .znate) {width: 100%; max-width: 300px; margin-left: auto !important; margin-right: auto !important;}   /* na střed */
.znate {display: block; position: relative; margin: -12px 13px -15px auto;}
.sloupec .video_nahled {margin: 0 13px 10px; max-width: calc(100% - 26px);}

/* ---- Zelené bloky: nahoře 2× mezera mezi odstavci (odstavec 1em) — platí pro všechny ---- */
#obsah .sloupec {margin-top: 2em !important;}   /* id přebije margin !important u jednotlivých stránek */

/* ---- Tlačítko „do košíku" (sprite 114 × 32 px, dotykový cíl rozšířen na 44 px) ---- */
.do_kosiku, .do_kosiku2 {position: relative; width: 114px; height: 32px; margin: 6px 0; padding: 0;}
.do_kosiku a {display: block; position: static; width: 100%; height: 100%; overflow: visible;}
.do_kosiku a::after {content: ""; position: absolute; top: -6px; right: 0; bottom: -6px; left: 0;}
.vlozit {width: 114px; height: 44px; min-height: 44px; border: 0; background-repeat: no-repeat; background-position: center; background-size: 114px 32px; cursor: pointer;}

/* „Do košíku" ve formuláři (.do_kosiku2): tlačítko z CSS podle obrázku do-kosiku2.gif (barvy z něj).
   Šablona má <input value=" ">, text proto kreslí obal a průhledné tlačítko leží přes celou plochu. */
.do_kosiku2 {width: fit-content; height: auto; margin: 10px 0 0;}
.do_kosiku2 form {margin: 0;}
.do_kosiku2::before {content: "Do košíku"; display: block; min-height: 44px; padding: 0 52px 0 16px; border-radius: 6px; background: #eafbad url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' fill='none' stroke='%23668503' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h4l4 16h16l4-11'/%3E%3Cpath d='M18 1v10M14 7l4 4 4-4'/%3E%3Ccircle cx='11' cy='24' r='2'/%3E%3Ccircle cx='23' cy='24' r='2'/%3E%3C/svg%3E") no-repeat right 12px center / 30px 26px; color: #d70016; font: 700 17px/44px Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;}
.do_kosiku2:hover::before {background-color: #dcf58a;}
.do_kosiku2 .vlozit {position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 6px; background: none;}

/* „Pokračovat" (košík, expedice) a „Objednat" (souhrn objednávky): stejné tlačítko jako „Do košíku", šipka místo košíku.
   Šablona má <input value=" "> s obrázkem (pokracovat.gif, objednat.gif) přímo v buňce tabulky — text kreslí buňka
   (::after, šířka pevně 200 px) a průhledné tlačítko leží přesně přes něj. Šablony beze změny.
   Obojí je absolutně, aby 200 px nerozšířilo sloupce tabulky (buňka má colspan 3 — názvy přípravků by se mačkaly).
   Pod 600 px pod textem „Všechny ceny…" (místo dělá okraj tabulky), od 600 px vedle něj v řádku. */
td:has(> input[name="pokracovat"], > input[name="objednat"]) {position: relative; padding: 0;}
table:has(td > input[name="pokracovat"], td > input[name="objednat"]) {margin-bottom: 76px;}
td:has(> input[name="pokracovat"])::after, td:has(> input[name="objednat"])::after {content: "Pokračovat"; display: inline-block; box-sizing: border-box; width: 200px; min-height: 44px; padding: 0 52px 0 16px; border-radius: 6px; background: #eafbad url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23668503' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat right 14px center / 26px 26px; color: #d70016; font: 700 17px/44px Arial, Helvetica, sans-serif; text-align: left; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; position: absolute; top: calc(100% + 12px); right: 3px; pointer-events: none;}   /* klik projde na tlačítko pod ním (::after se kreslí nad ním) */
td:has(> input[name="objednat"])::after {content: "Objednat";}
td:has(> input[name="pokracovat"]:hover)::after, td:has(> input[name="objednat"]:hover)::after {background-color: #dcf58a;}
td > input[name="pokracovat"], td > input[name="objednat"] {position: absolute; z-index: 1; top: calc(100% + 12px); right: 3px; width: 200px !important; height: 44px !important; min-height: 0; padding: 0; border-radius: 6px; background: none !important; cursor: pointer;}

/* ---- Detail přípravku: pořadí bloků (jen CSS, šablona ani obsah se nemění) ----
   prostřední sloupec desktopu (název, text, cena a „do košíku") → levý sloupec (obrázek a dávkování)
   → článek → názor odborníka → složení → související přípravky.
   600–899 px foto vpravo vedle dávkování; od 900 px obrázek vlevo a text vpravo jako na desktopu (viz níže). */
#obsah:has(> .zbozi) {display: flex; flex-direction: column;}
#obsah:has(> .zbozi) > hr.cleaner {display: none;}
.zbozi {display: flex; flex-direction: column; order: 1;}
.zbozi > .popis1 {order: 1;}
.zbozi > .popis2 {order: 2;}
.zbozi > .sloupec {order: 3; float: none !important; width: auto !important; margin: 0 0 16px !important;}
#obsah:has(> .zbozi) > .sloupec {order: 2; float: none !important;}
#obsah:has(> .zbozi) > .pripravky {display: contents;}
#obsah:has(> .zbozi) > .pripravky > .sloupec {order: 3; float: none !important; width: auto !important;}
#obsah:has(> .zbozi) > .tabulka, #obsah:has(> .zbozi) > .ikonky, #obsah:has(> .zbozi) > .slozeni {order: 4;}
#obsah:has(> .zbozi) > .pripravky > .souvisejici {order: 5;}
#obsah:has(> .zbozi) > .pripravky > hr.cleaner {display: none;}
/* text, pod ním cena a vedle ní „do košíku", obojí zarovnané doprava */
.popis1 {display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; column-gap: 20px;}
.popis1 > * {flex: 0 0 100%; min-width: 0;}
.popis1 > .cena {order: 1; flex: 0 1 auto;}
.popis1 > .neni {order: 1; flex: 1 1 0; margin: 10px 0 0; text-align: right; align-self: baseline;}
.popis1:has(> .neni) > .cena {align-self: baseline;}   /* text a cena na společné účaří */   /* „není skladem" a cena vždy na jednom řádku */
.popis1 > .do_kosiku2 {order: 2; flex: 0 0 auto; float: none !important;}
.popis1 > .odesilame {order: 3;}
.popis1 > br:first-child {display: none;}
/* prázdný odstavec (<p>&nbsp;</p>) mezi textem a cenou */
.popis1 > p:not([class]):has(+ .sleva, + .neni, + .do_kosiku2, + .cena) {display: none;}
.popis1 > h1 {margin: 36px 0 8px; padding: 0;}
.popis1 > p {margin: 0 0 1em;}                       /* v flexu se okraje nesčítají do sebe → polovina dřívější mezery */
.popis1 > p:has(+ p.red) {margin-bottom: 0;}         /* název a „NOVÉ BALENÍ…" bez mezery jako na desktopu */
.popis1 .cena {margin: 10px 0 0; font-size: 1.5em; line-height: 1.2;}
.popis1 .odesilame {margin: 12px 0 36px;}         /* dole stejná mezera jako nad nadpisem pod menu */
/* „Kompletní informace…": místo tří <br> na začátku mezera nahoře i dole jako nad nadpisem */
.popis2 > p:has(> br:first-child) {margin: 36px 0;}
.popis2 > p > br:first-child, .popis2 > p > br:first-child + br, .popis2 > p > br:first-child + br + br {display: none;}
/* zelené pruhy: Indikace i položky se stejnou mezerou a stejným levým odsazením textu (tečky jsou uvnitř) */
.popis1 h3 {margin: 6px 0 0; padding: 4px 8px;}
.popis1 ul {margin: 0 0 20px; padding: 0; list-style-position: inside;}
.popis1 > ul + p {margin-top: 16px;}   /* název pod zelenými pruhy: celkem 36 px jako pod menu */
.popis1 li {margin-top: 6px; padding: 4px 8px;}
/* odrážka „visí" vlevo, zalomený text začíná pod prvním řádkem textu (ne pod odrážkou) */
.popis1 ul li {position: relative; list-style: none; padding-left: 26px;}
.popis1 ul li::before {content: "•"; position: absolute; left: 9px; top: 4px;}

/* ---- Článek (clanek_view, clanek_produkt_top_view): nadpis, blok přípravku, další články ---- */
/* nadpis (.big — články, Eurocat, Poradna, profil, osobní údaje, cookies) 36 px pod menu jako na seznamu přípravků; tah vlnky (řádky 30–41 obrázku 46 px) až pod textem */
.big {margin-top: 36px; padding-bottom: 20px;}
/* blok přípravku: nejvýš 420 px, na střed; nahoře i nad zeleným blokem 36 px jako pod menu */
.sloupec2 > h2.zeleny, .clanek_produkt {max-width: 420px; margin-left: auto; margin-right: auto;}
.sloupec2 > h2.zeleny {margin-top: 36px; margin-bottom: 0; padding: 4px 10.5px; border-radius: 0; font-size: 1.17em; text-align: left;}   /* jako název na seznamu přípravků */
.clanek_produkt {margin-bottom: 0; padding-bottom: 1px;}
.clanek_produkt img {display: block; max-width: 100%; height: auto; margin: 0 auto;}
#obsah .clanek_produkt + .sloupec {margin-top: 36px !important;}
/* nadpis zeleného bloku na jeden řádek: písmo se zmenší podle šířky bloku. Nejdelší nadpis
   „Hummání přípravky - další články" má ve Verdaně 16,7 em, 30 px je padding h3 (.sloupec h3) */
/* fotka autora: pod nadpisem samostatně, od 480 px text vedle ní jako na desktopu (viz vrstva 480 px) */
.siroky_text img.portret {display: block; margin: 1em 0 0;}
.profil_text > img {display: block; max-width: 100%; height: auto; margin: 1em 0 0;}   /* Poradna, profil spolupracovníka (/poradna/tym/…): stejně jako fotka autora v článku */
.profil_text p[style*="padding-top"] {padding-top: 0 !important;}   /* inline odsazení z DB (Petříková 10em, Mach 3em) posouvá na desktopu text vedle fotky — na mobilu by dělalo díru */
.sloupec2:has(.indikace) > .sloupec {container-type: inline-size;}
.sloupec2:has(.indikace) > .sloupec > h3 {font-size: min(1.17em, (100cqi - 30px) / 17);}
/* Indikace a položky jako zelené pruhy na detailu přípravku (.popis1) */
.clanek_produkt .indikace {margin: 6px 15px 0; padding: 4px 8px; font-size: 1.17em;}
.clanek_produkt ul {margin: 0 15px; padding: 0; list-style: none;}
.clanek_produkt li {position: relative; margin-top: 6px; padding: 4px 8px 4px 26px;}
.clanek_produkt li::before {content: "•"; position: absolute; left: 9px; top: 4px;}
.clanek_produkt .vice {margin: 0; padding: 10px 15px; text-align: right;}

/* ---- Tabulky: posuv uvnitř kontejneru, nikdy celé stránky --------------- */
.objednavky-tabulka, .popis2 table, .tabulka, .siroky_text table {display: block; max-width: 100%; margin-left: 0; margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;}

/* ---- Košík, expedice, objednávka --------------------------------------- */
/* souhrn objednávky (.objednavka) stejně jako košík: jen vodorovné čáry, nejvýš 728 px (obsah při 768 px — od 768 px se nerozšiřuje) na střed, cena na jednom řádku;
   ne blok s posuvem — overflow by ořízl tlačítko „Objednat" vykreslené pod tabulkou */
.objednavka {display: table; width: 100%; max-width: 728px; margin: 15px auto; border-collapse: collapse;}
.objednavka td, .objednavka th {border-width: 0 0 1px 0;}
.objednavka td {padding: 16px 3px 12px 6px; vertical-align: middle;}
.objednavka th {padding: 3px; font-size: 85%; vertical-align: bottom;}
.objednavka td[width], .objednavka th[width] {width: auto;}
.objednavka td:last-child {white-space: nowrap;}   /* cena („1 083", „1 230") vždy na jednom řádku */
.objednavka td:first-child {overflow-wrap: anywhere;}
.objednavka td:first-child, .objednavka th:first-child {padding-left: 15px;}   /* odsazení zleva a zprava jako text v bloku adres (.sloupec p 15 px) */
.objednavka td:last-child, .objednavka th:last-child {padding-right: 15px;}
.objednavka td:has(> input[name="objednat"])::after, .objednavka td > input[name="objednat"] {right: 15px;}   /* Objednat končí s cenami */
.objednavky > h1 {margin-top: 36px; padding-bottom: 20px; padding-left: calc(max(0px, (100% - 728px) / 2) + 15px);}   /* text začíná s položkami tabulky a s adresami (15 px) */
/* odeslaná objednávka (objednano_view.php) jako souhrn: inline padding-left 220 px nadpisu přebít, text začíná s nadpisem */
.objednavky > h1[style] {padding-left: calc(max(0px, (100% - 728px) / 2) + 15px) !important;}
.objednavky > p[style*="center"] {max-width: 728px; margin: 0 auto; padding: 0 15px; text-align: left !important;}
/* košík jako na desktopu: jen vodorovné čáry (border-width ze styl.css), záhlaví malým písmem, malé zelené X a pole počtu;
   tabulka přes celou šířku (display: table — jako blok s posuvem by nevyplnila šířku), názvy přípravků se zalomí */
.kosik {display: table; width: 100%; max-width: 767px; margin: 15px auto; border-collapse: collapse;}   /* nejvýš 767 px, na střed pod nadpisem jako na desktopu (750 px) */
.kosik td {padding: 16px 3px 12px 6px; vertical-align: middle;}   /* řádky vyšší než na desktopu (10/4 px), i Celková cena zboží */
/* nadpis košíku: 36 px pod menu jako nadpis na detailu přípravku; tah vlnky (vlnka.jpg 46 px) níž pod textem jako u .big */
.produkty:has(> form > .kosik) > h1 {margin-top: 36px; padding-bottom: 20px; padding-left: calc(max(0px, (100% - 767px) / 2) + 6px);}   /* text začíná s položkami košíku (tabulka na střed + 6 px buňky), vlnka dál přes celou šířku */
.kosik th {padding: 3px; font-size: 85%; vertical-align: bottom;}
.kosik td[width], .kosik th[width] {width: auto;}
.kosik td:nth-child(4) {white-space: nowrap;}   /* cena (košík, expedice: „111 Kč", i „25 689 Kč") vždy na jednom řádku */
.kosik td:first-child {overflow-wrap: anywhere;}   /* 320 px: dlouhé slovo v názvu (ANTIOXIDATES) by tabulku roztáhlo přes okraj */
.kosik .kusu {width: 36px; padding: 2px 4px; text-align: right;}
.kosik .smazat {position: relative; width: 22px; height: 22px; margin: 0 0 0 auto; line-height: 22px; text-align: center; font-size: 110%;}
.kosik .smazat a {display: block;}
.kosik .smazat a::after {content: ""; position: absolute; inset: -11px;}   /* dotyková plocha 44 px, vidět je malý čtvereček */
input[type="radio"], input[type="checkbox"] {width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: middle;}
label {display: inline-block; min-height: 44px; line-height: 44px;}
/* zaškrtávací pole (registrace — newsletter, Poradna) v barvách webu místo modrého systémového: rámeček jako textová pole
   (2 px #678503), zaškrtnuté zelené s bílou fajfkou */
input[type="checkbox"] {-webkit-appearance: none; appearance: none; flex: none; border: 2px solid #678503; border-radius: 3px; background: #fff; cursor: pointer;}
input[type="checkbox"]:checked {background: #678503 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 18px 18px;}
input[type="checkbox"]:focus-visible {outline: 2px solid #9fcf2f; outline-offset: 2px;}
/* přepínače (expedice — doprava a platba) stejně: zelený kroužek, vybraný se zeleným bodem uprostřed */
input[type="radio"] {-webkit-appearance: none; appearance: none; flex: none; border: 2px solid #678503; border-radius: 50%; background: #fff; cursor: pointer;}
input[type="radio"]:checked {background: radial-gradient(circle, #678503 0 5px, #fff 5.5px);}
input[type="radio"]:focus-visible {outline: 2px solid #9fcf2f; outline-offset: 2px;}
/* aktivní textové pole: zelený rámeček místo modrého obrysu prohlížeče */
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {outline: 2px solid #9fcf2f; outline-offset: 0; border-color: #678503;}
/* registrace (Kontakt) pod 600 px: obsah od levého kraje jako na ostatních stránkách — popisek nad polem, pole přes celou
   šířku; řádky bez pole (mezery, „Fakturační adresa", tlačítko) nemají prázdnou buňku popisku; souhlas s newsletterem
   zaškrtávátko vedle textu. Od 600 px tabulka jako na desktopu (viz @media 600 px) */
.registrace > h1 {margin-top: 36px; padding-bottom: 26px; padding-left: 0.5em; background-position: left top 24px;}   /* text odsazený 0.5em jako nadpis na /pripravky (vlnka dál od kraje); tah vlnky (uprostřed obrázku) pod textem jako na desktopu, ne přes něj */
.registrace > p {margin: 7px 0 0;}
.registrace table, .registrace tbody, .registrace tr, .registrace td {display: block; width: auto;}
.registrace table {margin: 20px 0 0; border-spacing: 0;}
.registrace td {padding: 0; text-align: left;}
.registrace td:first-child {padding-top: 10px;}
.registrace tr:not(:has(.pole, .gdpr_checkbox)) > td:first-child {display: none;}
.registrace tr:has(.gdpr_checkbox) {display: flex; align-items: center; padding: 16px 0 6px;}
.registrace tr:has(.gdpr_checkbox) > td {padding: 0;}
.registrace td[style*="padding-top"] {padding-top: 25px !important;}   /* „Fakturační adresa" odsazená jako na desktopu */
.registrace .pole {width: 100%; padding: 7px 6px; margin: 4px 0 6px;}   /* pole vyšší než na desktopu (dotyk) */
.objednavky .sloupec, .objednavky .sloupec[style] {float: none !important; width: auto; max-width: 728px; box-sizing: border-box; margin: 0 auto 20px !important;}   /* adresy nad tabulkou, stejně široké a na střed */
#balikovna_vyzvednout iframe {width: 100%; height: 520px;}
.produkty form td[colspan] {min-width: 0;}

/* ---- Video ------------------------------------------------------------- */
.siroky_text iframe[src*="youtube"], .siroky_text iframe[src*="youtu.be"], .homepage iframe[src*="youtube"] {width: 100%; height: auto; aspect-ratio: 16 / 9;}

/* ==========================================================================
   Širší zařízení (vrstvy mobile-first; breakpointy 480 / 600 / 768 / 900 px,
   od 1024 px platí desktopový styl.css a tento soubor se nenačítá)
   ========================================================================== */

/* 400 px — „do košíku" (bez něj cena) na detailu odsazené od pravého okraje o 10 % šířky bloku */
@media (min-width: 400px) {
  .popis1 > .do_kosiku2 {margin-right: 10%;}
  .popis1:not(:has(> .do_kosiku2)) > .cena {margin-right: 10%;}   /* bez tlačítka (není skladem) končí cena na stejném místě */
  .produkt .do_kosiku2 {margin-right: 10%;}   /* seznam přípravků stejně jako detail */
  .produkt_vpravo:not(:has(> .do_kosiku2)) > .cena {margin-right: 10%;}
}

/* 480 px — větší telefony a telefony na šířku */
@media (min-width: 480px) {
  .kosik th:not(:first-child), .objednavka th:not(:first-child) {white-space: nowrap;}   /* košík: „cena za balení", „počet ks" na jednom řádku jako na desktopu (pod 480 px by tabulka přetekla) */
  body, td, th {font-size: 15px;}
  #nad_menu {padding-top: 12px; padding-bottom: 10px;}
  #claim {font-size: 14px;}
  .produkty h1, .siroky_nadpis, .big, .objednavky h1, .registrace h1 {font-size: 23px;}
  .produkt h2, .sloupec2 > h2.zeleny {padding-left: 11.5px;}   /* 0.5em z 23 px jako nadpis */
  .homepage .novinka h2, .souvisejici .novinka h2, .vyhod_nakup h2 {padding-left: 11.5px; padding-right: 11.5px;}
  #obsah:has(> .homepage) > .siroky_nadpis {font-size: 20px;}   /* 480 px: obsah 440 px, 20 px = 429 px */
  .nejprodavanejsi_vyrobek[style*="progen"] {padding-bottom: 0; background-position: right 20% bottom 26px;}   /* PROGen výš a víc vlevo, spodek nápisu „doplněk stravy" v řádku se spodkem „více informací"; (logo vedle „více informací"; na užším displeji by do něj zasahovalo) */
  .sloupec .foto_cv {float: left; margin: 0 24px 8px 15px;}   /* Poradna, Naši spolupracovníci: text vedle fotky jako na desktopu, mezera jako u fotek v článcích; hr.cleaner pod perexem obtékání ukončí */
  .siroky_text img.portret {float: left; margin: 1em 24px 8px 0;}   /* článek: text vedle fotky autora, horní hrana s prvním řádkem */
  .profil_text > img {float: left; max-width: 40%; margin: 1em 24px 8px 0;}   /* profil spolupracovníka: text vedle fotky jako na desktopu, nejvýš 40 % (fotky 100–300 px) */
  .profil_text {display: flow-root;}   /* okraj prvního odstavce uvnitř — horní hrana fotky s prvním řádkem */
  /* obtékané obrázky drží uvnitř textu (jinak se pod nimi blok přípravku posune vedle) a okraj prvního odstavce zůstane uvnitř jako od 900 px (float) */
  .siroky_text:has(> img.portret, p > img:first-child:not([style*="float"])) {display: flow-root;}
  /* obrázek na začátku odstavce v textu článku (z DB, např. fotka v čl. 43, graf v čl. 12): text vedle něj jako na desktopu;
     nejvýš 40 % šířky, aby větším obrázkům zbylo místo pro text */
  .siroky_text p > img:first-child:not([style*="float"]) {float: left; max-width: 40%; height: auto; margin: 0 24px 8px 0;}
  /* seznam přípravků: cena nad „do košíku", obojí vpravo vedle fotky */
  .produkt {display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; container-type: inline-size;}   /* v řadě mřížky se řádky neroztahují */
  .produkt > * {grid-column: 1 / -1;}
  .produkt > a:has(> .produkt_vlevo) {grid-column: 1;}
  .produkt:has(> .produkt_vpravo_darek) > a:has(> .produkt_vlevo) {grid-row: span 2;}   /* vpravo obrázek 1 Kč a pod ním cena */
  .produkt_vpravo_darek > * {grid-column: 1 / -1;}
  .produkt_vpravo_darek > img {grid-column: 2; justify-self: end; align-self: end; margin: 0 10cqw 0 0;}
  .produkt > .produkt_vpravo, .produkt > .sleva_vpravo, .produkt_vpravo_darek > .produkt_vpravo {grid-column: 2; align-self: center; flex-direction: column; align-items: flex-end; margin: 0; padding-right: 10cqw;}   /* 10 % šířky přípravku jako „do košíku" na detailu */
  .produkt > hr.cleaner {display: none;}
  .produkt_vpravo > *, .sleva_vpravo > * {flex: 0 0 auto;}
  .produkt .neni, .produkt_vpravo:has(> .neni) > .cena {align-self: flex-end;}
  .produkt .cena {margin: 0;}
  .produkt .do_kosiku2, .produkt_vpravo:not(:has(> .do_kosiku2)) > .cena {margin-right: 0;}
  #footer {padding: 22px 20px 26px;}
}

/* 600 px — malé tablety */
@media (min-width: 600px) {
  /* registrace jako na desktopu: popisky na jednom řádku vpravo zarovnané, pole vedle nich, formulář na střed (nejvýš 500 px:
     popisky 115 px + pole ~375 px = desktopových 300 px při 125% písmu); nadpis a chybová hlášení začínají s poli (polovina
     volného místa + sloupec popisků 115 px + 5 px buňky), vlnka na střed nad formulářem */
  .registrace table {display: table; width: 100%; max-width: 500px; margin: 20px auto 0;}
  .registrace tbody {display: table-row-group;}
  .registrace tr, .registrace tr:has(.gdpr_checkbox) {display: table-row; padding: 0;}
  .registrace td, .registrace tr:has(.gdpr_checkbox) > td, .registrace tr:not(:has(.pole, .gdpr_checkbox)) > td:first-child {display: table-cell; padding: 5px;}
  .registrace td:first-child {width: 115px; white-space: nowrap; text-align: right;}
  .registrace > h1 {padding-left: calc(max(0px, (100% - 500px) / 2) + 120px); background-position: center top 24px;}
  .registrace > p {padding-left: calc(max(0px, (100% - 500px) / 2) + 120px);}
  /* Pokračovat / Objednat vedle „Všechny ceny…" v řádku (buňka 68 px = tlačítko 44 + 2 × 12) */
  td:has(> input[name="pokracovat"], > input[name="objednat"]) {height: 68px;}
  table:has(td > input[name="pokracovat"], td > input[name="objednat"]) {margin-bottom: 15px;}
  td:has(> input[name="pokracovat"])::after, td:has(> input[name="objednat"])::after, td > input[name="pokracovat"], td > input[name="objednat"] {top: 12px;}
  /* detail přípravku: foto vpravo vedle dávkování (popis2 je flex položka, plovoucí obrázek drží uvnitř) */
  .zbozi > .popis2 > img {float: right; max-width: 48%; margin: 0 0 12px 20px;}
  .souvisejici, .souvisejici[style] {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
  #obsah:has(> .homepage) > .siroky_nadpis {font-size: 23px;}
  /* Gelmodel vodorovně jako PROGen (right 20 % = 20 % volného místa vedle obrázku 266 px); kolečko „20 % zdarma" se posune s lahví */
  .nejprodavanejsi_vyrobek_100ml {background-position: right 20% bottom;}
  .nejprodavanejsi_vyrobek_100ml img.vyhodne-baleni {right: calc(78px + (100% - 266px) * 0.2);}
  /* úvodní stránka: flex se zalamováním (mřížka se dvěma sloupci by od 768 px nedovolila třetiny u Řekli o nás).
     Vlevo Gelmodel, PROGen, Řekli o nás (nejvýš 520 px — širší by fotku odsunul daleko od textu), vpravo videa Trč
     a Bulava a šedý blok (--vid: nejvýš 300 px jako Znáte z TV); volné místo zůstane u pravého okraje okna.
     Řady určuje order (Gelmodel 1 + Trč 2, PROGen + Bulava 3, Řekli o nás 4 + šedý blok 5) a základní šířky, které
     řadu zaplní (−1 px na zaokrouhlení), takže další blok už se do ní nevejde. Hlavička, menu a ostatní bloky 100 %
     (flex-grow: #top má od 900 px záporné okraje a musí se roztáhnout). */
  #obsah:has(> .homepage) {--vid: min(300px, calc(50% - 12px)); display: flex; flex-flow: row wrap; column-gap: 24px; align-items: flex-start;}
  #obsah:has(> .homepage) > *, .homepage > * {flex: 1 1 100%; min-width: 0;}
  .homepage > .sirsi_sloupec, .homepage > .novinka {flex: 1 1 calc(100% - 25px - var(--vid)); max-width: 520px;}
  .homepage > .sirsi_sloupec:has(.nejprodavanejsi_vyrobek[style*="progen"]) {order: 3;}
  #obsah .homepage > .sloupec:has(a[href*="/clanek/36/"]) {flex: 0 0 var(--vid); order: 2; margin: 36px 0 20px !important;}   /* Názor lékaře, v řadě s Gelmodelem */
  #obsah .homepage > .sloupec:has(a[href*="/clanek/506/"]) {flex: 0 0 var(--vid); order: 3; margin: 0 0 20px !important;}   /* Sportovec */
  /* Řekli o nás vlevo, šedý blok (Novinka, Nenašli jste?) vpravo — order prohozený, aby oba padly do jedné řady */
  .homepage > .novinka {order: 4;}
  #obsah:has(> .homepage) > .vyhod_nakup {flex: 0 0 var(--vid); order: 5; margin-top: 20px;}   /* nahoře v řadě s Řekli o nás (margin 20 px) */
  #obsah:has(> .homepage) > .vyhod_nakup .vyhod_nakup_in {margin: 0;}
  /* veterinární přípravky: Tip měsíce vlevo a Názor veterináře vpravo ve stejných sloupcích jako výše, pod nimi
     Trávící problémy a přípravky (.souvisejici rozpuštěné do flexu, přípravky po třech) */
  .pripravky.nazor:has(> .nezobrazovat_resp) {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px;}
  .pripravky.nazor:has(> .nezobrazovat_resp) > .souvisejici {display: contents;}
  .pripravky.nazor:has(> .nezobrazovat_resp) > hr.cleaner, .pripravky.nazor:has(> .nezobrazovat_resp) > .souvisejici > hr.cleaner {display: none;}
  .pripravky.nazor:has(> .nezobrazovat_resp) .novinka:has(> h3) {order: 1; flex: 1 1 0; min-width: 0; max-width: 520px;}   /* Tip měsíce; základ 0 — se základem 520 px by flex-wrap video zalomil pod Tip */
  #obsah .pripravky.nazor > .sloupec.nezobrazovat_resp {order: 2; flex: 0 0 min(300px, calc(50% - 12px)); margin: 12px 0 20px !important;}
  .pripravky.nazor:has(> .nezobrazovat_resp) .novinka:not(:has(> h3)) {order: 3; flex: 1 1 100%;}   /* Trávící problémy */
  .pripravky.nazor:has(> .nezobrazovat_resp) .souvisejici_pripravek {order: 4; flex: 1 1 150px; min-width: 0;}
  #footer {padding: 24px 24px 28px;}
}
@media (min-width: 600px) and (max-width: 767px) {
  /* sloupec PROGenu je jen 268–330 px jako telefon pod 480 px: obrázek zase dole pod textem, jinak logo zasahuje do „více informací" */
  .nejprodavanejsi_vyrobek[style*="progen"] {padding-bottom: 80px; background-position: right 10% bottom;}
}

/* 768 px — tablety na výšku */
@media (min-width: 768px) {
  #nad_menu {padding-left: 112px;}
  #logo-male-top img {width: 84px;}
  #claim {font-size: 15px;}
  body, td, th {font-size: 16px;}

  /* hlavička: blok e-shop / košík vpravo vedle sloganu, nahoře u horního okraje */
  #login {flex: 0 0 auto;}

  /* seznam přípravků na 2 sloupce: mřížka s mezerou mezi sloupci, krajní okraje jako na detailu */
  .produkty:has(> .produkt) {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px;}
  .produkty:has(> .produkt) > :not(.produkt) {grid-column: 1 / -1;}
  .produkty:has(> .produkt) > hr.cleaner {display: none;}
  .produkt > .produkt_vpravo, .produkt > .sleva_vpravo, .produkt_vpravo_darek > .produkt_vpravo {padding-right: 20px;}
  .produkt_vpravo_darek > img {margin-right: 20px;}   /* ve sloupci by 10 % bylo málo */
  /* úzký sloupec: cena a „do košíku" se nevejdou vedle sebe → pod sebou, obojí u pravého okraje */
  .produkt .do_kosiku2, .produkt_vpravo:not(:has(> .do_kosiku2)) > .cena {margin-right: 0;}

  /* úvodní stránka: Řekli o nás | Novinka | Nenašli jste? ve třetinách (Novinka a Nenašli jste? v jednom šedém bloku
     přes dvě třetiny) — s jedním sloupcem 300 px vedle krátkého Řekli o nás zůstávalo prázdné místo */
  .homepage > .novinka {flex: 0 0 calc((100% - 48px) / 3 - 1px); max-width: none;}
  #obsah:has(> .homepage) > .vyhod_nakup {flex: 0 0 calc((100% - 48px) * 2 / 3 + 24px);}
  #obsah:has(> .homepage) > .vyhod_nakup .vyhod_nakup_in {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none;}
  .vyhod_nakup_in > :not(.partner) {grid-column: 1 / -1;}
}

/* 768–899 px — článek: blok přípravku a zelený blok dalších článků vedle sebe (od 900 px jsou oba pod sebou v pravém sloupci) */
@media (min-width: 768px) and (max-width: 899px) {
  .sloupec2:has(> .clanek_produkt) {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start;}   /* výšku zeleného bloku nese 2. řádek, nadpis zůstane u fotky */
  .sloupec2:has(> .clanek_produkt) > h2.zeleny {grid-column: 1; grid-row: 1; width: 100%; box-sizing: border-box;}
  .sloupec2:has(> .clanek_produkt) > .clanek_produkt {grid-column: 1; grid-row: 2; width: 100%;}
  #obsah .clanek_produkt + .sloupec {grid-column: 2; grid-row: 1 / span 2;}   /* margin-top 36 px jako nadpis bloku přípravku */
}

/* 900 px — tablety na šířku: menu v jedné řadě, obsah ve více sloupcích */
@media (min-width: 900px) {
  #obsah {padding: 0 24px 72px;}
  #top {margin: 0 -24px;}
  #logo-male-top {left: 24px;}
  #nad_menu {padding-left: 116px;}   /* logo 84 px jako od 768 px, jen o 4 px dál od kraje */

  /* detail přípravku: obrázek a dávkování vlevo, text vpravo (pořadí jako na desktopu) */
  .zbozi {flex-flow: row wrap; gap: 0 24px;}
  .zbozi > .popis2 {order: 1; flex: 0 0 268px;}
  .zbozi > .popis2 > img {float: none; max-width: 100%; margin: 0;}   /* úzký sloupec: foto zase nad textem */
  .zbozi > .popis1 {order: 2; flex: 1 1 0; min-width: 0;}
  .zbozi > .sloupec {flex: 1 1 100%;}

  /* menu: vodorovná lišta, podmenu se rozbalí při najetí nebo zaostření (klávesnice) */
  .menu-prepinac, .menu-sipka {display: none;}
  .menu > ul {display: flex; flex-wrap: wrap; background: transparent; border: 0;}
  .menu > ul > li {border: 0;}
  .menu > ul > li > a {min-height: 44px; padding: 0 16px; color: #fff; line-height: 44px;}
  .menu > ul > li.current > a, .menu > ul > li:hover > a, .menu > ul > li:focus-within > a {background: #008926; color: #fff;}
  .menu ul ul {position: absolute; top: 44px; left: 0; z-index: 20; min-width: 250px; padding: 8px 0 10px; background: #fff; border: 1px solid #bde921; border-top: 0; border-radius: 0 0 5px 5px; box-shadow: 0 3px 5px rgba(0, 0, 0, .4);}
  .menu > ul > li:hover > ul, .menu > ul > li:focus-within > ul {display: block;}
  .menu ul ul a {padding: 0 14px; white-space: nowrap; line-height: 34px; min-height: 34px;}
  .menu ul ul ul {top: -8px; left: 100%; background: #f5fdd9;}
  .menu ul ul li:hover > ul, .menu ul ul li:focus-within > ul {display: block;}

  /* obsah: text a postranní sloupec vedle sebe (seznam přípravků zůstává na 2 sloupce — na 3 by se fotka s cenou a tlačítkem nevešly) */
  .siroky_text, .siroky_text_poradna {float: left; width: calc(100% - 320px);}
  .sloupec2 {float: left; width: 300px; margin-left: 20px;}
  .otazka {display: none;}   /* Poradna: formulář je vedle otázek, odkaz „položit zde" skrytý jako na desktopu */
}