@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/vazirmatn-fd-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/vazirmatn-fd-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/vazirmatn-fd-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/vazirmatn-fd-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/vazirmatn-fd-extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Digital Food Menu — styles.
   Sections are marked with  ============ Name ============  headers (see README.md). */
/* ============ Tokens ============ */
:root{
  --purple:#AF52DF;
  --purple-glow:rgba(175,82,223,.38);
  --ink:#000;
  --ink-2:#2B2B2B;
  --muted:#5E5E5E;
  --field:#F7F7F7;
  --badge:#FE2C58;
  --star:#FFAC0E;
  --heart:#DA2827;
  --app-bg:#fff;
  --stroke:1.5px;

  --stage-top:#EAEBEF;
  --stage-bottom:#F4F6F8;
  --bubble-a:#ffffff;
  --bubble-b:rgba(255,255,255,.55);
  --dot:rgba(150,156,178,.55);
  --wave:rgba(255,255,255,.72);
  --device-edge:rgba(22,24,44,.07);
  --device-shadow:rgba(52,56,96,.20);

  --sb:54px;          /* status bar height in the device frame */
  --pad:23px;         /* screen side padding measured from the design */
  --foot-b:30.4px;    /* space under the product buttons (home-indicator zone) */
  /* motion: JS swaps these for real spring curves (CSS linear()) when the browser supports them */
  --ease-smooth:cubic-bezier(.2,.9,.25,1);--dur-smooth:.55s;
  --ease-snap:cubic-bezier(.25,1.12,.4,1);--dur-snap:.5s;
  --ease-bounce:cubic-bezier(.25,1.35,.5,1);--dur-bounce:.55s;
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stage-top:#15161B; --stage-bottom:#1C1E25;
    --bubble-a:rgba(255,255,255,.10); --bubble-b:rgba(255,255,255,.03);
    --dot:rgba(255,255,255,.16); --wave:rgba(255,255,255,.035);
    --device-edge:rgba(255,255,255,.10); --device-shadow:rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --stage-top:#15161B; --stage-bottom:#1C1E25;
  --bubble-a:rgba(255,255,255,.10); --bubble-b:rgba(255,255,255,.03);
  --dot:rgba(255,255,255,.16); --wave:rgba(255,255,255,.035);
  --device-edge:rgba(255,255,255,.10); --device-shadow:rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{height:100%;margin:0;background:var(--stage-top);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ============ Stage (desktop backdrop, like the Dribbble shot) ============ */
.stage{position:relative;height:100%;display:grid;place-items:center;overflow:hidden;overflow:clip;
  background:linear-gradient(180deg,var(--stage-top) 0%,var(--stage-bottom) 100%)}
.deco{position:absolute;inset:0;pointer-events:none}
.wave{position:absolute;left:-25vw;bottom:-46vh;width:150vw;height:78vh;border-radius:50%;background:var(--wave);transform:rotate(-7deg)}
.bubble{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--bubble-a) 0%,var(--bubble-a) 45%,var(--bubble-b) 100%);
  box-shadow:0 6px 18px -8px rgba(80,86,120,.18)}
.dots{position:absolute;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.8px);background-size:16px 16px}

/* ============ Device frame ============ */
.device{--s:1;flex:none;position:absolute;left:50%;top:50%;width:397px;height:834px;padding:11px;border-radius:54px;background:#fff;
  box-shadow:0 0 0 1px var(--device-edge),0 40px 80px -34px var(--device-shadow);
  transform:translate(-50%,-50%) scale(var(--s));transform-origin:center}
.screen{position:relative;width:375px;height:812px;border-radius:43px;overflow:hidden;overflow:clip;isolation:isolate;
  background:var(--app-bg);color:var(--ink);color-scheme:light}

