/*
 * Zad. Online storefront — the customer ordering site.
 *
 * Brand Kit 1.0: Cream ground, Ink text, Rubik only, radii 8 / 12 / 20 / full,
 * touch targets 44+, borders separate and shadows only lift what floats.
 * The restaurant leads: its colour (--zs-brand, from theme_hex) carries the
 * header, primary buttons and the basket bar; ZAD appears once, as
 * "Powered by z." in the footer.
 *
 * Plain CSS on purpose: the app's Tailwind build is committed and not rebuilt
 * on deploy, so new storefront styles live here, scoped under body.zs, and
 * cannot leak into the admin, POS or kiosk.
 */

.zs {
    --zs-cream: #FDF6F1;
    --zs-paper: #FCFBFA;
    --zs-white: #FFFFFF;
    --zs-ink: #10241D;
    --zs-sand-100: #F5ECE4;
    --zs-sand-200: #E9DDD2;
    --zs-sand-300: #D6C8BB;
    --zs-stone-500: #857D75;
    --zs-stone-600: #6B645D;
    --zs-stone-800: #3A3531;
    --zs-green-50: #EDF8F3;
    --zs-green-100: #D8F0E6;
    --zs-green-600: #057A5A;
    --zs-green-800: #0A4D3B;
    --zs-saffron: #F0A830;
    --zs-danger: #B93524;
    --zs-r-8: 8px;
    --zs-r-12: 12px;
    --zs-r-20: 20px;
    --zs-font: Rubik, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;

    background: var(--zs-cream);
    color: var(--zs-ink);
    font-family: var(--zs-font);
    font-size: 16px;
    line-height: 24px;
}
.zs[dir="rtl"], [dir="rtl"] .zs, .zs [dir="rtl"] { line-height: 28px; }
.zs .zs-num { font-variant-numeric: tabular-nums; }
.zs .zs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zs .zs-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .zs .zs-flip, .zs[dir="rtl"] .zs-flip, .zs [dir="rtl"] .zs-flip { transform: scaleX(-1); }

/* Page frame: no boxed shadow, the cream runs edge to edge. */
.zs .zs-frame { max-width: 1240px; margin: 0 auto; min-height: 100svh; position: relative; z-index: 10; }
.zs .zs-wrap { padding-inline: 16px; }
@media (min-width: 640px) { .zs .zs-wrap { padding-inline: 24px; } }

/* ---------- Header: the restaurant's band ---------- */
.zs .zs-band { background: var(--zs-brand); color: var(--zs-on-brand); }
.zs .zs-band-inner { max-width: 1240px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; }
@media (min-width: 640px) { .zs .zs-band-inner { padding: 10px 24px; } }
.zs .zs-logo { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.zs .zs-logo-img { width: 40px; height: 40px; border-radius: var(--zs-r-12); background: var(--zs-cream); object-fit: contain; padding: 4px; flex: none; }
.zs .zs-logo-name { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Slim band on wide screens: a 44px logo, 40px controls (phones keep 44px touch targets). */
@media (min-width: 1024px) {
    .zs .zs-logo-img { width: 44px; height: 44px; }
    .zs .zs-logo-name { font-size: 20px; line-height: 26px; }
    body.zs .zs-band-btn, body.zs .zs-band .zs-lang { min-height: 40px; min-width: 40px; }
    body.zs .zs-band-btn.zs-icon-only { width: 40px; }
    body.zs .zs-band-nav a { min-height: 40px; }
    body.zs .zs-band button.bg-skin-base { min-height: 40px; }
}
/* Call Waiter (x-button) sits in the band: an outlined pill like the band's other buttons. */
body.zs .zs-band button.bg-skin-base { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--zs-on-brand) 60%, transparent); background: transparent; color: var(--zs-on-brand); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.zs .zs-band button.bg-skin-base:hover { background: color-mix(in srgb, var(--zs-on-brand) 14%, transparent); filter: none; }
.zs .zs-band-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.zs .zs-band-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--zs-on-brand) 60%, transparent); background: transparent; color: var(--zs-on-brand); font: 500 15px/20px var(--zs-font); text-decoration: none; cursor: pointer; position: relative; }
.zs .zs-band-btn.zs-icon-only { padding: 0; width: 44px; }
.zs .zs-band-btn.zs-solid { background: var(--zs-white); color: var(--zs-ink); border-color: var(--zs-white); font-weight: 600; }
.zs .zs-band-btn:focus-visible, .zs .zs-btn:focus-visible, .zs .zs-pill:focus-visible, .zs .zs-seg button:focus-visible, .zs .zs-add:focus-visible { outline: 3px solid var(--zs-ink); outline-offset: 2px; }
.zs .zs-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--zs-white); color: var(--zs-ink); font: 600 12px/20px var(--zs-font); text-align: center; border: 2px solid var(--zs-brand); }
.zs .zs-band-nav { display: none; gap: 4px; }
@media (min-width: 1024px) { .zs .zs-band-nav { display: flex; } }
.zs .zs-band-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--zs-r-8); color: var(--zs-on-brand); text-decoration: none; font-weight: 500; opacity: .9; }
.zs .zs-band-nav a[aria-current="page"], .zs .zs-band-nav a:hover { opacity: 1; background: color-mix(in srgb, var(--zs-on-brand) 14%, transparent); }

