/* ============================================================
   SAUCED — Digital Menu
   Brand: cream #F8F5E5 · orange #E46B51 · League Spartan
   ============================================================ */

@font-face{
  font-family:"League Spartan";
  src:url("../fonts/LeagueSpartan.woff2") format("woff2-variations"),
      url("../fonts/LeagueSpartan.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* brand */
  --cream:#F8F5E5;
  --cream-lift:#FFFDF3;
  --cream-sink:#EFE9D2;
  --orange:#E46B51;
  --orange-deep:#C9553D;
  --orange-lift:#EE8067;
  --photo:#E76B51;          /* exact background of the product photos */
  --ink:#2C1A13;            /* warm near-black, biased to the orange hue */
  --ink-soft:#7C5A4B;
  --ink-faint:rgba(44,26,19,.14);

  --shadow-s:0 1px 2px rgba(44,26,19,.05), 0 4px 12px -6px rgba(44,26,19,.16);
  --shadow-m:0 2px 6px rgba(44,26,19,.06), 0 16px 34px -18px rgba(44,26,19,.34);
  --shadow-l:0 -8px 44px -12px rgba(44,26,19,.34);

  --r-s:14px;
  --r-m:20px;
  --r-l:28px;

  --hdr-h:60px;
  --tabs-h:60px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --pad:clamp(16px,4.6vw,26px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"League Spartan",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}

/* display type */
.display{
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.95;
  text-transform:uppercase;
  text-wrap:balance;
}

/* ============================================================
   SPLASH — photo band over a brand-orange field
   ============================================================ */
.splash{
  position:fixed;
  inset:0;
  z-index:70;
  overflow:hidden;
  background:var(--orange);
  display:grid;
  grid-template-rows:minmax(0,61fr) minmax(0,39fr);
  transition:transform .85s var(--ease-out), opacity .6s ease .12s;
  will-change:transform,opacity;
}
.splash.is-gone{
  transform:translate3d(0,-102%,0);
  opacity:0;
  pointer-events:none;
}
.splash__pattern{
  position:absolute;inset:0;
  background-image:url("../brand/pattern-cream.svg");
  background-size:150px 150px;
  opacity:.13;
  pointer-events:none;
}

/* ---- photo band ---- */
.splash__band{
  position:relative;
  overflow:hidden;
  background:var(--ink);
}
.splash__band picture,
.splash__band img{
  width:100%;height:100%;display:block;
}
.splash__band img{
  object-fit:cover;
  object-position:center 56%;
  transform:scale(1.1);
  animation:kenburns 20s var(--ease-out) forwards;
}
@keyframes kenburns{
  from{transform:scale(1.14) translate3d(0,1.2%,0)}
  to{transform:scale(1) translate3d(0,-.8%,0)}
}
/* the photo dissolves into the orange field instead of hard-edging */
.splash__fade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(26,14,9,.46) 0%,
      rgba(26,14,9,.04) 18%,
      rgba(228,107,81,0) 68%,
      rgba(228,107,81,.5) 89%,
      var(--orange) 100%);
}

.splash__badge{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 18px);
  left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);
  padding:8px 16px;
  border:1px solid rgba(248,245,229,.4);
  border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  background:rgba(26,14,9,.28);
  opacity:0;animation:badgeIn .8s var(--ease-out) .25s forwards;
  white-space:nowrap;
}
@keyframes badgeIn{
  from{opacity:0;transform:translate(-50%,-12px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.splash__badge .dot{
  width:6px;height:6px;border-radius:50%;background:var(--cream);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(248,245,229,.7)}
  70%{box-shadow:0 0 0 9px rgba(248,245,229,0)}
  100%{box-shadow:0 0 0 0 rgba(248,245,229,0)}
}

/* ---- brand field ---- */
.splash__inner{
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  gap:14px;
  padding:clamp(12px,3vw,20px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 22px);
  max-width:640px;
  width:100%;
  margin-inline:auto;
  min-height:0;
}

.splash__center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.6vw,16px);
  text-align:center;
  min-height:0;
}
.splash__logo{
  width:min(74vw,330px);
  max-height:15vh;
  height:auto;
  object-fit:contain;
  filter:brightness(0) invert(1) sepia(.1) saturate(.4) brightness(1.06)
         drop-shadow(0 10px 26px rgba(120,40,22,.4));
  opacity:0;
  animation:logoIn 1.05s var(--ease-out) .3s forwards;
}
@keyframes logoIn{
  from{opacity:0;transform:translate3d(0,26px,0) scale(.93)}
  to{opacity:1;transform:none}
}

.splash__slogan{
  margin:0;
  display:flex;flex-direction:column;gap:1px;
  color:var(--cream);
  font-weight:700;
  font-size:clamp(1.28rem,6vw,1.95rem);
  line-height:1.16;
  letter-spacing:-.004em;
  text-shadow:0 2px 14px rgba(120,40,22,.28);
}
.splash__slogan span{opacity:0;animation:fadeUp .8s var(--ease-out) forwards}
.splash__slogan span:nth-child(1){animation-delay:.64s}
.splash__slogan span:nth-child(2){animation-delay:.78s}

.splash__bottom{
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.btn-open{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:min(100%,420px);
  padding:18px 30px;
  background:var(--cream);
  color:var(--orange-deep);
  border-radius:999px;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 16px 38px -14px rgba(120,40,22,.85);
  opacity:0;
  animation:fadeUp .8s var(--ease-out) .92s forwards;
  transition:transform .3s var(--ease), background .3s ease, color .3s ease;
  overflow:hidden;
}
.btn-open::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(228,107,81,.34) 50%,transparent 68%);
  transform:translateX(-120%);
  animation:sheen 4s ease-in-out 2s infinite;
}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.btn-open:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.btn-open:active{transform:scale(.975)}
.btn-open__arrow{width:20px;height:20px;flex:none;transition:transform .35s var(--ease)}
.btn-open:hover .btn-open__arrow{transform:translateX(5px)}

