:root{
  --cream:#FFF9F4; --stage:#EFE7E1; --ink:#231F20; --soft:#4A4345; --gray:#8A8388; --line:#E4DADC;
  --pink:#ED4685; --pinkd:#C72E6B; --pink0:#FEF3F8; --rose:#F7A8C6; --teal:#53CADF; --teald:#1B7280; --photo:#F1E8E3;
  --display:'Archivo Black',Impact,sans-serif; --body:Montserrat,Verdana,sans-serif; --script:'Alex Brush','Segoe Script',cursive;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font:400 14px/1.4 var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input{font-family:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--pinkd);outline-offset:2px}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* app shell: full screen on phones, a centered app column on larger screens */
.shell{position:relative;height:100%;height:100dvh;max-width:480px;margin:0 auto;background:var(--cream);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:520px){.shell{height:min(100dvh,920px);margin-top:max(0px,calc((100dvh - 920px)/2));border-radius:28px;box-shadow:0 30px 80px rgba(35,31,32,.18)}}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}

/* header */
.head{padding:calc(var(--st) + 18px) calc(24px + var(--sr)) 14px calc(24px + var(--sl));display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:var(--cream)}
.mark{display:flex;align-items:baseline;gap:5px}
.mark b{font-family:var(--display);font-weight:400;font-size:9.5px;letter-spacing:4px}
.mark i{font-family:var(--script);font-style:normal;font-size:20px;color:var(--pinkd);line-height:1}
.head h1{margin:8px 0 0;font-size:28px;font-weight:200;letter-spacing:-.3px;line-height:1.1}
.iconbtn{width:44px;height:44px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;position:relative}
.iconbtn svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:6px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--pink);color:#fff;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ticker{margin:0 calc(24px + var(--sr)) 0 calc(24px + var(--sl));padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--soft);display:flex;align-items:center;gap:10px;min-height:42px}
.ticker span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pulse{width:6px;height:6px;border-radius:3px;background:var(--pink);flex:none;animation:ring 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(237,70,133,.5)}100%{box-shadow:0 0 0 8px rgba(237,70,133,0)}}
.body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px calc(24px + var(--sr)) 28px calc(24px + var(--sl));display:flex;flex-direction:column;gap:24px;scrollbar-width:none}
.body::-webkit-scrollbar{display:none}

/* type + buttons */
.eyebrow{font-size:9.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--soft)}
.light{font-weight:200}
.muted{font-size:12.5px;font-weight:300;color:var(--soft);line-height:1.6;margin:0}
.script{font-family:var(--script);font-size:24px;color:var(--pinkd)}
.btn{min-height:52px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:10.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.btn.solid{background:var(--ink);color:#fff}
.btn.sm{min-height:44px;padding:0 16px;font-size:10px;letter-spacing:2px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.block{width:100%}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:300}
.li strong{font-weight:500}

/* map */
.map{position:relative;height:220px;border-radius:4px;overflow:hidden;background:#F6EFEA;flex:none}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .me{position:absolute;left:16%;top:84%;width:12px;height:12px;border-radius:6px;background:#fff;border:1px solid var(--ink);transform:translate(-50%,-50%)}
.map .truck{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);transition:left 1.2s cubic-bezier(.4,0,.2,1),top 1.2s cubic-bezier(.4,0,.2,1)}
.map .truck::before{content:"";position:absolute;inset:0;border-radius:17px;background:var(--pink);animation:grow 2.4s ease-out infinite}
.map .truck::after{content:"";position:absolute;inset:0;border-radius:17px;background:var(--ink) radial-gradient(circle,var(--pink) 0 4px,transparent 5px)}
.map .truck.off::before{display:none}.map .truck.off::after{background:var(--gray)}
.map .tag{position:absolute;left:14px;top:12px}
@keyframes grow{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.6);opacity:0}}