/* Language switcher (shared Livewire component): a band button in the header, a quiet one in the footer. */
.zs .zs-band .zs-lang { min-height: 44px; min-width: 44px; padding: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--zs-on-brand) 60%, transparent); color: var(--zs-on-brand); background: transparent; }
.zs .zs-band .zs-lang:hover { background: color-mix(in srgb, var(--zs-on-brand) 14%, transparent); }
.zs .zs-footer .zs-lang { min-height: 44px; min-width: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--zs-sand-200); background: var(--zs-white); color: var(--zs-stone-800); }
.zs .zs-wide-only { display: none; }
@media (min-width: 1024px) { .zs .zs-wide-only { display: block; } }

/* Account / more menu (drop-down from the band) */
.zs .zs-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; width: 240px; background: var(--zs-white); color: var(--zs-ink); border: 1px solid var(--zs-sand-200); border-radius: var(--zs-r-12); box-shadow: 0 12px 32px rgba(16, 36, 29, .16); padding: 6px; }
.zs .zs-menu a, .zs .zs-menu .zs-menu-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--zs-r-8); color: var(--zs-ink); text-decoration: none; font-weight: 500; }
.zs .zs-menu a:hover { background: var(--zs-sand-100); }
.zs .zs-menu hr { border: 0; border-top: 1px solid var(--zs-sand-200); margin: 6px 0; }
.zs .zs-menu .zs-menu-danger { color: var(--zs-danger); }

/* ---------- Building blocks ---------- */
.zs .zs-card { background: var(--zs-white); border: 1px solid var(--zs-sand-200); border-radius: var(--zs-r-20); }
.zs .zs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--zs-r-12); border: 0; font: 600 16px/24px var(--zs-font); text-decoration: none; cursor: pointer; }
.zs .zs-btn-brand { background: var(--zs-brand); color: var(--zs-on-brand); }
.zs .zs-btn-outline { background: var(--zs-white); color: var(--zs-green-600); border: 1px solid var(--zs-green-600); }
.zs .zs-btn-quiet { background: var(--zs-white); color: var(--zs-ink); border: 1px solid var(--zs-sand-200); }
.zs .zs-btn[disabled] { background: var(--zs-sand-200); color: var(--zs-stone-600); cursor: not-allowed; }
.zs .zs-h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--zs-ink); }
.zs .zs-muted { color: var(--zs-stone-600); }
.zs .zs-link { color: var(--zs-green-600); font-weight: 600; text-decoration: none; }
.zs .zs-link:hover { text-decoration: underline; }