.splash__scrollhint{opacity:0;animation:fadeUp .8s var(--ease-out) 1.15s forwards}
.splash__mouse{
  display:block;width:23px;height:36px;border-radius:14px;
  border:2px solid rgba(248,245,229,.5);
  position:relative;
}
.splash__mouse i{
  position:absolute;left:50%;top:7px;translate:-50% 0;
  width:3px;height:7px;border-radius:2px;background:var(--cream);
  animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(11px);opacity:.25}}

@keyframes fadeUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* short screens: give the brand field a little more room */
@media (max-height:680px){
  .splash{grid-template-rows:minmax(0,52fr) minmax(0,48fr)}
  .splash__logo{max-height:12vh;width:min(56vw,240px)}
}
/* wide screens: photo left, brand right */
@media (min-width:900px){
  .splash{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .splash__fade{
    background:linear-gradient(90deg,
      rgba(26,14,9,.34) 0%, rgba(228,107,81,0) 45%,
      rgba(228,107,81,.5) 85%, var(--orange) 100%);
  }
  .splash__badge{left:26px;right:auto;transform:none;animation:fadeDownR .8s var(--ease-out) .25s forwards}
  .splash__scrollhint{display:none}
  @keyframes fadeDownR{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  .splash__logo{max-height:22vh;width:min(30vw,340px)}
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{
  opacity:0;
  transition:opacity .6s ease .25s;
}
.app.is-live{opacity:1}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:40;
  height:calc(var(--hdr-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  display:grid;
  grid-template-columns:48px 1fr 48px;
  align-items:center;
  background:var(--orange);
  color:var(--cream);
  box-shadow:0 1px 0 rgba(44,26,19,.08);
  transition:box-shadow .35s ease;
}
.hdr.is-stuck{box-shadow:0 10px 30px -14px rgba(44,26,19,.5)}

.hdr__burger{
  width:48px;height:100%;
  display:grid;place-content:center;gap:5px;
  padding-inline-start:6px;
}
.hdr__burger span{
  display:block;width:22px;height:2.4px;border-radius:2px;background:var(--cream);
  transition:transform .4s var(--ease), opacity .25s ease, width .3s ease;
}
.hdr__burger span:nth-child(2){width:16px}
.hdr__burger:hover span:nth-child(2){width:22px}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* the wordmark sits dead centre and never changes */
.hdr__logo{
  display:grid;place-content:center;
  height:100%;
  transition:transform .4s var(--ease);
}
.hdr__logo img{
  width:clamp(104px,29vw,142px);
  height:auto;
  filter:brightness(0) invert(1) sepia(.1) saturate(.4) brightness(1.06);
}
.hdr__logo:hover{transform:scale(1.04)}
.hdr__spacer{display:block;width:48px}

/* ---------- category tabs ---------- */
.tabs{
  position:sticky;
  top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));
  z-index:38;
  background:var(--cream);
  border-bottom:1px solid var(--ink-faint);
}
.tabs::after{
  content:"";position:absolute;right:0;top:0;bottom:1px;width:34px;
  background:linear-gradient(90deg,rgba(248,245,229,0),var(--cream));
  pointer-events:none;
}
.tabs__track{
  display:flex;gap:9px;
  padding:11px var(--pad);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
  max-width:var(--max);
  margin-inline:auto;
}
.tabs__track::-webkit-scrollbar{display:none}

.tab{
  flex:none;
  padding:11px 19px;
  border-radius:999px;
  background:var(--cream-sink);
  color:var(--ink);
  font-weight:700;
  font-size:.79rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.tab:hover{background:#e6dfc6}
.tab:active{transform:scale(.95)}
.tab.is-on{
  background:var(--orange);
  color:var(--cream);
  box-shadow:0 8px 20px -8px rgba(228,107,81,.9);
}

/* ============================================================
   HERO BANNER CAROUSEL
   ============================================================ */
.bnr{
  position:relative;
  margin-top:clamp(20px,5.6vw,40px);
  background:var(--orange);
  overflow:hidden;
}
.bnr__viewport{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
}
.bnr__viewport.is-dragging{cursor:grabbing}

.bnr__track{
  display:flex;
  will-change:transform;
  transition:transform .62s var(--ease-out);
}
.bnr__slide{
  flex:0 0 100%;
  min-width:0;
  position:relative;
}
.bnr__slide picture,
.bnr__slide img{display:block;width:100%}
.bnr__slide img{
  height:auto;
  aspect-ratio:9/5;
  object-fit:cover;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  transform:scale(1.015);
  transition:transform .9s var(--ease-out), opacity .5s ease;
  opacity:.86;
}
.bnr__slide.is-current img{transform:scale(1);opacity:1}

/* ---- arrows ---- */
.bnr__arrow{
  position:absolute;
  top:50%;translate:0 -50%;
  z-index:3;
  width:40px;height:40px;
  display:none;place-content:center;
  border-radius:50%;
  background:rgba(248,245,229,.9);
  color:var(--orange-deep);
  transition:transform .3s var(--ease), background .3s ease;
}
.bnr__arrow svg{width:19px;height:19px}
.bnr__arrow--prev{left:14px}
.bnr__arrow--next{right:14px}
.bnr__arrow:hover{background:var(--cream);transform:translateY(-50%) scale(1.08)}
.bnr__arrow:active{transform:translateY(-50%) scale(.93)}
@media (hover:hover) and (min-width:760px){
  .bnr__arrow{display:grid}
}

/* on a desktop the banner is capped and centred — full-bleed at that
   width made it tower over the menu */
@media (min-width:900px){
  .bnr{
    max-width:min(880px, 92vw);
    margin-inline:auto;
    border-radius:var(--r-l);
  }
  /* the track is transformed, so the rounding has to be on the clipper too */
  .bnr__viewport{border-radius:inherit}
}

/* ---- dots ---- */
.bnr__dots{
  position:absolute;
  left:0;right:0;
  bottom:clamp(9px,2.2vw,16px);
  z-index:3;
  display:flex;justify-content:center;gap:7px;
  padding:0 var(--pad);
}
.bnr__dot{
  width:7px;height:7px;
  border-radius:999px;
  background:rgba(248,245,229,.5);
  box-shadow:0 1px 4px rgba(38,20,14,.4);
  transition:width .4s var(--ease), background .3s ease;
}
.bnr__dot.is-on{width:24px;background:var(--cream)}

/* ============================================================
   BEST SELLERS + MARQUEE
   ============================================================ */
.best{
  position:relative;
  background:var(--cream);
  color:var(--ink);
  overflow:hidden;
}
.best__pattern{
  position:absolute;inset:0;
  background-image:url("../brand/pattern-orange.svg");
  background-size:132px 132px;
  opacity:.14;
  pointer-events:none;
}
.best__inner{
  position:relative;
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(18px,4.2vw,30px) 0 clamp(12px,2.6vw,18px);
}

.best__head{
  padding:0 var(--pad);
  margin-bottom:clamp(8px,2vw,12px);
}
.best__headText{min-width:0}
.best__title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.55rem,7vw,2.6rem);
  line-height:.94;
  letter-spacing:-.028em;
  text-transform:uppercase;
  color:var(--ink);
}
.best__note{
  margin:5px 0 0;
  font-size:.82rem;font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-soft);
}

/* ---- auto-running rail ---- */
.best__stage{position:relative}
.best__rail{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 0 10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  touch-action:pan-y;
  overscroll-behavior-x:contain;
}
.best__rail::-webkit-scrollbar{display:none}
.best__rail.is-grabbing{cursor:grabbing}
.bset{display:flex;flex:none}

/* the cream fades in at both ends so cards enter and leave, not cut off */
.best__edge{
  position:absolute;top:0;bottom:0;
  width:clamp(30px,10vw,88px);
  pointer-events:none;
  z-index:2;
}
.best__edge--l{left:0;  background:linear-gradient(90deg,var(--cream),rgba(248,245,229,0))}
.best__edge--r{right:0; background:linear-gradient(270deg,var(--cream),rgba(248,245,229,0))}

.bcard{
  --t:0;                        /* 0 at the edges, 1 dead centre */
  position:relative;
  flex:none;
  width:min(56vw,204px);
  margin-inline-end:12px;
  display:flex;flex-direction:column;
  background:var(--cream-lift);
  border:1.5px solid rgba(44,26,19,.07);
  border-radius:var(--r-m);
  overflow:hidden;
  color:var(--ink);
  text-align:left;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  /* the card in the middle of the rail sits slightly forward */
  transform:scale(calc(.94 + .06 * var(--t)));
  will-change:transform;
}
.bcard:first-child{margin-inline-start:var(--pad)}
.bset:last-child .bcard:last-child{margin-inline-end:var(--pad)}

.bcard__media{
  display:block;
  aspect-ratio:1/1;
  background:var(--photo);
  overflow:hidden;
}
.bcard{transition:border-color .3s ease}
.bcard:hover{border-color:var(--orange)}
.bcard__media img{
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  transform:scale(calc(1 + .04 * var(--t)));
  transition:transform .25s linear;
}

.bcard__body{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 13px 14px;
}
.bcard__cat{
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-deep);
}
.bcard__name{
  font-weight:800;
  font-size:.93rem;
  line-height:1.2;
  letter-spacing:-.008em;
  color:var(--ink);
}
.bcard__price{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:2px;
  font-weight:800;
  font-size:.88rem;
  color:var(--orange-deep);
  font-variant-numeric:tabular-nums;
}
.bcard__price .aed{width:13px;height:13px}

