:root{
  --orange:#F59B1E;
  --orange-light:#FFB84D;
  --black:#0A0906;
  --panel:#141210;
  --cream:#FFF8EF;
  --gray:#A89F92;
  --green:#4CAF6E;
  --red:#E5484D;
  --duration:650ms;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{height:100%}

body{
  background:var(--black);
  color:var(--cream);
  font-family:'Kanit',sans-serif;
  overflow:hidden;
}

button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{text-decoration:none;color:inherit}

header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(to bottom,rgba(10,9,6,.98),rgba(10,9,6,.72),transparent);
}

.logo{
  display:flex;
  flex-direction:column;
  line-height:.9;
}

.logo .l1,
.logo .l2{font-family:'Anton'}

.logo .l1{font-size:20px}
.logo .l2{
  font-size:24px;
  color:var(--orange);
  transform:rotate(-2deg);
}
.logo .l3{
  margin-top:4px;
  font-size:8px;
  color:var(--gray);
  letter-spacing:.42em;
  text-transform:uppercase;
}

.hdr-right{
  display:flex;
  align-items:center;
  gap:9px;
}

.lang-btn,
.home-btn{
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:1px solid rgba(255,248,239,.28);
  border-radius:999px;
  background:rgba(10,9,6,.55);
  font-weight:800;
  transition:.2s ease;
}

.lang-btn:hover,
.home-btn:hover{
  background:var(--cream);
  color:var(--black);
  transform:translateY(-2px);
}

.cart-btn{
  position:relative;
  width:46px;
  height:46px;
  border-radius:999px;
  background:var(--orange);
  color:var(--black);
  display:grid;
  place-items:center;
  font-size:20px;
  box-shadow:0 8px 20px rgba(245,155,30,.28);
  transition:transform .2s ease;
}

.cart-btn:hover{transform:translateY(-3px) rotate(-3deg)}
.cart-btn.pop{animation:cartPop .45s var(--ease)}
@keyframes cartPop{45%{transform:scale(1.25) rotate(8deg)}}

.cart-count{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:21px;
  height:21px;
  padding:0 5px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(0);
  transition:.25s var(--ease);
}

.cart-count.show{
  opacity:1;
  transform:scale(1);
}

.tabs{
  position:fixed;
  top:67px;
  left:0;
  right:0;
  z-index:70;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px 16px 14px;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{display:none}

.tab{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:999px;
  border:1.5px solid rgba(255,248,239,.18);
  color:var(--gray);
  background:rgba(10,9,6,.5);
  backdrop-filter:blur(8px);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  transition:.3s var(--ease);
}

.tab:hover{border-color:rgba(245,155,30,.6);color:var(--cream)}

.tab.active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--black);
  transform:scale(1.05);
}

.stage-wrap{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  transition:background var(--duration) var(--ease);
}

.grain{
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

.ghost{
  position:absolute;
  top:16%;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  justify-content:center;
  pointer-events:none;
  user-select:none;
}

.ghost span{
  font-family:'Anton';
  font-size:clamp(70px,20vw,300px);
  color:rgba(255,248,239,.065);
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}

.carousel{
  position:absolute;
  inset:0;
  z-index:3;
  perspective:1200px;
}

.food-item{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:
    transform var(--duration) var(--ease),
    filter var(--duration) var(--ease),
    opacity var(--duration) var(--ease),
    left var(--duration) var(--ease),
    bottom var(--duration) var(--ease),
    width var(--duration) var(--ease),
    height var(--duration) var(--ease);
  will-change:transform,filter,opacity,left,bottom;
  cursor:pointer;
}

.food-visual{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
}

.food-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.58));
  user-select:none;
  pointer-events:none;
}

.food-placeholder{
  width:100%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,184,77,.45),transparent 24%),
    linear-gradient(145deg,#f0a12a,#8a4208);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 28px 38px rgba(0,0,0,.5);
  color:#2a1505;
  font-family:'Anton';
  font-size:clamp(20px,4vw,45px);
  text-align:center;
  text-transform:uppercase;
  padding:16px;
}

.food-item.role-center .food-visual{
  animation:centerFloat 3.5s ease-in-out infinite;
}

@keyframes centerFloat{
  0%,100%{transform:translateY(0) rotateY(-2deg)}
  50%{transform:translateY(-9px) rotateY(3deg)}
}