/* Segmented control — order type. Selection by surface and weight, not colour alone. */
.zs .zs-seg { max-width: 560px; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--zs-sand-100); border-radius: var(--zs-r-12); }
.zs .zs-seg button { min-height: 44px; border: 0; border-radius: var(--zs-r-8); background: transparent; color: var(--zs-stone-800); font: 500 15px/20px var(--zs-font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.zs .zs-seg button[aria-pressed="true"] { background: var(--zs-white); color: var(--zs-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 36, 29, .12); }
/* Order type: one slim row of choices in a soft track (no heading; the group carries an aria-label). The chosen one is a white
   tile outlined and lettered in the restaurant's colour, so it stands out without a heavy filled block. */
.zs .zs-ordertype { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.zs .zs-ordertype-title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--zs-stone-800); }
.zs .zs-seg-tiles { max-width: none; gap: 4px; padding: 4px; background: var(--zs-sand-100); border: 1px solid var(--zs-sand-200); border-radius: var(--zs-r-12); }
.zs .zs-seg-tiles button { min-height: 48px; padding: 6px 8px; gap: 8px; border: 1.5px solid transparent; border-radius: var(--zs-r-8); background: transparent; color: var(--zs-stone-800); font-weight: 500; line-height: 18px; text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.zs .zs-seg-tiles button .zs-ic { width: 20px; height: 20px; }
.zs .zs-seg-tiles button:hover { color: var(--zs-ink); background: color-mix(in srgb, var(--zs-white) 60%, transparent); }
.zs .zs-seg-tiles button[aria-pressed="true"] { background: var(--zs-white); border-color: var(--zs-brand); color: var(--zs-brand-text); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 36, 29, .12); }
.zs .zs-seg-tiles .zs-seg-check { display: none; }
.zs .zs-tablechip { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; color: var(--zs-stone-800); }
.zs .zs-tablechip strong { color: var(--zs-ink); }
.zs .zs-tablechip .zs-textlink { min-height: 32px; margin-inline-start: auto; }
/* Offers strip: brand-tinted cards in a scrolling row; the chosen one is outlined. */
.zs .zs-offers { display: flex; flex-direction: column; gap: 8px; }
.zs .zs-offers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zs .zs-offers-head .zs-h2 { margin: 0; font-size: 20px; line-height: 26px; }
.zs .zs-offers-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.zs .zs-offers-row::-webkit-scrollbar { display: none; }
.zs .zs-offer-card { flex: 0 0 auto; width: 220px; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; text-align: start; padding: 14px 16px; border-radius: var(--zs-r-12); border: 1.5px solid color-mix(in srgb, var(--zs-brand) 30%, transparent); background: color-mix(in srgb, var(--zs-brand) 10%, var(--zs-white)); color: var(--zs-ink); font: inherit; cursor: pointer; }
.zs .zs-offer-card:disabled { cursor: default; }
.zs .zs-offer-card .zs-ic { grid-row: span 2; width: 24px; height: 24px; color: var(--zs-brand-text); }
.zs .zs-offer-summary { font-weight: 700; font-size: 16px; line-height: 22px; color: var(--zs-brand-text); }
.zs .zs-offer-name { grid-column: 2; font-size: 14px; line-height: 18px; color: var(--zs-stone-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs .zs-offer-card[aria-pressed="true"] { border-color: var(--zs-brand); background: var(--zs-white); box-shadow: 0 2px 8px color-mix(in srgb, var(--zs-brand) 25%, transparent); }
/* Phone Call Waiter: a round bell in the bottom corner (start side, so it mirrors in Arabic). Its label stays for
   screen readers; the component's own pop-ups (table choice, confirmation) are untouched. */
.zs .zs-floating { position: fixed; inset-inline-start: max(16px, env(safe-area-inset-left, 0px)); z-index: 20; }
body.zs .zs-floating > div > button { width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 999px; box-shadow: 0 6px 18px rgba(16, 36, 29, .22); }
body.zs .zs-floating > div > button svg { width: 22px; height: 22px; }
body.zs .zs-floating > div > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 640px) { .zs .zs-seg-tiles button { min-height: 52px; font-size: 16px; } }

/* Info strip (address, loyalty, notices) */
.zs .zs-strip { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: var(--zs-r-12); background: var(--zs-white); border: 1px solid var(--zs-sand-200); color: var(--zs-ink); text-decoration: none; }
.zs .zs-strip-green { background: var(--zs-green-50); border-color: transparent; color: var(--zs-green-800); }

/* Header text / images the restaurant sets (Settings → customer site header) */
.zs .zs-hero-text { margin: 0; padding: 20px; border-radius: var(--zs-r-20); background: var(--zs-white); border: 1px solid var(--zs-sand-200); font-size: 22px; line-height: 30px; font-weight: 700; text-align: center; color: var(--zs-ink); }
@media (min-width: 1024px) { .zs .zs-hero-text { font-size: 28px; line-height: 36px; padding: 28px; } }

/* Header slideshow (the restaurant's images) */
.zs .zs-slides { position: relative; overflow: hidden; border-radius: var(--zs-r-20); background: var(--zs-sand-100); aspect-ratio: 16 / 10; max-height: 440px; width: 100%; touch-action: pan-y; }
@media (min-width: 640px) { .zs .zs-slides { aspect-ratio: 16 / 7; } }
.zs .zs-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.zs .zs-slide.is-on { opacity: 1; }
.zs .zs-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .88); color: var(--zs-ink); display: none; align-items: center; justify-content: center; cursor: pointer; }
.zs .zs-prev { inset-inline-start: 12px; }
.zs .zs-next { inset-inline-end: 12px; }
@media (min-width: 640px) { .zs .zs-slide-arrow { display: inline-flex; } }
.zs .zs-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.zs .zs-dots button { width: 24px; height: 24px; border: 0; padding: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.zs .zs-dots button::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #FFFFFF; opacity: .55; box-shadow: 0 0 0 1px rgba(16, 36, 29, .25); }
.zs .zs-dots button[aria-current="true"]::after { opacity: 1; width: 18px; }

/* Search */
.zs .zs-search { position: relative; display: block; }
.zs .zs-search .zs-ic { position: absolute; inset-inline-start: 14px; top: 14px; color: var(--zs-stone-600); pointer-events: none; }
.zs .zs-search input { width: 100%; height: 48px; padding-inline: 44px 16px; border: 1px solid var(--zs-sand-300); border-radius: var(--zs-r-8); background: var(--zs-white); font: 400 16px/24px var(--zs-font); color: var(--zs-ink); box-shadow: none; }
.zs .zs-search input:focus { border-color: var(--zs-green-600); outline: 2px solid var(--zs-green-600); outline-offset: 0; box-shadow: none; }

/* Filter toggles (veg / halal) */
.zs .zs-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 500; }
.zs .zs-toggle .zs-track { width: 44px; height: 26px; border-radius: 999px; background: var(--zs-sand-300); padding: 3px; display: flex; transition: background .15s; }
.zs .zs-toggle .zs-knob { width: 20px; height: 20px; border-radius: 999px; background: var(--zs-white); box-shadow: 0 1px 2px rgba(16, 36, 29, .2); transition: transform .15s; }
.zs .zs-toggle input:checked + .zs-track { background: var(--zs-green-600); }
.zs .zs-toggle input:checked + .zs-track .zs-knob { transform: translateX(18px); }
[dir="rtl"] .zs .zs-toggle input:checked + .zs-track .zs-knob, .zs[dir="rtl"] .zs-toggle input:checked + .zs-track .zs-knob { transform: translateX(-18px); }
.zs .zs-toggle input:focus-visible + .zs-track { outline: 3px solid var(--zs-ink); outline-offset: 2px; }