/* ---- drag hint ---- */
.best__hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0;
  padding:6px var(--pad) 0;
  font-size:.65rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.75;
}
.best__hint svg{
  width:15px;height:15px;
  animation:hintPulse 2.6s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{opacity:.5;transform:scaleX(.86)}
  50%{opacity:1;transform:scaleX(1)}
}

/* ---- marquee ---- */
.marquee{
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
  padding:9px 0;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:slide 30s linear infinite;
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__half{display:flex;flex:none}
.marquee__unit{
  display:inline-flex;align-items:center;gap:18px;
  padding-inline-end:18px;
  font-size:.76rem;font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
}
.marquee__star{width:11px;height:11px;flex:none;color:var(--orange)}

/* ---- the Best Sellers tab ---- */
.tab--best{display:inline-flex;align-items:center;gap:7px}
.tab__star{width:12px;height:12px;flex:none}

/* ============================================================
   MENU
   ============================================================ */
.menu{
  max-width:var(--max);
  margin-inline:auto;
  padding:0 var(--pad) 22px;
}

.cat{padding-top:clamp(24px,5.4vw,40px)}
.cat:first-child{padding-top:clamp(22px,4.6vw,34px)}

.cat__head{
  display:flex;align-items:baseline;
  margin-bottom:10px;
}
.cat__title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.9rem,8.4vw,3.2rem);
  line-height:.9;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--ink);
}
.cat__rule{
  display:block;
  height:3px;border-radius:2px;
  margin-bottom:clamp(13px,3.2vw,18px);
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange) 22%,rgba(228,107,81,.14) 100%);
}


