:root{
    --orange:#EB4B22;
    --orange-d:#CE3C18;
    --lime:#C7F02E;
    --lime-d:#A6CC1E;
    --lime-soft:#F1FBDD;
    --ink:#17140A;
    --cream:#FBF4E4;
    --cream-d:#F1E6CE;
    --purple:#7C3AED;
    --ink-60:rgba(23,20,10,.62);
    --ink-80:rgba(23,20,10,.82);
    --bd:2.5px solid var(--ink);
    --hard:5px 6px 0 var(--ink);
    --hard-sm:3px 4px 0 var(--ink);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--orange);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45;overflow-x:hidden}
  .display{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:400;line-height:.92}
  img{max-width:100%;display:block}
  button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--ink);color:var(--lime)}
  svg{display:block}

  /* ---- Buttons ---- */
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:16px;padding:14px 24px;border:var(--bd);border-radius:999px;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
  .btn svg{width:20px;height:20px}
  .btn--lime{background:var(--lime);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
  .btn--lime:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--ink)}
  .btn--lime:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
  .btn--dark{background:var(--ink);color:var(--lime);box-shadow:0 5px 0 #000}
  .btn--dark:active{transform:translateY(5px);box-shadow:0 0 0 #000}

  /* ================= HEADER ================= */
  .header{position:sticky;top:0;z-index:60;background:var(--orange);border-bottom:var(--bd)}
  .header__row{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
  .logo{display:inline-flex;align-items:center;gap:0;background:var(--ink);border:var(--bd);border-radius:14px;padding:8px 15px;box-shadow:var(--hard-sm);flex-shrink:0}
  .logo b{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.02em;color:var(--lime);text-transform:uppercase}
  .logo b i{color:var(--orange);font-style:normal}
  .logo .tilde{color:var(--lime);font-family:'Anton';font-size:22px;margin:0 2px}

  .locpill{position:relative;flex-shrink:0}
  .locpill__btn{display:flex;align-items:center;gap:7px;background:var(--cream);border:var(--bd);color:var(--ink);font-size:13px;font-weight:600;padding:8px 13px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s}
  .locpill__btn:hover{transform:translate(-1px,-1px);box-shadow:3px 4px 0 var(--ink)}
  .locpill__btn svg{width:15px;height:15px;flex-shrink:0}
  .locpill__chev{width:12px;height:12px;color:var(--ink-60);margin-left:2px}
  .locpill small{color:var(--ink-60);font-weight:500}
  .locpick{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;max-height:min(360px,70vh);overflow-y:auto;background:var(--cream);border:var(--bd);border-radius:14px;box-shadow:var(--hard);padding:6px;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
  .locpick.show{opacity:1;visibility:visible;transform:translateY(0)}
  .locpick li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s}
  .locpick li:hover{background:var(--cream-d)}
  .locpick li.is-on{background:var(--lime)}
  .locpick li small{color:var(--ink-60);font-weight:500;font-size:12px}

  .search{flex:1;position:relative;min-width:0}
  .search input{width:100%;height:46px;border-radius:999px;border:var(--bd);background:var(--cream);padding:0 16px 0 44px;font-size:14.5px;font-family:'Space Grotesk';font-weight:500;color:var(--ink)}
  .search input::placeholder{color:var(--ink-60)}
  .search input:focus{outline:none;box-shadow:var(--hard-sm)}
  .search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--ink)}

  .cartbtn{display:flex;align-items:center;gap:9px;flex-shrink:0;background:var(--lime);color:var(--ink);font-family:'Anton';text-transform:uppercase;letter-spacing:.03em;font-size:14px;padding:0 16px;height:46px;border:var(--bd);border-radius:999px;box-shadow:var(--hard-sm);transition:transform .12s var(--ease),box-shadow .12s}
  .cartbtn:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
  .cartbtn:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
  .cartbtn svg{width:20px;height:20px}
  .cartbtn__count{background:var(--ink);color:var(--lime);font-family:'Anton';font-size:13px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center}
  .cartbtn__total{font-variant-numeric:tabular-nums}
  .bump{animation:bump .45s var(--ease)}
  @keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.85)}100%{transform:scale(1)}}

  /* ================= CATEGORIES ================= */
  .cats{position:sticky;top:71px;z-index:50;background:var(--orange);border-bottom:var(--bd)}
  .cats__inner{position:relative;max-width:1240px;margin:0 auto}
  .cats__scroll{padding:13px 20px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
  .cats__scroll::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-family:'Anton';text-transform:uppercase;letter-spacing:.03em;font-size:14px;background:var(--cream);border:var(--bd);color:var(--ink);transition:all .14s var(--ease);white-space:nowrap}
  .chip:hover{transform:translateY(-2px)}
  .chip.is-active{background:var(--ink);color:var(--lime)}
  .chip .e{font-family:'Space Grotesk';font-size:15px}

  .subcats{position:sticky;top:var(--subcats-top,132px);z-index:49;background:var(--orange-d);border-bottom:2px solid var(--ink);display:none}
  .subcats.show{display:block}
  .subcats__inner{position:relative;max-width:1240px;margin:0 auto}
  .subcats__scroll{padding:9px 20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
  .subcats__scroll::-webkit-scrollbar{display:none}
  .subchip{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:7px 14px;min-height:32px;border-radius:999px;font-family:'Space Grotesk';font-weight:700;font-size:12.5px;background:rgba(251,244,228,.9);border:1.5px solid var(--ink);color:var(--ink);transition:all .14s var(--ease);white-space:nowrap}
  .subchip:hover{transform:translateY(-1px)}
  .subchip.is-active{background:var(--ink);color:var(--lime);border-color:var(--ink)}

  /* Edge fades hint that a chip row scrolls horizontally. JS toggles .at-start/.at-end on the
     wrapper as the row scrolls, so a fade only shows on the side that still has hidden chips —
     it's gone entirely once every chip fits (nothing to scroll). */
  .scrollfade{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;opacity:1;transition:opacity .18s var(--ease)}
  .scrollfade--l{left:0}
  .scrollfade--r{right:0}
  .cats__inner .scrollfade--l{background:linear-gradient(90deg,var(--orange),rgba(235,75,34,0))}
  .cats__inner .scrollfade--r{background:linear-gradient(270deg,var(--orange),rgba(235,75,34,0))}
  .subcats__inner .scrollfade--l{background:linear-gradient(90deg,var(--orange-d),rgba(206,60,24,0))}
  .subcats__inner .scrollfade--r{background:linear-gradient(270deg,var(--orange-d),rgba(206,60,24,0))}
  .cats__inner.at-start .scrollfade--l,.subcats__inner.at-start .scrollfade--l{opacity:0}
  .cats__inner.at-end .scrollfade--r,.subcats__inner.at-end .scrollfade--r{opacity:0}

  /* ================= LAYOUT ================= */
  .wrap{max-width:1240px;margin:0 auto;padding:0 20px}

  /* ================= HERO ================= */
  .hero{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center;padding:46px 0 30px}
  .hero__eyebrow{display:inline-block;font-family:'Anton';text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--ink);background:var(--lime);border:var(--bd);padding:6px 14px;border-radius:999px;margin-bottom:20px;box-shadow:var(--hard-sm);transform:rotate(-2deg)}
  .hero h1{font-size:clamp(52px,8.5vw,104px)}
  .hero h1 .lime{color:var(--lime);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
  .hero__sub{font-size:17px;font-weight:500;max-width:38ch;margin-top:20px;color:var(--ink-80)}
  .hero__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
  .hero__free{display:inline-flex;align-items:center;gap:8px;font-family:'Anton';text-transform:uppercase;letter-spacing:.03em;font-size:15px;color:var(--ink)}
  .hero__free svg{width:24px;height:24px}
  /* Answers the "how will I pay / how long / any surprise fees" hesitation right where the
     primary CTA is, instead of only in the checkout fine print three steps later. */
  .hero__trust{display:flex;gap:8px 18px;flex-wrap:wrap;list-style:none;margin-top:18px;font-size:13px;font-weight:700;color:var(--ink-80)}
  .hero__art{position:relative;display:grid;place-items:center;min-height:300px}
  .hero__art svg.burger{width:min(100%,380px);height:auto;filter:drop-shadow(6px 8px 0 rgba(23,20,10,.25))}

  /* decorative bits */
  .deco{position:absolute;pointer-events:none;z-index:0}
  .deco--squiggle{top:8px;left:-4px;width:90px;color:var(--lime)}
  .deco--dots{top:20px;right:-6px;width:76px;transform:rotate(14deg)}
  .flags{position:absolute;top:-6px;left:50%;transform:translateX(-50%);display:flex;gap:14px}
  .flags svg{width:20px;height:26px}

  /* ================= PROMO STRIP ================= */
  .promos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px 0 6px}
  .promo{border:var(--bd);border-radius:20px;padding:22px 22px;box-shadow:var(--hard);position:relative;overflow:hidden;min-height:130px;display:flex;flex-direction:column;justify-content:center}
  .promo--dark{background:var(--ink);color:var(--cream)}
  .promo--lime{background:var(--lime);color:var(--ink)}
  .promo--cream{background:var(--cream);color:var(--ink)}
  .promo h3{font-family:'Anton';text-transform:uppercase;font-size:26px;line-height:.95;letter-spacing:.01em}
  .promo--dark h3 span{color:var(--lime)}
  .promo p{font-size:13px;font-weight:500;margin-top:7px;max-width:24ch;opacity:.92}
  .promo .emo{position:absolute;inset-inline-end:12px;bottom:-6px;font-size:60px;opacity:.85;transform:rotate(-8deg)}
  .promo .rot{position:absolute;top:12px;inset-inline-end:14px;background:var(--ink);color:var(--lime);font-family:'Anton';font-size:15px;padding:4px 10px;border-radius:8px;transform:rotate(7deg);border:2px solid var(--ink)}

  /* ================= SECTION HEAD ================= */
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:44px 0 22px}
  .sec-head h2{font-size:clamp(38px,6vw,68px)}
  .sec-head h2 .lime{color:var(--lime);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
  .sec-head .count{font-family:'Anton';text-transform:uppercase;font-size:16px;background:var(--ink);color:var(--lime);padding:8px 14px;border-radius:999px;white-space:nowrap}
  .sec-head .count b{color:var(--lime)}
  .sec-head__right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .sortsel{font-family:'Space Grotesk';font-weight:700;font-size:13px;background:var(--cream);border:var(--bd);color:var(--ink);padding:9px 14px;border-radius:999px;cursor:pointer}
  .sortsel:focus{outline:none;box-shadow:var(--hard-sm)}

  /* ================= FIRST-ORDER PROMO BANNER ================= */
  .firstorder{width:100%;display:flex;justify-content:center;align-items:center;gap:6px;text-align:center;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--cream);border:2px dashed var(--ink);border-radius:999px;padding:11px 20px;margin:26px 0 -6px;transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
  .firstorder:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
  .firstorder:active{transform:translateY(0);box-shadow:none}
  .firstorder b{font-family:'Anton';letter-spacing:.03em;background:var(--lime);padding:2px 8px;border-radius:6px;border:1.5px solid var(--ink)}

  /* ================= REFERRAL BANNER ================= */
  /* One-sided by design: the link gives the friend a real, working discount (same KORN1 promo,
     applied automatically when they open it). It does NOT promise the sharer a reward back —
     there's no login/accounts here to ever know who referred whom, so crediting a referrer
     would be a claim this build can't actually honour. */
  .referral{width:100%;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;text-align:center;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--lime-soft);border:2px solid var(--ink);border-radius:999px;padding:9px 10px 9px 20px;margin:14px 0 -6px}
  .referral__text b{font-family:'Anton';letter-spacing:.03em}

  /* Combos-category callout — DEMO_CONCEPT only (see catalog.js), same fake markup that drives
     the struck-through "was" price on combo cards, so the number here can't disagree with it. */
  .comborib{width:100%;text-align:center;font-family:'Anton';text-transform:uppercase;letter-spacing:.02em;font-size:15px;color:var(--ink);background:var(--lime);border:var(--bd);border-radius:14px;padding:12px 18px;margin:18px 0 4px;box-shadow:var(--hard-sm)}

  /* ================= CATALOG ================= */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:24px;margin-top:20px;padding-bottom:120px}
  .grid-cta{display:flex;justify-content:center;margin-top:-84px;padding-bottom:64px}
  .grid-cta .btn svg{width:18px;height:18px}
  .card{background:var(--cream);border:var(--bd);border-radius:20px;box-shadow:var(--hard);display:flex;flex-direction:column;position:relative;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
  .card:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--ink)}

  .card__img{aspect-ratio:5/4;border-bottom:var(--bd);border-radius:17px 17px 0 0;position:relative;overflow:hidden;background-size:cover;background-position:center}
  .card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
  .card:hover .card__img img{transform:scale(1.06)}
  .card__img.noimg{display:grid;place-items:center}
  .card__img.noimg img{display:none}
  .card__img.noimg::after{content:attr(data-emoji);font-size:74px;filter:drop-shadow(3px 4px 0 rgba(23,20,10,.3))}

  .badge{position:absolute;top:12px;left:12px;font-family:'Anton';font-size:15px;letter-spacing:.02em;padding:5px 11px;border:var(--bd);border-radius:9px;z-index:2;transform:rotate(-5deg);box-shadow:2px 3px 0 var(--ink)}
  .badge--off{background:var(--lime);color:var(--ink)}
  .badge--pop{background:var(--ink);color:var(--lime)}
  .badge--new{background:var(--purple);color:#fff}

  .fav{position:absolute;top:11px;right:11px;width:36px;height:36px;border-radius:50%;background:var(--cream);border:var(--bd);display:grid;place-items:center;z-index:2;transition:transform .14s var(--ease)}
  .fav:hover{transform:scale(1.1)}
  .fav:active{transform:scale(.85)}
  .fav svg{width:18px;height:18px;color:var(--ink)}
  .fav.on{background:var(--orange)}
  .fav.on svg{fill:var(--ink)}
  .fav.pulse{animation:favp .4s var(--ease)}
  @keyframes favp{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

  .card__body{padding:16px 15px 16px;display:flex;flex-direction:column;flex:1}
  .card__kitchen{color:var(--orange-d);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
  .card__name{font-family:'Anton';text-transform:uppercase;font-size:20px;line-height:.98;letter-spacing:.01em}
  .card__desc{color:var(--ink-60);font-size:13px;font-weight:500;margin-top:8px;flex:1;line-height:1.4}
  .card__meta{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
  .wt{display:inline-flex;align-items:center;gap:4px;background:var(--lime);color:var(--ink);font-family:'Anton';font-size:13px;padding:4px 9px;border-radius:8px;border:2px solid var(--ink)}
  .wt svg{width:12px;height:12px;color:var(--ink)}
  .rate{display:inline-flex;align-items:center;gap:4px;background:var(--ink);color:var(--cream);font-family:'Anton';font-size:13px;padding:4px 9px;border-radius:8px}
  .rate svg{width:12px;height:12px;color:var(--lime)}
  .time{display:inline-flex;align-items:center;gap:5px;color:var(--ink-60);font-size:12.5px;font-weight:600}
  .time svg{width:14px;height:14px}
  .card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
  .price{display:flex;align-items:center;gap:8px}
  .price__pill{background:var(--lime);border:var(--bd);color:var(--ink);font-family:'Anton';font-size:17px;padding:5px 11px;border-radius:9px;letter-spacing:.01em}
  .price s{font-size:13px;color:var(--ink-60);font-weight:600}

  .add{width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--lime);display:grid;place-items:center;border:var(--bd);box-shadow:var(--hard-sm);transition:transform .12s var(--ease),box-shadow .12s}
  .add:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
  .add:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
  .add svg{width:23px;height:23px}
  .stepper{display:inline-flex;align-items:center;background:var(--ink);border:var(--bd);border-radius:12px;height:46px;overflow:hidden;box-shadow:var(--hard-sm)}
  .stepper button{width:38px;height:100%;color:var(--lime);display:grid;place-items:center;transition:background .14s}
  .stepper button:hover{background:rgba(199,240,46,.18)}
  .stepper span{color:var(--cream);font-family:'Anton';font-size:17px;min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
  .stepper svg{width:17px;height:17px}

  .empty-search{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--ink)}
  .empty-search .big{font-size:64px;margin-bottom:12px}
  .empty-search h3{font-family:'Anton';text-transform:uppercase;font-size:28px;margin-bottom:6px}

  /* ================= FOOTER ================= */
  .foot{border-top:var(--bd);background:var(--ink);color:var(--cream);padding:40px 20px 120px;margin-top:10px}
  .foot__in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;align-items:center}
  .foot .logo{box-shadow:none;background:var(--orange)}
  .foot .logo b{color:var(--ink)}.foot .logo b i{color:var(--lime)}.foot .logo .tilde{color:var(--ink)}
  .foot__links{display:flex;gap:22px;flex-wrap:wrap;font-family:'Anton';text-transform:uppercase;font-size:15px;letter-spacing:.03em}
  .foot__links a:hover{color:var(--lime)}
  .foot small{color:rgba(251,244,228,.6);font-size:12.5px}

  /* ================= FLOATING CART BAR ================= */
  .cartbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(180%);z-index:80;width:min(560px,calc(100vw - 28px));background:var(--ink);color:var(--cream);border:var(--bd);border-radius:20px;padding:11px 12px 11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:6px 8px 0 rgba(0,0,0,.5);transition:transform .34s var(--ease);cursor:pointer}
  .cartbar.show{transform:translateX(-50%) translateY(0)}
  .cartbar__left{display:flex;align-items:center;gap:12px}
  .cartbar__badge{width:46px;height:46px;border-radius:13px;background:var(--lime);border:var(--bd);display:grid;place-items:center;position:relative;flex-shrink:0}
  .cartbar__badge svg{width:22px;height:22px;color:var(--ink)}
  .cartbar__badge b{position:absolute;top:-8px;right:-8px;background:var(--orange);color:var(--ink);font-family:'Anton';font-size:12px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;display:grid;place-items:center;border:2px solid var(--ink)}
  .cartbar__txt b{font-family:'Anton';font-size:16px}
  .cartbar__txt small{display:block;color:rgba(251,244,228,.6);font-size:12px}
  .cartbar__go{background:var(--lime);color:var(--ink);font-family:'Anton';text-transform:uppercase;font-size:14px;padding:12px 18px;border:var(--bd);border-radius:12px;display:flex;align-items:center;gap:8px;flex-shrink:0;transition:transform .12s var(--ease)}
  .cartbar__go:hover{transform:scale(1.04)}
  .cartbar__go svg{width:17px;height:17px}

  /* ================= DRAWER ================= */
  .backdrop{position:fixed;inset:0;background:rgba(23,20,10,.5);z-index:90;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .backdrop.open{opacity:1;visibility:visible}
  .drawer{position:fixed;top:0;right:0;height:100dvh;width:432px;max-width:100vw;background:var(--cream);z-index:100;border-left:var(--bd);transform:translateX(100%);transition:transform .36s var(--ease);display:flex;flex-direction:column}
  .drawer.open{transform:translateX(0)}
  .drawer__head{padding:18px 20px;border-bottom:var(--bd);display:flex;align-items:center;justify-content:space-between;background:var(--orange)}
  .drawer__head h3{font-family:'Anton';text-transform:uppercase;font-size:24px;display:flex;align-items:center;gap:9px}
  .drawer__head .n{background:var(--ink);color:var(--lime);font-family:'Anton';font-size:13px;padding:3px 9px;border-radius:999px}
  .xbtn{width:40px;height:40px;border-radius:11px;border:var(--bd);background:var(--cream);display:grid;place-items:center;color:var(--ink);transition:transform .12s var(--ease)}
  .xbtn:hover{transform:scale(1.06)}
  .xbtn svg{width:20px;height:20px}
  .drawer__body{flex:1;overflow-y:auto;padding:4px 20px}

  /* ---- Free delivery progress ---- */
  .freebar{padding:14px 4px 16px}
  .freebar__track{height:10px;background:var(--cream-d);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
  .freebar__track span{display:block;height:100%;background:var(--lime);transition:width .3s var(--ease)}
  .freebar p{font-size:12.5px;font-weight:600;color:var(--ink-80);margin-top:8px}
  .freebar p b{color:var(--orange-d);font-family:'Anton';font-size:13px}
  .freebar--done{background:var(--lime);border:var(--bd);border-radius:12px;padding:10px 14px;font-family:'Anton';text-transform:uppercase;font-size:13px;letter-spacing:.02em;margin:14px 0 6px}

  /* ---- Cart upsell ---- */
  .upsell{display:flex;align-items:center;gap:11px;background:var(--cream-d);border:1.5px dashed var(--ink);border-radius:14px;padding:10px 12px;margin:14px 0}
  .upsell__emo{font-size:26px;flex-shrink:0}
  .upsell__info{flex:1;min-width:0;line-height:1.2}
  .upsell__info b{font-family:'Anton';text-transform:uppercase;font-size:13px}
  .upsell__info small{display:block;color:var(--ink-60);font-size:11.5px;font-weight:600;margin-top:2px}
  .upsell__add{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--lime);border:var(--bd);display:grid;place-items:center;font-family:'Anton';font-size:19px;flex-shrink:0}

  .line{display:flex;gap:12px;padding:15px 0;border-bottom:var(--bd)}
  .line__media{width:60px;height:60px;border-radius:13px;border:var(--bd);overflow:hidden;flex-shrink:0;background-size:cover;background-position:center;display:grid;place-items:center;font-size:30px}
  .line__media img{width:100%;height:100%;object-fit:cover}
  .line__info{flex:1;min-width:0}
  .line__name{font-family:'Anton';text-transform:uppercase;font-size:16px;line-height:1}
  .line__price{color:var(--ink-60);font-size:12.5px;font-weight:600;margin-top:3px}
  .line__price b{color:var(--ink)}
  .line__ctl{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
  .mini-step{display:inline-flex;align-items:center;background:var(--cream);border:var(--bd);border-radius:10px;height:32px}
  .mini-step button{width:30px;height:100%;display:grid;place-items:center;color:var(--ink)}
  .mini-step button:hover{background:rgba(23,20,10,.08)}
  .mini-step span{min-width:24px;text-align:center;font-family:'Anton';font-size:14px;font-variant-numeric:tabular-nums}
  .mini-step svg{width:14px;height:14px}
  .line__sum{font-family:'Anton';font-size:17px}
  .rm{color:var(--ink-60);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;transition:color .14s}
  .rm:hover{color:var(--orange-d)}

  .cart-empty{text-align:center;padding:80px 24px;color:var(--ink-60)}
  .cart-empty .big{font-size:66px;margin-bottom:14px}
  .cart-empty h4{font-family:'Anton';text-transform:uppercase;color:var(--ink);font-size:24px;margin-bottom:6px}
  .cart-empty p{font-size:13.5px;line-height:1.5}

  .drawer__foot{border-top:var(--bd);padding:16px 20px 20px;background:var(--cream)}
  .totrow{display:flex;justify-content:space-between;font-size:13.5px;font-weight:500;color:var(--ink-80);margin-bottom:8px}
  .totrow.free b{color:var(--orange-d);font-family:'Anton';font-size:15px}
  .totrow--grand{color:var(--ink);font-family:'Anton';text-transform:uppercase;font-size:22px;margin:12px 0 15px;padding-top:13px;border-top:var(--bd)}
  .cta-full{width:100%;height:56px;border-radius:14px;background:var(--lime);color:var(--ink);border:var(--bd);font-family:'Anton';text-transform:uppercase;letter-spacing:.03em;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 5px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s}
  .cta-full:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--ink)}
  .cta-full:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
  .cta-full:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 5px 0 var(--ink)}
  .cta-full svg{width:20px;height:20px}

  /* ================= CHECKOUT ================= */
  .pay__back{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-family:'Anton';text-transform:uppercase;font-size:14px;padding:6px 0;margin-bottom:6px}
  .pay__back:hover{color:var(--orange-d)}
  .pay__back svg{width:16px;height:16px}
  .field{margin-bottom:15px}
  .field label{display:block;font-family:'Anton';text-transform:uppercase;letter-spacing:.02em;font-size:13px;color:var(--ink);margin-bottom:7px}
  .field input{width:100%;height:50px;border:var(--bd);border-radius:12px;padding:0 14px;font-size:15px;font-family:'Space Grotesk';font-weight:500;background:#fff;color:var(--ink)}
  .field input::placeholder{color:var(--ink-60)}
  .field input:focus{outline:none;box-shadow:var(--hard-sm)}
  .field input.err{box-shadow:3px 4px 0 var(--orange-d);border-color:var(--orange-d)}
  .field .msg{font-size:11.5px;color:var(--orange-d);font-weight:600;margin-top:5px;display:none}
  .field.invalid .msg{display:block}
  .addr-wrap{position:relative}
  .addr-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border:var(--bd);border-radius:12px;box-shadow:var(--hard-sm);list-style:none;max-height:220px;overflow-y:auto;display:none}
  .addr-suggest.show{display:block}
  .addr-suggest__item{padding:11px 14px;font-size:13.5px;font-weight:500;line-height:1.35;cursor:pointer;border-bottom:1.5px solid var(--cream-d);transition:background .12s}
  .addr-suggest__item:last-child{border-bottom:none}
  .addr-suggest__item:hover,.addr-suggest__item.is-active{background:var(--lime)}
  .addr-suggest__item small{display:block;color:var(--ink-60);font-size:11.5px;margin-top:3px;font-weight:600}
  .addr-suggest__empty{padding:12px 14px;font-size:13px;color:var(--ink-60);font-weight:500}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cardnum-wrap{position:relative}
  .cardnum-wrap .brand-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:'Anton';font-size:12px;letter-spacing:.03em;padding:4px 8px;border-radius:6px;color:#fff;opacity:0;transition:opacity .2s}
  .brand-badge.show{opacity:1}
  .brand-visa{background:#1434CB}.brand-mc{background:linear-gradient(90deg,#EB001B 50%,#F79E1B 50%)}.brand-amex{background:#2E77BC}.brand-generic{background:var(--ink)}
  .secure-note{display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--cream);padding:12px 14px;border-radius:12px;font-size:12px;font-weight:500;margin:4px 0 16px;line-height:1.4}
  .secure-note svg{width:26px;height:26px;flex-shrink:0;color:var(--lime)}
  .pay-methods{display:flex;gap:8px;margin-bottom:16px}
  .pmethod{flex:1;border:var(--bd);border-radius:12px;height:48px;display:grid;place-items:center;font-family:'Anton';font-size:12px;letter-spacing:.03em;color:var(--ink-60);background:var(--cream);transition:all .14s}
  .pmethod.is-on{color:var(--ink);background:var(--lime)}

  .success{padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:center}
  .success__ring{width:104px;height:104px;border-radius:50%;background:var(--lime);border:var(--bd);display:grid;place-items:center;margin-bottom:22px;position:relative;box-shadow:var(--hard)}
  .success__ring svg{width:56px;height:56px}
  .checkpath{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .2s var(--ease) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .success h3{font-family:'Anton';text-transform:uppercase;font-size:30px;margin-bottom:8px}
  .success p{color:var(--ink-60);font-size:14px;font-weight:500;max-width:32ch;line-height:1.5}
  .success .oid{font-family:'Anton';color:var(--ink);background:var(--lime);border:var(--bd);padding:7px 15px;border-radius:999px;font-size:15px;margin:14px 0 22px}
  .success__eta{display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--cream);padding:13px 20px;border-radius:13px;font-family:'Anton';font-size:15px;margin-bottom:24px}
  .success__eta svg{width:20px;height:20px;color:var(--lime)}

  /* ================= TOAST ================= */
  .toast-wrap{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
  .toast{display:flex;align-items:center;gap:11px;background:var(--ink);color:var(--cream);padding:12px 18px;border:var(--bd);border-radius:13px;font-size:13.5px;font-weight:600;box-shadow:4px 5px 0 rgba(0,0,0,.5);transform:translateY(20px);opacity:0;animation:toastIn .3s var(--ease) forwards}
  .toast .ic{width:28px;height:28px;border-radius:8px;background:var(--lime);display:grid;place-items:center;flex-shrink:0}
  .toast .ic svg{width:16px;height:16px;color:var(--ink)}
  .toast b{font-family:'Anton';text-transform:uppercase;font-size:14px;letter-spacing:.02em}
  @keyframes toastIn{to{transform:translateY(0);opacity:1}}
  .toast.out{animation:toastOut .3s var(--ease) forwards}
  @keyframes toastOut{to{transform:translateY(20px);opacity:0}}

  .fly{position:fixed;z-index:130;width:28px;height:28px;border-radius:50%;pointer-events:none;background:var(--lime);border:var(--bd);display:grid;place-items:center;font-family:'Anton';font-size:16px;color:var(--ink)}

  /* ================= APP PUSH MODAL ================= */
  .appmodal-back{position:fixed;inset:0;background:rgba(23,20,10,.58);backdrop-filter:blur(3px);z-index:200;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  .appmodal-back.open{opacity:1;visibility:visible}
  .appmodal{position:fixed;top:50%;left:50%;z-index:201;width:min(400px,calc(100vw - 30px));background:var(--cream);border:var(--bd);border-radius:26px;box-shadow:8px 10px 0 var(--ink);padding:26px 24px 22px;text-align:center;transform:translate(-50%,-50%) scale(.86);opacity:0;visibility:hidden;transition:transform .32s var(--ease),opacity .3s,visibility .3s;max-height:calc(100dvh - 32px);overflow-y:auto}
  .appmodal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
  .appmodal__x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:11px;border:var(--bd);background:var(--cream);display:grid;place-items:center;color:var(--ink);transition:transform .12s var(--ease)}
  .appmodal__x:hover{transform:scale(1.06)}
  .appmodal__x svg{width:19px;height:19px}
  .appmodal__badge{display:inline-flex;align-items:center;gap:6px;background:var(--lime);border:var(--bd);color:var(--ink);font-family:'Anton';text-transform:uppercase;letter-spacing:.03em;font-size:13px;padding:5px 13px;border-radius:999px;transform:rotate(-2deg);box-shadow:var(--hard-sm);margin-bottom:16px}
  .appmodal__icon{width:66px;height:66px;border-radius:19px;background:var(--ink);border:var(--bd);display:grid;place-items:center;margin:0 auto 14px;box-shadow:var(--hard-sm);font-size:32px}
  .appmodal__title{font-size:30px;line-height:.95;margin-bottom:8px}
  .appmodal__title .lime{color:var(--lime);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
  .appmodal__sub{font-size:14px;font-weight:500;color:var(--ink-60);line-height:1.45;max-width:32ch;margin:0 auto 18px}
  .appmodal__item{display:flex;align-items:center;gap:12px;background:#fff;border:var(--bd);border-radius:15px;padding:10px;margin-bottom:18px;text-align:left}
  .appmodal__item .thumb{width:54px;height:54px;border-radius:12px;border:var(--bd);overflow:hidden;flex-shrink:0;background-size:cover;background-position:center;display:grid;place-items:center;font-size:27px}
  .appmodal__item .thumb img{width:100%;height:100%;object-fit:cover}
  .appmodal__item .info{flex:1;min-width:0}
  .appmodal__item .nm{font-family:'Anton';text-transform:uppercase;font-size:16px;line-height:1}
  .appmodal__item .pr{color:var(--ink-60);font-size:12.5px;font-weight:600;margin-top:3px}
  .appmodal__item .pr b{color:var(--ink)}
  .appmodal__item .go{width:34px;height:34px;border-radius:10px;background:var(--lime);border:var(--bd);display:grid;place-items:center;flex-shrink:0}
  .appmodal__item .go svg{width:16px;height:16px;color:var(--ink)}
  .appmodal__stores{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
  .store{display:flex;align-items:center;justify-content:center;gap:11px;background:var(--ink);color:var(--cream);border:var(--bd);border-radius:14px;height:54px;box-shadow:0 5px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s}
  .store:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--ink)}
  .store:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
  .store svg{width:25px;height:25px;color:var(--lime);flex-shrink:0}
  .store .txt{text-align:left;line-height:1.05}
  .store .txt small{display:block;font-size:9px;font-weight:600;letter-spacing:.05em;opacity:.72;text-transform:uppercase}
  .store .txt b{font-family:'Anton';text-transform:uppercase;font-size:16px;letter-spacing:.02em}
  .appmodal__keep{color:var(--ink-60);font-family:'Anton';text-transform:uppercase;letter-spacing:.03em;font-size:13px;padding:6px 4px 0}
  .appmodal__keep:hover{color:var(--ink)}

  /* ================= PAY PROCESSING MODAL ================= */
  .paymodal-back{position:fixed;inset:0;background:rgba(23,20,10,.58);backdrop-filter:blur(3px);z-index:300;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  .paymodal-back.open{opacity:1;visibility:visible}
  .paymodal{position:fixed;top:50%;left:50%;z-index:301;width:min(380px,calc(100vw - 30px));background:var(--cream);border:var(--bd);border-radius:26px;box-shadow:8px 10px 0 var(--ink);padding:28px 24px;text-align:center;transform:translate(-50%,-50%) scale(.9);opacity:0;visibility:hidden;transition:transform .32s var(--ease),opacity .3s,visibility .3s}
  .paymodal.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
  .paymodal__icon{width:66px;height:66px;border-radius:19px;background:var(--ink);border:var(--bd);display:grid;place-items:center;margin:0 auto 16px;box-shadow:var(--hard-sm)}
.paymodal__icon svg{width:34px;height:34px;color:var(--lime)}
  .paymodal h3{font-family:'Anton';text-transform:uppercase;font-size:26px;margin-bottom:8px}
  .paymodal p{font-size:14px;font-weight:500;color:var(--ink-60);line-height:1.45;margin-bottom:20px}
  .paymodal__bar{height:10px;background:var(--cream-d);border:2px solid var(--ink);border-radius:999px;overflow:hidden;margin-bottom:10px}
  .paymodal__bar span{display:block;height:100%;width:0%;background:var(--lime);transition:width 1s linear}
  .paymodal__time{font-family:'Anton';font-size:14px;color:var(--ink-60);letter-spacing:.03em}
  @keyframes payPulse{0%,100%{opacity:1}50%{opacity:.45}}

  /* ================= OTP / 3DS MODAL ================= */
  .paymodal-back--otp{z-index:400}
  .paymodal--otp{z-index:401}
  .otp-modal .field{text-align:left;margin-bottom:16px}
  .otp-modal .field input{text-align:center;font-size:22px;letter-spacing:.25em;font-family:'Anton'}
  .otp-modal .field .msg{display:none}
  .otp-modal .field.invalid .msg{display:block}
  .otp-modal .cta-full{margin-top:4px}

  /* ================= RESPONSIVE ================= */
  @media(max-width:1000px){.hero{grid-template-columns:1fr;gap:8px}.hero__art{min-height:220px;margin-top:6px}.promos{grid-template-columns:1fr}}
  @media(max-width:820px){.locpill__btn{font-size:12px;padding:7px 10px}.locpill__chev{display:none}}
  @media(max-width:640px){
    /* Grid instead of flex-wrap: predictable 3-row stack (logo+cart / location+lang /
       search) instead of whatever order flex-wrap happens to break lines at. */
    .header__row{
      display:grid;
      grid-template-columns:1fr auto;
      grid-template-areas:"logo cart" "loc lang" "search search";
      gap:10px;
    }
    .header__row>.logo{grid-area:logo;justify-self:start}
    .header__row>#cartOpen{grid-area:cart;justify-self:end}
    .header__row>.locpill{grid-area:loc;justify-self:start}
    .header__row>.langsw{grid-area:lang;justify-self:end}
    .header__row>.search{grid-area:search}
    .cats{top:172px}
    .cartbtn__total{display:none}
    .hero{padding:32px 0 20px}
    .drawer{width:100%}
    .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:15px}
    .card__name{font-size:17px}
    .add,.stepper{height:42px}.add{width:42px}
    /* The +/- stepper (and the was-price + now-price pair on discounted combos) used to
       fight for width in the same flex row — .stepper never shrank visually but its
       overflow:hidden clipped the + button off-screen, making it impossible to add a
       second portion. flex-shrink:0 keeps controls full-size; wrap lets price drop to
       its own line first if a card is ever too narrow for both. */
    .card__foot{flex-wrap:wrap}
    .stepper,.add{flex-shrink:0}
    .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  }
  @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto}}

  /* ================= i18n / RTL ================= */
  [data-lang]{}
  html[lang="en"] [data-lang="ar"], html[lang="ar"] [data-lang="en"]{display:none !important}
  .langsw{display:flex;align-items:center;gap:2px;flex-shrink:0;font-family:'Anton';font-size:12px;letter-spacing:.02em;background:var(--cream);border:var(--bd);border-radius:999px;padding:3px;margin-inline-end:2px}
  .langsw a{padding:6px 11px;border-radius:999px;color:var(--ink);opacity:.55;transition:opacity .12s,background .12s}
  .langsw a.is-on{opacity:1;background:var(--lime)}
  @media(max-width:640px){.langsw{order:4}}

  html[dir="rtl"]{--hard:-5px 6px 0 var(--ink);--hard-sm:-3px 4px 0 var(--ink)}
  [dir="rtl"] .locpill__chev{margin-left:0;margin-right:2px}
  [dir="rtl"] .locpick{left:auto;right:0}
  [dir="rtl"] .search input{padding:0 44px 0 16px}
  [dir="rtl"] .search svg{left:auto;right:15px}
  [dir="rtl"] .badge{left:auto;right:12px}
  [dir="rtl"] .fav{right:auto;left:11px}
  [dir="rtl"] .locpill__btn:hover{box-shadow:-3px 4px 0 var(--ink)}
  [dir="rtl"] .cartbtn:hover{box-shadow:-4px 5px 0 var(--ink)}
  [dir="rtl"] .cartbtn:active{box-shadow:-1px 2px 0 var(--ink)}
  [dir="rtl"] .card:hover{box-shadow:-7px 9px 0 var(--ink)}
  [dir="rtl"] .add:hover{box-shadow:-4px 5px 0 var(--ink)}
  [dir="rtl"] .add:active{box-shadow:-1px 2px 0 var(--ink)}
  [dir="rtl"] .cartbar{box-shadow:-6px 8px 0 rgba(0,0,0,.5)}
  [dir="rtl"] .field input.err{box-shadow:-3px 4px 0 var(--orange-d)}
  [dir="rtl"] .toast{box-shadow:-4px 5px 0 rgba(0,0,0,.5)}
  [dir="rtl"] .appmodal{box-shadow:-8px 10px 0 var(--ink)}
  [dir="rtl"] .paymodal{box-shadow:-8px 10px 0 var(--ink)}
  [dir="rtl"] .fly{direction:ltr}