/* Pills: menus and categories, scrolling sideways on phones */
.zs .zs-pills { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px; margin-inline: -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zs .zs-pills::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .zs .zs-pills { margin-inline: -24px; padding-inline: 24px; } }
@media (min-width: 1024px) { .zs .zs-pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.zs .zs-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--zs-white); border: 1px solid var(--zs-sand-200); color: var(--zs-ink); font: 500 15px/20px var(--zs-font); white-space: nowrap; flex: none; cursor: pointer; text-decoration: none; }
.zs .zs-pill .zs-count { color: var(--zs-stone-600); font-variant-numeric: tabular-nums; }
.zs .zs-pill[aria-pressed="true"] { background: var(--zs-brand); border-color: var(--zs-brand); color: var(--zs-on-brand); font-weight: 600; }
.zs .zs-pill[aria-pressed="true"] .zs-count { color: inherit; opacity: .85; }
.zs .zs-pill-soft[aria-pressed="true"] { background: var(--zs-ink); border-color: var(--zs-ink); color: var(--zs-white); }
.zs .zs-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--zs-stone-600); }
.zs[dir="rtl"] .zs-label, [dir="rtl"] .zs .zs-label { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---------- Menu items ---------- */
.zs .zs-items { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
@media (min-width: 1024px) { .zs .zs-items { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } }
.zs .zs-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--zs-sand-200); min-width: 0; }
@media (min-width: 1024px) { .zs .zs-item { padding: 16px; border: 1px solid var(--zs-sand-200); border-radius: var(--zs-r-20); background: var(--zs-white); } }
.zs .zs-item.is-out { opacity: .6; }
.zs .zs-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zs .zs-item-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 17px; line-height: 24px; color: var(--zs-ink); background: none; border: 0; padding: 0; text-align: start; cursor: pointer; font-family: var(--zs-font); }
.zs .zs-item-name img { height: 16px; width: 16px; flex: none; }
.zs .zs-item-desc { font-size: 14px; line-height: 20px; color: var(--zs-stone-600); background: none; border: 0; padding: 0; text-align: start; cursor: pointer; font-family: var(--zs-font); }
.zs .zs-item-meta { font-size: 13px; line-height: 18px; color: var(--zs-stone-600); display: inline-flex; align-items: center; gap: 6px; }
.zs .zs-price { font-weight: 600; color: var(--zs-ink); font-variant-numeric: tabular-nums; }
.zs .zs-price-was { font-size: 14px; color: var(--zs-stone-600); text-decoration: line-through; font-weight: 400; }
.zs .zs-offer { align-self: flex-start; font-size: 12px; line-height: 16px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--zs-saffron); color: var(--zs-ink); }
.zs .zs-out { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--zs-stone-800); }
.zs .zs-item-side { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; }
.zs .zs-photo { width: 96px; height: 96px; border-radius: var(--zs-r-12); background: var(--zs-sand-100); object-fit: cover; display: block; cursor: pointer; border: 0; padding: 0; }
@media (min-width: 1024px) { .zs .zs-photo { width: 112px; height: 112px; } }
.zs .zs-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* The add / quantity control sits on the photo's bottom end corner, or alone without a photo. */
.zs .zs-item-side.has-photo .zs-add, .zs .zs-item-side.has-photo .zs-qty { position: absolute; bottom: -8px; inset-inline-end: -8px; box-shadow: 0 0 0 3px var(--zs-cream); }
@media (min-width: 1024px) { .zs .zs-item-side.has-photo .zs-add, .zs .zs-item-side.has-photo .zs-qty { box-shadow: 0 0 0 3px var(--zs-white); } }
.zs .zs-add { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--zs-brand); color: var(--zs-on-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.zs .zs-add-text { width: auto; padding: 0 16px; gap: 6px; font: 600 15px/20px var(--zs-font); }
.zs .zs-qty { display: inline-flex; align-items: center; height: 44px; border-radius: 999px; background: var(--zs-brand); color: var(--zs-on-brand); }
.zs .zs-qty button { width: 40px; height: 44px; border: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.zs .zs-qty span { min-width: 20px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.zs .zs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--zs-stone-600); }

/* ---------- Basket bar (phones) / sticky checkout ---------- */
.zs .zs-basketbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(253, 246, 241, 0), var(--zs-cream) 35%); pointer-events: none; }
.zs .zs-basketbar-inner { max-width: 560px; margin: 0 auto; pointer-events: auto; }
.zs .zs-basketbar button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 20px; border: 0; border-radius: var(--zs-r-12); background: var(--zs-brand); color: var(--zs-on-brand); font: 600 17px/24px var(--zs-font); box-shadow: 0 8px 24px rgba(16, 36, 29, .18); cursor: pointer; font-variant-numeric: tabular-nums; }
.zs .zs-basketbar small { display: block; font-size: 13px; line-height: 16px; font-weight: 500; opacity: .85; text-align: start; }