.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(11px,3.2vw,18px);
}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:920px){.grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- sub-category groups inside a category ---------- */
.subcat{margin-top:clamp(22px,4.6vw,32px)}
.subcat:first-child{margin-top:0}
.subcat__title{
  margin:0 0 clamp(10px,2.4vw,14px);
  font-weight:800;
  font-size:clamp(1.05rem,3.4vw,1.3rem);
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--orange-deep);
}

/* ---------- card — flat, no shadow ---------- */
.card{
  position:relative;
  display:flex;flex-direction:column;
  gap:10px;
  background:none;
  text-align:left;
  width:100%;
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.card.is-in{opacity:1;transform:none}

.card__media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--photo);
  border-radius:var(--r-m);
  overflow:hidden;
  /* a hairline of the ground colour reads as a rim, not a shadow */
  outline:1.5px solid rgba(44,26,19,.08);
  outline-offset:-1.5px;
  transition:outline-color .35s ease;
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.card:hover .card__media{outline-color:var(--orange)}
.card:hover .card__media img{transform:scale(1.06)}
.card:active .card__media{transform:scale(.985)}

.card__price{
  position:absolute;
  left:9px;bottom:9px;
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 11px 6px 9px;
  border-radius:999px;
  background:var(--cream);
  color:var(--ink);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.card__price .aed{width:12px;height:12px;flex:none;opacity:.9}

.card__body{
  padding:0 3px;
  display:flex;align-items:flex-start;
}
.card__name{
  margin:0;
  font-weight:700;
  font-size:.94rem;
  line-height:1.24;
  letter-spacing:-.005em;
  color:var(--ink);
  text-wrap:balance;
}

/* empty category */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:38px 22px;
  border:2px dashed rgba(228,107,81,.32);
  border-radius:var(--r-m);
  text-align:center;
  color:var(--ink-soft);
  background:rgba(228,107,81,.045);
}
.empty img{width:56px;height:auto;opacity:.5}
.empty p{margin:0;font-weight:600;font-size:.92rem}

/* AED glyph */
.aed{display:inline-block;vertical-align:-.06em}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative;
  margin-top:clamp(30px,6.5vw,52px);
  background:var(--orange);
  color:var(--cream);
  overflow:hidden;
  border-radius:var(--r-l) var(--r-l) 0 0;
}
.foot__pattern{
  position:absolute;inset:0;
  background-image:url("../brand/pattern-cream.svg");
  background-size:150px 150px;
  opacity:.14;
}
.foot__inner{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
  padding:clamp(34px,8vw,54px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 34px);
  text-align:center;
  max-width:var(--max);
  margin-inline:auto;
}
.foot__chef{
  width:clamp(96px,26vw,132px);height:auto;
  filter:brightness(0) invert(1) sepia(.12) saturate(.45) brightness(1.05);
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}

.foot__logo{
  width:clamp(150px,42vw,210px);height:auto;
  filter:brightness(0) invert(1) sepia(.12) saturate(.45) brightness(1.05);
}
.foot__slogan{
  margin:0;
  font-weight:700;
  font-size:clamp(.95rem,3.8vw,1.12rem);
  letter-spacing:.01em;
  opacity:.95;
}

.foot__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.pill-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;
  border-radius:999px;
  background:var(--cream);
  color:var(--orange-deep);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 10px 26px -12px rgba(44,26,19,.7);
  transition:transform .3s var(--ease), background .3s ease, color .3s ease;
}
.pill-btn svg{width:17px;height:17px;flex:none}
.pill-btn:hover{transform:translateY(-3px);background:var(--ink);color:var(--cream)}
.pill-btn:active{transform:scale(.96)}

.foot__addr{
  margin:12px 0 0;
  font-size:.86rem;font-weight:600;
  opacity:.85;
}
.foot__credit{
  margin:2px 0 0;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;
  opacity:.6;
}

