/*
  Παραγγελίες — κοινή εμφάνιση μενού (πωλητής και πελάτης)
  © 2026 Ανδρέας Μ. Γλεντζάκης (Andreas M. Glentzakis). Με την επιφύλαξη παντός δικαιώματος.
*/
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:2px 0 8px;touch-action:pan-y}
.tile{--tc:var(--card,#fff);position:relative;grid-column:span 3;min-height:96px;border-radius:16px;border:1px solid rgba(0,0,0,.08);background:var(--tc);color:var(--ink,#1b2733);box-shadow:0 1px 2px rgba(0,0,0,.06),0 2px 10px rgba(0,0,0,.04);font:inherit;text-align:left;padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.tile.sz-s{grid-column:span 2;min-height:84px;padding:8px}
.tile.sz-l{grid-column:span 6;min-height:150px}
.tile.sz-w{grid-column:span 6;min-height:64px;flex-direction:row;align-items:center}
.tile.cat{cursor:pointer;justify-content:flex-end;background:var(--tc,var(--c1));}
.tile.cat:not([style]){background:linear-gradient(160deg,var(--c1,#17324D),color-mix(in srgb,var(--c1,#17324D) 70%,#000))}
.tile.cat:not([style]) .nm,.tile.cat:not([style]) .sub{color:var(--on1,#fff)}
.tile.cat .nm{font-weight:800;font-size:17px;line-height:1.15;z-index:1}
.tile.cat.sz-s .nm{font-size:14px}
.tile.cat.sz-l .nm{font-size:22px}
.tile.cat .em{font-size:34px;line-height:1}
.tile.cat.sz-l .em{font-size:48px}
.tile.cat .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.tile.cat .sub{font-size:12px;opacity:.75;z-index:1}
.tile .badge{position:absolute;top:8px;right:8px;min-width:24px;height:24px;border-radius:12px;background:var(--c2,#F2B632);color:var(--on2,#17324D);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.tile.prod .ph{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:10px;background:#eee}
.tile.prod.sz-s .ph{aspect-ratio:1.3}
.tile.prod.sz-l .ph{aspect-ratio:2.2}
.tile.prod.sz-w .ph{width:52px;height:52px;aspect-ratio:auto;flex:0 0 52px}
.tile.prod .em{font-size:30px;line-height:1}
.tile.prod.sz-w .em{flex:0 0 40px;text-align:center}
.tile .tx{flex:1;min-width:0}
.tile.prod .nm{font-weight:700;font-size:15px;line-height:1.2}
.tile.prod.sz-s .nm{font-size:13px}
.tile.prod.sz-l .nm{font-size:18px}
.tile.prod .pr{font-weight:800;color:var(--c1,#17324D);font-size:15px;margin-top:2px}
.tile.prod .pr small{font-weight:600;opacity:.7;font-size:12px}
.tile.prod .stp{font-size:12px;opacity:.85;margin-top:1px}
.tile.prod .ds{font-size:12.5px;opacity:.75;margin-top:2px}
.tile.prod.has{outline:3px solid var(--c2,#F2B632);outline-offset:-3px}
.tile.soldout{opacity:.6;filter:grayscale(.9);cursor:not-allowed}
.tile.soldout .so{background:#fde8e6;border-radius:10px}
.tile.hid{opacity:.5;border-style:dashed}
.tile .so{font-size:13px;font-weight:800;color:#b3261e;text-align:center;padding:6px 0}
.tile .flag{position:absolute;top:6px;left:6px;background:#b3261e;color:#fff;font-size:11px;font-weight:700;border-radius:8px;padding:2px 6px}
.qty{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tile.sz-w .qty{flex:0 0 auto}
.qb{width:42px;height:42px;border-radius:21px;border:0;background:rgba(0,0,0,.07);color:var(--ink,#1b2733);font-size:24px;font-weight:700;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tile.sz-s .qb{width:36px;height:36px;font-size:21px}
.qb.plus{background:var(--c1,#17324D);color:var(--on1,#fff)}
.qb:disabled{opacity:.35}
.qv{min-width:30px;text-align:center;font-weight:800;font-size:17px}
.empty{grid-column:span 6;text-align:center;opacity:.6;padding:30px 0}
/* επεξεργασία */
.tile .mk{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:15px;border:2px solid rgba(255,255,255,.95);background:rgba(0,0,0,.25);color:transparent;font-weight:900;z-index:3;cursor:pointer;font-size:15px}
.tile .mk.on{background:#1f7a3d;color:#fff}
.tile.marked{box-shadow:0 0 0 3px #1f7a3d}
.tile.dragging{opacity:1;background:transparent!important;border:2px dashed var(--c2,#F2B632);box-shadow:none}
.tile.dragging>*{visibility:hidden}
.tile.drop-into{outline:4px solid #16a34a;outline-offset:2px;transform:scale(1.06);transition:transform .12s}
.tile.drop-into::after{content:"⬇ Μέσα";position:absolute;top:6px;left:50%;transform:translateX(-50%);background:#16a34a;color:#fff;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;z-index:3;white-space:nowrap}
.crumbs button.drop-into{outline:3px solid #16a34a;background:#dcfce7;border-radius:8px}
.ghost-tile.going-in{transform:scale(.8) rotate(0deg);opacity:.75}
.ghost-tile{position:fixed;z-index:999;pointer-events:none;opacity:.95;transform:scale(1.06) rotate(-1.5deg);box-shadow:0 14px 34px rgba(0,0,0,.32);margin:0}
.tile.drop-before{box-shadow:-5px 0 0 0 #1f7a3d}
.tile.drop-after{box-shadow:5px 0 0 0 #1f7a3d}
.tile[style] .pr{color:inherit}
.tile.cat[style] .nm,.tile.cat[style] .sub{color:inherit}
/* 1.60 · πλακίδια με βάθος */
.tile{border-radius:18px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 22px -14px rgba(16,24,40,.35);transition:transform .1s,box-shadow .15s}
.tile:active{transform:scale(.97)}
.tile.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.tile.prod.has{box-shadow:0 0 0 1px var(--c2,#F2B632),0 12px 24px -14px var(--c2,#F2B632)}
.qb.plus{background:linear-gradient(180deg,color-mix(in srgb,var(--c1,#17324D) 82%,#fff),var(--c1,#17324D));box-shadow:0 6px 12px -6px var(--c1,#17324D)}
.qb{transition:transform .08s}.qb:active{transform:scale(.9)}
/* 1.63 · βασικές κατηγορίες: άλλο χρώμα, από κάτω οι υποκατηγορίες τους */
.tile.cat.top:not([style]){background:linear-gradient(155deg,var(--c2,#F2B632),color-mix(in srgb,var(--c2,#F2B632) 62%,var(--c1,#17324D)))}
.tile.cat.top:not([style]) .nm,.tile.cat.top:not([style]) .subs,.tile.cat.top:not([style]) .sub{color:var(--on2,#17324D)}
.tile.cat.top .nm{font-size:1.12em;letter-spacing:.2px}
.tile.cat .subs{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:700;line-height:1.25;opacity:.88;margin-top:-2px}
.tile.cat.top::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c1,#17324D);opacity:.75}
/* εικονίδια από τεχνητή νοημοσύνη: ίδιο μέγεθος με τα σύμβολα */
img.emi{display:block;object-fit:contain;width:1em;height:1em;flex:none}
.tile.cat img.emi{width:40px;height:40px}.tile.cat.sz-l img.emi{width:56px;height:56px}.tile.prod img.emi{width:36px;height:36px}
.tile.cat.top img.emi{margin:0 auto}