:root{--ink:#24123f;--guava:#ff4f6e;--mango:#ffb52e;--teal:#14b58a;--blue:#4361ee;--grape:#8a4fff;--bg:#f6f3ff;--card:#fff;--muted:#6b6385;--line:#e4def5;--r:18px;--sh:0 6px 24px rgba(36,18,63,.09)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Figtree',system-ui,sans-serif;padding-bottom:calc(84px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
h1,h2,h3,.brand{font-family:'Unbounded','Figtree',sans-serif;margin:0;line-height:1.15}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap}
.brand{font-size:1.25rem;font-weight:800;background:none;border:0;padding:0;color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{border-radius:10px;display:block}
.sign{background:var(--bg);border:1px solid var(--line);color:var(--muted);padding:3px 12px;border-radius:999px;font-size:.8rem;font-weight:600}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nb{background:none;border:0;border-radius:999px;padding:10px 14px;white-space:nowrap;font-weight:600;color:var(--muted)}
.nb:hover{background:var(--bg)}.nb.on{background:var(--ink);color:#fff}
.nb.cartnb{background:var(--guava);color:#fff}
.badge{background:var(--guava);color:#fff;border-radius:999px;padding:0 7px;font-size:.75rem;margin-left:6px}
.cartnb .badge{background:#fff;color:var(--guava)}
.btn{background:var(--ink);color:#fff;border:0;border-radius:14px;padding:12px 20px;font-weight:700;transition:transform .12s,box-shadow .12s;box-shadow:0 4px 14px rgba(36,18,63,.25)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:none}
.btn.alt{background:var(--guava);box-shadow:0 4px 14px rgba(255,79,110,.4)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:#fff;color:var(--guava);border:1px solid #ffc3cd;box-shadow:none}
.btn.sm{padding:6px 12px;font-size:.85rem;border-radius:10px;box-shadow:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.note{border-radius:14px;padding:12px 16px;margin:14px 0;background:#fff;border:1px solid var(--line)}
.note.warn{background:#fff6dd;border-color:#ffe29a}.note.bad{background:#ffe8ec;border-color:#ffc3cd}.note.ok{background:#e1f8ef;border-color:#aeead2}
.hero{padding:34px 0 6px}
.hero h1{font-size:clamp(2rem,6.5vw,3.6rem);font-weight:800;max-width:11ch;letter-spacing:-.02em}
.hero p{color:var(--muted);max-width:46ch;margin:12px 0 0;font-size:1.05rem}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0;position:sticky;top:60px;z-index:10;background:var(--bg);padding:8px 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;flex:1;min-width:240px;scrollbar-width:none}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.search{border:1px solid var(--line);border-radius:999px;padding:10px 18px;background:#fff;min-width:200px;min-height:44px;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-3px)}.card.out{opacity:.55}
.pic{aspect-ratio:1/1;margin:10px 10px 0;border-radius:14px;background:var(--pk,var(--guava));display:flex;align-items:center;justify-content:center;font:800 4rem 'Unbounded',sans-serif;color:rgba(255,255,255,.9);overflow:hidden;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/14px 100%;padding-top:7px}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.cb{padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.cb h3{font:700 1rem 'Figtree',sans-serif}
.price{font:800 1.2rem 'Unbounded',sans-serif}
.stock{font-size:.82rem;color:var(--muted)}.stock.low{color:var(--guava);font-weight:700}
.qty{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.qty button{width:40px;height:40px;border-radius:12px;border:0;background:var(--bg);font-weight:800;font-size:1.1rem}
.qty span{min-width:22px;text-align:center;font-weight:700}
.empty{text-align:center;padding:44px 14px;color:var(--muted);border:2px dashed var(--line);border-radius:var(--r);background:#fff}
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px 16px;display:flex;justify-content:center;pointer-events:none}
.cartbar button{pointer-events:auto;display:flex;width:100%;max-width:560px;justify-content:space-between;background:var(--guava);color:#fff;border:0;border-radius:16px;padding:15px 22px;font-weight:700;box-shadow:0 10px 30px rgba(255,79,110,.45)}
@media(min-width:760px){.cartbar{display:none}}
dialog{border:0;padding:0;background:var(--bg);color:var(--ink);width:100%;max-width:460px;max-height:92vh;margin:auto 0 0;border-radius:24px 24px 0 0;box-shadow:0 -10px 50px rgba(36,18,63,.3);animation:up .25s ease}
@media(min-width:760px){dialog{margin:0 0 0 auto;height:100vh;max-height:100vh;border-radius:24px 0 0 24px;animation:in .25s ease}}
dialog::backdrop{background:rgba(36,18,63,.55)}
@keyframes up{from{transform:translateY(40px);opacity:0}}@keyframes in{from{transform:translateX(40px);opacity:0}}
.dh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.dh h2{font-size:1.1rem}
.db{padding:6px 20px 20px;overflow:auto}
.x{background:var(--bg);border:0;width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1}
label{display:block;font-weight:700;font-size:.88rem;margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],select{width:100%;min-height:46px;font-size:16px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff}
input[readonly]{background:var(--bg);color:var(--muted)}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.opt{display:flex;gap:10px;border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;cursor:pointer;align-items:flex-start;margin-top:8px;font-weight:500}
.opt:has(input:checked){border-color:var(--guava);background:#fff5f7}
.opt b{display:block}.opt small{color:var(--muted)}
.line{display:flex;justify-content:space-between;gap:10px;padding:6px 0}
.line.t{border-top:1px dashed var(--muted);margin-top:6px;padding-top:12px;font:800 1.1rem 'Unbounded',sans-serif}
.item{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.db form p:last-of-type{position:sticky;bottom:-20px;background:var(--bg);padding:12px 0 4px;margin:0}
.link{background:none;border:0;padding:0;text-decoration:underline;font-weight:700;color:var(--blue)}
.authbox{max-width:420px;margin:36px auto;background:#fff;border-radius:24px;padding:28px;box-shadow:var(--sh)}
.authbox h2{font-size:1.5rem;margin-bottom:6px}
.order{background:#fff;border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--sh);border-left:6px solid var(--mango)}
.order .top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.st{padding:3px 12px;border-radius:999px;font-weight:700;font-size:.78rem}
.st.pending{background:#fff0c7}.st.confirmed{background:#dbe4ff}.st.delivered{background:#c9f2e2}.st.cancelled{background:#ffd9df}
.meta{color:var(--muted);font-size:.9rem}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tw{overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;background:#fff;min-width:640px}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:var(--ink);color:#fff;font-size:.85rem}
td input[type=number],td input[type=text]{width:90px;padding:7px 10px}td input[type=text]{width:160px}
.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--guava);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:14px;z-index:99;max-width:90%;box-shadow:var(--sh)}
@media(max-width:560px){.sign{display:none}nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.pic{font-size:3rem}.controls{top:104px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.addr{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}.addr>*{min-width:0}
dialog{overscroll-behavior:contain}
.db{-webkit-overflow-scrolling:touch}
.opt{min-height:54px}
.opt input[type=radio],.opt input[type=checkbox]{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--guava)}
@media(max-width:560px){
  .wrap{padding:0 14px}
  .bar{padding:10px 0 6px;gap:8px}
  .brand{font-size:1.1rem}
  nav{scrollbar-width:none;padding-bottom:4px}nav::-webkit-scrollbar{display:none}
  .hero{padding:20px 0 0}
  .hero p{font-size:.95rem}
  .controls{margin:12px 0;gap:8px;top:98px}
  .search{width:100%;flex:1 1 100%;order:-1}
  .chips{flex:1 1 100%;min-width:0}
  .cb{padding:10px 12px 14px}
  .price{font-size:1.05rem}
  .qty{justify-content:space-between}
  .qty button.btn{flex:1;padding:10px}
  dialog{max-height:94dvh;border-radius:22px 22px 0 0}
  .dh{padding:14px 16px}
  .db{padding:4px 16px calc(20px + env(safe-area-inset-bottom))}
  .db form p:last-of-type{bottom:-20px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .item{flex-wrap:wrap}
  .item>div:first-child{flex:1 1 100%}
  .addr{grid-template-columns:1fr 1fr}.addr>:first-child{grid-column:1/-1}
  .authbox{margin:18px auto;padding:22px}
  .acts .btn{flex:1 1 calc(50% - 6px);padding:10px}
  .order .top{align-items:flex-start}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
  .cartbar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- mobile bottom tab bar ---------- */
#tabbar{display:none}
@media(max-width:759px){
  header .bar{flex-wrap:nowrap;padding:10px 0;justify-content:space-between}
  header nav#nav{display:none}
  .sign{display:inline-block;font-size:.72rem;padding:3px 10px}
  .controls{top:58px}
  body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;gap:2px}
  .tab{position:relative;flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;border-radius:14px;padding:6px 4px;font-size:.7rem;font-weight:700;color:var(--muted);min-height:52px}
  .tab.on{color:var(--guava);background:#fff0f3}
  .tab:active{transform:scale(.95)}
  .tb{position:absolute;top:2px;left:calc(50% + 6px);background:var(--guava);color:#fff;font-style:normal;font-size:.68rem;line-height:1;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:content-box}
  .cartbar{bottom:calc(64px + env(safe-area-inset-bottom));padding:8px 14px}
  .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){.sign{display:inline-block}.controls{top:58px}}
/* ---------- download app ---------- */
.nb.dlnb{background:var(--teal);color:#fff;text-decoration:none;display:inline-block}
.nb.dlnb:hover{background:#0fa07a}
.dlTop{display:none;background:var(--teal);color:#fff;text-decoration:none;font-weight:700;font-size:.78rem;padding:6px 12px;border-radius:999px;white-space:nowrap}
@media(max-width:759px){.dlTop{display:inline-block}}
dialog.pop{max-width:360px;width:calc(100% - 32px);margin:auto;border-radius:24px;max-height:90vh;height:auto;animation:pop .22s ease;box-shadow:0 20px 60px rgba(36,18,63,.35)}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.popin{position:relative;padding:28px 24px 22px;text-align:center}
.popin h2{font-size:1.25rem;margin:12px 0 6px}
.popin .poplogo{border-radius:18px}
.popin .btn{margin-top:16px}
.popx{position:absolute;top:12px;right:12px}
@media(min-width:760px){dialog.pop{margin:auto;height:auto;max-height:90vh;border-radius:24px}}