/* ---------- back to top ---------- */
.totop{
  position:fixed;
  right:calc(var(--pad) - 4px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  z-index:36;
  width:46px;height:46px;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  box-shadow:var(--shadow-m);
  opacity:0;transform:translateY(14px) scale(.85);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s ease;
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop.is-hidden{opacity:0;transform:translateY(14px) scale(.85);pointer-events:none}
.totop:hover{background:var(--orange)}
.totop svg{width:20px;height:20px}

/* ============================================================
   DRAWER
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:50;
  background:rgba(44,26,19,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.scrim.is-on{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:60;
  width:min(80vw,318px);
  background:var(--orange);
  color:var(--cream);
  display:flex;flex-direction:column;
  transform:translate3d(-102%,0,0);
  transition:transform .5s var(--ease-out);
  overflow:hidden;
}
.drawer.is-on{transform:none}
.drawer__pattern{
  position:absolute;inset:0;
  background-image:url("../brand/pattern-cream.svg");
  background-size:132px 132px;
  opacity:.1;
  pointer-events:none;
}

/* ---- head ---- */
.drawer__head{
  position:relative;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 22px) 16px 16px 20px;
  flex:none;
}
.drawer__head img{
  width:clamp(132px,36vw,168px);height:auto;
  filter:brightness(0) invert(1) sepia(.1) saturate(.4) brightness(1.06);
}
.drawer__close{
  width:36px;height:36px;flex:none;
  display:grid;place-content:center;
  border-radius:50%;
  background:rgba(248,245,229,.18);
  transition:background .3s ease, color .3s ease, transform .35s var(--ease);
}
.drawer__close:hover{background:var(--cream);color:var(--orange-deep);transform:rotate(90deg)}
.drawer__close svg{width:18px;height:18px}

/* ---- nav ---- */
.drawer__eyebrow{
  position:relative;
  margin:2px 0 6px;
  padding:0 20px;
  font-size:.64rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;
  opacity:.55;
  flex:none;
}
.drawer__nav{
  position:relative;
  flex:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 14px 6px;
  display:flex;flex-direction:column;
  gap:2px;
}
/* the character absorbs whatever height is left, so the panel never
   ends in a block of empty colour */
.drawer__art{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:8px 6px 0 0;
  pointer-events:none;
}
.drawer__art img{
  width:auto;
  height:100%;
  max-height:180px;
  max-width:62%;
  object-fit:contain;
  opacity:.3;
  filter:brightness(0) invert(1);
}
.dlink{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;
  border-radius:12px;
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:-.005em;
  line-height:1.2;
  transition:background .3s ease, color .3s ease, padding-left .35s var(--ease);
  opacity:0;
  transform:translateX(-16px);
}
.drawer.is-on .dlink{animation:dlinkIn .5s var(--ease-out) forwards}
@keyframes dlinkIn{to{opacity:1;transform:none}}

.dlink__go{
  width:17px;height:17px;flex:none;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .3s ease, transform .35s var(--ease);
}
.dlink:hover{background:rgba(248,245,229,.14);padding-left:20px}
.dlink:hover .dlink__go{opacity:.75;transform:none}
.dlink.is-on{background:var(--cream);color:var(--orange-deep)}
.dlink.is-on .dlink__go{opacity:1;transform:none}

/* the star marks the featured rail */
.dlink--best span:first-child::before{
  content:"";
  display:inline-block;
  width:13px;height:13px;
  margin-inline-end:8px;
  vertical-align:-1px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.8-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 9.6l6.1-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.8-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 9.6l6.1-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- foot ---- */
.drawer__foot{
  position:relative;
  flex:none;
  padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 18px);
  border-top:1px solid rgba(248,245,229,.22);
  display:flex;flex-direction:column;gap:7px;
}
.drawer__social{
  position:relative;
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:.84rem;
  padding:10px 13px;
  border-radius:11px;
  background:rgba(248,245,229,.14);
  transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.drawer__social svg{width:16px;height:16px;flex:none}
.drawer__social:hover{background:var(--cream);color:var(--orange-deep);transform:translateX(4px)}
.drawer__slogan{
  position:relative;
  margin:5px 0 0;
  font-size:.74rem;font-weight:700;line-height:1.4;
  letter-spacing:.03em;
  opacity:.7;
}

/* ============================================================
   PRODUCT POPUP — a floating card, the menu stays visible behind it
   ============================================================ */
.pv{
  position:fixed;inset:0;z-index:65;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4.5vw,32px);
  padding-top:calc(env(safe-area-inset-top,0px) + clamp(14px,4.5vw,32px));
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,4.5vw,32px));
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.pv.is-on{opacity:1;pointer-events:auto}

.pv__backdrop{
  position:absolute;inset:0;
  background:rgba(38,20,14,.58);
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
}

.pv__panel{
  position:relative;
  width:min(100%,392px);
  max-height:100%;
  display:flex;flex-direction:column;
  background:var(--cream-lift);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(38,20,14,.75);
  transform:translate3d(0,18px,0) scale(.96);
  opacity:0;
}
.pv.is-on .pv__panel{animation:pvPop .42s var(--ease-out) .04s forwards}
@keyframes pvPop{to{transform:none;opacity:1}}

/* ---- photo ---- */
.pv__media{
  position:relative;
  flex:none;
  aspect-ratio:1/1;
  max-height:52dvh;
  background:var(--photo);
  overflow:hidden;
}
.pv__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 48%;
  transform:scale(.94);
  opacity:0;
}
.pv.is-on .pv__media img{animation:pvImg .5s var(--ease-out) .12s forwards}
@keyframes pvImg{to{transform:scale(1);opacity:1}}
.pv.is-swapping .pv__media img{
  animation:none;transform:scale(1.03);opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}

.pv__close{
  position:absolute;
  top:10px;right:10px;
  z-index:3;
  width:38px;height:38px;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--cream);
  color:var(--orange-deep);
  transition:transform .35s var(--ease), background .3s ease, color .3s ease;
}
.pv__close:hover{background:var(--ink);color:var(--cream);transform:rotate(90deg)}
.pv__close svg{width:17px;height:17px}

.pv__tag{
  position:absolute;
  top:14px;left:14px;
  z-index:3;
  font-size:.63rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(248,245,229,.5);
  background:rgba(120,40,22,.2);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.pv__nav{
  position:absolute;
  top:50%;translate:0 -50%;
  z-index:3;
  width:38px;height:38px;
  display:grid;place-content:center;
  border-radius:50%;
  background:rgba(248,245,229,.92);
  color:var(--orange-deep);
  transition:transform .3s var(--ease), background .3s ease, opacity .3s ease;
}
.pv__nav svg{width:18px;height:18px}
.pv__nav--prev{left:9px}
.pv__nav--next{right:9px}
.pv__nav:hover{background:var(--cream);transform:translateY(-50%) scale(1.09)}
.pv__nav:active{transform:translateY(-50%) scale(.93)}
.pv__nav[disabled]{opacity:.26;pointer-events:none}

/* ---- info ---- */
.pv__card{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:16px var(--pad) 18px;
  display:flex;flex-direction:column;gap:13px;
}
.pv__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;
}
.pv__name{
  margin:0;
  font-weight:900;
  font-size:clamp(1.32rem,5.6vw,1.72rem);
  line-height:1.02;
  letter-spacing:-.028em;
  text-transform:uppercase;
  text-wrap:balance;
  flex:1;
}
.pv__price{
  flex:none;
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 15px;
  border-radius:999px;
  background:var(--orange);
  color:var(--cream);
  font-weight:800;
  font-size:clamp(.94rem,3.8vw,1.08rem);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pv__price .aed{width:14px;height:14px}

.pv__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pv__chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-soft);
}
.pv__dot{
  width:8px;height:8px;border-radius:50%;
  background:#3F7D54;
  box-shadow:0 0 0 3px rgba(63,125,84,.16);
}
.pv__pos{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  opacity:.7;
}