/* ---------- Footer ---------- */
.zs .zs-footer { border-top: 1px solid var(--zs-sand-200); margin-top: 32px; padding: 24px 16px 120px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 14px; line-height: 20px; color: var(--zs-stone-600); text-align: center; }
.zs .zs-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.zs .zs-footer-links a { color: var(--zs-stone-800); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.zs .zs-footer-links a:hover { color: var(--zs-green-600); text-decoration: underline; }
.zs .zs-social { display: flex; gap: 8px; }
.zs .zs-social a { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--zs-stone-800); border: 1px solid var(--zs-sand-200); background: var(--zs-white); }
.zs .zs-powered { display: inline-flex; align-items: center; gap: 6px; color: var(--zs-stone-600); text-decoration: none; }
.zs .zs-powered img { height: 16px; width: auto; }

/* The old dark-mode classes stay in the markup of pages not yet redesigned;
   the storefront is light until a night mode is designed. */
.zs .zs-hidden { display: none !important; }

/* =====================================================================
 * Skin layer — the storefront screens still built from the shared
 * Tailwind components (pop-ups, order tracking, account pages, bookings)
 * take the brand here, without touching their markup or logic.
 * ===================================================================== */
.zs, .zs .font-sans, .zs input, .zs select, .zs textarea, .zs button { font-family: var(--zs-font); }

