:root{--bg:#f9f4ec;--ink:#24372d;--muted:#867b6b;--red:#9c3a39;--sand:#eee4d7;--paper:#fffdfa;--line:#e6dacf;--mint:#e4e9db}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}fieldset{min-width:0}a{color:inherit}.visually-hidden{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.app-shell{width:min(100%,480px);height:100svh;height:100dvh;padding:env(safe-area-inset-top) max(15px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(15px,env(safe-area-inset-left));margin:0 auto;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.topbar{min-height:58px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);flex-shrink:0}.brandmark{color:var(--red);font-size:31px;line-height:1;margin-top:-4px}.brand{min-width:0;flex:1}.brand h1{margin:0;font:400 24px/1.05 Georgia,'Times New Roman',serif;letter-spacing:-.03em;white-space:nowrap}.brand em{color:var(--red);font-weight:400}.brand p{margin:5px 0 0;font-size:10px;color:var(--muted);letter-spacing:.025em}.phone{height:34px;width:34px;display:grid;place-items:center;text-decoration:none;border-radius:50%;background:var(--mint);color:var(--ink);font-size:16px}
.summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:7px;min-height:24px;flex-shrink:0}.summary-head>span{font-weight:750;font-size:10px;letter-spacing:.13em;color:var(--red)}.summary-head strong{font:700 19px Georgia,serif;white-space:nowrap}.summary-head small{font:400 12px system-ui;color:var(--muted)}
.mode-tabs{border:0;margin:0;padding:4px;border-radius:11px;background:var(--sand);display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:46px;flex-shrink:0}.mode-tabs label{position:relative;min-width:0}.mode-tabs input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.mode-tabs span{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 4px;border-radius:8px;min-height:38px;font-weight:700;color:#7c7569;font-size:12px;white-space:nowrap;transition:background .15s}.mode-tabs input:checked+span{background:var(--paper);color:var(--red);box-shadow:0 1px 5px #6f513719}.mode-tabs input:focus-visible+span{outline:3px solid #b59770;outline-offset:-2px}
.amount{min-height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.amount-caption{display:flex;flex-direction:column;gap:3px}.amount-caption span{font:400 17px Georgia,serif}.amount-caption small{font-size:10px;color:var(--muted)}.amount-control{display:flex;gap:2px;align-items:center;border:1px solid var(--line);padding:3px;border-radius:10px;background:var(--paper)}.amount-control button{border:0;border-radius:7px;width:34px;height:30px;background:var(--mint);color:var(--ink);font-size:21px;line-height:1}.amount-control button:disabled{opacity:.3}.amount-control output{min-width:65px;text-align:center;font-weight:800;font-size:14px;white-space:nowrap}
.picker{display:flex;flex:1;min-height:0;flex-direction:column;gap:7px}.picker[hidden]{display:none}.section-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-shrink:0}.section-line h2{font:400 17px/1.15 Georgia,serif;margin:0}.section-line span{font-size:11px;color:var(--red);font-weight:750;white-space:nowrap}.progress-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:18px;flex-shrink:0}.progress-line>div:first-child{font-size:11px;color:#796b5d;white-space:nowrap}.progress-line b{color:var(--red)}.progress-line.is-ready>div:first-child{color:#477451}.progress-line.is-over>div:first-child{color:var(--red)}.track{height:5px;border-radius:5px;background:var(--sand);min-width:68px;max-width:145px;flex:1;overflow:hidden}.track progress{display:block;width:100%;height:100%;appearance:none;-webkit-appearance:none;border:0;background:var(--sand);border-radius:5px}.track progress::-webkit-progress-bar{background:var(--sand)}.track progress::-webkit-progress-value{background:#5c8163;border-radius:5px}.track progress::-moz-progress-bar{background:#5c8163;border-radius:5px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:7px;flex:1;min-height:0}.tile{background:var(--paper);border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;justify-content:space-between;padding:7px 9px 6px;min-height:0;gap:4px;overflow:hidden}.tile.chosen{background:#f2e9de;border-color:#cbac90}.tile-name{font-size:11.5px;line-height:1.14;font-weight:700;white-space:nowrap;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis}.tile-qty{display:flex;justify-content:space-between;align-items:center;gap:3px}.tile-qty output{font-size:11px;font-weight:800;white-space:nowrap;flex:1;text-align:center}.tile-qty button{width:25px;height:23px;flex-shrink:0;border:0;border-radius:7px;background:var(--mint);font-size:18px;line-height:1;color:var(--ink);display:grid;place-items:center}.tile-qty button.minus{background:#f1ebe2;color:var(--red)}.tile-qty button:disabled{opacity:.24}
.checkout{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line);padding:8px 0 4px;flex-shrink:0}.checkout label{font-size:11px;font-weight:750;line-height:1.1}.checkout label span{color:var(--muted);font-weight:450}.checkout input{height:34px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:13px;width:100%;padding:7px 10px;outline-offset:1px}.checkout input::placeholder{color:#a59b91}.checkout-bottom{display:grid;grid-template-columns:1fr 1.43fr;align-items:center;gap:8px;min-height:45px}.total{display:flex;flex-direction:column;gap:2px}.total small{font-size:10px;color:var(--muted);white-space:nowrap}.total strong{font:700 25px/1 Georgia,serif;color:var(--red);white-space:nowrap}.order-btn{border:0;border-radius:9px;background:var(--ink);color:#fffefa;display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:7px 8px;font-weight:740;font-size:12px;white-space:nowrap}.order-btn span{font-size:17px}.order-btn:disabled{opacity:.37}.footnote{font-size:10px;line-height:1.2;margin:1px 0 0;color:var(--muted);text-align:center;min-height:12px}
.mix-panel{align-items:center;justify-content:center;text-align:center;background:#fffaf3;border:1px solid var(--line);border-radius:15px;padding:20px 23px}.mix-art{display:flex;gap:2px;align-items:center;justify-content:center;height:85px;color:var(--red)}.mix-art span{width:45px;height:45px;display:grid;place-items:center;background:#f5e8d8;border:1px solid #e7d3ba;border-radius:50%;font-size:29px}.mix-art span:nth-child(even){transform:translateY(17px) rotate(14deg);color:#806047}.mix-panel h2{font:400 27px/1.2 Georgia,serif;letter-spacing:-.03em;margin:17px 0 5px}.mix-panel p{font-size:12px;line-height:1.55;max-width:250px;color:var(--muted);margin:0 0 19px}.mix-stamp{color:var(--red);font-size:11px;font-weight:750}
#sms-dialog{border:0;border-radius:16px;width:min(calc(100% - 30px),430px);max-height:85dvh;padding:0;box-shadow:0 25px 60px #252b2640;color:var(--ink);background:var(--bg)}#sms-dialog::backdrop{background:#1f2d26a0}.dialog-inner{padding:24px;position:relative}.dialog-inner h2{font:400 26px Georgia,serif;margin:8px 20px 10px 0}.dialog-inner p{font-size:12px;line-height:1.5;color:var(--muted)}.dialog-inner a{font-weight:750;color:var(--red)}.dialog-close{position:absolute;right:12px;top:10px;font-size:28px;background:transparent;border:0;color:var(--ink)}#sms-copy{width:100%;resize:vertical;height:175px;background:white;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:12px}.copy-btn{width:100%;min-height:43px;border:0;border-radius:9px;background:var(--ink);color:white;font-weight:700;margin-top:10px}#copy-status{min-height:12px}
button:focus-visible,input:focus-visible{outline:3px solid #ba9468;outline-offset:2px}
@media (max-height:750px){.app-shell{gap:6px}.topbar{min-height:49px}.brand h1{font-size:21px}.brandmark{font-size:27px}.mode-tabs{min-height:41px}.mode-tabs span{min-height:33px}.amount{min-height:42px}.picker{gap:5px}.tiles{gap:5px}.tile{padding:5px 7px 4px;gap:2px}.checkout{padding:6px 0 1px;gap:4px}.checkout input{height:31px}.order-btn{min-height:39px}.checkout-bottom{min-height:40px}.footnote{font-size:9px}}
@media(max-height:615px){.brand p{display:none}.topbar{min-height:41px}.summary-head{min-height:21px}.mode-tabs{min-height:37px}.mode-tabs span{min-height:29px}.amount{min-height:39px}.amount-caption span{font-size:15px}.section-line h2{font-size:15px}.tile-name{font-size:10.5px}.tile-qty button{height:19px;width:23px}.tile{border-radius:8px}.checkout label{display:none}.checkout{gap:3px}.checkout input{height:29px}.footnote{display:none}}
@media(max-width:355px){.brand h1{font-size:20px}.mode-tabs span{font-size:11px}.tile-name{font-size:10.5px}.tile{padding-left:6px;padding-right:6px}.total strong{font-size:22px}.order-btn{font-size:11px}}
@media(min-width:700px){body{background:linear-gradient(120deg,#e6dbce,#f9f4ec 65%)}.app-shell{border-left:1px solid #e0d2c2;border-right:1px solid #e0d2c2;box-shadow:0 0 70px #67513e19;background:var(--bg)}}
@media(prefers-reduced-motion:reduce){*,*::after,*::before{transition:none!important}}

/* Mobile v3: compact layout, illustrated mix and customer note */
:root{--bg:#fbf5ec}
.amount[hidden]{display:none}
.summary-head i{font-style:normal;color:#d9a05b}
.progress-line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;padding:1px 0}
.progress-line>strong{font:700 19px/1 Georgia,serif;color:var(--red);white-space:nowrap}
.progress-line>div:nth-child(2){font-size:10px;color:#796b5d;white-space:nowrap;flex:1;text-align:right}
.progress-line.is-ready>strong{color:#477451}
.tile-name{display:flex;align-items:center;gap:5px;min-width:0}
.tile-glyph{font-size:15px;line-height:1;color:#ad7666;flex:0 0 auto}
.checkout input{height:32px}
.checkout .note-label{margin-top:2px}
.mix-panel{background:radial-gradient(ellipse at 50% 25%,#fffdf7 5%,#f9ebda 70%,#faefe4 100%);padding:20px 23px}
.mix-art{width:min(100%,320px);height:auto;max-height:48%;display:flex;align-items:center;justify-content:center}
.mix-art img{width:100%;height:100%;max-height:245px;display:block;object-fit:contain;filter:drop-shadow(0 5px 8px #87704c19)}
.mix-panel h2{font-size:26px;margin:3px 0 5px}
.mix-panel p{line-height:1.5;max-width:275px;margin:0 0 12px}
#validation-dialog{border:0;border-radius:16px;width:min(calc(100% - 30px),430px);max-height:85dvh;padding:0;box-shadow:0 25px 60px #252b2640;color:var(--ink);background:var(--bg)}
#validation-dialog::backdrop{background:#1f2d26a0}
.validation-inner{text-align:center}
.validation-inner .copy-btn{margin-top:15px}
@media(max-height:740px){
 .app-shell{gap:5px}.topbar{min-height:44px}.amount{min-height:39px}
 .checkout{gap:3px;padding:5px 0 1px}.checkout input{height:28px;padding:4px 9px}.checkout label{font-size:10px}
 .progress-line>strong{font-size:17px}.tile-name{font-size:11px}.tile-glyph{font-size:12px}
 .mix-panel{padding:9px}.mix-art{max-height:43%}.mix-panel h2{font-size:23px}
 .mix-panel p{font-size:11px}.mix-stamp{font-size:10px}
}
@media(max-height:610px){
 .checkout label{display:block}.checkout{padding-top:3px}.checkout input{height:25px}
 .topbar{min-height:39px}.section-line h2{font-size:15px}.progress-line{min-height:20px}
 .summary-head{min-height:20px}.mix-panel h2{font-size:20px}.mix-panel p{line-height:1.3;margin-bottom:5px}
 .mix-art{max-height:36%}.tile-name{font-size:10px}.tile-glyph{font-size:11px}
 .tile{padding:4px 6px 3px}.tile-qty button{width:22px;height:18px}.tiles{gap:4px}
}

/* Mobilní ovládání: zamezí dvojitému přiblížení při rychlém přidávání porcí. */
button, select, .mode-tabs label, .tile, .kg-entry { touch-action: manipulation; }
button, select { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* Psaní přímo do hmotnosti a rychlý výběr běžných počtů kg. */
.amount-control { gap: 3px; }
.amount-control .kg-entry {
  display:flex; align-items:center; gap:2px; flex-shrink:0;
  min-width:48px; padding:0 1px;
}
.amount-control .kg-entry input {
  width:29px; min-width:0; background:transparent; border:0; border-radius:0;
  color:var(--ink); font-size:16px; font-weight:800; text-align:right;
  padding:0; height:30px; line-height:30px; outline-offset:1px;
  appearance:textfield; -moz-appearance:textfield;
}
.amount-control .kg-entry input::-webkit-outer-spin-button,
.amount-control .kg-entry input::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
.amount-control .kg-entry span { font-size:12px; font-weight:800; white-space:nowrap }
.amount-control #kg-presets {
  width:28px; height:30px; font-size:13px; border:0; border-radius:7px;
  background:var(--sand); color:var(--ink); cursor:pointer; text-align:center;
  appearance:none; -webkit-appearance:none; padding:0 2px;
}
.amount-control #kg-presets:focus-visible {outline:3px solid #ba9468;outline-offset:2px}
/* iOS zvětšuje formulář při zaměření textového pole s písmem pod 16 px. */
.checkout input { font-size:16px; }
@media (max-height:750px){.amount-control .kg-entry input,.amount-control #kg-presets{height:29px}}

/* Výrazně označit neplatné zadání (např. 99999 kg) a zabránit náhodnému odeslání. */
.amount-control .kg-entry input[aria-invalid="true"] {
 color:var(--red); background:#fff0ec; border-radius:5px;
 outline:2px solid #b5544e; outline-offset:1px;
}
@media(max-height:615px){
 .footnote {display:block;font-size:9px;line-height:1.1}
}


/* Nenápadná akce pro vlastní výběr. Namísto nápovědy „Po 250 g“
   se ukáže až po přidání prvního druhu, bez nové řádky a bez scrollování. */
.clear-selection{
  background:transparent;
  border:0;
  border-radius:6px;
  padding:4px 1px 4px 6px;
  color:var(--red);
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
  touch-action:manipulation;
  flex-shrink:0;
}
.clear-selection:hover{background:#f3e7dc}
.clear-selection[hidden],#selection-hint[hidden]{display:none}
@media(max-width:355px){.clear-selection{font-size:10px;padding:3px 0 3px 3px}}