.pv__actions{display:flex;gap:9px}
.pv__btn{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:transform .3s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.pv__btn svg{width:15px;height:15px;flex:none}
.pv__btn:active{transform:scale(.97)}
.pv__btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--ink-faint)}
.pv__btn--ghost:hover{border-color:var(--orange);color:var(--orange-deep)}
.pv__btn--solid{background:var(--ink);color:var(--cream)}
.pv__btn--solid:hover{background:var(--orange)}

/* short screens: shrink the photo before the text */
@media (max-height:680px){
  .pv__media{max-height:38dvh}
  .pv__card{gap:10px;padding-block:13px 15px}
  .pv__btn{padding:11px 12px}
}
/* roomy screens: a wider popup, photo beside the details */
@media (min-width:760px) and (min-height:520px){
  .pv__panel{
    width:min(100%,780px);
    max-height:min(620px,100%);
    flex-direction:row;
    align-items:stretch;
  }
  .pv__media{
    flex:1 1 50%;
    aspect-ratio:5/6;      /* the photo sets the panel height, not the viewport */
    max-height:none;
    min-height:0;
  }
  .pv__card{
    flex:1 1 50%;
    justify-content:center;
    gap:18px;
    padding:clamp(24px,3.2vw,40px);
    overflow-y:auto;
  }
  .pv__name{font-size:clamp(1.6rem,2.6vw,2.2rem)}
}

/* ============================================================
   ORDERING — pop-up controls, basket bar, checkout, confirmation
   ============================================================ */

/* ---- pop-up additions ---- */
.pv__desc{
  margin:-4px 0 0;
  font-size:.92rem;font-weight:500;line-height:1.45;
  color:var(--ink-soft);
}
.pv__order{display:flex;align-items:center;gap:10px}
.pv__order[hidden],.pv__actions[hidden]{display:none}
.pv__add{flex:1;gap:6px;padding-inline:16px;background:var(--orange);color:var(--cream)}
.pv__add:hover{background:var(--ink)}
.pv__addsum{display:inline-flex;align-items:center;gap:4px;opacity:.95}
.pv__addsum::before{content:"·";margin-right:2px;opacity:.7}
.pv__addsum .aed{width:12px;height:12px}
.pv__inbasket{
  margin:-4px 0 0;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--orange-deep);
}

/* ---- quantity stepper (pop-up + basket lines) ---- */
.qty{
  flex:none;
  display:inline-flex;align-items:center;
  padding:3px;
  border-radius:999px;
  background:var(--cream-sink);
}
.qty__btn{
  width:38px;height:38px;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--cream-lift);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(44,26,19,.08);
  transition:background .25s ease,color .25s ease,transform .2s var(--ease);
}
.qty__btn svg{width:16px;height:16px}
.qty__btn:hover{background:var(--orange);color:var(--cream)}
.qty__btn:active{transform:scale(.9)}
.qty__btn[disabled]{opacity:.35;pointer-events:none}
.qty__n{
  min-width:34px;text-align:center;
  font-weight:800;font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.qty--s{padding:2px}
.qty--s .qty__btn{width:30px;height:30px}
.qty--s .qty__btn svg{width:14px;height:14px}
.qty--s .qty__n{min-width:28px;font-size:.9rem}

/* ---- basket bar ---- */
.cartbar{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  z-index:37;
  width:min(calc(100% - 2 * var(--pad)),460px);
  translate:-50% 0;
  display:flex;align-items:center;gap:12px;
  padding:8px 18px 8px 8px;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  box-shadow:0 18px 40px -16px rgba(44,26,19,.6);
  animation:barIn .45s var(--ease-out);
  transition:background .3s ease;
}
.cartbar[hidden]{display:none}
.cartbar:hover{background:var(--orange-deep)}
@keyframes barIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.cartbar.is-bump{animation:barBump .45s var(--ease-out)}
@keyframes barBump{30%{transform:scale(1.04)}}
.cartbar__count{
  min-width:38px;height:38px;padding:0 10px;
  display:grid;place-content:center;
  border-radius:999px;
  background:var(--orange);
  font-weight:900;font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.cartbar__label{
  flex:1;text-align:left;
  font-weight:800;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
}
.cartbar__total{
  display:inline-flex;align-items:center;gap:4px;
  font-weight:800;font-size:.98rem;
  font-variant-numeric:tabular-nums;
}
.cartbar__total .aed{width:13px;height:13px}
.cartbar__go{width:18px;height:18px;flex:none;opacity:.8}
body.has-cart .totop{bottom:calc(env(safe-area-inset-bottom,0px) + 82px)}
body.has-cart .foot{padding-bottom:76px}

/* ---- checkout overlay ---- */
.co{
  position:fixed;inset:0;z-index:75;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.co.is-on{opacity:1;pointer-events:auto}
.co__backdrop{
  position:absolute;inset:0;
  background:rgba(38,20,14,.58);
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
}
.co__panel{
  position:relative;
  width:100%;
  height:calc(100dvh - env(safe-area-inset-top,0px) - 22px);
  display:flex;flex-direction:column;
  background:var(--cream-lift);
  border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:var(--shadow-l);
  transform:translate3d(0,40px,0);
  transition:transform .45s var(--ease-out);
  overflow:hidden;
}
.co.is-on .co__panel{transform:none}
.co.is-busy .co__body{opacity:.55;pointer-events:none}
@media (min-width:760px){
  .co{justify-content:flex-end;align-items:stretch}
  .co__panel{
    width:min(470px,100%);
    height:100%;
    border-radius:var(--r-l) 0 0 var(--r-l);
    transform:translate3d(40px,0,0);
  }
}

.co__head{
  flex:none;
  display:flex;align-items:center;gap:10px;
  padding:16px var(--pad) 14px;
  border-bottom:1px solid var(--ink-faint);
}
.co__titles{flex:1;min-width:0}
.co__eyebrow{
  margin:0 0 3px;
  font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-deep);
}
.co__title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.45rem,6vw,1.8rem);
  line-height:.95;letter-spacing:-.025em;text-transform:uppercase;
  outline:none;
}
.co__iconbtn{
  width:40px;height:40px;flex:none;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--cream-sink);
  color:var(--ink);
  transition:background .3s ease,color .3s ease,transform .35s var(--ease);
}
.co__iconbtn[hidden]{display:none}
.co__iconbtn svg{width:17px;height:17px}
.co__iconbtn:hover{background:var(--ink);color:var(--cream)}