/* Neutrals: Tailwind greys to warm sand / stone / ink */
.zs .bg-white { background-color: var(--zs-white); }
.zs .bg-gray-50, .zs .bg-gray-100 { background-color: var(--zs-sand-100); }
.zs .bg-gray-200 { background-color: var(--zs-sand-200); }
.zs .border-gray-100, .zs .border-gray-200, .zs .border-gray-300 { border-color: var(--zs-sand-200); }
.zs .divide-gray-100 > * + *, .zs .divide-gray-200 > * + * { border-color: var(--zs-sand-200); }
.zs .text-gray-900, .zs .text-gray-800 { color: var(--zs-ink); }
.zs .text-gray-700 { color: var(--zs-stone-800); }
.zs .text-gray-600, .zs .text-gray-500 { color: var(--zs-stone-600); }
.zs .text-gray-400 { color: var(--zs-stone-500); }
.zs .text-skin-base { color: var(--zs-brand-text, var(--zs-brand)); }
.zs .bg-skin-base { background-color: var(--zs-brand); color: var(--zs-on-brand); }
.zs .border-skin-base { border-color: var(--zs-brand); }
.zs .text-green-500, .zs .text-green-600 { color: var(--zs-green-600); }

/* Pop-ups (x-dialog-modal / x-modal): a sheet on phones, a card on wider screens */
.zs .jetstream-modal > .fixed .absolute.inset-0 { background: var(--zs-ink); opacity: .55; }
.zs .jetstream-modal > div.mb-6 { background: var(--zs-paper); border-radius: var(--zs-r-20); box-shadow: 0 24px 48px rgba(16, 36, 29, .22); }
.zs .jetstream-modal .text-lg.font-medium { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--zs-ink); }
.zs .jetstream-modal .flex-row.justify-end.bg-gray-100 { background: var(--zs-paper); border-top: 1px solid var(--zs-sand-200); }
@media (max-width: 639px) {
    .zs .jetstream-modal { padding: 0 !important; display: flex; align-items: flex-end; }
    .zs .jetstream-modal > div.mb-6 { width: 100%; margin: 0 !important; border-radius: var(--zs-r-20) var(--zs-r-20) 0 0; max-height: 92svh; }
}

