:root{--forest:#183e32;--deep:#102b24;--cream:#f7f2e7;--paper:#fffcf5;--gold:#b48a48;--ink:#243b32;--muted:#5d6c62;--line:#dadccf;--soft:#e9ecdf;--display:'El Messiri',serif;--body:'Tajawal',sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--gold) var(--cream);scroll-padding-top:100px}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 var(--body);overflow-x:hidden}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}::selection{background:var(--forest);color:var(--cream)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}img{max-width:100%;display:block}button{transition:background .2s,color .2s,transform .25s var(--ease)}button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed}.skip-link{position:fixed;top:-80px;right:20px;z-index:200;background:var(--cream);padding:12px 24px}.skip-link:focus{top:12px}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;border-bottom:1px solid var(--line);background:var(--cream);position:relative;z-index:3}.brand{display:flex;align-items:center;gap:13px;font:600 22px/1.3 var(--display)}.brand small{display:block;font:500 12px/1.8 var(--body);letter-spacing:3px;padding-top:4px}.brand-logo{display:block;position:relative;overflow:hidden;border-radius:50%;width:58px;height:58px;flex-shrink:0;background:#faf0dd}.brand-logo img{position:absolute;width:151.4%;max-width:none;height:auto;left:-25.6%;top:-92.3%}.top-actions{display:flex;align-items:center;gap:28px}.text-button{display:flex;align-items:center;gap:9px;background:none;font-weight:700}.text-button:hover{color:#956b31}.bag-button{height:46px;min-width:46px;position:relative;background:none;display:grid;place-items:center}.bag-button b{position:absolute;top:-1px;right:-3px;min-width:20px;height:20px;border-radius:50%;background:var(--forest);color:var(--cream);font-size:12px;display:grid;place-items:center}.layout{display:grid;grid-template-columns:minmax(360px,40%) 1fr;max-width:1800px;margin:auto;align-items:start}.story{height:calc(100svh - 90px);min-height:630px;position:sticky;top:0;overflow:hidden;background:var(--deep);color:var(--cream)}.story>img{width:100%;height:100%;object-fit:cover;object-position:center 60%}.story-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,33,22,.35) 0%,transparent 60%,rgba(8,24,17,.65) 100%)}.story-copy{position:absolute;top:7%;right:10%;left:8%}.story-copy h2{font-size:clamp(38px,3.7vw,64px);line-height:1.5;font-weight:500}.story-copy h2 span{color:#e3cb9e}.story-copy p{margin-top:14px;font-size:18px;color:#f4ecdc}.story-foot{position:absolute;bottom:35px;right:10%;left:10%;display:flex;justify-content:space-between;align-items:center;font-size:17px}.round-button{width:48px;height:48px;display:grid;place-items:center;border:1px solid #ded6bd;background:transparent;color:var(--cream);border-radius:50%}.round-button:hover{background:var(--cream);color:var(--forest)}.menu-panel{padding:22px clamp(28px,4vw,72px) 100px;min-width:0;outline:none}.demo-note{font-size:12px;display:flex;gap:7px;align-items:center;color:#58634f;border-bottom:1px solid var(--line);padding-bottom:18px}.demo-note svg{width:15px;height:15px}.menu-heading{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:12px}.menu-heading h2{font-size:clamp(28px,2.4vw,38px);line-height:1.6}.menu-heading p{color:var(--muted);font-size:16px;margin-top:3px}.sun-icon{width:48px;height:48px;color:#92713c;stroke-width:1.1}.moods{display:flex;gap:10px;margin-top:22px}.moods button{flex:1;min-height:63px;border:1px solid #cdd2c1;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;font-weight:700;font-size:15px;white-space:nowrap}.moods svg{width:22px;height:22px}.moods button:hover{background:#e8ecdf}.moods button[aria-pressed=true]{background:var(--forest);color:var(--cream);border-color:var(--forest)}.recommendation{margin-top:18px;color:var(--forest);font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.recommendation button{background:none;text-decoration:underline;font-size:14px;padding:8px}.menu-title-row{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:12px}.menu-title-row h3{font-size:26px}.surprise-button{display:flex;gap:6px;align-items:center;background:none;color:#785822;font-size:14px;font-weight:700;padding:8px 0}.surprise-button svg{width:20px}.categories{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:14px 0 24px;overflow-x:auto;scrollbar-width:none}.categories button{background:none;white-space:nowrap;padding:12px 0;position:relative;font-weight:700;color:var(--muted);min-height:48px;font-size:15px}.categories button[aria-pressed=true]{color:var(--forest)}.categories button[aria-pressed=true]:after{content:'';height:3px;position:absolute;right:0;left:0;bottom:0;background:var(--forest)}.categories span{font-size:12px;padding:1px 6px;border-radius:20px;background:var(--soft);margin-right:4px}.products{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}.product{min-width:0;position:relative;border-bottom:1px solid var(--line);padding-bottom:20px}.product-photo{width:100%;position:relative;aspect-ratio:1.34;background:#e3e3d4;border-radius:14px;overflow:hidden;padding:0;display:block}.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.product-photo:hover img{transform:scale(1.06)}.product-photo.hot img{object-position:center 77%}.product-photo.cold img{object-position:center 58%}.product-tag{position:absolute;top:12px;right:12px;background:var(--cream);color:var(--forest);font-size:12px;font-weight:700;border-radius:5px;padding:4px 10px}.product-title{display:block;background:none;padding:0;margin-top:14px;text-align:right;font:600 21px/1.5 var(--display)}.product-description{color:var(--muted);font-size:14px;margin-top:3px;line-height:1.6}.product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.price{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.price small{font-size:12px;font-weight:500;padding-right:3px}.add-button{width:44px;height:44px;background:var(--forest);color:var(--cream);border-radius:50%;display:grid;place-items:center}.add-button:hover{background:#2b5846}.add-button svg{width:20px;height:20px}.menu-footer{margin-top:36px;text-align:center;color:var(--muted);padding-bottom:16px}.menu-footer>span{font:500 23px var(--display);color:var(--forest)}.menu-footer p{font-size:12px;margin-top:6px}.selection-bar{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:5%;width:min(580px,52%);z-index:8;display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--forest);color:var(--cream);border-radius:14px;box-shadow:0 10px 35px #0e281e25;text-align:right}.selection-bar:hover{background:#214e3f}.selection-count{min-width:36px;height:36px;background:#e7e6c9;color:var(--forest);border-radius:50%;display:grid;place-items:center;font-weight:700}.selection-bar>span:nth-child(2){flex:1;font-weight:700}.selection-bar small{display:block;font-size:12px;font-weight:400;color:#d4decc}.selection-bar strong{font-variant-numeric:tabular-nums;white-space:nowrap}.intro{position:fixed;inset:0;z-index:100;background:var(--deep);color:var(--cream);overflow:hidden;transition:opacity .65s var(--ease),visibility .65s}.intro.out{opacity:0;visibility:hidden;pointer-events:none}.intro video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 67%}.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,25,17,.60),rgba(8,25,17,.15) 62%,rgba(8,25,17,.65))}.intro-skip{position:absolute;top:24px;left:32px;z-index:2;display:flex;gap:14px;align-items:center;color:var(--cream);padding:10px 12px;background:#142f2390;border-radius:6px;font-size:14px}.intro-skip span{font-size:24px}.intro-copy{position:absolute;top:8%;left:0;right:0;text-align:center;animation:intro-reveal 1.5s var(--ease) both}.intro-logo{margin:0 auto 18px;width:82px;height:82px}.intro h1{font-size:clamp(56px,7vw,92px);line-height:1.15}.intro h1 span{display:block;font-size:clamp(27px,3.4vw,44px);line-height:1.6;font-weight:400;color:#f0d9af}.intro-copy p{margin-top:9px;font-size:18px}.intro-enter{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:55px;min-width:250px;padding:16px 28px;border-radius:8px;background:var(--cream);color:var(--forest);font-weight:700;font-size:18px}.intro-enter:active{transform:translateX(-50%) scale(.98)}.intro-progress{position:absolute;bottom:0;right:0;left:0;height:3px;background:#fff2}.intro-progress i{display:block;height:100%;width:0;background:#e4c083;animation:progress 6.5s linear forwards}.sheet{position:fixed;inset:0 auto 0 0;width:min(480px,100%);max-width:100%;height:100%;max-height:100%;border:0;margin:0;background:var(--cream);color:var(--ink);padding:0;box-shadow:10px 0 55px #0e281e30;overflow-y:auto;overscroll-behavior:contain}.sheet::backdrop{background:#102b2490;backdrop-filter:blur(3px)}.sheet[open]{animation:sheet-in .4s var(--ease)}.close-button{background:var(--cream);border-radius:50%;width:44px;height:44px;font-size:28px;line-height:1;display:grid;place-items:center;position:absolute;top:16px;left:16px;z-index:1;box-shadow:0 4px 15px #142f2314}.close-button:hover{background:#e8ecdf}.detail-image{height:300px;width:100%;object-fit:cover}.detail-image.hot{object-position:center 78%}.detail-body{padding:24px 28px 30px}.detail-body h2{font-size:30px}.detail-subtitle{color:var(--muted);margin:5px 0 16px}.detail-note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:20px}.option-group{border:0;padding:0;margin:24px 0 0}.option-group legend{font-size:16px;font-weight:700;padding:0 0 10px}.choices{display:flex;flex-wrap:wrap;gap:8px}.choices label{flex:1;position:relative;min-width:80px}.choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.choices span{display:block;text-align:center;border:1px solid #c7cebf;border-radius:8px;padding:11px 8px;font-size:14px;line-height:1.5}.choices input:checked+span{background:var(--forest);color:var(--cream);border-color:var(--forest)}.choices input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}.allergens{margin-top:18px;font-size:13px;color:#6d582e}.detail-action{display:flex;gap:14px;margin-top:24px;align-items:center}.quantity{display:flex;align-items:center;gap:12px;direction:ltr}.quantity button{width:40px;height:40px;border:1px solid #c7cebf;border-radius:50%;background:none;font-size:22px}.quantity b{font-variant-numeric:tabular-nums;min-width:18px;text-align:center}.primary-button{display:flex;justify-content:center;align-items:center;gap:10px;min-height:50px;padding:12px 20px;background:var(--forest);color:var(--cream);border-radius:8px;font-weight:700}.primary-button:hover{background:#2b5846}.detail-action .primary-button{flex:1}.sheet-heading{padding:34px 28px 22px;border-bottom:1px solid var(--line)}.sheet-heading h2{font-size:27px;padding-left:30px}.sheet-heading p{color:var(--muted);font-size:15px;margin-top:4px}#bag-content{padding:24px 28px}.empty-bag{text-align:center;padding:80px 15px}.empty-bag svg{width:55px;height:55px;color:var(--gold)}.empty-bag h3{font-size:25px;margin:20px 0 8px}.empty-bag p{color:var(--muted);margin-bottom:24px}.empty-bag .primary-button{margin:auto}.bag-item{display:grid;grid-template-columns:70px 1fr;gap:15px;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.bag-item img{width:70px;height:80px;object-fit:cover;border-radius:8px}.bag-item h3{font-size:19px}.bag-item p{font-size:12px;color:var(--muted);margin:3px 0 10px}.bag-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.bag-item .quantity{gap:9px}.bag-item .quantity button{width:32px;height:32px;font-size:18px}.bag-item .price{font-size:16px}.bag-total{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:22px;margin:25px 0}.bag-disclaimer{font-size:13px;color:var(--muted);margin:16px 0}.bag-actions{display:flex;flex-direction:column;gap:12px}.secondary-button{min-height:48px;background:transparent;color:var(--forest);border:1px solid #b9c4b3;border-radius:8px;font-weight:700;padding:10px 20px}.secondary-button:hover{background:var(--soft)}.quiz-sheet{height:auto;max-height:90svh;width:min(440px,calc(100% - 32px));inset:50% auto auto 50%;transform:translate(-50%,-50%);border-radius:16px;padding:40px 28px}.quiz-sheet[open]{animation:none}#quiz-content{padding-top:12px}.quiz-sheet h2{font-size:30px;margin-bottom:8px}.quiz-sheet p{color:var(--muted);margin-bottom:22px}.quiz-options{display:grid;gap:12px}.quiz-result-image{width:100%;height:210px;object-fit:cover;border-radius:12px;margin-bottom:20px}.quiz-result-image.hot{object-position:center 80%}.quiz-result-actions{display:grid;gap:12px}.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);padding:12px 22px;background:var(--deep);color:var(--cream);border-radius:8px;z-index:150;box-shadow:0 5px 25px #102b2430;font-size:15px;white-space:nowrap}.no-script{position:fixed;bottom:0;background:var(--cream);padding:20px;z-index:500;width:100%}@keyframes intro-reveal{from{opacity:0;filter:blur(6px);transform:translateY(15px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes progress{to{width:100%}}@keyframes sheet-in{from{opacity:.5;translate:-30px 0}to{opacity:1;translate:0 0}}
@media(min-width:1500px){.menu-panel{padding-top:30px}.products{gap:32px}.product-photo{aspect-ratio:1.4}}
@media(max-width:1000px){.layout{grid-template-columns:36% 1fr}.story{min-height:660px}.story-copy{right:8%}.story-copy h2{font-size:38px}.menu-panel{padding-right:25px;padding-left:25px}.moods{gap:7px}.moods button{font-size:14px;gap:5px}.categories{gap:18px}.sun-icon{width:36px}.product-title{font-size:19px}}
@media(max-width:760px){.topbar{height:76px;padding:0 20px}.brand{font-size:19px;gap:9px}.brand-logo{width:47px;height:47px}.brand small{font-size:12px;letter-spacing:2px}.top-actions{gap:17px}.text-button{font-size:13px}.text-button svg{width:20px}.bag-button{min-width:40px}.layout{display:block}.story{position:relative;top:auto;height:230px;min-height:0;margin:0}.story>img{object-position:center 67%;width:100%;height:100%}.story-shade{background:linear-gradient(270deg,rgba(10,35,25,.94),rgba(10,35,25,.2) 80%)}.story-copy{top:26px;right:24px;left:15%;max-width:280px}.story-copy h2{font-size:32px;line-height:1.5}.story-copy p{font-size:15px;margin-top:6px}.story-foot{bottom:18px;right:auto;left:20px}.story-foot>span{display:none}.round-button{width:38px;height:38px}.round-button svg{width:18px}.menu-panel{padding:17px 20px 110px}.demo-note{font-size:12px;padding-bottom:14px;gap:5px}.demo-note svg{width:14px}.menu-heading{margin-top:22px}.menu-heading h2{font-size:28px}.menu-heading p{font-size:14px;margin-top:0}.sun-icon{width:36px;height:36px}.moods{margin-top:18px;gap:8px}.moods button{min-height:58px;font-size:13px;gap:5px}.moods svg{width:19px;height:19px}.menu-title-row{margin-top:27px}.menu-title-row h3{font-size:24px}.surprise-button{font-size:13px}.categories{gap:24px;margin:8px 0 20px}.categories button{font-size:14px}.products{gap:24px 14px}.product-photo{aspect-ratio:1.05;border-radius:11px}.product-tag{font-size:12px;padding:3px 7px;top:9px;right:9px}.product-title{font-size:18px;margin-top:11px}.product-description{font-size:14px;line-height:1.6;min-height:38px}.product-bottom{margin-top:9px}.price{font-size:18px}.price small{font-size:12px}.add-button{width:44px;height:44px}.selection-bar{bottom:max(12px,env(safe-area-inset-bottom));left:14px;right:14px;width:auto;padding:12px 16px;gap:12px;border-radius:12px}.selection-bar strong{font-size:15px}.selection-bar svg{width:20px}.selection-bar small{font-size:12px}.selection-count{height:32px;min-width:32px}.intro video{object-position:center 65%}.intro-copy{top:11%}.intro-logo{width:76px;height:76px;margin-bottom:20px}.intro h1{font-size:74px}.intro h1 span{font-size:36px}.intro-copy p{font-size:16px}.intro-skip{top:17px;left:17px;padding:5px 10px;font-size:13px}.intro-enter{bottom:10%;font-size:17px;min-width:260px}.intro-progress{height:3px}.sheet{border-radius:20px 20px 0 0;inset:auto 0 0;width:100%;height:auto;max-height:93svh}.sheet[open]{animation:none}.detail-image{height:240px}.detail-body{padding:20px 24px 28px}.detail-body h2{font-size:28px}.sheet-heading{padding:30px 24px 20px}.bag-sheet{min-height:50svh}.quiz-sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:calc(100% - 32px);border-radius:16px;max-width:440px}.toast{bottom:102px;max-width:calc(100% - 30px);white-space:normal;width:max-content;text-align:center}.recommendation{font-size:13px}.menu-footer{margin-top:30px}}
@media(max-width:370px){.moods button{flex-direction:column;gap:3px;font-size:12px;padding:8px 3px}.menu-heading h2{font-size:25px}.categories{gap:18px}.topbar{padding:0 16px}.top-actions{gap:10px}.menu-panel{padding-right:16px;padding-left:16px}.detail-action{gap:8px}.detail-action .primary-button{padding:12px}.quantity{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.intro-progress{display:none}}