/*
  The new ordering UI, scoped.
  Everything lives under #n-app and every class starts with n-, so nothing here
  can touch the rest of the site and nothing of the site's can reach in by
  class name. The handful of !important below is the whole price of sharing a
  page with style.css - they only undo its global tag rules
  (p/.card/table font-size, img object-fit, a colour) inside our own root.
*/
#n-app{ --ink:#2A0D0D; --soft:#7B5A4C; --bg:#FAF6F1; --sf:#fff; --line:#E7DACB;
  --acc:var(--cnc-orange,#f17d00); --acc2:#d46f00; --dark:var(--cnc-dark,#3d0d0f); --sale:#B3261E; --ok:#1E7A45;
  background:var(--bg); color:var(--ink); font-family:Archivo,system-ui,sans-serif; font-weight:600; display:block}
#n-app *{box-sizing:border-box}
#n-app p, #n-app .n-card, #n-app table{font-size:inherit !important}
#n-app h1,#n-app h2,#n-app h3,#n-app h4,#n-app h5,#n-app h6{margin:0;font-weight:900;color:var(--ink)}
#n-app img{object-fit:contain !important;max-width:100%;display:block}
#n-app a{color:inherit;text-decoration:none}
/* the site paints every a:hover with !important; keep our own colours inside our root */
#n-app a:hover, #n-app a:focus, #n-app a:active{color:inherit !important;text-decoration:none !important;opacity:1 !important}
#n-app .n-pay, #n-app .n-pay:hover, #n-app .n-pay:focus{color:#fff !important}
#n-app .n-add, #n-app .n-add:hover{color:#fff !important}
#n-app button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#n-app .n-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
#n-app .n-wrap{max-width:1560px;margin:0 auto;padding:0 22px}