.info{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:0 20px calc(18px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
}

.info > *{pointer-events:auto}

.cat-eyebrow{
  margin-bottom:4px;
  color:var(--orange);
  font-size:10px;
  font-weight:800;
  letter-spacing:.38em;
  text-transform:uppercase;
}

.info h1{
  max-width:650px;
  font-family:'Anton';
  font-size:clamp(25px,6.6vw,44px);
  line-height:1.03;
  text-transform:uppercase;
}

.desc{
  max-width:560px;
  min-height:34px;
  margin-top:7px;
  color:var(--gray);
  font-size:12.5px;
  line-height:1.42;
}

.price{
  margin-top:4px;
  color:var(--orange);
  font-family:'Anton';
  font-size:clamp(27px,7vw,42px);
}

.info-fade{
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}

.info-fade.out{
  opacity:0;
  transform:translateY(10px);
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.btn-nav{
  width:49px;
  height:49px;
  border:2px solid rgba(255,248,239,.82);
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:21px;
  transition:.18s ease;
}

.btn-nav:hover{
  background:var(--cream);
  color:var(--black);
  transform:translateY(-3px);
}

.btn-main{
  min-height:50px;
  padding:0 23px;
  border-radius:999px;
  background:var(--orange);
  color:var(--black);
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:
    0 7px 0 #9d5907,
    0 15px 30px rgba(245,155,30,.28);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  transition:.18s ease;
}

.btn-main:hover{
  background:var(--cream);
  transform:translateY(-4px);
  box-shadow:
    0 11px 0 #aaa095,
    0 22px 35px rgba(0,0,0,.35);
}

.btn-main:active{
  transform:translateY(5px);
  box-shadow:0 2px 0 #9d5907;
}

.dots{
  display:flex;
  gap:6px;
  margin-top:13px;
  max-width:90vw;
  overflow:hidden;
}

.dot{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(255,248,239,.24);
  transition:.3s var(--ease);
}

.dot.active{
  width:20px;
  background:var(--orange);
}

.overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(5px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}

.overlay.open{
  opacity:1;
  pointer-events:auto;
}

.sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:95;
  max-height:88dvh;
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(245,155,30,.27);
  border-radius:26px 26px 0 0;
  background:var(--panel);
  transform:translateY(105%);
  transition:transform .38s var(--ease);
}

.sheet.open{transform:translateY(0)}

.sheet-head{
  padding:14px 20px 11px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(255,248,239,.08);
}

.modal-image-wrap{
  width:65px;
  height:65px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
}

.modal-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.modal-image-wrap .food-placeholder{
  font-size:10px;
  padding:5px;
}

.sheet-heading{min-width:0}

.sheet-heading h2{
  font-family:'Anton';
  font-size:23px;
  line-height:1.04;
  text-transform:uppercase;
}

.modal-price{
  margin-top:3px;
  color:var(--orange);
  font-family:'Anton';
  font-size:21px;
}

.sheet-close{
  width:38px;
  height:38px;
  margin-left:auto;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(255,248,239,.08);
  display:grid;
  place-items:center;
  transition:.2s;
}

.sheet-close:hover{
  background:var(--cream);
  color:var(--black);
  transform:rotate(90deg);
}

.sheet-body{
  flex:1;
  overflow-y:auto;
  padding:16px 20px;
}

.section-title{
  margin:20px 0 10px;
  color:var(--orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.section-title:first-child{margin-top:0}

.ingredient-row,
.extra-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px dashed rgba(255,248,239,.08);
}

.ingredient-row{cursor:pointer}

.ingredient-name,
.extra-name{
  flex:1;
  font-size:15px;
}

.ingredient-name.removed{
  color:var(--gray);
  text-decoration:line-through;
  opacity:.62;
}

.check{
  width:27px;
  height:27px;
  flex:0 0 auto;
  border:2px solid rgba(255,248,239,.3);
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--black);
  font-size:14px;
  transition:.2s var(--ease);
}

.check.active{
  background:var(--orange);
  border-color:var(--orange);
}

.variant-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.variant-chip{
  padding:9px 14px;
  border:1.5px solid rgba(255,248,239,.2);
  border-radius:999px;
  color:var(--gray);
  font-size:13px;
  font-weight:700;
  transition:.2s;
}

.variant-chip:hover{border-color:var(--orange);color:var(--cream)}

.variant-chip.active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--black);
}

.extra-price{
  margin-right:4px;
  color:var(--orange);
  font-size:13px;
  font-weight:800;
}

.stepper,
.qty-big,
.mini-step{
  display:flex;
  align-items:center;
  gap:10px;
}

.step-btn,
.mini-step button{
  width:31px;
  height:31px;
  border-radius:999px;
  background:rgba(255,248,239,.1);
  display:grid;
  place-items:center;
  font-weight:800;
  transition:.15s;
}

.step-btn:hover,
.mini-step button:hover{
  background:var(--cream);
  color:var(--black);
}

.step-btn.hot{
  background:var(--orange);
  color:var(--black);
}

.step-val{
  min-width:18px;
  text-align:center;
  font-weight:800;
}

.sheet-foot{
  padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,248,239,.08);
  display:flex;
  align-items:center;
  gap:12px;
}

.qty-big{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,248,239,.06);
}

.btn-add{
  flex:1;
  min-height:53px;
  padding:0 16px;
  border-radius:999px;
  background:var(--orange);
  color:var(--black);
  font-weight:800;
  text-transform:uppercase;
  transition:.18s;
}

.btn-add:hover{
  background:var(--cream);
  transform:translateY(-2px);
}

.cart-sheet{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:95;
  width:min(440px,100%);
  background:var(--panel);
  border-left:1px solid rgba(245,155,30,.25);
  display:flex;
  flex-direction:column;
  transform:translateX(105%);
  transition:transform .38s var(--ease);
}

.cart-sheet.open{transform:translateX(0)}

