/* Cart / checkout — SAME design system as the single-page menu. The cart view wraps its content in .vm-store (see s/cart/new-york/index.php), so it inherits the menu's tokens (--s-bg, --s-accent, --s-h, ...) and the .s-head header. Everything here restyles the cart's existing JS-generated Bootstrap markup to match: a tenant's custom CSS overriding --s-accent recolors BOTH pages at once. Loaded in the by s/wrapper.php BEFORE the tenant's per-store custom CSS, so tenant brandbook CSS can override any of this at equal specificity. iOS AUTO-ZOOM: Safari zooms whenever a focused form control computes < 16px, so every text entry control on the cart is forced to 16px. Do not lower this. */ /* Horizontal clipping (iOS auto-zoom used to leave the page slid sideways) WITHOUT turning into a scroll container: overflow-x:hidden on body made body the scroll container for everything inside it while the viewport did the actual scrolling, which silently disabled position:sticky for the menu's category bar. clip clips but never scrolls. */ html { overflow-x: hidden; } body { overflow-x: clip; } /* The cart lives inside .s-wrap.s-body (620px centered column, same as the menu). Bootstrap utility classes may be missing from the storefront stylesheet, so nothing here relies on .container/.col-*. */ .vm-cart{width:100%;} .vm-cart .row{margin-left:0;margin-right:0;max-width:100%;} .vm-cart img,.vm-cart input,.vm-cart select,.vm-cart textarea{max-width:100%;} /* iOS-style centered page title */ .vm-cart .s-sec-head{justify-content:center;} .vm-cart .s-sec-head h2{text-align:center;} /* readable secondary text — same muted tones as the menu cards */ .vm-cart .text-muted{color:var(--s-muted-2,#6b6161) !important;font-size:14px;} .vm-cart small.text-muted{font-size:13px;} /* item rows -> the menu's card look; the card is a clipping frame for the swipe row */ .vm-cart [id^="item_"]{ position:relative; overflow:hidden; background:var(--s-accent,#d01d21) !important; /* shows through as the delete zone */ border-radius:18px !important; padding:0 !important; margin:0 0 12px 0 !important; box-shadow:0 2px 12px rgba(26,22,22,.05); } /* the red delete zone revealed by swiping left — it IS the .item-delete element. It carries its own accent background: the generic .bg-gray-50 white rule wins over the container's background, so the container cannot be relied on to show through red. */ .vm-cart .swipe-del{ position:absolute;top:0;right:0;bottom:0;width:132px; display:flex;align-items:center;justify-content:flex-end; padding-right:32px; background:var(--s-accent,#d01d21); color:#fff;cursor:pointer; /* invisible until a swipe engages — otherwise the clip antialiasing at the card's rounded corners lets a red hairline bleed through the closed row */ opacity:0; transition:opacity .15s; } .vm-cart .swipe-item.swipe-active .swipe-del{opacity:1;} .vm-cart .swipe-del .svg-sm{color:#fff;width:22px;height:22px;} .vm-cart .swipe-del svg{width:22px;height:22px;} /* the sliding content; 1px wider than the card so the red zone can never peek through as a sub-pixel hairline along the right edge while the row is closed */ .vm-cart .swipe-row{ position:relative; background:var(--s-card,#fff); padding:12px 13px 12px 12px; margin-right:-1px; touch-action:pan-y; /* vertical page scroll stays native; horizontal is ours */ will-change:transform; user-select:none; -webkit-user-select:none; } .vm-cart [id^="item_"] a{font-family:var(--s-h);font-weight:700;color:var(--s-ink,#1a1616) !important;font-size:15px;line-height:1.25;} .vm-cart [id^="item_"] a:hover{color:var(--s-accent,#d01d21) !important;} /* cart item per the mockup: [image] [name + note + line total] [− qty + pill] */ .vm-cart .ci{display:flex;gap:12px;align-items:center;} .vm-cart .ci-img{width:64px;height:64px;border-radius:14px;flex:none;background:repeating-linear-gradient(45deg,#e9e4e4,#e9e4e4 5px,#f2eeee 5px,#f2eeee 10px) center/cover;background-size:cover;background-position:center;} .vm-cart .ci-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;} .vm-cart .ci-name{display:block;font-size:14px;line-height:1.3;overflow-wrap:break-word;} .vm-cart .ci-extras{display:flex;flex-direction:column;gap:1px;font-size:11px;} .vm-cart .ci-extras small{font-size:11px !important;} .vm-cart .ci-line-total{font-family:var(--s-h);font-size:14px;font-weight:800;color:var(--s-accent,#d01d21);} /* − / + pill (mockup): soft pill, white minus circle, black plus circle */ .vm-cart .ci-qty{display:inline-flex;align-items:center;gap:6px;flex:none;background:#f7f4f4;border-radius:999px;padding:5px 8px;border:0;} .vm-cart .ci-qty-btn{width:30px;height:30px;border-radius:50%;border:0;font-size:16px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-appearance:none;appearance:none;user-select:none;} .vm-cart .ci-minus{background:#fff;color:var(--s-ink,#1a1616);box-shadow:0 1px 4px rgba(26,22,22,.1);} .vm-cart .ci-plus{background:var(--s-ink,#1a1616);color:#fff;} .vm-cart .ci-qty-btn:active{transform:scale(.94);} .vm-cart .ci-qty input.item-quantity{ width:30px !important;min-width:0 !important;height:30px;min-height:0 !important; border:0 !important;border-radius:0 !important;padding:0 !important;margin:0; text-align:center !important;font-size:16px !important; /* 16px: no iOS focus zoom */ background:transparent;color:var(--s-ink,#1a1616);font-family:var(--s-h);font-weight:800; -moz-appearance:textfield;appearance:textfield; } .vm-cart .ci-qty input::-webkit-inner-spin-button, .vm-cart .ci-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} /* removing an item: slide left + fade + collapse (JS sets max-height first, then adds .removing; the actual cart mutation happens after the animation) */ .vm-cart .swipe-item.removing{ opacity:0; transform:translateX(-48px); max-height:0 !important; margin-bottom:0 !important; pointer-events:none; transition:opacity .28s ease, transform .28s ease, max-height .3s ease .06s, margin .3s ease .06s; } /* remove-item confirmation dialog */ .co-confirm-bd{position:fixed;inset:0;z-index:1000;background:rgba(26,22,22,.45);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s;} .co-confirm-bd.open{opacity:1;pointer-events:auto;} .co-confirm{background:#fdfcfc;border-radius:22px;padding:24px 22px 20px;max-width:320px;width:100%;text-align:center;display:flex;flex-direction:column;gap:6px;box-shadow:0 24px 60px rgba(26,22,22,.3);transform:scale(.92);transition:transform .2s;} .co-confirm-bd.open .co-confirm{transform:scale(1);} .co-confirm-title{font-family:var(--s-h);font-size:16px;font-weight:800;color:var(--s-ink,#1a1616);line-height:1.35;} .co-confirm-name{font-size:13px;color:var(--s-muted-2,#6b6161);min-height:1em;} .co-confirm-actions{display:flex;gap:10px;margin-top:14px;} .co-confirm-actions button{flex:1;border:0;border-radius:14px;padding:13px;font-family:var(--s-h);font-weight:700;font-size:14px;cursor:pointer;-webkit-appearance:none;appearance:none;} .co-confirm-cancel{background:#f2eeee;color:var(--s-ink,#1a1616);} .co-confirm-yes{background:var(--s-accent,#d01d21);color:#fff;} .co-confirm-yes:active{background:var(--s-accent-hover,#ac0311);} /* summary card (mockup): subtotal / tips / delivery / total */ .vm-cart .co-sum{background:var(--s-card,#fff);border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 12px rgba(26,22,22,.05);margin:16px 0;} .vm-cart .co-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--s-muted-2,#6b6161);} .vm-cart .co-row.d-none{display:none;} .vm-cart .co-val{font-weight:700;color:var(--s-ink,#1a1616);white-space:nowrap;} .vm-cart .co-help{display:block;font-size:11px;color:var(--s-muted,#8a8080);} .vm-cart .co-total{border-top:1px solid rgba(26,22,22,.08);padding-top:10px;display:flex;justify-content:space-between;align-items:baseline;} .vm-cart .co-total > span:first-child{font-family:var(--s-h);font-size:16px;font-weight:800;color:var(--s-ink,#1a1616);} .vm-cart .co-total #total,.vm-cart .co-total #total_with_delivery_cost{font-family:var(--s-h);font-size:22px;font-weight:800;color:var(--s-accent,#d01d21);} .vm-cart .co-total #total.d-none,.vm-cart .co-total #total_with_delivery_cost.d-none{display:none;} .vm-cart .co-total small{font-size:14px;} /* tip chips: selected = ink pill with white text (mockup) */ .vm-cart .co-tip-chips{display:flex;gap:6px;flex-wrap:wrap;} .vm-cart .co-tip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;border:0;background:#f7f4f4;color:var(--s-ink,#1a1616);font-family:var(--s-b);-webkit-appearance:none;appearance:none;transition:background .15s,color .15s;} .vm-cart .co-tip.on{background:var(--s-ink,#1a1616);color:#fff;} /* sticky order CTA (mockup): red bar with label left, total right, gradient fade above */ #cart_cta{position:fixed;left:0;right:0;bottom:0;z-index:100;padding:14px 20px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--s-bg,#f7f4f4) 65%,rgba(247,244,244,0));pointer-events:none;} #cart_cta .co-cta{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:580px;margin:0 auto;background:var(--s-accent,#d01d21);color:#fff;border:0;border-radius:18px;padding:16px 22px;cursor:pointer;font-family:var(--s-h);font-size:16px;font-weight:800;box-shadow:0 10px 28px rgba(208,29,33,.35);-webkit-appearance:none;appearance:none;} #cart_cta .co-cta:active{background:var(--s-accent-hover,#ac0311);} body.has-cart-cta .vm-cart{padding-bottom:96px;} body.has-cart-cta #cart_form [type="submit"]{display:none;} /* the item card grid: kill Bootstrap's column gutters (they pushed the image ~15px off the card edge) and center all three columns vertically */ .vm-cart [id^="item_"] .row, .vm-cart #ordering_delivery_cost .row{display:flex;flex-wrap:wrap;align-items:center;margin:0;} .vm-cart [id^="item_"] [class*="col-"], .vm-cart #ordering_delivery_cost [class*="col-"]{padding-left:0;padding-right:0;} /* prices — menu card price style; keep "18,00 EUR" on one line */ .vm-cart [id^="item_"] .font-weight-bold{font-family:var(--s-h);font-weight:800;} .vm-cart [id^="item_"] [class*="justify-content-end"]{white-space:nowrap;} .vm-cart #total .font-weight-bold, .vm-cart #total_with_delivery_cost .font-weight-bold{font-family:var(--s-h);font-size:20px;color:var(--s-accent,#d01d21);} /* total row — own flex so "Viso" and the amount are ALWAYS vertically centered on one line, independent of which Bootstrap utilities the storefront stylesheet carries */ .vm-cart .bg-primary-100{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--s-accent-soft,rgba(208,29,33,.1)) !important; border-radius:18px !important; padding:16px 18px !important; } .vm-cart .bg-primary-100 .font-weight-bold{font-family:var(--s-h);font-size:16px;} .vm-cart #total,.vm-cart #total_with_delivery_cost{display:flex;align-items:baseline;gap:5px;} .vm-cart #total.d-none,.vm-cart #total_with_delivery_cost.d-none{display:none;} /* delivery-cost row + info alerts */ .vm-cart .bg-gray-50{background:var(--s-card,#fff) !important;border-radius:18px !important;box-shadow:0 2px 12px rgba(26,22,22,.05);} .vm-cart .alert{border-radius:16px;border:0;font-size:14px;} .vm-cart .alert-info{background:var(--s-accent-soft,rgba(208,29,33,.1));color:var(--s-accent-hover,#ac0311);} /* labels — same voice as the menu section headings, scaled down */ .vm-cart label,.vm-cart .form-group > label{ font-family:var(--s-h);font-weight:700;font-size:14px;color:var(--s-ink,#1a1616); margin-bottom:6px;display:block; } /* ---- form controls: 16px kills the iOS focus zoom; metrics match the menu's search field ---- */ .vm-cart .form-control, .vm-cart .form-control-sm, .vm-cart .custom-select, .vm-cart input[type="text"], .vm-cart input[type="number"], .vm-cart input[type="tel"], .vm-cart input[type="email"], .vm-cart input[type="search"], .vm-cart select, .vm-cart textarea{ font-size:16px !important; /* iOS zooms below 16px — do not lower this */ line-height:1.4; height:auto; min-height:48px; /* same height as the menu's search field */ padding:12px 14px; border-radius:14px; /* same radius as the menu's search field */ border:1.5px solid rgba(26,22,22,.12); background:var(--s-card,#fff); color:var(--s-ink,#1a1616); font-family:var(--s-b); max-width:100%; } .vm-cart textarea,.vm-cart textarea.form-control{min-height:96px;} .vm-cart .form-control:focus,.vm-cart .custom-select:focus,.vm-cart textarea:focus{ border-color:var(--s-accent,#d01d21); box-shadow:0 0 0 .2rem var(--s-accent-soft,rgba(208,29,33,.15)); outline:0; } /* ---- buttons: exactly the menu's .s-btn metrics ---- */ .vm-cart .btn{ font-family:var(--s-h);font-weight:700;font-size:15px; border-radius:16px;padding:14px 18px;min-height:52px; display:inline-flex;align-items:center;justify-content:center; } .vm-cart .btn-block{display:flex;width:100%;} .vm-cart .btn-block+.btn-block{margin-top:10px;} /* unselected option = the menu sheet's neutral button (.s-btn-close) */ .vm-cart .btn-outline-primary{ border:0;background:#f2eeee;color:var(--s-ink,#1a1616); } .vm-cart .btn-outline-primary:hover{background:#e9e4e4;color:var(--s-ink,#1a1616);} /* selected option / primary action = the menu sheet's accent button (.s-btn-cart) */ .vm-cart .btn-outline-primary.active, .vm-cart .btn-outline-primary:not(:disabled):not(.disabled).active, .vm-cart .btn-check:checked+.btn-outline-primary{ background:var(--s-accent,#d01d21) !important;color:#fff !important; box-shadow:0 6px 18px rgba(208,29,33,.26); } .vm-cart .btn-primary{ background:var(--s-accent,#d01d21);border:0;color:#fff; box-shadow:0 8px 24px rgba(208,29,33,.28); } .vm-cart .btn-primary:hover,.vm-cart .btn-primary:focus{background:var(--s-accent-hover,#ac0311);color:#fff;} /* delete item */ /* empty-cart / order-done: minimal centered state (mockup — no card box). The size cap matters: the SVG has no intrinsic size and would fill the viewport without it. */ .vm-cart .vm-cart-state{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:48px 20px;gap:8px; } .vm-cart .vm-cart-state-img{width:100%;max-width:170px;height:auto;margin-bottom:6px;opacity:.9;} .vm-cart .co-check{width:72px;height:72px;border-radius:50%;background:var(--s-accent,#d01d21);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:6px;} .vm-cart .co-btn-outline{background:transparent;border:1.5px solid rgba(26,22,22,.14) !important;color:var(--s-ink,#1a1616);box-shadow:none;} .vm-cart .co-btn-outline:hover{background:#f2eeee;color:var(--s-ink,#1a1616);} .vm-cart .vm-cart-state h2,.vm-cart #empty_cart h2,.vm-cart #order_done h2{font-family:var(--s-h);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--s-ink,#1a1616) !important;margin:0;} .vm-cart .vm-cart-state p,.vm-cart #empty_cart p,.vm-cart #order_done p{color:var(--s-muted-2,#6b6161) !important;font-size:14px;margin:0;max-width:38ch;} .vm-cart .vm-cart-state .btn{margin-top:18px;min-width:220px;} /* ─── dark mode (cart) — tokens come from .vm-store; these are the hard-coded light values ─── */ [data-theme-style="dark"] .vm-cart .ci-qty{background:#2a2424;} [data-theme-style="dark"] .vm-cart .ci-minus{background:#3a3232;box-shadow:none;} [data-theme-style="dark"] .vm-cart .ci-plus{background:var(--s-ink);color:#141212;} [data-theme-style="dark"] .vm-cart .ci-img{background-image:repeating-linear-gradient(45deg,#2a2424,#2a2424 5px,#332c2c 5px,#332c2c 10px);} [data-theme-style="dark"] .vm-cart .co-sum, [data-theme-style="dark"] .vm-cart [id^="item_"]{box-shadow:0 2px 12px rgba(0,0,0,.35);} [data-theme-style="dark"] .vm-cart .co-total{border-top-color:rgba(255,255,255,.1);} [data-theme-style="dark"] .vm-cart .co-tip{background:#2a2424;} [data-theme-style="dark"] .vm-cart .co-tip.on{background:var(--s-ink);color:#141212;} [data-theme-style="dark"] .co-confirm-bd{background:rgba(0,0,0,.66);} [data-theme-style="dark"] .co-confirm{background:#1e1a1a;box-shadow:0 24px 60px rgba(0,0,0,.6);} [data-theme-style="dark"] .co-confirm-cancel{background:#2a2424;} [data-theme-style="dark"] #cart_cta{background:linear-gradient(to top,#141212 65%,rgba(20,18,18,0));} [data-theme-style="dark"] .vm-cart .btn-outline-primary{background:#2a2424;} [data-theme-style="dark"] .vm-cart .btn-outline-primary:hover{background:#332c2c;} [data-theme-style="dark"] .vm-cart .co-btn-outline{border-color:rgba(255,255,255,.18) !important;} [data-theme-style="dark"] .vm-cart .co-btn-outline:hover{background:#2a2424;} [data-theme-style="dark"] .vm-cart .form-control, [data-theme-style="dark"] .vm-cart .custom-select, [data-theme-style="dark"] .vm-cart input[type="text"], [data-theme-style="dark"] .vm-cart input[type="number"], [data-theme-style="dark"] .vm-cart input[type="tel"], [data-theme-style="dark"] .vm-cart input[type="email"], [data-theme-style="dark"] .vm-cart textarea{border-color:rgba(255,255,255,.14);} [data-theme-style="dark"] .vm-cart .swipe-row{background:var(--s-card);}