/* ============ Status bar (only inside the desktop frame) ============ */
.statusbar{position:absolute;inset:0 0 auto 0;height:var(--sb);z-index:40;background:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:6px 24px 0 27px;
  font:600 15px/1 var(--font);letter-spacing:-.2px;color:#000}
.sb-icons{display:flex;align-items:center;gap:5px}
.sb-icons svg{display:block}

/* ============ Views ============ */
#app{position:absolute;inset:0;overflow:clip}
.view{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;background:var(--app-bg)}
.view::after{content:"";position:absolute;inset:0;z-index:300;background:#000;opacity:var(--dim,0);pointer-events:none}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-top:var(--sb);padding-bottom:132px}
.scroll::-webkit-scrollbar{display:none}

/* ---------- Home: header ---------- */
.home-head{display:flex;align-items:center;justify-content:space-between;padding:16.8px var(--pad) 0 calc(var(--pad) + .7px)}
.hello{margin:0;font:400 14px/19.6px var(--font);color:#000}
.name{margin:6.7px 0 0;font:600 20px/26px var(--font);letter-spacing:.2px;color:#000}
.cart-btn{position:relative;width:32px;height:32px;flex:none;border-radius:10px}
.cart-btn svg{position:absolute;left:3.1px;top:5.85px;width:23px;height:23px}
.badge{position:absolute;left:15px;top:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--badge);color:#fff;border:1px solid #000;box-shadow:0 0 0 1.5px #fff;
  font:600 10px/15px var(--font);text-align:center;font-variant-numeric:tabular-nums}
.badge.bump{animation:bump var(--dur-bounce) var(--ease-bounce)}
@keyframes bump{30%{transform:scale(1.35)}}

/* ---------- Home: search ---------- */
.search{display:flex;align-items:center;gap:11px;height:50px;margin:25.6px var(--pad) 0;padding:0 15px 0 16.2px;
  background:var(--field);border:var(--stroke) solid #000;border-radius:12px}
.search > svg{flex:none;width:21.3px;height:21.3px}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:2px 0 0;margin:0;
  font:400 14.5px var(--font);color:#000;letter-spacing:.3px;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted);opacity:1}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search:focus-within{box-shadow:0 0 0 3px rgba(175,82,223,.18)}
.icon-btn{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-inline-end:-5.13px;border-radius:9px}
.icon-btn svg{width:19px;height:15.2px}
.clear-btn{display:none}
.search.has-text .clear-btn{display:grid}
.search.has-text .filter-btn{display:none}
.clear-btn svg{width:16px;height:16px}

/* ---------- Home: categories ---------- */
.cats{position:relative;display:flex;gap:16.4px;overflow-x:auto;scrollbar-width:none;margin-top:23px;padding:0 var(--pad)}
.cat-pill{position:absolute;left:0;top:0;z-index:2;width:0;height:29.5px;border-radius:7px;background:#000;overflow:hidden;pointer-events:none;will-change:transform,width}
.cat-ink{position:absolute;left:0;top:0;will-change:transform}
.cat-ink .cat{position:absolute}
.cat-ink .cat{color:#fff}
.cats::-webkit-scrollbar{display:none}
.cat{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:7px;height:29.5px;padding:0;
  border-radius:7px;font:400 14px/1 var(--font);letter-spacing:.07px;color:var(--ink-2);white-space:nowrap;
  transition:color .25s ease}
.cat img{width:14.5px;height:14.5px;flex:none}
.cat.is-active{font-weight:600;letter-spacing:-.1px;gap:1.2px;padding:0 10.9px 0 12.2px}
.cat.is-active img{width:13px;height:13px}
.cat:active span{opacity:.7}
.cats::after{content:"";flex:none;width:1px}

/* ---------- Home: grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;padding:24.25px var(--pad) 0;align-items:start}
.col{min-width:0}
.card{display:block;width:100%;text-align:start;margin-bottom:15.2px;border-radius:14px}
.card-img{position:relative;border:var(--stroke) solid #000;border-radius:13px;overflow:hidden;background:#EDEDED;
  transition:transform var(--dur-bounce) var(--ease-bounce)}
.card:active .card-img{transform:scale(.965);transition:transform .12s ease-out}
.card-img img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;inset-inline-start:10px;top:7.5px;padding:4px 9px;background:#fff;border:1px solid #000;border-radius:6px;
  font:600 12.5px/14px var(--font);letter-spacing:.05px;color:#000;white-space:nowrap}
.card-title{margin:10.4px 0 0;font:500 14px/20px var(--font);letter-spacing:0;color:#000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rating{display:flex;align-items:center;gap:4.6px;height:16px;margin-top:2.9px;font:400 10px/1 var(--font);color:#1A1A1A}
.rating svg{width:13px;height:13px;flex:none}
.enter{animation:enter var(--dur-smooth) var(--ease-smooth) both}
@keyframes enter{from{opacity:0;transform:translateY(18px) scale(.96)}}

.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 12px 0}
.empty h3{margin:14px 0 6px;font:600 16px/22px var(--font)}
.empty p{margin:0 0 18px;font:400 13px/19px var(--font);color:var(--muted);max-width:240px}
.btn-outline{height:44px;padding:0 22px;border:var(--stroke) solid #000;border-radius:12px;background:#fff;font:500 14px var(--font)}

/* ============ Bottom navigation ============ */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:103px;z-index:30}
.tabbar-shape{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.tabbar-shape path{fill:#fff;stroke:#000;stroke-width:var(--stroke)}
.tabs{position:absolute;left:28px;right:28px;top:30px;height:56px;display:grid;grid-template-columns:repeat(4,1fr);
  justify-items:center;align-items:center}
.tab{width:56px;height:56px;display:grid;place-items:center;border:var(--stroke) solid transparent;border-radius:14px;
  transition:border-color .2s ease}
.tab.is-active{border-color:#000}
.tab svg{display:block}
.tab .avatar{width:25px;height:25px;border-radius:50%}

/* ============ Navigation stack (iOS-style push / pop, driven by springs) ============ */
.page{z-index:20;visibility:hidden;transform:translate3d(100%,0,0);will-change:transform;
  box-shadow:-14px 0 34px -22px rgba(0,0,0,.4)}
.page.is-shown{visibility:visible}
.edge{position:absolute;inset-inline-start:0;top:0;bottom:0;width:16px;z-index:250;touch-action:none;cursor:grab}

/* ============ Press feedback: quick squeeze, springy release ============ */
html{touch-action:manipulation}
button,[role=button],label,input,textarea,.card{touch-action:manipulation}
.btn,.nav-btn,.step,.cstep,.cart-btn,.tab,.promo-btn,.ci-del,.cb-copy,.icon-btn,.link-btn,.btn-outline,.st-ic,.gdot{
  transition:transform var(--dur-bounce) var(--ease-bounce),background-color .2s ease,box-shadow .2s ease,opacity .2s ease}
:is(.btn,.nav-btn,.step,.cstep,.cart-btn,.tab,.promo-btn,.cb-copy,.icon-btn,.link-btn,.btn-outline):active{
  transform:scale(.94);transition:transform .1s ease-out}
.btn:active{transform:scale(.97)}
.share-target:active .st-ic{transform:scale(.9);transition:transform .1s ease-out}

/* ============ Rolling numbers (like iOS numeric text transitions) ============ */
.roll{position:relative;display:inline-block;white-space:nowrap}
.roll > span{display:inline-block}
.roll > .roll-out{position:absolute;top:0;left:0;right:0;text-align:inherit;pointer-events:none}

/* ============ Product page ("Order") ============ */
.pnav{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;
  margin-top:var(--sb);padding:0 14.4px 0 14.1px}
.nav-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;transition:background-color .15s ease}
.nav-btn:active{background:#F1F1F1}
.nav-btn svg{width:24px;height:24px;display:block}
#pBack svg{transform:translateY(.7px)}
.pnav-title{position:absolute;left:64px;right:64px;top:50%;margin:0;transform:translateY(-50%) translateY(1.5px);text-align:center;
  font:400 14px/20px var(--font);letter-spacing:.5px;color:#000;pointer-events:none}
.pbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:18px}
.pbody::-webkit-scrollbar{display:none}

.gallery{--sw:300px;display:flex;height:calc(var(--sw) * 1.0507);margin-top:16.4px;padding:0 37.5px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;outline:none;cursor:grab}
.gallery.is-dragging{scroll-snap-type:none;cursor:grabbing}
.gallery::-webkit-scrollbar{display:none}
.slide{flex:none;width:var(--sw);height:100%;scroll-snap-align:center;scroll-snap-stop:always;border:var(--stroke) solid #000;
  border-radius:24px;overflow:hidden;background:#EEE;transform-origin:50% 50%;will-change:transform}
.slide + .slide{margin-left:calc(var(--sw) * -.0275)}
.slide img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.gallery:focus-visible .slide.is-current{outline:2px solid var(--purple);outline-offset:3px}

.gdots{display:flex;justify-content:center;align-items:center;gap:4.6px;height:6.2px;margin-top:15.8px}
.gdot{position:relative;flex:none;width:5.5px;height:5.5px;border-radius:3.1px;background:#DCDCDC;
  transition:width .28s cubic-bezier(.3,.75,.2,1),height .28s ease,background-color .28s ease}
.gdot::after{content:"";position:absolute;inset:-9px -2.3px}
.gdot.is-active{width:24.5px;height:6.2px;background:#FF8142}

.ptitle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24.1px;padding:0 var(--pad)}
.ptitle{margin:0;font:600 18px/24px var(--font);letter-spacing:-.05px;color:#000}
.fav{position:relative;flex:none;width:24px;height:24px;display:grid;place-items:center;margin-right:4.5px;transform:translateY(.65px)}
.fav::after{content:"";position:absolute;inset:-10px}
.fav svg{width:21.2px;height:21.2px;display:block;overflow:visible}
.fav path{fill:transparent;stroke:#000;stroke-width:1.5;stroke-linejoin:round;transition:fill .2s ease,stroke .2s ease}
.fav.is-on path{fill:var(--heart);stroke:var(--heart)}
.fav.pop svg{animation:pop .42s cubic-bezier(.3,.75,.2,1)}
@keyframes pop{35%{transform:scale(1.3)}70%{transform:scale(.94)}}

.pdesc{margin:14.76px 0 0;padding:0 var(--pad);font:400 14px/25.4px var(--font);letter-spacing:.15px;color:#393939}

.review-row{display:flex;align-items:center;justify-content:space-between;width:100%;height:24px;margin-top:11.7px;padding:0 var(--pad);text-align:left}
.rv-label{font:400 14px/20px var(--font);letter-spacing:.15px;color:#000;transform:translateY(1px);white-space:nowrap}
.rv-label b{font-weight:700;letter-spacing:0}
.rv-right{display:flex;align-items:center;margin-right:3.9px;transform:translateY(.7px)}
.stars{display:flex;gap:4.6px}
.stars svg{width:17.4px;height:16.4px;display:block}
.rv-num{margin-left:8.9px;font:400 14px/20px var(--font);letter-spacing:-.3px;color:#000}
.rv-chev{flex:none;width:10px;height:17px;margin-left:12.3px}

.dash{height:1.8px;margin:31.9px 30.5px 0 26.5px;background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.93px);
  background-position:-2.43px 0}

.qty-row{display:flex;align-items:center;justify-content:space-between;height:24px;margin-top:21.6px;padding:0 var(--pad)}
.stepper{display:flex;align-items:center;margin-left:1.05px}
.step{position:relative;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.step::after{content:"";position:absolute;inset:-9px}
.step svg{width:24px;height:24px;display:block}
.step.is-min{cursor:default}
.qty{display:block;width:41.6px;text-align:center;font:700 18px/24px var(--font);color:#000;transform:translateY(.7px)}
.pprice{margin-right:2.6px;transform:translateY(-.7px);text-align:right;font:600 17px/24px var(--font);letter-spacing:-.5px;color:#000;white-space:nowrap}

.pfoot{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:16px var(--pad) var(--foot-b);background:#fff}
.btn{height:52px;border:var(--stroke) solid #000;border-radius:12px;background:#fff;color:#000;font:400 16px/1 var(--font);white-space:nowrap}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 10px 24px -6px rgba(175,82,223,.62)}
.btn.is-done{background:#F4ECFA}

/* ============ Cart ============ */
.cart-list{padding-top:16.4px}
.ci-wrap{position:relative}
.ci{position:relative;height:66px;margin:0 var(--pad)}
.ci-main{position:relative;z-index:1;display:flex;align-items:flex-start;height:100%;touch-action:pan-y;will-change:transform}
.ci-thumb{flex:none;width:66px;height:66px;border-radius:11px;object-fit:cover;background:#EEE;-webkit-user-drag:none;user-select:none;pointer-events:none}
.ci-info{flex:1;min-width:0;margin-left:16.5px}
.ci-name{margin:2.6px 0 0;font:600 14px/20px var(--font);letter-spacing:-.1px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-ctrl{display:flex;align-items:center;justify-content:space-between;height:24px;margin-top:13.1px}
.ci-step{display:flex;align-items:center;margin-left:-1.4px}
.cstep{position:relative;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.cstep::after{content:"";position:absolute;inset:-9px -4px}
.cstep svg{width:24px;height:24px;display:block}
.ci-qty{width:30px;text-align:center;font:600 14px/20px var(--font);color:#000}
.ci-price{text-align:right;font:700 14px/20px var(--font);color:#000;margin-right:.7px;transform:translateY(.6px)}
.ci-del{position:absolute;right:-.7px;top:-.5px;width:41.9px;height:67.3px;display:grid;place-items:center;border:var(--stroke) solid #000;
  border-radius:10px;background:#fff;opacity:0;transform:scale(.7);transition:none}
.ci-del svg{width:26px;height:26px}
.ci-sep{height:48.4px;display:flex;align-items:center;padding:0 var(--pad);overflow:hidden}
.ci-dash{flex:1;height:1px;background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.97px);background-position:-2.06px 0}
.ci-wrap:last-child .ci-sep{height:0}

.promo{position:relative;display:flex;align-items:center;height:58.4px;margin:32.1px 22.66px 0;padding:0 16.8px 0 24.2px;
  border-radius:13px;background:#F6F6F6}
.promo input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0;margin:0;
  font:400 15px var(--font);letter-spacing:-.15px;color:#000;text-transform:uppercase}
.promo input::placeholder{color:#1A1A1A;opacity:1;text-transform:none}
.promo-btn{flex:none;width:72.8px;height:35.7px;border-radius:8.5px;background:#000;color:#fff;font:600 14px/1 var(--font)}
.promo.is-applied .promo-btn{background:#fff;color:#000;box-shadow:inset 0 0 0 var(--stroke) #000}
.promo.is-applied input{font-weight:600;letter-spacing:.4px}
.promo-ok{display:none;flex:none;width:20px;height:20px;margin-right:10px;border-radius:50%;background:#1FAF5A;place-items:center}
.promo.is-applied .promo-ok{display:grid}
.promo-ok svg{width:12px;height:12px}

.summary{padding-top:34.9px}
.sum-row{display:flex;justify-content:space-between;align-items:center;height:20px;padding:0 24.2px 0 23.7px}
.sum-row + .sum-row{margin-top:17.09px}
.sum-row.r3{margin-top:14.34px}
.sum-row span{font:400 14px/20px var(--font);letter-spacing:.05px;color:#3C3C3C}
.sum-row b{text-align:right;font:600 14px/20px var(--font);letter-spacing:.15px;color:#1D1D1D}
.sum-row b.neg{color:#E4743F}
.summary .dash{margin-top:20.41px}
.sum-row.total{margin-top:15.48px}
.sum-row.total span,.sum-row.total b{font-weight:700;letter-spacing:0;color:#212121}
.sum-row.total b{color:#1D1D1D}
.cart-foot{flex:none;padding:16px var(--pad) calc(var(--foot-b) - 2.1px);background:#fff}
.cart-foot .btn{width:100%}
.btn[aria-disabled="true"]{opacity:.45;box-shadow:none}

.cart-empty{display:none;flex-direction:column;align-items:center;text-align:center;padding:90px 30px 0}
.cart-empty h3{margin:18px 0 6px;font:600 18px/24px var(--font)}
.cart-empty p{margin:0 0 20px;font:400 14px/21px var(--font);color:var(--muted);max-width:250px}
.cart-empty .bowl{width:84px;height:84px;display:grid;place-items:center;border:var(--stroke) solid #000;border-radius:26px;background:#F6F6F6}
.view.is-empty .cart-empty{display:flex}
.view.is-empty .cart-list,.view.is-empty .promo,.view.is-empty .summary{display:none}

/* ============ Payment sheet ============ */
.sheet.pay-sheet{padding:18.75px 0 calc(var(--foot-b) - 1.5px);max-height:calc(100% - var(--sb) - 8px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.pay-sheet::-webkit-scrollbar{display:none}
.grabber.dark{background:#000;height:3.4px}
.sheet-title.pay-title{margin-top:23px}
.pay-card{position:relative;margin:0 22.66px;border:var(--stroke) solid #000;border-radius:21px;background:#fff;overflow:hidden}
.pm-card{margin-top:25.45px;height:111px}
.pm-row{position:relative;display:block;width:100%;height:108px;text-align:left}
.pm-logo{position:absolute;left:36.6px;top:50%;width:33px;height:20.4px;display:grid;place-items:center;transform:translateY(-50%)}
.pm-logo svg{width:100%;height:100%;display:block}
.pm-text{position:absolute;left:103.7px;top:25.3px}
.pm-num{display:flex;align-items:baseline;height:22px;font:700 17px/22px var(--font);letter-spacing:1.6px;color:#292929;white-space:nowrap}
.pm-num .stars{font-weight:600;letter-spacing:.2px;margin-right:7.6px}
.pm-label{display:block;margin-top:19.16px;font:400 14px/20px var(--font);letter-spacing:.6px;color:#606060;white-space:nowrap}
.pm-chev{position:absolute;right:32px;top:50%;width:12px;height:8px;margin-top:-4px;transition:transform var(--dur-snap) var(--ease-snap)}
.pm-card.is-open .pm-chev{transform:rotate(180deg)}
.pm-opt{position:relative;display:flex;align-items:center;width:100%;height:58px;padding:0 20px 0 36.6px;text-align:left;
  transition:background-color .15s ease}
.pm-opt::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:#EDEDED}
.pm-opt:active{background:#F6F6F6}
.pm-opt .pm-logo{position:static;transform:none;flex:none;margin-right:35.5px}
.pm-opt b{display:block;font:600 14px/19px var(--font);color:#000}
.pm-opt small{display:block;font:400 12px/16px var(--font);letter-spacing:.2px;color:#7A7A7A}

.addr-card{margin-top:22.6px;min-height:117px;padding:23.7px 58px 23.9px 62.3px}
.addr-ic{position:absolute;left:23.3px;top:23.65px;width:22.5px;height:22.5px}
.addr-label{font:600 12px/16px var(--font);letter-spacing:.1px;color:#222}
.addr-text,.addr-input{display:block;width:100%;max-width:212px;margin:9.2px 0 0;font:400 14px/20.6px var(--font);letter-spacing:.55px;color:#686868}
.addr-text[hidden],.addr-input[hidden]{display:none}
.addr-input{min-height:41.2px;padding:0;border:0;outline:0;resize:none;background:transparent;color:#000;
  box-shadow:0 1.5px 0 var(--purple);border-radius:0;overflow:hidden;font-family:var(--font)}
.addr-edit{position:absolute;right:18.9px;top:19.2px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px}
.addr-edit svg{width:24px;height:24px;grid-area:1/1;transition:opacity .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.addr-edit .ok{opacity:0;transform:scale(.4)}
.addr-edit.is-save .pen{opacity:0;transform:scale(.4)}
.addr-edit.is-save .ok{opacity:1;transform:none}

.pay-total{display:flex;justify-content:space-between;align-items:center;height:20px;margin-top:34.2px;padding:0 24.2px 0 21.7px;
  font:700 14px/20px var(--font);color:#202020}
.pay-total b{letter-spacing:.15px;color:#1D1D1D;text-align:right}
.pay-dash{height:1px;margin:33.5px 30px 0 24px;background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.97px)}
.pay-foot{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:30.4px;padding:0 var(--pad) 0 var(--pad)}
.edit-order{justify-self:center;height:52px;padding:0 6px;transform:translate(-5.7px,-2px);font:500 15px/1 var(--font);color:#0E0E0E;
  text-decoration:underline;text-decoration-thickness:1.3px;text-underline-offset:2px}
.edit-order:active{opacity:.6}
.pay-btn{position:relative;overflow:hidden}
.pay-btn .pay-lbl{display:inline-block;transition:opacity .2s ease,transform var(--dur-snap) var(--ease-snap)}
.pay-spin{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2.4px solid rgba(255,255,255,.3);border-top-color:#fff;opacity:0;transition:opacity .2s ease}
.pay-ok{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;opacity:0;transform:scale(.3)}
.pay-btn.is-loading .pay-lbl,.pay-btn.is-paid .pay-lbl{opacity:0;transform:translateY(-10px)}
.pay-btn.is-loading .pay-spin{opacity:1;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pay-btn.is-paid .pay-ok{opacity:1;transform:none;transition:opacity .15s ease,transform var(--dur-bounce) var(--ease-bounce)}
.pay-btn.is-paid .pay-ok path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .42s .06s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pay-sheet.is-busy .edit-order,.pay-sheet.is-busy .pay-card{pointer-events:none;opacity:.55;transition:opacity .25s ease}

/* ============ Order status ============ */
.st-body{padding:calc(var(--sb) + 36px) 0 16px;text-align:center}
.st-art{width:200px;height:150px;margin:0 auto}
.st-art svg{width:100%;height:100%;display:block;overflow:visible}
.st-title{margin:43.4px 0 0;font:700 20px/26px var(--font);letter-spacing:-.18px;color:#000}
.st-sub{margin:16.4px 0 0;padding:0 12px;font:400 12px/16px var(--font);letter-spacing:.065px;color:#4C4C4C}
.st-steps{list-style:none;margin:32.5px 0 0;padding:0 23px 0 25px;text-align:left}
.st-step{display:flex;align-items:flex-start;gap:12.6px}
.st-step + .st-step{margin-top:23.8px}
.sti{position:relative;flex:none;width:57px;height:57px;border-radius:13px;display:grid;place-items:center;background:#EAEAEA;
  transition:background-color .5s ease}
.sti .box{position:absolute;left:.7px;top:.7px;width:calc(100% - 1.4px);height:calc(100% - 1.4px);overflow:visible}
.sti .box rect{fill:none;stroke:#000;stroke-width:1.4;stroke-dasharray:3.6 3.2}
.sti .ic{position:relative;width:27px;height:27px}
.st-step.is-done .sti{background:#E4EFE5}
.st-step.is-now .sti{background:#F5ECE7}
.st-step h3{margin:3.69px 0 0;font:600 15px/20px var(--font);letter-spacing:-.1px;color:#000}
.st-step p{max-width:250px;margin:8.76px 0 0;font:400 12px/18px var(--font);letter-spacing:.07px;color:#474747}
.st-foot{flex:none;display:grid;gap:27px;padding:16px var(--pad) calc(var(--foot-b) - 1.5px);background:#fff}
.st-foot .btn{width:100%}

/* illustration motion: pop-in, confetti burst, drifting pieces, ticking hand, breathing current step */
.st-art .sw,.st-art .cf,.st-art .fl{transform-box:fill-box;transform-origin:center}
.st-art .sw{transform-origin:50% 62%}
.st-art .hand{transform-box:view-box;transform-origin:104px 79px;animation:spinHand 7s linear infinite}
@keyframes spinHand{to{transform:rotate(360deg)}}
.st-art .fl{animation:floaty 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.41s)}
@keyframes floaty{from{transform:translateY(-2.6px) rotate(-8deg)}to{transform:translateY(2.6px) rotate(8deg)}}
.play .st-art .sw{animation:swIn var(--dur-bounce) var(--ease-bounce) .2s backwards}
@keyframes swIn{from{transform:scale(.4) rotate(-16deg);opacity:0}}
.play .st-art .cf{animation:burst var(--dur-bounce) var(--ease-bounce) backwards;animation-delay:calc(.34s + var(--i) * 40ms)}
@keyframes burst{from{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
.play .st-title,.play .st-sub,.play .st-step,.play .st-foot .btn{animation:rise var(--dur-smooth) var(--ease-smooth) backwards}
.play .st-title{animation-delay:.3s}.play .st-sub{animation-delay:.36s}
.play .st-step:nth-child(1){animation-delay:.44s}.play .st-step:nth-child(2){animation-delay:.52s}.play .st-step:nth-child(3){animation-delay:.6s}
.play .st-foot .btn:nth-child(1){animation-delay:.66s}.play .st-foot .btn:nth-child(2){animation-delay:.72s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.st-step.is-now .ic{animation:breathe 1.7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.1) rotate(-4deg)}}

@media (max-height:720px){.st-body{padding-top:calc(var(--sb) + 12px)}.st-title{margin-top:24px}.st-steps{margin-top:24px}.st-step + .st-step{margin-top:18px}}

/* track sheet */
.sheet-title.tr-title{margin-top:22px}
.tr-eta{margin:6px 0 0;text-align:center;font:400 13px/18px var(--font);color:#4C4C4C}
.tr-eta b{font-weight:600;color:var(--purple)}
.tr-bar{position:relative;height:6px;margin:16px var(--pad) 0;border-radius:3px;background:#EFEFEF;overflow:hidden}
.tr-bar span{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:3px;background:var(--purple);transition:width .9s var(--ease-smooth)}
.tr-legend{display:flex;justify-content:space-between;margin:8px var(--pad) 0;font:500 11px/14px var(--font);color:#9A9A9A}
.tr-legend .on{color:#000}
.tr-list{list-style:none;margin:18px var(--pad) 0;padding:12px 0 0;background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.97px) top/100% 1px no-repeat}
.tr-list li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font:400 14px/20px var(--font);color:#1D1D1D}
.tr-list li b{font-weight:600}
.tr-row{display:flex;justify-content:space-between;gap:12px;margin:10px var(--pad) 0;font:700 14px/20px var(--font);color:#1D1D1D}
.tr-row.soft{font-weight:400;color:#4C4C4C}
.tr-row.soft b{font-weight:600;color:#1D1D1D;text-align:right}
.tr-addr{margin:6px var(--pad) 0;font:400 13px/19px var(--font);color:#5A5A5A}
.tr-foot{margin-top:22px;padding:0 var(--pad)}
.tr-foot .btn{width:100%}

/* ============ Reviews ============ */
.rv-head{position:relative;flex:none;display:flex;align-items:center;height:52.2px;margin-top:calc(var(--sb) + 20.2px);padding:0 23px 0 12.7px}
.rv-head .nav-btn{margin-right:11.3px}
.rv-thumb{width:52.2px;height:52.2px;border-radius:12px;object-fit:cover;background:#EEE;box-shadow:0 0 0 1px #E4E4E4}
.rv-add{margin-left:auto;padding:10px 0 10px 14px;font:700 15px/20px var(--font);color:#8E3BBB;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.rv-add:active{opacity:.6}
.rv-title{margin:39.7px 0 0;text-align:center;font:700 24px/30px var(--font);letter-spacing:-.1px;color:#000}
.rv-count{margin:12.5px 0 0;text-align:center;font:400 12px/16px var(--font);letter-spacing:.12px;color:#585858}
.rv-dash{height:1.2px;margin:28.15px 29px 0 26px;background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.93px);background-position:-2.4px 0}
.rv-bar{display:flex;align-items:center;justify-content:space-between;margin-top:20.3px;padding:0 24px 0 22px}
.rv-sort{display:flex;align-items:center;gap:13.7px;height:50px;padding:0 22.5px 0 18.4px;border:var(--stroke) solid #000;border-radius:13px;
  background:#fff;font:400 15px/1 var(--font);color:#000}
.rv-sort svg{width:17.2px;height:13.8px;flex:none}
.rv-sort[aria-expanded="true"]{background:#F4F4F4}
.rv-score{display:flex;align-items:center;gap:12px;font:400 14px/20px var(--font);letter-spacing:-.3px;color:#000}
.rv-score .stars{display:flex;gap:4.6px}
.rv-score .stars svg{width:17.4px;height:16.4px;display:block}
.rv-list{list-style:none;margin:30.9px 0 0;padding:0 23px 0 22px}
.rv-item{display:flex;gap:11.6px}
.rv-item + .rv-item{margin-top:23.75px}
.rv-av{flex:none;width:47.4px;height:47.4px;border-radius:50%;border:var(--stroke) solid #000;overflow:hidden;background:#EEE}
.rv-av img{width:100%;height:100%;display:block}
.rv-main{flex:1;min-width:0}
.rv-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:1.27px}
.rv-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px/20px var(--font);letter-spacing:-.1px;color:#000}
.rv-date{flex:none;font:400 12px/20px var(--font);letter-spacing:.05px;color:#2E2E2E}
.rv-stars{display:flex;gap:7px;height:12.6px;margin-top:7.4px}
.rv-stars svg{width:13.2px;height:12.6px;display:block}
.rv-text{margin:19.71px 0 0;font:400 14px/24.73px var(--font);letter-spacing:.18px;color:#232423;overflow-wrap:anywhere}
.rv-item.is-mine .rv-name::after{content:"You";margin-left:8px;padding:2px 7px;border-radius:6px;background:#F1E6F9;color:var(--purple);
  font:600 10px/14px var(--font);letter-spacing:.2px;vertical-align:2px}
.rv-item.is-new{animation:rvNew 1.6s ease both}
@keyframes rvNew{0%,40%{background:#F7EEFC}100%{background:transparent}}
.rv-item.rv-in{animation:rise var(--dur-smooth) var(--ease-smooth) backwards}
.rv-more{height:60px;display:grid;place-items:center;font:400 12px var(--font);color:#9A9A9A}
.rv-more .spin{width:18px;height:18px;border-radius:50%;border:2px solid #E3E3E3;border-top-color:#9A9A9A;animation:spin .8s linear infinite}

/* iOS-style context menu for sorting */
.rv-menu-layer{position:absolute;inset:0;z-index:40;visibility:hidden}
.rv-menu-layer.is-open{visibility:visible}
.rv-menu{position:absolute;left:22px;top:0;width:214px;padding:6px 0;border-radius:14px;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:0 18px 48px -12px rgba(0,0,0,.32),0 0 0 .5px rgba(0,0,0,.12);transform-origin:18px 0;
  opacity:0;transform:scale(.55);transition:opacity .18s ease,transform .3s cubic-bezier(.4,0,.6,1)}
.rv-menu-layer.is-open .rv-menu{opacity:1;transform:none;transition:opacity .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.rv-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 16px;
  font:400 15px/1 var(--font);color:#000;text-align:left}
.rv-menu button + button{box-shadow:inset 0 .5px 0 rgba(0,0,0,.14)}
.rv-menu button:active{background:rgba(0,0,0,.06)}
.rv-menu button svg{width:16px;height:16px;opacity:0}
.rv-menu button[aria-checked="true"]{font-weight:600}
.rv-menu button[aria-checked="true"] svg{opacity:1}

/* write a review sheet */
.ar-dish{margin:4px 0 0;text-align:center;font:400 13px/18px var(--font);color:#585858}
.ar-stars{display:flex;justify-content:center;gap:10px;margin-top:20px}
.ar-stars button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.ar-stars svg{width:34px;height:34px;overflow:visible}
.ar-stars path{fill:#fff;stroke:#FFAC0E;stroke-width:1.5;stroke-linejoin:round;transition:fill .15s ease}
.ar-stars button.on path{fill:#FFAC0E}
.ar-stars button.pop svg{animation:pop .42s cubic-bezier(.3,.75,.2,1)}
.ar-hint{margin:8px 0 0;text-align:center;font:500 13px/18px var(--font);color:#9A9A9A;min-height:18px}
.ar-hint.on{color:#000}
.ar-field{position:relative;margin:16px var(--pad) 0;border-radius:13px;background:#F6F6F6}
.ar-field .cb-dash{left:.75px;top:.75px}
.ar-field textarea,.ar-field input{position:relative;display:block;width:100%;padding:14px 16px;border:0;outline:0;background:transparent;resize:none;
  font:400 14px/21px var(--font);color:#000}
.ar-field textarea::placeholder,.ar-field input::placeholder{color:#8A8A8A}
.ar-field.name{margin-top:12px}
.ar-field.name input{height:48px;padding:0 16px}
.ar-foot{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:22px;padding:0 var(--pad)}

/* ============ Tabs: panels + sliding indicator ============ */
.tabpanel[hidden]{display:none}
.tabpanel.tp-in{animation:tpIn var(--dur-smooth) var(--ease-smooth) backwards}
@keyframes tpIn{from{opacity:0;transform:translateY(10px) scale(.99)}}
.tabs{isolation:isolate}
.tab-ind{position:absolute;left:0;top:0;width:56px;height:56px;border:var(--stroke) solid #000;border-radius:14px;pointer-events:none;z-index:-1;will-change:transform}
.tab{border-color:transparent!important}
.tab .on{display:none}.tab .off{display:block}
.tab.is-active .on{display:block}.tab.is-active .off{display:none}
.tab.is-active .avatar{box-shadow:0 0 0 2px #fff,0 0 0 3.6px var(--purple)}
.tab.bump svg,.tab.bump .avatar{animation:pop .42s cubic-bezier(.3,.75,.2,1)}
.tp-head{padding:16.8px var(--pad) 0 calc(var(--pad) + .7px)}
.tp-count{margin:14px var(--pad) 0;font:400 13px/18px var(--font);color:#585858}
.tp-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:70px 34px 0;animation:rise var(--dur-smooth) var(--ease-smooth) backwards}
.tp-empty .sti{width:72px;height:72px;border-radius:18px}
.tp-empty .sti .ic{width:32px;height:32px}
.tp-empty h3{margin:18px 0 6px;font:600 18px/24px var(--font)}
.tp-empty p{margin:0 0 20px;font:400 14px/21px var(--font);color:var(--muted);max-width:250px}

/* favorites */
.fav-grid{padding-top:18px}
.card-fav{position:absolute;right:8px;top:7px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #000}
.card-fav svg{width:16px;height:16px}
.card-fav:active{transform:scale(.9)}

/* orders */
.ord-list{list-style:none;margin:20px var(--pad) 0;padding:0}
.ord{position:relative;padding:16px 16px 14px;border:var(--stroke) solid #000;border-radius:18px;background:#fff;animation:rise var(--dur-smooth) var(--ease-smooth) backwards}
.ord + .ord{margin-top:14px}
.ord-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ord-top b{font:700 15px/20px var(--font);color:#000}
.ord-pill{flex:none;padding:3px 9px;border-radius:999px;font:600 11px/16px var(--font);letter-spacing:.2px}
.ord-pill.live{background:#F1E6F9;color:#8E3BBB}
.ord-pill.live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#AF52DF;vertical-align:1px;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.ord-pill.done{background:#E4EFE5;color:#2F7A3A}
.ord-date{margin:2px 0 0;font:400 12px/17px var(--font);color:#7A7A7A}
.ord-mid{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 0;
  background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.97px) top/100% 1px no-repeat,
             repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.97px) bottom/100% 1px no-repeat}
.ord-thumbs{display:flex;flex:none}
.ord-thumbs img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px #000;background:#EEE}
.ord-thumbs img + img{margin-left:-12px}
.ord-items{margin:0;min-width:0;font:400 13px/18px var(--font);color:#393939;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ord-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.ord-total{font:700 15px/20px var(--font);letter-spacing:.15px;color:#000}
.ord-btns{display:flex;gap:8px}
.btn-mini{height:36px;padding:0 14px;border:var(--stroke) solid #000;border-radius:10px;background:#fff;font:500 13px/1 var(--font);color:#000;
  transition:transform var(--dur-bounce) var(--ease-bounce)}
.btn-mini.primary{background:var(--purple);color:#fff;box-shadow:0 8px 18px -8px rgba(175,82,223,.7)}
.btn-mini:active{transform:scale(.94);transition:transform .1s ease-out}

/* profile */
.pf-card{margin:18px var(--pad) 0;padding:22px 18px 18px;border:var(--stroke) solid #000;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,#F7EEFC 0%,#fff 62%)}
.pf-av{width:78px;height:78px;border-radius:50%;border:var(--stroke) solid #000;display:block;margin:0 auto}
.pf-namebtn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:2px 4px;border-radius:8px}
.pf-namebtn h1{margin:0;font:600 20px/26px var(--font);letter-spacing:.2px;color:#000}
.pf-namebtn svg{width:16px;height:16px;opacity:.55}
.pf-sub{margin:2px 0 0;font:400 13px/18px var(--font);color:#7A7A7A}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;padding-top:14px;
  background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.97px) top/100% 1px no-repeat}
.pf-stats b{display:block;font:700 18px/24px var(--font);color:#000}
.pf-stats span{font:400 12px/16px var(--font);color:#7A7A7A}
.pf-stats > div + div{box-shadow:inset 1px 0 0 #EDEDED}
.pf-group{margin:16px var(--pad) 0;border:var(--stroke) solid #000;border-radius:18px;overflow:hidden;background:#fff}
.pf-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;text-align:left;cursor:pointer;
  transition:background-color .15s ease}
.pf-row + .pf-row::before{content:"";position:absolute;left:62px;right:0;top:0;height:1px;background:#EDEDED}
.pf-row:active{background:#F6F6F6}
.pf-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#F5ECE7}
.pf-ic svg{width:20px;height:20px}
.pf-row:nth-child(2) .pf-ic{background:#E9F1FB}.pf-row:nth-child(3) .pf-ic{background:#E4EFE5}.pf-row:nth-child(4) .pf-ic{background:#F1E6F9}
.pf-txt{flex:1;min-width:0}
.pf-txt b{display:block;font:600 14px/19px var(--font);color:#000}
.pf-txt small{display:block;margin-top:1px;font:400 12px/16px var(--font);color:#7A7A7A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-chev{flex:none;width:8px;height:14px}
.pf-row.danger b{color:#D93A2F}
.pf-row.danger .pf-ic{background:#FBE7E5}
.pf-foot{margin:18px 0 0;text-align:center;font:400 12px/16px var(--font);color:#A0A0A0}
/* iOS switch */
.switch{flex:none;appearance:none;-webkit-appearance:none;position:relative;width:51px;height:31px;margin:0;border-radius:16px;background:#E6E6EA;
  cursor:pointer;transition:background-color .25s ease}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.08);transition:transform var(--dur-snap) var(--ease-snap)}
.switch:checked{background:var(--purple)}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* filter sheet + form sheet */
.fl-sec{margin:18px var(--pad) 0}
.fl-sec h3{margin:0 0 10px;font:600 14px/19px var(--font);color:#000}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 14px;border:var(--stroke) solid #000;border-radius:10px;background:#fff;font:500 13px/1 var(--font);color:#000;
  transition:background-color .2s ease,color .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.chip:active{transform:scale(.94);transition:transform .1s ease-out}
.chip[aria-pressed="true"]{background:#000;color:#fff}
.fl-foot{display:grid;grid-template-columns:1fr 1.4fr;gap:15px;margin-top:26px;padding:0 var(--pad)}
.filter-btn{position:relative}
.filter-btn.is-on::after{content:"";position:absolute;right:5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 2px var(--field)}
.fm-body{margin:16px var(--pad) 0}
.fm-opts{display:grid;gap:10px}
.fm-opt{display:flex;align-items:center;gap:14px;width:100%;height:58px;padding:0 16px;border:var(--stroke) solid #000;border-radius:14px;background:#fff;text-align:left}
.fm-opt .pm-logo{position:static;transform:none}
.fm-opt b{flex:1;font:600 14px/19px var(--font)}
.fm-opt i{width:20px;height:20px;border-radius:50%;border:var(--stroke) solid #000;display:grid;place-items:center;font-style:normal}
.fm-opt[aria-checked="true"]{background:#F7EEFC}
.fm-opt[aria-checked="true"] i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--purple)}
.btn-danger{background:#D93A2F!important;color:#fff!important;box-shadow:0 10px 24px -8px rgba(217,58,47,.6)}

/* ============ Hero flight, Dynamic Island, heart burst, sticky categories, context menu ============ */
.hero-fly{position:absolute;left:0;top:0;z-index:39;overflow:hidden;border:var(--stroke) solid #000;background:#EEE;pointer-events:none;will-change:transform,width,height}
.hero-fly img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.cats-wrap{position:sticky;top:0;z-index:6;margin-top:15px;padding:8px 0;transition:background-color .3s ease,box-shadow .3s ease}
.cats-wrap .cats{margin-top:0}
.cats-wrap.is-stuck{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 1px 0 rgba(0,0,0,.07),0 12px 22px -20px rgba(0,0,0,.45)}
#grid{padding-top:16.25px}
@media (max-width:500px){.cats-wrap{top:calc(var(--sb) * -1)}}

.island{position:absolute;left:50%;top:10px;z-index:48;display:flex;align-items:center;gap:11px;width:124px;height:36px;padding:0 10px;
  border-radius:20px;background:#000;color:#fff;overflow:hidden;opacity:0;pointer-events:none;transform:translateX(-50%) scale(.55);text-align:left;
  transition:width var(--dur-snap) var(--ease-snap),height var(--dur-snap) var(--ease-snap),border-radius var(--dur-snap) var(--ease-snap),
    transform var(--dur-bounce) var(--ease-bounce),opacity .2s ease}
.island.show{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto;cursor:pointer}
.island.wide{width:332px;max-width:calc(100% - 26px);height:62px;border-radius:31px}
.island img{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;opacity:0;transform:scale(.5);
  transition:opacity .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.isl-txt{flex:1;min-width:0;opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform var(--dur-snap) var(--ease-snap)}
.isl-txt b{display:block;font:600 14px/18px var(--font);white-space:nowrap}
.isl-txt span{display:block;font:400 12px/16px var(--font);color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isl-go{flex:none;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:16px;background:var(--purple);
  font:600 12px/1 var(--font);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.isl-go svg{width:15px;height:15px}
.island.wide img,.island.wide .isl-txt,.island.wide .isl-go{opacity:1;transform:none;transition-delay:.08s}
@media (max-width:500px){.island{top:8px;transition-property:width,height,border-radius,transform,opacity,left}
  .island.mode-live:not(.wide){left:calc(100% - 133px)}}

.burst,.burst-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.burst{width:5px;height:5px}
.burst-ring{width:26px;height:26px;border:2px solid #DA2827}

.card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ctx-layer{position:absolute;inset:0;z-index:46;visibility:hidden;transition:visibility 0s linear .3s}
.ctx-layer.is-open{visibility:visible;transition:visibility 0s}
.ctx-backdrop{position:absolute;inset:0;background:rgba(20,16,26,.14);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);opacity:0;transition:opacity .28s ease}
.ctx-layer.is-open .ctx-backdrop{opacity:1}
.ctx-card{position:absolute;left:0;top:0;transition:transform var(--dur-bounce) var(--ease-bounce)}
.ctx-card .card{pointer-events:none}
.ctx-card .card-img{box-shadow:0 26px 48px -20px rgba(0,0,0,.5)}
.ctx-layer.is-open .ctx-card{transform:scale(1.045)}
.ctx-menu{position:absolute;left:0;top:0;width:226px;opacity:0;transform:scale(.55);transition:opacity .18s ease,transform .28s cubic-bezier(.4,0,.6,1)}
.ctx-layer.is-open .ctx-menu{opacity:1;transform:none;transition:opacity .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.ctx-menu button svg{opacity:1;width:18px;height:18px}
.ctx-menu button.warn{color:#D93A2F}

/* ============ Live Activity, photo viewer, search suggestions ============ */
.island .isl-live{display:none;position:relative;align-items:center;gap:10px;width:100%;height:100%}
.island.mode-live > img,.island.mode-live > .isl-txt,.island.mode-live > .isl-go{display:none}
.island.mode-live .isl-live{display:flex}
.island.mode-live{width:132px}
.island.mode-live.wide{width:332px;height:70px;border-radius:35px}
.isl-live-ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--purple);display:grid;place-items:center;transition:width var(--dur-snap) var(--ease-snap),height var(--dur-snap) var(--ease-snap)}
.island.wide .isl-live-ic{width:40px;height:40px}
.isl-live-ic svg{width:60%;height:60%}
.isl-live-ic.done{background:#34C759}
.isl-live-txt{flex:1;min-width:0;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform var(--dur-snap) var(--ease-snap)}
.island.wide .isl-live-txt{opacity:1;transform:none;transition-delay:.08s}
.isl-live-txt b{display:block;font:600 14px/18px var(--font);white-space:nowrap}
.isl-live-txt span{display:block;font:400 12px/16px var(--font);color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isl-live-eta{flex:none;margin-left:auto;font:600 13px/1 var(--font);color:#D9B3F2;font-variant-numeric:tabular-nums;transition:font-size var(--dur-snap) var(--ease-snap)}
.island.wide .isl-live-eta{font-size:20px}
.isl-live-bar{position:absolute;left:50px;right:0;bottom:-2px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);opacity:0;transition:opacity .2s ease}
.island.wide .isl-live-bar{opacity:1}
.isl-live-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--purple);transition:width .9s ease}
.tab.has-live{position:relative}
.tab.has-live::after{content:"";position:absolute;top:10px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 2px #fff;
  animation:blink 1.4s ease-in-out infinite}
.sti .done-badge{position:absolute;right:-6px;top:-6px;width:19px;height:19px;border-radius:50%;background:#5BA954;border:1.4px solid #1D1D1D;
  display:grid;place-items:center;transform:scale(0);transition:transform var(--dur-bounce) var(--ease-bounce)}
.sti .done-badge svg{width:11px;height:11px}
.st-step.is-done .done-badge{transform:scale(1)}
.st-step:nth-child(3).is-now .sti{background:#E6EFFA}
.st-title,.st-sub{transition:opacity .22s ease,transform .3s var(--ease-smooth)}
.st-title.swap,.st-sub.swap{opacity:0;transform:translateY(-6px)}

.viewer{position:absolute;inset:0;z-index:52;visibility:hidden}
.viewer.is-open{visibility:visible}
.vw-bg{position:absolute;inset:0;background:#000;opacity:0}
.vw-strip{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;opacity:0;overscroll-behavior:contain}
.vw-strip::-webkit-scrollbar{display:none}
.vw-strip.is-locked,.vw-strip.is-dragging{scroll-snap-type:none}
.vw-strip.is-locked{overflow:hidden}
.vw-slide{position:relative;flex:none;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;overflow:hidden;touch-action:pan-x}
.vw-slide img{width:100%;height:auto;max-height:100%;object-fit:contain;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;user-select:none}
.vw-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sb) + 8px) 16px 0;
  opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .35s var(--ease-smooth);pointer-events:none}
.viewer.show-ui .vw-top{opacity:1;transform:none;pointer-events:auto}
.vw-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.vw-btn svg{width:16px;height:16px}
.vw-count{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:600 13px/1 var(--font)}
.vw-dots{position:absolute;left:0;right:0;bottom:calc(var(--foot-b) + 18px);display:flex;justify-content:center;gap:6px;opacity:0;transition:opacity .25s ease}
.viewer.show-ui .vw-dots{opacity:1}
.vw-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);transition:width .3s var(--ease-snap),background-color .3s}
.vw-dots i.on{width:20px;background:#fff}
.slide{cursor:zoom-in}

#homeScroll{position:relative}
.suggest{position:absolute;left:var(--pad);right:var(--pad);z-index:8;max-height:410px;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 10px;
  border:var(--stroke) solid #000;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 24px 50px -24px rgba(0,0,0,.45);
  transform-origin:50% 0;opacity:0;transform:translateY(-6px) scale(.97);transition:opacity .18s ease,transform .3s var(--ease-smooth);scrollbar-width:none}
.suggest.is-open{opacity:1;transform:none;transition:opacity .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.suggest[hidden]{display:none}
.sg-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 8px}
.sg-head b{font:600 13px/18px var(--font);color:#000}
.sg-head button{font:500 12px/1 var(--font);color:#8E3BBB;padding:4px}
.sg-sec + .sg-sec{margin-top:14px}
.sg-sec .chips{gap:6px}
.sg-sec .chip{height:32px;padding:0 12px;font-size:12.5px}
.sg-list{list-style:none;margin:0;padding:0}
.sg-row{display:flex;align-items:center;gap:12px;width:100%;padding:7px 6px;border-radius:12px;text-align:left;animation:rise .45s var(--ease-smooth) backwards}
.sg-row:active,.sg-row:focus-visible{background:#F6F2FA}
.sg-row .card-img{flex:none;width:46px;height:46px;border-radius:11px}
.sg-row .card-img img{width:100%;height:100%;object-fit:cover}
.sg-name{flex:1;min-width:0;font:500 14px/19px var(--font);color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-name small{display:block;font:400 12px/16px var(--font);color:#7A7A7A}
.sg-name mark{background:#F1E6F9;color:#7A2FA8;border-radius:4px;padding:0 1px}
.sg-price{flex:none;font:600 13px/1 var(--font);color:#000}
.sg-empty{margin:6px 4px 4px;font:400 13px/19px var(--font);color:#7A7A7A}

.fly-x{position:absolute;z-index:47;width:0;height:0;pointer-events:none}
.fly-y{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;object-fit:cover;border:var(--stroke) solid #000;background:#EEE;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4)}

/* ============ Dish options, capsule messages, illustrations, confetti, fly-to-cart, tab micro-animations ============ */
/* dish options */
.opts{padding:0 var(--pad) 8px}
.opt-sep{height:1.2px;margin:26px 3.5px 0 3.5px;background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.93px)}
.opt-h{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 4px;font:700 17px/22px var(--font);color:#000}
.opt-h span{font:500 12px/1 var(--font);color:#8A8A8A}
.opt-group{margin-top:16px}
.opt-title{display:flex;justify-content:space-between;margin-bottom:10px;font:600 14px/19px var(--font);color:#000}
.opt-title em{font-style:normal;font-weight:500;color:#E0492F;transition:color .2s}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;height:44px;padding:4px;border:var(--stroke) solid #000;border-radius:13px;background:#F6F6F6}
.seg-pill{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:9px;background:#000;box-shadow:0 6px 14px -8px rgba(0,0,0,.6);
  transition:transform var(--dur-snap) var(--ease-snap)}
.seg[data-v="lg"] .seg-pill{transform:translateX(100%)}
.seg button{position:relative;z-index:1;font:600 14px/1 var(--font);color:#000;transition:color .25s ease}
.seg button small{font-weight:500;font-size:11.5px;opacity:.7}
.seg button[aria-checked="true"]{color:#fff}
.spice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.spice button{display:flex;flex-direction:column;align-items:center;gap:5px;height:62px;padding-top:9px;border:var(--stroke) solid #000;border-radius:13px;background:#fff;
  font:500 12px/1 var(--font);color:#000;transition:background-color .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.spice button:active{transform:scale(.95);transition:transform .1s ease-out}
.spice .chilis{display:flex;gap:1px;height:22px}
.spice .chilis svg{width:15px;height:22px}
.spice .chilis path{fill:#fff;stroke:#1D1D1D;stroke-width:1.4;transition:fill .2s ease}
.spice button[aria-checked="true"]{background:#FFF1EC}
.spice button[aria-checked="true"] .chilis path.c{fill:#E0492F}
.spice button[aria-checked="true"] .chilis svg{animation:chili .5s var(--ease-bounce) backwards}
.spice button[aria-checked="true"] .chilis svg:nth-child(2){animation-delay:.05s}.spice button[aria-checked="true"] .chilis svg:nth-child(3){animation-delay:.1s}
@keyframes chili{0%{transform:scale(.6) rotate(-20deg)}60%{transform:scale(1.15) rotate(6deg)}}
.addons{border:var(--stroke) solid #000;border-radius:15px;overflow:hidden}
.addon{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:52px;padding:0 14px;text-align:left;background:#fff;transition:background-color .15s ease}
.addon + .addon::before{content:"";position:absolute;left:48px;right:0;top:0;height:1px;background:#EDEDED}
.addon:active{background:#F7F7F7}
.chk{flex:none;width:22px;height:22px;border-radius:7px;border:var(--stroke) solid #000;display:grid;place-items:center;background:#fff;
  transition:background-color .2s ease,transform var(--dur-bounce) var(--ease-bounce)}
.chk svg{width:13px;height:13px}
.chk path{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .28s ease .05s}
.addon[aria-checked="true"] .chk{background:var(--purple);transform:scale(1.08)}
.addon[aria-checked="true"] .chk path{stroke-dashoffset:0}
.a-name{flex:1;font:500 14px/19px var(--font);color:#000}
.a-price{font:500 13px/1 var(--font);color:#6A6A6A}
.opts .ar-field{margin:0}
.custom-pill{position:absolute;left:50%;bottom:calc(var(--foot-b) + 60.6px);z-index:5;display:flex;align-items:center;gap:5px;height:28px;padding:0 12px 0 14px;
  border-radius:14px;background:#000;color:#fff;font:600 13px/1 var(--font);box-shadow:0 12px 26px -12px rgba(0,0,0,.6);
  transform:translate(-50%,16px) scale(.9);opacity:0;pointer-events:none;transition:opacity .25s ease,transform var(--dur-bounce) var(--ease-bounce)}
.custom-pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.custom-pill svg{width:12px;height:12px;animation:nudge 1.3s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(2.5px)}}
.ci-opts{margin:1px 0 0;font:400 11px/15px var(--font);color:#7A7A7A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci.has-opts .ci-name{margin-top:0}
.ci.has-opts .ci-ctrl{margin-top:4px}

/* capsule messages */
.island .isl-msg{display:none;align-items:center;gap:11px;width:100%;height:100%}
.island.mode-msg > img,.island.mode-msg > .isl-txt,.island.mode-msg > .isl-go,.island.mode-msg .isl-live{display:none}
.island.mode-msg .isl-msg{display:flex}
.island.mode-cart .isl-msg{display:none}
.isl-msg-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;transform:scale(.4);opacity:0;
  transition:transform var(--dur-bounce) var(--ease-bounce),opacity .2s ease}
.island.wide .isl-msg-ic{transform:none;opacity:1;transition-delay:.06s}
.isl-msg-ic svg{width:19px;height:19px}
.isl-act{cursor:pointer}
.isl-act[hidden]{display:none}

/* illustrations (same hand-drawn language as the stopwatch) */
.illo{display:block;width:170px;height:128px;margin:0 auto;overflow:visible}
.illo .bob{transform-box:fill-box;transform-origin:50% 100%;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(-2deg)}}
.illo .beat{transform-box:fill-box;transform-origin:center;animation:beatS 1.8s ease-in-out infinite}
@keyframes beatS{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(.97)}45%{transform:scale(1.05)}}
.illo .sweep{transform-box:fill-box;transform-origin:30% 30%;animation:sweep 3s ease-in-out infinite}
@keyframes sweep{25%{transform:rotate(-9deg)}75%{transform:rotate(7deg)}}
.illo .fl{transform-box:fill-box;transform-origin:center;animation:floaty 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.41s)}
.st-art .il{transform-box:fill-box;transform-origin:50% 70%;transition:opacity .35s ease,transform var(--dur-bounce) var(--ease-bounce)}
.st-art .il-scooter,.st-art .il-cloche{opacity:0;transform:scale(.5) translateY(10px)}
.st-art.ph-onway .sw,.st-art.ph-delivered .sw{opacity:0;transform:scale(.5)}
.st-art .sw{transition:opacity .35s ease,transform var(--dur-bounce) var(--ease-bounce)}
.st-art.ph-onway .il-scooter,.st-art.ph-delivered .il-cloche{opacity:1;transform:none}
.il-scooter .ride{transform-box:fill-box;animation:ride .42s ease-in-out infinite alternate}
@keyframes ride{to{transform:translateY(-2px) rotate(-.8deg)}}
.il-scooter .wheel{transform-box:fill-box;transform-origin:center;animation:spinHand .55s linear infinite}
.il-scooter .speed path{stroke-dasharray:14 30;animation:speed .6s linear infinite}
@keyframes speed{to{stroke-dashoffset:44}}
.il-cloche .lid{transform-box:fill-box;transform-origin:10% 100%;animation:lid 2.8s ease-in-out infinite}
@keyframes lid{0%,55%,100%{transform:none}20%,38%{transform:translateY(-9px) rotate(-10deg)}}
.il-cloche .steam path{stroke-dasharray:20;animation:steam 2.8s ease-in-out infinite}
@keyframes steam{0%,15%{stroke-dashoffset:20;opacity:0}30%,45%{stroke-dashoffset:0;opacity:1}60%,100%{opacity:0}}

/* confetti + fly-to-cart */
.confetti{position:absolute;z-index:49;pointer-events:none;border-radius:2px}
.fly-card{position:absolute;left:0;top:0;z-index:47;overflow:hidden;border:var(--stroke) solid #000;border-radius:13px;background:#EEE;pointer-events:none;
  box-shadow:0 20px 34px -14px rgba(0,0,0,.5);will-change:transform}
.fly-card img{width:100%;height:100%;object-fit:cover;display:block}
#cartBtn .handle{transform-box:fill-box;transform-origin:0% 100%}
.plus-one{position:absolute;left:62%;top:-10px;z-index:3;font:800 12px/1 var(--font);color:var(--purple);pointer-events:none;white-space:nowrap}

/* tab micro-interactions */
.tab[data-tab=home].bump svg{animation:hop .5s var(--ease-bounce)}
@keyframes hop{35%{transform:translateY(-4px) scale(1.08)}}
.tab[data-tab=favorites].bump svg{animation:beat .6s ease}
@keyframes beat{20%{transform:scale(1.28)}40%{transform:scale(.94)}60%{transform:scale(1.12)}}
.tab[data-tab=orders].bump svg{animation:wig .5s ease}
@keyframes wig{25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
.tab[data-tab=profile].bump .avatar{animation:tilt .55s var(--ease-bounce)}
@keyframes tilt{35%{transform:rotate(-14deg) scale(1.1)}}
.empty .illo,.tp-empty .illo,.cart-empty .illo{margin-bottom:4px}

/* ============ Share sheet ============ */
.share-layer{position:absolute;inset:0;z-index:50;visibility:hidden;transition:visibility 0s linear .4s}
.share-layer.is-open{visibility:visible;transition:visibility 0s}
.share-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border:var(--stroke) solid #000;border-bottom:0;
  border-radius:29px 29px 0 0;padding:18.35px 0 var(--foot-b);transform:translate3d(0,110%,0);will-change:transform}
.sheet::after{content:"";position:absolute;left:-1.5px;right:-1.5px;top:100%;height:80px;background:#fff;
  border-left:var(--stroke) solid #000;border-right:var(--stroke) solid #000}
.grab-zone{margin:-18.35px 0 0;padding:18.35px 0 0;cursor:grab;touch-action:none}
.grabber{width:20px;height:3.5px;border-radius:2px;background:#D4D4D6;margin:0 auto}
.sheet-title{margin:24.75px 0 0;text-align:center;font:700 18px/24px var(--font);letter-spacing:-.06px;color:#000}
.share-body{position:relative;padding-top:26.1px}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:25.4px;padding:0 4.2px}
.share-target{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.st-ic{width:54px;height:54px;border-radius:50%;border:var(--stroke) solid #000;display:grid;place-items:center;
  transition:transform .15s ease}
.share-target:active .st-ic{transform:scale(.92)}
.share-target:focus-visible{outline:none}
.share-target:focus-visible .st-ic{outline:2px solid var(--purple);outline-offset:3px}
.st-ic svg{width:26px;height:26px;display:block}
.st-label{max-width:100%;font:400 12px/16px var(--font);letter-spacing:.2px;color:#2D2D2D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ic.brand{overflow:hidden;background:#fff}
.st-ic.brand svg{width:100%;height:100%;display:block}
.ic-yellow{background:#FFAC0E}.ic-light{background:#F0F0F0}
.share-target[data-act="favorite"].is-on .st-ic svg path{fill:#fff}
.copybox{position:relative;height:84px;margin:32.95px 23px 0 22.3px;padding:21.1px 25.1px 0 24.8px;border-radius:13px;background:#F6F6F6}
.cb-dash{position:absolute;left:.75px;top:.75px;width:calc(100% - 1.5px);height:calc(100% - 1.5px);overflow:visible;pointer-events:none}
.cb-dash rect{fill:none;stroke:#000;stroke-width:1.5;stroke-dasharray:4 4}
.cb-label{font:600 12px/16px var(--font);letter-spacing:.2px;color:#202020}
.cb-row{display:flex;align-items:center;gap:12px;height:20px;margin-top:8.96px}
.cb-link{flex:1;min-width:0;font:400 15px/20px var(--font);letter-spacing:.28px;color:#000;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;user-select:all;-webkit-user-select:all}
.cb-copy{position:relative;flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;transform:translateY(-1.4px)}
.cb-copy::after{content:"";position:absolute;inset:-10px}
.cb-copy svg{width:24px;height:24px;display:block}
.cb-copy.is-done svg{animation:pop .42s cubic-bezier(.3,.75,.2,1)}
.sheet-foot{display:grid;grid-template-columns:1fr 1fr;gap:17.4px;margin-top:23.4px;padding:0 24px 0 21.6px}
.btn-md{font-weight:500}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8.3px}
.btn-icon svg{width:25px;height:25px;flex:none}
/* ============ Toast (legacy bottom toast; notices now use the Dynamic-Island capsule) ============ */
.toast{position:absolute;left:50%;bottom:118px;z-index:60;display:flex;align-items:center;gap:14px;transform:translate(-50%,16px) scale(.92);opacity:0;pointer-events:none;
  width:max-content;max-width:calc(100% - 48px);box-shadow:0 10px 30px -12px rgba(0,0,0,.45);padding:11px 16px;border-radius:12px;background:#000;color:#fff;
  font:500 13px/18px var(--font);text-align:center;transition:opacity .22s ease,transform var(--dur-bounce) var(--ease-bounce)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.has-act{pointer-events:auto;padding-right:8px}
.toast-act{flex:none;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;font:600 13px/16px var(--font)}
.toast-act[hidden]{display:none}
.share-layer.is-open ~ .toast{bottom:auto;top:calc(var(--sb) + 16px)}

/* ============ Phone / small screens: the app fills the viewport ============ */
@media (max-width:500px){
  body,.stage{background:#fff}
  .stage{display:block}
  .deco{display:none}
  .device{position:relative;left:auto;top:auto;width:100%;height:100%;padding:0;border-radius:0;box-shadow:none;transform:none}
  .screen{width:100%;height:100%;border-radius:0}
  .statusbar{display:none}
  :root{--sb:6px;--foot-b:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ Logo (shared by the splash and the header badge) ============ */
.logo{display:block;overflow:visible;--s:.25}
.logo .lg-ring{stroke-width:max(6.6px,calc(1.1px / var(--s)))}
.logo .lg-ring2{stroke-width:max(2.3px,calc(.55px / var(--s)))}
.logo .lg-seven{stroke-width:max(4.6px,calc(1.05px / var(--s)))}
.logo .lg-n{stroke-width:max(8.6px,calc(1.15px / var(--s)))}
.logo .lg-a{stroke-width:max(8.4px,calc(1.15px / var(--s)))}
.logo .lg-cup{stroke-width:max(8.6px,calc(1.15px / var(--s)))}
.logo .lg-handle{stroke-width:max(8.8px,calc(1.15px / var(--s)))}
.logo .lg-saucer{stroke-width:max(2.2px,calc(.6px / var(--s)))}
.logo .lg-steam{stroke-width:max(4px,calc(.9px / var(--s)));stroke-linecap:round;opacity:0}

/* ============ Splash: the logo draws itself, then folds into the header badge ============ */
.splash{position:absolute;inset:0;z-index:90;background:#000;color:#fff;cursor:pointer;will-change:clip-path}
.splash .logo{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.splash-hint{position:absolute;left:0;right:0;bottom:calc(var(--foot-b) + 22px);text-align:center;font:400 12px/1 var(--font);
  color:rgba(255,255,255,.38);letter-spacing:.3px;opacity:0;transition:opacity .6s ease}
.splash.show-hint .splash-hint{opacity:1}
.splash.done{display:none}

/* ============ Café 7: RTL + Persian typography ============ */
html[dir=rtl] body{letter-spacing:0}
html[dir=rtl] *{letter-spacing:0!important}                 /* tracking breaks Persian letter joins */
.ltr{direction:ltr;unicode-bidi:isolate}
.statusbar{direction:ltr;background:var(--app-bg);transition:color .4s ease,background-color .4s ease}   /* like a real iPhone: time left, icons right */
.statusbar.on-dark{color:#fff;background:transparent}
.statusbar.on-dark svg{fill:#fff;stroke:#fff}
.statusbar.on-dark svg [stroke]{stroke:#fff}
.hello{font-size:14px;line-height:24px}
.name{font-weight:800;line-height:32px}
.card-title{font-weight:600;line-height:24px}
.tag{font-weight:700;padding:3px 8px 2px}
.tab-logo{display:block;position:relative;width:30px;height:30px;border-radius:50%;background:#000;color:#fff;overflow:visible}
.tab-logo .logo{position:absolute;left:0;top:0}
.tab-logo .logo .lg-t1,.tab-logo .logo .lg-t2,.tab-logo .logo .lg-ring2,.tab-logo .logo .lg-steam{opacity:0}
.tab-logo.is-hidden{visibility:hidden}
html[dir=rtl] .nav-btn svg,html[dir=rtl] .rv-chev,html[dir=rtl] .pf-chev{transform:scaleX(-1)}   /* back arrows & chevrons point the RTL way */

/* ============ Café 7 v4: header logo, two-tab footer, view-only product page ============ */
.badge-logo{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:#000;color:#fff;overflow:visible}
.badge-logo .logo{position:absolute;left:0;top:0}
.badge-logo .logo .lg-t1,.badge-logo .logo .lg-t2,.badge-logo .logo .lg-ring2,.badge-logo .logo .lg-steam{opacity:0}
.badge-logo.is-hidden{visibility:hidden}
.tabs.two{left:62px;right:62px;grid-template-columns:repeat(2,1fr)}
.tabs.two .tab{width:96px;flex-direction:column;gap:1px}
.tabs.two .tab svg{flex:none}
.tabs.two .tab-ind{width:96px}
.tab-label{font:600 11px/14px var(--font);color:#000}
.tab.is-active .tab-label{color:var(--purple)}
.game-soon{margin:40px var(--pad) 0;padding:28px 22px;border:1.5px dashed #000;border-radius:22px;text-align:center;background:#FBF7FE}
.gs-ship{width:110px;height:110px;margin:0 auto 10px;animation:bob 2.4s ease-in-out infinite}
.game-soon h3{margin:0 0 6px;font:800 18px/28px var(--font)}.game-soon p{margin:0;font:400 13.5px/24px var(--font);color:var(--muted)}
#pOpts,#customPill,.qty-row{display:none!important}
.pdesc{font-size:13.5px;line-height:24px;color:#555}
.pdesc::before{content:"مواد: ";font-weight:700;color:#000}
.like-btn{display:inline-flex;align-items:center;gap:5px;width:auto!important;padding:0 2px}
.like-n{font:700 13px/1 var(--font);color:#000;min-width:1ch}
.temp-chip{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding:2px 9px;border-radius:999px;font:600 11px/18px var(--font);vertical-align:3px}
.temp-chip.hot{background:#FFF1EA;color:#D95B1F}.temp-chip.iced{background:#EAF6FC;color:#1F7BB0}
.price-line{display:flex;align-items:center;justify-content:space-between;margin:16px var(--pad) 0;padding:12px 0;
  background:repeating-linear-gradient(90deg,#000 0 4.8px,transparent 4.8px 9.93px) top/100% 1.2px no-repeat}
.price-line b{font:800 20px/1 var(--font);color:#000}.price-line span{font:500 12.5px/1 var(--font);color:var(--muted)}
#rvAdd{display:none}

/* ============ Café 7 fixes ============ */
/* carousels keep left-to-right scroll maths inside the RTL page (otherwise they snap back to the first photo) */
.gallery,.gdots,.vw-strip,.vw-dots{direction:ltr}
/* the category row can be dragged with a mouse and scrolled with the wheel */
.cats{cursor:grab;scroll-behavior:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.cats.is-dragging{cursor:grabbing;scroll-snap-type:none}
.cats.is-dragging .cat{pointer-events:none}
/* ============ Game «مدار ۷» ============ */
#gamePanel{padding:0!important;overflow:hidden}
.game{position:absolute;left:0;right:0;top:var(--sb);bottom:96px;border-radius:22px 22px 0 0;overflow:hidden;background:#07060D;touch-action:none;user-select:none;-webkit-user-select:none}
.g7{position:absolute;inset:0;direction:rtl}
.g7-cv{position:absolute;inset:0;display:block;touch-action:none}
.g7-vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 30px rgba(255,40,80,0);transition:box-shadow .4s}
.g7.low .g7-vig{animation:g7low 1s ease-in-out infinite}
@keyframes g7low{50%{box-shadow:inset 0 0 90px 30px rgba(255,40,80,.45)}}
.g7-hud{position:absolute;inset:0 0 auto 0;padding:10px 12px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease-smooth)}
.g7.playing .g7-hud{opacity:1;transform:none}
.g7-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.g7-bars{display:flex;flex-direction:column;gap:6px;width:46%}
.g7-hp{position:relative;height:14px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.g7-hp i{position:absolute;inset:0 auto 0 0;transition:width .25s}.g7-hp .h{background:linear-gradient(90deg,#FF375F,#FF8142)}.g7-hp .s{height:4px;top:auto;background:#27D8FF}
.g7-hp span{position:absolute;inset:0;display:grid;place-items:center;font:800 10px/1 var(--font);color:#fff;text-shadow:0 1px 2px #000}
.g7-lvl{display:flex;align-items:center;gap:6px}
.g7-lvl b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--purple);color:#fff;font:900 11px/1 var(--font);box-shadow:0 0 12px rgba(175,82,223,.8)}
.g7-xp{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}.g7-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#27D8FF,#AF52DF);transition:width .2s}
.g7-sc{display:flex;flex-direction:column;align-items:center;color:#fff}.g7-sc b{font:900 20px/1.1 var(--font);text-shadow:0 0 14px rgba(175,82,223,.9)}
.g7-sc em{font:900 13px/1.2 var(--font);font-style:normal;color:#FFD24A}
.g7-pz{pointer-events:auto;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}.g7-pz svg{width:13px;height:13px}
.g7-wave{margin:8px auto 0;width:120px;text-align:center;color:#fff;font:700 11px/16px var(--font)}
.g7-wave i{display:block;height:2px;margin-top:3px;border-radius:2px;background:rgba(255,255,255,.55);transition:width .25s linear}
.g7-ctl{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}.g7.playing .g7-ctl{opacity:1}
.g7-stick{position:absolute;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);opacity:0;transform:scale(.7);transition:opacity .15s,transform .2s var(--ease-snap)}
.g7-stick.on{opacity:1;transform:none}
.g7-stick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#C98BF0 60%,#AF52DF);box-shadow:0 0 18px rgba(175,82,223,.9)}
.g7-btn{position:absolute;pointer-events:auto;display:grid;place-items:center;border-radius:50%;color:#fff;font:800 12px/1 var(--font);touch-action:none}
.g7-dash{left:16px;bottom:18px;width:66px;height:66px;background:rgba(39,216,255,.18);border:2px solid rgba(39,216,255,.7);box-shadow:0 0 18px rgba(39,216,255,.4);transition:opacity .2s,transform .12s}
.g7-dash.cool{opacity:.4}.g7-dash:active{transform:scale(.9)}
.g7-nova{left:92px;bottom:40px;width:58px;height:58px;background:rgba(175,82,223,.14)}
.g7-nova svg{position:absolute;inset:0;transform:rotate(-90deg)}.g7-nova .bg{fill:none;stroke:rgba(255,255,255,.15);stroke-width:4}
.g7-nova .fg{fill:none;stroke:#C98BF0;stroke-width:4;stroke-linecap:round;stroke-dasharray:182;stroke-dashoffset:182;transition:stroke-dashoffset .3s}
.g7-nova.ready{background:rgba(175,82,223,.5);box-shadow:0 0 24px rgba(175,82,223,.9);animation:g7pulse 1s ease-in-out infinite}
@keyframes g7pulse{50%{transform:scale(1.08)}}
.g7-banner{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;pointer-events:none;opacity:0}
.g7-banner b{font:900 30px/1.3 var(--font);text-shadow:0 4px 30px rgba(175,82,223,.9)}.g7-banner span{font:500 13px/1 var(--font);opacity:.75}
.g7-banner.show{animation:g7ban 2s var(--ease-smooth)}
@keyframes g7ban{0%{opacity:0;transform:scale(.6);letter-spacing:.3em}15%{opacity:1;transform:scale(1.05)}25%{transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.g7-scr{position:absolute;inset:0;display:grid;place-items:center;padding:16px;overflow-y:auto;background:rgba(7,6,13,.55);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.g7-scr.is-open{opacity:1;visibility:visible;transition:opacity .3s}
.g7-card{width:100%;max-width:330px;padding:20px 18px 18px;border-radius:24px;background:rgba(18,13,34,.92);border:1px solid rgba(201,139,240,.35);color:#fff;text-align:center;
  box-shadow:0 30px 70px -30px rgba(175,82,223,.9),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(18px) scale(.95);transition:transform var(--dur-bounce) var(--ease-bounce)}
.g7-scr.is-open .g7-card{transform:none}
.g7-card.small{max-width:250px;display:grid;gap:10px}
.g7-card h2{margin:2px 0 6px;font:900 24px/34px var(--font)}.g7-card h2 small{display:block;font:600 13px/18px var(--font);color:#C98BF0}
.g7-card p{margin:0 0 12px;font:400 12.5px/22px var(--font);color:rgba(255,255,255,.72)}
.g7-logo{width:104px;height:104px;margin:-4px auto 0}.g7-logo svg{width:100%;height:100%;overflow:visible}
.g7-logo .orbit{transform-origin:60px 60px;animation:g7spin 12s linear infinite}
.g7-logo .o1{transform-origin:60px 60px;animation:g7spin 5s linear infinite}.g7-logo .o2{transform-origin:60px 60px;animation:g7spin 8s linear infinite reverse}
@keyframes g7spin{to{transform:rotate(360deg)}}
.g7-help{display:grid;gap:4px;margin:0 0 12px;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);font:400 11.5px/18px var(--font);color:rgba(255,255,255,.7)}
.g7-help b{color:#fff;margin-inline-end:6px}
.g7-best{margin:0 0 8px;font:500 12.5px/20px var(--font);color:rgba(255,255,255,.8)}.g7-best b{color:#FFD24A;font-weight:900}
.g7-go{width:100%;height:52px;border-radius:14px;background:linear-gradient(135deg,#AF52DF,#7B3FE4);color:#fff;font:900 16px/1 var(--font);box-shadow:0 12px 30px -10px rgba(175,82,223,.9);transition:transform .15s}
.g7-go:active{transform:scale(.97)}
.g7-ghost{width:100%;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.2);color:#fff;font:700 14px/1 var(--font)}
.g7-rew{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.2);text-align:right}
.g7-rew h3{margin:0 0 6px;font:800 13px/20px var(--font)}
.g7-rew .tier{color:rgba(255,255,255,.8)}.g7-rew .tier i{background:rgba(255,255,255,.12)}.g7-rew .tier.done b{color:#35F28B}
.g7-rew .g-note{color:rgba(255,255,255,.55)!important}
.g7-level{align-content:center}
.g7-lvhead{display:flex;flex-direction:column;align-items:center;margin-bottom:12px;color:#fff}
.g7-lvhead b{font:900 26px/1.3 var(--font);text-shadow:0 0 20px rgba(175,82,223,.9)}.g7-lvhead span{font:500 12.5px/1 var(--font);opacity:.7}
.g7-cards{display:grid;gap:10px;width:100%;max-width:330px}
.g7-up{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;padding:12px 14px;border-radius:18px;text-align:right;color:#fff;
  background:rgba(18,13,34,.94);border:1px solid rgba(201,139,240,.4);animation:g7card .5s var(--ease-bounce) backwards;transition:transform .15s,border-color .2s}
.g7-up:hover,.g7-up:focus-visible{border-color:#C98BF0;transform:translateY(-2px)}.g7-up:active{transform:scale(.97)}
@keyframes g7card{from{opacity:0;transform:translateY(24px) scale(.9)}}
.g7-up i{grid-row:1/4;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(175,82,223,.4),rgba(39,216,255,.25));font:900 22px/1 system-ui,sans-serif;font-style:normal;color:#fff;box-shadow:0 0 16px rgba(175,82,223,.45)}
.g7-up b{font:800 14.5px/22px var(--font)}.g7-up span{font:400 11.5px/18px var(--font);color:rgba(255,255,255,.7)}.g7-up em{font-style:normal;font-size:9px;letter-spacing:2px!important;color:#C98BF0}
.g7-final{display:flex;flex-direction:column;align-items:center;margin:2px 0 8px}
.g7-final b{font:900 50px/1.1 var(--font);background:linear-gradient(120deg,#C98BF0,#27D8FF);-webkit-background-clip:text;background-clip:text;color:transparent}.g7-final span{font:500 12px/1 var(--font);color:rgba(255,255,255,.6)}
.g7-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:6px}
.g7-stats span{display:flex;flex-direction:column;gap:2px;padding:7px 2px;border-radius:12px;background:rgba(255,255,255,.06)}.g7-stats small{font:500 10px/1 var(--font);color:rgba(255,255,255,.55)}.g7-stats b{font:800 13px/1.2 var(--font)}
.g7 .voucher{background:rgba(255,255,255,.96);color:#000}
.g7 .g-next{color:rgba(255,255,255,.7)!important}.g7 .g-next b{color:#FFD24A}
.g7 #gReward{margin-bottom:6px}
.tier{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:8px;font:500 12px/1 var(--font)}
.tier i{height:7px;border-radius:4px;background:#EFEFEF;overflow:hidden;position:relative}
.tier i::after{content:"";position:absolute;inset:0;transform-origin:right;transform:scaleX(var(--p));background:var(--purple);border-radius:4px;transition:transform .8s var(--ease-smooth)}
.tier b{font-weight:800}.tier.done b{color:#34C759}
.g-note,.g-next{margin:12px 0 0!important;font:400 12px/20px var(--font)!important;color:var(--muted)}.g-next b{color:#000}
.g-final{display:flex;flex-direction:column;align-items:center;margin:4px 0 6px}
.g-final b{font:900 52px/1.1 var(--font);background:linear-gradient(120deg,#AF52DF,#FF8142);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-final span{font:500 12px/1 var(--font);color:var(--muted)}
.g-stats{display:flex;justify-content:center;gap:18px;margin-bottom:8px;font:500 12.5px/20px var(--font)}
.voucher{display:flex;gap:12px;align-items:stretch;margin:12px 0 4px;padding:12px;border:1.5px dashed #000;border-radius:16px;background:#FBF7FE;text-align:right}
.voucher.fresh{animation:pop .6s var(--ease-bounce)}
.v-pct{flex:none;width:74px;display:grid;place-content:center;border-radius:12px;background:var(--purple);color:#fff;font:900 26px/1 var(--font);text-align:center}
.v-pct small{display:block;margin-top:4px;font:600 11px/1 var(--font)}
.v-body{display:flex;flex-direction:column;gap:3px;min-width:0}.v-body b{font:800 14px/20px var(--font)}.v-body span,.v-body small{font:400 11.5px/18px var(--font);color:var(--muted)}
.v-body code{font:800 15px/22px ui-monospace,Menlo,monospace;letter-spacing:1px!important;color:#000;word-break:break-all}
.table-chip{display:inline-flex;align-items:center;gap:6px;margin-inline-start:8px;padding:2px 10px;border-radius:999px;background:#F1E6F9;color:#7A2FA8;font:700 12px/20px var(--font);vertical-align:2px}
.table-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple)}
.card-sheet .ar-dish{margin-bottom:10px}
.card-prev{display:block;width:calc(100% - 46px);max-height:52vh;object-fit:contain;margin:0 auto;border-radius:16px;box-shadow:0 18px 40px -20px rgba(0,0,0,.45);-webkit-touch-callout:default}
#shareGo.is-busy{opacity:.7;pointer-events:none}
.card-sheet a.btn{display:grid;place-items:center;text-decoration:none;color:#000}
/* ---- game v2: fixed joystick, right-hand buttons, boss warning, combo popup, rounds ---- */
.g7.fixed .g7-stick{left:26px;top:auto!important;bottom:26px;margin:0;opacity:.55;transform:none;background:radial-gradient(circle,rgba(175,82,223,.18),rgba(255,255,255,.03) 70%);border-color:rgba(201,139,240,.45)}
.g7.fixed .g7-stick::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(201,139,240,.25)}
.g7.fixed .g7-stick.on{opacity:1;box-shadow:0 0 30px rgba(175,82,223,.45)}
.g7.fixed .g7-stick i{transition:transform .06s linear}
.g7-stick{width:112px;height:112px}
.g7-dash{left:auto!important;right:18px;bottom:24px}
.g7-nova{left:auto!important;right:98px;bottom:52px}
.g7-warn{position:absolute;left:-10%;right:-10%;top:40%;display:flex;align-items:center;gap:12px;padding:10px 0;background:rgba(255,40,70,.18);border-block:2px solid rgba(255,60,90,.8);
  color:#fff;font:900 16px/1 var(--font);justify-content:center;opacity:0;transform:skewY(-4deg) scaleY(0);pointer-events:none;text-shadow:0 0 16px #FF375F}
.g7-warn i{flex:1;height:14px;background:repeating-linear-gradient(-45deg,rgba(255,60,90,.9) 0 10px,transparent 10px 20px);background-size:28px 100%;animation:g7stripe .6s linear infinite}
.g7-warn.show{animation:g7warn 2.6s var(--ease-smooth)}
@keyframes g7warn{0%{opacity:0;transform:skewY(-4deg) scaleY(0)}10%{opacity:1;transform:skewY(-4deg) scaleY(1)}20%,40%,60%{filter:brightness(1.6)}30%,50%,70%{filter:brightness(.8)}85%{opacity:1;transform:skewY(-4deg) scaleY(1)}100%{opacity:0;transform:skewY(-4deg) scaleY(0)}}
@keyframes g7stripe{to{background-position:28px 0}}
.g7-combo{position:absolute;left:0;right:0;top:92px;text-align:center;font:900 22px/1 var(--font);color:#FFD24A;text-shadow:0 0 18px rgba(255,176,32,.9);opacity:0;pointer-events:none}
.g7-combo.show{animation:g7combo 1.3s var(--ease-bounce)}
@keyframes g7combo{0%{opacity:0;transform:scale(.3) rotate(-8deg)}25%{opacity:1;transform:scale(1.25) rotate(3deg)}40%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.g7-mode{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 10px;font:500 12px/1 var(--font);color:rgba(255,255,255,.7)}
.g7-mode button{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#fff;font:700 12px/1 var(--font)}
.g7-mode button.on{background:var(--purple);border-color:var(--purple);box-shadow:0 0 14px rgba(175,82,223,.6)}
.g7-round{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 4px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.g7-round span{font:500 11px/1 var(--font);color:rgba(255,255,255,.6)}.g7-round b{font:900 22px/1.2 var(--font);color:#FFD24A}.g7-round em{font:700 11.5px/1 var(--font);font-style:normal;color:#C98BF0}
.g7-roundbar{margin:0 0 8px;padding:8px 10px;border-radius:12px;background:rgba(175,82,223,.14);font:600 12px/18px var(--font);color:#fff;text-align:center}
.g7-roundbar b{color:#FFD24A}.g7-roundbar i{font-style:normal;letter-spacing:3px!important;color:#C98BF0}

/* ---- managed menu: notice, out of stock, admin overlay ---- */
.notice{display:flex;align-items:center;gap:8px;margin:14px var(--pad) -4px;padding:10px 14px;border:1.5px solid #000;border-radius:14px;background:#FBF7FE;font:600 13px/1.7 var(--font);animation:rise .5s var(--ease-smooth)}
.notice[hidden]{display:none}.notice i{font-style:normal}
.card.is-out .card-img img{filter:grayscale(1) brightness(.92)}
.out-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);padding:5px 14px;border-radius:10px;background:rgba(0,0,0,.78);color:#fff;font:800 13px/1.4 var(--font);letter-spacing:0!important}
#pPriceBig.is-out{color:#DA2827;font-size:16px}
#adminLayer{position:fixed;inset:0;z-index:1000;overflow-y:auto;background:#F4F4F6}
#adminLayer[hidden]{display:none}
.admin-open body{overflow:hidden}
.adm-badge .adm-logo{color:#fff;--s:.05}
.adm-badge{background:#000;position:relative}.adm-badge .adm-logo{position:absolute;inset:4%;width:92%;height:92%}
.adm-badge .adm-logo .lg-t1,.adm-badge .adm-logo .lg-t2,.adm-badge .adm-logo .lg-ring2,.adm-badge .adm-logo .lg-steam{opacity:0}

/* ---- game start screen: compact, never scrolls ---- */
.g7-start{overflow:hidden!important}
.g7-start .g7-card{padding:16px 16px 14px}
.g7-start .g7-logo{width:70px;height:70px;margin:-2px auto 0}
.g7-start h2{margin:0 0 4px;font-size:21px;line-height:30px}.g7-start h2 small{display:inline;margin-inline-start:6px;font-size:12px}
.g7-start p{margin:0 0 10px;font-size:12px;line-height:20px}
.g7-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.g7-meta .g7-mode{margin:0}.g7-meta .g7-best{margin:0;font-size:12px}
.g7-start .g7-go{height:48px}
.g7-start .g7-rew{margin-top:12px;padding-top:10px}
.g7-start .g7-roundbar{margin:0 0 8px;padding:7px 8px;font-size:11px;line-height:17px}
.g7-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.g7-tier{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px 9px;border-radius:12px;background:rgba(255,255,255,.06);overflow:hidden}
.g7-tier b{font:900 17px/1.2 var(--font);color:#fff}.g7-tier span{font:500 10.5px/1.4 var(--font);color:rgba(255,255,255,.6)}
.g7-tier i{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1)}
.g7-tier i::after{content:"";position:absolute;inset:0;transform-origin:right;transform:scaleX(var(--p));background:linear-gradient(90deg,#27D8FF,#AF52DF)}
.g7-tier.done{background:rgba(53,242,139,.14)}.g7-tier.done b{color:#35F28B}
.g7-start .voucher{margin-top:10px}
#badge{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}

@media (max-height:760px){.caption{display:none}}
/* ---- labels on the menu ---- */
.tg-row{position:absolute;inset-inline-end:8px;top:8px;display:flex;gap:4px}
.tg-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.94);border:1.5px solid #000;font-style:normal;font-size:15px;line-height:1}
.tg-ic b{display:block;font-weight:400}
.tg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;width:100%}
.tg-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;background:#F7F2FB;border:1px solid #E6D3F3;font:700 11.5px/20px var(--font);color:#5B2A7A}
.tg-chip b{font-weight:400;font-size:14px;display:inline-block}
.tg-flame{animation:tgFlame 1.1s ease-in-out infinite;transform-origin:50% 90%}.tg-sparkle{animation:tgSpark 1.6s ease-in-out infinite}.tg-steam{animation:tgSteam 2s ease-in-out infinite}
.tg-twinkle{animation:tgTwinkle 1.4s ease-in-out infinite}.tg-wiggle{animation:tgWiggle 1.2s ease-in-out infinite;transform-origin:50% 20%}.tg-sway{animation:tgSway 2.2s ease-in-out infinite;transform-origin:50% 100%}
.tg-beat{animation:tgBeat 1.1s ease-in-out infinite}.tg-bounce{animation:tgBounce 1.2s cubic-bezier(.3,1.4,.5,1) infinite}.tg-float{animation:tgFloat 2.4s ease-in-out infinite}.tg-fall{animation:tgFall 2.6s ease-in-out infinite}
@keyframes tgFlame{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12,1.18) rotate(3deg)}}
@keyframes tgSpark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(18deg)}}
@keyframes tgSteam{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes tgTwinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes tgWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes tgSway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes tgBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.14)}}
@keyframes tgBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@keyframes tgFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@keyframes tgFall{0%{transform:translateY(-2px) rotate(-10deg)}50%{transform:translateY(2px) rotate(10deg)}100%{transform:translateY(-2px) rotate(-10deg)}}
/* ---- game start: the discount explanation ---- */
.g7-promo{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;padding:10px 12px;border-radius:14px;text-align:right;
  background:linear-gradient(135deg,rgba(175,82,223,.28),rgba(39,216,255,.14));border:1px solid rgba(201,139,240,.5)}
.g7-promo b{font:900 14px/1.5 var(--font);color:#fff}.g7-promo span{font:400 11.5px/1.85 var(--font);color:rgba(255,255,255,.85)}.g7-promo em{font-style:normal;font-weight:800;color:#FFD24A}