/* ============================================================
   Zapadne konfigurátor – rozvržení pro telefon (NÁVRH 23. 10. 2026)
   Platí jen pod html.mob (zapíná mobil.js: ?mobil=1 a šířka < 900 px). Načítá se po konfigurator.css.
   Nahoře 3D náhled (pevná výška), pod ním lišta podkroků a jen ta část nastavení, která k podkroku patří;
   dole pevná lišta Zpět / Další. DOM se nestěhuje – panel i pravý sloupec zůstávají, mění se jen viditelnost.
   html[data-sub]: 1 Šuplík (rozměry) · 2 Krabičky (typ, velikost, Navrhni mi to) · 3 Vlastnosti · 4 Barvy.
   ============================================================ */
html.mob{--mob-nav:64px;--mob-safe:env(safe-area-inset-bottom,0px)}
html.mob body.cfg{height:100vh;height:100dvh}

/* ---------- hlavička: logo · kroky (krátké názvy) · cena ---------- */
html.mob body.cfg .top{height:52px;padding:0 12px;gap:8px}
html.mob .top .brand{font-size:0;gap:0;flex:0 0 auto}
html.mob .top .brand small{display:none}
html.mob .top .brand .wm{display:none!important}html.mob .top .brand .wm~.logo{display:block}   /* na telefonu jen značka */
html.mob .top .logo{width:26px;height:26px}
html.mob .steps{flex:0 1 auto;margin:0 auto;min-width:0}
html.mob .steps button{font-size:0;padding:0 11px;height:32px}
html.mob .steps button::after{content:attr(data-short);font-size:13px}
html.mob .steps button.done::before{font-size:13px;margin-right:3px}
html.mob .total-pill{width:auto;min-width:0;flex:0 0 auto;gap:2px}
html.mob .pill-row{font-size:0;justify-content:flex-end}
html.mob .total-pill strong{font-size:15px;line-height:1.1;white-space:normal;text-align:right;max-width:104px}   /* „7 193 Kč (2 šuplíky)“ se zalomí, nepřeleze kroky */
html.mob .pill-row{white-space:normal}
html.mob .steps{flex-shrink:0}
html.mob .pill-note{display:none}

/* ---------- rozvržení: 3D nahoře, pod ním podkroky a nastavení ---------- */
html.mob body.cfg .layout{display:flex;flex-direction:column}
html.mob body.cfg .stage{order:1} html.mob .mobtabs{order:2} html.mob body.cfg .panel{order:3} html.mob body.cfg .bincard{order:4}   /* v HTML je panel před plochou */
html.mob body.cfg .stage{flex:0 0 auto;height:38svh;min-height:240px;max-height:420px;padding:8px 12px 0;gap:6px}
html.mob body.cfg:not(.s1) .stage{height:26svh;min-height:180px}
html.mob .stagebar{flex-wrap:nowrap;min-height:36px;gap:2px}
html.mob .stagebar .status,html.mob .hint3d,html.mob .tourhint{display:none!important}
html.mob .stagebar .ghost{height:36px}
html.mob #btnShareImg{font-size:0;gap:0;padding:0 10px}
html.mob #btnClear{padding:0 10px}
html.mob .seg button{width:44px}
html.mob .board-wrap{border-radius:14px}
html.mob .stats{flex-wrap:nowrap;overflow-x:auto;min-height:26px;gap:2px 10px;scrollbar-width:none;padding:0 2px}
html.mob body.cfg.s1 .stats{display:none}   /* v kroku 1 místo pro nastavení; cena je v hlavičce, výroba a obsazenost v kroku Uložit */
html.mob .stats::-webkit-scrollbar{display:none}
html.mob .propbar{flex-wrap:wrap;gap:6px}
html.mob .propbar>span:first-child{flex:1 1 100%}
html.mob .propbar .pbtn{flex:1 1 100%}
html.mob .propbar .pbtn button{flex:1;padding:0 8px}
/* nápověda nad 3D (texty pro dotyk, ne pro myš) */
.mobhint{display:none}
html.mob .mobhint{display:block;position:absolute;left:50%;top:8px;transform:translateX(-50%);max-width:calc(100% - 16px);z-index:4;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);
  color:var(--ink);font-size:12px;line-height:1.3;padding:5px 12px;border-radius:12px;text-align:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mob .mobhint.hidden{display:none}

/* lišta podkroků (jen krok 1) */
.mobtabs{display:none}
html.mob body.cfg.s1 .mobtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:2px;margin:8px 12px 4px;flex:0 0 auto;
  background:var(--track);border-radius:10px}
