/* Single-page storefront ("Menu Mobile Mockup") design. Loaded in the by s/wrapper.php BEFORE the tenant's per-store custom CSS, so a tenant's custom CSS (and their brand fonts/colors) can override any of this at equal specificity. Everything is scoped to .vm-store so it never leaks into the other storefront pages (menu / category / item). */ .vm-store{--s-bg:#f7f4f4;--s-card:#fff;--s-ink:#1a1616;--s-muted:#8a8080;--s-muted-2:#6b6161;--s-accent:#d01d21;--s-accent-hover:#ac0311;--s-accent-soft:rgba(208,29,33,.1);--s-h:"Sora","Manrope",system-ui,sans-serif;--s-b:"Manrope",system-ui,sans-serif;background:var(--s-bg);color:var(--s-ink);font-family:var(--s-b);min-height:100vh;} .vm-store *{box-sizing:border-box;} .vm-store a{text-decoration:none;color:inherit;} .vm-store .s-wrap{max-width:620px;margin:0 auto;} .vm-store h1,.vm-store h2,.vm-store h3{font-family:var(--s-h);margin:0;} /* header */ .vm-store .s-head{padding:18px 20px 4px;display:flex;flex-direction:column;gap:12px;} .vm-store .s-head-top{display:flex;justify-content:space-between;align-items:center;gap:12px;} .vm-store .s-brand{display:flex;align-items:center;gap:12px;min-width:0;} /* When a logo is uploaded it IS the identity — no separate title next to it. Natural aspect ratio (never cropped), capped in height and width. */ .vm-store .s-logo-img{height:48px;width:auto;max-width:58vw;object-fit:contain;object-position:left center;display:block;flex:none;} .vm-store .s-name{font-family:var(--s-h);font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;min-width:0;} /* the address + open/closed line: full width, WRAPS instead of truncating, dot inline */ .vm-store .s-place{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12px;color:var(--s-muted);line-height:1.45;} /* open/closed as a dot: green pulsing = open now, grey = closed (+ "po X val." hint) */ .vm-store .s-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin:-2px 1px 0 1px;} .vm-store .s-dot-open{background:#22c55e;animation:s-pulse 1.8s ease-out infinite;} .vm-store .s-dot-closed{background:#b9b0b0;} .vm-store .s-reopen{color:var(--s-muted);font-weight:600;} @keyframes s-pulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.45);} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} } @media(prefers-reduced-motion: reduce){ .vm-store .s-dot-open{animation:none;} } .vm-store .s-cart{position:relative;border:1.5px solid rgba(26,22,22,.12);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;} .vm-store .s-cart-count{background:var(--s-accent);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 5px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;} /* search + Vegi share one EXPLICIT height — not min-height, not stretch — so nothing (emoji line metrics, inherited button styles, a stale rule on one of them) can ever make them differ again. box-sizing is border-box, so 48px includes both 1.5px borders. */ .vm-store .s-tools{display:flex;gap:8px;align-items:flex-start;} .vm-store .s-search{flex:1;min-width:0;height:48px;background:var(--s-card);border:1.5px solid rgba(26,22,22,.12);border-radius:14px;padding:0 14px;display:flex;align-items:center;gap:8px;color:var(--s-muted);} /* mockup spec: 🌿 Vegi — white + subtle border when off, accent fill + white text when on */ .vm-store .s-vegi{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:48px;line-height:1;margin:0;border-radius:14px;padding:0 16px;font-size:13px;font-weight:700;cursor:pointer;background:var(--s-card);color:var(--s-ink);border:1.5px solid rgba(26,22,22,.12);white-space:nowrap;user-select:none;font-family:var(--s-b);transition:background .15s,color .15s,border-color .15s;} .vm-store .s-vegi.on{background:var(--s-accent);color:#fff;border-color:var(--s-accent);} /* 16px: anything smaller makes iOS Safari zoom on focus and leaves the page shifted sideways */ .vm-store .s-search input{border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;line-height:1.2;color:var(--s-ink);width:100%;min-width:0;padding:0;height:100%;} /* sticky category nav */ .vm-store .s-nav{position:sticky;top:0;z-index:10;background:rgba(253,252,252,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(26,22,22,.05);} .vm-store .s-nav-inner{max-width:620px;margin:0 auto;padding:12px 20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;} .vm-store .s-nav-inner::-webkit-scrollbar{display:none;} .vm-store .s-chip{flex-shrink:0;font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;background:#f2eeee;color:var(--s-ink);border:0;font-family:var(--s-b);white-space:nowrap;transition:background .15s,color .15s;} .vm-store .s-chip.active{background:var(--s-ink);color:#fff;} /* sections + cards */ .vm-store .s-body{padding:8px 20px 24px;display:flex;flex-direction:column;gap:22px;} .vm-store .s-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;} .vm-store .s-sec-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em;} .vm-store .s-sec-count{font-size:12px;font-weight:600;color:var(--s-muted);} .vm-store .s-items{display:flex;flex-direction:column;gap:12px;} /* Card: [image] [name + description] [price]. Keeping the price in its own right-hand column removes the dead space that appeared under short names and keeps every card the same compact height on a phone. */ /* color is explicit: item cards are