/* ============================================================ Res — menu.css (public customer-facing digital menu) Themed per-venue via --brand (injected inline in menu.php). RTL-first: every box model uses logical properties only. Fonts are linked from menu.php (not @import) so they download in parallel with this file instead of after it. ============================================================ */ :root{ --brand:#F7A511; /* --muted darkened from #8A8175: the old value scored 3.59:1 on --bg, below the 4.5:1 floor for the small meta chips that use it. Now 4.60:1. */ --bg:#FEF8EC; --surface:#FFFFFF; --ink:#1E1912; --ink-soft:#4A423A; --muted:#6B655B; --line:#ECE6DC; --line-2:#E2DACE; --font:"Plus Jakarta Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif; --ease:cubic-bezier(.22,1,.36,1); /* radii */ --r-card:18px; --r-media:14px; --r-field:14px; --r-pill:999px; /* elevation */ --sh-1:0 1px 2px rgba(30,25,18,.04), 0 4px 14px -8px rgba(30,25,18,.10); --sh-2:0 12px 30px -14px rgba(30,25,18,.28); /* measured at runtime by menu.js; fallbacks match the default type scale */ --sb-h:68px; --nav-h:58px; } *{box-sizing:border-box;margin:0;padding:0} .menu-body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55; -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:6rem} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .ic{vertical-align:middle;flex:none} /* Brand tints derived from --brand so any venue colour stays usable. System rule: raw --brand is for borders, rings and shadows; --brand-solid is the fill under white text. White on the raw default brand measured 3.22:1 (fails 4.5:1); on --brand-solid it measures 4.96:1. */ .menu-body{ --brand-soft:color-mix(in srgb,var(--brand) 12%,#fff); --brand-ink:color-mix(in srgb,var(--brand) 72%,#000); --brand-solid:color-mix(in srgb,var(--brand) 78%,#000); --brand-line:color-mix(in srgb,var(--brand) 22%,transparent); /* الخلفية تتبع لون المطعم: كهرمانية باهتة لمن لم يغيّر، ولمن غيّر تصير من لونه. و8% حدٌّ مقيس لا ذوقيّ: أقتم خلفية ممكنة (لونٌ أسود) تخرج #EBEBEB، وعليها يقيس --muted الجديد 4.84:1 — فوق أرضية 4.5 مهما كان اللون المختار. ⚠️ رفعُ النسبة يُسقط نصّ الشرائح الصغيرة عند الألوان الداكنة بلا أن يشتكي أحد. */ --bg:color-mix(in srgb,var(--brand) 8%,#fff); } /* visible focus on every interactive element (was missing entirely) */ :where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- hero ---------- */ .mm-hero{position:relative;background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden} .mm-hero.has-cover{border-bottom:0} .mm-cover{position:absolute;inset:0;background-size:cover;background-position:center} .mm-cover::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(18,14,10,.40) 0%,rgba(18,14,10,.55) 45%,rgba(18,14,10,.86) 100%)} .mm-hero-in{position:relative;max-width:760px;margin:0 auto;padding:1.5rem 1.1rem 1.6rem;text-align:center; display:flex;flex-direction:column;align-items:center;gap:.4rem} .has-cover .mm-hero-in{padding-top:2.6rem;color:#fff} .mm-lang{position:absolute;top:.85rem;inset-inline-end:1.1rem;z-index:2; display:inline-flex;align-items:center;gap:.35rem;min-height:38px;padding:0 .85rem; background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-pill); font-size:.8rem;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:.2s var(--ease)} .mm-lang::after{content:"";position:absolute;inset:-3px -4px} .mm-lang:hover{transform:translateY(-1px)} .has-cover .mm-lang{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.32)} .mm-logo{width:80px;height:80px;border-radius:24px;overflow:hidden;background:#fff; box-shadow:0 12px 32px -12px rgba(0,0,0,.5);border:3px solid #fff} .mm-logo img{width:100%;height:100%;object-fit:cover} .mm-name{font-size:1.72rem;font-weight:800;letter-spacing:-.02em;line-height:1.18;text-wrap:balance} .mm-tag{color:var(--muted);font-size:.96rem;max-width:44ch;text-wrap:pretty} .has-cover .mm-tag{color:rgba(255,255,255,.84)} .mm-hero-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center; font-size:.85rem;color:var(--muted);margin-top:.35rem} .has-cover .mm-hero-meta{color:rgba(255,255,255,.86)} .mm-hero-meta .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5} /* ---------- search (sticky) ---------- */ .mm-searchbar{position:sticky;top:0;z-index:20;padding:.7rem 1.1rem; background:color-mix(in srgb,var(--bg) 86%,transparent); -webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px)} .mm-searchbar.no-nav{border-bottom:1px solid var(--line)} .mm-search{display:flex;align-items:center;gap:.5rem;max-width:calc(760px - 2.2rem);margin-inline:auto; background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-pill); padding-block:.45rem;padding-inline:1rem .5rem; box-shadow:0 2px 8px rgba(30,25,18,.05);color:var(--muted);transition:.2s var(--ease)} .mm-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} /* 16px prevents iOS from auto-zooming the whole page on focus */ .mm-search input{flex:1;min-width:0;border:0;outline:none;background:transparent; font-family:inherit;font-size:16px;color:var(--ink);padding-block:.3rem} .mm-search input::-webkit-search-cancel-button{display:none} .mm-search-x{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px; border:0;border-radius:50%;background:var(--bg);color:var(--muted);cursor:pointer; transition:.15s var(--ease)} .mm-search-x::after{content:"";position:absolute;inset:-6px} .mm-search-x:hover{background:var(--brand-soft);color:var(--brand-ink)} /* ---------- category nav (sticky under search) ---------- */ .mm-nav{position:sticky;top:var(--sb-h,68px);z-index:19;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 86%,transparent); -webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px)} .mm-nav-in{display:flex;gap:.45rem;overflow-x:auto;max-width:760px;margin:0 auto; padding:.35rem 1.1rem .65rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mm-nav-in::-webkit-scrollbar{display:none} .mm-chip{position:relative;display:inline-flex;align-items:center;white-space:nowrap;min-height:38px; padding:0 .95rem;border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line-2); font-size:.87rem;font-weight:700;color:var(--ink-soft);transition:.2s var(--ease)} .mm-chip::after{content:"";position:absolute;inset:-3px -2px} .mm-chip:hover{border-color:var(--brand);color:var(--brand-ink)} .mm-chip.active{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff; box-shadow:0 6px 16px -8px var(--brand)} /* ---------- main / sections ---------- */ .mm-main{max-width:760px;margin:0 auto;padding:.6rem 1.1rem 1rem} .mm-sec-title{font-size:1.22rem;font-weight:800;letter-spacing:-.01em;margin:1.5rem 0 .85rem; display:flex;align-items:center;gap:.5rem} .mm-sec-title svg{color:var(--brand)} .mm-cat{scroll-margin-top:calc(var(--sb-h,68px) + var(--nav-h,58px) + 10px)} /* ---------- shared card chrome ---------- */ .mi,.mf{position:relative;display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1); transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)} .mi:hover,.mf:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--line-2)} .mi-off{opacity:.62} /* media block: photo, or a brand-tinted monogram placeholder that keeps the exact same aspect ratio so the grid never goes ragged */ .mi-media,.mf-media{position:relative;overflow:hidden;background:var(--brand-soft);flex:none} .mi-media{aspect-ratio:4/3} .mf-media{aspect-ratio:16/10} .mi-media img,.mf-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .mi:hover .mi-media img,.mf:hover .mf-media img{transform:scale(1.045)} .mi-media.is-empty,.mf-media.is-empty{display:grid;place-items:center; background:radial-gradient(115% 90% at 50% 0%,color-mix(in srgb,var(--brand) 20%,#fff) 0%,var(--brand-soft) 70%)} .mi-mono{font-size:2.5rem;font-weight:800;line-height:1;color:var(--brand-ink);opacity:.24; -webkit-user-select:none;user-select:none} .mf-media .mi-mono{font-size:2.9rem} .mi-soldout{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,12,.55); color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.02em} /* ---------- item grid ---------- */ .mm-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem .7rem} @media(min-width:600px){.mm-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem .8rem}} .mi-body,.mf-body{flex:1;display:flex;flex-direction:column;gap:.28rem;padding:.7rem .75rem .75rem} .mi-name{font-size:.98rem;font-weight:700;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mi-desc{color:var(--ink-soft);font-size:.82rem;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mi-chips{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.1rem;align-items:center} /* Inside the narrow grid card four chips would stack into four rows (measured: 105px of a 397px card). One scrollable row keeps every chip reachable and gives the height back to the photo and the price. */ .mi .mi-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch} .mi .mi-chips::-webkit-scrollbar{display:none} .mi .mi-tag,.mi .mi-meta{flex:none} .mi-tag{display:inline-flex;align-items:center;gap:.18rem;font-size:.68rem;font-weight:700; padding:.16rem .48rem;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink)} .mi-tag.tag-new{background:#E4F3EC;color:#276B4D} .mi-tag.tag-popular{background:#FEF1E0;color:#8A620A} .mi-tag.tag-vegan,.mi-tag.tag-vegetarian{background:#E7F4E7;color:#2A6E2D} .mi-tag.tag-glutenfree{background:#EEF0FB;color:#3F49A6} .mi-tag.tag-spicy{background:#FBE9E7;color:#A93226} .mi-meta{font-size:.68rem;color:var(--muted);background:var(--bg);border:1px solid var(--line); padding:.16rem .48rem;border-radius:var(--r-pill);font-weight:600} .mi-note-chip{color:var(--brand-ink);background:var(--brand-soft);border-color:transparent} /* price + add button share one row when the card is wide enough, and stack (button full width) when it is not — driven by width, not by a breakpoint */ .mi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .5rem;margin-top:auto;padding-top:.6rem} .mi-price{display:flex;align-items:baseline;gap:.35rem;flex:1 1 auto;min-width:0} .mi-now{font-weight:800;color:var(--brand-ink);font-size:1rem;white-space:nowrap;unicode-bidi:isolate} .mi-was{font-size:.74rem;color:var(--muted);text-decoration:line-through;white-space:nowrap;unicode-bidi:isolate} .mm-noresults{text-align:center;color:var(--muted);padding:2.5rem 1rem;font-weight:600} /* ---------- featured carousel ---------- */ .mm-featured{margin-top:.4rem} .mm-fscroll{display:flex;gap:.75rem;overflow-x:auto;padding:.2rem .15rem 1.1rem; scroll-snap-type:x proximity;scroll-padding-inline:.15rem;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mm-fscroll::-webkit-scrollbar{display:none} .mf{flex:0 0 220px;scroll-snap-align:start} .mf-body{padding:.65rem .7rem .7rem} /* ---------- text-only menus (venue has no item photos at all) ---------- display:contents rather than display:none, so the "sold out" marker inside the media block survives and can be restyled as a plain chip. */ .menu-nomedia .mi-media,.menu-nomedia .mf-media, .menu-nomedia .mi-media.is-empty,.menu-nomedia .mf-media.is-empty{display:contents;background:none} /* the monogram is redundant here; the img guard is defensive only — PHP adds this class solely when the venue has no item photos at all */ .menu-nomedia .mi-mono,.menu-nomedia .mi-media img,.menu-nomedia .mf-media img{display:none} .menu-nomedia .mm-items{grid-template-columns:minmax(0,1fr);gap:.6rem} @media(min-width:600px){.menu-nomedia .mm-items{grid-template-columns:repeat(2,minmax(0,1fr))}} .menu-nomedia .mi{border-inline-start:3px solid var(--brand-soft)} .menu-nomedia .mi-body,.menu-nomedia .mf-body{padding:.85rem .95rem;gap:.32rem} .menu-nomedia .mi .mi-chips{flex-wrap:wrap;overflow:visible} .menu-nomedia .mi-name{-webkit-line-clamp:3;font-size:1.02rem} .menu-nomedia .mi-desc{-webkit-line-clamp:3;font-size:.85rem} .menu-nomedia .mf{flex-basis:210px} .menu-nomedia .mi-soldout{position:static;display:inline-flex;align-self:flex-start; margin:.85rem .95rem -.25rem;padding:.14rem .55rem;background:transparent;color:var(--muted); border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:.7rem;font-weight:700;letter-spacing:0} /* ---------- ordering: add control ---------- */ .mi-add{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35rem; flex:1 1 auto;min-width:5rem;height:var(--add-h,36px);padding:0 .8rem;border-radius:var(--r-pill); border:1.5px solid var(--brand-line);background:var(--brand-soft);color:var(--brand-ink); font-family:inherit;font-size:.85rem;font-weight:700;line-height:1;letter-spacing:-.01em; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .18s var(--ease),color .18s var(--ease), border-color .18s var(--ease),transform .12s var(--ease)} /* 44px touch target without a 44px visual footprint */ .mi-add::after{content:"";position:absolute;inset:-4px -2px} .mi-add svg{flex:none} .mi-add:hover{border-color:var(--brand)} .mi-add:active{transform:scale(.96)} /* in-order state: brand fill + a corner count badge. The badge is absolutely positioned so the pill never changes width → zero layout shift. */ .mi-add[data-qty]{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff} .mi-add-n{display:none;position:absolute;top:-7px;inset-inline-end:-6px;min-width:20px;height:20px; padding:0 5px;border-radius:var(--r-pill);background:var(--surface);color:var(--brand-ink); box-shadow:0 0 0 2px var(--surface),0 2px 6px -2px rgba(30,25,18,.4); font-size:.72rem;font-weight:800;line-height:20px;text-align:center; direction:ltr;unicode-bidi:isolate} .mi-add[data-qty] .mi-add-n{display:block} .mi-add.bump{animation:oBump .34s var(--ease)} @keyframes oBump{35%{transform:scale(1.07)}} /* ---------- footer ---------- */ .mm-foot{max-width:760px;margin:1.5rem auto 0;padding:1.7rem 1.1rem;text-align:center; border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:1rem} .mm-contact{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center} .mm-contact a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 1.1rem; background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-pill); font-weight:700;font-size:.88rem;transition:.2s var(--ease)} .mm-contact a:hover{border-color:var(--brand);color:var(--brand-ink);transform:translateY(-2px)} .mm-social{display:flex;gap:.55rem} .mm-soc{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface); border:1.5px solid var(--line-2);color:var(--ink-soft);transition:.2s var(--ease)} .mm-soc:hover{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff;transform:translateY(-2px)} .mm-powered{font-size:.8rem;color:var(--muted);font-weight:600;margin-top:.2rem;transition:.2s var(--ease)} .mm-powered-ic{width:16px;height:16px;opacity:.85;display:inline-block;vertical-align:-3px;margin-inline-end:.35rem} .mm-powered:hover{color:var(--brand-ink)} /* ---------- ordering: floating bar ---------- */ /* pointer-events:none keeps this ~90px strip from swallowing taps on the last cards of the menu; only the button itself is clickable. */ .ocart-bar{position:fixed;bottom:0;inset-inline:0;z-index:50;pointer-events:none; padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent 0%, color-mix(in srgb,var(--bg) 88%,transparent) 38%,var(--bg) 72%)} .ocart-open{pointer-events:auto;display:flex;align-items:center;gap:.7rem;width:100%;max-width:560px; margin:0 auto;background:var(--brand-solid);color:#fff;border:0;border-radius:var(--r-pill); padding:0 1.2rem;min-height:52px;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:800; box-shadow:0 14px 34px -10px var(--brand);transition:.2s var(--ease)} .ocart-open:hover{transform:translateY(-2px)} .ocart-open:active{transform:scale(.985)} .ocart-bar:not([hidden]) .ocart-open{animation:oBarUp .4s var(--ease)} @keyframes oBarUp{from{transform:translateY(130%);opacity:0}to{transform:none;opacity:1}} .ocart-count{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px; border-radius:var(--r-pill);background:rgba(255,255,255,.25);font-size:.9rem; direction:ltr;unicode-bidi:isolate} .ocart-lbl{flex:1;text-align:start} .ocart-total{font-size:.95rem;opacity:.95;white-space:nowrap;unicode-bidi:isolate} /* ---------- ordering: bottom sheet ---------- */ .osheet{position:fixed;inset:0;z-index:60;display:none} .osheet.open{display:block} .osheet-back{position:absolute;inset:0;background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .osheet-card{position:absolute;bottom:0;inset-inline:0;max-width:640px;margin:0 auto;background:var(--surface); border-radius:24px 24px 0 0;max-height:88vh;max-height:88dvh;overflow-y:auto; padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow:0 -18px 50px -18px rgba(20,16,12,.4)} .osheet.open .osheet-card{animation:oUp .35s var(--ease)} @keyframes oUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}} .osheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem} .osheet-head h3{font-size:1.2rem;font-weight:800} .osheet-x{position:relative;background:var(--bg);border:0;width:36px;height:36px;border-radius:50%; font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;transition:.15s var(--ease)} .osheet-x::after{content:"";position:absolute;inset:-4px} .osheet-x:hover{background:var(--brand-soft);color:var(--brand-ink)} .ocart-lines{display:flex;flex-direction:column} .oline{display:flex;align-items:center;gap:.8rem;padding:.65rem 0;border-bottom:1px dashed var(--line-2)} .oline-name{flex:1;font-weight:700;font-size:.95rem;min-width:0} .oline-qty{display:flex;align-items:center;gap:.5rem} .oline-qty span{min-width:1.6ch;text-align:center;font-weight:800;direction:ltr;unicode-bidi:isolate} .oqty-btn{position:relative;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2); background:var(--surface);color:var(--ink);font-size:1.05rem;font-weight:800;cursor:pointer; display:grid;place-items:center;transition:.15s var(--ease)} .oqty-btn::after{content:"";position:absolute;inset:-5px} .oqty-btn:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)} .oline-price{font-weight:800;color:var(--brand-ink);font-size:.88rem;white-space:nowrap; min-width:64px;text-align:end;unicode-bidi:isolate} .ocart-empty{text-align:center;color:var(--muted);padding:1.6rem 0;font-weight:600} .osheet-total{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;font-weight:700} .osheet-total b{font-size:1.15rem;color:var(--brand-ink);unicode-bidi:isolate} .oform{display:flex;flex-direction:column;gap:.8rem} .oform-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} @media(max-width:480px){.oform-grid{grid-template-columns:1fr}} .ofield{display:flex;flex-direction:column;gap:.35rem} .ofield>span{font-size:.82rem;font-weight:700;color:var(--ink-soft)} .ofield>span em{font-style:normal;color:var(--muted);font-weight:500} /* 16px: anything smaller triggers iOS auto-zoom on focus */ .ofield input{font-family:inherit;font-size:16px;color:var(--ink);padding:.7rem .8rem;min-height:46px; border:1.5px solid var(--line-2);border-radius:var(--r-field);background:var(--surface); outline:none;transition:.18s var(--ease)} .ofield input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .opay{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .opay-opt{position:relative;cursor:pointer} .opay-opt input{position:absolute;opacity:0;width:1px;height:1px} .opay-opt span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem; border:1.5px solid var(--line-2);border-radius:var(--r-field);font-weight:700;font-size:.88rem; color:var(--ink-soft);transition:.15s var(--ease);text-align:center} .opay-opt input:checked+span{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)} .opay-opt input:focus-visible+span{outline:2px solid var(--brand-ink);outline-offset:2px} .osubmit{border:0;border-radius:var(--r-pill);background:var(--brand-solid);color:#fff;font-family:inherit; font-weight:800;font-size:1rem;min-height:52px;padding:0 1.2rem;cursor:pointer; box-shadow:0 10px 24px -8px var(--brand);transition:.2s var(--ease)} .osubmit:hover{transform:translateY(-2px)} .osubmit:disabled{opacity:.6;cursor:wait;transform:none} .oerr{background:#FBEAE8;color:#A93226;border-radius:var(--r-field);padding:.7rem .9rem; font-weight:600;font-size:.88rem} .odone{text-align:center;padding:1.4rem 0 .6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem} .odone-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#E4F3EC;color:#276B4D} .odone h3{font-size:1.25rem;font-weight:800} .odone p{color:var(--ink-soft);max-width:36ch} .odone-new{margin-top:.4rem;min-width:200px} /* ---------- not found ---------- */ .mm-notfound{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1rem;text-align:center;padding:2rem;font-family:var(--font)} .mm-notfound h1{font-size:1.6rem;font-weight:800} .mm-home{background:var(--brand-solid);color:#fff;padding:.8rem 1.4rem;border-radius:var(--r-pill);font-weight:700} /* ---------- narrow phones (320–359) ---------- */ @media(max-width:359px){ .mm-items{gap:.6rem .55rem} .mi-body{padding:.6rem .6rem .65rem} .mi-name{font-size:.92rem} .mi-desc{font-size:.78rem} .mi-now{font-size:.94rem} .mi-add{padding:0 .65rem;font-size:.82rem;min-width:4.5rem} .mf{flex-basis:200px} } /* ---------- motion ---------- */ @media (prefers-reduced-motion:no-preference){ .mm-cat,.mm-featured{animation:mmIn .6s var(--ease) both} @keyframes mmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .mi:hover,.mf:hover,.mm-contact a:hover,.mm-soc:hover, .ocart-open:hover,.osubmit:hover,.mm-lang:hover{transform:none} .mi:hover .mi-media img,.mf:hover .mf-media img{transform:none} }