html.mob .mobtabs button{position:relative;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font-size:13px;font-weight:500;padding:0}
html.mob .mobtabs button.on{background:var(--seg);color:var(--ink);font-weight:600;box-shadow:var(--seg-shadow)}
html.mob .mobtabs .dot{display:none;position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
html.mob .mobtabs.sel .dot{display:block}

/* ---------- obsah pod lištou: panel (kroky 1, 2 a kroky aplikace 2/3) a pravý sloupec (3, 4) ---------- */
html.mob body.cfg .panel{flex:1 1 auto;min-height:0;border:0;padding:0 16px;background:var(--win)}
html.mob body.cfg .panel .step{padding:6px 0 calc(var(--mob-nav) + var(--mob-safe) + 16px);scrollbar-gutter:auto;gap:10px}
html.mob body.cfg.s1 .bincard{display:none;border:0;background:var(--win)}
html.mob:is([data-sub="3"],[data-sub="4"]) body.cfg.s1 .bincard{display:flex;flex:1 1 auto;padding-bottom:calc(var(--mob-nav) + var(--mob-safe))}
html.mob:is([data-sub="3"],[data-sub="4"]) body.cfg.s1 .panel{flex:0 0 0;padding:0;overflow:visible}
html.mob:is([data-sub="3"],[data-sub="4"]) body.cfg.s1 .panel .step{display:none}

/* podkrok 1 Šuplík: rozměry, mřížka, vzhled šuplíku */
html.mob body.cfg.s1 .panel .step[data-step="1"]>*{display:none}
html.mob[data-sub="1"] body.cfg.s1 .panel .step[data-step="1"]>.drawerblk{display:flex;border:0;padding-top:4px}
html.mob .drawerblk .dims label input{height:48px;font-size:20px}
html.mob .drawerblk .dhead h2{font-size:17px}
html.mob .dopts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
/* podkrok 2 Krabičky: typ, pole velikostí, Navrhni mi to */
html.mob[data-sub="2"] body.cfg.s1 .panel .step[data-step="1"]>.typepick{display:block}
html.mob[data-sub="2"] body.cfg.s1 .panel .step[data-step="1"]>.picker{display:block}
html.mob[data-sub="2"] body.cfg.s1 .panel .step[data-step="1"]>.row2{display:grid}
html.mob[data-sub="2"] body.cfg.s1 .panel .step[data-step="1"]>.autodlg:not(.hidden){display:block}
html.mob .row2>button{height:44px;font-size:14px}
html.mob .pgrid i{height:40px}
html.mob .typepick .tiles .tile.h54{min-height:52px}
html.mob .needs{max-height:none}

/* podkrok 3 Vlastnosti: výška, přihrádky, dno, štítek, stěny (+ Otočit/Kopie/Odebrat) · 4 Barvy: lem a vzorníky */
html.mob .bincard header{height:auto;min-height:52px;padding:6px 16px}
html.mob #binCardSlot{padding:8px 16px 12px;scrollbar-gutter:auto}
html.mob[data-sub="3"] #toolbar>#colorPop{display:none}
html.mob[data-sub="4"] #toolbar>:not(#colorPop){display:none}
html.mob[data-sub="4"] #colorPop{border:0;padding-top:0}
html.mob #toolbar{gap:12px}
html.mob .tiles .tile.h40,html.mob .divrow .segs .tile{min-height:40px}
html.mob .tiles .tile,html.mob #boxLabel .tile{min-height:38px}
html.mob .ctl.row{grid-template-columns:84px minmax(0,1fr)}
html.mob .labelrow{grid-template-columns:minmax(0,1fr)}
html.mob #boxLabel{grid-template-columns:repeat(2,minmax(0,1fr))}
html.mob #labelText{height:40px;font-size:14px}
html.mob .bincard footer{padding:8px 16px;gap:6px}
html.mob .bincard.nosel footer{display:none}   /* bez vybrané krabičky jsou Kopie/Odebrat/Na všechny nečinné → místo pro volby */
html.mob .bincard footer button{height:40px;flex:1 1 0;padding:0 4px;font-size:0;gap:0}   /* jeden řádek: krátké popisky z data-short (mobil.js) */
html.mob .bincard footer button .ic{display:none}
html.mob .bincard footer button::after{content:attr(data-short);font-size:13px}
/* barvy: tři skupiny pod sebou, vzorníky po šesti, větší cíle */
html.mob .colorpop{grid-template-columns:minmax(0,1fr);gap:16px}
html.mob .ccol .ch{flex-direction:row;align-items:baseline;gap:8px;height:auto;margin-bottom:8px}
html.mob .ccol:not(:last-child) .ch b,html.mob .ccol:not(:last-child) .ch .cname{padding-right:0}
html.mob .ccol .ch b{font-size:14px}
html.mob .ccol .cname{font-size:13px}
html.mob .swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px}
html.mob .sw:not(.reset){width:100%;height:auto;aspect-ratio:1;max-width:48px;justify-self:center}