.cart-head{
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,248,239,.08);
}

.cart-eyebrow{
  color:var(--orange);
  font-size:9px;
  font-weight:800;
  letter-spacing:.3em;
}

.cart-head h2{
  margin-top:2px;
  font-family:'Anton';
  font-size:27px;
  text-transform:uppercase;
}

.cart-body{
  flex:1;
  overflow-y:auto;
  padding:8px 20px;
}

.cart-empty{
  padding:60px 20px;
  color:var(--gray);
  text-align:center;
  font-size:14px;
}

.cart-empty strong{
  display:block;
  margin-bottom:8px;
  color:var(--cream);
  font-family:'Anton';
  font-size:31px;
}

.cart-item{
  padding:15px 0;
  border-bottom:1px dashed rgba(255,248,239,.1);
  display:flex;
  gap:12px;
}

.cart-thumb{
  width:48px;
  height:48px;
  flex:0 0 auto;
}

.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cart-thumb .food-placeholder{
  font-size:8px;
  padding:3px;
}

.cart-middle{
  flex:1;
  min-width:0;
}

.cart-name{
  font-size:15px;
  font-weight:800;
  line-height:1.2;
}

.cart-mods{
  margin-top:5px;
  color:var(--gray);
  font-size:11.5px;
  line-height:1.48;
}

.cart-mods .removed{color:var(--red)}
.cart-mods .added{color:var(--green)}

.cart-right{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.cart-price{
  color:var(--orange);
  font-family:'Anton';
  font-size:18px;
}

.mini-step{gap:7px}
.mini-step button{width:27px;height:27px}

.cart-foot{
  padding:16px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,248,239,.08);
}

.total-row{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  color:var(--gray);
  font-size:14px;
}

.total-row.big{
  align-items:center;
  padding-top:9px;
  color:var(--cream);
  font-size:18px;
  font-weight:800;
}

.total-row.big strong{
  color:var(--orange);
  font-family:'Anton';
  font-size:28px;
}

.checkout-button,
.whatsapp-button{
  width:100%;
  min-height:54px;
  margin-top:13px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-weight:800;
  transition:.18s;
}

.checkout-button{
  background:var(--orange);
  color:var(--black);
}

.checkout-button:hover{
  background:var(--cream);
  transform:translateY(-2px);
}

.whatsapp-button{
  min-height:49px;
  margin-top:10px;
  border:2px solid var(--green);
  color:var(--green);
}

.whatsapp-button:hover{
  background:var(--green);
  color:#07120a;
}

.pack-flight{
  position:fixed;
  z-index:150;
  width:92px;
  height:92px;
  pointer-events:none;
  opacity:0;
}

.pack-product,
.pack-box{
  position:absolute;
  inset:0;
}

.pack-product img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));
}

.pack-box{
  top:42px;
  width:92px;
  height:58px;
  border:4px solid #9d5907;
  border-radius:7px;
  background:#ef9b28;
  transform:scaleY(.18);
  transform-origin:bottom;
  opacity:0;
}

.pack-lid{
  position:absolute;
  left:-4px;
  right:-4px;
  top:-12px;
  height:14px;
  border:4px solid #9d5907;
  border-radius:6px 6px 2px 2px;
  background:#f7ac42;
  transform-origin:bottom;
}

.pack-flight.run{
  animation:packTravel 1.05s cubic-bezier(.2,.75,.2,1) forwards;
}

.pack-flight.run .pack-box{
  animation:boxAppear .42s ease forwards;
}

.pack-flight.run .pack-lid{
  animation:lidClose .35s .28s ease forwards;
}

.pack-flight.run .pack-product{
  animation:foodPack .43s ease forwards;
}

@keyframes foodPack{
  0%{transform:translateY(-15px) scale(1)}
  75%{transform:translateY(31px) scale(.54)}
  100%{transform:translateY(38px) scale(.25);opacity:0}
}

@keyframes boxAppear{
  0%{opacity:0;transform:scaleY(.18)}
  35%{opacity:1}
  100%{opacity:1;transform:scaleY(1)}
}

@keyframes lidClose{
  from{transform:rotateX(0)}
  to{transform:rotateX(175deg)}
}

@keyframes packTravel{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  48%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotateY(180deg)}
  100%{
    opacity:0;
    left:calc(100% - 42px);
    top:35px;
    transform:translate(-50%,-50%) scale(.18) rotate(520deg);
  }
}

.toast{
  position:fixed;
  left:50%;
  bottom:100px;
  z-index:170;
  padding:12px 21px;
  border-radius:999px;
  background:var(--orange);
  color:var(--black);
  box-shadow:0 12px 30px rgba(0,0,0,.42);
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,20px);
  transition:.3s var(--ease);
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

@media(min-width:640px){
  .logo .l1{font-size:24px}
  .logo .l2{font-size:29px}
  .tabs{justify-content:center}
}

@media(max-width:639px){
  .food-item.role-center .food-visual img{
    max-height:34vh;
  }

  .info{
    padding-left:14px;
    padding-right:14px;
  }

  .desc{
    max-height:38px;
    overflow:hidden;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}