/* Buttons: x-button (brand), x-secondary-button / x-button-cancel (quiet) */
.zs button.bg-skin-base, .zs a.bg-skin-base { min-height: 48px; border-radius: var(--zs-r-12); font-weight: 600; font-size: 16px; padding-inline: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.zs button.bg-skin-base:hover, .zs a.bg-skin-base:hover { filter: brightness(.94); }
.zs button.border-gray-300.bg-white { min-height: 44px; border-radius: var(--zs-r-12); border-color: var(--zs-sand-300); color: var(--zs-ink); box-shadow: none; font-size: 15px; padding-inline: 16px; }

/* Fields */
.zs input[type="text"], .zs input[type="email"], .zs input[type="tel"], .zs input[type="number"], .zs input[type="password"], .zs input[type="date"], .zs input[type="time"], .zs input[type="search"], .zs select, .zs textarea {
    border-color: var(--zs-sand-300); border-radius: var(--zs-r-8); color: var(--zs-ink); background-color: var(--zs-white); box-shadow: none; font-size: 16px;
}
.zs input[type="text"], .zs input[type="email"], .zs input[type="tel"], .zs input[type="number"], .zs input[type="password"], .zs input[type="date"], .zs input[type="time"], .zs select { min-height: 48px; }
.zs input:focus, .zs select:focus, .zs textarea:focus { border-color: var(--zs-green-600) !important; box-shadow: 0 0 0 1px var(--zs-green-600) !important; outline: none; }
.zs label.block.font-medium { color: var(--zs-ink); font-weight: 600; }
.zs input[type="checkbox"], .zs input[type="radio"] { accent-color: var(--zs-brand); }

/* Cards and tables on the account pages */
.zs .rounded-lg.shadow-sm, .zs .rounded-lg.shadow, .zs .rounded-lg.shadow-md { box-shadow: none; border-radius: var(--zs-r-20); }
.zs table { font-variant-numeric: tabular-nums; }
.zs thead, .zs thead tr { background: var(--zs-sand-100); }
.zs th { color: var(--zs-stone-800); font-weight: 600; }

/* =====================================================================
 * Basket and checkout
 * ===================================================================== */
.zs .zs-page-head { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.zs .zs-back { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--zs-ink); border-radius: 999px; cursor: pointer; margin-inline-start: -12px; text-decoration: none; }
.zs .zs-back:hover { background: var(--zs-sand-100); }
.zs .zs-h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--zs-ink); }
.zs .zs-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 150px; }
@media (min-width: 1024px) { .zs .zs-checkout { grid-template-columns: minmax(0, 1fr) 380px; padding-bottom: 40px; } .zs .zs-checkout-side { position: sticky; top: 16px; } }
.zs .zs-section { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.zs .zs-section > h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.zs .zs-line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--zs-sand-200); }
.zs .zs-line:last-child { border-bottom: 0; }
.zs .zs-line-thumb { width: 56px; height: 56px; border-radius: var(--zs-r-12); object-fit: cover; flex: none; background: var(--zs-sand-100); cursor: pointer; }
.zs .zs-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zs .zs-line-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zs .zs-line-name img { height: 14px; width: 14px; }
.zs .zs-line-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.zs .zs-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; padding: 2px 10px; border-radius: 999px; background: var(--zs-sand-100); color: var(--zs-stone-800); }
.zs .zs-chip button { border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; display: inline-flex; }
.zs .zs-stepper { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--zs-sand-300); border-radius: var(--zs-r-12); background: var(--zs-white); }
.zs .zs-stepper button { width: 40px; height: 42px; border: 0; background: transparent; color: var(--zs-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.zs .zs-stepper span { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.zs .zs-textlink { border: 0; background: transparent; padding: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--zs-green-600); font: 600 15px/20px var(--zs-font); cursor: pointer; text-decoration: none; }
.zs .zs-sum { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.zs .zs-sum-good { color: var(--zs-green-600); }
.zs .zs-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--zs-sand-200); font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zs .zs-notice { padding: 12px 16px; border-radius: var(--zs-r-12); font-size: 15px; line-height: 22px; }
.zs .zs-notice-danger { background: #F8E0DB; color: var(--zs-danger); }
.zs .zs-actions { display: flex; flex-direction: column; gap: 8px; }
.zs .zs-actions .zs-btn { width: 100%; min-height: 56px; font-size: 17px; }
@media (max-width: 1023px) {
    .zs .zs-actions-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--zs-cream); border-top: 1px solid var(--zs-sand-200); }
}

/* =====================================================================
 * Order placed / tracking, account pages
 * ===================================================================== */
.zs .zs-page { padding-top: 8px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; max-width: 880px; margin-inline: auto; }

/* Item sizes pop-up (pos.itemVariations is shared with the web POS: restyled here only) */
.zs .jetstream-modal .hidden.md\:grid.uppercase { display: none !important; }
.zs .jetstream-modal [wire\:key^="menu-item-variation-"] { border-radius: var(--zs-r-12); padding: 12px 16px; }
.zs .jetstream-modal [wire\:key^="menu-item-variation-"] .uppercase { display: none; }
.zs .jetstream-modal [wire\:key^="menu-item-variation-"] .text-sm.text-gray-800, .zs .jetstream-modal [wire\:key^="menu-item-variation-"] .md\:block.text-center { font-size: 16px; font-weight: 600; color: var(--zs-ink); font-variant-numeric: tabular-nums; }

/* Fields that carry a grey utility class still read as editable */
.zs textarea.bg-gray-50, .zs input.bg-gray-50, .zs textarea.bg-gray-100 { background-color: var(--zs-white); }

/* Brand-coloured text stays readable on cream: a light brand colour reads as Ink (--zs-brand-text). */
.zs .zs-link, .zs .zs-textlink { color: var(--zs-green-600); }
/* Info blue is reserved for status; panels that borrowed it (loyalty account box) take the brand's light green. */
.zs .bg-blue-50 { background-color: var(--zs-green-50); }
.zs .border-blue-100, .zs .border-blue-200 { border-color: var(--zs-green-100); }
.zs .text-blue-600, .zs .text-blue-700, .zs .text-blue-800, .zs .text-blue-900 { color: var(--zs-green-800); }