/* menu */
.item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.item.flash{animation:fl 1s ease-out}
@keyframes fl{0%{background:var(--pink0)}100%{background:transparent}}
.item img,.item .ph{width:100px;height:116px;flex:none;border-radius:2px;object-fit:cover;background:var(--photo)}
.item.out img{filter:grayscale(1);opacity:.55}
.item .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.item .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:14.5px}
.item .desc{font-size:12px;font-weight:300;color:var(--soft);line-height:1.5}
.bar{height:1px;background:var(--line);margin-top:2px}
.bar i{display:block;height:1px;background:var(--ink);transition:width .8s}
.bar.low i{background:var(--pink)}
.stk{font-size:9.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--soft)}
.stk.low{color:var(--pinkd)}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:40px;height:40px;border-radius:20px;border:1px solid var(--ink);background:transparent;font-size:16px;line-height:1}
.qty span{min-width:22px;text-align:center;font-weight:500}
.bagbar{padding:0 calc(16px + var(--sr)) 10px calc(16px + var(--sl));background:var(--cream)}
.bagbar .btn{width:100%;justify-content:space-between;min-height:56px;padding:0 26px}

/* order status */
.code{background:var(--ink);color:#fff;border-radius:4px;padding:32px 22px 26px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.code .big{font-size:48px;font-weight:200;letter-spacing:6px}
.code .scr{font-family:var(--script);font-size:28px;color:var(--rose)}
.steps{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.steps div{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:9px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray)}
.steps div::before{content:"";width:100%;height:1px;background:rgba(255,255,255,.2)}
.steps div.on{color:#fff}.steps div.on::before{background:#fff}
.code.ready{background:var(--pinkd)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:9.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--soft)}
.uline{display:flex;align-items:center;border-bottom:1px solid var(--ink)}
.uline input{flex:1;min-width:0;height:46px;border:none;background:transparent;font:300 16px var(--body);outline:none}

/* thread */
.video{height:190px;border-radius:4px;background:var(--ink);position:relative;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;flex:none}
.video .play{width:54px;height:54px;border-radius:27px;border:1px solid #fff;display:flex;align-items:center;justify-content:center}
.video .t{position:absolute;left:14px;top:14px;font-size:9px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase}
.video .b{position:absolute;left:14px;bottom:14px;font-size:11px;font-weight:300;color:#D8D2D4}
.post{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.post .who{display:flex;gap:10px;align-items:center}
.av{width:32px;height:32px;border-radius:16px;background:var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--soft)}
.av.brand{background:var(--ink)}
.post p{margin:0;font-size:13.5px;font-weight:300;line-height:1.6;overflow-wrap:anywhere}
.like{border:none;background:transparent;min-height:44px;display:flex;align-items:center;gap:8px;font:400 12px var(--body);padding:0;align-self:flex-start}
.like svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.2;fill:none}
.like.on{color:var(--pinkd)}.like.on svg{fill:var(--pink)}

/* club */
.club{background:var(--ink);color:#fff;border-radius:4px;padding:26px 22px;display:flex;flex-direction:column;gap:12px}

/* sign in */
.signin{flex:1;display:flex;flex-direction:column;padding:calc(var(--st) + 64px) calc(30px + var(--sr)) calc(var(--sb) + 28px) calc(30px + var(--sl));overflow-y:auto}
.signin .hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.signin .rule{width:24px;height:1px;background:var(--ink)}
.signin .actions{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:32px}

/* tabs */
.tabs{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);padding:6px calc(6px + var(--sr)) calc(var(--sb) + 8px) calc(6px + var(--sl));background:var(--cream)}
.tabs button{border:none;background:transparent;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:8.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray);position:relative}
.tabs button[aria-current="page"]{color:var(--ink)}
.tabs button::after{content:"";width:4px;height:4px;border-radius:2px;background:transparent}
.tabs button[aria-current="page"]::after{background:var(--pink)}
.tabs svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tabs .badge{top:4px;right:calc(50% - 20px)}

.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 96px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:12px;max-width:calc(100% - 32px);z-index:20;box-shadow:0 10px 30px rgba(35,31,32,.2)}
.offline{background:var(--pink0);color:var(--pinkd);font-size:11.5px;text-align:center;padding:8px 16px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}