:root{
  /* Кофе шопын дулаан загвар — цөцгий суурь, эспрессо бичиг, шаргал бор өнгө */
  --bg:#fffcf1;--bg-soft:#f7f3e8;--panel:#ffffff;--panel2:#fffdf7;
  --line:#ece2d2;--text:#231f20;--muted:#7a6a5c;
  --brand:#8b5e34;--brand2:#6f4a28;     /* кофены бор — үндсэн үйлдэл */
  --green:#019147;--green2:#017a3c;     /* бэлэн боллоо, төлөгдсөн */
  --orange:#e0902a;--yellow:#d9a441;--red:#c0503f;--blue:#7a5c42;
  --shadow:0 12px 32px rgba(90,62,42,.10);
  --xl:26px;--lg:18px;--md:14px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}
body{background:radial-gradient(circle at top left,rgba(217,164,65,.20),transparent 34%),radial-gradient(circle at top right,rgba(139,94,52,.12),transparent 30%),linear-gradient(160deg,#fffcf1 0%,#fdf7ea 55%,#f6efdf 100%);background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(139,94,52,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,94,52,.05) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:-1}
button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.muted{color:var(--muted)}
.glass,.panel,.card{background:linear-gradient(180deg,#ffffff,#fffdf7);border:1px solid var(--line);box-shadow:var(--shadow)}

/* login */
.login-screen{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding:40px;align-items:center;max-width:1500px;margin:auto}
.login-side{padding:24px}.brand-block{display:flex;align-items:center;gap:18px;margin-bottom:32px}.brand-logo,.sidebar-logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--orange));color:#fffcf1;box-shadow:0 14px 30px rgba(139,94,52,.22)}
.brand-logo{width:82px;height:82px;border-radius:24px;font-size:42px}.brand-block h1{margin:0 0 8px;font-size:46px}.brand-block p{margin:0;color:var(--muted);font-size:18px}
.feature-list{display:grid;gap:14px;max-width:700px}.feature-item{padding:18px 20px;border-radius:var(--lg);background:#fffdf7;border:1px solid var(--line);font-size:17px}.feature-item span{color:var(--brand);font-weight:900;margin-right:10px}
.login-panel{max-width:470px;justify-self:center;width:100%;padding:30px;border-radius:30px}.login-panel h2{font-size:32px;margin:0 0 7px}.demo-accounts{margin-top:16px;padding:14px;border-radius:14px;background:#f7f3e8;border:1px solid var(--line);line-height:1.65}

/* app shell */
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);background:rgba(255,252,241,.94);backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:20px}
.sidebar-brand{display:flex;align-items:center;gap:13px;padding:4px 8px}.sidebar-logo{width:62px;height:62px;border-radius:18px;font-size:30px}.sidebar-brand h2{margin:0;font-size:23px}.sidebar-brand p{margin:3px 0 0;color:var(--muted);font-size:12px}.side-nav{display:grid;gap:8px}.nav-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;border:1px solid transparent;color:#6b5b4d}.nav-item:hover{background:rgba(139,94,52,.07);border-color:var(--line)}.nav-item.active{background:linear-gradient(135deg,rgba(139,94,52,.16),rgba(217,164,65,.14));border-color:rgba(139,94,52,.30);color:var(--brand2);font-weight:800}.nav-item .ico{width:25px;text-align:center;display:grid;place-items:center;flex:none}
/* Хажуугийн цэсний дүрсийг эможиос SVG болгов. Эможи хэрэглэхгүй гэсний
   дараа тэдгээрийг зүгээр устгавал таблет, утсан дээрх нарийн мөр дахин
   хоосон дөрвөлжин болно — дүрс нь тэнд цорын ганц тэмдэг. */
.nav-item .ico svg{display:block;width:21px;height:21px}
.sidebar-logo svg{display:block}
@media(max-width:1050px){.nav-item .ico svg{width:23px;height:23px}}
.sidebar-footer{margin-top:auto;padding:14px;border-radius:16px}.sidebar-footer strong{display:block}.sidebar-footer small{color:var(--muted)}
.main{min-width:0}.app-topbar{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,252,241,.90);backdrop-filter:blur(15px);position:sticky;top:0;z-index:30}.page-title h1{font-size:22px;margin:0}.page-title p{font-size:13px;margin:4px 0 0;color:var(--muted)}.top-actions{display:flex;gap:9px;align-items:center}.content{padding:26px 28px 40px;max-width:1600px;margin:auto}

/* core */
.panel,.card{border-radius:var(--xl);padding:20px}.card{border-radius:var(--lg)}h1,h2,h3{margin-top:0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-title h2{font-size:20px;margin:0}.section-title p{margin:4px 0 0;color:var(--muted);font-size:13px}
.btn{border:0;border-radius:13px;padding:12px 16px;font-weight:800;cursor:pointer;transition:.18s transform,.18s filter}.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--brand),#a2703f);color:#fffcf1;box-shadow:0 10px 24px rgba(139,94,52,.22)}.btn-secondary{background:#fffdf7;color:var(--text);border:1px solid var(--line)}.btn-danger{background:var(--red);color:#fff}.btn-block{width:100%}
/* <a> нь анхдагчаар inline тул width:100% үйлчлэхгүй байв — товч
   мэт харагддаг холбоос хагас өргөнөөр гарч ирдэг байсны шалтгаан. */
a.btn-block{display:block;text-align:center}.btn-sm{padding:8px 11px;border-radius:10px;font-size:13px}
.field{display:grid;gap:7px;margin:12px 0}.field span,.field-label{font-size:13px;color:var(--muted)}input,select,textarea{width:100%;border:1px solid rgba(90,62,42,.20);background:#fff;color:var(--text);border-radius:14px;padding:13px 15px;outline:none}input:focus,select:focus,textarea:focus{border-color:rgba(139,94,52,.75);box-shadow:0 0 0 4px rgba(139,94,52,.12)}select option{background:#fff;color:#231f20}.notice{padding:13px 14px;border-radius:14px;background:#f7f3e8;border:1px solid var(--line);margin:12px 0}.notice.ok{border-color:rgba(1,145,71,.35);background:rgba(1,145,71,.07)}.notice.err{border-color:rgba(192,80,63,.38);background:rgba(192,80,63,.07)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.02em;border:1px solid var(--line)}.badge.online{background:rgba(217,164,65,.18);color:#8a6412}.badge.store{background:rgba(139,94,52,.13);color:var(--brand2)}.badge.ready{background:rgba(1,145,71,.13);color:var(--green2)}

/* POS */
.pos-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.6fr);gap:20px;align-items:start}.product-toolbar{display:flex;gap:10px;margin-bottom:16px}.search{position:relative;flex:1}.search input{padding-left:42px}.search:before{content:'⌕';position:absolute;left:15px;top:9px;font-size:22px;color:var(--muted)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}.product{position:relative;text-align:left;border:1px solid var(--line);background:linear-gradient(155deg,#ffffff,#fffdf6);border-radius:18px;padding:16px;cursor:pointer;min-height:168px;color:var(--text);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:.18s}.product:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-45px;top:-45px;background:rgba(217,164,65,.14)}.product:hover{border-color:rgba(139,94,52,.40);transform:translateY(-2px);box-shadow:0 14px 26px rgba(90,62,42,.13)}.product.sold{opacity:.42;cursor:not-allowed}.product-icon{font-size:32px;margin-bottom:14px}.product-name{font-size:16px;font-weight:850}.product-cat{font-size:12px;color:var(--muted);margin-top:4px}.price{font-size:20px;font-weight:900;color:var(--brand2);margin-top:12px}.stock{font-size:11px;color:var(--muted);margin-top:4px}.cart-panel{position:sticky;top:98px}.cart{display:grid;gap:9px;max-height:340px;overflow:auto;padding-right:2px}.cart-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fffdf7}.cart-row b{font-size:14px}.qty{display:flex;align-items:center;gap:8px}.qty button{width:30px;height:30px;border-radius:9px;border:1px solid rgba(90,62,42,.18);background:#fff;color:var(--text);cursor:pointer}.summary{display:grid;gap:8px;margin:15px 0}.summary>div{display:flex;justify-content:space-between;gap:20px}.summary .total{font-size:22px;font-weight:900;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}.empty{padding:24px 12px;text-align:center;color:var(--muted);border:1px dashed rgba(90,62,42,.22);border-radius:15px}

/* barista */
.queue-head{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.metric{padding:17px;border-radius:18px;background:#fffdf7;border:1px solid var(--line)}.metric small{color:var(--muted)}.metric strong{display:block;font-size:29px;margin-top:5px}.orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}.order{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#fffdf6);border-radius:20px;padding:17px;box-shadow:0 12px 28px rgba(90,62,42,.10)}.order.ready{border-color:rgba(1,145,71,.55);box-shadow:0 0 0 1px rgba(1,145,71,.10) inset,0 12px 28px rgba(90,62,42,.10)}.order-head{display:flex;justify-content:space-between;gap:10px}.order-no{font-size:18px;font-weight:900}/* Бариста дугаараар нь дууддаг — захиалагчийн дэлгэцтэй ижил байх ёстой.
   Бүтэн код нь баримт, хайлтад хэрэгтэй тул хажууд нь жижгээр үлдэнэ. */
.order-no .on-call{font-size:32px;font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--brand2)}
.order-no .on-full{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--muted);opacity:.75;margin-top:2px;font-variant-numeric:tabular-nums}.status{font-size:15px;font-weight:900;margin:14px 0 8px}.order-items{display:grid;gap:8px;margin:11px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:16px}.order-items>div{display:flex;gap:8px}.delivery{padding:11px;border-radius:12px;background:rgba(217,164,65,.12);border:1px solid rgba(217,164,65,.32);line-height:1.55;margin:10px 0}.age{font-size:12px;color:var(--muted)}

/* Онлайн ба дэлгүүрийн захиалгыг хоёр баганад салгана. Хольж байрлуулахад
   бариста аль нь хаанаас ирснийг эндүүрч, онлайн захиалгыг мартах эрсдэлтэй.
   Багана тус бүр өөрийн өнгөтэй — тэмдэг хэрэггүй болж, карт богиносно. */
.queue-split{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
/* Өргөн дэлгэцэд хоёр багана, хооронд нь босоо зураас. Зураасгүй бол
   картууд нэг эгнээ мэт нийлж харагдаад багана салсан нь мэдэгдэхгүй. */
@media(min-width:860px){
  .queue-split{grid-template-columns:1fr 1fr;gap:0}
  .queue-col:first-child{padding-right:24px}
  .queue-col+.queue-col{padding-left:24px;border-left:1px solid var(--line)}
}
.queue-col-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;
  padding-bottom:7px;border-bottom:2px solid var(--line)}
.queue-col-head h3{margin:0;font-size:13.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.qc-count{min-width:25px;padding:2px 8px;border-radius:999px;text-align:center;
  font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums}
.queue-col.online .queue-col-head{border-bottom-color:rgba(217,164,65,.55)}
.queue-col.online .queue-col-head h3{color:#8a6412}
.queue-col.online .qc-count{background:rgba(217,164,65,.20);color:#8a6412}
.queue-col.store .queue-col-head{border-bottom-color:rgba(139,94,52,.45)}
.queue-col.store .queue-col-head h3{color:var(--brand2)}
.queue-col.store .qc-count{background:rgba(139,94,52,.14);color:var(--brand2)}
.queue-empty{padding:16px;border-radius:14px;border:1px dashed var(--line);
  color:var(--muted);font-size:13.5px;text-align:center}
/* Багананд багтахаар карт нарийсч, бага зэрэг жижгэрнэ. */
.queue-split .orders{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.queue-split .order{padding:13px;border-radius:16px}
.queue-split .order-no .on-call{font-size:26px}
.queue-split .status{font-size:13.5px;margin:9px 0 6px}
.queue-split .order-items{font-size:14.5px;gap:6px;margin:9px 0;padding:9px 0}
.queue-split .delivery{padding:9px;margin:8px 0;font-size:13.5px}
.queue-split .order .btn{padding:11px;font-size:14.5px}

/* manager */
.manager-grid{display:grid;grid-template-columns:minmax(300px,.55fr) minmax(0,1.45fr);gap:20px;align-items:start}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}.table{width:100%;border-collapse:collapse;min-width:650px}.table th,.table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}.table th{color:var(--muted);font-size:12px;font-weight:700;background:#f7f3e8;position:sticky;top:0}.table tr:last-child td{border-bottom:0}.table input[type=number]{max-width:120px;padding:9px 10px}.switch{accent-color:var(--brand);width:18px;height:18px}.settings-hero{padding:18px;border-radius:18px;background:linear-gradient(135deg,rgba(139,94,52,.13),rgba(217,164,65,.12));border:1px solid rgba(139,94,52,.22);margin-bottom:16px}.settings-hero strong{font-size:24px;display:block;margin-top:5px}

/* public order */
.public-body{min-height:100vh}.public-topbar{padding:16px max(18px,calc((100vw - 1260px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,252,241,.92);backdrop-filter:blur(15px);position:sticky;top:0;z-index:40}.public-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900}.public-brand .mini-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--orange))}.public-wrap{max-width:1260px;margin:auto;padding:28px 18px 50px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;margin-bottom:22px}.hero-copy{padding:22px 4px}.hero h1{font-size:44px;line-height:1.08;margin:0 0 12px}.hero p{color:var(--muted);font-size:17px;max-width:650px;line-height:1.6}.public-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:20px;align-items:start}.order-cart{position:sticky;top:92px}.public-products{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.pay-card{max-width:620px;margin:40px auto}.step-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(139,94,52,.10);border:1px solid rgba(139,94,52,.24);color:var(--brand2);font-size:12px;font-weight:800}.spinner{display:inline-block;width:17px;height:17px;border:2px solid rgba(255,252,241,.35);border-top-color:#fffcf1;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* v7: tabs, dashboard, bank box */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.range-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Огноо, сарын талбар мөрөндөө багтана — өргөн задарч мөр эвддэг байв. */
.range-bar input[type=date],.range-bar input[type=month]{width:auto;min-width:150px;max-width:190px;flex:0 0 auto}
@media(max-width:560px){.range-bar input[type=date],.range-bar input[type=month]{min-width:130px}}
.range-bar input[type=date]{width:auto;padding:9px 11px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat-card{padding:17px;border-radius:18px;background:linear-gradient(135deg,rgba(139,94,52,.10),rgba(217,164,65,.09));border:1px solid var(--line)}
.stat-card small{color:var(--muted)}.stat-card strong{display:block;font-size:24px;margin-top:6px}
.stat-card.warn{border-color:rgba(224,144,42,.50);background:rgba(224,144,42,.12)}
.bar-chart{display:grid;gap:5px;max-height:420px;overflow:auto}
.bar-row{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;font-size:12px}
.bar-label{color:var(--muted);text-align:right}
.bar-track{height:16px;border-radius:8px;background:#f1e8d8;overflow:hidden}
.bar-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--brand),#c08a4e);min-width:2px}
.bar-val{color:var(--muted);min-width:70px;text-align:right}
.mini-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:7px;background:#fffdf7;font-size:14px;align-items:center}
.audit-list{max-height:300px;overflow:auto;display:grid;gap:5px}
.audit-row{display:grid;grid-template-columns:auto auto auto 1fr;gap:10px;font-size:12px;padding:7px 10px;border-radius:9px;background:#fffdf7;align-items:center}
.bank-box{border:1px solid rgba(1,145,71,.30);border-radius:16px;padding:6px 16px;margin:14px 0;background:rgba(1,145,71,.06)}
.bank-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
.bank-row:last-child{border-bottom:0}.bank-row span{color:var(--muted)}
.copyable{cursor:pointer;user-select:all}.copyable:hover{color:var(--brand)}
.link-panel{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border-color:rgba(139,94,52,.30)}
.link-url{font-family:Consolas,monospace;font-size:14px;word-break:break-all;padding:11px 13px;border-radius:12px;background:#f7f3e8;border:1px solid var(--line);color:var(--brand2)}
.link-qr img{background:#fff;padding:8px;border-radius:14px;display:block}
@media(max-width:760px){.link-panel{grid-template-columns:1fr}.link-qr{display:grid;place-items:center}}
/* logo */
.sidebar-logo img,.brand-logo img,.mini-logo img,.logo-preview img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.logo-row{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.logo-preview{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg,var(--brand),var(--orange));overflow:hidden;flex-shrink:0}

/* open/closed + ads + news */
.closed-banner{padding:15px 18px;border-radius:16px;background:rgba(192,80,63,.09);border:1px solid rgba(192,80,63,.32);margin-bottom:18px;font-size:15px}
.ads-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:16px;scroll-snap-type:x mandatory}
.ad-card{scroll-snap-align:start;min-width:260px;max-width:340px;padding:14px 16px;border-radius:16px;border:1px solid rgba(224,144,42,.40);background:linear-gradient(135deg,rgba(224,144,42,.14),rgba(217,164,65,.10));display:grid;gap:6px;font-size:14px}
.ad-card b{font-size:15px}.ad-card span:not(.badge){color:var(--muted);font-size:13px}
.ad-badge{background:rgba(224,144,42,.18);color:#8a5a12;border-color:rgba(224,144,42,.38)}
.news-hero{text-align:center;padding:30px 0 24px}.news-hero h1{font-size:38px;margin:14px 0 8px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.news-card{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#fffdf7);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.news-card.ad{border-color:rgba(224,144,42,.42)}
.news-card.pinned{border-color:rgba(139,94,52,.45)}
.news-card h2{font-size:19px;margin:10px 0 8px}.news-card p{color:#5a4d42;font-size:14px;line-height:1.65;margin:0}
.news-head{display:flex;gap:8px;align-items:center}.news-date{margin-left:auto;color:var(--muted);font-size:12px}
.post-row{border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px;background:#fffdf7}
.post-row.inactive{opacity:.5}
.post-row-head{display:flex;gap:8px;align-items:center;margin-bottom:6px}

/* Багана нь агуулгынхаа хамгийн бага өргөнөөс доош шахагдаж чаддаг байх.
   Үүнгүйгээр барааны зураг, ангиллын мөр нь баганыг тэлж, утсан дээр хуудас
   дэлгэцээсээ өргөн болж, Safari бүхэлд нь жижигрүүлж харуулдаг. */
.public-grid>*,.pos-layout>*,.manager-grid>*,.hero>*{min-width:0}
.cat-bar,.ads-strip{min-width:0}
.product,.product-photo,.product-body{min-width:0}
.product-photo img{max-width:100%}

/* tablet / touch */
@media(pointer:coarse){
  .btn{padding:14px 18px}.btn-sm{padding:11px 14px}
  .qty button{width:40px;height:40px;font-size:18px}
  input,select,textarea{padding:14px 16px;font-size:16px}
  .product{min-height:172px}
  .nav-item{padding:15px 14px}
}
@media(min-width:761px) and (max-width:1050px){
  .pos-layout{grid-template-columns:minmax(0,1fr) minmax(300px,340px)}
  .cart-panel{position:sticky;top:98px}
  .products{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
/* v8: photo product cards */
.product{padding:0}
.product:after{display:none}
.product-photo{width:100%;aspect-ratio:4/3;overflow:hidden;background:#f7f2e6;flex-shrink:0}
.product-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s transform}
.product:hover .product-photo img{transform:scale(1.05)}
.product-icon{font-size:34px;padding:16px 16px 0;margin-bottom:0}
.product-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;min-width:0}
.product-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.price{margin-top:10px}.price small{font-size:11px;font-weight:700;color:var(--muted);margin-left:2px}
.stock{margin-top:0}
.cat-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:4px}
.cat{white-space:nowrap;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fffdf7;color:#6b5b4d;font-size:13px;font-weight:700;cursor:pointer}
.cat.on{background:var(--brand);border-color:var(--brand);color:#fffcf1}
.cart-opts{font-size:12px;color:var(--brand);margin-top:2px}

/* option sheet */
.sheet{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;background:rgba(60,42,30,.48);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet-card{background:linear-gradient(180deg,#ffffff,#fffdf6);border:1px solid var(--line);border-radius:26px 26px 0 0;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 -18px 50px rgba(60,42,30,.28);animation:sheetup .22s ease}
@keyframes sheetup{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{display:flex;gap:14px;align-items:center;padding:18px;border-bottom:1px solid var(--line)}
.sheet-head h3{margin:0;font-size:19px}
.sheet-head .product-photo{width:62px;height:62px;aspect-ratio:auto;border-radius:16px;flex-shrink:0}
.sheet-head .product-icon{font-size:32px;padding:0}
.sheet-x{margin-left:auto;background:#f7f3e8;border:1px solid var(--line);color:var(--text);width:36px;height:36px;border-radius:11px;cursor:pointer;font-size:15px}
.sheet-body{padding:18px;overflow:auto;flex:1}
.sheet-foot{padding:16px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px}
.sheet-foot strong{display:block;font-size:22px}
.sheet-foot .btn{flex:1;max-width:230px}
.opt-group{margin-bottom:20px}
.opt-nav{display:flex;gap:9px;align-items:center;flex:0 0 auto}
.opt-nav .btn{padding:14px 18px;font-size:15.5px;white-space:nowrap}
/* Буцах товч — жижигхэн, бүдэг. Гол үйлдэл биш тул нүд булаах ёсгүй. */
.opt-back{width:36px;height:36px;flex:0 0 auto;padding:0;border-radius:50%;
  border:1px solid var(--line);background:#fffdf7;color:var(--muted);
  font-size:16px;line-height:1;cursor:pointer;font-family:inherit;
  display:grid;place-items:center}
.opt-back:hover{background:#f6ece0;color:var(--brand2)}
/* Менежер — агуулах хөтлөх унтраалга ба хэмжээний баганууд. */
.opt-track{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;
  padding:11px 13px;border-radius:13px;background:rgba(1,145,71,.07);
  border:1px solid rgba(1,145,71,.22);cursor:pointer}
.opt-track small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.opt-cols{display:grid;grid-template-columns:1fr 92px 92px 1fr 42px;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;padding:0 2px}
.opt-edit-choice.tracked{display:grid;grid-template-columns:1fr 92px 92px 1fr 42px;gap:8px;align-items:center}
@media(max-width:700px){
  .opt-cols{display:none}
  .opt-edit-choice.tracked{grid-template-columns:1fr 1fr;gap:6px}
}
/* Хэмжээ тус бүрийн үлдэгдэл. Хувцасны дэлгүүрт «L хэдэн ширхэг үлдсэн»
   гэдгийг кассчин ХАРЖ байх ёстой — өөр үйлчлүүлэгч тэр хэмжээг аваад
   явчихсан байж болно. */
.opt-left{font-style:normal;font-size:12.5px;font-weight:800;flex:0 0 auto;
  padding:3px 8px;border-radius:999px;background:rgba(1,145,71,.12);color:var(--green2)}
.opt-left.out{background:rgba(176,0,32,.10);color:#9b1c2e}
/* Дууссан хэмжээг дарж болохгүй — дарчихвал захиалга өгөгдөөд, дараа нь
   бараа байхгүй нь мэдэгдэнэ. */
.opt-choice.gone{opacity:.5;cursor:not-allowed}
.opt-choice.gone input{pointer-events:none}
.opt-choice.gone span{text-decoration:line-through;text-decoration-thickness:1px}
/* HOT улаан, ICE цэнхэр. Кассчин шивэхдээ биш, ӨНГӨӨР нь таньдаг болно —
   халуун/хүйтнийг андуурах нь дахин хийх шаардлагатай алдаа. */
.opt-choice.hot span{color:#b3301f;font-weight:800}
.opt-choice.hot input{accent-color:#c0392b}
.opt-choice.hot:has(input:checked){border-color:rgba(192,57,43,.6);background:rgba(192,57,43,.10)}
.opt-choice.ice span{color:#1559a8;font-weight:800}
.opt-choice.ice input{accent-color:#1f6feb}
.opt-choice.ice:has(input:checked){border-color:rgba(31,111,235,.6);background:rgba(31,111,235,.10)}
.opt-title{font-weight:850;margin-bottom:9px;font-size:15px}.opt-title .req{color:var(--red)}
.opt-choice{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;margin-bottom:7px;cursor:pointer;background:#fffdf7}
.opt-choice:has(input:checked){border-color:rgba(139,94,52,.55);background:rgba(139,94,52,.09)}
.opt-choice input{width:19px;height:19px;accent-color:var(--brand);flex-shrink:0}
.opt-choice span{flex:1}.opt-choice b{color:var(--brand2);font-size:14px}
.opt-edit-head{display:grid;grid-template-columns:1fr auto auto auto;gap:7px;align-items:center;margin-bottom:9px}
.opt-edit-head select{width:auto}
.opt-req{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap}
.opt-edit-choice{display:grid;grid-template-columns:1fr 110px auto;gap:7px;margin-bottom:6px;padding-left:14px}
.thumb-btn{width:58px;height:58px;border-radius:14px;border:1px solid var(--line);background:#fffdf7;cursor:pointer;overflow:hidden;display:grid;place-items:center;font-size:26px;padding:0}
.thumb-btn img{width:100%;height:100%;object-fit:cover}
.thumb-btn:hover{border-color:rgba(139,94,52,.45)}
/* Олон зураг нэг дор оруулах — зураг бүрийн доор нь бүтээгдэхүүнээ сонгоно */
.bulk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.bulk-grid:empty{margin-top:0}
.bulk-card{border:1px solid var(--line);border-radius:14px;padding:8px;background:#fffdf7;display:flex;flex-direction:column;gap:6px}
.bulk-card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:10px}
.bulk-card .bulk-file{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-card select{width:100%;padding:8px;font-size:13px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* ——— Цэсний дараалал: мөр бүрийн дээш/доош товч ——— */
.ord-cell{white-space:nowrap;width:1%;padding-right:4px}
.ord-btn{width:30px;height:28px;display:block;margin:2px 0;border:1px solid var(--line);
  border-radius:8px;background:#fffdf7;color:var(--brand2);font-size:14px;line-height:1;cursor:pointer}
.ord-btn:hover:not(:disabled){border-color:rgba(139,94,52,.45);background:#fff}
.ord-btn:disabled{opacity:.3;cursor:default}

/* ——— Хүргэгчийн дэлгэц ——— */
/* Утсан дээр, гудамжинд, нэг гараар ажиллана: том товч, тод хаяг. */
.courier-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:start}
.dcard{border:1px solid var(--line);border-radius:18px;background:#fffdf7;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.dcard.going{border-color:rgba(139,94,52,.42);background:linear-gradient(160deg,#fffdf7,#fdf3e2)}
.dcard.wait{opacity:.72}
.dcard>header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dcard>header b{font-size:17px}
.dcard-id{min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dcard .when{white-space:nowrap}
.dcard .when{color:var(--muted);font-size:12.5px;margin-left:8px}
.pill{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:100px;white-space:nowrap;
  background:rgba(90,62,42,.10);color:var(--brand2)}
.pill.ready{background:rgba(47,125,82,.13);color:#2f7d52}
.pill.going{background:rgba(217,134,19,.16);color:#9a5f0c}
.addr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.addr-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.addr p{margin:4px 0 10px;font-size:17px;font-weight:650;line-height:1.35}
.no-pin{font-size:12px;color:#a23f31;margin-top:8px;line-height:1.4}
.dcard .note{font-size:14px;background:rgba(217,164,65,.14);border-radius:12px;padding:9px 12px}
.dcard .items{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.dcard .items li{font-size:14.5px}
.dcard .items .qty{font-weight:800;color:var(--brand2);margin-right:4px}
.dcard .items em{font-style:normal;color:var(--muted);font-size:12.5px}
.dcard .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:11px}
.dcard .foot .lbl{color:var(--muted);font-size:12.5px;margin-right:7px}
.dcard .foot b{font-size:18px}
.dcard .paid{font-size:11px;font-weight:700;color:#2f7d52;background:rgba(47,125,82,.12);
  border-radius:100px;padding:3px 9px;margin-left:8px}
.dcard .taken{text-align:center;font-size:13.5px;color:var(--muted);padding:9px;
  border:1px dashed rgba(90,62,42,.25);border-radius:12px}
.geo-box{border-radius:14px;padding:11px 14px;margin-bottom:14px;font-size:14px;line-height:1.5}
.geo-box.ok{background:rgba(47,125,82,.11);color:#2c6b48}
.geo-box.wait{background:rgba(90,62,42,.09);color:var(--brand2)}
.geo-box.err{background:rgba(192,80,63,.12);color:#a23f31}

/* ——— Касс: одоо төлөх үү, ширээнд сууна уу ——— */
/* Кассчны эхний шийдвэр. Сонгосных нь дагуу л талбарууд нээгдэнэ. */
.pay-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 12px}
.pay-mode .seg{padding:13px 10px;border-radius:14px;border:1px solid var(--line);
  background:#fffdf7;color:var(--muted);font-family:inherit;font-size:14.5px;font-weight:700;
  cursor:pointer;transition:.15s;line-height:1.25}
.pay-mode .seg:hover{border-color:rgba(139,94,52,.4)}
.pay-mode .seg.on{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 6px 16px -8px rgba(139,94,52,.8)}
#payLaterBox .notice{margin-bottom:10px}

/* ——— Ширээнд сууж байгаа зочны карт ——— */
.tab-card{border-color:rgba(139,94,52,.34);background:linear-gradient(160deg,#fffdf7,#fdf4e6)}
.tab-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:12px 0 10px;padding-top:11px;border-top:1px solid var(--line)}
.tab-total span{color:var(--muted);font-size:13px}
.tab-total b{font-size:26px;font-weight:900;color:var(--brand2);font-variant-numeric:tabular-nums}
/* Дөрвөн төлбөрийн хэлбэр — 2×2. Таблет дээр хуруунд томхон тусна. */
.pay-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pay-chips .chip{padding:13px 6px;border-radius:13px;border:1px solid var(--line);background:#fff;
  color:var(--text);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.pay-chips .chip:hover{border-color:var(--brand);background:#fffdf7;transform:translateY(-1px)}
.cash-box{margin-top:11px;padding-top:11px;border-top:1px dashed rgba(90,62,42,.22)}
@media(max-width:420px){ .pay-chips{grid-template-columns:1fr} }
/* Шилжүүлгийн дансны мэдээлэл — кассчин зочинд уншиж өгнө */
.wire-box{display:grid;gap:2px;margin-bottom:10px}
.wire-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 12px;border-radius:10px;background:#fffdf7;border:1px solid var(--line)}
.wire-row span{font-size:12.5px;color:var(--muted);font-weight:600}
.wire-row b{font-size:15px;font-variant-numeric:tabular-nums;text-align:right}
.wire-row .copyable{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}

/* ——— Захиалгын дугаар: зочны хамгийн чухал мэдээлэл ——— */
.order-no-big{margin:18px 0;padding:18px 20px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,#fffdf7,#f7efdf);border:1px solid rgba(139,94,52,.28)}
.order-no-big span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--muted)}
/* Дуудагддаг дугаар. Танхимын нөгөө талаас ч уншигдахаар том. */
.order-no-big b{display:block;font-size:clamp(78px,26vw,132px);font-weight:900;letter-spacing:-.04em;
  color:var(--brand2);line-height:.95;margin:4px 0 2px;font-variant-numeric:tabular-nums}
/* Бүтэн код — баримт, хайлтад хэрэгтэй ч зочинд хэрэггүй тул жижгээр. */
.order-no-big .ono-full{display:block;font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);opacity:.75;margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.order-no-big small{display:block;font-size:12.5px;color:var(--muted)}
/* Шинэ захиалга эхлүүлсэн ч өмнөх дугаар доор наалттай үлдэнэ */
.active-chip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);
  z-index:95;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;
  padding:10px 18px;border-radius:100px;background:#23201c;color:#faf6ee;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.55);font-family:inherit}
.active-chip .ac-no{font-size:15px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.active-chip .ac-st{font-size:12px;opacity:.82;padding-left:10px;border-left:1px solid rgba(250,246,238,.28);white-space:nowrap}
.active-chip:hover{background:#151310}

/* Англи сонголтын доор монгол тайлбар — «ICE» гэдгийг мэдэхгүй зочин олон */
.opt-choice span small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);
  margin-top:2px;letter-spacing:.01em}

/* ——— Хүргэх цэг сонгох (захиалгын хуудас) ——— */
.pick-wrap{margin:0 0 14px}
.pick-lbl{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.pick-map{position:relative;height:220px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#e9e4d8;touch-action:none;cursor:grab;user-select:none}
.pick-map.grabbing{cursor:grabbing}
.pick-map .tiles{position:absolute;left:50%;top:50%;width:0;height:0}
.pick-map .tiles img{position:absolute;width:256px;height:256px;max-width:none;display:block;
  pointer-events:none;-webkit-user-drag:none}
.pick-map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  pointer-events:none;z-index:3;width:22px;height:22px}
.map-pin,.pick-map .pin,.mini-map .pin{display:block}
.pick-map .pin:before,.mini-map .pin:before{
  content:"";display:block;width:100%;height:100%;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--brand);border:2.5px solid #fffcf1;
  box-shadow:0 3px 6px rgba(0,0,0,.4)}
.pick-gps,.pick-zoom button{position:absolute;z-index:4;border:1px solid var(--line);
  background:rgba(255,253,247,.95);color:var(--brand2);border-radius:11px;cursor:pointer;
  width:38px;height:38px;font-size:18px;line-height:1;display:grid;place-items:center;padding:0}
.pick-gps{right:10px;bottom:10px;font-size:20px}
.pick-zoom{position:absolute;right:10px;top:10px;z-index:4;display:flex;flex-direction:column;gap:6px}
.pick-zoom button{position:relative;right:auto;top:auto}
.pick-gps:hover,.pick-zoom button:hover{border-color:rgba(139,94,52,.5);background:#fff}
.pick-map .osm{position:absolute;right:0;bottom:0;font-size:9.5px;padding:2px 5px;z-index:2;
  background:rgba(255,255,255,.78);color:#444;text-decoration:none}
.pick-note{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.pick-note .muted{opacity:.75}

/* ——— Хэрэглэгч хүргэлтээ хардаг ——— */
.courier-live{margin-top:12px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fffdf7}
.cl-head{padding:13px 15px;font-size:15px}
/* Хавтангийн тор нь 0×0 цэг дээр сууж, хайрцгийн яг голоос тархана. Ингэснээр
   дэлгэцийн өргөн ямар ч байсан зүү жинхэнэ байрандаа таарна. 3×3 хавтан нь
   голоос ±256px хүрдэг тул хайрцгийг 500px-ээр хязгаарлав. */
.mini-map{position:relative;overflow:hidden;background:#e9e4d8;width:100%;max-width:500px;margin:0 auto}
.mini-map .tiles{position:absolute;left:50%;top:50%;width:0;height:0}
.mini-map .tiles img{position:absolute;width:256px;height:256px;max-width:none;display:block}
.mini-map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  pointer-events:none;z-index:2;width:20px;height:20px}
/* Хүргэгч ба очих газрыг өнгөөр нь ялгана — аль нь аль болохыг тайлбаргүй мэднэ */
.mini-map .pin.car:before{background:var(--brand2)}
.mini-map .pin.dest:before{background:var(--green)}
.cl-left{color:var(--green2);white-space:nowrap}
/* GPS-ийн нарийвчлал — «яг энд» гэж хуурахгүйн тулд бодит алдааны тойрог */
.mini-map .acc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(139,94,52,.16);border:1px solid rgba(139,94,52,.42);
  pointer-events:none;z-index:1}
.mini-map .osm{position:absolute;right:0;bottom:0;font-size:9.5px;padding:2px 5px;
  background:rgba(255,255,255,.78);color:#444;text-decoration:none}
.cl-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-top:8px;font-size:12.5px;color:var(--muted)}
.cl-legend span{display:inline-flex;align-items:center;gap:6px}
.cl-legend .lg{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.cl-legend .lg-car{background:var(--brand2)}
.cl-legend .lg-dest{background:var(--green)}
.cl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;padding:11px 15px}
.cl-foot .muted{font-size:12.5px}
@media(max-width:520px){
  .courier-list{grid-template-columns:1fr}
  .addr p{font-size:16px}
}
.order.fresh{border-color:rgba(224,144,42,.62);animation:pulse 2s ease-in-out 3}
@keyframes pulse{0%,100%{box-shadow:0 12px 28px rgba(90,62,42,.10)}50%{box-shadow:0 0 0 3px rgba(224,144,42,.32),0 12px 28px rgba(90,62,42,.10)}}
@media(min-width:761px){.sheet{align-items:center}.sheet-card{border-radius:26px}}

.qr-wrap{display:grid;place-items:center;margin:14px 0}
.qr-img{width:230px;height:230px;border-radius:18px;background:#fff;padding:10px;box-shadow:0 12px 30px rgba(90,62,42,.18)}
.bank-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:12px 0}
.bank-app{display:block;text-align:center;padding:11px 8px;border-radius:12px;border:1px solid var(--line);background:#fffdf7;font-size:13px;font-weight:700}
.bank-app:hover{border-color:rgba(139,94,52,.42);background:rgba(139,94,52,.08)}
.queue-head-4{grid-template-columns:repeat(4,1fr)}
.tab-view{animation:fadein .18s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media(max-width:1050px){.app-shell{grid-template-columns:86px minmax(0,1fr)}.sidebar{padding:18px 10px}.sidebar-brand h2,.sidebar-brand p,.nav-item span:not(.ico),.sidebar-footer{display:none}.sidebar-brand{justify-content:center}.nav-item{justify-content:center}.nav-item .ico{font-size:20px}.pos-layout,.manager-grid,.public-grid{grid-template-columns:minmax(0,1fr)}.cart-panel,.order-cart{position:static}.hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.login-screen{grid-template-columns:1fr;padding:18px}.login-side{display:none}.app-shell{display:block}.sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;height:68px;z-index:80;border-right:0;border-top:1px solid var(--line);padding:7px 10px;display:block}.sidebar-brand,.sidebar-footer{display:none}.side-nav{display:flex;justify-content:space-around;gap:4px}.nav-item{padding:9px;min-width:52px}.nav-item span:not(.ico){display:none}.app-topbar{height:auto;min-height:68px;padding:12px 15px}.page-title h1{font-size:18px}.page-title p{display:none}.top-actions .hide-mobile{display:none}.content{padding:15px 12px 90px}.products,.public-products,body.public-body .public-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product{min-height:148px;padding:13px}.product-icon{font-size:27px}.queue-head{grid-template-columns:repeat(3,1fr);gap:7px}.queue-head-4{grid-template-columns:repeat(2,1fr)}.metric{padding:12px}.metric strong{font-size:22px}.two{grid-template-columns:1fr}.public-topbar{padding:11px 13px}.public-wrap{padding:17px 11px 40px}.hero-copy{padding:10px 2px}.hero h1{font-size:31px}.hero p{font-size:15px}.panel{padding:15px;border-radius:20px}.orders{grid-template-columns:1fr}.login-panel{padding:22px}.brand-block h1{font-size:36px}}

/* ===== iPad / iPhone (Safari, "Нүүр дэлгэцэнд нэмэх" горим) ===== */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior:none}
*{-webkit-tap-highlight-color:transparent}
/* Товч дээр удаан дарахад "Copy / Look Up" цэс, текст сонголт гарахгүй */
button,.btn,.product,.nav-item,.tabs button,.metric,.order,.qty button,.step-pill,.badge{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation
}
input,textarea,select,.copyable,.link-url{-webkit-user-select:auto;user-select:auto}
/* Хуруугаар ажиллах үед hover эффект наалдаж үлддэгийг болиулна */
@media(hover:none){
  .product:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .nav-item:hover,.btn:hover{transform:none}
}
/* Дэлгэцийн зассан хэсэг (notch, home indicator) */
@supports(padding:max(0px)){
  .app-topbar{padding-top:max(0px,env(safe-area-inset-top))}
  .public-topbar{padding-top:max(11px,env(safe-area-inset-top))}
  .app-shell,.login-screen{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .content{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .public-wrap{padding-bottom:max(40px,env(safe-area-inset-bottom))}
}
@media(max-width:760px){
  @supports(padding:max(0px)){
    .sidebar{height:calc(68px + env(safe-area-inset-bottom));padding-bottom:max(7px,env(safe-area-inset-bottom))}
    .content{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  }
}

/* ================================================================
   ЗАХИАЛАГЧИЙН ХУУДАС — цайвар, дулаан загвар
   (jacks.coffee, roc.mn -оос санаа авсан. Ажилтны хуудсууд хөндөгдөхгүй.)
   ================================================================ */
body.public-body{
  --bg:#fffcf1;--bg-soft:#f7f3e8;--panel:#fff;--panel2:#fffdf7;
  --line:#f1ebdd;                       /* дулаан цөцгий ирмэг */
  --text:#231f20;--muted:#736e68;
  --green:#019147;--green2:#017a3c;
  --orange:#e0902a;--yellow:#ffb600;--red:#f14246;--blue:#3b6fd6;
  --shadow:none;
  background:#fffcf1;
}
body.public-body:before{display:none}
/* Хайрцаг — цагаан, дулаан ирмэг, 30px булан, сүүдэргүй */
body.public-body .glass,body.public-body .panel,body.public-body .card{
  background:#fff;border:1px solid var(--line);backdrop-filter:none;
  box-shadow:none;border-radius:30px
}
/* Захиалагчийн хуудсанд Manrope — Кирилл (Ө, Ү орно) дэмждэг геометр grotesque.
   Интернэт байхгүй бол доорх системийн үсгүүд рүү сайн уналттай. */
body.public-body{
  font-family:Manrope,"Segoe UI Variable Display","Segoe UI",Inter,system-ui,Arial,sans-serif
}
/* Гарчиг — маш бүдүүн, шахуу */
body.public-body h1,body.public-body h2,body.public-body h3,
body.public-body .hero strong,body.public-body .product-name,body.public-body .price{
  font-family:inherit;font-weight:800;letter-spacing:-.03em
}
/* Толгой */
body.public-body .public-topbar{background:rgba(255,252,241,.92);border-bottom:1px solid var(--line)}
body.public-body .public-brand{font-weight:700;letter-spacing:-.02em}
/* Нүүрний хэсэг */
body.public-body .hero{background:#fffcf1;border:1px solid var(--line);border-radius:30px}

body.public-body 
body.public-body .hero h1,body.public-body .hero strong{letter-spacing:-.02em;font-weight:700}
/* Ангиллын товчнууд */
body.public-body .cat{background:#ecebe7;border:1px solid transparent;color:#5a5550;font-weight:600}
body.public-body .cat.on{background:#231f20;border-color:#231f20;color:#fffcf1}
/* Товчнууд — Jack's маягийн бөөрөнхий, тайван */
/* Товч — 20px булан, 12x20 зай, 600 жин, сүүдэргүй */
body.public-body .btn{border-radius:20px;font-weight:600;font-size:14px;padding:12px 20px;transition:.18s;box-shadow:none}
body.public-body .btn:hover{filter:none;transform:none;opacity:.85}
body.public-body .btn-sm{padding:8px 16px}
body.public-body .btn-primary{background:#231f20;color:#fffcf1;box-shadow:none}
body.public-body .btn-primary:hover{background:#000;opacity:1}
body.public-body .btn-secondary{background:transparent;color:#231f20;border:1px solid rgba(35,31,32,.15);font-weight:500}
/* Бүтээгдэхүүний хайрцаг — цагаан, нам гүм */
body.public-body .product{
  background:#fff;border:1px solid var(--line);border-radius:30px;color:#231f20;box-shadow:none
}
body.public-body .product:after{display:none}
body.public-body .product:hover{border-color:rgba(35,31,32,.22);transform:none;box-shadow:none}
body.public-body .product-name{font-weight:600;letter-spacing:-.01em}
body.public-body .product-cat,body.public-body .stock{color:var(--muted)}
body.public-body .price{color:#231f20;font-weight:700}
body.public-body .product-icon{opacity:.9}
/* Сагс, сонголт */
body.public-body .cart-row{background:#fdfbf4;border:1px solid var(--line)}
body.public-body .qty button{background:#fff;border:1px solid rgba(35,31,32,.16);color:#231f20}
body.public-body .opt-choice{background:#fdfbf4;border:1px solid var(--line)}
body.public-body .opt-choice:has(input:checked){border-color:var(--green);background:rgba(1,145,71,.06)}
body.public-body .summary .total{border-top:1px solid var(--line)}
body.public-body .empty{border:1px dashed rgba(35,31,32,.18);color:var(--muted)}
/* Талбар */
body.public-body input,body.public-body select,body.public-body textarea{
  background:#fff;border:1px solid rgba(35,31,32,.16);color:#231f20;border-radius:12px
}
body.public-body input:focus,body.public-body select:focus,body.public-body textarea:focus{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(1,145,71,.10)
}
body.public-body select option{background:#fff;color:#231f20}
/* Мэдэгдэл, зар */
body.public-body .notice{background:#f7f3e8;border:1px solid var(--line)}
body.public-body .notice.ok{background:rgba(1,145,71,.07);border-color:rgba(1,145,71,.28)}
body.public-body .notice.err{background:rgba(216,71,79,.07);border-color:rgba(216,71,79,.3)}
body.public-body .ad-card{background:#fdf6e7;border:1px solid rgba(224,144,42,.35)}
body.public-body .bank-box{background:rgba(1,145,71,.05);border:1px solid rgba(1,145,71,.28)}
body.public-body .closed-banner{background:rgba(216,71,79,.07);border:1px solid rgba(216,71,79,.3)}
body.public-body .badge{border:1px solid var(--line);background:#f3efe2;color:#5a5550}
body.public-body .qr-wrap,body.public-body .qr-img{background:#fff}

/* ——— Захиалагчийн хуудас: нүүр, бүтээгдэхүүн илүү тод ——— */
body.public-body .public-wrap{max-width:1180px;padding:34px 20px 64px}
/* Толгойн нэр томсоно */
body.public-body .public-brand{font-weight:800;font-size:21px;letter-spacing:-.04em;text-transform:uppercase}
/* Нүүрний хэсэг — том, задгай */
body.public-body .hero{padding:30px}
body.public-body .hero-copy{padding:30px 6px}
body.public-body .hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;margin:0 0 12px}
body.public-body .hero p{font-size:16.5px;color:var(--muted);max-width:46ch}

/* Бүтээгдэхүүн — том зураг, тод үнэ */
body.public-body .public-products{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
body.public-body .product{padding:0;overflow:hidden}
body.public-body .product-photo{aspect-ratio:4/3;background:#f7f2e6;border-bottom:1px solid var(--line)}
body.public-body .product-body{padding:16px 18px 18px}
body.public-body .product-name{font-size:17.5px;line-height:1.25}
body.public-body .product-cat{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
body.public-body .price{font-size:21px}
body.public-body .product-icon{font-size:40px;padding:26px 0;text-align:center}
/* Зураггүй бараа — захиалагчийн хуудсанд эможгүй, зүгээр л цайвар талбай */
.product-blank{background:linear-gradient(135deg,#f7f2e6 0%,#efe6d4 100%)}
/* Нээлттэй захиалгад дараа нэмсэн багц — бариста шинийг нь л хийнэ */
/* Кассан дээрх QPay-гийн QR цонх */
/* Өмнөх үетэй харьцуулсан өөрчлөлт — тоон дор жижиг тэмдэг */
.stat-card .delta{display:inline-block;margin-top:6px;font-size:12px;font-weight:800;
  padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.stat-card .delta.up{background:rgba(1,145,71,.12);color:#017a3c}
.stat-card .delta.down{background:rgba(192,80,63,.12);color:#c0503f}
.stat-card .delta.flat{background:rgba(90,62,42,.10);color:var(--muted)}
/* Хараагүй захиалга байгаа тохиолдолд товч анивчина — танхимын нөгөө
   талаас ч анзаарагдана. Дуу унтраалттай байсан ч энэ нь ажиллана. */
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,.55)}
  50%{box-shadow:0 0 0 10px rgba(217,164,65,0)}}
.btn.ringing,button.ringing{animation:ringPulse 1.3s ease-out infinite;
  background:var(--yellow,#d9a441)!important;color:#231f20!important;border-color:transparent!important}
@media(prefers-reduced-motion:reduce){
  .btn.ringing,button.ringing{animation:none;outline:3px solid rgba(217,164,65,.9);outline-offset:2px}
}
/* Хөвөгч мэдэгдэл — жагсаалт дахин зурагдахад арчигдахгүй */
/* ——— «Бид хаана байдаг вэ» ——— */
.place-block{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;align-items:center;
  margin:42px 0 8px;padding:28px;border-radius:28px;background:#fffdf7;
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(90,62,42,.08)}
.place-block h2{font-size:26px;margin:0 0 10px}
.place-addr{font-size:16.5px;line-height:1.6;margin:0 0 4px}
.place-block .muted{margin:0 0 16px;font-size:14px}
.place-block .btn{display:inline-block;text-decoration:none}
.place-map{position:relative;display:block;height:260px;border-radius:20px;overflow:hidden;
  background:#e9e2d4;border:1px solid var(--line)}
/* Хавтангууд 0x0 хэмжээтэй ТӨВ цэгээс тоологдоно. mapTileHtml нь тус бүрийн
   left/top-ыг тэр цэгээс хэдэн пиксел зөрүүтэйг нь бодож өгдөг. Хэрэв энэ
   савыг inset:0 болговол гарааны цэг нь зүүн дээд булан болж, зураг хазайна —
   өмнө нь хүргэлтийн пин 500 метр зөрж байсан шалтгаан яг энэ. */
.place-map .tiles{position:absolute;left:50%;top:50%;width:0;height:0}
.place-map .tiles img{position:absolute;width:256px;height:256px;max-width:none;display:block}
.place-pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;background:var(--brand);border:3px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.place-pin::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;
  margin:-23px 0 0 -23px;border-radius:50%;background:rgba(139,94,52,.18)}
.place-map .osm{position:absolute;right:6px;bottom:4px;font-size:10px;color:#4a4a4a;
  background:rgba(255,255,255,.72);padding:1px 5px;border-radius:5px}
@media(max-width:760px){
  .place-block{grid-template-columns:1fr;gap:18px;padding:20px;margin-top:28px}
  .place-map{height:220px;order:-1}
  .place-block h2{font-size:22px}
}
/* Авах цаг — бариста хэзээ хийхээ энүүгээр шийднэ */
.pickup-tag{margin:10px 0;padding:9px 13px;border-radius:12px;font-size:14px;font-weight:700;
  background:rgba(217,164,65,.14);border:1px solid rgba(217,164,65,.38);color:#7a5a12}
.pickup-tag.late{background:rgba(192,80,63,.12);border-color:rgba(192,80,63,.36);color:#c0503f}
/* «Хэзээ очиж авах вэ» — заавал биш тул чипээр, богино */
.when-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.when-chip{padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:#fffdf7;color:var(--text);font:700 13.5px inherit;cursor:pointer;
  transition:.15s background,.15s border-color}
.when-chip:hover{border-color:var(--brand)}
.when-chip.on{background:var(--brand);border-color:var(--brand);color:#fffcf1}
.when-at{font-size:13px;color:var(--muted);font-weight:700;margin-left:4px}
/* Цаг сонгох хэсэг. Утасны өөрийнх нь цагийн дугуйг ашиглана — зочин
   «15 мин гэдэг нь хэдэн цаг бол» гэж бодох шаардлагагүй. */
.when-time{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin-top:4px}
.when-time input[type=time]{
  font:inherit;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:11px 14px;border-radius:14px;border:1px solid var(--line);
  background:#fffdf7;color:var(--text);min-height:48px
}
.when-time input[type=time]:focus{outline:2px solid var(--brand);outline-offset:1px}
.when-at.err{color:var(--red)}
/* Хүргэлтийн цэг хүргэх хэсгээс гадуур бол зураг улаанаар хүрээлэгдэнэ —
   тайлбар уншихаас өмнө нүдэнд тусна. */
.pick-map.far{outline:2px solid var(--red);outline-offset:-2px}
.pick-note.ok{color:var(--green2)}
.pick-note.err{color:var(--red)}
/* Төлбөрийн үндсэн товч — дэлгэц дээрх хамгийн тод зүйл байх ёстой */
.btn-pay{font-size:19px;padding:20px 22px;border-radius:26px}
/* Чимээгүй дэд үйлдэл — санамсаргүй дарахааргүй, гэхдээ олдохоор */
.btn-quiet{display:block;width:100%;margin-top:14px;padding:12px;border:0;background:none;
  color:var(--muted);font:600 14px inherit;text-decoration:underline;cursor:pointer}
.btn-quiet:hover{color:#c0503f}
.cp-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);
  background:#1f7a4d;color:#fff;padding:14px 22px;border-radius:14px;font-weight:700;
  box-shadow:0 14px 40px rgba(0,0,0,.28);z-index:900;max-width:min(92vw,520px);
  text-align:center;transition:transform .28s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.cp-toast.on{transform:translate(-50%,0)}
.qpay-amount{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:4px 0 14px}
.qpay-qr{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;
  display:block;width:fit-content;margin:0 auto 14px}
.qpay-qr img{display:block;width:240px;height:240px;image-rendering:pixelated}
@media(max-width:480px){.qpay-qr img{width:200px;height:200px}}
.round-tag{margin:10px 0 6px;padding:5px 10px;border-radius:999px;background:#fdebd0;color:#8a5a12;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;display:inline-block}
.order-items .round-tag:first-child{margin-top:0}
/* Дарахад мэдрэгддэг */
body.public-body .product:active{transform:scale(.985)}
body.public-body .btn:active{transform:scale(.97)}
/* Сагс */
body.public-body .order-cart{top:96px}
body.public-body .summary .total{font-weight:800;font-size:24px}
/* Ангиллын мөр — тод зааг */
body.public-body .cat-bar{gap:9px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
body.public-body .cat{padding:10px 16px;font-size:13.5px}
/* Алхмын шошго */
body.public-body .step-pill{background:#f3efe2;border:1px solid var(--line);color:#5a5550;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:760px){
  body.public-body .public-wrap{padding:20px 14px 56px}
  body.public-body .hero{padding:22px}
  
  body.public-body .public-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  body.public-body .product-body{padding:13px 14px 15px}
  body.public-body .product-name{font-size:15.5px}
  body.public-body .price{font-size:18px}
}

/* ——— Сүртэй болгох: том хэмжээс, зурагтай нүүр, амьд хөдөлгөөн ——— */
body.public-body .hero{padding:0;overflow:hidden;background:#fffcf1}
body.public-body .public-grid{gap:26px}
/* Нүүрний бичиг — сэтгүүлийн маягийн том гарчиг */
body.public-body .hero-copy{padding:44px 38px}
body.public-body .hero h1{
  font-size:clamp(34px,5.2vw,58px);line-height:1.02;letter-spacing:-.035em;margin:14px 0 16px
}
body.public-body .hero p{font-size:17px;line-height:1.5}

/* Зураг дээр хулгана очиход бага зэрэг ойртоно */
body.public-body .product-photo img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
body.public-body .product:hover .product-photo img{transform:scale(1.06)}
/* Хэсгийн гарчгууд том, тод */
body.public-body .section-title h2{font-size:27px;letter-spacing:-.035em;font-weight:800}
body.public-body .panel{padding:26px}
/* Сагсны нийт дүн — хамгийн тод элемент */
body.public-body .summary .total{font-size:30px;letter-spacing:-.03em;padding-top:16px}
/* Гол товч илүү том, өргөн */
body.public-body .btn-block{padding:16px 22px;font-size:15.5px;border-radius:24px}
@media(max-width:760px){
  body.public-body .hero-copy{padding:26px 20px}
  
  body.public-body .panel{padding:18px}
  body.public-body .summary .total{font-size:25px}
  body.public-body .section-title h2{font-size:22px}
}

/* ——— Jack's-ийн бодит хэмжээсүүд (1280px, 32px зай, 12px завсар, 3:4 зураг) ——— */
body.public-body .public-wrap{max-width:1280px;padding:40px 32px 64px}
body.public-body .public-topbar{padding:0 32px;min-height:59px;max-width:1280px;margin:0 auto;width:100%}
body.public-body .public-products{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
/* Зураг — 4:3. Ундааны зургууд өөрсдөө 4:3 (1448×1086) тул хайрцагтаа яг
   таарч, тайрагдахгүй бас цагаан зураас үлдээхгүй. */
body.public-body .product-photo{aspect-ratio:4/3;background:#fff;border-bottom:0}
body.public-body .product-photo img{width:100%;height:100%;object-fit:cover;padding:0}
body.public-body .product-body{padding:0 18px 20px}
@media(max-width:760px){
  body.public-body .public-wrap{padding:22px 16px 56px}
  body.public-body .public-topbar{padding:0 16px}
  body.public-body .public-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.public-body .product-body{padding:0 14px 16px}
}

/* ——— Захиалгын хэсгийг томсгох ——— */
body.public-body .public-grid{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:24px}
body.public-body .public-products{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
body.public-body .product-name{font-size:19px}
body.public-body .price{font-size:23px}
body.public-body .cart-row{padding:15px}
body.public-body .qty button{width:38px;height:38px;font-size:18px}
body.public-body .opt-choice{padding:15px 16px;font-size:15.5px}
body.public-body .field span{font-size:14px}
@media(max-width:1050px){ body.public-body .public-grid{grid-template-columns:1fr} }
@media(max-width:760px){
  body.public-body .public-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  body.public-body .product-name{font-size:16px}
  body.public-body .price{font-size:19px}
}

/* ===== POS Касс — өнгөт ангиллын хавтан, хүснэгтэн сагс ===== */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px;margin-bottom:16px}
.cat-tile{
  position:relative;text-align:left;border:0;cursor:pointer;color:#fff;
  background:var(--c);border-radius:14px;padding:14px 15px 13px;min-height:80px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 8px 16px rgba(90,62,42,.18);transition:.15s;font-family:inherit
}
.cat-tile b{font-size:15px;font-weight:800;line-height:1.2;display:block}
.cat-tile small{opacity:.75;font-size:11.5px;font-weight:600}
.cat-tile:after{content:"→";position:absolute;right:13px;bottom:11px;opacity:.7;font-size:14px}
.cat-tile:hover{transform:translateY(-2px);filter:brightness(1.08)}
.cat-tile.on{outline:2px solid #3a2a1e;outline-offset:2px}
/* Сагс — багана бүхий хүснэгт хэлбэр */
.cart-head{display:grid;grid-template-columns:1fr 96px 92px;gap:10px;padding:0 12px 9px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);margin-bottom:9px}
.cart-head span:nth-child(2){text-align:center}.cart-head span:nth-child(3){text-align:right}
.cart-row{grid-template-columns:1fr 96px 92px!important;align-items:center}
.cart-row .cr-name b{font-size:14.5px}
.cart-row .qty{justify-content:center}
.cart-row .cr-sum{text-align:right;font-weight:800;font-size:15px}
/* Том төлбөрийн товч */
.pay-btn{font-size:17px;padding:17px;border-radius:15px;letter-spacing:.01em}
@media(max-width:760px){
  .cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .cat-tile{min-height:68px;padding:12px}
  .cart-head,.cart-row{grid-template-columns:1fr 84px 78px!important}
}
/* Сагсны талбарыг өргөсгөж, нэрэнд илүү зай өгнө */
.pos-layout{grid-template-columns:minmax(0,1.35fr) minmax(390px,.72fr)}
.cart-head,.cart-row{grid-template-columns:1fr 86px 84px!important}
.cart-row{padding:11px 12px}
.qty button{width:29px;height:29px}
@media(max-width:1050px){.pos-layout{grid-template-columns:1fr}}

/* агуулах — дуусч буй түүхий эд */
.stock-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:11px 14px;border-radius:14px;margin-bottom:14px;background:rgba(224,144,42,.13);border:1px solid rgba(224,144,42,.38);font-size:13.5px}
.stock-strip:before{content:"⚠ Дуусч байна:";font-weight:800;color:#8a5a12;margin-right:2px}
.stock-chip{padding:4px 11px;border-radius:999px;background:#fffdf7;border:1px solid rgba(90,62,42,.16);font-weight:600}
.stock-chip.out{background:rgba(192,80,63,.10);border-color:rgba(192,80,63,.38);color:#8f2c1e}
.low-row{background:rgba(192,80,63,.07)}
.low-tag{display:block;margin-top:3px;font-size:11px;font-weight:800;color:#a3301f}
.rec-row{display:grid;grid-template-columns:1fr 110px 34px auto;gap:7px;align-items:center;margin-bottom:7px}
.rec-unit{font-size:12.5px;color:var(--muted);text-align:center}
.unit-hint{font-size:11.5px;color:var(--muted);margin-top:3px}
.restock{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13.5px;padding:2px 0}
.restock input,.restock select{width:auto}

/* ================================================================
   АЖИЛТНЫ ДЭЛГЭЦҮҮД — кофе шопын дулаан загвар
   Цөцгий суурь, шаргал бор өргөлт. Тэгш өнгө, чимэглэлгүй, том товч.
   ================================================================ */
body:not(.public-body){
  --bg:#f7f0e2;--bg-soft:#efe5d3;--line:rgba(90,62,42,.16);
  --text:#2b211a;--muted:#6d5e51;--shadow:none;
  background:#f7f0e2!important;background-attachment:initial!important
}
body:not(.public-body):before{display:none}          /* сүлжээн ар дэвсгэр авах */
/* Самбарууд — тунгалаг биш, тэгш */
body:not(.public-body) .glass,
body:not(.public-body) .panel,
body:not(.public-body) .card{
  background:#fffdf7;border:1px solid var(--line);backdrop-filter:none;
  box-shadow:none;border-radius:14px
}
body:not(.public-body) .panel{padding:18px}
/* Хажуугийн цэс, дээд мөр — бор тан өнгө, тод зааглалттай */
body:not(.public-body) .sidebar{background:#efe4d1;backdrop-filter:none;border-right:1px solid var(--line)}
body:not(.public-body) .app-topbar{background:#efe4d1;backdrop-filter:none;height:68px}
body:not(.public-body) .nav-item{border-radius:11px;font-weight:600;color:#6b5b4d}
body:not(.public-body) .nav-item.active{background:#8b5e34;border-color:#8b5e34;color:#fffcf1}
body:not(.public-body) .nav-item:hover{background:rgba(139,94,52,.10)}
/* Товч — тэгш, том, гялбаагүй */
body:not(.public-body) .btn{border-radius:11px;font-weight:700;box-shadow:none!important;transition:.12s}
body:not(.public-body) .btn:hover{filter:none;transform:none;opacity:.9}
body:not(.public-body) .btn:active{transform:scale(.98)}
body:not(.public-body) .btn-primary{background:#8b5e34;color:#fffcf1}
body:not(.public-body) .btn-primary:hover{background:#6f4a28;opacity:1}
body:not(.public-body) .btn-secondary{background:#f3e9d8;color:#2b211a;border:1px solid var(--line)}
body:not(.public-body) .btn-danger{background:#c0503f;color:#fffcf1}
/* Барааны хавтан — тэгш, том, хөдөлгөөнгүй */
body:not(.public-body) .product{
  background:#fffdf7;border:1px solid var(--line);border-radius:13px;min-height:150px;transition:.12s
}
body:not(.public-body) .product:after{display:none}
body:not(.public-body) .product:hover{background:#fdf6e8;border-color:rgba(139,94,52,.40);transform:none;box-shadow:none}
body:not(.public-body) .product:active{transform:scale(.985)}
body:not(.public-body) .product-name{font-size:15.5px;font-weight:700}
/* Кассын барааны нэр НЭГ мөрөнд багтахаа больж «Mixed Berries Smoothie» нь
   «Mixed Berries ...» болж байв — кассчин юу дарж байгаагаа таамаглана.
   Хэдэн ч мөр болж буухыг зөвшөөрнө. Үнэ нь margin-top:auto-гоор доод талдаа
   наалддаг, картууд нь торны мөрөнд тэгширдэг тул эгнээ жигд хэвээр үлдэнэ.
   -webkit-line-clamp туршсан боловч ажиллахгүй: .product-name нь flex
   хүүхэд тул -webkit-box нь flow-root болж хувирдаг — мөрийн тоо
   хязгаарлагдахгүй хэрнээ overflow:hidden нь илүү мөрийг ЧИМЭЭГҮЙ нууж,
   утсан дээр «Mixed Berries Smoothie»-ийн гуравдахь мөр алга болж байв. */
body:not(.public-body) .product-name{
  white-space:normal;line-height:1.25;overflow:visible;text-overflow:clip;
}
body:not(.public-body) .price{color:#6f4a28;font-size:19px}
body:not(.public-body) .product-photo{background:#f3e9d8}
/* Талбарууд */
body:not(.public-body) input,body:not(.public-body) select,body:not(.public-body) textarea{
  background:#fff;border:1px solid var(--line);border-radius:11px
}
body:not(.public-body) input:focus,body:not(.public-body) select:focus,body:not(.public-body) textarea:focus{
  border-color:#8b5e34;box-shadow:0 0 0 3px rgba(139,94,52,.16)
}
body:not(.public-body) select option{background:#fff;color:#2b211a}
/* Сагс, хүснэгт, мэдэгдэл */
body:not(.public-body) .cart-row{background:#fdf6e8;border-color:var(--line);border-radius:11px}
body:not(.public-body) .qty button{background:#f3e9d8;border-color:var(--line);border-radius:8px;color:#2b211a}
body:not(.public-body) .notice{background:#f7f0e1;border-radius:11px}
body:not(.public-body) .table th{background:#f0e6d4;color:#5b4c3f}
body:not(.public-body) .table-wrap{border-radius:12px}
body:not(.public-body) .metric,body:not(.public-body) .order{background:#fffdf7;border-radius:13px;box-shadow:none}
body:not(.public-body) .order.ready{border-color:#019147}
/* Төлбөрийн товч — хамгийн тод элемент. Ногоон нь "бэлэн" гэсэн дохио тул хэвээр. */
body:not(.public-body) .pay-btn{background:#017a3c;color:#fffcf1;font-size:18px;padding:18px;border-radius:12px}
body:not(.public-body) .pay-btn:hover{background:#016030}
/* Сагсны доор хоёр үйлдэл зэрэг: «Төлбөр авах» 70%, «Ширээнд суух» 30%.
   Ширээний горимыг өмнө нь цонх нээж байж олдог байсан — танхимд сууж
   байгаа зочин олонтой үед өдөрт олон удаа давтагддаг илүү алхам байв. */
.pay-row{display:grid;grid-template-columns:7fr 3fr;gap:9px;align-items:stretch}
.pay-row .pay-btn{width:100%}
/* Мөнгө хүлээж авдаггүй товч ногоон байж болохгүй — кассчин яаралтай үед
   өнгөөр нь ялгаж дардаг. Нарийхан нүдэнд «Ширээнд суух» гэсэн бичиг хоёр
   мөр болж шахагддаг тул дүрс + нэг богино үг болгов. */
body:not(.public-body) #openTab.pay-btn{background:#fffdf7;color:var(--brand2);
  border:1.5px solid rgba(139,94,52,.32);padding:11px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
body:not(.public-body) #openTab.pay-btn span{font-size:13px;font-weight:800;
  letter-spacing:.01em;line-height:1;white-space:nowrap}
body:not(.public-body) #openTab.pay-btn svg{opacity:.75}
body:not(.public-body) #openTab.pay-btn:hover{background:#f6ece0;border-color:rgba(139,94,52,.55)}

/* ——— Утсан дээр: гарчгийн мөрөнд шүүлтүүр багтахгүй бол доош бууна ——— */
@media(max-width:760px){
  .section-title{flex-wrap:wrap;row-gap:10px}
  .section-title>div{min-width:0}
  .range-bar{flex-wrap:wrap}
}

/* ——— Утсан дээр: ажилтны дээд мөр багтахгүй бол мөр таслана ———
   Товчнууд шахагдахгүй тул хуудас дэлгэцээс өргөн болж, доод цэс хүртэл
   сунадаг байсан. Өндрийг нь чөлөөлж, мөр таслуулна. */
@media(max-width:760px){
  .app-topbar{flex-wrap:wrap;gap:8px;row-gap:6px}
  body:not(.public-body) .app-topbar{height:auto;min-height:68px;padding:10px 12px}
  .page-title{min-width:0;flex:1 1 120px}
  .page-title h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:7px}
  .top-actions .btn{white-space:nowrap}
}

/* ——— Доод талын сагсны мөр (зөвхөн утас, таблет) ———
   Сагс нь цэсний доор байдаг тул нийт дүн нүднээс далд байсан. */
.cart-bar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;align-items:center;gap:12px;
  background:#231f20;color:#fffcf1;border:0;border-radius:18px;
  padding:14px 18px;font-family:inherit;font-size:15px;font-weight:600;
  box-shadow:0 12px 30px rgba(35,31,32,.30);cursor:pointer;
  transform:translateY(160%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;text-align:left
}
.cart-bar.on{transform:none;pointer-events:auto}
.cart-bar:active{filter:brightness(1.15)}
.cart-bar-badge{
  flex:none;min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:#fffcf1;color:#231f20;display:grid;place-items:center;
  font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums
}
.cart-bar-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-bar-total{flex:none;font-weight:800;font-variant-numeric:tabular-nums}
@keyframes cartbump{0%,100%{transform:none}35%{transform:translateY(-5px)}}
.cart-bar.bump{animation:cartbump .34s ease}
@media(prefers-reduced-motion:reduce){
  .cart-bar{transition:none}.cart-bar.bump{animation:none}
}
/* Ажилтны хуудсанд: ӨРГӨН цонхонд сагс аль хэдийн хажуудаа байгаа тул хэрэггүй.
   Гэвч нарийн цонхонд (утас, эсвэл iPad дээр Split View-ээр хагас дэлгэц)
   байрлал нэг багана болж, сагс нь бүх цэсний доор ордог — хэмжихэд
   «Төлбөр авах» 3830px доор үлдэж байв. Тэнд энэ мөр хэрэгтэй.
   Доод талд ажилтны цэс (68px) зогсдог тул түүний дээр байрлана. */
body:not(.public-body) .cart-bar{display:none}
@media(max-width:739px){
  body:not(.public-body) .cart-bar{display:flex;bottom:calc(78px + env(safe-area-inset-bottom))}
  /* Мөр сүүлчийн барааг далдлахгүй байх зай */
  body:not(.public-body) .content{padding-bottom:152px}
  /* Сагс руу үсрэхэд доод талын ажилтны цэс (68px) «Төлбөр авах»-ыг
     дарж байв — scrollIntoView нь fixed элементийг тооцдоггүй. */
  body:not(.public-body) .cart-panel{scroll-margin-bottom:84px}
}
@media(min-width:1051px){.cart-bar{display:none}}
/* Мөр сүүлийн агуулгыг халхлахгүйн тулд доор нь зай үлдээнэ */
@media(max-width:1050px){
  body.public-body .public-wrap{padding-bottom:96px}
}

/* ——— Онцлох барааны эгнээ ———
   Зураг нь босоо (400×600 орчим) тул хавтан нь ч босоо (3:4). Ингэснээр
   бараг юу ч тасрахгүй, хоосон зай ч үлдэхгүй. Хажуу тийш гүйлгэнэ. */
body.public-body .hero{grid-template-columns:minmax(0,1fr)}
.shots{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch;min-width:0;
  /* Баруун ирмэг бүдгэрч, цааш үргэлжилж байгааг мэдрүүлнэ */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%)}
.shots::-webkit-scrollbar{height:0}
.shot{flex:0 0 auto;width:150px;background:none;border:0;
  padding:0;margin:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;gap:7px}
.shot-img{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:18px;
  background:#f3efe2;border:1px solid var(--line)}
.shot-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s transform}
.shot:hover .shot-img img{transform:scale(1.04)}
.shot:active{transform:scale(.985)}
.shot-name{font-weight:600;font-size:14.5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-price{font-size:13.5px;color:var(--muted);font-weight:600}
@media(max-width:760px){
  .shot{width:132px}
  .shot-name{font-size:13.5px}
  .shot-price{font-size:12.5px}
}

/* ——— Барааны зураг: зурагтайгаа ижил хэлбэр ———
   Хайрцаг зурагнаасаа өөр хэлбэртэй бол аль нэг нь золиос болно — тайрагдах
   эсвэл хажуугаараа хоосон зураас үлдэх. Ундааны зургууд 4:3 тул хайрцгийг
   ч мөн 4:3 болгоно: утсан дээр ч, дэлгэц дээр ч адилхан. */
body.public-body .product-photo{aspect-ratio:4/3}
@media(max-width:760px){
  body.public-body .product-photo{aspect-ratio:4/3}
}

/* ——— Утсан дээр: цэс эхний дэлгэцэд багтах ———
   Захиалагч QR уншаад орж ирнэ — эхлээд харах ёстой зүйл нь бараа.
   Нүүрний хэсэг үлдэнэ, гэхдээ бүтэн дэлгэц эзлэхээ болино.
   body.public-body-тэй ижил жинтэй байх ёстой, эс бөгөөс дарагдана. */
@media(max-width:760px){
  body.public-body .public-wrap{padding:12px 12px 40px}
  body.public-body .hero{padding:14px;border-radius:20px}
  body.public-body .hero-copy{padding:4px 2px}
  body.public-body .hero h1{font-size:23px;line-height:1.2;margin:0 0 6px}
  body.public-body .hero p{font-size:14px;line-height:1.5;max-width:none}
  
  
  body.public-body .public-grid{gap:12px}
  body.public-body .panel{padding:14px;border-radius:20px}
  body.public-body .section-title h2{font-size:18px}
  /* Барааны карт — хоёр багана, товч */
  body.public-body .product-body{padding:10px 12px 12px}
  body.public-body .product-name{font-size:15px}
  body.public-body .price{font-size:17px}
  body.public-body .product-cat{font-size:11px}
  body.public-body .ads-strip{margin-bottom:10px}
  body.public-body .ad-card{min-width:210px;padding:11px 13px}
}

/* ——— Захиалагчийн бүтээгдэхүүний хайрцаг: тайван, тод, нэг жигд ——— */
/* Хайрцгийн булан бага зэрэг татаж, зургийг илүү өргөн харуулна. */
body.public-body .product{border-radius:22px;border-color:#e8e0d2}
body.public-body .product-photo{aspect-ratio:4/3;background:#fff}
body.public-body .product-body{padding:15px 16px 17px;gap:0}
body.public-body .product-name{font-size:18px;font-weight:800;letter-spacing:-.03em;
  white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Ангилал — өнгөт бөөрөнхий шошго. Өнгө нь нэрнээсээ шалтгаалж тогтмол байна. */
body.public-body .cat-pill{
  align-self:flex-start;margin-top:9px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;border:1px solid transparent;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cat-c0{background:#f6e9e3;color:#8d4228;border-color:#ecd7cc}
.cat-c1{background:#eaf3ea;color:#1f6b3a;border-color:#d5e7d8}
.cat-c2{background:#fdf0dd;color:#95591a;border-color:#f3ddbe}
.cat-c3{background:#e9eef7;color:#2f4d80;border-color:#d5dfef}
.cat-c4{background:#f2ecf7;color:#5b3d80;border-color:#e3d8ee}
.cat-c5{background:#f7ece9;color:#8f3436;border-color:#eed7d3}

/* Үнэ ба үйлдэл — доор нь мөр болж байрлана (Jack's маягийн уншлага) */
body.public-body .product-foot{
  margin-top:12px;display:block
}
body.public-body .price{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}
body.public-body .pick{
  margin-top:7px;font-size:12.5px;font-weight:700;color:var(--brand2);
  display:inline-flex;align-items:center;gap:5px
}
body.public-body .pick .arw{transition:transform .18s}
body.public-body .product:hover .pick .arw{transform:translateX(3px)}
body.public-body .product.sold .pick{color:var(--muted)}

/* Дууссан барааны тэмдэг — зураг дээр */
body.public-body .sold-tag{
  position:absolute;top:11px;left:11px;z-index:2;
  padding:5px 10px;border-radius:999px;background:#c0503f;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em
}
body.public-body .product.sold{opacity:.55}

@media(max-width:760px){
  body.public-body .product-name{font-size:15px}
  body.public-body .price{font-size:17px}
  body.public-body .cat-pill{font-size:10.5px;padding:3px 9px;margin-top:7px}
  body.public-body .pick{font-size:11.5px}
  body.public-body .product-body{padding:12px 13px 14px}
}

/* ——— Толгой: нэрний хажууд тайван төлөв, баруун талд хэл ——— */
body.public-body .brand-wrap{display:flex;align-items:center;gap:11px;min-width:0}
body.public-body .open-chip{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:#eef3ee;color:#2f6b43;border:1px solid #dbe7de;letter-spacing:.01em
}
body.public-body .open-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:#2f8a51}
body.public-body .open-chip.is-closed{background:#f4efec;color:#7a6a5c;border-color:#e6ddd4}
body.public-body .open-chip.is-closed:before{background:#a9958a}
/* Хэлний сонголт — хоёр хэсэгтэй бөөрөнхий товч */
body.public-body .lang-switch{
  display:inline-flex;flex:none;padding:3px;gap:2px;border-radius:999px;
  background:#efeae0;border:1px solid #e4dccf
}
body.public-body .lang-switch button{
  border:0;background:transparent;cursor:pointer;font:inherit;color:#6b5f55;
  font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;
  transition:background .2s ease,color .2s ease
}
body.public-body .lang-switch button.on{background:#231f20;color:#fffcf1}

/* ——— Мэдээ мэдээлэл — цэсний доор, сонин биш, тайван ——— */
body.public-body .news-block{margin-top:34px}
body.public-body .news-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--line)
}
body.public-body .news-head h2{font-size:24px;font-weight:800;letter-spacing:-.035em;margin:0}
body.public-body .news-all{font-size:13px;font-weight:700;color:var(--brand2);text-decoration:none;flex:none}
body.public-body .news-all:hover{text-decoration:underline}
body.public-body .news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
body.public-body .news-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 19px;
  display:grid;gap:7px;transition:border-color .2s ease
}
body.public-body .news-card:hover{border-color:rgba(35,31,32,.2)}
body.public-body .news-card b{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
body.public-body .news-card span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ——— Хөл хэсэг ——— */
body.public-body .site-foot{border-top:1px solid var(--line);background:#fffdf6;margin-top:46px}
body.public-body .foot-inner{
  max-width:1180px;margin:auto;padding:44px 20px 30px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:34px
}
body.public-body .foot-logo{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--orange));font-size:22px;overflow:hidden
}
body.public-body .foot-logo img{width:100%;height:100%;object-fit:cover}
body.public-body .foot-name{font-size:21px;font-weight:800;letter-spacing:-.04em;text-transform:uppercase;margin-top:12px}
body.public-body .foot-tag{color:var(--muted);font-size:14px;margin:7px 0 0;max-width:34ch;line-height:1.5}
body.public-body .foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
body.public-body .foot-col h3{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;margin:0 0 14px;color:#231f20
}
body.public-body .foot-item{
  display:block;font-size:14px;color:var(--muted);text-decoration:none;
  margin-bottom:10px;line-height:1.45;transition:color .18s ease
}
body.public-body a.foot-item:hover{color:#231f20}
body.public-body .foot-base{
  max-width:1180px;margin:auto;padding:0 20px 30px;font-size:12.5px;color:var(--muted)
}
@media(max-width:760px){
  body.public-body .foot-inner{grid-template-columns:1fr;gap:28px;padding:32px 16px 22px}
  body.public-body .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  body.public-body .news-head h2{font-size:20px}
  body.public-body .news-grid{grid-template-columns:1fr;gap:11px}
  body.public-body .lang-switch button{padding:5px 11px;font-size:12px}
  body.public-body .open-chip{padding:4px 9px;font-size:10.5px}
}

/* ——— Зөөлөн шилжилт: дарах, гүйлгэх бүхэн намуухан ——— */
body.public-body{scroll-behavior:smooth}
body.public-body .product{transition:border-color .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
body.public-body .product:active{transform:scale(.975)}
body.public-body .btn{transition:background .2s ease,opacity .2s ease,transform .15s ease}
body.public-body .cat{transition:background .2s ease,color .2s ease,border-color .2s ease}
body.public-body .cart-row,body.public-body .qty button{transition:border-color .18s ease,background .18s ease}
@media(prefers-reduced-motion:reduce){
  body.public-body,body.public-body *{transition:none!important;animation:none!important;scroll-behavior:auto}
}

/* ——— Үсгийн хэмжээ: утсан дээр илүү тод, нэг жигд шатлалтай ——— */
@media(max-width:760px){
  body.public-body .hero h1{font-size:29px;line-height:1.08;letter-spacing:-.035em}
  body.public-body .hero p{font-size:14.5px;line-height:1.5}
  body.public-body .public-brand{font-size:17px}
  body.public-body .section-title h2{font-size:21px}
  body.public-body .product-name{font-size:16.5px;line-height:1.3}
  body.public-body .price{font-size:18.5px}
  body.public-body .pick{font-size:12px}
  body.public-body .cat-pill{font-size:11px}
  body.public-body .news-head h2{font-size:21px}
  body.public-body .news-card b{font-size:15.5px}
  body.public-body .foot-name{font-size:19px}
}

/* ═══ УТАС ТЭРГҮҮН — хүрэх талбай, аюулгүй бүс, бодит өндөр ═══
   Үйлчлүүлэгчдийн бараг бүгд утсаар ордог тул эдгээр нь гол засварууд. */

/* 1. Доод сагсны мөр iPhone-ы нүүр-зураас дээр давхарлаж байсныг зассан. */
.cart-bar{bottom:calc(12px + env(safe-area-inset-bottom))}

/* 2. Сонголтын цонх: vh нь утсан дээр хаяг-мөр нуугдахад буруу тоо өгдөг.
      dvh дэмждэг браузерт бодит өндрөөр, эс бөгөөс vh-аар ажиллана. */
.sheet-card{max-height:88vh}
@supports (height:100dvh){ .sheet-card{max-height:88dvh} }
.sheet-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}

/* 3. Хүрэх талбай — хуруунд 44px хэрэгтэй. Хулгана биш, хуруу гэдгээр нь
      ялгаж (pointer:coarse) хэрэглэнэ, дэлгэцийн өргөнөөр биш. */
@media (pointer:coarse){
  body.public-body .qty button{width:44px;height:44px;font-size:20px;border-radius:12px}
  body.public-body .qty{gap:10px}
  body.public-body .cat{min-height:44px;display:inline-flex;align-items:center}
  body.public-body .lang-switch button{min-height:44px;padding:0 16px;display:inline-flex;align-items:center}
  body.public-body .foot-item{padding:12px 0;margin-bottom:0}
  body.public-body .news-all{padding:8px 0}
  body.public-body .sheet-x{width:44px;height:44px}
  /* Хуруугаар дарахад тохиолддог хоёр удаа томсгохыг болиулна */
  body.public-body .product,body.public-body .cat,body.public-body .btn,
  body.public-body .qty button{touch-action:manipulation}
  /* Хуруунд hover гэж байхгүй. Дарахад тэр төлөв наалдаж, карт өргөгдөөд
     буцдаг нь анивчиж байгаа мэт харагддаг. Оронд нь дарах агшинд бага зэрэг
     жижгэрч, юу дарсныг тод хэлнэ. */
  body.public-body .product:hover{transform:none;box-shadow:none;border-color:var(--line)}
  body.public-body .product:active{transform:scale(.97)}
  body.public-body .cat:hover,body.public-body .btn:hover{transform:none;filter:none}
}

/* 4. Сагсны мөр гарч ирэхэд агуулга түүний доор дарагдахгүй байх зай. */
@media(max-width:760px){
  body.public-body .public-wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* 5. Кассын (ажилтны) сагсны багана тохиргоо `.cart-row` гэсэн ерөнхий
      сонгуураар бичигдсэн тул захиалагчийн сагсыг ч гуйвуулж, утсан дээр
      +/− товчийг 30px хүртэл шахаж байсан. Захиалагчийн хуудсанд буцаана. */
body.public-body .cart-row{grid-template-columns:minmax(0,1fr) auto!important}
body.public-body .qty button{flex:none}

/* ——— Кассын сагс хуруунд: бариста iPad дээр ажилладаг ———
   Хулганатай дэлгэц нягт хэвээрээ үлдэнэ — зөвхөн хүрэлтийн төхөөрөмжид
   өргөсгөнө. Захиалагчийн хуудсыг санамсаргүй хамруулахгүйн тулд
   body:not(.public-body) гэж тодорхой тусгаарлав. */
@media (pointer:coarse){
  body:not(.public-body) .cart-head,
  body:not(.public-body) .cart-row{grid-template-columns:minmax(0,1fr) 132px 84px!important}
  body:not(.public-body) .qty button{width:44px;height:44px;font-size:20px;border-radius:11px;flex:none}
  body:not(.public-body) .cart-row .qty{gap:7px}
  body:not(.public-body) .cart-row .qty b{min-width:20px;text-align:center}
  body:not(.public-body) .qty button,
  body:not(.public-body) .product,
  body:not(.public-body) .cat-tile{touch-action:manipulation}
  /* Дээд мөрийн товчнууд 39–41px өндөр байв. Apple 44px гэж заасан бөгөөд
     «Хаалт» ба «Гарах» зэрэгцэж байгаа тул андуурч дарах эрсдэлтэй. */
  body:not(.public-body) .top-actions .btn{min-height:44px;display:inline-flex;align-items:center;gap:6px}
}
/* Утсан дээр 44px товч, уншигдах нэр, дүн гурав нэг мөрөнд багтахгүй.
   Тиймээс нэрийг дээд мөрөнд бүтнээр нь, тоо ба дүнг доор нь тавина. */
@media (pointer:coarse) and (max-width:520px){
  body:not(.public-body) .cart-head{display:none}
  body:not(.public-body) .cart-row{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:9px 12px;align-items:center
  }
  body:not(.public-body) .cart-row .cr-name{grid-column:1/-1}
  body:not(.public-body) .cart-row .qty{justify-content:flex-start}
  body:not(.public-body) .cart-row .cr-sum{text-align:right;font-size:16px}
}

/* ——— Таблет: сагсны мөрийг давхарлана ———
   Сагсны багана нарийссанаар нэр, тоо, дүн гурав нэг мөрөнд багтахаа
   болив: 44px товчнууд 132px иддэг тул нэрэнд 46px л үлдэж «Cappuccino»
   нь «Сарр» болж тайрагдаж байв. Нэрийг дээд мөрөнд бүтнээр нь, тоо ба
   дүнг доор нь тавина — товчнууд ч жижгэрэхгүй.
   Хязгаар нь ДЭЭРХ байрлалын дүрэмтэй (740–1400px) яг таарах ёстой: 1051-ээс
   эхлүүлсэн үед босоо байрлалын 834px дээр энэ дүрэм ажиллахгүй хэрнээ сагс
   нь аль хэдийн нарийссан байсан тул нэр босоогоор нэг үсгээр бичигдэж байв. */
@media(min-width:740px) and (max-width:1400px){
  body:not(.public-body) .cart-head{display:none}
  body:not(.public-body) .cart-row{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px 12px;align-items:center
  }
  body:not(.public-body) .cart-row .cr-name{grid-column:1/-1;min-width:0}
  body:not(.public-body) .cart-row .qty{justify-content:flex-start}
  body:not(.public-body) .cart-row .cr-sum{text-align:right;font-size:16px}
}
/* Ямар ч өргөнд нэр нь баганаасаа халихгүй. Гридын нүд анхнаасаа
   агуулгынхаа хэмжээнээс бага болдоггүй тул min-width:0 шаардлагатай.
   Нэр хоёр мөр болж буух нь тасрахаас дээр — тиймээс цэг тавихгүй.
   Гэвч зайгүй урт үг (жишээ барааны код) мөр тасарч чадахгүй тул
   баганаасаа халих боломжтой: anywhere түүнийг дундуур нь таслана. */
.cart-row .cr-name{min-width:0}
.cart-row .cr-name b{display:block;overflow-wrap:anywhere}

/* ——— Тохиргооны хуудас: 7 хэсэг нэг урт багана байснаа эвхэгддэг жагсаалт ——— */
.set-list{max-width:780px;display:grid;gap:10px}
.set-group{
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 2px;padding-left:2px
}
.set-group:first-child{margin-top:0}
.set-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:border-color .18s ease
}
.set-card[open]{border-color:rgba(139,94,52,.34)}
.set-card>summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
  padding:15px 17px;min-height:56px;font-weight:700;user-select:none
}
.set-card>summary::-webkit-details-marker{display:none}
.set-card>summary:hover{background:var(--bg-soft)}
.set-title{font-size:15.5px;flex:none}
.set-sub{
  font-size:12.5px;font-weight:500;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1
}
.set-meta{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.set-arrow{color:var(--muted);font-size:13px;transition:transform .22s ease;display:inline-block}
.set-card[open] .set-arrow{transform:rotate(180deg)}
.set-body{padding:2px 17px 18px;border-top:1px solid var(--line)}
/* Хэсэг дотор дараалсан талбарууд хоорондоо жигд зайтай */
.set-body>.field,.set-body>.two{margin-top:12px}
.set-body>.notice{margin-top:11px}
.set-body>.btn-block{margin-top:15px}

@media(max-width:760px){
  .set-list{max-width:none;gap:9px}
  .set-card>summary{padding:14px 14px;min-height:52px;gap:9px}
  .set-title{font-size:14.5px}
  /* Утсан дээр тайлбар мөр зай эзэлдэг тул нууна — гарчиг өөрөө хангалттай */
  .set-sub{display:none}
  .set-body{padding:2px 14px 16px}
}
@media (pointer:coarse){
  .set-card>summary{min-height:56px}
}

/* ——— Менежерийн хүснэгтүүд таблет дээр шахагдахгүй болгох ———
   1050px-ээс доош менежерийн хуудас хоёр багана хэвээр байсан тул
   iPad дээр хүснэгт ~320px алдаж, Үнэ талбарын дотоод өргөн 11px болтлоо
   шахагдаж, тоо огт харагдахгүй болж байсан. */
@media(max-width:1180px){
  .manager-grid{grid-template-columns:minmax(0,1fr)}
}
/* Бүтээгдэхүүн 7 багана, агуулах 6 багана болсон тул ерөнхий 650px хүрэлцэхгүй.
   Хүрэлцэхгүй бол багануудыг нурааж бус, хүрээндээ хөндлөн гүйлгэнэ. */
/* Хүснэгт доторх тоон талбар хэзээ ч уншигдахгүй болтлоо нарийсахгүй. */
.table td input[type=number]{min-width:78px}
.table-products td input[id^="pr_"]{min-width:92px}
.table-products td input[id^="st_"]{min-width:78px}
.table td input{padding:10px 11px}
/* Үйлдлийн товчнууд нэг мөрөнд 311px эзэлдэг. Нарийн дэлгэцэнд бичвэрийг нь
   хасалгүйгээр мөр таслуулж, баганыг нарийсгана — мөр арай өндөр болох ч
   хүснэгт хөндлөн гүйхээ болино. */
.table-products{min-width:720px}
.table-products .row-actions{white-space:normal;max-width:190px;display:flex;flex-wrap:wrap;gap:5px}
.table-products .row-actions .btn{margin:0}
/* Агуулахын мөрөнд таван товч (нэмж авсан, хаягдал, тоолсон, хадгалах, устгах)
   нэг мөрөнд 457px эзэлж, нэрний талбарыг уншигдахгүй болгож байсан. */
.table-stock{min-width:660px}
.table-stock td input[id^="in_"]{min-width:152px}
.table-stock .row-actions{white-space:normal;max-width:200px;display:flex;flex-wrap:wrap;gap:5px}
.table-stock .row-actions .btn{margin:0}

/* ——— «Өнөөдөр юу хийх вэ» — саад болохгүй, харахад хялбар ———
   Хэлэх зүйлгүй бол JS нь энэ самбарыг огт гаргахгүй. */
.todo-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:14px 16px 8px;margin-bottom:18px
}
.todo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.todo-head h2{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:0}
.todo-x{
  border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;
  font-size:15px;line-height:1;padding:6px 8px;border-radius:9px;transition:background .18s ease
}
.todo-x:hover{background:var(--bg-soft);color:var(--text)}
.todo-row{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  border:0;border-top:1px solid var(--line);background:transparent;cursor:pointer;
  font:inherit;color:inherit;padding:11px 2px;transition:background .16s ease
}
.todo-row:first-child{border-top:0}
.todo-row:hover:not(:disabled){background:var(--bg-soft)}
.todo-row:disabled{cursor:default}
.todo-ico{font-size:17px;line-height:1.3;flex:none}
.todo-txt{font-size:14px;line-height:1.45;min-width:0}
.todo-txt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.todo-row.warn .todo-ico,.todo-row.err .todo-ico{filter:none}
.todo-row.err .todo-txt b{color:#c0503f}
.todo-row.ok .todo-txt b{color:var(--green)}
@media (pointer:coarse){
  .todo-row{padding:14px 2px}
  .todo-x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
}

/* Танилцуулга хэсэг цэсний ДООР байрлана — үйлчлүүлэгч эхлээд захиалахыг
   хүсдэг, сурталчилгаа уншихыг биш. Тиймээс дээд зайг нь өгнө. */
body.public-body #hero{margin-top:26px;margin-bottom:0}
@media(max-width:760px){ body.public-body #hero{margin-top:18px} }

/* Менежерийн сонголт засварлагч дахь HOT/ICE шилжүүлэгч — кафе бүрт хэрэгтэй
   тул гараар бүлэг үүсгэхийн оронд нэг дарахад нэмэгддэг. */
.hotice-row{
  display:flex;align-items:flex-start;gap:12px;padding:14px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);cursor:pointer
}
.hotice-row span{display:block;min-width:0}
.hotice-row b{display:block;font-size:14.5px}
.hotice-row small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.45}
.hotice-row input{flex:none;margin-top:2px}
@media (pointer:coarse){ .hotice-row{padding:16px} }

/* ——— Сагсанд нэмэхэд нисэх эффект ———
   Юу нэмэгдсэнийг нүдээр баталгаажуулна. Зөвхөн харагдац — дарсны үр дүн
   эффектээс хамаарахгүй, хөдөлгөөн ажиллаагүй ч бараа сагсанд орсон байна. */
.fly-ghost{
  position:fixed;z-index:300;pointer-events:none;
  border-radius:16px;background:#f7f2e6 center/cover no-repeat;
  box-shadow:0 12px 28px rgba(35,31,32,.28);
  will-change:transform,opacity
}
.fly-ghost.fly-emoji{
  display:grid;place-items:center;font-size:30px;background:#fff;
  border:1px solid var(--line)
}
/* Хүрэх мөчид сагс бага зэрэг цохилно. */
@keyframes cartHit{
  0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)}
}
.cart-bar.cart-hit{animation:cartHit .38s cubic-bezier(.3,1.4,.5,1)}
.order-cart.cart-hit{animation:cartHit .38s cubic-bezier(.3,1.4,.5,1)}
/* Дарсан карт өөрөө богино хугацаанд жижгэрч, дарагдсаныг мэдрүүлнэ. */
body.public-body .product:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){
  .fly-ghost{display:none}
  .cart-bar.cart-hit,.order-cart.cart-hit{animation:none}
}

/* ——— Таблет: ангиллыг нимгэн эгнээ болгоно ———
   Кассын зүүн багана таблет дээр нарийсдаг тул том хавтангууд олон мөр болж
   босоо зай иддэг. iPad Pro (1194px) дээр хэмжихэд ангилал ганцаараа 444px
   эзэлж, эхний бараа 702px-т буюу дэлгэцийн ирмэг дээр эхэлж байв — кассчин
   бараагаа харахын тулд болгон удаа доошлуулна. Хязгаарыг 1050 → 1400 болгов:
   бүх iPad хэвтээ байрлалд багтана. Хэвтээ гүйдэг чип нь 52px л иднэ. */
@media(max-width:1400px){
  body:not(.public-body) .cat-tiles{
    display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    padding:2px 2px 8px;margin-bottom:12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  body:not(.public-body) .cat-tiles::-webkit-scrollbar{display:none}
  body:not(.public-body) .cat-tile{
    flex:0 0 auto;min-height:44px;padding:9px 14px;border-radius:12px;
    flex-direction:row;align-items:baseline;gap:8px;box-shadow:none;
  }
  body:not(.public-body) .cat-tile small{opacity:.75;font-size:12px}
  body:not(.public-body) .cat-tile:after{display:none}
}

/* ——— Таблет дээрх касс (740–1400px: бүх iPad, хэвтээ ба босоо) ———
   Хэмжиж олсон гурван алдааг зэрэг засна:
   1. Хажуугийн самбар 260px буюу iPad-ын өргөний 22%-ийг эзэлж, цэсэнд
      ердөө 491px үлдээж байв. Гурван холбоосын төлөө хэт үнэтэй — дүрс
      болгон хураана. Лого хэвээр харагдана, дэлгүүрийн нэр дээд мөрөнд
      байгаа тул мэдээлэл алдагдахгүй.
   2. Босоо байрлалд (834×1194) байрлал нэг багана болж, «Төлбөр авах»
      товч 25 барааны ард 1400px доор үлддэг байв — кассчин төлбөр авах
      болгондоо бүх цэсийг гүйлгэж өнгөрнө. Хоёр баганыг хадгална.
   3. Ангиллын зургаагаас гурав нь дэлгэцийн гадна үлдэж, Tea, Smoothie
      байгааг кассчин мэдэх ч аргагүй байв — мөр таслаж бүгдийг харуулна. */
@media(min-width:740px) and (max-width:1400px){
  body:not(.public-body) .app-shell{grid-template-columns:86px minmax(0,1fr)}
  body:not(.public-body) .sidebar{padding:18px 10px}
  body:not(.public-body) .sidebar-brand h2,
  body:not(.public-body) .sidebar-brand p,
  /* :not(.ico) ЗААВАЛ хэрэгтэй. Дүрс нь өөрөө <span class="ico">🧾</span>
     тул энгийн `.nav-item span` гэвэл нэртэйгээ хамт нуугдаж, хажуугийн
     мөр хоосон хүрэн дөрвөлжин болж үлддэг — кассчин POS Касс, Barista,
     Manager гурвыг ялгах ямар ч тэмдэггүй болно. */
  body:not(.public-body) .nav-item span:not(.ico),
  body:not(.public-body) .sidebar-footer{display:none}
  body:not(.public-body) .sidebar-brand{justify-content:center}
  body:not(.public-body) .nav-item{justify-content:center}
  body:not(.public-body) .nav-item .ico{font-size:20px}
  /* Сагс: нарийсгавал нэр тайрагдана, өргөсгөвөл цэс шахагдана */
  body:not(.public-body) .pos-layout{grid-template-columns:minmax(0,1fr) clamp(286px,30%,360px);gap:16px;align-items:start}
  body:not(.public-body) .cart-panel{position:sticky;top:98px}
  /* Ангилал бүгд харагдана — гүйлгэж хайх шаардлагагүй */
  body:not(.public-body) .cat-tiles{flex-wrap:wrap;overflow-x:visible}
  body:not(.public-body) .products{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px}
  body:not(.public-body) .product{min-height:0}
  body:not(.public-body) .product-body{padding:9px 10px 11px}
  body:not(.public-body) .product-name{font-size:13.5px}
  /* Ангиллыг дээр нь чипсээр шүүж байгаа тул карт бүр дээр давтах нь илүүц */
  body:not(.public-body) .product-cat{display:none}
  body:not(.public-body) .price{font-size:16.5px;margin-top:5px}
  body:not(.public-body) .price small{font-size:10px}
  body:not(.public-body) .stock{font-size:10.5px;margin-top:2px}
  /* Төлбөрийн хоёр талбарыг зэрэгцүүлж 79px хэмнэх гэж үзсэн боловч БУЦААВ:
     сагс 286px өргөнтэй үед нүд тус бүрд бичигт 69px л үлдэж, «💵 Бэлэн
     мөнгө» (118px шаардана) нь «Бэлэн», «🏦 Шилжүүлэг» нь «Шилжүү…» болж
     тайрагдаж байв. Төлбөрийн хэлбэр буруу сонгогдвол өдрийн хаалт таарахгүй
     тул энэ бол зай хэмнэхэд хэт үнэтэй. Дээрээс нь доор нь байрлуулна. */
  body:not(.public-body) .summary{margin:10px 0}
  /* Тогтмол хэсэг бага зай эзлэх тусам барааны жагсаалтад их үлдэнэ.
     Хуруунд хэрэгтэй 44px-ийг хөндөхгүйгээр авч болох зай нь энэ. */
  body:not(.public-body) .cart-panel .pay-mode .seg{padding:10px 8px;min-height:46px}
  body:not(.public-body) .cart-panel .field>span{font-size:11.5px}
  body:not(.public-body) .cart-panel .field input,
  body:not(.public-body) .cart-panel .field select{min-height:46px;padding-top:0;padding-bottom:0}
  /* Мөр бүрээс 8px хасахад гуравдахь бараа дэлгэцэд багтана. 44px товч,
     уншигдах бичиг хоёрыг хөндөөгүй — зөвхөн зайг нь чангалав. */
  body:not(.public-body) .cart-row{padding:9px 10px;gap:5px 12px}
  body:not(.public-body) .cart-opts{margin-top:1px}
  body:not(.public-body) .cart-panel .section-title{margin-bottom:6px}
  body:not(.public-body) .cart-panel .summary .total{font-size:19px;padding-top:9px}
}

/* ——— Нарийн карт: үнэ дээр, үлдэгдэл доор ———
   Үнэ ба үлдэгдэл зэрэгцэж байсан нь 126px картад багтахгүй: хөл 104px атал
   үнэ 55 + үлдэгдэл 42 + зай 8 = 105px. Ганц пикселээр багтаагүй тул 25
   БАРААНЫ 25-Д НЬ «Үлдэгдэл» ба тоо нь тасарч хоёр мөр болж, карт бүр эмх
   замбараагүй харагдаж байв. Утсан дээр ч мөн адил тул таблетээс гадна
   бас хамруулав. Доор нь буулгав — үнэ хэдэн ч оронтой, үлдэгдэл
   хэдэн ч зуу болсон тасрахаа болино. */
@media(max-width:1400px){
  body:not(.public-body) .product-foot{flex-direction:column;align-items:flex-start;gap:1px}
  body:not(.public-body) .product-foot .stock{white-space:nowrap}
}

/* Бидний тухай — Manager-ээс бичвэр оруулсан үед л харагдана. Мөр таслалтыг
   хэвээр хадгална (white-space:pre-line), ингэснээр догол мөр нь алдагдахгүй. */
body.public-body .about-block{margin:26px 0 0;padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:22px}
body.public-body .about-block h2{margin:0 0 12px;font-size:22px;font-weight:800;letter-spacing:-.03em}
body.public-body .about-block p{margin:0;white-space:pre-line;color:var(--muted);font-size:15px;line-height:1.7;max-width:70ch}
@media(max-width:760px){
  body.public-body .about-block{margin-top:20px;padding:22px 18px;border-radius:18px}
  body.public-body .about-block h2{font-size:19px}
}

/* ——— Кассын төлбөрийн хуудас ——— */
/* Төлбөрийн хэлбэр урьд нь унждаг жагсаалт байсан: нээх, гүйлгэх, сонгох
   гэсэн гурван хөдөлгөөн. Хуруунд зориулж шууд дарах товч болгов — нэг
   хүрэлт, мөн юу сонгосон нь нүдэнд байнга харагдана. */
.field-label{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px}
.pm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.pm-grid .pm{
  min-height:54px;padding:8px 5px;border-radius:14px;border:1px solid var(--line);
  background:#fffdf7;color:var(--text);font:inherit;font-size:14px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.15;transition:.14s
}
.pm-grid .pm.on{background:var(--brand);border-color:var(--brand);color:#fffcf1}
@media(max-width:470px){.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(pointer:coarse){.pm-grid .pm{min-height:58px;touch-action:manipulation}}

/* «Төлбөр авсан уу?» — бэлэн, карт, шилжүүлэгт л асууна. Кассчин мөнгөө
   аваагүй атлаа андуурч дарвал өдрийн хаалт дутуу гарч, шалтгааныг нь
   хожим олох аргагүй болдог. */
.pay-ask{text-align:center;padding:14px 0 8px}
.pay-ask h3{margin:0 0 12px;font-size:22px;font-weight:850}
.pay-ask-sum{font-size:36px;font-weight:900;color:var(--brand2);font-variant-numeric:tabular-nums;line-height:1.1}
.pay-ask .muted{margin-top:6px;font-size:15px}
.pay-ask-note{margin-top:12px;font-size:15px}
.pay-ask-note.err{color:var(--red)}

/* ——— Story ——— */
/* Дугуй зурагнуудын мөр. Manager-т story нэмээгүй бол JS нь display:none-оор
   нуудаг тул энд зөвхөн харагдах үеийн байдлыг заана. */
body.public-body .story-bar{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 18px;margin:0 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.public-body .story-bar::-webkit-scrollbar{display:none}
body.public-body .story-dot{flex:0 0 auto;width:78px;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px}
body.public-body .story-ring{width:70px;height:70px;border-radius:50%;padding:3px;display:block;background:linear-gradient(135deg,#d9a441,#8b5e34);box-shadow:0 2px 10px rgba(90,62,42,.18)}
body.public-body .story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid #fffcf1;background:#fff}
body.public-body .story-cap{font-size:11px;font-weight:700;line-height:1.25;color:var(--muted);text-align:center;max-width:78px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.public-body .story-dot:active .story-ring{transform:scale(.94);transition:transform .12s}
/* Үзсэн нь бүдгэрнэ — аль нь шинэ болохыг нэг харвал мэднэ */
body.public-body .story-dot.seen .story-ring{background:rgba(139,94,52,.28);box-shadow:none}
body.public-body .story-dot.seen .story-cap{opacity:.6}

/* Бүтэн дэлгэцийн үзүүлэгч */
.story-viewer{position:fixed;inset:0;z-index:1000;background:#0d0b09;display:flex;align-items:center;justify-content:center}
.story-viewer .sv-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.story-viewer .sv-bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.story-viewer .sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.story-viewer .sv-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.story-viewer .sv-bar.done i{width:100%}
/* Зураас дүүрэх нь ХУГАЦААГ харуулна. Тусдаа таймер барихгүй — энэ анимац
   дуусахад дараагийн story руу шилждэг тул зогсоохдоо зөвхөн түр зогсооно. */
@keyframes svFill{from{width:0}to{width:100%}}
/* Хөдөлгөөн багасгасан хэрэглэгчид анимац унтардаг тул зураас дүүрэхгүй.
   Тэд ч хэд дэх story-г үзэж байгаагаа мэдэх ёстой — одоогийнхыг бүдэг
   дүүрэн зураасаар харуулна. Цаг нь JS таймераар явдаг тул асуудалгүй. */
@media(prefers-reduced-motion:reduce){
  .story-viewer .sv-bar.now i{width:100%;background:rgba(255,255,255,.55)}
}
.story-viewer.paused .sv-bar.now i{animation-play-state:paused!important}
.story-viewer .sv-stage{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.story-viewer .sv-img{opacity:0;transition:opacity .25s ease}
.story-viewer .sv-img.on{opacity:1}
/* Зураг ирэх хүртэл эргэлдэх тойрог — хар дэлгэц ширтэхээс дээр */
.story-viewer .sv-load{position:absolute;width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:svSpin .8s linear infinite}
@keyframes svSpin{to{transform:rotate(360deg)}}
/* Барьж зогсоосныг мэдрүүлнэ */
.story-viewer.paused .sv-cap{opacity:.25;transition:opacity .2s}
.story-viewer .sv-x{position:absolute;top:22px;right:14px;z-index:4;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.42);color:#fff;font-size:17px;cursor:pointer}
.story-viewer .sv-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:44px 22px 30px;color:#fff;font-size:16px;font-weight:600;line-height:1.5;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.72))}
/* Зүүн/баруун талын үл үзэгдэх товшилтын бүс — Instagram шиг */
/* sv-nav товчнууд хасагдав — бүх дэлгэц хуруунд мэдрэгддэг болсон:
   товших нь сэлгэнэ, барих нь зогсооно, шударах нь хаана. */
.story-viewer{touch-action:none;user-select:none;-webkit-user-select:none}

/* ——— Бидний тухай хуудас ——— */
body.public-body .ab-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;margin:0 0 34px;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
body.public-body .ab-block.flip .ab-img{order:2}
body.public-body .ab-img{margin:0;background:#faf7ef;align-self:stretch;min-height:240px}
body.public-body .ab-img img{width:100%;height:100%;object-fit:cover;display:block}
body.public-body .ab-text{padding:30px 32px}
body.public-body .ab-text h2{margin:0 0 12px;font-size:23px;font-weight:800;letter-spacing:-.03em}
body.public-body .ab-text p{margin:0;white-space:pre-line;color:var(--muted);font-size:15px;line-height:1.75}
/* Зураггүй блок бүтэн өргөнөө эзэлнэ */
body.public-body .ab-block.ab-textonly{grid-template-columns:1fr}
body.public-body .ab-block.ab-textonly .ab-text{padding:30px 32px}
@media(max-width:760px){
  body.public-body .ab-block{grid-template-columns:1fr;gap:0;margin-bottom:22px;border-radius:20px}
  body.public-body .ab-block.flip .ab-img{order:0}   /* утсан дээр зураг үргэлж дээрээ */
  body.public-body .ab-img{min-height:0;aspect-ratio:16/10}
  body.public-body .ab-text{padding:22px 20px}
  body.public-body .ab-text h2{font-size:20px}
}

/* ——— Хөл дэх сошиал холбоос ——— */
body.public-body .foot-social{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
body.public-body .foot-social .soc{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--brand2);transition:background .15s,color .15s,transform .15s}
body.public-body .foot-social .soc svg{width:19px;height:19px;display:block}
body.public-body .foot-social .soc:hover{background:var(--brand2);color:#fff;transform:translateY(-2px)}
/* Утасны дугаар дарж залгах боломжтой гэдгийг харуулна */
body.public-body #footPhone{text-decoration:none}
body.public-body #footPhone:hover{text-decoration:underline}

/* ——— Кассын захиалгын самбар өөрөө гүйнэ ———
   Өмнө нь самбар зөвхөн sticky байсан тул сагс урт болоод дэлгэцээс
   өндөр болоход доод тал нь таслагдаж, "Төлбөр авах" товч хүрэхийн тулд
   барааны жагсаалтыг доошлуулахаас өөр арга байхгүй байв.
   Одоо толгой ба төлбөрийн товч байрандаа үлдэж, дунд хэсэг нь дотроо
   гүйнэ. Зөвхөн өргөн дэлгэцэд — 1050px-ээс доош самбар нэг багана болж
   доошоо цувдаг тул тэнд хэвийн урсгалаараа үлдэнэ. */
@media(min-width:740px){
  .cart-panel{max-height:calc(100vh - 116px);display:flex;flex-direction:column}
  .cart-panel>.section-title,.cart-panel>.cart-head,
  .cart-panel>#summary,.cart-panel>#checkout,.cart-panel>#msg{flex:0 0 auto}
  /* overscroll-behavior — сагсны төгсгөлд хүрэхэд ард нь буй хуудас
     дагаж гүйхээс сэргийлнэ. */
  .cart-panel>.cart-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:80px;margin-right:-6px;padding-right:6px}
  /* ГҮЙДЭГ ХАЙРЦАГ ДОТОР ГҮЙДЭГ ХАЙРЦАГ байсныг устгав. `.cart` нь дангаараа
     байхад зориулсан max-height:340px+overflow:auto-гоо хадгалсаар байсан тул
     кассчин эхлээд дотор жагсаалтыг, дараа нь гадна самбарыг гэж хоёр удаа
     гүйлгэдэг байв. Гадна нь гүйж байгаа тул дотор нь гүйх шаардлагагүй. */
  .cart-panel>.cart-scroll>#cart{max-height:none;overflow:visible}
}