/*
Mobilní vrstva paintball-shop.cz
- platí jen do šířky okna 1000 px; desktop (od 1001 px) se nemění
- připojuje ji index.php (jen mimo admin), verze ?v= podle data souboru
- stránka jde prohlížečům jako XHTML, CSS ji ale nikdy neshodí (chybné pravidlo prohlížeč jen přeskočí)
- spravuje Claude; inline styly z PHP přebíjí jen tam, kde je to nutné (!important)
Hranice (s rezervou 10–15 px před zalomením):
- do 1000 px: pružná kostra, levé menu zůstává vlevo, pravý sloupec se podle místa zalomí pod obsah
- do 775 px: hlavička s ikonkami (hledat, přihlášení, košík, menu), kategorie ve vysouvacím panelu (hamburger)
- do 700 px: mobil – vše v jednom sloupci
*/
/* ===== 1) Pružná kostra – do 1000 px ===== */
@media (max-width: 1000px) {
html, body { background: rgb(38,38,38); }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* rám stránky */
.main-main, .main-main-full { width: auto; max-width: 100%; background: white; }
.main-top-mapa, .main-top-line { display: none; }
/* hlavička: logo + vlajky (+ hamburger na mobilu) */
.main-top { width: auto; height: auto; display: flex; align-items: stretch; }
.main-top-left { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: auto; background: none; padding: 12px 12px 8px 16px; position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 4px; }
.main-top-left-logo { position: static; margin: 0; flex: 0 0 100%; min-width: 0; }
.main-top-left-logo img { width: 100%; max-width: 342px; height: auto; }
.main-top-flag { position: static; margin: 0 !important; display: inline-block; line-height: 18px; }
a[class*="-actual"] { display: none !important; }
.main-top-right { float: none; flex: 0 0 300px; width: 300px; height: auto; min-height: 112px; background-position: left center; position: relative; }
.main-top-right-logout { position: absolute; right: 8px; bottom: 6px; margin: 0; }
/* lišta pod hlavičkou: hledání | menu stránek | přihlášení a košík */
.main-topbot { width: auto; height: auto; display: flex; flex-wrap: wrap; background: rgb(0,128,216); }
.main-topbot > div { margin: 0; box-sizing: border-box; }
.main-topbot-left { float: none; flex: 0 0 200px; width: 200px; height: auto; min-height: 36px; background-size: cover; }
.main-topbot-center, .main-topbot-center-en, .main-topbot-center-sk { float: none; flex: 1 1 360px; width: auto; height: auto; min-height: 36px; display: flex; flex-wrap: wrap; background-size: auto 100%; }
.main-topbot-center a, .main-topbot-center-en a, .main-topbot-center-sk a { float: none; height: auto; flex: 1 1 auto; text-align: center; }
.main-topbot-center b, .main-topbot-center-en b, .main-topbot-center-sk b { margin: 0 !important; padding: 12px 8px 11px !important; white-space: nowrap; }
.main-topbot-right { float: none; flex: 0 0 200px; width: 200px; height: auto; min-height: 36px; padding-bottom: 6px; background-size: cover; }
.main-topbot-right-orig { width: auto; }
/* úvodní stránka: „Přihlášení“ jako odkaz na přihlašovací formulář v pravém sloupci (prvky .mm-login přidává PHP, na desktopu skryté) */
.main-topbot-right-orig .mm-login-text { display: none; }
a.mm-login { display: block !important; }
span.mm-login { display: inline !important; }
/* sloupce: levé menu | obsah (| pravý sloupec na úvodní stránce) */
.main-bottom { width: auto; display: flex; align-items: stretch; }
.main-bottom > div, .main-main .main-right > div { margin: 0; }
.main-left { float: none; flex: 0 0 200px; width: 200px; background-color: rgb(246,246,246); }
.main-right { float: none; flex: 1 1 0; min-width: 0; width: auto; }
.main-main .main-right { display: flex; flex-wrap: wrap; align-items: stretch; }
.main-right-left { float: none; flex: 1 1 500px; min-width: 0; width: auto; }
.main-right-right { float: none; flex: 1 1 200px; width: auto; }
.main-right-right > div { margin-left: auto; margin-right: auto; }
/* patička */
.main-footer { width: auto; height: auto; padding: 0 12px 12px; }
.main-footer-links-right { margin-left: 0; }
/* ===== úvodní stránka ===== */
.home { width: auto; padding: 0 10px; }
.home h3, .home-tri-top { width: auto; }
.home-tri-top { margin: 10px 0; }
/* mřížka produktů: z tabulky 3×3 plynulá mřížka (sloupce podle místa) */
/* pozor: v XHTML (XML) prohlížeč nevkládá do tabulek – pravidla musí počítat s tr přímo v table */
.home-tri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); width: auto; }
.home-tri > tbody, .home-tri tr { display: contents; }
.home-tri td { display: flex; flex-direction: column; justify-content: flex-end; }
.home-new { width: 100%; table-layout: auto; }
.home-new-col-01 { width: 140px; }
.home img, .home-new img { max-width: 100%; height: auto !important; }
/* ===== výpis kategorie a detail produktu ===== */
.items-list, .items-list-marks, .items-list-type, .items-list-text, .item-detail { width: auto; max-width: 100%; box-sizing: border-box; }
.items-list { margin: 10px; }
.items-list-totop a { position: static; margin: 0; display: inline-block; }
/* tabulky karty produktu → pružné řádky (pozor: v XHTML nejsou ) */
.item-detail-table, .item-detail-info, .item-detail-price { display: block; width: auto; }
.item-detail-table > colgroup, .item-detail-info > colgroup, .item-detail-price > colgroup { display: none; }
.item-detail-table > tr, .item-detail-table > tbody > tr,
.item-detail-info > tr, .item-detail-info > tbody > tr,
.item-detail-price > tr, .item-detail-price > tbody > tr { display: flex; flex-wrap: wrap; }
.item-detail-table > tr > td, .item-detail-table > tbody > tr > td,
.item-detail-info > tr > td, .item-detail-info > tbody > tr > td,
.item-detail-price > tr > td, .item-detail-price > tbody > tr > td { display: block; }
.item-detail-table { margin: 16px 12px 7px; }
td.item-detail-image { flex: 0 0 240px; }
td.item-detail-image + td { flex: 1 1 260px; min-width: 0; }
.item-detail-table > tr > td[colspan], .item-detail-table > tbody > tr > td[colspan] { flex: 1 1 100%; }
.item-detail-info > tr, .item-detail-info > tbody > tr { justify-content: space-between; column-gap: 12px; }
td.item-detail-info-name, td.item-detail-info-descr, td.item-detail-info-comments { flex: 1 1 100%; }
.item-detail-info-descr img, .item-detail-info-descr object, .item-detail-info-descr embed, .item-detail-info-descr iframe, .item-detail-info-descr table { max-width: 100% !important; height: auto !important; }
.item-detail-info-descr { overflow-wrap: anywhere; }
/* řádek varianty: název a cena, pod tím skladnost a tlačítko */
.item-detail-price > tr, .item-detail-price > tbody > tr { align-items: center; column-gap: 12px; padding: 4px 0; }
td.item-detail-price-opt { flex: 1 1 auto; text-align: left; white-space: normal; }
.item-detail-price-opt img { margin-left: 0; }
td.item-detail-price-price { flex: 0 0 auto; }
.item-detail-price > tr > td:empty, .item-detail-price > tbody > tr > td:empty { display: none; }
td.item-detail-price-submit { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.item-detail-price > tr > td.item-detail-price-submit, .item-detail-price > tbody > tr > td.item-detail-price-submit { display: flex; }
td.item-detail-price-submit > div[class^="item-detail-store-"] { position: static; margin: 0 auto 0 0; }
td.item-detail-price-submit > input, td.item-detail-price-submit > button { margin: 0; }
div[class*="item-detail-store-win"] { display: none !important; }
.item-detail-price-submit select, .item-detail-price-submit label { position: static; margin: 0; }
/* Sledování skladnosti: bez pevné šířky 170 px by ikonka (8 px od okraje) zajela do textu → víc místa vlevo, ikonka na střed */
.item-detail-price-submit button { width: auto; padding: 6px 12px 5px 34px; background-position: 9px center; }
.item-detail-info > tr > td, .item-detail-info > tbody > tr > td { min-width: 0; }
/* kompletní sety: seznam součástí, cena s tlačítkem, skladnost, fotky součástí */
.item-detail-set { width: 100%; max-width: 370px; margin: 10px 0 10px auto; }
.item-detail-price-set { display: block; width: auto; max-width: 370px; margin: 2px 0 10px auto; }
.item-detail-price-set > colgroup { display: none; }
.item-detail-price-set > tr, .item-detail-price-set > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 12px; }
.item-detail-price-set > tr > td, .item-detail-price-set > tbody > tr > td { display: block; }
.item-detail-price-set > tr > td:empty, .item-detail-price-set > tbody > tr > td:empty { display: none; }
.item-detail-price-set > tr > td.item-detail-price-submit, .item-detail-price-set > tbody > tr > td.item-detail-price-submit { display: flex; }
.item-detail-price-set .item-detail-price-submit input { margin: 0; }
.item-detail-price-price-set table { width: auto; margin-left: auto; }
.item-detail-price-store { width: auto; height: auto; min-height: 22px; margin-right: 0; }
.item-detail-price-store > div[class^="item-detail-store-"] { margin: 0 0 0 auto; }
td.item-detail-image-set { flex: 0 1 auto; padding-bottom: 12px; }
/* výrobci a řazení */
.items-list-marks, .items-list-type { display: block; }
.items-list-marks > colgroup, .items-list-type > colgroup { display: none; }
.items-list-marks > tr, .items-list-marks > tbody > tr, .items-list-type > tr, .items-list-type > tbody > tr { display: flex; flex-wrap: wrap; }
.items-list-marks td, .items-list-type td { display: block; }
.items-list-type td { flex: 1 1 auto; padding: 2px 4px; }
/* režim „Pouze obrázky“ → plynulá mřížka */
.items-list-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); width: auto; }
.items-list-img > tbody, .items-list-img tr { display: contents; }
.items-list-img td { display: block; }
/* komentáře (formulář i výpis): řádky tabulky se rozpustí, buňky se skládají pružně */
.item-detail-comment { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; width: auto; margin: 0 12px; }
.item-detail-space > .item-detail-comment { align-items: stretch; }
.item-detail-comment > colgroup { display: none; }
.item-detail-comment > tr, .item-detail-comment > tbody, .item-detail-comment > tbody > tr { display: contents; }
.item-detail-comment td { display: block; min-width: 0; box-sizing: border-box; }
.item-detail-comment > tr > td, .item-detail-comment > tbody > tr > td { flex: 1 1 calc(100% - 135px); }
.item-detail-comment > tr > td:first-child:not([class]):not([colspan]), .item-detail-comment > tbody > tr > td:first-child:not([class]):not([colspan]) { flex: 0 0 125px; }
.item-detail-comment > tr > td[colspan], .item-detail-comment > tbody > tr > td[colspan] { flex: 1 1 100%; }
/* opsání kódu až pod text komentáře, tlačítko Odeslat úplně dole */
.item-detail-comment > tr > td.item-detail-comment-div, .item-detail-comment > tbody > tr > td.item-detail-comment-div { flex: 1 1 100%; order: 1; }
.item-detail-comment > tr:last-child > td[colspan], .item-detail-comment > tbody > tr:last-child > td[colspan] { order: 2; }
.item-detail-comment div { width: auto; margin: 8px 0; }
.item-detail-comment-input-01 { width: calc(50% - 10px); box-sizing: border-box; }
.item-detail-comment-input-02, .item-detail-comment-input-03 { width: 100%; box-sizing: border-box; }
.item-detail-comment > tr > td.item-detail-comment-fullname, .item-detail-comment > tbody > tr > td.item-detail-comment-fullname { flex: 0 0 180px; }
.item-detail-comment > tr > td.item-detail-comment-text, .item-detail-comment > tbody > tr > td.item-detail-comment-text { flex: 1 1 260px; overflow-wrap: anywhere; }
.item-detail-comment > tr > td.item-detail-comment-center, .item-detail-comment > tbody > tr > td.item-detail-comment-center { flex: 1 1 100%; }
/* hlídání skladnosti: dvojice popisek + pole vždy na jednom řádku */
.cokl-button button { max-width: calc(100% - 24px); }
.cokl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; width: auto; margin: 0 12px 5px; }
.cokl > colgroup { display: none; }
.cokl > tr, .cokl > tbody, .cokl > tbody > tr { display: contents; }
.cokl td { display: block; min-width: 0; }
.cokl td.cokl-name { flex: 0 0 65px; }
.cokl td.cokl-name + td { flex: 1 1 calc(100% - 73px); }
.cokl td.cokl-name[colspan] { flex: 0 0 auto; }
.cokl td.cokl-name[colspan] + td { flex: 1 1 220px; }
.cokl td.cokl-blank { flex: 1 1 100%; height: 4px; padding: 0; }
.cokl td.cokl-name + td + td:last-child { flex: 1 1 100%; }
.cokl select, .cokl-input-01, .cokl-input-02 { width: 100%; max-width: 300px; box-sizing: border-box; }
.cokl select { max-width: none; }
.cokl button.item-detail-comment-submit { float: none; margin-left: auto; }
/* ===== hledání ===== */
.hledani { width: auto; margin: 20px 12px; }
.hledani form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; max-width: 490px; }
.hledani form input, .hledani form select { margin: 0; }
.hledani form input[type="text"] { flex: 1 1 160px; min-width: 0; }
.hledani form select { flex: 1 1 140px; min-width: 0; }
.hledani table { width: 100%; }
.hledani td { overflow-wrap: anywhere; }
/* ===== bazar: poučení nad formulářem, formulář a inzeráty pružně ===== */
.bazar { width: auto; margin: 20px 12px; }
.bazar-form-name { position: static; width: auto; height: auto; margin: 12px 12px 0; padding: 0 12px 12px; }
.bazar-form { width: auto; left: 0; min-height: 0; margin: 0 12px; padding: 0 12px 12px; box-sizing: border-box; }
.bazar-form table { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; width: auto; }
.bazar-form table > colgroup { display: none; }
.bazar-form table > tr, .bazar-form table > tbody, .bazar-form table > tbody > tr { display: contents; }
.bazar-form td { display: block; min-width: 0; box-sizing: border-box; }
.bazar-form td:first-child:not([colspan]) { flex: 0 0 170px; }
.bazar-form td + td { flex: 1 1 calc(100% - 178px); }
.bazar-form td[colspan] { flex: 1 1 100%; }
.bazar-form-input-01 { width: calc(50% - 4px); box-sizing: border-box; }
.bazar-form-input-02, .bazar-form-input-03 { width: 100%; box-sizing: border-box; }
.bazar-form input[type="file"] { max-width: 100%; }
.bazar-form-submit, .bazar-form-submit-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; height: auto; padding: 8px 0 0; }
.bazar-form-submit input, .bazar-form-submit-2 input { position: static; order: 1; margin: 0 0 0 auto; }
.bazar-seznam { display: grid; grid-template-columns: minmax(0, 1fr) 190px; width: auto; }
.bazar-seznam > colgroup { display: none; }
.bazar-seznam > tr, .bazar-seznam > tbody, .bazar-seznam > tbody > tr { display: contents; }
.bazar-seznam td { display: block; min-width: 0; }
td.bazar-seznam-blank { grid-column: 1 / -1; }
td.bazar-seznam-name, td.bazar-seznam-text { grid-column: 1; }
td.bazar-seznam-images { grid-column: 2; grid-row: span 2; }
.bazar-seznam-text { overflow-wrap: anywhere; }
/* ===== kontakt, obchodní podmínky, doprava, průvodce ===== */
.ko-1 { width: calc(100% - 200px); }
.onas { width: calc(100% - 24px); max-width: 450px; }
.onas-podm { width: calc(100% - 24px); max-width: 490px; }
.onas-list { width: auto; }
.onas td, .onas-podm td { overflow-wrap: anywhere; }
.podm { width: auto; margin: 0 12px; }
.prolamy { width: auto; margin: 20px 12px; }
/* ===== košík: tabulka se zúží (název se zalomí), tlačítko Pokračovat v toku ===== */
.kosik { width: calc(100% - 24px); max-width: 650px; }
input.kosik-submit-pokladna { position: static; max-width: calc(100% - 24px); margin: 12px; }
.kosik-price-2 { white-space: nowrap; }
/* ===== pokladna ===== */
.pokladna-sum { width: calc(100% - 24px); max-width: 450px; }
.pokladna-inputs, .pokladna-error { width: calc(100% - 24px); max-width: 650px; }
.pokladna-delii { position: static; margin: 0 0 6px; }
.pokladna-udaje { width: auto; padding-right: 12px; }
.pokladna-states select { max-width: 100%; }
/* ===== cookie lišta (psyduck) a překryvná vrstva: nikdy širší než okno ===== */
#lightbox { max-width: 100%; }
.psyduck-pb .psyduck-box-logo img { max-width: calc(100% - 20px); height: auto; }
/* ===== objednávky zákazníka: seznam, detail (tabulky z adminu), QR rekapitulace ===== */
.oblist { width: calc(100% - 24px); max-width: 670px; }
.objednavky-detail { width: calc(100% - 24px); max-width: 630px; }
.objednavky-detail td { overflow-wrap: break-word; }
.objednavka-cash { width: auto; max-width: 400px; margin: 20px 12px; }
.pokladna-recap { width: auto; margin: 0 12px; }
.pokladna-inputs-submit { flex-wrap: wrap; }
.pokladna-inputs-submit p { flex: 1 1 260px; padding: 0 16px 0 24px; }
}
/* ===== do 775 px: hlavička s ikonkami, levé menu jen přes hamburger =====
(pod 760 px + rezerva by se lišta Kontakt–Pokladna s přihlášením už nevešla vedle sebe)
prvky .mm-icons, .mm-search-form, .mm-login-panel a .mm-links přidává PHP se style="display: none;" – na desktopu skryté */
@media (max-width: 775px) {
/* hlavička: nahoře přepínač jazyků (při posunu stránky odjede pod okraj), pod ním logo a ikonky hledat / přihlášení / košík / menu;
ikonky jsou vždy vedle loga – když je místa málo, zmenší se logo (pod 435 px trochu i ikonky); fotka hlavy zůstává vpravo */
html { scroll-padding-top: 110px; }
.main-top { position: sticky; top: -24px; z-index: 900; background: url(/images/main/top_03.jpg) right top / auto 112px no-repeat, white; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.main-top-right { display: none; }
.main-top-left { padding: 4px 12px 6px; column-gap: 12px; row-gap: 2px; }
.main-top-left::before { content: ""; order: -3; flex: 1 1 0; }
.main-top-left::after { content: ""; order: -1; flex: 0 0 100%; }
.main-top-flag { order: -2; padding-right: 5px; border-radius: 3px; background-color: rgba(255,255,255,.88); background-position: 4px center; font-size: 11px; line-height: 18px; padding-left: 26px; }
.main-top-left-logo { order: 1; flex: 1 1 0; min-width: 0; max-width: 342px; }
/* logo je GIF s bílým podkladem – přes fotku se prolne (bílá zmizí, modrá zůstane) */
.main-top-left-logo img { mix-blend-mode: multiply; }
.mm-icons { display: flex !important; order: 2; gap: 6px; margin: 0 0 0 auto; }
.mm-icons > * { position: relative; display: block; width: 40px; height: 40px; border-radius: 4px; background: rgb(0,128,216) center / 22px no-repeat; font-size: 0; color: transparent; overflow: hidden; cursor: pointer; }
.mm-icons > .mm-search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E"); }
.mm-icons > .mm-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.mm-icons > .mm-cart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 12.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 7H6.2'/%3E%3C/svg%3E"); }
.mm-icons > .mm-btn::before { content: ""; position: absolute; left: 10px; top: 18px; width: 20px; height: 3px; background: white; box-shadow: 0 -6px 0 white, 0 6px 0 white; }
/* tečka: oranžová = v košíku něco je, zelená = zákazník je přihlášený */
.mm-cart-full::after, .mm-user-in::after { content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: rgb(255,170,0); box-shadow: 0 0 0 2px rgb(0,128,216); }
.mm-user-in::after { background: rgb(90,210,90); }
.main-top:has(#ms-toggle:checked) .mm-search, .main-top:has(#ml-toggle:checked) .mm-user { background-color: rgb(0,84,150); }
/* hledání a přihlášení se po ťuknutí na ikonku rozbalí v hlavičce pod logem (zůstávají i v přilepené hlavičce) */
#ms-toggle:checked + .mm-search-form, #ml-toggle:checked + .mm-login-panel { display: block !important; order: 3; flex: 0 0 100%; }
.mm-search-form > div { display: flex; gap: 6px; padding: 6px 0 2px; }
input.mm-search-text { flex: 1 1 0; min-width: 0; height: 40px; margin: 0; padding: 0 10px; box-sizing: border-box; border: 2px solid rgb(0,128,216); border-radius: 4px; background: white; font-size: 16px; }
input.mm-search-submit { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: rgb(0,128,216) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") center / 22px no-repeat; font-size: 0; color: transparent; cursor: pointer; }
.mm-login-panel { margin: 6px -12px -6px; padding: 8px 12px 10px; background: rgb(235,235,235); border-top: 1px solid rgb(205,205,205); }
.mm-login-panel > a { display: block; padding: 7px 0; font-weight: bold; }
.mm-login-name { padding: 2px 0 4px; }
/* přihlašovací formulář v panelu hlavičky */
.home-login { width: auto; height: auto; background: none; border: 0; }
.home-login form { margin: 0; padding: 0; }
.home-login table { width: 100%; max-width: 380px; margin: 0; font-size: 13px; }
.home-login td + td { display: flex; align-items: center; gap: 8px; }
.home-login input[type="text"], .home-login input[type="password"] { flex: 1 1 auto; min-width: 0; width: auto; min-height: 36px; box-sizing: border-box; font-size: 16px; }
.home-login input[type="text"] { margin-right: 48px; }
input.home-login-submit { position: static; flex: 0 0 auto; width: 40px; height: 36px; margin: 0; padding: 9px; box-sizing: border-box; background: rgb(0,128,216); border-radius: 4px; }
.home-login a { display: inline-block; margin: 8px 18px 0 4px; font-size: 12px; }
/* lišta pod hlavičkou: hledání, odkazy Kontakt–Pokladna (jsou v hamburgeru) i přihlášení jsou teď v hlavičce → celá pryč; přihlášení v pravém sloupci taky */
.main-topbot, #home-login { display: none; }
/* levé menu pryč z boku: kontakty a novinky pod obsah, kategorie ve vysouvacím panelu */
.main-bottom { flex-direction: column; }
.main-right { order: 1; flex: none; }
.main-left { order: 2; flex: none; width: auto; }
.main-left-contact-name, .main-left-contact { width: auto; }
.main-left-contact-name { background-repeat: no-repeat; background-color: rgb(193,192,192); }
.left-news { width: auto; padding: 0 12px; }
.home-news-name { width: auto; background-repeat: no-repeat; background-color: rgb(0,98,166); }
/* vysouvací menu kategorií (skryté zaškrtávací pole #mm-toggle, bez JavaScriptu) */
.main-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; width: 84%; max-width: 330px; margin: 0; padding: 60px 0 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(rgba(246,246,246,0) 25px, rgb(246,246,246) 112px) right top / 300px 112px no-repeat, linear-gradient(to right, rgb(246,246,246), rgba(246,246,246,0) 150px) right top / 300px 112px no-repeat, url(/images/main/top_03.jpg) right top / 300px 112px no-repeat, rgb(246,246,246); box-shadow: 2px 0 14px rgba(0,0,0,.45); font-size: 14px; transform: translateX(-110%); transition: transform .2s ease-out; visibility: hidden; }
#mm-toggle:checked ~ .main-left .main-menu { transform: none; visibility: visible; }
.main-menu ul { margin: 0; padding: 0 0 0 16px; list-style-type: square; }
.main-menu ul ul { padding-left: 18px; }
.main-menu ul a, .main-menu ul ul a { width: auto; padding: 3px 12px 3px 0; }
.main-menu .main-menu-separator, .main-menu .main-menu-separator-02 { top: 0; height: 9px; line-height: 4px; overflow: hidden; }
.main-menu-bottom { padding: 6px 0; margin-top: 8px; }
.mm-close { position: fixed; top: 6px; left: min(calc(84% - 56px), 274px); z-index: 1001; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(38,38,38,.75); color: white; font: bold 40px/1 tahoma, sans-serif; cursor: pointer; }
#mm-toggle:checked ~ .main-left .mm-close { display: flex !important; }
#mm-toggle:checked ~ .mm-backdrop { display: block !important; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.5); cursor: pointer; }
html:has(#mm-toggle:checked) { overflow: hidden; }
/* drobečková navigace v přilepené hlavičce (místo levého menu, které je v hamburgeru): bílý pruh přes celou šířku pod logem a ikonkami; prvek .mm-crumbs vypíše PHP v Main_Top, na desktopu skrytý */
.mm-crumbs { display: flex !important; order: 5; flex: 0 0 calc(100% + 24px); flex-wrap: wrap; align-items: center; margin: 4px -12px -6px; padding: 2px 12px 3px; box-sizing: border-box; background: white; border-top: 1px solid rgb(232,232,232); font-size: 11px; line-height: 18px; }
.mm-crumbs > * + *::before { content: "\203A"; display: inline-block; padding: 0 5px; color: rgb(150,150,150); font-weight: normal; }
.mm-crumbs a { color: rgb(0,98,166); }
.mm-crumbs span { color: rgb(70,70,70); }
a.mm-crumbs-home { width: 15px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230062a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / 14px no-repeat; font-size: 0; color: transparent; overflow: hidden; }
/* štítek TIP u detailu přečnívá nahoru (view2.css −24 px) – posunout dovnitř, ať nezajíždí pod hlavičku */
.item-detail-image-opt img { margin-left: -12px; margin-top: -14px; }
/* odkazy Kontakt–Pokladna na konci menu */
.main-menu .mm-links { display: block !important; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgb(205,205,205); }
.main-menu .mm-links a.mm-links-active { text-decoration: underline; }
}
/* nejužší telefony: menší ikonky, ať zbude víc místa pro logo */
@media (max-width: 435px) {
html { scroll-padding-top: 88px; }
.mm-crumbs { flex-basis: calc(100% + 20px); margin: 4px -10px -6px; padding: 2px 10px 3px; }
.main-top-left { padding: 4px 10px 6px; column-gap: 8px; }
.mm-icons { gap: 5px; }
.mm-icons > * { width: 36px; height: 36px; background-size: 20px; }
.mm-icons > .mm-btn::before { left: 8px; top: 16px; }
}
/* stín pod přilepenou hlavičkou až po posunu stránky – jen kde prohlížeč umí animaci podle posunu (Chrome, Edge, Safari 26);
jinde (zatím Firefox) zůstává stín trvale */
@keyframes mm-stin { from { box-shadow: 0 1px 6px rgba(0,0,0,0); } to { box-shadow: 0 1px 6px rgba(0,0,0,.2); } }
@media (max-width: 775px) {
@supports (animation-timeline: scroll()) {
.main-top { animation: mm-stin linear both; animation-timeline: scroll(); animation-range: 0 30px; }
}
}
/* kontakt: kamenná prodejna pod údaje, jakmile by tabulky vedle ní neměly místo */
@media (max-width: 885px) {
.ko-1 { float: none; width: auto; }
.ko-2 { float: none; width: auto; margin: 0 12px 12px; padding-bottom: 4px; text-align: center; }
.ko-2 p { text-align: left; }
.ko-2 a { display: inline-block; margin: 0 4px; }
}
/* ===== 2) Mobil – do 700 px ===== */
@media (max-width: 700px) {
input, textarea, select { font-size: 16px; }
/* obsah a pravý sloupec pod sebe */
.main-main .main-right { flex-direction: column; flex-wrap: nowrap; }
.main-right-left, .main-right-right { flex: none; }
.main-right-right { padding-bottom: 12px; }
.home-vote-name, .home-pricelist-name, .home-pricelist, .home-vote { width: auto; }
.home-vote-name, .home-pricelist-name { background-repeat: no-repeat; background-color: rgb(0,98,166); }
/* pravý sloupec pod obsahem: Lepší ceny, Novinky e-mailem, Anketa přes celou šířku (přihlášení je v hlavičce) */
.home-pricelist form > div { display: flex; align-items: center; gap: 8px; max-width: 380px; margin: 0 auto; padding: 0 12px; }
.home-pricelist label { padding: 0; }
input.home-pricelist-submit { position: static; flex: 0 0 auto; width: 40px; height: 36px; margin: 0; padding: 9px; box-sizing: border-box; background: rgb(0,128,216); border-radius: 4px; }
input.home-pricelist-email { flex: 1 1 auto; min-width: 0; width: auto; min-height: 36px; box-sizing: border-box; }
.home-vote form { width: auto; max-width: 380px; margin: 0 auto; padding: 0 12px 12px; }
.home-vote-anketa, .home-vote-anketa-2, .home-vote-anketa-back { width: auto; }
.home-vote table { width: 100%; }
.home-vote-radio { width: 28px; }
.home-vote-radio input { width: 20px; height: 20px; }
.home-vote-submit { min-height: 40px; padding: 0 18px; }
/* patička */
.main-footer-mw a { width: auto; }
/* výpis a detail produktu */
.items-list { margin: 8px 0; border-left-width: 0; border-right-width: 0; }
/* detail produktu (bez lišty výběru nahoře): pryč i horní šedý okraj 7 px nad obrázkem */
.items-list:not(:has(> .items-list-type)) { border-top-width: 0; }
.item-detail-table { margin: 14px 10px 7px; }
td.item-detail-image { flex: 1 1 100%; }
.item-detail-image a { margin: 0 auto; }
/* detail: velká fotka přes šířku – jen tam, kde mobil opravdu dostává w700 (sety a výpis mají w220, ty se nezvětšují) */
td.item-detail-image source[srcset*="_w700."] + img { width: 100% !important; max-width: 480px; height: auto !important; }
td.item-detail-image a:has(> picture > source[srcset*="_w700."]) { pointer-events: none; font-size: 0; padding: 0; border: 0; }
.item-detail-set-col-01 { width: 96px; }
td.item-detail-info-name { font-size: 1.2em; }
td.item-detail-price-kod { display: none; }
/* tlačítka Přidat do košíku / Sledování skladnosti: ikonka svisle na střed (ve view2.css je natvrdo 4 px od horního okraje), text od ní odsazený */
.item-detail-price-submit input, .item-detail-price-submit button { min-height: 40px; font-size: 13px; }
.item-detail-price-submit input[type="submit"], .item-detail-price-submit button { background-position: 12px center; background-size: 20px 20px; }
.item-detail-price-submit input[type="submit"] { padding: 0 16px 0 42px; }
.item-detail-price-submit button { padding: 0 14px 0 40px; }
/* cena výrazně větší */
td.item-detail-price-price { font-size: 18px; }
.home-tri b { font-size: 15px; }
.home-new td > div { font-size: 15px; }
/* úvodní stránka – popis novinek zkrácený na 6 řádků (zhruba 250 znaků na telefonu), seznamy a další odstavce skryté */
.home-new td > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; margin-bottom: 4px; }
.home-new td > p ~ p, .home-new td > ul, .home-new td > ol, .home-new td > br { display: none; }
/* komentáře: popisek nad polem, jméno autora nad textem */
.item-detail-comment > tr > td:first-child:not([class]):not([colspan]), .item-detail-comment > tbody > tr > td:first-child:not([class]):not([colspan]) { flex: 1 1 100%; padding-bottom: 0; }
.item-detail-comment > tr > td.item-detail-comment-fullname, .item-detail-comment > tbody > tr > td.item-detail-comment-fullname { flex: 1 1 100%; border-right: 0; padding-bottom: 6px; }
.item-detail-comment { margin: 0 10px; }
input.item-detail-comment-submit, button.item-detail-comment-submit { min-height: 40px; }
.item-detail-comment input[type="text"], .cokl input[type="text"], .cokl select { min-height: 36px; box-sizing: border-box; }
.item-detail-comment-input-04 { width: 90px; min-height: 40px; margin: 0; }
div.items-detail-comment-imform { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 10px 6px; }
.items-detail-comment-imform b { flex: 1 1 100%; padding-bottom: 2px; }
.items-detail-comment-imform img, img.items-detail-comment-imform-refresh { margin: 0; }
.item-detail-comment > tr > td:nth-child(2):not([class]), .item-detail-comment > tbody > tr > td:nth-child(2):not([class]) { display: flex; }
.item-detail-comment-input-01 { flex: 1 1 0; min-width: 0; }
/* hledání: každý výsledek jako karta (kategorie a výrobce nahoře, název pod nimi) */
.hledani { margin: 14px 10px; }
.hledani table { display: block; margin: 14px 0; }
.hledani table > colgroup, .hledani tr.hledani-top { display: none; }
.hledani table > tr, .hledani table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; border: 1px solid silver; border-top: 0; padding: 6px 8px; }
.hledani table > tr.hledani-name, .hledani table > tbody > tr.hledani-name { display: block; padding: 0; border: 0; }
.hledani td { display: block; border: 0; padding: 0; }
.hledani tr > td:first-child { grid-column: 1; grid-row: 1; font-size: .85em; }
.hledani tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 2px; }
.hledani tr > td:nth-child(3) { grid-column: 2; grid-row: 1; font-size: .85em; text-align: right; }
.hledani tr.hledani-name > td { padding: 6px 0 5px; }
.hledani table a { display: inline-block; padding: 2px 0; }
/* bazar: popisek nad polem, fotky a datum pod názvem inzerátu */
.bazar { margin: 14px 10px; }
.bazar-form-name, .bazar-form { margin-left: 0; margin-right: 0; }
.bazar-form td:first-child:not([colspan]) { flex: 1 1 100%; padding-bottom: 0; }
.bazar-form td + td { flex: 1 1 100%; }
.bazar-form input[type="text"], .bazar-form textarea { font-size: 16px; }
.bazar-form input[type="text"] { min-height: 36px; }
.bazar-form-submit input, .bazar-form-submit-2 input { min-height: 40px; width: auto; }
.bazar-seznam { grid-template-columns: minmax(0, 1fr); }
td.bazar-seznam-images { grid-column: 1; grid-row: auto; padding-top: 0; }
.bazar-seznam-images span { display: table; position: static; width: auto; margin: 0 0 8px; padding: 4px 10px 3px; }
.bazar-seznam-images a { display: inline-block; vertical-align: top; left: 0; margin: 0 8px 8px 0; }
.bazar-seznam-images img { margin: 0; }
td.bazar-seznam-name { height: auto; padding: 0 0 6px; }
/* kontakt a obchodní podmínky: popisek a hodnota vedle sebe, když se nevejdou, pod sebou */
.onas, .onas-podm { display: block; width: auto; max-width: calc(100% - 20px); margin: 16px 10px; }
.onas > colgroup, .onas-podm > colgroup { display: none; }
.onas > tr, .onas > tbody > tr { display: flex; flex-wrap: wrap; column-gap: 8px; }
.onas td, .onas-podm td { display: block; }
.onas td:first-child:not(:last-child) { flex: 0 0 auto; font-weight: bold; }
.onas td:last-child:not(:first-child) { flex: 1 1 160px; }
.onas td[colspan] { flex: 1 1 100%; }
.onas-list { padding: 10px 8px; }
.onas-podm ul { padding-left: 18px; }
.onas-podm li { text-align: left; }
.ko-2 { margin: 0 10px 12px; }
.podm { margin: 0 10px; }
.podm ol, .podm ul { padding-left: 34px; }
.prolamy { margin: 14px 10px; }
.cokl { margin: 0 10px 5px; }
/* registrace a nastavení účtu: popisek nad polem, pole přes šířku, č. p. / PSČ vedle ulice / města */
/* košík: každá položka jako karta (název, cena za kus, +/− počet, součet), pod položkami modrý blok se součty a tlačítkem */
.kosik { display: flex; flex-wrap: wrap; width: auto; max-width: none; margin: 10px; border-top: 1px solid silver; }
.kosik > colgroup, .kosik > tr.kosik-top { display: none; }
.kosik > tr, .kosik > tbody > tr { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 10px; border: 1px solid silver; border-top: 0; }
.kosik td { display: block; border: 0; padding: 0; }
.kosik td.kosik-kod { display: none; }
.kosik td.kosik-name { flex: 1 1 100%; font-size: 15px; }
.kosik td.kosik-price { flex: 1 1 0; width: auto; padding: 0; text-align: left; white-space: nowrap; }
.kosik td.kosik-price:last-child { text-align: right; font-weight: bold; }
.kosik td.kosik-input { flex: 0 0 auto; width: auto; padding: 0; }
.kosik-input-top { display: flex; width: auto; }
.kosik-input-top > div { display: flex; float: none; }
.kosik-input img { padding: 10px; background: rgb(221,221,221); }
.kosik-input input { width: 3.2em; height: 40px; box-sizing: border-box; float: none; margin: 0; padding: 0; border: 1px solid rgb(135,135,135); border-left: 0; border-right: 0; background: white; font-size: 16px; }
/* součty a tlačítko: řádky se rozpustí, tlačítko až na konec */
.kosik > tr.kosik-bottom, .kosik > tbody > tr.kosik-bottom { display: contents; }
.kosik-bottom > td[colspan="3"] { display: none; }
.kosik td.kosik-bottom-name { flex: 1 1 calc(100% - 130px); padding: 8px 8px 0 12px; box-sizing: border-box; }
.kosik td.kosik-price-2 { flex: 0 0 130px; width: auto; padding: 8px 12px 0 0; box-sizing: border-box; }
.kosik td.kosik-bottom-inputs { order: 1; flex: 1 1 100%; padding: 4px 12px 12px; }
.kosik-bottom-inputs br { display: none; }
input.kosik-submit-pokladna { width: 100%; max-width: 420px; height: 48px; margin: 8px auto 0; }
/* pokladna: popisek nad polem, pole přes šířku; doprava a platba s cenou vpravo; tlačítko Objednat přes šířku */
.pokladna-sum { margin: 16px 10px 10px; width: auto; }
.pokladna-error { width: auto; margin: 10px; }
.pokladna-error p { margin: 5px 12px; }
.pokladna-deliverys, .pokladna-payments, .pokladna-contacts { width: auto; margin: 12px 8px; }
.pokladna-inputs { display: block; width: auto; margin: 0; }
.pokladna-inputs > colgroup { display: none; }
.pokladna-inputs > tr, .pokladna-inputs > tbody > tr { display: block; }
.pokladna-inputs td { display: block; padding: 2px 12px; }
.pokladna-inputs td:empty { display: none; }
.pokladna-inputs-name b, .pokladna-inputs-name span { padding: 8px 0 0; }
.pokladna-inputs input[type="text"], .pokladna-inputs select, .pokladna-inputs textarea { width: 100%; max-width: 100%; min-height: 40px; box-sizing: border-box; font-size: 16px; }
.pokladna-inputs-multi div { float: none; }
.pokladna-inputs input.pokladna-inputs-size-8 { width: calc(100% - 96px); }
.pokladna-inputs input.pokladna-inputs-size-3 { width: 84px; }
.pokladna-inputs input.pokladna-inputs-size-5, .pokladna-inputs input.pokladna-inputs-size-51 { width: calc(50% - 6px); }
.pokladna-delii { padding: 4px 0; }
.pokladna-states label { padding: 6px 0; }
.pokladna-states select { display: block; width: calc(100% - 24px); margin: 6px 0 0 24px; }
.pokladna-inputs-dph { margin-left: 0; }
.pokladna-udaje { padding: 0 12px; }
.pokladna-deliverys-in, .pokladna-payments-in { padding: 6px; }
.pokladna-deliverys label, .pokladna-payments label { flex-wrap: wrap; padding: 12px 4px; }
.pokladna-deliverys-logo, .pokladna-payments-logo { flex-basis: 70px; width: 70px; }
.pokladna-deliverys-namedescr, .pokladna-payments-namedescr { flex: 1 1 150px; }
.pokladna-deliverys-price, .pokladna-payments-price { width: auto; margin-left: auto; padding: 9px 6px 0; white-space: nowrap; }
.pokladna-deliverys-namedescr button { width: 100%; max-width: 320px; min-height: 44px; }
.pokladna-sum-bottom { width: auto; max-width: 320px; margin: 10px auto; }
.pokladna-inputs-submit { flex-direction: column; }
.pokladna-inputs-submit p { flex: none; padding: 0 12px; }
.pokladna-inputs-submit > div { width: 100%; margin: 0; }
.pokladna-inputs-submit div button { float: none; width: calc(100% - 24px); max-width: 420px; margin: 0 auto 30px; }
/* objednávky: každá objednávka jako karta (číslo a stav, cena a datum, vpravo tlačítko Detail) */
.oblist { display: block; width: auto; max-width: none; margin: 12px 10px; text-align: left; border-top: 1px solid silver; }
.oblist > colgroup, .oblist > tr.oblist-top, .oblist > tbody > tr.oblist-top { display: none; }
.oblist > tr, .oblist > tbody > tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 8px 10px; border: 1px solid silver; border-top: 0; }
.oblist td { display: block; border: 0; padding: 0; }
.oblist tr > td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: bold; }
.oblist tr > td:nth-child(2) { grid-column: 2; grid-row: 1; }
.oblist tr > td:nth-child(3) { grid-column: 1; grid-row: 2; }
.oblist tr > td:nth-child(4) { grid-column: 2; grid-row: 2; font-size: .9em; }
.oblist tr > td.oblist-detail { grid-column: 3; grid-row: 1 / span 2; }
.oblist-price span { padding: 0; text-align: left; }
.oblist-detail a { width: auto; padding: 10px 16px; }
/* detail objednávky: tabulky zůstávají, jen užší pevné sloupce */
.objednavky-detail { width: auto; max-width: none; margin: 14px 10px; font-size: .85em; }
.objednavky-detail-col-01 { width: 88px; }
.objednavky-detail-col-02 { width: 40px; }
.objednavky-detail-col-03 { width: 76px; }
.objednavky-detail-col-04 { width: 46px; }
td.objednavky-detail-price { white-space: nowrap; }
.objednavky-detail-pack { width: 100%; }
.pokladna-recap { margin: 0 10px; }
.pokladna-recap-in { flex-wrap: wrap; justify-content: center; }
.pokladna-recap img { margin: 12px auto 0; max-width: 100%; }
.pokladna-recap-info { flex: 1 1 100%; padding: 12px 4px; font-size: .8rem; }
.registrace-name, .registrace-full { width: auto; margin: 14px 10px 0; }
.registrace .registrace-name { max-width: 100%; margin: 0; box-sizing: border-box; }
.registrace { width: auto; margin: 0 10px 20px; }
.registrace-er { width: auto; margin: 14px 10px; }
.registrace table { display: block; width: auto; margin: 0 10px; font-size: 0.9em; }
.registrace table > colgroup { display: none; }
.registrace table > tr, .registrace table > tbody > tr { display: block; }
.registrace td { display: block; }
.registrace td + td { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 4px; }
td.registrace-pad { padding: 6px 2px 2px; }
.registrace input[type="text"], .registrace input[type="password"] { flex: 1 1 0; min-width: 0; width: auto; min-height: 36px; box-sizing: border-box; font-size: 16px; }
.registrace input.registrace-small { flex: 0 0 84px; }
.registrace-client div { float: none; flex: 1 1 100%; display: flex; }
.registrace-descr { flex: 1 1 100%; padding: 2px 0 0; }
.registrace-submit input { width: auto; min-height: 44px; padding: 0 16px; }
}
@media (max-width: 775px) and (prefers-reduced-motion: reduce) {
.main-menu { transition: none; }
}
/* horní lišta na nejužších telefonech: místo osamoceného posledního odkazu dva úhledné řádky (3 + 2)
– česká a slovenská lišta potřebuje 370 px, anglická 448 px (+ rezerva) */
@media (max-width: 385px) {
.main-topbot-center a { flex: 1 1 30%; }
}
@media (max-width: 460px) {
.main-topbot-center-en a { flex: 1 1 30%; display: flex; align-items: center; justify-content: center; }
.main-topbot-center-en b { white-space: normal; }
}