/* Customer-facing pages: public menu, order number entry, ticket. Phone-first, branded with the shop colour. */
.cust{--brand:#B5471B;--brand-2:#1E2330;--on-brand:#fff;--on-brand-2:#fff;--brand-soft:color-mix(in srgb,var(--brand) 12%,#fff);--brand-ink:#8F3713;--brand-2-ink:#1E2330;background:#F6F5F2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ══════════ public menu ══════════ */
.pm-hero{position:relative;color:var(--on-brand);padding:34px 20px 70px;overflow:hidden;
  background:radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--brand) 80%,#fff) 0%,transparent 60%),
             linear-gradient(135deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 55%,var(--brand-2)) 60%,var(--brand-2) 100%)}
.pm-hero-in{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:16px}
.pm-logo{width:72px;height:72px;border-radius:22px;background:#fff;color:var(--brand-ink);display:grid;place-items:center;font-family:var(--fd);font-size:2rem;font-weight:700;overflow:hidden;flex:none;box-shadow:0 10px 30px -10px #0006}
.pm-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.pm-hero h1{margin:0;font-size:1.8rem;line-height:1.25}
.pm-hero p{margin:4px 0 0;opacity:.85;font-size:.95rem}
.pm-bar{position:sticky;top:0;z-index:5;max-width:920px;margin:-46px auto 0;padding:0 12px}
.pm-bar>*{background:#fff}
.pm-search{display:flex;align-items:center;gap:10px;border-radius:16px 16px 0 0;padding:12px 16px;color:var(--muted);box-shadow:0 -1px 0 var(--line) inset;margin:0;font-weight:400}
.pm-search input{border:0;padding:4px 0;font-size:1rem;background:transparent;outline:none!important}
.pm-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 12px;border-radius:0 0 16px 16px;box-shadow:0 12px 30px -18px #14161b55}
.pm-chips::-webkit-scrollbar{display:none}
.pm-chips a{flex:none;padding:7px 15px;border-radius:99px;background:#F2F1EE;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.92rem;transition:background-color .2s,color .2s}
.pm-chips a.on{background:var(--brand);color:var(--on-brand)}
.pm-body{max-width:920px;margin:0 auto;padding:10px 12px 120px}
.pm-cat{padding-top:22px;scroll-margin-top:120px}
.pm-cat h2{display:flex;align-items:center;gap:10px;font-size:1.3rem;margin:0 4px 12px}
.pm-cat h2 small{font-family:var(--f);font-size:.75rem;font-weight:700;background:var(--brand-soft);color:var(--brand-ink);border-radius:99px;padding:1px 9px}
.pm-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.pm-grid{grid-template-columns:1fr 1fr}}
.pm-card{display:flex;gap:14px;align-items:stretch;text-align:start;width:100%;background:#fff;border:1px solid #ECEAE5;border-radius:18px;padding:10px;font:inherit;color:inherit;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pm-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px #14161b66}
.pm-card:active{transform:scale(.99)}
.pm-img{flex:none;width:96px;height:96px;border-radius:14px;overflow:hidden;background:var(--brand-soft);display:grid;place-items:center}
.pm-img img{width:100%;height:100%;object-fit:cover}
.pm-img i{font-style:normal;font-family:var(--fd);font-size:2rem;font-weight:700;color:var(--brand-ink)}
.pm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:4px 0}
.pm-tx b{font-family:var(--fd);font-weight:700;font-size:1.06rem}
.pm-tx small{color:var(--muted);font-size:.88rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-price{margin-top:auto;align-self:flex-start;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;border-radius:99px;padding:2px 12px;font-size:.92rem}
.pm-price .ltr{font-family:var(--fd)}
.pm-card.off{opacity:.55}
.pm-card.off .pm-price{background:#EEE;color:var(--muted)}
.pm-empty,.pm-none{text-align:center;color:var(--muted);padding:50px 20px}
.pm-empty .ic{color:var(--brand)}
.pm-foot{text-align:center;color:var(--muted);font-size:.84rem;margin-top:40px}
.pm-foot a,.tk-foot a{color:var(--ink-2)}
.pm-fab{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:8px;background:var(--brand-2);color:var(--on-brand-2);text-decoration:none;font-weight:700;padding:14px 22px;border-radius:99px;box-shadow:0 14px 34px -10px #000a;white-space:nowrap}
.pm-fab .ic{color:currentColor}
.pm-sheet{border:0;padding:0;margin:auto auto 0;width:min(560px,100vw);max-height:88dvh;border-radius:24px 24px 0 0;background:#fff;color:var(--ink)}
.pm-sheet::backdrop{background:#14161b99}
.pm-sheet[open]{animation:sheet .3s var(--ease)}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.pm-sheet{margin:auto;border-radius:24px}}
.ps-img img{width:100%;max-height:340px;object-fit:cover;display:block}
.ps-body{padding:20px 22px 22px}
.ps-body h3{margin:0 0 6px;font-size:1.4rem}
.ps-body p{color:var(--ink-2);margin:0 0 12px}
.ps-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.ps-foot b{font-family:var(--fd);font-size:1.4rem;color:var(--brand-ink)}

/* ══════════ ticket + join ══════════ */
.tk2{min-height:100vh;min-height:100dvh;max-width:520px;margin:0 auto;padding:14px 16px 28px;display:flex;flex-direction:column;gap:12px;transition:background-color .5s var(--ease)}
.tk-head{display:flex;align-items:center;gap:10px;justify-content:center;padding:6px 0}
.tk-logo{width:38px;height:38px;border-radius:12px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-family:var(--fd);font-weight:700;overflow:hidden}
.tk-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.tk-head b{font-family:var(--fd);font-size:1.08rem}
.tk-card{background:#fff;border-radius:26px;padding:26px 20px 22px;text-align:center;box-shadow:0 20px 50px -34px #14161b80;display:flex;flex-direction:column;align-items:center;gap:6px;transition:background-color .5s,color .5s}
.tk-label{color:var(--muted);font-size:.95rem}
.tk-num-wrap{position:relative;display:grid;place-items:center;width:190px;height:150px}
.tk-num{font-family:var(--fd);font-size:5rem;font-weight:700;line-height:1;position:relative;z-index:1}
.tk-arcs{position:absolute;inset:-10px 10px;pointer-events:none;color:var(--brand)}
.tk-arcs i{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:0}
.tk-state{font-family:var(--fd);font-size:1.6rem;margin:2px 0 0}
.tk-sub{color:var(--muted);margin:0;font-size:.95rem}
.tk-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;width:100%;max-width:340px;justify-content:space-between;position:relative}
.tk-steps::before{content:"";position:absolute;top:13px;inset-inline:16%;height:3px;background:#ECEAE5;border-radius:3px}
.tk-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;font-size:.78rem;color:var(--muted);font-weight:600}
.tk-steps i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ECEAE5;color:#fff;font-style:normal}
.tk-steps li.done i{background:var(--ok)}
.tk-steps li.s-prep i{background:var(--brand);box-shadow:0 0 0 6px var(--brand-soft)}
.tk-steps li.s-prep i::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
html.motion .tk-steps li.s-prep i{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 6%,#fff)}}
.tk-steps li.s-prep span{color:var(--ink)}
.tk-panel{background:#fff;border-radius:22px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.tk-panel.ok{background:var(--ok-soft)}
.btn.tk-big{width:100%;min-height:60px;font-size:1.2rem;border-radius:16px;background:var(--brand);color:var(--on-brand)}
.btn.tk-big:hover{background:var(--brand-ink)}
.btn.tk-big.white{background:#fff;color:var(--ok-2)}
.tk-note{color:var(--muted);font-size:.9rem;margin:0;max-width:340px}
.tk-demo{background:#FFF4E5;color:#8A4B0E;border-radius:12px;padding:10px 12px;font-size:.88rem;font-weight:600;margin:4px 0 0}
.tk-on{display:flex;align-items:center;gap:8px;color:var(--ok-2);font-size:1.05rem}
.tk-on span{width:30px;height:30px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.tk-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;text-decoration:none;background:#fff;border-radius:99px;padding:8px 16px;border:1px solid var(--line)}
.tk-link.center{align-self:center}
.tk-ready-tx{font-size:1.15rem;font-weight:700;margin:0}
.tk-done{width:70px;height:70px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
html.motion .tk-done{animation:pop-in .5s var(--ease)}
@keyframes pop-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.tk-foot{margin-top:auto;text-align:center;color:var(--muted);font-size:.8rem;padding-top:16px}

/* ready: the whole screen turns green and rings */
.tk2.ready{background:var(--ok);max-width:none}
.tk2.ready>*{max-width:488px;width:100%;margin-inline:auto}
.tk2.ready .tk-head{color:#fff}
.tk2.ready .tk-card{background:transparent;box-shadow:none;color:#fff}
.tk2.ready .tk-label,.tk2.ready .tk-sub{color:rgba(255,255,255,.85)}
.tk2.ready .tk-arcs{color:#fff}
.tk2.ready .tk-steps li span{color:#fff}
.tk2.ready .tk-steps li i{background:#fff;color:var(--ok)}
.tk2.ready .tk-steps::before{background:rgba(255,255,255,.4)}
.tk2.ready .tk-steps li.s-prep i::after{display:none}
.tk2.ready .tk-steps li.s-prep i{box-shadow:none;animation:none}
.tk2.ready .tk-steps li.s-prep i::before{content:"✓";color:var(--ok);font-weight:700}
.tk2.ready .tk-panel{background:transparent;color:#fff}
.tk2.ready .tk-note{color:rgba(255,255,255,.85)}
.tk2.ready .tk-foot,.tk2.ready .tk-foot a{color:rgba(255,255,255,.75)}
.tk2.ready .tk-state{font-size:2.2rem}
html.motion .tk2.ready .tk-arcs i{animation:ping 2.2s var(--ease) infinite}
.tk2.ready .tk-arcs i:nth-child(2){animation-delay:.7s}.tk2.ready .tk-arcs i:nth-child(3){animation-delay:1.4s}
@keyframes ping{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.15);opacity:0}}
html:not(.motion) .tk2.ready .tk-arcs i{opacity:.25}
.tk2.flash{animation:flash 1.1s ease-in-out infinite alternate}
@keyframes flash{from{filter:brightness(1)}to{filter:brightness(1.15)}}
@media (prefers-reduced-motion:reduce){.tk2.flash{animation:none}}
.tk2.coming .tk-steps li i{background:var(--ok)}
.tk2.coming .tk-steps li.s-prep i{box-shadow:none;animation:none}
.tk2.coming .tk-steps li.s-prep i::after{display:none}
.tk2.closed .tk-card{opacity:.7}
.tk2.closed .tk-steps,.tk2.coming .tk-sub{display:none}

/* join */
.join-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);margin-bottom:6px}
.join-form{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.join-input{font-family:var(--fd);font-size:2.2rem!important;font-weight:700;text-align:center;direction:ltr;border-radius:16px!important;padding:14px!important;border:2px solid var(--line-2)!important}
.join-input:focus{border-color:var(--brand)!important;outline:none!important}
.join-input::placeholder{font-family:var(--f);font-size:1.1rem;font-weight:500;color:#A6A39C}

/* the shop's secondary colour on the order page header and the ready screen's call to action */
.tk-head b{color:var(--brand-2-ink)}
.tk2.ready .tk-head b{color:#fff}
.pm-sheet .ps-foot b{color:var(--brand-ink)}

/* ══════════ additions: contact, hours, language, options, cart ══════════ */
.pm-hero-tx{flex:1;min-width:0}
.pm-hero .pm-open{display:block;width:fit-content;margin-top:6px;border-radius:99px;padding:2px 12px;background:#0003;font-weight:600;font-size:.85rem;opacity:1;line-height:1.6}
.pm-open.on{background:#1F7A4D}
.pm-hero-in{position:relative}
.pm-lang{position:absolute;top:-24px;inset-inline-end:0;color:inherit;text-decoration:none;border:1px solid currentColor;border-radius:99px;padding:4px 12px;font-weight:600;font-size:.88rem;opacity:.9}
.pm-contact{max-width:880px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:8px}
.pm-contact a,.pm-contact span{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;background:#ffffff26;border-radius:99px;padding:6px 14px;font-size:.9rem;font-weight:600}
.pm-contact span{background:transparent;padding-inline:4px;opacity:.9}
.en .pm-sheet,.en .pm-body,.en .pm-bar{direction:ltr}
.ps-opts{border:0;padding:0;margin:0 0 14px}
.ps-opts legend{font-weight:700;margin-bottom:6px;padding:0}
.ps-opts>div{display:flex;flex-wrap:wrap;gap:8px}
.ps-opt{display:inline-flex;align-items:center;gap:8px;margin:0;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:600;cursor:pointer}
.ps-opt:has(input:checked){border-color:var(--brand-ink);background:var(--brand-soft)}
.ps-opt input{margin:0;accent-color:var(--brand-ink)}
.ps-opt small{color:var(--muted);font-weight:500}
.ps-foot{flex-wrap:wrap}
.ps-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ps-qty button{width:40px;height:44px;border:0;background:#F2F1EE;font:700 1.2rem var(--f);cursor:pointer}
.ps-qty span{min-width:36px;text-align:center;font-weight:700}
.ps-foot .btn:not(.ghost){background:var(--brand);color:var(--on-brand)}
.pm-fab.cart{border:0;cursor:pointer;font:700 1rem var(--f)}
.cart-list{list-style:none;margin:0 0 10px;padding:0}
.cart-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.cart-list li span{flex:1}
.cart-list li button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:1.1rem}
.cart-total{display:flex;justify-content:space-between;font-size:1.1rem;margin:4px 0 12px}
#cart-form input{margin-bottom:8px}

/* ══════════ additions: order page ══════════ */
.tk-offline{margin:0;text-align:center;background:#FFF4E5;color:#8A4B0E;border-radius:12px;padding:8px 12px;font-weight:600;font-size:.9rem}
.tk-eta{display:block;margin-top:4px;color:var(--ink-2);font-weight:600}
.tk-items{align-items:stretch;text-align:start}
.tk-items h2,.tk-loyal h2,.tk-ios h2,.join-queue h2{font-size:1.05rem;margin:0;display:flex;align-items:center;gap:8px}
.tk-items ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tk-items li{display:flex;justify-content:space-between;gap:10px}
.tk-items li small{display:block;color:var(--muted)}
.tk-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;margin:0}
.tk-viewer{margin:0;background:#EEF1F6;color:#2E3A4E;border-radius:14px;padding:10px 14px;font-size:.9rem;text-align:center}
.tk-ios{align-items:stretch;text-align:start;border:2px solid var(--brand-soft)}
.tk-ios ol{margin:0;padding-inline-start:22px;display:grid;gap:6px;font-weight:600}
.tk-share{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#EEF1F6;color:#1F5FBF;vertical-align:middle}
.tk-loyal{gap:8px}
.tk-stamps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tk-stamps i{width:30px;height:30px;border-radius:50%;border:2px dashed var(--line-2);display:grid;place-items:center;color:transparent}
.tk-stamps i.on{border:0;background:var(--brand);color:var(--on-brand)}
.tk-reward{margin:0;background:#FFF4D6;color:#7A5300;border-radius:12px;padding:8px 12px;font-weight:600}
.tk2.ready .tk-loyal,.tk2.ready .tk-items{display:none}
.join-queue{align-items:stretch}
.join-row{display:grid;grid-template-columns:2fr 1fr;gap:8px}