/* YOYO menu preview — port of the Figma Make design (Downloads/Create HTML CSS JS Page). */
@font-face{font-family:Beiruti;src:url('../menu/assets/fonts/beiruti-arabic.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Beiruti;src:url('../menu/assets/fonts/beiruti-latin.woff2') format('woff2');font-weight:200 900;font-display:swap}

:root{
  --maroon:#c12239;        /* YOYO palette — wwwroot/client/css/style.css */
  --red-deep:#a31b2f;
  --blue:#29428c;
  --pink:#ffbbf8;
  --lime:#e7fc93;
  --honey:#fde1a8;
  --ink:#2b1d20;
  --coffee:#2b1d20;
  --coffee-soft:#76675e;
  --beige:#f7eee6;
  --beige-line:#e5dfd8;
  --muted:#8a7a72;
  --muted-2:#76675e;
  --caramel:#c12239;
  --cream:#fff1fb;
  --display:Beiruti,sans-serif;
  --body:Beiruti,sans-serif;
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none}
/* The menu is a fixed app screen: no browser pull-to-refresh or page bounce, so our own pull-down gestures own the swipe. */
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--body);background:#f5e9e4;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
/* No double-tap zoom on controls (focusing a field never zooms either: see the viewport meta tag). */
button,a,input,select,textarea,[role=button]{touch-action:manipulation}
a{text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
/* Every menu action has a full finger target; visual icon sizes stay independent. */
#menu-platform-app button {
    min-width: 38px;
    min-height: 32px;
}
.ym-header :focus-visible,.ym-detail-ui :focus-visible{outline-color:#fff}
[dir=rtl] *{letter-spacing:0!important}

/* ── App frame: full screen on phones, the design's phone frame on wider screens ── */
#menu-platform-app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;overflow:clip;background:var(--menu-background,#fffaf4)}
@media (min-width:560px){
  body{display:grid;place-items:center;min-height:100dvh}
  #menu-platform-app{width:390px;height:min(844px,calc(100dvh - 48px));border-radius:8px;box-shadow:0 24px 64px rgba(193,34,57,.28)}
}
.boot-state,.error-state{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;padding:24px;color:var(--coffee)}
.error-state button{padding:11px 22px;border-radius:8px;background:var(--ink);color:var(--menu-background,#fff);font-weight:700}

.ym-screen{position:absolute;inset:0;overflow:hidden;overflow:clip;will-change:transform,opacity}
.ym-exit-fwd{animation:ymExitFwd .45s cubic-bezier(.4,0,.2,1) forwards;z-index:1;pointer-events:none}
.ym-enter-fwd{animation:ymEnterFwd .45s cubic-bezier(.34,1.2,.64,1) both;z-index:2}
.ym-exit-back{animation:ymExitBack .45s cubic-bezier(.4,0,.2,1) forwards;z-index:1;pointer-events:none}
.ym-enter-back{animation:ymEnterBack .45s cubic-bezier(.34,1.2,.64,1) both;z-index:2}
@keyframes ymExitFwd{to{transform:scale(.88);opacity:0}}
@keyframes ymEnterFwd{from{transform:scale(1.1);opacity:0}}
@keyframes ymExitBack{to{transform:scale(1.1);opacity:0}}
@keyframes ymEnterBack{from{transform:scale(.88);opacity:0}}

/* ── Header ── */
.ym-header{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);direction:ltr;align-items:center;gap:6px;background:var(--maroon);padding:calc(10px + var(--safe-top)) 8px 10px}
#menu-platform-app .ym-header .ym-circle{width:40px;height:40px;min-width:40px;min-height:40px}
.ym-circle{width:38px;height:38px;border-radius:8px;border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ym-circle svg{width:18px;height:18px}
[dir=rtl] .ym-flip{transform:scaleX(-1)}
.ym-logo{height:48px;width:min(96px,22vw);max-width:100%;object-fit:contain}
.ym-header-start{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.ym-header-end{display:flex;align-items:center;gap:6px}
/* Language: one compact letter mark ("EN" / "ع") in the same round button as the cart. */
.ym-lang{width:32px;height:32px;font-size:12px;font-weight:800;line-height:1;letter-spacing:.3px}
.ym-lang:lang(ar){font-size:15px}
.ym-profile-btn{position:relative;width:32px;height:32px}
.ym-profile-btn svg{width:16px;height:16px}
/* Signed in: a small dot on the profile button. */
.ym-profile-btn.is-signed-in::after{content:"";position:absolute;top:-2px;inset-inline-end:-2px;width:10px;height:10px;border-radius:8px;background:var(--lime);border:2px solid var(--maroon)}
.ym-cart-btn{position:relative;width:32px;height:32px}
.ym-cart-btn svg{width:16px;height:16px}
.ym-cart-count{position:absolute;top:-6px;inset-inline-end:-6px;min-width:22px;height:22px;padding:0 4px;border:2px solid var(--maroon);border-radius:8px;background:var(--menu-surface,#fff);color:var(--maroon);font-size:14px;line-height:1;font-weight:800;display:grid;place-items:center;pointer-events:none}
@media(max-width:374px){#menu-platform-app .ym-header .ym-circle{width:36px;height:36px;min-width:36px;min-height:36px}.ym-header .ym-logo{width:56px}.ym-header-start,.ym-header-end{gap:4px}}

/* ── Splash ── */
.ym-splash{position:absolute;inset:0;z-index:100;background:var(--maroon);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease}
.ym-splash[hidden]{display:none}
.ym-splash img{width:220px;height:auto;transform:scale(1);opacity:1;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.ym-splash p{color:rgba(255,255,255,.6);font-size:13px;margin:16px 0 0;letter-spacing:2px;font-weight:500;transition:opacity .5s ease .2s}
.ym-splash.is-in img{transform:scale(.7);opacity:0}
.ym-splash.is-in p{opacity:0}
.ym-splash.is-out{opacity:0}

/* ── Landing ── */
.ym-landing{display:flex;flex-direction:column;background:var(--menu-background,#fffaf4)}
.ym-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.ym-banner-wrap{padding:16px 16px 0}
/* Carousel: a 16:9 box (best upload: 1600×900 image or 1280×720 / 1920×1080 video) so a slide made to size fills
   it exactly; any other shape is still shown whole, over a soft blurred copy of itself. */
.ym-banner{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;box-shadow:0 8px 28px rgba(193,34,57,.18),0 2px 8px rgba(193,34,57,.10);touch-action:pan-y;cursor:grab;background:#f0e4da}
.ym-banner-slide{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s ease;pointer-events:none}
.ym-banner-slide.is-active{opacity:1;pointer-events:auto}
.ym-banner-slide.is-video{background:#1c1416}
.ym-banner-bg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(18px) saturate(1.15);opacity:.9}
.ym-banner-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ym-banner-slide.has-copy::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 60%)}
/* The copy never grows past the slide (enlarged text): the title keeps two lines, a tagline that does not fit is dropped. */
.ym-banner-copy{position:absolute;bottom:32px;inset-inline-start:20px;inset-inline-end:20px;z-index:1;color:#fff;max-height:calc(100% - 44px);overflow:hidden}
.ym-banner-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ym-banner-copy strong{display:block;font-family:var(--display);font-size:20px;font-weight:800;margin-bottom:4px}
.ym-banner-copy span{font-size:12px;color:rgba(255,255,255,.85)}
/* Each dot keeps a 44px touch target (the app-wide button minimum) but is drawn small, so the row never covers the slide's copy. */
.ym-dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;z-index:2}
.ym-dots button{position:relative;background:none;border-radius:0}
.ym-dots button::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:8px;background:rgba(255,255,255,.5);transition:all .3s}
.ym-dots button.is-active::before{width:20px;margin-left:-10px;background:#fff}

.ym-social-wrap{padding:14px 16px 0}
.ym-social{background:var(--menu-surface,#fff);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.07);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ym-social-id{display:flex;align-items:center;gap:8px;min-width:0}
.ym-ig{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ym-ig svg{width:16px;height:16px}
.ym-social-handle,.ym-social-sub{display:block}
.ym-social-handle{font-size:12px;font-weight:700;color:var(--ink);direction:ltr;text-align:start}
.ym-social-sub{font-size:10px;color:var(--muted);margin-top:1px}
.ym-social-cta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ym-social-cta span{font-size:10px;font-weight:600;color:var(--maroon);text-align:end;line-height:1.3}
.ym-star{width:28px;height:28px;border-radius:8px;background:var(--maroon);display:flex;align-items:center;justify-content:center}
.ym-star svg{width:14px;height:14px}

.ym-cats{padding:14px 16px calc(28px + var(--safe-bottom))}
.ym-cats-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px}
.ym-cats-eyebrow{font-size:10px;color:var(--maroon);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.ym-cats-title{font-size:18px;font-weight:900;font-family:var(--display);color:var(--ink);margin:0}
/* Published card width selects a full row or half row; photos rise above each card. */
.ym-cats-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 16px;padding-top:44px}
.ym-cat-card{position:relative;display:grid;grid-template-columns:40% 1fr;align-items:center;column-gap:10px;min-height:122px;padding-block:16px;padding-inline:0 16px;border-radius:8px;background:var(--accent);color:var(--on-accent);text-align:start;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent)}
.ym-cat-card-wide{grid-column:1/-1;min-height:140px}
.ym-cat-card:not(.ym-cat-card-wide){grid-template-columns:1fr;padding-inline:12px;row-gap:10px;align-content:start}
.ym-cat-card:not(.ym-cat-card-wide) .ym-cat-media{min-height:140px;margin-inline:0}
/* The photo tile rises 38px above the card's top edge; photos fill it edge to edge and cross-fade. */
.ym-cat-media{position:relative;align-self:stretch;margin-block:-54px 0;margin-inline-start:12px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.18);box-shadow:0 12px 22px rgba(0,0,0,.26)}
.ym-photos{position:absolute;inset:0}
.ym-photos img,.ym-photos .ym-img-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .48s ease}
.ym-photos img.is-active,.ym-photos .ym-img-fallback.is-active{opacity:1}
.ym-no-photo .ym-cat-media{background:var(--menu-surface,#fff);box-shadow:0 8px 16px rgba(0,0,0,.14)}
.ym-card-placeholder{position:absolute;inset:0;margin:auto;width:70%;height:auto;opacity:.3;filter:grayscale(1)}
.ym-cat-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.ym-cat-name{font-family:var(--display);font-size:21px;font-weight:900;line-height:1.3;color:#fff;-webkit-text-stroke:3px var(--maroon);paint-order:stroke fill;filter:drop-shadow(0 0 1px #fff)}
.ym-cat-card-wide .ym-cat-name{font-size:24px}
.ym-cat-meta{font-size:10px;font-weight:700;letter-spacing:.4px;opacity:.75}
.ym-cat-items{display:block;max-height:54px;overflow:hidden;margin-top:4px;font-size:12px;line-height:18px;font-weight:600;opacity:.9}
.ym-cat-ticker,.ym-cat-ticker-group{display:block}
.ym-cat-ticker-group>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ym-cat-ticker-group>span::before{content:"•";margin-inline-end:5px;opacity:.6}
.is-scrolling .ym-cat-ticker{animation:ymTicker var(--ticker-duration,18s) linear infinite}
.ym-cat-card:hover .ym-cat-ticker{animation-play-state:paused}
.ym-cat-card:focus .ym-cat-items{overflow-y:auto}
.ym-cat-card:focus .ym-cat-ticker{animation:none;transform:none}
.ym-cat-card:focus .ym-cat-ticker-group[aria-hidden]{display:none}
@keyframes ymTicker{to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.ym-cat-items{overflow-y:auto}.ym-cat-ticker{animation:none!important}.ym-cat-ticker-group[aria-hidden]{display:none}}

/* ── Menu (combined page) ── */
.ym-menu{background:var(--menu-background,#fff)}
.ym-menu-layer{position:absolute;inset:0;z-index:1;overflow:clip}
.ym-menu.is-leaving .ym-menu-layer{pointer-events:none}
/* Stage 1 of opening a product: the menu clears away around the selected image (staggered), in reverse on return. */
.ym-menu-layer .ym-header,.ym-order-bar,.ym-spotlight{transition:opacity .3s ease,transform .35s var(--ease-out)}
.ym-menu.is-leaving .ym-menu-layer .ym-header{opacity:0;transform:translateY(-12px);transition-delay:.14s}
.ym-menu.is-leaving .ym-order-bar{opacity:0;transform:translateY(-10px);transition-delay:.1s}
.ym-menu.is-leaving .ym-spotlight{opacity:0}
.ym-menu.is-leaving .ym-slot:not(.is-active) .ym-slot-img{opacity:0;transform:translateX(calc(-50% + var(--dir,0)*80px)) translateY(var(--lift)) scale(calc(var(--s)*.8))}
.ym-menu.is-leaving .ym-slot .ym-slot-shadow{opacity:0}
.ym-menu.is-leaving .ym-p-head{opacity:0;transform:translateY(-16px);transition-delay:.08s}
.ym-menu.is-leaving .ym-p-body{opacity:0;transform:translateY(40px);transition-delay:.05s}
.ym-menu.is-leaving .ym-sheet{transform:translateY(calc(var(--sheet-y) + 100%))}
.ym-menu.is-returning .ym-order-bar{transition-delay:.05s}
.ym-menu.is-returning .ym-slot:not(.is-active) .ym-slot-img{transition-delay:.08s}
.ym-menu.is-returning :is(.ym-p-head,.ym-p-body){transition-delay:.12s}
.ym-menu.is-returning .ym-sheet{transition-delay:.18s}
.ym-order-bar{position:relative;z-index:4;display:flex;margin:2px 0 8px;background:transparent;padding:4px 8px;gap:2px;border:0;border-bottom:1px solid #e5e5e5;border-radius:0;box-shadow:0 6px 12px -8px rgba(0,0,0,.2)}
.ym-order-bar button{flex:1 1 auto;min-width:0;min-height:44px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;padding:6px 5px;border:0;border-radius:0;color:var(--coffee-soft);font-size:13px;line-height:1.15;font-weight:600;white-space:normal;position:relative;z-index:1;transition:color .18s ease}
.ym-order-bar button.is-active{color:var(--maroon)}
.ym-order-bar:lang(en) button{font-size:13px}
.ym-order-label{min-width:0;white-space:nowrap}
.ym-order-indicator{position:absolute;left:0;top:4px;bottom:5px;width:var(--order-indicator-width,0px);transform:translateX(var(--order-indicator-x,0px));border-radius:8px;background:color-mix(in srgb,var(--maroon) 7%,var(--menu-surface,#fffaf4));box-shadow:none;pointer-events:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ym-order-bar svg{width:17px;height:17px;stroke-width:1.7;flex-shrink:0}
.ym-order-bar:not(.is-positioned) .ym-order-indicator{transition:none}
@media(max-width:360px){.ym-order-bar button{gap:3px;padding-inline:2px;font-size:13px}.ym-order-bar svg{width:16px;height:16px}}
/* Stage = the ordering page for the product on the carousel. It scrolls; the buy bar stays pinned above the sheet. */
.ym-stage{position:absolute;left:0;right:0;display:flex;flex-direction:column}
.ym-stage{--k:1;--ch:320px}
.ym-stage-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-bottom:16px}
.ym-carousel{position:relative}
.ym-spotlight{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:calc(260px*var(--k));height:calc(260px*var(--k));border-radius:50%;background:radial-gradient(circle,rgba(200,149,108,.22) 0%,transparent 70%);pointer-events:none}
.ym-carousel-area{position:relative;z-index:5;width:100%;overflow-x:clip;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom;direction:ltr}
.ym-carousel-area.is-grabbing{cursor:grabbing}
.ym-track{display:flex;will-change:transform}
.ym-track.is-animating{transition:transform .32s var(--ease-out)}
/* Every product is laid out at the selected size, standing on the baseline (--base above the slot bottom).
   Side products are the same box scaled down (--s) and lifted (--lift) to the upper-middle (--mid, from the bottom).
   Only transform and opacity animate, so swiping stays on the GPU: no layout or image resampling per frame. */
.ym-slot{--base:20px;--mid:.58;--s:.267;--lift:calc((var(--ch)*var(--mid) - 40px*var(--k) - var(--base))*-1);flex:0 0 190px;width:190px;height:var(--ch);position:relative}
.ym-slot.is-adjacent{--s:.467;--lift:calc((var(--ch)*var(--mid) - 70px*var(--k) - var(--base))*-1)}
.ym-slot.is-active{--s:1;--lift:0px}
.ym-slot-img{position:absolute;bottom:var(--base);left:50%;width:min(calc(360px*var(--k)),calc(100vw - 24px));height:calc(300px*var(--k));max-width:none;object-fit:contain;object-position:center bottom;transform-origin:center bottom;transform:translateX(-50%) translateY(var(--lift)) scale(var(--s));opacity:.3;transition:transform .36s var(--ease-out),opacity .36s var(--ease-out);pointer-events:none;-webkit-user-drag:none;backface-visibility:hidden}
.ym-slot.is-adjacent .ym-slot-img{opacity:.9}
.ym-slot.is-active .ym-slot-img{opacity:1}
/* No photo: a cup-sized tile instead of a full-size box. */
.ym-slot-img.ym-img-fallback{width:calc(150px*var(--k));height:calc(200px*var(--k));border-radius:8px;font-size:18px}
/* A soft oval drawn with a gradient (no blur filter, which phones render blocky), centred on the image's bottom. */
.ym-slot-shadow{position:absolute;bottom:calc(var(--base) - 12px);left:50%;width:calc(150px*var(--k));height:24px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,.16) 55%,transparent);opacity:0;transform:translateX(-50%) translateY(var(--lift)) scale(var(--s));transition:transform .36s var(--ease-out),opacity .36s var(--ease-out);pointer-events:none}
.ym-slot.is-active .ym-slot-shadow{opacity:1}
.ym-slot.is-adjacent .ym-slot-shadow{opacity:.55;transform:translateX(-50%) translateY(var(--lift)) scale(.55)}
.ym-track.is-jump,.ym-track.is-jump .ym-slot-img,.ym-track.is-jump .ym-slot-shadow{transition:none!important}
.ym-img-fallback{display:grid;place-items:center;background:var(--beige);color:var(--muted-2);font-weight:800;font-size:11px}

.ym-p-head,.ym-p-body,.ym-buy{transition:opacity .25s ease,transform .25s ease}
.ym-p-head.is-fading,.ym-p-body.is-fading{opacity:0;transform:translateY(6px)}
.ym-p-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 20px 0}
/* The product name in the YOYO logo's sticker lettering: white fill, thick red outline, thin white halo. */
.ym-name{font-family:var(--display);font-size:24px;font-weight:900;line-height:1.2;margin:0;padding:0 4px;color:#fff;-webkit-text-stroke:4.5px var(--maroon);paint-order:stroke fill;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 4px 6px rgba(193,34,57,.22))}
.ym-product-summary{padding:0 4px 10px;border-bottom:1px solid var(--beige-line);margin-bottom:4px;text-align:center}
.ym-desc{font-size:18px;font-weight:450;color:var(--coffee-soft);line-height:1.45;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ym-labels{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px;max-width:55%}
.ym-media-controls{position:absolute;inset:8px 12px auto;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.ym-media-controls>*{pointer-events:auto}
.ym-menu.is-leaving .ym-media-controls{opacity:0;pointer-events:none}
.ym-media-controls .ym-badge{background:var(--menu-surface,#fffaf4);color:var(--maroon);border:1px solid var(--maroon)}
.ym-badge{font-size:10px;font-weight:700;color:var(--maroon);background:var(--menu-surface,#fff);border:1.5px solid var(--maroon);border-radius:8px;padding:3px 10px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.ym-more{display:flex;width:fit-content;align-items:center;justify-content:center;gap:10px;margin:2px auto 0;padding:4px 0;font-size:17px;font-weight:750;color:var(--maroon);border-radius:8px}
.ym-more span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ym-more:hover{color:var(--red-deep)}
.ym-more svg{width:13px;height:13px;transform:rotate(-90deg)}
[dir=rtl] .ym-more svg{transform:rotate(90deg)}
.ym-p-body{display:flex;flex-direction:column;gap:10px;padding:8px 16px 0}
.ym-opt{background:var(--menu-surface,#fff);border-radius:8px;padding:12px 14px;box-shadow:0 2px 12px rgba(193,34,57,.06),0 0 0 1px rgba(193,34,57,.06)}
.ym-opt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ym-opt-head h3{margin:0;font-family:var(--display);font-size:15px;font-weight:800;color:var(--ink)}
.ym-opt-rule{font-size:10px;font-weight:700;color:var(--muted-2);background:var(--beige);border-radius:8px;padding:2px 8px;white-space:nowrap}
.ym-opt-rule.is-required{color:var(--maroon);background:#fde8eb}
.ym-opt.is-missing{animation:ym-shake .4s ease;box-shadow:0 0 0 2px var(--maroon)}
@keyframes ym-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ym-choices{display:flex;flex-wrap:wrap;gap:6px}
.ym-choice{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;background:var(--beige);border:1.5px solid transparent;color:var(--coffee);font-size:12px;font-weight:700;transition:all .2s;text-align:start}
.ym-choice small{font-size:10px;font-weight:700;color:var(--maroon)}
.ym-choice.is-active{background:var(--cream);border-color:var(--maroon);color:var(--maroon)}
/* Add-ons with portions and ingredient amounts: one card each, its choices inside (as on the POS item sheet). */
.ym-addons{display:flex;flex-direction:column;gap:8px}
.ym-addon-price{flex:none;font-size:11px;font-weight:700;color:var(--maroon)}
.ym-addon{border:1.5px solid var(--beige-line);border-radius:8px;padding:10px 12px;background:var(--menu-surface,#fff);transition:border-color .2s,background .2s}
.ym-addon.is-active{border-color:var(--maroon);background:color-mix(in srgb,var(--maroon) 8%,var(--menu-surface,#fff))}
.ym-addon-head{display:flex;align-items:center;gap:10px;width:100%;min-height:28px;text-align:start;color:var(--ink)}
.ym-addon-name{flex:1;min-width:0;font-size:13px;font-weight:800;line-height:1.3}
.ym-addon-img{flex:none;width:32px;height:32px;border-radius:8px;object-fit:cover;background:var(--beige)}
.ym-tick{flex:none;display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--beige-line);border-radius:8px;background:var(--menu-surface,#fff);transition:all .2s}
.ym-tick.is-radio{border-radius:8px}
.ym-addon.is-active .ym-tick{border-color:var(--maroon)}
.ym-addon.is-active .ym-tick:not(.is-radio){background:var(--maroon)}
.ym-addon.is-active .ym-tick:not(.is-radio)::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.ym-addon.is-active .ym-tick.is-radio::after{content:"";width:10px;height:10px;border-radius:8px;background:var(--maroon)}
.ym-levels{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ym-level{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:var(--beige);border:1.5px solid transparent;color:var(--coffee);font-size:12px;font-weight:700;transition:all .2s}
.ym-level small{font-size:10px;font-weight:700;color:var(--maroon)}
.ym-level.is-active{background:var(--maroon);border-color:var(--maroon);color:#fff}
.ym-level.is-active small{color:#fff}
.ym-note-input{display:block;width:100%;margin:0;padding:10px 12px;border:1.5px solid var(--beige-line);border-radius:8px;font:inherit;font-size:16px;color:var(--ink);resize:none;background:var(--menu-background,#fffaf4)}
.ym-note-input:focus{outline:none;border-color:var(--maroon)}
/* iOS Safari zooms the page when a focused field is under 16px; keep every field at 16px on touch devices. */
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
/* Bottom dock: categories → items → quantity + add. A divider and gap keep thumbs aiming at a tile off the add button. */
.ym-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex-shrink:0;margin:0 16px;padding:7px 0 calc(7px + var(--safe-bottom));border-top:1px solid var(--beige);background:var(--menu-surface,#fff);max-height:300px;overflow:hidden;transition:max-height .38s var(--ease-out),padding .38s var(--ease-out),opacity .25s ease,transform .38s var(--ease-out),border-color .25s ease,visibility 0s linear 0s}
/* Opening the full list slides the bar down and out; closing brings it back up. */
.ym-sheet.is-expanded .ym-buy{max-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateY(40px);border-color:transparent;pointer-events:none;visibility:hidden;transition-delay:0s,0s,0s,0s,0s,.38s}
.ym-buy .ym-qty-ctrl{flex-shrink:0;background:var(--beige);border-radius:8px;padding:4px;gap:4px}
    .ym-buy .ym-qty-ctrl button {
        width: 45px;
        height: 45px;
        background: var(--menu-surface,#fff);
        color: var(--maroon);
        font-size: 18px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
        border: 1px solid #e3e3e3;
    }
.ym-buy .ym-qty-ctrl span{min-width:22px;color:var(--ink);font-size:16px}
.ym-cta{flex:1 1 140px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px;background:var(--maroon);border-radius:8px;color:#fff;font-size:14px;font-weight:700;letter-spacing:.3px;transition:background .2s;}
.ym-cta strong{font-weight:900;white-space:nowrap}
.ym-cta:hover{background:var(--red-deep)}

/* Bottom sheet */
.ym-sheet{position:absolute;left:0;right:0;top:0;z-index:10;display:flex;flex-direction:column;background:var(--menu-surface,#fff);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 -8px 28px rgba(0,0,0,.10),0 -1px 6px rgba(0,0,0,.06);transform:translateY(var(--sheet-y,100%));transition:transform .38s var(--ease-out)}
.ym-sheet.is-dragging{transition:none}
.ym-sheet-handle{padding:6px 0 2px;display:flex;flex-direction:column;align-items:center;cursor:ns-resize;flex-shrink:0;width:100%;touch-action:none}
.ym-pill-bar{width:40px;height:4px;border-radius:8px;background:#e5dfd8}
.ym-sheet-label{margin-top:3px;display:flex;align-items:center;gap:4px;color:var(--muted-2);font-size:11px;font-weight:500}
/* The chevron points the way the sheet will move: up while collapsed ("swipe up"), down once expanded. */
.ym-sheet-label svg{width:12px;height:12px;transition:transform .3s;transform:rotate(180deg)}
.ym-sheet.is-expanded .ym-sheet-label svg{transform:none}
.ym-drag-row{display:flex;overflow-x:auto;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior-x:contain}
.ym-drag-row.is-grabbing{cursor:grabbing}
.ym-pills {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin: 0 0 4px;
    padding: 4px;
    flex-shrink: 0;
    min-height: 44px;
    background: var(--menu-surface,#fffaf4);
    border: 1px solid #e3e3e3;
    border-radius: 0px;
    /*box-shadow: 0 2px 12px color-mix(in srgb,var(--maroon) 7%,transparent)*/
}
.ym-cat-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-height:34px;padding:4px 10px;border:0;border-radius:8px;color:var(--coffee-soft);font-size:13px;font-weight:650;white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}
.ym-cat-pill.is-active{background:var(--maroon);color:#fffaf4;font-weight:800}
.ym-cat-pill small{font-size:10px;font-weight:600;opacity:.8}
.ym-cat-pill:not(.is-active):hover{color:var(--maroon);background:var(--beige)}
.ym-cat-pill img,.ym-cat-pill .ym-img-fallback{width:16px;height:16px;border-radius:8px;object-fit:cover;font-size:0}
.ym-favorites-pill svg{width:15px;height:15px;fill:currentColor}
.ym-divider{height:1px;background:var(--beige);margin:0 16px;flex-shrink:0}
.ym-items{gap:6px;padding:5px 12px;flex-shrink:0}
/* Each tile is as wide as its name (never narrower than the photo tile, never wider than 140px). */
.ym-item{flex:0 0 auto;width:auto;min-width:58px;max-width:140px;background:var(--menu-background,#fffaf4);border:1.5px solid var(--beige-line);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .2s}
.ym-item.is-active{background:color-mix(in srgb,var(--maroon) 8%,var(--menu-surface,#fff));border-color:var(--caramel)}
.ym-item-img{width:32px;height:32px;border-radius:8px;overflow:hidden;background:var(--beige);object-fit:contain}
.ym-item-name{font-weight:700;font-size:11px;color:var(--coffee);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ym-item-price{font-size:10px;font-weight:700;color:var(--caramel);white-space:nowrap}
.ym-list{display:none;flex:1;overflow-y:auto;padding:10px 16px calc(16px + var(--safe-bottom));overscroll-behavior:contain}
.ym-sheet.is-expanded .ym-items{display:none}
.ym-sheet.is-expanded .ym-list{display:block}
.ym-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;margin-bottom:8px;border:1.5px solid transparent;cursor:pointer;transition:all .2s}
.ym-row.is-active{background:var(--cream);border-color:var(--caramel)}
.ym-row-img{width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--beige);flex-shrink:0;object-fit:contain}
.ym-row-info{flex:1;min-width:0;text-align:start}
.ym-row-name{font-family:var(--display);font-weight:700;font-size:14px;color:var(--coffee);margin-bottom:2px}
.ym-row-desc{font-size:11px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ym-row-actions{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end}
.ym-row-price{font-size:13px;font-weight:700;color:var(--coffee);white-space:nowrap}
.ym-plus{margin-top:4px;width:26px;height:26px;border-radius:8px;background:var(--honey);color:var(--maroon);display:flex;align-items:center;justify-content:center;transition:background .2s;color:var(--coffee)}
.ym-row.is-active .ym-plus{background:var(--maroon);color:#fff}
.ym-plus svg{width:12px;height:12px}

/* ── Detail (stage 2): the selected image grows into the full-screen hero, then the UI rises ── */
.ym-hero-layer{position:absolute;inset:0;z-index:2;visibility:hidden;pointer-events:none;overflow:hidden}
.ym-menu.is-hero .ym-hero-layer{visibility:visible}
.ym-hero-layer > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 24%;transform-origin:0 0}
/* A transparent cut-out is shown whole on a deep tint of its category colour instead of being cropped to the screen. */
.ym-hero-layer.is-cutout > img{object-fit:contain;object-position:center 24%}
.ym-gallery-slide.is-cutout img{object-fit:contain;object-position:center 24%}
.ym-menu.is-detail .ym-hero-layer{background:transparent}
.ym-menu.is-detail .ym-menu-layer{visibility:hidden}
.ym-gallery-slide{background:transparent}
/* A picture whose file failed shows the brand mark, never the browser's broken-image icon. */
img.ym-img-failed{object-fit:contain!important;object-position:center!important;box-sizing:border-box;padding:14%;background:rgba(255,255,255,.55)}
.ym-slot-img.ym-img-failed{background:none;padding:0;opacity:.55}
.ym-hero-layer > img.ym-img-failed,.ym-gallery-slide img.ym-img-failed{padding:32% 20%;background:transparent}
.ym-banner-slide.is-failed .ym-banner-media{padding:22%}
.ym-dots button.is-failed{display:none}
.ym-hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,.06) 45%,transparent 65%),linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 45%);opacity:0;transition:opacity .25s ease}
.ym-menu.is-detail .ym-hero-grad{opacity:0}
/* The gallery carries the same opening/closing transform as a single hero image. */
.ym-hero-layer.has-gallery > img{visibility:hidden}
.ym-gallery{position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:0 0}
.ym-menu.is-hero .ym-gallery{opacity:1}
.ym-menu.is-detail .ym-gallery{pointer-events:auto}
.ym-gallery-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;direction:ltr;cursor:grab}
.ym-gallery-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center}
.ym-gallery-slide img,.ym-gallery-slide video{width:100%;height:100%;object-fit:contain;object-position:center 24%;display:block}
.ym-gallery-dots{position:absolute;top:calc(28px + var(--safe-top));inset-inline-end:20px;display:flex;gap:5px;z-index:3;pointer-events:none}
.ym-gallery-dots span{width:6px;height:6px;border-radius:8px;background:rgba(255,255,255,.55);transition:all .3s}
.ym-gallery-dots span.is-active{width:16px;background:#fff}
.ym-hero-grad{pointer-events:none}
.ym-detail-ui{position:absolute;inset:0;z-index:20;pointer-events:none}
.ym-d-back svg{width:18px;height:18px}
.ym-d-cat{font-size:12px;color:var(--coffee);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.ym-d-title h1{font-family:var(--display);font-size:31px;font-weight:900;color:#fff;margin:0;line-height:1.2;-webkit-text-stroke:3px var(--maroon);paint-order:stroke fill;filter:drop-shadow(0 0 1px #fff)}
.ym-d-back{position:absolute;top:calc(14px + var(--safe-top));inset-inline-start:20px;width:38px;height:38px;border-radius:8px;background:var(--maroon);border:1px solid var(--maroon);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transform:translateY(-12px);transition:opacity .2s ease,transform .2s ease}
.ym-d-title{position:absolute;top:calc(60px + var(--safe-top));left:20px;right:20px;opacity:0;transform:translateY(18px);transition:opacity .2s ease,transform .2s ease;text-align:start}
.ym-d-panels{position:absolute;bottom:0;left:0;right:0;max-height:calc(100% - 150px - var(--safe-top));overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:0 14px calc(26px + var(--safe-bottom))}
.ym-d-panels>*{opacity:0;transform:translateY(28px);transition:opacity .2s ease,transform .2s ease}
.ym-menu.is-detail .ym-d-back,.ym-menu.is-detail .ym-d-panels,.ym-menu.is-detail .ym-d-actions,.ym-menu.is-detail .ym-d-buy{pointer-events:auto}
.ym-menu.is-detail .ym-d-back,.ym-menu.is-detail .ym-d-actions{opacity:1;transform:none;transition:opacity .3s ease .45s,transform .3s ease .45s}
/* Product screen: cart + profile at the top end, the ordering choices in the panels, the buy bar pinned below. */
.ym-d-actions{position:absolute;top:calc(14px + var(--safe-top));inset-inline-end:20px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-12px);transition:opacity .2s ease,transform .2s ease}
.ym-d-actions .ym-circle{width:38px;height:38px;background:var(--maroon);border:1px solid var(--maroon)}
.ym-d-actions .ym-circle svg{width:18px;height:18px}
.ym-favorite-btn svg{fill:transparent;transition:fill .2s ease,transform .2s ease}
.ym-favorite-btn.is-active{background:var(--menu-surface,#fff);color:var(--maroon)}
.ym-favorite-btn.is-active svg{fill:currentColor;transform:scale(1.05)}
/* --ym-signup-room: the sign-up card's height while it shows on the product page, so the options scroll above it. */
.ym-d-panels{padding-bottom:calc(var(--ym-detail-buy-room,92px) + var(--safe-bottom) + var(--ym-signup-room,0px))}
.ym-d-order{display:flex;flex-direction:column;gap:8px}
.ym-d-order:empty{display:none}
.ym-d-buy{position:absolute;flex-wrap:wrap;left:14px;right:14px;bottom:calc(14px + var(--safe-bottom));display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:var(--menu-surface,rgba(255,255,255,.96));box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.ym-menu.is-detail .ym-d-buy{opacity:1;transform:none;transition:opacity .35s ease .5s,transform .45s cubic-bezier(.34,1.1,.64,1) .5s}
.ym-d-buy .ym-qty-ctrl{flex-shrink:0;background:var(--beige);border-radius:8px;padding:4px;gap:4px}
.ym-d-buy .ym-qty-ctrl button{width:32px;height:32px;background:var(--menu-surface,#fff);color:var(--maroon);font-size:18px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ym-d-buy .ym-qty-ctrl span{min-width:22px;color:var(--ink);font-size:15px}
.ym-menu.is-detail .ym-d-title{opacity:1;transform:none;transition:opacity .35s ease .38s,transform .45s cubic-bezier(.34,1.1,.64,1) .38s}
.ym-menu.is-detail .ym-d-panels>*{opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.1,.64,1);transition-delay:calc(.42s + var(--i,0)*.06s)}
.ym-menu.no-anim,.ym-menu.no-anim *{transition:none!important;animation:none!important}
.ym-glass{background:color-mix(in srgb,var(--menu-surface,#fffaf4) 92%,transparent);border-radius:8px;border:1px solid var(--beige-line);color:var(--coffee);flex-shrink:0}
.ym-d-desc{padding:11px 14px}
.ym-d-desc p{font-size:14px;line-height:1.6;margin:0}
.ym-ing{overflow:hidden}
.ym-ing-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;color:#fff}
.ym-ing-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.ym-ing-title span:first-child{font-size:15px}
.ym-ing-chev{width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:transform .3s}
.ym-ing-chev svg{width:11px;height:11px}
.ym-ing.is-open .ym-ing-chev{transform:rotate(180deg)}
.ym-ing-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.ym-ing.is-open .ym-ing-body{max-height:160px}
.ym-chips{padding:0 14px 12px;display:flex;flex-wrap:wrap;gap:6px}
.ym-chip{background:var(--beige);border-radius:8px;padding:4px 10px;border:1px solid var(--beige-line);display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600}
.ym-chip::before{content:"";width:5px;height:5px;border-radius:8px;background:var(--maroon)}
.ym-d-row{display:flex;gap:8px;flex-shrink:0}
.ym-sizes{flex:1;padding:10px;display:flex;gap:6px;min-width:0}
.ym-size{flex:1;min-width:0;padding:8px 2px;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;transition:all .2s}
.ym-size.is-active{background:var(--menu-surface,rgba(255,255,255,.92));color:var(--ink)}
.ym-size strong{display:block;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.ym-size small{display:block;font-size:8px;opacity:.7;margin-top:1px}
.ym-qty{padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ym-d-row.no-sizes .ym-qty{flex:1;flex-direction:row;justify-content:space-between}
.ym-qty-ctrl{display:flex;align-items:center;gap:6px;direction:ltr}
/* Arabic reads right to left: "+" on the left, "−" on the right. */
[dir="rtl"] .ym-qty-ctrl{direction:rtl}
.ym-qty-ctrl button{width:26px;height:26px;background:rgba(255,255,255,.2);border-radius:8px;font-size:16px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.ym-qty-ctrl span{min-width:18px;text-align:center;font-size:14px;font-weight:800}
.ym-qty-total{font-size:12px;font-weight:900;white-space:nowrap}
.ym-add{width:100%;flex-shrink:0;padding:13px 0;background:rgba(193,34,57,.9);border-radius:8px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;box-shadow:0 6px 20px rgba(193,34,57,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s}
.ym-add:hover{background:rgba(163,27,47,.95)}
.ym-related{padding:12px 12px 14px}
.ym-related-title{font-size:12px;color:var(--coffee);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px}
.ym-related-row{gap:8px}
.ym-rel{flex:0 0 90px;background:var(--menu-surface,#fffaf4);border-radius:8px;overflow:hidden;border:1px solid var(--beige-line);color:var(--coffee);text-align:start}
.ym-rel-img{width:100%;height:60px;object-fit:contain}
.ym-rel-copy{padding:6px 8px 8px}
.ym-rel-name{font-size:10px;font-weight:700;line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ym-rel-price{font-size:11px;font-weight:800;color:var(--maroon);white-space:nowrap}

/* ── Order drawer + toast ── */
.ym-backdrop{position:absolute;inset:0;z-index:60;background:rgba(26,14,7,.45);animation:ymFade .25s ease both}
.ym-drawer{position:absolute;left:0;right:0;bottom:0;z-index:61;max-height:75%;overflow-y:auto;background:var(--menu-surface,#fff);border-top-left-radius:8px;border-top-right-radius:8px;padding:18px 20px calc(22px + var(--safe-bottom));box-shadow:0 -12px 40px rgba(193,34,57,.25);animation:ymUp .38s var(--ease-out) both}
.ym-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ym-drawer-head h2{font-family:var(--display);font-size:20px;margin:0;color:var(--ink)}
.ym-drawer-close{width:34px;height:34px;border-radius:8px;background:var(--beige);color:var(--red-deep);font-size:18px;font-weight:700; border:1px solid #e3e3e3;}
.ym-drawer-mode{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--maroon);border-radius:8px;padding:4px 10px;margin:0 0 10px}
.ym-drawer ul{list-style:none;margin:0;padding:0}
.ym-drawer li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #e3e3e3;font-size:13px;color:var(--coffee)}
.ym-drawer li span{color:var(--muted-2);white-space:nowrap}
.ym-drawer li small{display:block;font-size:11px;font-weight:500;color:var(--muted-2);margin-top:2px}
.ym-drawer li .ym-line-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ym-drawer li .ym-line-price{color:var(--ink);font-weight:800}
.ym-line-qty{background:var(--beige);border-radius:8px;padding:3px;gap:4px}
    .ym-line-qty button {
        width: 28px;
        height: 28px;
        background: var(--menu-surface,#fff);
        color: var(--maroon);
        font-size: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08);
        border: 1px solid #e3e3e3
    }
.ym-drawer li .ym-line-qty span{min-width:20px;color:#3e3e3e3;font-size:13px}
.ym-drawer-sum{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin:8px 0 0;color:var(--ink)}
.ym-drawer-sum+.ym-drawer-total{margin-top:8px}
.ym-drawer-total{display:flex;justify-content:space-between;font-weight:800;font-size:16px;margin:14px 0 6px;color:var(--ink)}
.ym-drawer-empty{color:var(--muted-2);font-size:13px;margin:10px 0}
.ym-checkout{width:100%;margin-top:14px;padding:13px 0;border-radius:8px;background:var(--maroon);color:#fff;font-size:14px;font-weight:700;box-shadow:0 6px 20px rgba(193,34,57,.35);transition:background .2s}
.ym-checkout:hover{background:var(--red-deep)}
.ym-drawer-note{font-size:10px;color:var(--muted);margin:8px 0 0}
.ym-toast{position:absolute;left:50%;bottom:calc(24px + var(--safe-bottom));z-index:80;transform:translateX(-50%);background:var(--ink);color:var(--menu-background,#fff);font-size:12px;font-weight:600;padding:10px 18px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:nowrap;animation:ymToast .3s var(--ease-out) both}
@keyframes ymFade{from{opacity:0}}
@keyframes ymUp{from{transform:translateY(100%)}}
@keyframes ymToast{from{opacity:0;transform:translate(-50%,12px)}}

/* ── Sign-up prompt (signupPrompt in yoyo-menu.js): a compact card above the buy bar, under the order drawer ── */
.ym-signup{position:absolute;inset-inline:12px;bottom:var(--ym-signup-lift,calc(12px + var(--safe-bottom)));z-index:50;display:grid;grid-template-columns:1fr auto;align-items:start;gap:10px 8px;padding:14px;padding-inline-start:16px;background:var(--menu-surface,#fff);border:1px solid var(--beige-line);border-radius:8px;box-shadow:0 12px 32px rgba(43,29,32,.22);color:var(--ink);animation:ymSignupIn .35s var(--ease-out) both}
.ym-signup[hidden]{display:none}
.ym-signup-text{grid-column:1;grid-row:1;margin:0;font-size:14px;font-weight:700;line-height:1.45;text-align:start}
.ym-signup-close{grid-column:2;grid-row:1;width:28px;height:28px;border-radius:8px;background:var(--beige);color:var(--coffee);font-size:16px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.ym-signup-actions{grid-column:1/-1;display:flex;gap:8px}
.ym-signup-actions button{flex:1;min-height:40px;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:700}
.ym-signup-actions .ym-signup-go{flex:1.4;background:var(--maroon);color:#fff;box-shadow:0 6px 16px rgba(193,34,57,.3);transition:background .2s}
.ym-signup-actions .ym-signup-go:hover{background:var(--red-deep)}
.ym-signup-later{background:var(--beige);color:var(--coffee)}
@keyframes ymSignupIn{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.ym-signup{animation:none}}

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

/* Add-to-cart: a copy of the product photo flies into the cart button. */
.ym-fly{position:absolute;z-index:90;pointer-events:none;object-fit:contain;transform-origin:center;will-change:transform,opacity;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}

/* Privacy: the site-wide floating "privacy settings" button covered the buy bar, so the menu hides it and
   offers a quiet link at the foot of the home screen instead (privacyLink in yoyo-menu.js). */
#trackingPreferences{display:none!important}
.ym-privacy{display:flex;justify-content:center;padding:4px 16px 28px}
.ym-privacy button{background:none;border:0;padding:8px 12px;color:var(--muted-2);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ym-complaints{margin:0 20px;padding:22px 0 calc(24px + var(--safe-bottom));border-top:1px solid var(--beige-line)}
.ym-complaints h2{margin:0;color:var(--maroon);font-size:26px;line-height:1.2;font-weight:800}
.ym-complaints>p{margin:6px 0 16px;color:var(--coffee-soft);font-size:17px;line-height:1.35}
.ym-complaint-links{display:flex;flex-direction:column;gap:8px}
.ym-complaint-contact{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border:1px solid var(--beige-line);border-radius:12px;color:var(--ink);text-align:start}
.ym-complaint-contact:hover,.ym-complaint-contact:focus-visible{border-color:var(--maroon);background:color-mix(in srgb,var(--maroon) 5%,var(--menu-background,#fffaf4))}
.ym-complaint-contact>svg{width:23px;height:23px;flex-shrink:0;color:var(--maroon)}
.ym-complaint-contact>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ym-complaint-contact strong{font-size:18px;line-height:1.1;font-weight:750}
.ym-complaint-contact bdi{font-size:15px;line-height:1.3;color:var(--coffee-soft);overflow-wrap:anywhere}
.ym-message{padding-bottom:20px}
.ym-message [hidden]{display:none!important}
.ym-message-privacy{font-size:15px;line-height:1.35;margin:0 0 12px;color:var(--coffee-soft)}
.ym-message form{display:flex;flex-direction:column;gap:8px}
.ym-message label{font-size:17px;font-weight:700}
.ym-message textarea,.ym-message input{width:100%;min-height:44px;padding:12px;font:inherit;font-size:18px;border:1px solid var(--beige-line);border-radius:10px;background:var(--menu-background,#fffaf4);color:var(--ink);resize:vertical}
.ym-message textarea{min-height:112px;max-height:280px}
.ym-message button{align-self:start;padding:10px 18px;min-height:44px;font-weight:750;font-size:18px;border-radius:10px}
.ym-message .ym-message-primary{background:var(--maroon);color:#fffaf4}
.ym-message button:disabled{opacity:.6;cursor:wait}
.ym-message-saved{color:var(--ink);font-weight:650;font-size:17px;margin:0 0 16px}
.ym-message h3{font-size:22px;line-height:1.25;margin:0 0 14px}
.ym-message-choices{display:flex;gap:10px}
.ym-message-choices button{border:1px solid var(--maroon);color:var(--maroon);min-width:72px}
.ym-message-skip{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.ym-message-error{color:#a31b2f;font-size:17px;line-height:1.35;margin:12px 0 0}

/* "Get the app" (pwa.js shows it only when this browser can install) */
.ym-install-btn{position:relative;width:32px;height:32px;background:var(--lime);border-color:var(--lime);color:var(--maroon);animation:ymInstallIn .5s cubic-bezier(.34,1.56,.64,1),ymInstallPulse 2s ease-out .8s 3}
.ym-install-btn svg{width:16px;height:16px;animation:pwaNavNudge 3.2s ease-in-out 1.2s infinite}
@keyframes ymInstallIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes ymInstallPulse{0%{box-shadow:0 0 0 0 rgba(231,252,147,.8)}100%{box-shadow:0 0 0 10px rgba(231,252,147,0)}}
@media (prefers-reduced-motion:reduce){.ym-install-btn,.ym-install-btn svg{animation:none}}

/* Published menu favourites and catalog loading feedback. */
.ym-logo-link{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px}
.ym-featured{padding:22px 0 12px;container-type:inline-size}
.ym-featured-head{padding:0 20px;margin-bottom:16px}
.ym-featured-head h2{font-size:29px;font-weight:850;line-height:1.1;margin:0;color:var(--maroon)}
.ym-featured-head p{font-size:16px;line-height:1.35;margin:5px 0 0;color:var(--coffee-soft)}
.ym-featured-track{--featured-width:min(76cqi,360px);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:10px calc((100cqi - var(--featured-width))/2) 14px;cursor:grab}
.ym-featured-track.is-grabbing{cursor:grabbing;scroll-snap-type:none}
.ym-featured-track.is-repositioning{scroll-behavior:auto;scroll-snap-type:none}
.ym-featured-track.is-repositioning .ym-featured-item,.ym-featured-track.is-repositioning .ym-featured-item::after{transition:none}
.ym-featured-item{position:relative;flex:0 0 var(--featured-width);min-width:0;aspect-ratio:20/21;isolation:isolate;overflow:hidden;scroll-snap-align:center;border-radius:32px;color:#fffaf4;background:var(--coffee);transform:scale(.94);transition:transform .35s var(--ease-out);text-align:start;-webkit-user-select:none;user-select:none}
.ym-featured-item.is-active,.ym-featured-item:focus-visible{transform:scale(1)}
.ym-featured-item::after{content:"";position:absolute;inset:0;z-index:3;background:#211719;opacity:.42;pointer-events:none;transition:opacity .35s var(--ease-out)}
.ym-featured-item.is-active::after,.ym-featured-item:focus-visible::after{opacity:0}
.ym-featured-item:focus-visible{outline-offset:4px}
.ym-featured-photo{position:absolute;inset:0;display:grid;place-items:center;background:var(--honey);overflow:hidden}
.ym-featured-photo[data-tone="1"]{background:color-mix(in srgb,var(--pink) 35%,var(--menu-background,#fffaf4))}
.ym-featured-photo[data-tone="2"]{background:color-mix(in srgb,var(--lime) 55%,var(--menu-background,#fffaf4))}
.ym-featured-img{width:100%;height:100%;object-fit:cover;object-position:center}
.ym-featured-img.is-cutout{object-fit:contain;padding:54px 14px 90px}
.ym-featured-img.ym-img-fallback{padding-bottom:100px;font-size:44px;color:var(--maroon)}
.ym-featured-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,23,25,.25),transparent 28%,rgba(33,23,25,.35) 48%,rgba(33,23,25,.93) 82%)}
.ym-featured-top{position:absolute;top:18px;inset-inline:18px;display:flex;align-items:start;justify-content:space-between;gap:12px;z-index:1}
.ym-featured-category{max-width:65%;padding:7px 10px;border-radius:14px;font-size:14px;line-height:1.15;font-weight:700;background:rgba(33,23,25,.75);overflow-wrap:anywhere}
.ym-featured-brand{flex-shrink:0;padding:7px 8px;border-radius:12px;background:#fffaf4}
.ym-featured-brand img{width:52px;height:26px;object-fit:contain}
.ym-featured-copy{position:absolute;bottom:0;inset-inline:0;z-index:1;display:flex;flex-direction:column;gap:8px;padding:18px}
.ym-featured-copy strong{font-family:var(--display);font-size:clamp(24px,7.5cqi,30px);font-weight:850;line-height:1.05;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ym-featured-description{font-size:16px;line-height:1.25;color:#f1e6df;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ym-featured-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;margin-top:2px;border-top:1px solid rgba(255,250,244,.25)}
.ym-featured-price{font-size:21px;line-height:1.2;font-weight:800;color:var(--honey)}
.ym-featured-price small{font-size:14px;font-weight:600}
.ym-featured-link{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:650;color:#fffaf4}
.ym-featured-link svg{width:16px;height:16px;transform:rotate(-90deg)}
[dir=rtl] .ym-featured-link svg{transform:rotate(90deg)}
/* Defined corners across the order flow, with the same compact shape on every control. */
.ym-banner,.ym-cat-card,.ym-cat-media,.ym-social{border-radius:8px}
.ym-header .ym-circle,.ym-d-actions .ym-circle,.ym-d-back{border-radius:50%}
.ym-menu .ym-sheet{border-radius:8px}
.ym-menu :is(.ym-opt,.ym-addon,.ym-row,.ym-item){border-radius:8px}
.ym-menu :is(.ym-choice,.ym-level,.ym-note-input,.ym-row-img,.ym-plus,.ym-cta,.ym-qty-ctrl,.ym-qty-ctrl button){border-radius:8px}
.ym-menu .ym-cta{padding-inline:12px}
.ym-menu :is(.ym-opt-rule,.ym-badge,.ym-item-img){border-radius:8px}
.ym-menu .ym-d-buy{border-radius:8px}
@media(prefers-reduced-motion:reduce){.ym-order-indicator,.ym-cat-pill{transition:none}}
@media(prefers-reduced-motion:reduce){.ym-featured-item,.ym-featured-item::after{transition:none}}
.ym-menu-loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--menu-background,#fffaf4);color:var(--maroon);font-size:18px;font-weight:700}
.ym-spinner{width:34px;height:34px;border:3px solid var(--beige-line);border-top-color:var(--maroon);border-radius:50%;animation:ymSpin .8s linear infinite}
@keyframes ymSpin{to{transform:rotate(360deg)}}
.ym-type-enter .ym-stage,.ym-type-enter .ym-sheet{animation:ymTypeEnter .24s cubic-bezier(.25,1,.5,1)}
@keyframes ymTypeEnter{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.ym-spinner{animation:none}.ym-type-enter .ym-stage,.ym-type-enter .ym-sheet{animation:none}}

/* Unavailable items remain browsable while ordering controls are disabled. */
.ym-sold-out {
  display: inline-block;
  margin-inline-start: .5rem;
  color: #a43d32;
  font-size: .75rem;
  font-weight: 700;
}
.ym-cta:disabled,
.ym-plus:disabled,
.ym-addon-head:disabled,
.ym-level:disabled {
  cursor: default;
  opacity: .55;
}