@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Lobster+Two:ital,wght@1,700&family=Yellowtail&display=swap');
:root{
  --navy:#0A113D; --navy2:#151E56; --ink:#12131A; --ink2:#3C3F4A; --muted:#74767F;
  --paper:#F2F1EC; --card:#FFFFFF; --line:#E3E1D9; --line2:#CBC8BE;
  --pine:#1B5138; --pine-soft:#E4EDE7; --green-lt:#5FBE8C; --brass:#9C7B33; --brass-soft:#F4EDDC;
  --claret:#8A2B32; --claret-soft:#F7E7E6;
  --d:'Cormorant Garamond',Georgia,serif; --b:'Inter',system-ui,sans-serif; --m:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--b);-webkit-font-smoothing:antialiased}
input,select,textarea,button{font-family:var(--b)}
h1,h2,h3{margin:0;font-family:var(--d);font-weight:500;letter-spacing:-.01em}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:12px} .nowrap{white-space:nowrap} a{color:inherit}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes grow{from{width:0}}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.fade{animation:fadeIn .35s ease both}
.fade-up{animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both}

.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted);animation:fadeIn .4s both}
.logo{display:block;border-radius:2px;flex:0 0 auto}
.logo-key{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.santa{display:block;animation:sway 6s ease-in-out infinite;transform-origin:50% 90%}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 20px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.topbar.staff{background:var(--navy);border-bottom-color:var(--navy)}
.topbar.staff .navlink,.topbar.staff .icon-btn,.topbar.staff .wordmark,.topbar.staff .brand-sub,.topbar.staff .whoami{color:#fff}
.topbar.staff .brand-sub{opacity:.6}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer;line-height:1.15}
.wordmark{display:block;font-family:var(--d);font-size:20px;font-weight:500}
.brand-sub{display:block;font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.topnav{display:flex;align-items:center;gap:2px}
.navlink{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--ink2);padding:8px 11px;border-radius:6px;
  cursor:pointer;font-size:13.5px;transition:background .15s,color .15s}
.navlink:hover{background:rgba(0,0,0,.06)}
.topbar.staff .navlink:hover{background:rgba(255,255,255,.13)}
.navlink.on{background:var(--navy);color:#fff;font-weight:500}
.topbar.staff .navlink.on{background:#fff;color:var(--navy)}
.whoami{font-size:12px;color:var(--muted);padding-left:10px;margin-left:6px;border-left:1px solid var(--line2)}
.icon-btn{background:none;border:0;color:var(--ink2);cursor:pointer;padding:7px;border-radius:6px;display:inline-grid;place-items:center;transition:background .15s}
.icon-btn:hover{background:rgba(0,0,0,.07)} .icon-btn:disabled{opacity:.3;cursor:not-allowed}
.cart-btn{position:relative;background:var(--navy);border:0;color:#fff;width:36px;height:36px;border-radius:6px;cursor:pointer;display:grid;place-items:center}
.cart-btn.bump{animation:bump .42s ease}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--claret);color:#fff;font-family:var(--m);font-size:10px;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.previewbar{background:var(--brass);color:#fff;font-size:12.5px;padding:7px 20px;display:flex;gap:12px;align-items:center;justify-content:center}
.previewbar button{background:rgba(255,255,255,.22);border:0;color:#fff;padding:4px 10px;border-radius:5px;cursor:pointer;font-size:12px}

/* layout */
.wrap{max-width:1160px;margin:0 auto;padding:24px 20px 130px}
.wrap.narrow{max-width:660px}
.shophero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px 0 22px;border-bottom:1px solid var(--line2)}
.shophero h1{font-size:clamp(26px,3.6vw,40px);line-height:1.02;margin:8px 0 10px;letter-spacing:-.015em;max-width:15ch}
.shophero .lede{max-width:44ch;font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0}
.eyebrow{font-family:var(--m);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);margin:0}
.page-h{font-size:30px;margin:18px 0 5px;display:flex;align-items:center;gap:10px}
.cityflag{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--navy);padding:3px 7px;border-radius:4px}
.page-sub{color:var(--muted);margin:0 0 16px;font-size:14px}
.sec-h{font-family:var(--b);font-size:13px;font-weight:600;margin:22px 0 10px;display:flex;align-items:center;gap:7px}
.back{background:none;border:0;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:8px 0;font-size:13px}
.back:hover{color:var(--ink)}
.linkish{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;font-size:13px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.center{justify-content:center}
.stepmark{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:14px;font-weight:600;flex-wrap:wrap}
.stepmark i{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-style:normal;font-family:var(--m);font-size:11px;flex:0 0 auto}

/* tabs, chips */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line2);margin:18px 0 14px;overflow-x:auto}
.tab{background:none;border:0;padding:10px 13px;cursor:pointer;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.cat-blurb{margin:0 0 18px;font-size:13px;color:var(--muted)}
.citytabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.citytab{background:#fff;border:1px solid var(--line2);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:14px;display:inline-flex;gap:8px;align-items:center;transition:.15s}
.citytab span{font-family:var(--m);font-size:10.5px;color:var(--muted);background:var(--paper);border-radius:999px;padding:1px 6px}
.citytab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.citytab.on span{background:rgba(255,255,255,.18);color:#fff}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(174px,1fr));gap:8px}
.chip{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;text-align:left;line-height:1.3;transition:.15s}
.chip:hover:not(:disabled){border-color:var(--line2);transform:translateY(-1px)}
.chip strong{display:block;font-size:14px}
.chip span{display:block;font-size:11px;color:var(--muted)}
.chip-meta{font-size:10px !important;margin-top:3px}
.chip-meta.ok{color:var(--pine) !important} .chip-meta.warn{color:var(--brass) !important} .chip-meta.bad{color:var(--claret) !important}
.chip.on{border-color:var(--navy);background:#EEF0F8;box-shadow:inset 0 0 0 1px var(--navy)}
.chip.is-off{opacity:.45;cursor:not-allowed}
.legend{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);font-weight:400}
.legend .tile{width:10px;height:10px;animation:none}

/* catalogue */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(10,17,61,.09)}
.card.in-cart{border-color:var(--navy)}
.incart-flag{position:absolute;top:9px;right:9px;z-index:2;background:var(--navy);color:#fff;font-family:var(--m);font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 7px;border-radius:4px;animation:pop .3s ease both}
.card h3{font-size:17px;line-height:1.18}
.card-body{padding:12px 13px 4px;cursor:pointer;flex:1}
.cut{font-family:var(--m);font-size:10.5px;color:var(--muted);margin:5px 0 0}
.card-foot{padding:10px 13px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-family:var(--m);font-weight:600;font-size:14.5px}
.thumb{position:relative;overflow:hidden;border-bottom:1px solid var(--line);cursor:pointer;background:#F6F4EE}
.thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.illus{width:100%;display:block;aspect-ratio:4/3}
.thumb-wide .illus,.thumb-wide img{aspect-ratio:16/7}
.thumb-slot{position:absolute;left:9px;bottom:9px;background:var(--navy);color:#fff;font-family:var(--m);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:3px}
.detailmeta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.detailmeta .cut{margin:0}
.includes-list{margin:6px 0 14px;padding-left:18px;color:var(--ink2);font-size:14px;line-height:1.7}
.choicehint{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--brass);margin:4px 0}
.choiceline{display:block;font-style:normal;font-size:11px;color:var(--brass)}
.codeline{display:block;font-style:normal;font-size:10px;color:var(--muted)}
.choicegroup{margin-bottom:14px}
.choiceopts{display:grid;gap:7px}
.choiceopt{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line2);
  border-radius:8px;padding:12px 14px;cursor:pointer;font-size:14px;text-align:left;transition:.15s}
.choiceopt:hover{border-color:var(--navy)}
.choiceopt.on{border-color:var(--navy);background:#EEF0F8;box-shadow:inset 0 0 0 1px var(--navy);font-weight:600}
.choiceedit{background:var(--paper);border-radius:8px;padding:10px;margin-bottom:8px}
.choiceedit .row-inline{margin-bottom:6px}

/* oven rail */
.rail-wrap{display:flex;flex-direction:column;gap:16px}
.rail-label{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:7px;display:flex;gap:9px;align-items:baseline}
.rail-label span{color:var(--muted);letter-spacing:.04em}
.rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:9px}
.ticket{position:relative;display:block;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:10px 11px 9px 15px;cursor:pointer;overflow:hidden;transition:transform .14s,box-shadow .14s,border-color .14s;font:inherit;color:inherit}
.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:repeating-linear-gradient(to bottom,var(--line2) 0 3px,transparent 3px 7px)}
.ticket:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,17,61,.1);border-color:var(--line2)}
.ticket.is-sel{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.ticket.is-sel::before{background:var(--navy)}
.ticket.is-off{opacity:.5;cursor:not-allowed;background:repeating-linear-gradient(45deg,#F5F4EF 0 6px,#EEEDE6 6px 12px)}
.ticket-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.ticket-time{font-family:var(--m);font-weight:600;font-size:15px}
.ticket-pick{background:var(--navy);color:#fff;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;animation:pop .25s both}
.tray{display:flex;flex-wrap:wrap;gap:3px;min-height:20px;margin-bottom:7px}
.tile{width:12px;height:12px;border-radius:2px;border:1px solid var(--line2);background:#fff;display:block;animation:pop .3s ease both}
.tile.taken{background:var(--navy);border-color:var(--navy)}
.tile.blocked{background:repeating-linear-gradient(45deg,var(--claret) 0 2px,transparent 2px 4px);border-color:var(--claret)}
.tile.aim{background:var(--brass);border-color:var(--brass)}
.ticket-foot{font-size:11px;display:block}
.ticket-foot .ok{color:var(--pine)} .ticket-foot .warn{color:var(--brass);font-weight:600} .ticket-foot .off{color:var(--claret)}
.ticket-van{font-size:10px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:4px}

/* calendar */
.cal{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head strong{font-family:var(--d);font-size:22px;font-weight:500}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{margin-bottom:5px}
.cal-dow span{text-align:center;font-family:var(--m);font-size:10px;color:var(--muted)}
.cal-day{position:relative;aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:2px;transition:.14s;font:inherit;color:inherit}
.cal-day:hover:not(:disabled){transform:translateY(-2px);border-color:var(--navy);box-shadow:0 4px 12px rgba(10,17,61,.1)}
.cal-n{font-size:14px;font-weight:500}
.cal-bar{width:62%;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.cal-bar i{display:block;height:100%;background:var(--pine);animation:grow .5s ease both}
.cal-left{font-size:9px;color:var(--muted)}
.cal-day.is-mid .cal-bar i{background:var(--brass)}
.cal-day.is-low .cal-bar i{background:var(--claret)}
.cal-day.is-none,.cal-day.is-out{opacity:.4;cursor:not-allowed;background:var(--paper)}
.cal-day.is-out{border-style:dashed}
.cal-day.is-sel{background:var(--navy);border-color:var(--navy);color:#fff}
.cal-day.is-sel .cal-left{color:rgba(255,255,255,.7)}
.cal-day.is-sel .cal-bar{background:rgba(255,255,255,.25)}
.cal-key{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:10.5px;color:var(--muted);align-items:center}
.cal-key span{display:inline-flex;align-items:center;gap:5px}
.cal-key .k{width:16px;height:3px;border-radius:2px;background:var(--line)}
.cal-key .k.good{background:var(--pine)} .cal-key .k.mid{background:var(--brass)}
.cal-key .k.low{background:var(--claret)} .cal-key .k.none{background:var(--line2)}
.cal-key .k.early{background:repeating-linear-gradient(45deg,var(--line2) 0 2px,transparent 2px 4px)}
.cal-day.is-early{opacity:.5;cursor:not-allowed;background:repeating-linear-gradient(45deg,#F5F4EF 0 5px,#EAE9E2 5px 10px)}
.cal-day.is-early .cal-bar,.cal-day.is-early .cal-left{visibility:hidden}
.stepnote{font-weight:400;font-size:12px;color:var(--muted)}
.leadnote{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--brass);margin:10px 0 0}
.leadrow{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;flex-wrap:wrap}
.leadrow span:first-child{flex:1;min-width:150px;font-weight:500}
.leadrow .muted{font-size:11.5px}
.leadadd{margin-top:12px}
.leadadd input[type=date]{flex:1} .leadadd input[type=number]{width:80px}
.cal-key-note{margin-left:auto;font-style:italic}

/* sticky */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--navy);color:#fff;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px;animation:slideIn .3s ease both}
.stickybar .muted{color:rgba(255,255,255,.62)}
.stickybar .btn{background:#fff;color:var(--navy)}

/* panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:18px}
.panel.tight{padding:8px 14px}
.line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.line:last-child{border-bottom:0}
.line.total{border-top:1px solid var(--navy);border-bottom:0;margin-top:6px;padding-top:11px;font-weight:600;align-items:center}
.review-slot{display:flex;gap:11px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.review-slot span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.notice{background:var(--brass-soft);border-left:3px solid var(--brass);padding:10px 12px;font-size:13px;margin:12px 0;border-radius:0 5px 5px 0}
.errbox{background:var(--claret-soft);border-left:3px solid var(--claret);padding:10px 12px;font-size:13px;margin-bottom:12px}
.paynote{display:flex;gap:11px;background:#EEF0F8;border-radius:9px;padding:14px;margin-bottom:18px}
.paynote p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--ink2)}
.empty{padding:24px;text-align:center;color:var(--muted);font-size:14px}
.klabel{font-family:var(--m);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.klabel:first-child{margin-top:0}
.quote{border-left:2px solid var(--line2);padding-left:10px;font-style:italic;color:var(--ink2)}
.quote.warnq{border-color:var(--brass)}
.queue{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13.5px;cursor:pointer;transition:.12s}
.queue:last-child{border-bottom:0} .queue:hover{padding-left:5px}
.queue-r{display:flex;align-items:center;gap:8px;white-space:nowrap}
.citygroup{padding:6px 0}
.caprow{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.caprow-n{flex:0 0 128px}
.caprow-bar{flex:1;height:7px;background:var(--paper);border-radius:4px;overflow:hidden}
.caprow-bar i{display:block;height:100%;background:var(--pine);border-radius:4px;animation:grow .6s ease both}
.caprow-bar i.warm{background:var(--brass)} .caprow-bar i.hot{background:var(--claret)}
.caprow-v{flex:0 0 40px;text-align:right} .caprow-x{flex:0 0 56px;text-align:right;font-size:11px}
.loadbar{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;height:34px;margin-bottom:18px;overflow:hidden;display:flex;align-items:center}
.loadbar i{position:absolute;left:0;top:0;bottom:0;background:#E7EAF3;animation:grow .6s ease both}
.loadbar span{position:relative;padding:0 12px;font-size:12.5px;color:var(--ink2)}

/* forms */
.field{display:block;margin-bottom:13px}
.field-label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.field-hint{display:block;font-size:11px;color:var(--muted);margin-top:4px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:6px;background:#fff;font-size:14px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
input:disabled,select:disabled{background:var(--paper);color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row-inline{display:flex;gap:8px;align-items:center}
.modeswitch{display:inline-flex;background:#fff;border:1px solid var(--line2);border-radius:8px;padding:3px;gap:3px}
.modeswitch button{display:flex;align-items:center;gap:6px;background:none;border:0;padding:9px 15px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--muted);transition:.15s}
.modeswitch button.on{background:var(--navy);color:#fff}
.artpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;margin-bottom:14px}
.artopt{padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;background:none;transition:.15s}
.artopt:hover{transform:translateY(-2px)}
.artopt.on{border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:7px;cursor:pointer;
  font-weight:600;font-size:13.5px;padding:10px 16px;background:var(--navy);color:#fff;transition:transform .12s,opacity .12s;text-decoration:none}
.btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-lg{padding:13px 20px;font-size:15px;width:100%}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn-danger{background:var(--claret)}
.tag{display:inline-block;font-family:var(--m);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;background:var(--paper);color:var(--ink2);white-space:nowrap;border:1px solid var(--line)}
.tag-ok{background:var(--pine-soft);color:var(--pine);border-color:transparent}
.tag-warn{background:var(--brass-soft);color:var(--brass);border-color:transparent}
.tag-bad{background:var(--claret-soft);color:var(--claret);border-color:transparent}
.tag-info{background:#E7EAF3;color:var(--navy);border-color:transparent}
.stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line2);border-radius:7px;padding:2px;background:#fff}
.stepper button{background:none;border:0;cursor:pointer;padding:5px;display:grid;place-items:center;color:var(--ink);border-radius:4px}
.stepper button:hover:not(:disabled){background:var(--paper)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper span{font-family:var(--m);font-size:13px;min-width:22px;text-align:center}

/* modal, drawer, toast */
.scrim{position:fixed;inset:0;background:rgba(10,17,61,.45);z-index:60;display:flex;justify-content:center;align-items:center;
  padding:20px;animation:fadeIn .18s both;backdrop-filter:blur(2px)}
.sheet{background:var(--card);border-radius:12px;max-width:580px;width:100%;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;overflow:hidden;animation:sheetIn .25s cubic-bezier(.2,.7,.3,1) both}
.sheet-wide{max-width:860px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--card);flex:0 0 auto}
.sheet-head h3{font-size:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-head .icon-btn{flex:0 0 auto;background:var(--paper)}
.sheet-body{padding:18px;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.drawer{background:var(--card);width:100%;max-width:430px;margin-left:auto;height:100%;max-height:100vh;
  display:flex;flex-direction:column;border-radius:0;animation:slideIn .25s ease both}
.cartline{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cartline .thumb{width:58px;flex:0 0 58px;border-radius:6px;border:1px solid var(--line)}
.cartline .thumb-slot{display:none}
.cartline-mid{flex:1;line-height:1.35}
.cartline-mid strong{display:block;font-size:13.5px}
.cartline-mid .mono{font-size:12px;color:var(--muted)}
.slotnote{display:block;font-size:9.5px;font-family:var(--m);color:var(--brass);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;padding:0 12px}
.toast{background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);animation:slideIn .25s ease both;text-align:center}
.toast-bad{background:var(--claret)}

/* tables */
.table-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:18px}
.table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.table th{text-align:left;font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:11px 13px;border-bottom:1px solid var(--line2);font-weight:500;white-space:nowrap}
.table td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.table tbody tr{cursor:pointer;transition:background .12s}
.table tbody tr:hover{background:#FAF9F5}
.table tbody tr:last-child td{border-bottom:0}
.row-late{background:#FDF8EE} .row-urgent{background:#FCF0EF}
.cellwrap{max-width:230px;font-size:12px;color:var(--ink2)}
.rowacts{display:flex;gap:2px}
.flagmark{color:var(--brass);margin-left:4px;vertical-align:-1px}
.modepill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;white-space:nowrap}
.minithumb{display:block;width:42px;height:32px;border-radius:5px;overflow:hidden;background:#F6F4EE}
.minithumb img{width:100%;height:100%;object-fit:cover}
.minithumb .illus{height:100%;aspect-ratio:auto}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
.toolbar select{width:auto}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filters select,.filters input[type=date]{width:auto;font-size:12.5px;padding:8px 10px}
.search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line2);border-radius:6px;padding:0 11px;flex:1;min-width:190px}
.search input{border:0;padding:9px 0} .search input:focus{outline:0}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:14px;animation:fadeUp .4s both}
.stat span{display:block;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.stat small{color:var(--muted);font-size:11.5px}
.stat em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px}
.stat-warn{border-left:3px solid var(--brass)} .stat-bad{border-left:3px solid var(--claret)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.detail-grid p{margin:0 0 10px;font-size:14px;line-height:1.55}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.timeline{list-style:none;margin:0;padding:0;font-size:13px}
.timeline li{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.timeline .mono{color:var(--muted);font-size:11px;flex:0 0 108px}
.timeline em{color:var(--muted);font-style:normal;font-size:11px}
.resched{background:var(--paper);border-radius:8px;padding:13px;margin-bottom:6px}
.resched .btn{margin-top:11px}

/* store */
.storehead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.storehead select{width:auto}
.dayline{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.dayline input{width:auto}
.daylabel{font-family:var(--d);font-size:19px}
.hourrow{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:flex-start;font-size:13px}
.hourrow-t{flex:0 0 52px;font-weight:600}
.hourrow-b{flex:1;display:flex;flex-direction:column;gap:4px}
.hourrow-o{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.blocked-note{color:var(--claret);font-size:12px}
.hourrow-c{flex:0 0 46px;text-align:right;color:var(--muted)}

/* orders / email */
.order-card{padding:14px;animation:fadeUp .4s both}
.order-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.order-slot{font-size:13px;color:var(--ink2);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.email{border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff;margin:14px 0}
.email-top{display:flex;align-items:center;gap:12px;padding:16px;background:var(--navy);color:#fff}
.email-top strong{display:block;font-family:var(--d);font-size:19px;font-weight:500}
.email-top span{font-size:10px;color:rgba(255,255,255,.68);font-family:var(--m);letter-spacing:.1em;text-transform:uppercase}
.email-body{padding:18px}
.email-h{font-family:var(--b);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.email-body p{font-size:14px;line-height:1.55;margin:0 0 12px}
.email-slot{display:flex;gap:24px;flex-wrap:wrap;background:#EEF0F8;border-radius:8px;padding:12px 14px;margin-bottom:14px}
.email-slot .klabel{margin:0 0 3px}
.email-store{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:10px}
.email-store p{margin:2px 0;font-size:13px}
.maplink{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--navy);font-weight:600;margin-top:6px;text-decoration:underline}
.email-note{background:var(--brass-soft);padding:10px 12px;border-radius:6px;font-size:12.5px !important;margin-top:12px !important}
.email-foot{font-size:11.5px !important;color:var(--muted);text-align:center;margin:14px 0 0 !important}

.confirm-body{font-size:14.5px;line-height:1.6;margin:0 0 14px}
.confirm-actions{justify-content:flex-end;margin-top:4px}
.csvbox{font-size:11px;line-height:1.5;white-space:pre;overflow-wrap:normal;overflow-x:auto}

/* the flight to the kitchen */
.flyingwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72vh;text-align:center}
.flyingsky{position:relative;width:100%;max-width:620px;height:220px;overflow:hidden;border-radius:14px;
  background:radial-gradient(120% 140% at 78% 22%, #1B2566 0%, var(--navy) 62%, #060B26 100%)}
.flyingsanta{position:absolute;top:8%;left:0;animation:crossSky 2.6s cubic-bezier(.36,.06,.42,1) both}
@keyframes crossSky{
  0%{transform:translate(-62%,26%) scale(.6);opacity:0}
  18%{opacity:1}
  100%{transform:translate(46%,-14%) scale(1.02);opacity:1}}
.flyingcopy{font-family:var(--d);font-size:30px;margin:22px 0 4px;animation:fadeUp .5s .5s both}
.flyingsub{color:var(--muted);font-size:14px;margin:0;animation:fadeUp .5s .9s both}
@media (prefers-reduced-motion:reduce){.flyingsanta{animation:none;position:relative;transform:none}}

/* done */
.done{text-align:center;padding:30px 0 6px}
.done-mark{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;margin:0 auto 16px;animation:pop .4s ease both}
.done h2{font-size:32px;margin-bottom:6px}
.done .big{font-size:20px;font-weight:600;margin:0 0 6px}
.done p{margin:0 0 8px;font-size:14px}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.login-art{position:relative;background:var(--navy);color:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:6px;animation:fadeIn .5s both;overflow:hidden}
.login-art::after{content:"";position:absolute;inset:auto -60px -120px auto;width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.035)}
.login-art .flight{margin:6px 0 4px;position:relative}
.login-art h1{font-size:clamp(28px,3.2vw,40px);line-height:1.02;margin:8px 0 8px;letter-spacing:-.015em;max-width:12ch}
.login-art .lede{color:rgba(255,255,255,.72);font-size:14.5px;margin:0}
.proto-note{color:rgba(255,255,255,.5);font-size:11.5px;line-height:1.5;margin:18px 0 0;max-width:38ch;
  border-top:1px solid rgba(255,255,255,.15);padding-top:12px}
.login-form{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;max-width:470px;animation:fadeUp .5s both}
.login-form .tabs{margin-top:0}
.demo-users{display:grid;gap:6px}
.demo-user{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:7px;padding:9px 12px;cursor:pointer;line-height:1.3;transition:.15s}
.demo-user strong{display:block;font-size:13px}
.demo-user span{font-size:11px;color:var(--muted)}
.demo-user:hover{border-color:var(--navy);transform:translateX(2px)}


/* headline lockup */
.kt{font-family:'Lobster Two','Yellowtail',cursive;font-style:italic;font-weight:700;line-height:1.02;
  letter-spacing:0;display:block;margin:0}
.kt em{font-style:italic;display:block;color:var(--green-lt);font-size:1.1em;line-height:1}
.login-art .kt{font-size:clamp(30px,4.6vw,52px)}
.login-head{display:flex;align-items:center;gap:22px;margin-bottom:6px}
.login-head .logo{flex:0 0 auto}
.kt-sm{font-size:19px;margin:0;line-height:1}
.kt-sm em{color:var(--pine)}
.flight{display:block;max-width:100%;height:auto}
.twinkle path{animation:twk 3.4s ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.twinkle path{transform-box:fill-box;transform-origin:center}

/* safe space around fixed actions */
.stickybar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
.wrap{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.wrap.narrow .btn-lg{margin-bottom:8px}

/* clickable stats */
.stat{display:block;width:100%;text-align:left;font:inherit;color:inherit;position:relative}
.stat-click{cursor:pointer}
.stat-click:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,17,61,.08)}
.stat-go{position:absolute;top:14px;right:12px;color:var(--muted)}
.queue-ok{border-left:3px solid var(--pine);padding-left:9px}
.queue-warn{border-left:3px solid var(--brass);padding-left:9px}
.queue-bad{border-left:3px solid var(--claret);padding-left:9px}

/* actions and composer */
.actionbar select{flex:1}
.okbox{display:flex;align-items:center;gap:8px;background:var(--pine-soft);border-left:3px solid var(--pine);
  padding:10px 12px;font-size:13px;margin-bottom:12px;color:var(--pine)}
.composer{background:var(--paper);border-radius:9px;padding:14px;margin-top:10px}
.composer textarea{font-family:var(--m);font-size:12.5px;line-height:1.55}
.msglog{display:flex;flex-direction:column;gap:10px}
.msglog-row{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;background:var(--paper);border-radius:8px;padding:11px 13px}
.msglog-row strong{display:block;font-size:13.5px}
.msglog-row .mono{display:block;font-size:10.5px;margin:2px 0 6px}
.msglog-body{white-space:pre-wrap;font-size:12px;color:var(--ink2);margin:0;max-height:78px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent)}

/* customer message centre */
.msg-btn{position:relative;background:#fff;border:1px solid var(--line2);color:var(--ink);width:36px;height:36px;
  border-radius:6px;cursor:pointer;display:grid;place-items:center}
.msg-btn:hover{border-color:var(--navy)}
.msg{border-bottom:1px solid var(--line);padding:14px 0}
.msg:last-child{border-bottom:0}
.msg.unread{border-left:3px solid var(--navy);padding-left:11px}
.msg-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}
.msg-head strong{font-size:14px;line-height:1.3}
.msg-head .mono{font-size:10.5px;color:var(--muted);white-space:nowrap}
.msg-body{white-space:pre-wrap;font-size:13px;line-height:1.6;color:var(--ink2);margin:0 0 8px}
.msg-foot{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}

/* product photo */
.photofield{display:grid;grid-template-columns:200px 1fr;gap:16px;margin-bottom:14px}
.photoprev{position:relative;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:#F6F4EE;align-self:start}
.photoprev img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.photoprev-tag{position:absolute;left:8px;bottom:8px;background:var(--ink2);color:#fff;font-family:var(--m);font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:3px}
.hidden-file{display:none}

@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .login-art{padding:26px 20px 22px;align-items:center;text-align:center}
  .login-art .kt{font-size:32px}
  .login-head{gap:16px}
  .login-head .logo{width:92px !important;height:92px !important}
  .login-art h1{max-width:none}
  .login-form{padding:26px 24px;max-width:none}
  .detail-grid,.two-col{grid-template-columns:1fr;gap:14px}
  .photofield{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wrap{padding:18px 14px 130px}
  .row2,.row3{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr 1fr;gap:7px}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .chips{grid-template-columns:1fr 1fr}
  .card h3{font-size:15px}
  .page-h{font-size:24px}
  .brand{gap:8px}
  .kt-sm{font-size:15.5px}
  .brand .santa{height:38px}
  .logo{width:38px !important;height:38px !important}
  .actions .btn{flex:1 1 auto;min-height:44px}
  .msglog-row{flex-direction:column;gap:8px}
  .statrow{grid-template-columns:1fr 1fr}
  .navlink{padding:8px 8px;font-size:12.5px}
  .navlink svg{display:none}
  .whoami{display:none}
  .stickybar{font-size:12px;padding:10px 14px}
  .scrim{padding:0;align-items:stretch}
  .sheet{border-radius:0;max-height:100vh;height:100%}
  .cal-day{aspect-ratio:auto;min-height:50px}
  .cal-left{display:none}
  .cal-key-note{margin-left:0;width:100%}
  .filters select,.filters input[type=date]{flex:1 1 44%}
  .caprow-n{flex:0 0 90px;font-size:12px}
  .caprow-x{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* ── deployed build additions ───────────────────────────────── */
.ico{flex:0 0 auto}
.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:14px;
  color:var(--muted);font-family:var(--b);text-align:center;padding:24px}
.boot p{margin:0;font-size:14px}
.boot-mark{width:60px;height:60px;border-radius:3px;background:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);animation:fadeIn .6s both}
.rail-loading{padding:22px;text-align:center;color:var(--muted);font-size:13.5px;
  background:var(--card);border:1px dashed var(--line2);border-radius:10px}
.cal.is-loading{opacity:.55;pointer-events:none}
.photoctl{min-width:0}
.stat:disabled{cursor:default}
.leadrow .icon-btn{margin-left:auto}
.msg-btn .ico{pointer-events:none}
.whoami em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.boot .actions{margin-top:10px}

/* ═══════════════════════════════════════════════════════════════
   Added: open shop, clearer forms, account and staff passwords
   ═══════════════════════════════════════════════════════════════ */

/* the shop header — brand on the left, actions on the right, one row */
.topbar.shop{flex-wrap:nowrap;gap:10px}
.topbar.shop .brand{flex:1 1 auto;min-width:0}
.topbar.shop .topnav{flex:0 0 auto;gap:6px}
.brand-santa{display:inline-flex;align-items:center}
.acct-btn{border:1px solid var(--line2);width:36px;height:36px;border-radius:6px}
.msg-btn{position:relative;background:none;border:1px solid var(--line2);color:var(--ink2);
  width:36px;height:36px;border-radius:6px;cursor:pointer;display:grid;place-items:center}
.msg-btn:hover{background:rgba(0,0,0,.05)}

/* required fields, and what is still missing */
.req-mark{float:right;font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500}
.field-bad input,.field-bad textarea,.field-bad select{border-color:var(--claret);background:var(--claret-soft)}
.field-bad input:focus,.field-bad textarea:focus{outline:2px solid var(--claret);outline-offset:1px}
.field-err{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--claret);margin-top:5px;font-weight:500}
.gapbox{display:flex;gap:10px;align-items:flex-start;background:var(--brass-soft);border-left:3px solid var(--brass);
  padding:11px 13px;margin-bottom:12px;font-size:13px}
.gapbox-live{background:var(--claret-soft);border-left-color:var(--claret)}
.gapbox ul{margin:5px 0 0;padding-left:17px}
.gapbox li{margin:2px 0}
.gapbox strong{font-weight:600}

/* account sheet */
.authlinks{margin-top:12px;text-align:center}
.acctlist{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.acctlist button{display:flex;align-items:center;gap:10px;background:none;border:0;border-top:1px solid var(--line);
  padding:14px 4px;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;width:100%}
.acctlist button:hover{background:rgba(0,0,0,.03)}
.acctlist .acct-out{color:var(--claret)}
.page-h.tight{margin-bottom:4px}

/* staff passwords */
.passrow{display:flex;gap:8px;align-items:center}
.passrow input{flex:1 1 auto}
.onceboard{background:var(--pine-soft);border-left:3px solid var(--pine);padding:14px;margin:12px 0}
.oncepass{font-size:19px;font-weight:600;letter-spacing:.04em;margin:6px 0 10px;word-break:break-all;color:var(--navy)}
.pwbanner{display:flex;align-items:center;gap:10px;background:var(--brass-soft);border-bottom:1px solid var(--brass);
  padding:10px 20px;font-size:13px}
.pwbanner button{background:var(--navy);border:0;color:#fff;padding:6px 12px;border-radius:5px;cursor:pointer;font-size:12.5px}

@media (max-width:620px){
  .topbar{flex-wrap:nowrap}
  .topbar.shop{padding:9px 12px;gap:8px}
  .topbar.shop .brand{gap:8px}
  .brand-santa{display:none}
  .wide-only{display:none}
  .topbar.shop .topnav{gap:7px}
  .topbar.shop .cart-btn,.topbar.shop .msg-btn,.topbar.shop .acct-btn{width:40px;height:40px}
  .kt-sm{font-size:16px}
  .pwbanner{padding:10px 14px;flex-wrap:wrap}
  .passrow{flex-direction:column;align-items:stretch}
}

/* ── confirmation panel: the two values were inheriting 16px ── */
.email-slot .slotval{display:block;font-size:14px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.email-slot>div{min-width:0}
@media (max-width:620px){
  .email-slot{gap:12px;flex-direction:column}
  .email-slot .slotval{font-size:13.5px}
}

/* ── the flight, on a phone ──────────────────────────────────────
   The scene is drawn at a fixed pixel size, which is wider than a
   phone. Sizing it to the sky instead means it can never sit off to
   one side where nobody can see it. */
@media (max-width:620px){
  .flyingwrap{min-height:auto;padding:22px 14px 0}
  .flyingsky{height:auto;aspect-ratio:44/26;border-radius:12px}
  .flyingsanta{top:0;left:0;right:0;width:100%}
  .flyingsanta .flight{width:100%;height:auto;display:block}
  .flyingcopy{font-size:24px;margin:18px 0 4px}
  .flyingsub{font-size:13px}
  .flyingsanta{animation:crossSkyPhone 2.6s cubic-bezier(.36,.06,.42,1) both}
}
@keyframes crossSkyPhone{
  0%{transform:translate(-18%,10%) scale(.82);opacity:0}
  25%{opacity:1}
  100%{transform:translate(4%,-2%) scale(1);opacity:1}}

/* If the phone is set to reduce motion, show the scene still and
   centred rather than hiding it. */
@media (prefers-reduced-motion:reduce){
  .flyingsanta{animation:none;position:absolute;top:0;left:0;right:0;width:100%;transform:none;opacity:1}
  .flyingsanta .flight{width:100%;height:auto;display:block}
}

/* ── message log: a summary that opens ── */
.msglog-main{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.msglog-sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.msglog-sub strong{font-size:13.5px}
.msglog-caret{flex:0 0 auto;color:var(--muted)}
.msglog-meta{display:block;font-size:10.5px;margin:3px 0 6px}
.msglog-body.full{max-height:none;overflow:visible}
.msglog-body.full::after{display:none}
.msglog-more{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--navy);font-weight:600;text-decoration:underline}
.msglog-row.is-open{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}

/* ── a flag that is already raised ── */
.flagnow{display:flex;gap:10px;align-items:flex-start;background:var(--brass-soft);border-left:3px solid var(--brass);
  padding:10px 12px;margin-bottom:10px;font-size:13px}
.flagnow p{margin:3px 0 0;color:var(--ink2)}
.flagnow strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--m)}
.flagnow .linkish{margin-left:auto;flex:0 0 auto;white-space:nowrap}

/* ── links inside messages ── */
.paybtn{display:inline-flex;align-items:center;gap:8px;background:var(--pine);color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:8px;font-size:14.5px;font-weight:600;margin:2px 0 12px}
.paybtn:hover{background:var(--pine-dk,#14523a)}
.msglink{color:var(--navy);text-decoration:underline;word-break:break-all}
.msglog-link{display:block;font-size:11px;color:var(--muted);font-family:var(--m);margin-top:6px;word-break:break-all}
@media (max-width:620px){ .paybtn{width:100%;justify-content:center;padding:14px 18px} }
.paystate{margin:4px 0 0;font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════════
   Added: categories, ordering, exporting, printing
   ═══════════════════════════════════════════════════════════════ */

/* a list you can put in order */
.reorder{list-style:none;margin:0 0 10px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.reorder-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:grab}
.reorder-row:last-child{border-bottom:0}
.reorder-row.dragging{opacity:.45;background:var(--brass-soft)}
.reorder-row:hover{background:rgba(0,0,0,.02)}
.reorder-grip{color:var(--muted);flex:0 0 auto;display:flex}
.reorder-num{flex:0 0 24px;font-size:11px;color:var(--muted)}
.reorder-main{flex:1 1 auto;min-width:0;font-size:13.5px}
.reorder-arrows{flex:0 0 auto;display:flex;gap:2px}
.reorder-save{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.reorder-prod{display:flex;align-items:center;gap:10px}
.reorder-cat{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.reorder-acts{flex:0 0 auto;display:flex;gap:2px}
.catcount{font-size:11px;font-family:var(--m)}
.page-h.flush{margin:0}

/* hour by hour, with what the kitchen actually needs */
.hourrow-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.hourrow-items{list-style:none;margin:5px 0 0;padding:0 0 0 2px}
.hourrow-items li{font-size:12.5px;padding:2px 0;color:var(--ink2)}
.optline{display:block;font-size:11.5px;color:var(--muted);padding-left:18px;font-style:normal}
.ovenmark{font-size:10.5px;font-family:var(--m);color:var(--muted);margin-left:6px;font-style:normal}
.hourrow-note{font-size:11.5px;color:var(--muted);margin-top:4px;font-style:italic}
.hourrow-o{padding:7px 0;border-bottom:1px dotted var(--line)}
.hourrow-o:last-child{border-bottom:0}

/* printing */
.printhead{display:none}
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .topbar,.tabs,.toolbar,.noprint,.storehead select,.foot,.toasts,.scrim{display:none !important}
  .printhead{display:block;font-size:15px;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid #000}
  .printwhen{float:right;font-size:11px;color:#555;font-weight:400}
  .wrap{padding:0;max-width:none}
  .panel{border:1px solid #999;break-inside:avoid;page-break-inside:avoid;margin-bottom:10px}
  .hourrow{break-inside:avoid;page-break-inside:avoid}
  .tag{border:1px solid #666;color:#000;background:none}
  .hourrow-items li,.optline,.hourrow-top{color:#000}
  a[href]:after{content:""}
}

/* ═══════════════════════════════════════════════════════════════
   Added: one-page shop, policy, templates, payment queues
   ═══════════════════════════════════════════════════════════════ */

/* the category bar that follows you down the page */
.cattabs{position:sticky;top:0;z-index:40;background:var(--paper);margin:0 -20px 6px;padding:0 20px;
  border-bottom:1px solid var(--line)}
.cattabs-inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cattabs-inner::-webkit-scrollbar{display:none}
.cattabs .tab{white-space:nowrap;flex:0 0 auto}
.catsection{scroll-margin-top:96px;padding-top:10px}
.catsection+.catsection{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.cat-h{font-family:var(--d);font-size:23px;font-weight:500;margin:0 0 2px;letter-spacing:-.01em}

/* cancellation policy */
.policy{font-size:12.5px;line-height:1.55;color:var(--ink2)}
.policy p{margin:0 0 8px}
.policy ul{margin:0 0 8px;padding-left:18px}
.policy li{margin:2px 0}
.policy-sm{font-size:12px}
.policybox{background:var(--sand,#f6f3ec);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.policybox summary{cursor:pointer;font-size:12px;font-family:var(--m);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink2);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.policybox summary::-webkit-details-marker{display:none}
.email-policy{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}

/* the two payment queues */
.sec-count{display:inline-block;margin-left:8px;background:var(--navy);color:#fff;border-radius:20px;
  padding:1px 9px;font-size:11.5px;font-family:var(--m);vertical-align:middle}
.sec-sub{font-size:12.5px;color:var(--muted);margin:-6px 0 8px}
.queue-since{display:block;font-size:11px;color:var(--muted);font-family:var(--m);margin-top:2px}
.sentnote{display:flex;gap:10px;align-items:flex-start;background:var(--pine-soft);border-left:3px solid var(--pine);
  padding:10px 12px;margin-bottom:10px;font-size:13px}
.sentnote strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--m)}
.sentnote p{margin:3px 0 0;color:var(--ink2)}
.actions.tightrow{margin-top:8px;gap:10px;align-items:center}

/* template editing */
.tplbox{font-family:var(--m);font-size:12px;line-height:1.6}
.mergehelp{margin:0 0 14px;font-size:12.5px}
.mergehelp summary{cursor:pointer;color:var(--navy);font-weight:600}
.mergehelp ul{list-style:none;margin:10px 0 0;padding:0;columns:2;column-gap:24px}
.mergehelp li{margin:0 0 5px;break-inside:avoid;font-size:11.5px}
.mergehelp code{font-size:11px;background:rgba(0,0,0,.05);padding:1px 4px;border-radius:3px}

@media (max-width:620px){
  .cattabs{margin:0 -14px 6px;padding:0 14px;top:0}
  .catsection{scroll-margin-top:80px}
  .cat-h{font-size:20px}
  .mergehelp ul{columns:1}
  .policybox{padding:11px 12px}
}

/* the tab bar sits under the header, whose height is measured at runtime */
.cattabs{top:var(--topbar-h,64px);z-index:30}
.catsection{scroll-margin-top:calc(var(--topbar-h,64px) + 58px)}
@media (max-width:620px){ .catsection{scroll-margin-top:calc(var(--topbar-h,58px) + 52px)} }

/* a closed order */
.frozen{display:flex;gap:10px;align-items:flex-start;background:rgba(0,0,0,.04);border-left:3px solid var(--muted);
  padding:11px 13px;margin-bottom:12px;font-size:13px;color:var(--ink2)}
.frozen strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--m);color:var(--ink)}
.frozen p{margin:3px 0 0}
.frozen-wide{margin-bottom:16px}

/* ── editing an order ── */
.editor{margin-bottom:16px}
.editlines{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff}
.editline{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.editline:last-child{border-bottom:0}
.editline.is-manual{background:var(--brass-soft)}
.editline-main{flex:1 1 auto;min-width:0;font-size:13px}
.editline-main strong{display:inline-block;margin-right:6px}
.editline-main em{display:block;font-size:11px;font-style:normal}
.editline-qty{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.editline-money{flex:0 0 auto;min-width:78px;text-align:right;font-size:13px}
.editadd{margin-bottom:14px}
.manualrow input{min-width:0}
.manualrow input:nth-child(1){flex:2 1 auto}
.manualrow input:nth-child(2),.manualrow input:nth-child(3){flex:0 0 92px}
.editsum{border-top:1px solid var(--line);padding-top:10px;margin-bottom:12px}
.editsum .over{color:var(--claret);font-weight:700}

/* money */
.balance{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;margin:0 0 12px}
.moneybox{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 13px;margin-bottom:10px}
.moneyrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0}
.moneyrow.strong{border-top:1px solid var(--line);margin-top:5px;padding-top:7px;font-weight:600}
.moneyrow.short span:last-child{color:var(--claret)}
.moneyrow.back span:last-child{color:var(--brass-dk,#8a6d1f)}
@media (max-width:620px){
  .editline{flex-wrap:wrap}
  .editline-main{flex:1 1 100%}
  .editline-money{margin-left:auto}
  .manualrow{flex-wrap:wrap}
  .manualrow input:nth-child(1){flex:1 1 100%}
}
.table td.num{text-align:right;white-space:nowrap}
.owe-short{color:var(--claret);font-weight:600}
.owe-back{color:var(--brass-dk,#8a6d1f);font-weight:600}
.ticket.is-now{opacity:.5;cursor:default;border-style:dashed}
.ticket-now{font-size:9px;font-family:var(--m);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* ── the one nudge before checkout ── */
.upsell{text-align:center;padding:6px 4px 2px}
.upsell h3{font-family:var(--d);font-size:26px;font-weight:500;margin:10px 0 8px;letter-spacing:-.01em}
.upsell p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0 auto 10px;max-width:36em}
.upsell-small{font-size:12.5px !important;color:var(--muted) !important;margin-bottom:18px !important}
.upsell-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.upsell-acts .btn{min-width:170px}
@media (max-width:620px){
  .upsell h3{font-size:22px}
  .upsell p{font-size:13.5px}
  .upsell-acts{flex-direction:column-reverse}
  .upsell-acts .btn{width:100%;min-width:0}
}

/* ── which hours a store hands out ── */
.hourpick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.hourchip{font-family:var(--m);font-size:12px;padding:7px 10px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line2);background:#fff;color:var(--muted);min-width:56px}
.hourchip:hover{border-color:var(--navy)}
.hourchip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
@media (max-width:620px){ .hourchip{min-width:0;flex:1 1 21%;padding:9px 4px} }

/* an hour a store no longer hands out, still showing because it holds an order */
.ticket.is-off .ticket-why{font-size:9.5px}

/* waiting on an email confirmation */
.checkmail{text-align:center;padding:8px 4px}
.checkmail h3{font-family:var(--d);font-size:22px;font-weight:500;margin:12px 0 8px}
.checkmail p{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 auto 10px;max-width:32em}
.checkmail .actions{justify-content:center;margin-top:14px}

/* discounts */
.line.saved span:last-child{color:var(--pine)}
.line.saved span:first-child{color:var(--pine)}
.codebox{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.codebox input{text-transform:uppercase;font-family:var(--m);font-size:13px}
.okline{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--pine);margin:6px 0 0;font-weight:600}

/* arriving from a password reset link */
.recoverwrap{padding-top:38px;max-width:520px}
.recoverhead{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.recoverhead .kt{font-size:26px}
@media (max-width:620px){ .recoverwrap{padding-top:24px} .recoverhead .kt{font-size:21px} }

/* ── going off to pay, and coming back ── */
.payleave{text-align:center;padding-top:40px}
.payresult{text-align:center;padding:6px 4px 2px}
.payresult h3{font-family:var(--d);font-size:24px;font-weight:500;margin:12px 0 8px}
.payresult p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0 auto 12px;max-width:34em}
.payresult .actions{justify-content:center;margin:16px 0 10px}
.payresult-tick,.payresult-cross{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%}
.payresult-tick{background:var(--pine-soft);color:var(--pine)}
.payresult-cross{background:var(--claret-soft);color:var(--claret)}

/* what the gateway did */
.attempts{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff}
.attempt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.attempt:last-child{border-bottom:0}
.attempt-n{flex:0 0 26px;color:var(--muted);font-size:11px}
.attempt-main{flex:1 1 auto;min-width:0}
.attempt-why,.attempt-ref{display:block;font-size:11px;color:var(--muted);font-style:normal;margin-top:2px}
.attempt-when{flex:0 0 auto;font-size:10.5px}
@media (max-width:620px){ .attempt{flex-wrap:wrap} .attempt-when{flex:1 1 100%;margin-top:3px} }

/* ── wider tables: the screen has room, use it ── */
.wrap.wide-table{max-width:1560px}
.table-scroll{margin-inline:-4px}
.table{width:100%;table-layout:auto}
.table th,.table td{padding:9px 10px}
@media (min-width:1100px){
  .table th,.table td{padding:10px 12px}
  .table td:first-child,.table th:first-child{padding-left:14px}
  .table td:last-child,.table th:last-child{padding-right:14px}
}

/* ── packing slips, one per order ── */
.slips{display:grid;gap:14px}
.slip{border:1px solid var(--line2);border-radius:10px;background:#fff;padding:14px 16px;break-inside:avoid}
.slip-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:10px;border-bottom:2px solid var(--navy);margin-bottom:10px}
.slip-time{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-right:12px}
.slip-id{font-size:15px}
.slip-mode{text-align:right;font-family:var(--m);font-size:11px;letter-spacing:.12em;color:var(--ink2)}
.slip-store{display:block;font-size:12px;letter-spacing:0;color:var(--muted);margin-top:3px}
.slip-who{margin-bottom:10px;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.slip-addr{flex:1 1 100%;font-size:12.5px;color:var(--ink2)}
.slip-items{list-style:none;margin:0 0 10px;padding:0}
.slip-items li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px dotted var(--line)}
.slip-items li:last-child{border-bottom:0}
.slip-qty{flex:0 0 26px;font-weight:700;font-size:15px}
.slip-name{flex:1 1 auto;font-size:14px}
.slip-opts{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-top:2px}
.slip-tick{flex:0 0 auto;font-size:19px;color:var(--muted)}
.slip-note{font-size:12.5px;background:var(--brass-soft);padding:7px 10px;margin-bottom:9px;border-radius:5px}
.slip-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;
  border-top:1px solid var(--line);padding-top:9px;font-size:13px;font-weight:600}
.slip-owing{color:var(--claret)}

@media print{
  .slips{gap:0}
  .slip{border:0;padding:0;page-break-after:always;break-after:page}
  .slip:last-child{page-break-after:auto;break-after:auto}
  .slip-head{border-bottom-color:#000}
  .slip-owing{color:#000;text-decoration:underline}
}

/* ── a flag should stop the eye ── */
.flagpill{display:inline-flex;align-items:center;gap:4px;margin-left:7px;vertical-align:middle;
  background:var(--claret);color:#fff;border-radius:20px;padding:2px 8px;
  font-family:var(--m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.flagmark{color:var(--claret)}
.queue-flagged{border-left:3px solid var(--claret)}

/* ── a countdown on an unpaid order ── */
.notice-timed{border-left:3px solid var(--brass);background:var(--brass-soft)}
.cd-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.cd{font-family:var(--m);font-size:15px;font-weight:700;letter-spacing:-.02em}
.cd-soon{color:var(--claret)}
.cd-gone{color:var(--muted);font-weight:500;font-size:13px}
.drop-order{color:var(--claret)}

/* ── every message, editable ── */
.tpls{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:16px;overflow:hidden}
.tpl+.tpl{border-top:1px solid var(--line)}
.tpl-off{background:rgba(0,0,0,.02)}
.tpl-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  padding:11px 13px;cursor:pointer;font:inherit;color:inherit;flex-wrap:wrap}
.tpl-head strong{font-size:13.5px}
.tpl-hint{font-size:11.5px;flex:1 1 100%;margin-left:21px}
.tpl-body{padding:2px 13px 14px}

/* ── banner preview ── */
.bannerprev{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:14px;background:#fff}
.bannerprev img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto 6px}
.linkish.tiny{font-size:11.5px;display:inline-block;margin-top:3px}

/* ── what is inside a package ── */
.hasparts{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--pine)}
.icon-btn{position:relative}
.prepgroup+.prepgroup{margin-top:14px}
.prepcat{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:8px 0 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.prepline{align-items:flex-start}
.prepsplit{display:block;font-size:11px;color:var(--muted);font-style:normal;margin-top:1px}
.prepqty{font-size:15px;font-weight:700}
.slip-inside{list-style:none;margin:5px 0 0;padding:0 0 0 4px;border-left:2px solid var(--line)}
.slip-inside li{font-size:12.5px;color:var(--ink2);padding:2px 0 2px 8px;display:flex;align-items:center;gap:5px}
.slip-tick.sm{font-size:14px;margin-left:auto}
@media print{ .slip-inside{border-left-color:#999} }

/* ── signing in with Google ── */
.googlebtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px 16px;border:1px solid var(--line2);border-radius:8px;background:#fff;
  font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;margin-bottom:14px}
.googlebtn:hover{background:rgba(0,0,0,.03);border-color:var(--muted)}
.googlebtn:disabled{opacity:.5;cursor:default}
.orline{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--muted);font-size:12px}
.orline:before,.orline:after{content:"";flex:1;height:1px;background:var(--line)}
.chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--pine-soft);border-left:3px solid var(--pine);padding:11px 14px;margin-bottom:16px;font-size:14px}
.chosen span{display:flex;align-items:center;gap:8px;color:var(--pine)}
.choiceopts-edit{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.optchip{display:inline-flex;align-items:center;gap:6px;background:var(--sand,#f6f3ec);
  border:1px solid var(--line2);border-radius:20px;padding:4px 6px 4px 11px;font-size:12.5px}
.optchip em{font-size:10px;font-style:normal}
.optchip-x{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);padding:0 4px}
.optchip-x:hover{color:var(--claret)}