/* ---------- pevná spodní lišta Zpět / Další ---------- */
html.mob body.cfg .panel .nav{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;height:calc(var(--mob-nav) + var(--mob-safe));
  padding:10px 16px calc(10px + var(--mob-safe));gap:10px;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--sep)}
html.mob body.cfg .panel .nav .helpwrap{display:block;margin:0;flex:0 0 auto}   /* „?“ = manuál (mobil.js), nápověda k myši se na telefonu neukazuje */
html.mob #helpBtn{width:44px;padding:0;font-size:0;gap:0}
html.mob #helpBtn .ic{width:20px;height:20px}
html.mob #helpPop{display:none!important}
html.mob .panel .nav button{height:44px;font-size:15px}
html.mob #prev{flex:0 0 auto;padding:0 16px}
html.mob #next{flex:1 1 auto;margin-left:auto;font-size:0;gap:0}
html.mob #next::before{content:"Další: " attr(data-to);font-size:15px;margin-right:4px}

/* kroky aplikace 2 a 3 na telefonu */
html.mob body.cfg:not(.s1) .panel .step{padding-top:12px}
html.mob .row>label{min-width:0}

/* „Jak na to“ na telefonu: okno dole přes celou šířku (pozici počítá app.js), nápověda nad 3D se neukazuje */
html.mob body.manual-on .mobhint{display:none!important}
html.mob .coach-pop{padding:10px 14px 12px;gap:6px}
html.mob .coach-pop h2{font-size:16px}
html.mob .coach-pop .man-dots{display:none}   /* pořadí říká „2 z 5“ nahoře, místo patří prvku nad oknem */
html.mob .coach-pop .man-lead{font-size:13px;line-height:1.4}
html.mob .coach-pop .man-cap{min-height:0;padding:6px 10px;font-size:12.5px}
html.mob .coach-pop .man-nav button{height:40px}
/* rolovací části dostanou dole místo, aby šel i poslední řádek (stěny, dno) odrolovat nad okno */
html.mob body.manual-on .panel .step,html.mob body.manual-on #binCardSlot{padding-bottom:70vh}

/* krok Krabičky: Otočit (tvar k položení / vybraná krabička) a Hotovo (přestat pokládat – jen když se pokládá) */
.mobpick,button.mobdone{display:none}   /* button.: jinak ho button.primary (inline-flex) ukázal i na počítači – ve 2D vykukoval zpod plátna */
html.mob[data-sub="2"] body.cfg.s1 .panel .step[data-step="1"]>.mobpick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
html.mob .mobpick button{height:44px;font-size:14px;min-width:0}
html.mob .mobpick [data-act="done"]{display:none}
html.mob body.placing .mobpick [data-act="done"]{display:inline-flex}
html.mob body:not(.placing) .mobpick{grid-template-columns:minmax(0,1fr)}
/* ruční přihrádky: Hotovo přímo nad 3D */
html.mob body.divedit .mobdone{display:inline-flex;position:absolute;right:10px;bottom:10px;z-index:5;height:40px;padding:0 16px;font-size:14px;box-shadow:var(--shadow-pop)}

/* telefon naležato (nízké okno): 3D vlevo, nastavení vpravo */
@media (orientation:landscape) and (max-height:520px){
  html.mob body.cfg .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  html.mob body.cfg .stage{grid-column:1;grid-row:1 / span 2;height:auto!important;min-height:0;max-height:none;padding-bottom:calc(var(--mob-nav) + var(--mob-safe) + 8px)}
  html.mob .mobtabs{grid-column:2;grid-row:1}
  html.mob body.cfg .panel,html.mob body.cfg .bincard{grid-column:2;grid-row:2;min-height:0}
  html.mob:is([data-sub="3"],[data-sub="4"]) body.cfg.s1 .panel{display:contents}   /* prázdný panel nesmí v mřížce zakrýt pravý sloupec */
  html.mob body.cfg:not(.s1) .panel{grid-row:1 / span 2}
  html.mob body.cfg .top{height:44px}
}
/* okno Podle věci: volby Věci uvnitř a Natočení každá na svém řádku, popisek vlevo, přepínač vpravo */
html.mob .recopt{flex:1 1 100%;justify-content:space-between}