.co__body{
  flex:1;min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px var(--pad) 22px;
  transition:opacity .3s ease;
}
.co__step[hidden]{display:none}

.co__when{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:var(--r-s);
  background:rgba(228,107,81,.1);
  color:var(--ink);
  font-size:.9rem;font-weight:600;
}
.co__when[hidden]{display:none}
.co__when svg{width:20px;height:20px;flex:none;color:var(--orange-deep)}
.co__when b{font-weight:800}

/* basket lines */
.co__lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.co__lines[hidden]{display:none}
.line{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--ink-faint);
}
.line:last-child{border-bottom:0}
.line__shot{
  width:64px;height:64px;
  border-radius:var(--r-s);
  overflow:hidden;
  background:var(--photo);
}
.line__shot img{width:100%;height:100%;object-fit:cover}
.line__main{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.line__name{font-weight:800;font-size:.95rem;line-height:1.2}
.line__unit{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.74rem;font-weight:600;color:var(--ink-soft);
}
.line__unit .aed{width:10px;height:10px}
.line__total{
  align-self:start;
  margin-top:2px;
  display:inline-flex;align-items:center;gap:3px;
  font-weight:800;font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.line__total .aed{width:12px;height:12px}

.co__empty{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:48px 12px;
  text-align:center;color:var(--ink-soft);font-weight:600;
}
.co__empty[hidden]{display:none}
.co__empty img{opacity:.5}
.co__empty p{margin:0}
.co__empty .pv__btn{flex:none;padding-inline:22px}

/* form */
.co__set{border:0;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.co__legend{
  padding:0;margin:0 0 2px;
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-deep);
}
.co__fld{display:flex;flex-direction:column;gap:6px}
.co__fld > span{font-size:.82rem;font-weight:700;color:var(--ink)}
.co__fld em{font-style:normal;font-weight:500;color:var(--ink-soft)}
.co__fld input,.co__fld textarea{
  width:100%;
  padding:13px 14px;
  font:inherit;font-size:1rem;font-weight:600;
  color:var(--ink);
  background:#fff;
  border:1.5px solid rgba(44,26,19,.16);
  border-radius:var(--r-s);
  transition:border-color .2s ease,box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
.co__fld textarea{resize:vertical;min-height:52px}
.co__fld input::placeholder,.co__fld textarea::placeholder{color:rgba(124,90,75,.55);font-weight:500}
.co__fld input:focus,.co__fld textarea:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(228,107,81,.16);
}
.co__fld.is-bad input{border-color:#B23B2E;background:#FFF6F4}
.co__fld.is-bad > span{color:#B23B2E}

/* location */
.loc{display:flex;flex-direction:column;gap:8px}
.loc__btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;
  padding:14px;
  border-radius:var(--r-s);
  border:1.5px dashed var(--orange);
  background:rgba(228,107,81,.06);
  color:var(--orange-deep);
  font-weight:800;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.loc__btn[hidden]{display:none}
.loc__btn:hover{background:var(--orange);color:var(--cream);border-style:solid}
.loc__btn[disabled]{opacity:.6;pointer-events:none}
.loc__btn svg{width:18px;height:18px}
.loc.is-bad .loc__btn{border-color:#B23B2E;color:#B23B2E}
.loc__pinned{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px 10px 12px;
  border-radius:var(--r-s);
  background:#E7F1EA;
  color:#2F6342;
}
.loc__pinned[hidden]{display:none}
.loc__ok{
  width:28px;height:28px;flex:none;
  display:grid;place-content:center;
  border-radius:50%;background:#3F7D54;color:#fff;
}
.loc__ok svg{width:15px;height:15px}
.loc__text{flex:1;min-width:0;font-size:.86rem;line-height:1.25}
.loc__text b{font-weight:800}
.loc__text small{font-size:.76rem;font-weight:600;opacity:.8}
.loc__link{font-size:.76rem;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.loc__x{width:28px;height:28px;flex:none;display:grid;place-content:center;border-radius:50%}
.loc__x:hover{background:rgba(47,99,66,.14)}
.loc__x svg{width:14px;height:14px}
.loc__err{margin:0;font-size:.8rem;font-weight:600;color:#B23B2E}
.loc__err[hidden]{display:none}

.co__or{
  display:flex;align-items:center;gap:10px;
  margin:2px 0;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.co__or::before,.co__or::after{content:"";flex:1;height:1px;background:var(--ink-faint)}

/* footer */
.co__foot{
  flex:none;
  padding:14px var(--pad) calc(env(safe-area-inset-bottom,0px) + 14px);
  border-top:1px solid var(--ink-faint);
  background:var(--cream-lift);
  display:flex;flex-direction:column;gap:10px;
}
.co__foot[hidden]{display:none}
.co__sum{margin:0;display:flex;flex-direction:column;gap:4px}
.co__sum > div{display:flex;justify-content:space-between;align-items:center}
.co__sum dt{font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.co__sum dd{
  margin:0;
  display:inline-flex;align-items:center;gap:3px;
  font-weight:700;font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.co__sum dd .aed{width:11px;height:11px}
.co__sum .co__sumTotal{margin-top:4px}
.co__sumTotal dt{font-size:1rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.co__sumTotal dd{font-size:1.15rem;font-weight:900}
.co__sumTotal dd .aed{width:14px;height:14px}

.co__msg{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  font-size:.84rem;font-weight:600;line-height:1.4;
  background:#FBE7E4;color:#B23B2E;
}
.co__msg[hidden]{display:none}
.co__msg.is-info{background:rgba(228,107,81,.1);color:var(--orange-deep)}

.co__cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  padding:16px;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  font-weight:800;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s ease,transform .2s var(--ease),opacity .2s ease;
}
.co__cta svg{width:18px;height:18px}
.co__cta:hover{background:var(--orange)}
.co__cta:active{transform:scale(.98)}
.co__cta[disabled]{opacity:.45;pointer-events:none}
.co.is-busy .co__cta svg{display:none}
.co.is-busy .co__cta::before{
  content:"";width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(248,245,229,.35);border-top-color:var(--cream);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.co__secure{
  margin:0;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:.72rem;font-weight:600;color:var(--ink-soft);
  text-align:center;
}
.co__secure svg{width:13px;height:13px;flex:none}

/* ---- order confirmed ---- */
.done{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 18px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 18px);
  background:var(--orange);
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.done.is-on{opacity:1;pointer-events:auto}
.done__pattern{
  position:fixed;inset:0;
  background-image:url("../brand/pattern-cream.svg");
  background-size:140px 140px;
  opacity:.1;pointer-events:none;
}
.done__card{
  position:relative;
  width:min(100%,420px);
  margin:auto;
  padding:30px 24px 22px;
  border-radius:var(--r-l);
  background:var(--cream-lift);
  box-shadow:0 30px 70px -24px rgba(38,20,14,.6);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.done__icon{
  position:relative;
  width:68px;height:68px;
  display:grid;place-content:center;
  border-radius:50%;
  background:var(--cream-sink);
  color:var(--orange-deep);
  margin-bottom:4px;
}
.done__icon svg{width:34px;height:34px;display:none}
.done__spin{
  width:36px;height:36px;border-radius:50%;
  border:3.5px solid rgba(228,107,81,.25);border-top-color:var(--orange);
  animation:spin .9s linear infinite;
}
.done[data-state="paid"] .done__icon{background:#3F7D54;color:#fff;animation:pop .5s var(--ease-out)}
.done[data-state="paid"] .done__tick{display:block}
.done[data-state="slow"] .done__icon,
.done[data-state="failed"] .done__icon,
.done[data-state="lost"] .done__icon{background:#FBE7E4;color:#B23B2E}
.done[data-state="slow"] .done__warn,
.done[data-state="failed"] .done__warn,
.done[data-state="lost"] .done__warn{display:block}
.done:not([data-state="wait"]) .done__spin{display:none}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:none}}
.done__eyebrow{
  margin:0;
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-deep);
}
.done__title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.7rem,7.5vw,2.2rem);
  line-height:.95;letter-spacing:-.03em;text-transform:uppercase;
  text-wrap:balance;
}
.done__text{margin:2px 0 4px;font-size:.95rem;font-weight:500;line-height:1.5;color:var(--ink-soft)}
.done__text b{color:var(--ink);font-weight:800}
.done__receipt{
  width:100%;
  padding:12px 14px;
  border-radius:var(--r-s);
  background:var(--cream);
  text-align:left;
}
.done__receipt[hidden]{display:none}
.done__lines{list-style:none;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dashed rgba(44,26,19,.2)}
.done__lines li,.done__sum > div{
  display:flex;justify-content:space-between;gap:10px;
  padding:3px 0;
  font-size:.88rem;font-weight:600;
}
.done__lines b{color:var(--orange-deep)}
.done__lines span:last-child,.done__sum dd{
  margin:0;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.done__lines .aed,.done__sum .aed{width:11px;height:11px}
.done__sum{margin:0}
.done__sum dt{color:var(--ink-soft)}
.done__total dt,.done__total dd{font-weight:900;color:var(--ink);font-size:1rem}
.done__mail{margin:0;font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.done__mail[hidden]{display:none}
.done__actions{display:flex;gap:9px;width:100%;margin-top:8px}
.done__actions [hidden]{display:none}

/* ---- toast ---- */
.stoast{
  position:fixed;left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 86px);
  z-index:90;
  max-width:calc(100% - 2 * var(--pad));
  translate:-50% 0;
  padding:12px 20px;
  border-radius:999px;
  background:var(--cream-lift);
  color:var(--ink);
  font-weight:800;font-size:.86rem;
  box-shadow:0 14px 34px -12px rgba(44,26,19,.45);
  text-align:center;
  opacity:0;transform:translateY(10px);
  transition:opacity .25s ease,transform .3s var(--ease-out);
  pointer-events:none;
}
.stoast[hidden]{display:none}
.stoast.is-on{opacity:1;transform:none}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .card{opacity:1;transform:none}
  .pv__panel,.pv__media img{opacity:1;transform:none;animation:none}
  .bcard{transform:none;filter:none}
  .best__hint svg{animation:none}
  .bnr__track{transition:none}
  .bnr__slide img{transform:none;opacity:1}
  .marquee__track{animation:none}
  .co__panel{transform:none}
  .done__spin{animation-duration:1.8s !important;animation-iteration-count:infinite !important}
  .splash__logo,.splash__slogan span,.splash__badge,.btn-open,.splash__scrollhint{opacity:1}
}