/* the offer line */
#n-app .n-deal{background:var(--acc);color:#fff}
#n-app .n-deal .n-in{display:flex;align-items:center;gap:14px;padding-block:14px}
#n-app .n-deal .n-tag{background:#fff;color:var(--acc);font-weight:900;font-size:11px;letter-spacing:1.4px;padding:5px 9px}
#n-app .n-deal .n-txt{font-size:17px !important;font-weight:900;line-height:1.2}
#n-app .n-deal .n-txt small{display:block;font-size:13px;font-weight:700;opacity:.92}
#n-app .n-state{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.18);padding:8px 13px;font-weight:800;font-size:14px;white-space:nowrap}
#n-app .n-state i{width:8px;height:8px;border-radius:50%;background:#7CF0A8;display:block}
/* closed: the same pill, white with the brand orange - never red */
#n-app .n-state.n-closed{background:#fff;color:var(--acc)}
#n-app .n-state.n-closed i{background:var(--acc)}
#n-app .n-state small{font-size:12px;font-weight:700;opacity:.9}
@media (max-width:640px){ #n-app .n-state small{display:none} }
/* On a phone the offer is one short line, not a poster. Every rule below is
   scoped like the ones above it: #n-app .n-x beats .n-x on specificity, so an
   unscoped override in a media query would never apply. */
@media (max-width:640px){
  #n-app .n-deal .n-in{gap:10px;flex-wrap:nowrap;padding-block:10px}
  #n-app .n-deal .n-tag{font-size:10px;letter-spacing:1.2px;padding:5px 7px;align-self:center;white-space:nowrap}
  #n-app .n-deal .n-txt{font-size:14px !important;flex:1;min-width:0}
  #n-app .n-deal .n-txt small{display:none}
  #n-app .n-state{font-size:12px;padding:6px 10px}
}

/* categories */
#n-app .n-cats{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(42,13,13,.06)}
#n-app .n-catbar{display:flex;align-items:center;gap:10px;padding-block:12px}
#n-app .n-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1;max-height:44px;overflow:hidden}
#n-app .n-chips.n-open{position:absolute;left:22px;right:22px;top:calc(100% - 4px);max-height:none;background:var(--sf);border:1px solid var(--line);box-shadow:0 18px 40px rgba(42,13,13,.14);padding:14px;z-index:40}
#n-app .n-chips button{white-space:nowrap;padding:9px 15px;font-weight:800;font-size:15px;background:var(--sf);border:1px solid var(--line);color:var(--ink)}
#n-app .n-chips button[aria-current=true]{background:var(--dark);border-color:var(--dark);color:#fff}
#n-app .n-more{padding:9px 14px;font-weight:800;font-size:15px;border:1px solid var(--ink);background:var(--sf)}
@media (max-width:560px){ #n-app .n-chips{flex-wrap:nowrap;overflow-x:auto;max-height:none;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--acc) #EFE3D6}
  #n-app .n-chips::-webkit-scrollbar{height:6px}
  #n-app .n-chips::-webkit-scrollbar-track{background:#EFE3D6}
  #n-app .n-chips::-webkit-scrollbar-thumb{background:var(--acc)} }

/* layout: food + a basket that stays */
/* the side gutters are set here too: this rule would otherwise cancel .n-wrap's */
#n-app .n-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;padding:22px 22px 90px}
@media (max-width:1100px){ #n-app .n-main{grid-template-columns:minmax(0,1fr)} #n-app .n-side{display:none} }
#n-app .n-search{display:flex;align-items:center;gap:10px;background:var(--sf);border:1px solid var(--line);height:52px;padding:0 16px;margin-bottom:12px}
/* all / single / menu - the kiosk's filter, as three square buttons */
#n-app .n-kind{display:flex;gap:8px;margin-bottom:18px}
#n-app .n-kind button{flex:1;height:44px;border:1px solid var(--line);background:var(--sf);font-weight:800;font-size:15px;color:var(--ink)}
#n-app .n-kind button:hover{background:#FFF9F2}
#n-app .n-kind button[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
#n-app .n-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--ink)}
#n-app .n-h2{scroll-margin-top:86px;margin:34px 0 14px !important;font-size:28px !important;line-height:1.2;display:flex;align-items:center;gap:14px}
#n-app .n-h2:after{content:'';flex:1;height:2px;background:var(--line)}
#n-app .n-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
@media (max-width:640px){ #n-app .n-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
#n-app .n-card{background:var(--sf);border:1px solid var(--line);display:flex;flex-direction:column;cursor:pointer;transition:.15s}
#n-app .n-card:hover{box-shadow:0 10px 26px rgba(42,13,13,.09);transform:translateY(-2px)}
/* the picture box keeps its 4:3 height whether the picture has arrived or not:
   an absolutely placed image cannot grow the box, so nothing below it jumps
   while pictures load (that jump is what threw the chip strip off) */
#n-app .n-pic{position:relative;aspect-ratio:4/3;padding:0;overflow:hidden}
#n-app .n-pic img{position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain !important}
#n-app .n-body{padding:0 15px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
#n-app .n-name{font-size:17px;font-weight:800;line-height:1.2}
#n-app .n-desc{font-size:14px;font-weight:600;color:var(--soft);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#n-app .n-prices{margin-top:auto;display:flex;align-items:baseline;gap:9px;padding-top:6px}
#n-app .n-now{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700}
#n-app .n-was{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--sale);text-decoration:line-through}
#n-app .n-add{height:48px;background:var(--dark);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
#n-app .n-add:hover{background:var(--acc)}
@media (max-width:640px){
  #n-app .n-wrap{padding:0 14px}
  #n-app .n-main{padding:16px 14px 90px}
  #n-app .n-desc{display:none}
  #n-app .n-name{font-size:15px}
  #n-app .n-now{font-size:18px}
  #n-app .n-add{height:44px;font-size:14px}
  #n-app .n-body{padding:0 12px 11px}
  #n-app .n-h2{font-size:22px !important;margin:26px 0 12px !important}
  #n-app .n-search{height:48px;padding:0 13px;margin-bottom:14px}
  #n-app .n-chips.n-open{left:14px;right:14px}
}

/* basket column */
#n-app .n-side{position:sticky;top:78px;background:var(--sf);border:1px solid var(--line)}
#n-app .n-side .n-head{padding:15px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;font-size:18px;font-weight:900}
#n-app .n-lines{max-height:46vh;overflow:auto}
#n-app .n-line{display:grid;grid-template-columns:44px 1fr auto;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
#n-app .n-line img{width:44px;height:44px}
#n-app .n-line .n-nm{font-size:14px;font-weight:800;line-height:1.25}
#n-app .n-step{display:inline-flex;align-items:center;gap:9px;margin-top:7px}
#n-app .n-step button{width:28px;height:28px;border-radius:50%;background:var(--dark);color:#fff;font-weight:900;display:grid;place-items:center}
#n-app .n-step span{font-family:'JetBrains Mono',monospace;font-weight:700;min-width:16px;text-align:center}
#n-app .n-amt{font-family:'JetBrains Mono',monospace;font-weight:700}
#n-app .n-sums{padding:14px 16px;border-top:1px solid var(--line);display:grid;gap:9px}
#n-app .n-sums .n-r{display:flex;justify-content:space-between;font-weight:700;font-size:15px}
#n-app .n-bag{display:flex;gap:11px;align-items:center;background:#FDF3E8;border-left:4px solid var(--acc);padding:11px 13px;width:100%;text-align:left}
#n-app .n-bag img{width:34px;height:34px;flex:0 0 auto}
#n-app .n-bag .n-t{flex:1;font-size:14px;font-weight:800}
#n-app .n-bag .n-t small{display:block;font-weight:600;color:var(--soft)}
#n-app .n-total{display:flex;justify-content:space-between;font-size:19px;font-weight:900}
#n-app .n-pay{margin:0 16px 16px;height:54px;width:calc(100% - 32px);background:var(--acc);color:#fff;font-weight:900;font-size:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px}
#n-app .n-pay:hover{background:var(--acc2)}
#n-app .n-empty{padding:40px 20px;text-align:center;color:var(--soft);font-weight:700;line-height:1.6}

/* the phone's bar */
#n-app .n-mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:12px;background:var(--dark);color:#fff;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
#n-app .n-mbar.n-on{display:flex}
#n-app .n-mbar .n-go{background:var(--acc);padding:10px 15px;font-weight:900;margin-left:auto}
@media (min-width:1101px){ #n-app .n-mbar{display:none !important} }

/* choosing a dish */
#n-app .n-modal{position:fixed;inset:0;z-index:1200;display:none;background:rgba(42,13,13,.55)}
#n-app .n-modal.n-on{display:block}
#n-app .n-box{position:absolute;background:var(--sf);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:721px){ #n-app .n-box{top:50%;left:50%;transform:translate(-50%,-50%);width:620px;max-width:calc(100vw - 48px);max-height:88vh} }
@media (max-width:720px){ #n-app .n-box{left:0;right:0;bottom:0;max-height:92vh;border-top:3px solid var(--acc)} }
#n-app .n-mtop{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
#n-app .n-mtop img{width:92px;height:92px;flex:0 0 auto}
#n-app .n-mtop h2{font-size:21px !important;line-height:1.15;margin-bottom:4px !important}
#n-app .n-mtop p{margin:0;font-size:14px;font-weight:600;color:var(--soft);line-height:1.4}
#n-app .n-x{margin-left:auto;width:34px;height:34px;border-radius:50%;background:#F3E9DF;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
#n-app .n-mbody{overflow:auto}
#n-app .n-gt{position:sticky;top:0;background:var(--bg);border-block:1px solid var(--line);padding:11px 18px;display:flex;align-items:center;gap:10px;z-index:2}
#n-app .n-gt b{font-size:16px;font-weight:900}
#n-app .n-gt span{font-size:13px;font-weight:700;color:var(--soft)}
#n-app .n-badge{margin-left:auto;font-size:11px;font-weight:900;letter-spacing:.6px;padding:4px 8px;background:#EFE3D6}
#n-app .n-badge.n-req{background:var(--acc);color:#fff}
#n-app .n-opt{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);width:100%;text-align:left}
#n-app .n-opt:hover{background:#FFF9F2}
#n-app .n-mark{width:23px;height:23px;border:2px solid var(--line);display:grid;place-items:center;flex:0 0 auto;font-weight:900;color:#fff;font-size:13px}
#n-app .n-mark.n-round{border-radius:50%}
#n-app .n-opt[aria-checked=true] .n-mark{background:var(--acc);border-color:var(--acc)}
#n-app .n-opt .n-nm2{flex:1;font-size:16px;font-weight:700}
#n-app .n-opt .n-pl{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--soft)}
#n-app .n-note{padding:16px 18px;border-bottom:1px solid var(--line)}
#n-app .n-note label{display:block;font-size:12px;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
#n-app .n-note textarea{width:100%;min-height:70px;border:1px solid var(--line);padding:11px;font:inherit;font-size:15px;font-weight:600;color:var(--ink)}
#n-app .n-mfoot{display:flex;align-items:center;gap:13px;padding:13px 18px;border-top:1px solid var(--line);padding-bottom:calc(13px + env(safe-area-inset-bottom))}
#n-app .n-mfoot .n-step button{width:38px;height:38px}
#n-app .n-addbtn{flex:1;height:54px;background:var(--acc);color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center}
#n-app .n-addbtn:disabled{background:#E8D6C6;color:#9C8676}

/* the site's cart drawer, opened from this page: its button is orange, so its text is white */
.el-drawer.drawer-preview-cart .btn-green,
.el-drawer.drawer-preview-cart .btn-green:hover,
.el-drawer.drawer-preview-cart .btn-green *{color:#fff !important;-webkit-text-fill-color:#fff !important;border-radius:0 !important}
.el-drawer.drawer-preview-cart .btn-green{background:#f17d00 !important;border-color:#f17d00 !important;font-weight:900}
.el-drawer.drawer-preview-cart .btn-green:hover{background:#d46f00 !important;border-color:#d46f00 !important}

/* option groups fold: the header is the handle, the picks are summarised on it */
#n-app .n-gt{width:100%;text-align:left;cursor:pointer}
#n-app .n-grp[data-open="false"] .n-opts{display:none}
#n-app .n-gt .n-sum{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
#n-app .n-gt .n-sum:empty{display:none}
#n-app .n-gt .n-chev{font-weight:900;font-size:22px;line-height:1;color:var(--soft);transition:transform .15s;flex:0 0 auto}
#n-app .n-grp[data-open="true"] .n-gt .n-chev{transform:rotate(90deg)}
#n-app .n-grp.n-has .n-gt .n-badge{display:none}
@media (max-width:640px){ #n-app .n-grp.n-has .n-gt .n-hint{display:none} #n-app .n-gt{padding:12px 14px} }
#n-app .n-line .n-nt{font-size:13px;font-weight:600;color:var(--soft);font-style:italic;margin-top:2px}
#n-app .n-note textarea:focus{outline:0;border-color:var(--acc)}

/* the category sheet on a phone: every category, one row each, the current one dark */
#n-app .n-sheet .n-mbody{max-height:70vh;overflow:auto}
#n-app .n-catrow{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);font-size:16px;font-weight:800;color:var(--ink);background:var(--sf)}
#n-app .n-catrow span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:700;color:var(--soft)}
#n-app .n-catrow[aria-current="true"]{background:var(--dark);color:#fff}
#n-app .n-catrow[aria-current="true"] span{color:#F3E6D8}
@media (max-width:640px){ #n-app .n-chips.n-open{position:static;max-height:none;box-shadow:none;border:0;padding:0} }