/* MiniApp V4 storefront styles. Uses the 4-colour --mav2-* theme variables from
   lib/design.php so the live store matches the console designer. English-only.

   4-colour scheme:
     --mav2-primary    brand: buttons, active tab, hero
     --mav2-secondary  supporting: gradients, secondary accents
     --mav2-accent     highlights: prices, badges
     --mav2-bg         page background (tinted)  |  --mav2-surface cards (white) */

*{box-sizing:border-box}
html,body{margin:0;padding:0;touch-action:pan-x pan-y}
body{
  font-family:var(--mav2-font, Inter, sans-serif);
  background:var(--mav2-bg, #f4f7fb);
  color:var(--mav2-text, #0f172a);
  -webkit-font-smoothing:antialiased;
  /* clear the fixed tab bar (56px) plus the bottom safe-area strip */
  padding-bottom:calc(60px + env(safe-area-inset-bottom));
}

/* ── Header (V3-style: logo left, actions right) ── */
.mav2-appbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;background:var(--mav2-surface,#fff);
  border-bottom:1px solid rgba(0,0,0,.07);position:sticky;top:0;z-index:20;
}
.mav2-appbar-l{display:flex;align-items:center;gap:10px;min-width:0}
.mav2-appbar-r{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mav2-applogo{height:36px;width:auto;max-width:160px;object-fit:contain;border-radius:8px}
.mav2-appname{font-weight:800;font-size:18px;letter-spacing:-.2px;color:var(--mav2-text,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mav2-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(0,0,0,.12);border-radius:10px;color:var(--mav2-text);text-decoration:none;background:transparent;
}
.mav2-iconbtn:active{background:rgba(0,0,0,.05)}
.mav2-tablebadge{
  font-size:12px;font-weight:600;color:var(--mav2-primary);
  border:1px solid var(--mav2-primary);border-radius:999px;padding:6px 10px;white-space:nowrap;
}

.mav2-appmain{min-height:60vh}
.mav2-empty{padding:48px 16px;text-align:center;color:#9aa3ad;font-size:14px}

/* ── Sections (mirror console preview) ── */
.mav2-sec{padding:16px}
.mav2-btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;
  background:var(--mav2-primary);color:#fff;padding:10px 18px;border-radius:var(--mav2-radius);
  font-weight:600;font-size:14px;box-shadow:var(--mav2-shadow)}
.mav2-btn--outline{background:transparent;color:var(--mav2-primary);border:1px solid var(--mav2-primary);box-shadow:none}
.mav2-btn--block{display:block;width:100%;text-align:center}

.mav2-hero{position:relative;border-radius:var(--mav2-radius);overflow:hidden;box-shadow:var(--mav2-shadow)}
.mav2-hero-img{width:100%;height:200px;object-fit:cover;display:block;background:#e9edf2}
.mav2-hero-ph{width:100%;height:200px;background:linear-gradient(135deg,var(--mav2-primary),var(--mav2-secondary))}
.mav2-hero-body{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff}
.mav2-hero-title{font-size:22px;font-weight:800;margin:0 0 4px}
.mav2-hero-sub{font-size:13px;opacity:.9;margin:0 0 10px}
.mav2-hero--split{display:flex;align-items:stretch}
.mav2-hero--split .mav2-hero-img,.mav2-hero--split .mav2-hero-ph{width:45%;height:auto;min-height:140px}
.mav2-hero--split .mav2-hero-body{position:static;background:none;color:var(--mav2-text);display:flex;flex-direction:column;justify-content:center}
.mav2-hero--minimal{background:transparent;box-shadow:none;text-align:center;padding:24px 8px}
.mav2-hero--minimal .mav2-hero-body{position:static;background:none;color:var(--mav2-text)}
/* Full-bleed: image flush to top + left/right edges (no margin/padding, no radius). */
.mav2-sec--flush{padding:0}
.mav2-hero--fullbleed{border-radius:0;box-shadow:none}
.mav2-hero--fullbleed .mav2-hero-img,.mav2-hero--fullbleed .mav2-hero-ph{height:240px}

.mav2-h{font-size:16px;font-weight:700;margin:0 0 12px}
.mav2-grid{display:grid;gap:12px}
.mav2-card{border-radius:var(--mav2-radius);overflow:hidden;box-shadow:var(--mav2-shadow);background:var(--mav2-surface,#fff)}
.mav2-card-img{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#eef2f6,#dfe6ee);object-fit:cover}
.mav2-card-b{padding:8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.mav2-card-t{font-size:13px;font-weight:600;color:var(--mav2-text)}
.mav2-card-p{font-size:13px;color:var(--mav2-accent);font-weight:800}
.mav2-grid--list .mav2-card{display:flex;align-items:center}
.mav2-grid--list .mav2-card-img{width:80px;aspect-ratio:auto;height:80px;flex:0 0 auto}

.mav2-rt{font-size:14px;line-height:1.6}
.mav2-rt--quote{border-left:4px solid var(--mav2-primary);padding-left:12px;font-style:italic;color:#444}
.mav2-rt--boxed{background:var(--mav2-surface);padding:14px;border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow)}

.mav2-banner{width:100%;border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);display:block}
.mav2-banner-ph{width:100%;height:140px;border-radius:var(--mav2-radius);background:linear-gradient(135deg,var(--mav2-secondary),var(--mav2-primary));box-shadow:var(--mav2-shadow)}
.mav2-banner--full .mav2-banner,.mav2-banner--full .mav2-banner-ph{border-radius:0}
.mav2-banner--framed{padding:6px;border:1px solid rgba(0,0,0,.12);border-radius:var(--mav2-radius)}

/* ── Core function blocks ── */
.mav2-fn{margin:0}
.mav2-fn-head{margin-bottom:10px}
.mav2-hint{font-size:13px;color:#9aa3ad}

/* Native ordering */
.mav2-ordering .mav2-menu-cat{font-weight:800;margin:14px 0 8px;color:var(--mav2-primary);
  font-size:13px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:4px}
.mav2-order-card .mav2-add{margin-top:6px;border:0;cursor:pointer;background:var(--mav2-primary);color:#fff;
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px}
.mav2-order-card.soldout{opacity:.55}
.mav2-soldout{font-size:12px;color:#9aa3ad;margin-top:6px}

/* ── Ordering templates (reproduced from V3 ordering_1/2/3) ── */
.mav2-soldout{font-size:12px;color:#9aa3ad}
/* Category nav (horizontal sticky bar — designs grid & list) */
.mav2-catbar{position:sticky;top:56px;z-index:15;display:flex;gap:8px;overflow-x:auto;
  padding:10px 4px;background:var(--mav2-bg);-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.mav2-catbar::-webkit-scrollbar{width:0;height:0;display:none}
.mav2-cat{flex:0 0 auto;border:1px solid #d7dde4;background:var(--mav2-surface,#fff);color:var(--mav2-text);
  border-radius:var(--mav2-radius);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.mav2-cat.active{background:var(--mav2-primary);border-color:var(--mav2-primary);color:#fff}
.mav2-cat-h{font-size:15px;font-weight:800;margin:14px 0 10px}
.mav2-catsec{scroll-margin-top:110px}
.mav2-ord{padding:0 4px}
/* Tighten the ordering block's vertical rhythm so the page doesn't feel empty:
   trim the section's top/bottom padding, the sticky cat-bar, and the first heading.
   Left/right padding (16px from .mav2-sec) is kept. */
.mav2-fn--ordering{padding-top:4px;padding-bottom:8px}
.mav2-fn--ordering .mav2-catbar{padding-top:4px;padding-bottom:6px}
.mav2-fn--ordering .mav2-catsec:first-child .mav2-cat-h{margin-top:6px}
/* Design 1: card grid */
.mav2-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:480px){.mav2-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mav2-pcard{border:1px solid #eceff3;border-radius:var(--mav2-radius);background:var(--mav2-surface,#fff);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--mav2-shadow)}
.mav2-pcard.soldout{opacity:.55}
.mav2-pimg{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#eef2f6,#dfe6ee);overflow:hidden}
.mav2-pimg img{width:100%;height:100%;object-fit:cover;display:block}
/* Showcase label badges overlaid on the product image (featured/new/hot). */
.mav2-badges{position:absolute;top:6px;left:6px;z-index:2;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 12px)}
.mav2-badge{font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:var(--mav2-primary, #ef4444);padding:3px 6px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* On the smaller list/split/qr row thumbnails, shrink the badge so it fits. */
.mav2-prow-thumb .mav2-badges{top:4px;left:4px;gap:3px;max-width:calc(100% - 8px)}
.mav2-prow-thumb .mav2-badge{font-size:9px;padding:2px 4px;border-radius:4px}
.mav2-pcard-b{padding:8px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.mav2-pcard-t{font-size:13px;font-weight:600;color:var(--mav2-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mav2-pcard-s{font-size:11px;color:#9aa3ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mav2-pcard-p{font-size:12px;font-weight:800;color:var(--mav2-accent)}
.mav2-pcard .mav2-add{margin-top:auto;border:0;background:var(--mav2-primary);color:#fff;border-radius:var(--mav2-radius);padding:7px 0;font-size:13px;font-weight:600;cursor:pointer}
/* Design 2 & 3: list rows */
.mav2-plist{display:flex;flex-direction:column;gap:8px}
.mav2-prow{display:flex;align-items:center;gap:12px;border:1px solid #eceff3;border-radius:var(--mav2-radius);background:var(--mav2-surface,#fff);padding:8px;box-shadow:var(--mav2-shadow)}
.mav2-prow.soldout{opacity:.55}
.mav2-prow-thumb{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:calc(var(--mav2-radius) - 4px);overflow:hidden;background:linear-gradient(135deg,#eef2f6,#dfe6ee)}
.mav2-prow-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mav2-prow-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.mav2-prow-info .mav2-pcard-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mav2-prow-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mav2-add--row{border:0;background:var(--mav2-primary);color:#fff;border-radius:var(--mav2-radius);padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;flex:0 0 auto}
/* Design 3: split (category sidebar + list panel) */
.mav2-ord--split{display:grid;grid-template-columns:clamp(96px,28vw,150px) 1fr;gap:10px;align-items:start;padding:10px 4px}
/* Sidebar stays scrollable (so all categories are reachable) but its scrollbar is
   hidden — the page keeps the single visible scrollbar (no ugly double scrollbar). */
.mav2-ord-side{position:sticky;top:60px;align-self:start;display:flex;flex-direction:column;gap:6px;
  max-height:calc(100vh - 76px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.mav2-ord-side::-webkit-scrollbar{width:0;height:0;display:none}
.mav2-ord-side .mav2-cat{width:100%;text-align:left;white-space:normal}
.mav2-ord-panel{min-width:0}
.mav2-ord--split .mav2-cat-h:first-child,.mav2-ord-panel .mav2-catsec:first-child .mav2-cat-h{margin-top:0}
/* Small screens: keep the split's left-category / right-product layout (the narrow
   sidebar is intentional); only trim the row thumbnails / add-button / title sizing. */
@media (max-width:560px){
  .mav2-prow-thumb{flex:0 0 64px;width:64px;height:64px}
  .mav2-add--row{padding:7px 12px}
  .mav2-pcard-t{font-size:13px}
}

/* Floating cart bar: sits 12px above the tab bar (56px + the home-indicator strip,
   so the offset must include the safe-area inset or it overlaps the bar on notched
   phones). Because it FLOATS over the page, body gets matching bottom padding while
   it is visible (.mav2-has-cartbar below) — otherwise it covers the last product
   row's "+ Add" button and the customer cannot tap it. */
.mav2-cartbar{position:fixed;left:12px;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:25;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--mav2-primary);color:#fff;padding:12px 18px;border-radius:var(--mav2-radius);
  font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer}
.mav2-cartbar-cnt{background:rgba(255,255,255,.25);border-radius:999px;padding:2px 10px;font-size:13px}
/* 68px bar offset + its measured height (cartmodal.js sets --mav2-cartbar-h) + a
   12px gap under the last card. Falls back to a sane height if JS never measured. */
body.mav2-has-cartbar{padding-bottom:calc(80px + var(--mav2-cartbar-h, 62px) + env(safe-area-inset-bottom))}

/* ── Cart / checkout ── */
.mav2-cart-list{display:flex;flex-direction:column;gap:10px}
.mav2-cart-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);padding:12px;box-shadow:var(--mav2-shadow)}
.mav2-cart-info{flex:1;min-width:0}
.mav2-cart-addon{font-size:12px;color:#9aa3ad}
.mav2-cart-remark{font-size:12px;color:#9aa3ad;font-style:italic}
.mav2-cart-line{margin-top:4px}
.mav2-cart-x{color:#9aa3ad;font-weight:600;font-size:13px}
.mav2-qty{display:flex;align-items:center;gap:8px}
.mav2-qty-btn,.mav2-cart-del{width:30px;height:30px;border:1px solid #d7dde4;background:#fff;border-radius:8px;
  font-size:16px;line-height:1;cursor:pointer;color:var(--mav2-text)}
.mav2-cart-del{border-color:#f0c8c8;color:#c0392b;margin-left:4px}
.mav2-qty-val{min-width:18px;text-align:center}
.mav2-cart-foot{margin-top:16px}
.mav2-cart-sub{display:flex;justify-content:space-between;font-size:15px;margin-bottom:12px}
.mav2-input{width:100%;border:1px solid #d7dde4;border-radius:var(--mav2-radius);padding:10px 12px;
  /* 16px floor: iOS Safari auto-zooms the page when focusing inputs below 16px */
  font-size:16px;background:var(--mav2-surface,#fff);margin-bottom:10px;font-family:inherit}
.mav2-input--area{min-height:64px;resize:vertical}

/* ── Membership ── */
.mav2-memcard{background:linear-gradient(135deg,var(--mav2-primary),var(--mav2-secondary));color:#fff;
  border-radius:var(--mav2-radius);padding:20px;box-shadow:var(--mav2-shadow)}
.mav2-memcard-name{font-weight:800;font-size:18px}
.mav2-memcard-pts{opacity:.9;margin:4px 0 16px}
.mav2-memcard-code{font-family:monospace;letter-spacing:2px;font-size:15px;background:rgba(255,255,255,.18);
  display:inline-block;padding:6px 12px;border-radius:8px}
/* White panel so the member barcode stays scannable on the coloured card */
.mav2-memcard-barcode{background:#fff;border-radius:10px;padding:12px;text-align:center}
.mav2-memcard-barcode svg{display:block;width:100%;max-width:100%;height:56px;margin:0 auto}
.mav2-memcard-barcode-no{margin-top:6px;font-family:monospace;letter-spacing:3px;font-size:14px;color:#111}
.mav2-memcard-barcode-hint{margin-top:4px;font-size:12px;color:#6b7280}
.mav2-tier{border:1px solid rgba(0,0,0,.1);border-radius:var(--mav2-radius);padding:14px 6px;text-align:center;background:var(--mav2-surface,#fff)}
.mav2-tier.active{border-color:var(--mav2-primary);box-shadow:var(--mav2-shadow)}
.mav2-tier-n{font-weight:700;font-size:13px}
.mav2-tier-pts{font-size:11px;color:#8a929b}
.mav2-member-logout{margin-top:14px}

/* ── Rewards / feedback / location / reservation ── */
.mav2-ok{background:#e7f6ec;color:#1b7a3d;border-radius:var(--mav2-radius);padding:14px;text-align:center;font-weight:600}
.mav2-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0}
.mav2-pts{font-size:14px;margin-bottom:10px}
.mav2-sub2{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mav2-primary);margin:16px 0 8px}
.mav2-voucher{border:1px dashed var(--mav2-accent);border-radius:var(--mav2-radius);padding:12px;text-align:center;background:var(--mav2-surface,#fff);margin-bottom:10px}
.mav2-voucher.mine{border-style:solid;border-color:#e0e5ec}
.mav2-voucher-v{font-size:18px;font-weight:800;color:var(--mav2-primary)}
.mav2-voucher-t{font-size:13px;margin:2px 0}
.mav2-voucher-d{font-size:12px;color:#9aa3ad;margin-bottom:8px}
.mav2-voucher-code{font-family:monospace;letter-spacing:2px;font-weight:700}
.mav2-voucher-til{font-size:12px;color:#9aa3ad}

/* ════════════ Rewards redesign — all curve/shadow/font/palette from theme ════
   Tokens: --mav2-radius (curve) · --mav2-shadow · --mav2-font (inherited) ·
   --mav2-primary/--mav2-accent/--mav2-bg/--mav2-surface/--mav2-text (palette).
   Value blocks + badges derive their tints from the brand colours via color-mix;
   no hardcoded hues. Neutral greys are used only for non-brand status (used).   */
.mav2-rw-card.skin-primary .mav2-rw-card-val,.mav2-rw-ticket.skin-primary .mav2-rw-ticket-val{
  background:color-mix(in srgb,var(--mav2-primary) 15%,var(--mav2-surface,#fff));color:var(--mav2-primary)}
.mav2-rw-card.skin-accent  .mav2-rw-card-val,.mav2-rw-ticket.skin-accent  .mav2-rw-ticket-val{
  background:color-mix(in srgb,var(--mav2-accent) 18%,var(--mav2-surface,#fff));color:var(--mav2-accent)}

/* Points hero — brand gradient (primary → secondary/accent) */
.mav2-rw-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--mav2-primary),var(--mav2-secondary));color:#fff;
  border-radius:var(--mav2-radius);padding:18px;margin-bottom:18px;box-shadow:var(--mav2-shadow)}
.mav2-rw-hero-label{font-size:13px;opacity:.85}
.mav2-rw-hero-pts{font-size:38px;font-weight:900;line-height:1.05;margin-top:2px;display:flex;align-items:center;gap:8px}
.mav2-rw-hero-coin{font-size:24px;color:#fff}
.mav2-rw-hero-hint{font-size:12px;opacity:.8;margin-top:6px}
.mav2-rw-hero-gift{font-size:60px;color:rgba(255,255,255,.85);margin-right:6px}

/* Section heading */
.mav2-rw-sech{font-size:17px;font-weight:800;margin:20px 0 10px;color:var(--mav2-text)}

/* Filter tabs — pills (always pill-shaped, like the app's other pills) */
.mav2-rw-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.mav2-rw-tabs::-webkit-scrollbar{display:none}
.mav2-rw-tab{flex:0 0 auto;border:0;cursor:pointer;background:rgba(0,0,0,.05);color:var(--mav2-text);
  border-radius:var(--mav2-radius);padding:7px 14px;font-size:13px;font-weight:700;white-space:nowrap;opacity:.75}
.mav2-rw-tab.active{background:var(--mav2-primary);color:#fff;opacity:1}

/* Voucher list + ticket card */
.mav2-rw-list{display:flex;flex-direction:column;gap:12px}
.mav2-rw-card{display:flex;align-items:stretch;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);
  overflow:hidden;box-shadow:var(--mav2-shadow);transition:transform .08s ease}
.mav2-rw-card[data-idx]{cursor:pointer}
.mav2-rw-card[data-idx]:active{transform:scale(.99)}
.mav2-rw-card.is-dim{opacity:.6}
.mav2-rw-card-val,.mav2-rw-ticket-val{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 8px;text-align:center;line-height:1}
.mav2-rw-val-big{font-size:13px;font-weight:800;letter-spacing:.04em}
.mav2-rw-val-mid{font-size:30px;font-weight:900}
.mav2-rw-val-small{font-size:13px;font-weight:800;letter-spacing:.06em}
.mav2-rw-card-body{flex:1;min-width:0;padding:12px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.mav2-rw-card-name{font-size:14px;font-weight:800;color:var(--mav2-text);line-height:1.25}
.mav2-rw-card-sub{font-size:12px;color:color-mix(in srgb,var(--mav2-text) 55%,transparent)}
.mav2-rw-card-tc{font-size:11px;color:color-mix(in srgb,var(--mav2-text) 40%,transparent);margin-top:2px}
.mav2-rw-card-body .mav2-grab{align-self:flex-start;margin-top:8px;padding:4px 10px;font-size:11px}
.mav2-rw-card-arr{align-self:center;color:color-mix(in srgb,var(--mav2-text) 35%,transparent);font-size:14px;padding-right:14px;flex:0 0 auto}

/* Status badge — available uses accent; used/expired are neutral (non-brand) */
.mav2-rw-badge{align-self:flex-start;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;margin-bottom:2px}
.mav2-rw-badge.status-available{background:color-mix(in srgb,var(--mav2-accent) 18%,var(--mav2-surface,#fff));color:var(--mav2-accent)}
.mav2-rw-badge.status-used{background:rgba(0,0,0,.06);color:color-mix(in srgb,var(--mav2-text) 55%,transparent)}
.mav2-rw-badge.status-expired{background:rgba(0,0,0,.06);color:color-mix(in srgb,var(--mav2-text) 55%,transparent)}

/* ── Detail modal ── */
.mav2-rw-modal{max-width:460px}
.mav2-rw-modal .mav2-modal-b{max-height:76vh;overflow:auto;background:var(--mav2-bg,#f4f7fb)}
.mav2-rw-ticket{display:flex;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);overflow:hidden;box-shadow:var(--mav2-shadow);margin-bottom:14px}
.mav2-rw-ticket-val{flex:0 0 110px}
.mav2-rw-ticket-val .mav2-rw-val-mid{font-size:40px}
.mav2-rw-ticket-body{flex:1;min-width:0;padding:14px;display:flex;flex-direction:column;gap:4px}
.mav2-rw-ticket-name{font-size:17px;font-weight:800;line-height:1.25}
.mav2-rw-ticket-til{font-size:12px;color:color-mix(in srgb,var(--mav2-text) 55%,transparent)}
.mav2-rw-codelabel{font-size:11px;color:color-mix(in srgb,var(--mav2-text) 45%,transparent);margin-top:6px}
.mav2-rw-codebox{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px dashed color-mix(in srgb,var(--mav2-text) 25%,transparent);border-radius:var(--mav2-radius);padding:8px 10px;margin-top:2px}
.mav2-rw-codebox span{font-family:monospace;font-weight:800;letter-spacing:2px;font-size:14px}
.mav2-rw-copy{border:0;background:none;cursor:pointer;color:var(--mav2-primary);font-size:15px;padding:2px 4px}

/* Info columns */
.mav2-rw-info{display:flex;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);margin-bottom:14px}
.mav2-rw-infocol{flex:1;text-align:center;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.mav2-rw-infocol+.mav2-rw-infocol::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:rgba(0,0,0,.07)}
.mav2-rw-infocol i{color:color-mix(in srgb,var(--mav2-text) 55%,transparent);font-size:15px;margin-bottom:2px}
.mav2-rw-infocol span{font-size:11px;color:color-mix(in srgb,var(--mav2-text) 50%,transparent)}
.mav2-rw-infocol b{font-size:12px;color:var(--mav2-text)}

/* Scan / barcode block */
.mav2-rw-scan{text-align:center;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);padding:14px 12px;margin-bottom:14px;box-shadow:var(--mav2-shadow)}
.mav2-rw-scan-h{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--mav2-text) 65%,transparent);margin-bottom:10px}
.mav2-rw-scan svg{max-width:100%;height:auto}
.mav2-rw-code{font-family:monospace;letter-spacing:3px;font-weight:700;font-size:14px;margin-top:8px}

/* Details bullets */
.mav2-rw-details{background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);padding:14px 16px;box-shadow:var(--mav2-shadow)}
.mav2-rw-details-h{font-size:14px;font-weight:800;margin-bottom:6px}
.mav2-rw-bullets{margin:0;padding-left:18px}
.mav2-rw-bullets li{font-size:13px;color:color-mix(in srgb,var(--mav2-text) 65%,transparent);line-height:1.5;margin:3px 0}
.mav2-stars{font-size:30px;color:var(--mav2-accent);cursor:pointer;letter-spacing:6px;text-align:center;margin-bottom:8px}
.mav2-stars span{cursor:pointer}
.mav2-fb-msg{color:#c0392b;font-size:13px;margin-top:8px}
.mav2-loc-card{background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);padding:14px;box-shadow:var(--mav2-shadow);margin-bottom:12px}
.mav2-loc-name{font-weight:700}
.mav2-loc-addr{font-size:13px;color:#8a929b;margin:2px 0 10px}
.mav2-loc-actions{display:flex;flex-wrap:wrap;gap:8px}
.mav2-loc-actions .mav2-btn{padding:7px 12px;font-size:13px}
/* Reservation */
.mav2-res-item{background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);padding:10px 12px;box-shadow:var(--mav2-shadow);margin-bottom:8px;border-left:3px solid var(--mav2-primary);cursor:pointer}
.mav2-res-item[data-res-idx]:active{transform:scale(.99)}
.mav2-res-item.past{border-left-color:#cbd2da;opacity:.7}
/* Reservation detail modal rows */
.mav2-res-dhead{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mav2-res-drow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.mav2-res-drow:last-child{border-bottom:0}
.mav2-res-dlabel{color:#8a929b;font-size:13px}
.mav2-res-dval{font-weight:600;font-size:13px;text-align:right}
.mav2-res-row1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mav2-res-when{font-weight:700}
.mav2-res-meta{font-size:12px;color:#8a929b;margin-top:2px}
.mav2-res-empty{font-size:13px;color:#9aa3ad;background:var(--mav2-surface,#fff);border:1px dashed #d7dde4;border-radius:var(--mav2-radius);padding:14px;text-align:center;margin-bottom:8px}
.mav2-res-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;flex:0 0 auto}
.mav2-res-pill.up{background:rgba(217,119,6,.14);color:#b45309}
.mav2-res-pill.confirmed{background:rgba(21,128,61,.14);color:#15803d}
.mav2-res-pill.past{background:rgba(0,0,0,.06);color:#8a929b}
.mav2-res-formhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15px}
.mav2-link{border:0;background:none;color:var(--mav2-primary);font-weight:600;cursor:pointer;padding:0;font-size:14px}
#mav2ResNew{margin-bottom:6px}
/* Feedback list */
.mav2-feedback .mav2-res-item{cursor:default}
.mav2-fb-stars{color:var(--mav2-accent);letter-spacing:2px;font-size:15px}
.mav2-feedback .mav2-res-pill{background:rgba(0,0,0,.06);color:#8a929b}
.mav2-slots{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.mav2-slot{border:1px solid #d7dde4;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius,999px);padding:8px 14px;font-size:13px;cursor:pointer;color:var(--mav2-text)}
.mav2-slot.sel{background:var(--mav2-primary);border-color:var(--mav2-primary);color:#fff;font-weight:700}
.mav2-slot.off{opacity:.4;text-decoration:line-through;cursor:default}
.mav2-res-sum{background:rgba(0,0,0,.04);border-radius:var(--mav2-radius);padding:10px 12px;font-size:13px;margin:8px 0;font-weight:600}
/* "Booking received" banner (done=1) + New-booking button */
.mav2-ok--banner{display:flex;align-items:center;gap:12px;text-align:left;font-size:15px;line-height:1.3}
.mav2-ok--banner i{font-size:22px;flex:0 0 auto}
.mav2-btn--new{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;padding:13px 18px;margin:14px 0 4px}
.mav2-btn--new i{font-size:13px}
/* My-bookings rich card: colour-accented date column + detail body */
.mav2-bk{display:flex;align-items:stretch;background:var(--mav2-surface,#fff);border-radius:14px;overflow:hidden;box-shadow:var(--mav2-shadow);margin-bottom:12px;cursor:pointer;border:1px solid rgba(0,0,0,.05);border-left:5px solid var(--bk,var(--mav2-primary));transition:transform .08s ease}
.mav2-bk:active{transform:scale(.99)}
.mav2-bk-date{flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:14px 6px;background:color-mix(in srgb,var(--bk,var(--mav2-primary)) 9%,#fff);color:var(--bk,var(--mav2-primary))}
.mav2-bk-mon{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.mav2-bk-day{font-size:30px;font-weight:800;line-height:1.05;color:var(--mav2-text,#0f172a)}
.mav2-bk-year{font-size:12px;font-weight:600;color:#8a929b;margin-bottom:6px}
.mav2-bk-time{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700}
.mav2-bk-time i{font-size:12px}
.mav2-bk-body{flex:1 1 auto;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.mav2-bk-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:9px;border-bottom:1px solid rgba(0,0,0,.07)}
.mav2-bk-branch{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--mav2-text,#0f172a);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mav2-bk-branch i{color:var(--bk,var(--mav2-primary));font-size:14px;flex:0 0 auto}
.mav2-bk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mav2-bk-cat{font-weight:600}
.mav2-bk-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#4b5563}
.mav2-bk-chip i{color:#9aa3ad;font-size:13px;width:15px;text-align:center;flex:0 0 auto}
.mav2-bk-cat .mav2-bk-chip{color:var(--mav2-text,#0f172a);font-size:14px}
.mav2-bk-chev{align-self:center;color:#cbd2da;font-size:13px;padding:0 14px 0 2px;flex:0 0 auto}
/* ── My Packages (fn_packages) ── colours/curve/font all from --mav2-* theme ── */
/* Summary card (active count · remaining sessions · nearest expiry) */
.mav2-pkg-summary{display:grid;grid-template-columns:repeat(3,1fr);background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:14px 4px;margin-bottom:14px}
.mav2-pkg-sum-cell{text-align:center;padding:0 6px}
.mav2-pkg-sum-cell + .mav2-pkg-sum-cell{border-left:1px solid rgba(0,0,0,.07)}
.mav2-pkg-sum-ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:rgba(0,0,0,.05);color:var(--mav2-accent);font-size:15px}
.mav2-pkg-sum-label{font-size:11px;color:#8a929b;line-height:1.25}
.mav2-pkg-sum-num{font-size:20px;font-weight:800;color:var(--mav2-primary);margin:3px 0 1px;line-height:1.15}
.mav2-pkg-sum-num.accent{color:var(--mav2-accent);font-size:16px}
.mav2-pkg-sum-sub{font-size:10px;color:#9aa3ad}
/* Tabs */
.mav2-pkg-tabs{display:flex;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:4px;margin-bottom:14px}
.mav2-pkg-tab{flex:1;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:#8a929b;padding:8px 4px;border-radius:calc(var(--mav2-radius) - 4px);cursor:pointer}
.mav2-pkg-tab.active{color:var(--mav2-primary);background:rgba(0,0,0,.04);box-shadow:inset 0 -2px 0 var(--mav2-primary)}
/* Card */
.mav2-pkg-listwrap{display:flex;flex-direction:column;gap:12px}
.mav2-pkg-card{display:flex;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);overflow:hidden}
.mav2-pkg-img{width:108px;flex:0 0 108px;object-fit:cover;align-self:stretch;background:rgba(0,0,0,.05)}
.mav2-pkg-img-ph{display:flex;align-items:center;justify-content:center;color:var(--mav2-accent);font-size:28px}
.mav2-pkg-body{flex:1;min-width:0;padding:12px 14px}
.mav2-pkg-title{font-weight:800;font-size:16px;color:var(--mav2-text)}
.mav2-pkg-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin-top:6px}
.mav2-pkg-badge.active{background:rgba(22,163,74,.14);color:#16a34a}
.mav2-pkg-badge.soon{background:rgba(245,158,11,.16);color:#b45309}
.mav2-pkg-badge.expired,.mav2-pkg-badge.used{background:rgba(0,0,0,.06);color:#8a929b}
.mav2-pkg-desc{font-size:12px;color:#8a929b;margin-top:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mav2-pkg-stats{display:grid;grid-template-columns:1.1fr 1fr .7fr;gap:8px;border-top:1px dashed rgba(0,0,0,.1);padding-top:10px;margin-top:10px}
.mav2-pkg-stat-label{font-size:10px;color:#9aa3ad;text-transform:uppercase;letter-spacing:.03em}
.mav2-pkg-stat-val{font-size:13px;font-weight:700;color:var(--mav2-text);margin-top:2px}
.mav2-pkg-stat-val.prim{color:var(--mav2-primary)}
.mav2-pkg-stat-val.acc{color:var(--mav2-accent)}
.mav2-pkg-bar{height:7px;border-radius:999px;background:rgba(0,0,0,.08);margin-top:10px;overflow:hidden}
.mav2-pkg-bar-fill{height:100%;border-radius:999px;background:var(--mav2-primary)}
.mav2-pkg-bar-fill.low{background:#ef4444}
.mav2-pkg-actions{display:flex;justify-content:flex-end;margin-top:10px}
.mav2-pkg-book{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--mav2-primary);border:1px solid var(--mav2-primary);border-radius:999px;padding:6px 14px;text-decoration:none}
/* Explore CTA */
.mav2-pkg-cta{display:flex;align-items:center;gap:12px;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:14px;margin-top:14px;border-left:3px solid var(--mav2-accent)}
.mav2-pkg-cta-ico{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);color:var(--mav2-accent)}
.mav2-pkg-cta-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.mav2-pkg-cta-txt b{font-size:14px;color:var(--mav2-text)}
.mav2-pkg-cta-txt span{font-size:12px;color:#8a929b}
.mav2-pkg-cta-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--mav2-primary);border-radius:999px;padding:8px 14px;text-decoration:none}
/* Packages — list variant (compact rows) */
.mav2-pkg-row{display:flex;align-items:center;gap:12px;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:12px 14px;cursor:pointer}
.mav2-pkg-row:active{transform:scale(.995)}
.mav2-pkg-row-ico{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);color:var(--mav2-accent);font-size:16px}
.mav2-pkg-row-main{flex:1;min-width:0}
.mav2-pkg-row-top{display:flex;align-items:center;gap:8px}
.mav2-pkg-row-name{font-weight:700;font-size:14px;color:var(--mav2-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mav2-pkg-row .mav2-pkg-badge{margin-top:0;flex:0 0 auto}
.mav2-pkg-row-meta{font-size:12px;color:#8a929b;margin:3px 0 7px}
.mav2-pkg-row .mav2-pkg-bar{margin-top:0}
.mav2-pkg-row-chev{color:#c2c8cf;font-size:13px;flex:0 0 auto}
/* Packages — simple variant (minimal teaser for embedding) */
.mav2-pkg-simple{display:flex;flex-direction:column;gap:12px;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:14px}
.mav2-pkg-simple-item + .mav2-pkg-simple-item{border-top:1px solid rgba(0,0,0,.06);padding-top:12px}
.mav2-pkg-simple-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.mav2-pkg-simple-name{font-weight:700;font-size:14px;color:var(--mav2-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mav2-pkg-simple-name i{color:var(--mav2-accent);margin-right:5px}
.mav2-pkg-simple-rem{font-weight:800;font-size:13px;color:var(--mav2-primary);white-space:nowrap;flex:0 0 auto}
/* Resource checkout (settlement) — reuse package cards; sections + tappable rows */
.mav2-co-head{font-size:14px;font-weight:800;color:var(--mav2-text);margin:10px 0 6px}
.mav2-co-sec{font-size:12px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;margin:16px 0 6px}
.mav2-co-pick{cursor:pointer;transition:background .15s;text-decoration:none;display:block}
.mav2-co-pick:hover,.mav2-co-pick:focus{background:rgba(0,0,0,.03);outline:none}
.mav2-co-pick:active{background:rgba(0,0,0,.06)}
.mav2-co-chev{color:var(--mav2-primary);margin-left:6px;font-size:11px}
.mav2-qr{display:flex;justify-content:center;padding:10px;background:#fff;border-radius:var(--mav2-radius)}
.mav2-qr img,.mav2-qr canvas{display:block}

/* Detail modal (barcode + usage history) */
.mav2-pkg-card[role=button]{cursor:pointer}
.mav2-pkg-card[role=button]:active{transform:scale(.995)}
#mav2PkgModalBody{max-height:72vh;overflow-y:auto}
.mav2-pkg-modal-badge{margin-bottom:12px}
.mav2-pkg-usage-h{margin:16px 0 8px;font-size:14px}
.mav2-pkg-usage-empty{font-size:13px;color:#9aa3ad;padding:8px 0}
.mav2-pkg-usage-item{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.mav2-pkg-usage-item:last-child{border-bottom:0}
.mav2-pkg-usage-row{display:flex;justify-content:space-between;gap:10px;font-weight:600;font-size:13px}
.mav2-pkg-usage-when{color:var(--mav2-text)}
.mav2-pkg-usage-amt{color:var(--mav2-primary);white-space:nowrap}
.mav2-pkg-usage-sub{font-size:12px;color:#8a929b;margin-top:2px}
.mav2-pkg-modal-book{margin-top:14px;text-decoration:none;text-align:center}

/* ── Purchase History (fn_purchase_history) ── colours/curve/font all from --mav2-* theme ── */
/* Summary card (total spent · transactions · last purchase) */
.mav2-ph-summary{display:grid;grid-template-columns:repeat(3,1fr);background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:14px 4px;margin-bottom:14px}
.mav2-ph-sum-cell{text-align:center;padding:0 6px}
.mav2-ph-sum-cell + .mav2-ph-sum-cell{border-left:1px solid rgba(0,0,0,.07)}
.mav2-ph-sum-ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;background:rgba(0,0,0,.05);color:var(--mav2-accent);font-size:15px}
.mav2-ph-sum-label{font-size:11px;color:#8a929b;line-height:1.25}
.mav2-ph-sum-num{font-size:18px;font-weight:800;color:var(--mav2-primary);margin:3px 0 1px;line-height:1.15}
.mav2-ph-sum-num.accent{color:var(--mav2-accent);font-size:15px}
.mav2-ph-sum-sub{font-size:10px;color:#9aa3ad}
/* Status badge: paid vs refund */
.mav2-ph-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.mav2-ph-badge.paid{background:rgba(22,163,74,.14);color:#16a34a}
.mav2-ph-badge.return{background:rgba(0,0,0,.06);color:#8a929b}
/* List variant (compact rows) */
.mav2-ph-listwrap{display:flex;flex-direction:column;gap:12px}
.mav2-ph-row{display:flex;align-items:center;gap:12px;background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:12px 14px;cursor:pointer}
.mav2-ph-row:active{transform:scale(.995)}
.mav2-ph-row-ico{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);color:var(--mav2-accent);font-size:16px}
.mav2-ph-row-main{flex:1;min-width:0}
.mav2-ph-row-top{display:flex;align-items:center;gap:8px}
.mav2-ph-row-date{font-weight:700;font-size:14px;color:var(--mav2-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mav2-ph-row-meta{font-size:12px;color:#8a929b;margin-top:3px}
.mav2-ph-row-total{font-weight:800;font-size:14px;color:var(--mav2-primary);white-space:nowrap;flex:0 0 auto}
.mav2-ph-row-total.return{color:#9aa3ad}
.mav2-ph-row-chev{color:#c2c8cf;font-size:13px;flex:0 0 auto}
/* Cards variant (fuller cards) */
.mav2-ph-card{background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);box-shadow:var(--mav2-shadow);padding:12px 14px;cursor:pointer}
.mav2-ph-card:active{transform:scale(.995)}
.mav2-ph-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mav2-ph-card-date{font-weight:700;font-size:14px;color:var(--mav2-text)}
.mav2-ph-card-date i{color:var(--mav2-accent);margin-right:5px}
.mav2-ph-card-body{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-top:1px dashed rgba(0,0,0,.1);padding-top:10px;margin-top:10px}
.mav2-ph-card-items{font-size:12px;color:#8a929b}
.mav2-ph-card-total{font-weight:800;font-size:18px;color:var(--mav2-primary);white-space:nowrap}
.mav2-ph-card-total.return{color:#9aa3ad}
/* Detail modal (line items) — runtime only; styles kept in sync */
#mav2PhModalBody{max-height:72vh;overflow-y:auto}
.mav2-ph-modal-badge{margin-bottom:12px}
.mav2-ph-usage-empty{font-size:13px;color:#9aa3ad;padding:8px 0}
.mav2-ph-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.mav2-ph-item:last-child{border-bottom:0}
.mav2-ph-item-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--mav2-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mav2-ph-item-qty{font-size:12px;color:#8a929b;flex:0 0 auto}
.mav2-ph-item-price{font-size:13px;font-weight:700;color:var(--mav2-text);flex:0 0 auto;white-space:nowrap}
.mav2-ph-total-row{margin-top:6px;font-weight:800}
.mav2-ph-total-row .mav2-res-dval.return{color:#9aa3ad}

/* ── Account chip + login modal ── */
.mav2-acct{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--mav2-text);
  border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:5px 10px;max-width:160px}
.mav2-acct > i{color:var(--mav2-primary)}
.mav2-logout{color:#8a929b;text-decoration:none}
.mav2-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
/* The display:flex above otherwise overrides the [hidden] attribute, leaving the
   modal permanently visible (can't close, buttons dead). This re-enables hiding. */
.mav2-modal-backdrop[hidden]{display:none}
.mav2-modal{background:var(--mav2-surface,#fff);width:100%;max-width:440px;border-radius:18px 18px 0 0;overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,.25)}
@media(min-width:560px){ .mav2-modal-backdrop{align-items:center} .mav2-modal{border-radius:18px} }
.mav2-modal-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.07);font-weight:700}
.mav2-modal-x{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:#8a929b}
.mav2-modal-b{padding:16px}
.mav2-flabel{display:block;font-size:12px;font-weight:600;color:#444;margin:8px 0 4px}
.mav2-phonerow{display:flex;gap:8px}
.mav2-phonerow .mav2-code{flex:0 0 90px}
.mav2-login-err{background:#fdecec;color:#c0392b;border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:8px}
.mav2-modal-f{padding:12px 16px;border-top:1px solid rgba(0,0,0,.07)}
.mav2-login-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:#888;font-size:12px}
.mav2-login-or::before,.mav2-login-or::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.1)}
.mav2-google-btn{display:flex;justify-content:center}

/* Map ("View map") modal — embedded Google map, no padding so the iframe fills */
.mav2-loc-modal .mav2-modal{max-width:560px}
.mav2-loc-modal-b{padding:0}
.mav2-loc-modal-b iframe{display:block;width:100%;height:60vh;max-height:480px;border:0}

/* Inline map embedded directly inside each branch block */
.mav2-loc-map{margin:10px 0;border-radius:var(--mav2-radius,12px);overflow:hidden;background:#eef2f6}
.mav2-loc-map iframe{display:block;width:100%;height:180px;border:0}

/* Product (add-to-cart) modal */
.mav2-pro-modal{max-width:460px}
.mav2-pro-modal .mav2-modal-b{max-height:70vh;overflow:auto}
.mav2-pro-img{width:100%;aspect-ratio:16/10;border-radius:var(--mav2-radius);overflow:hidden;background:linear-gradient(135deg,#eef2f6,#dfe6ee);margin-bottom:10px}
.mav2-pro-img img{width:100%;height:100%;object-fit:cover;display:block}
.mav2-pro-name{font-size:17px;font-weight:700}
.mav2-pro-short{font-size:13px;color:#8a929b;margin-top:2px}
.mav2-pro-price{font-size:18px;font-weight:800;color:var(--mav2-accent);margin:8px 0}
.mav2-pro-grp{margin:6px 0}
.mav2-pro-grp-t{font-size:13px;font-weight:700;margin:12px 0 6px}
.mav2-pro-grp-t small{font-weight:400;color:#8a929b}
.mav2-pro-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;
  border:1px solid #e6e9ee;border-radius:var(--mav2-radius);margin-bottom:6px;font-size:14px;cursor:pointer}
.mav2-pro-opt span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.mav2-pro-optp{color:var(--mav2-accent);font-weight:700;flex:0 0 auto;font-size:13px}
.mav2-aerr{color:#c0392b;font-size:12px;margin-bottom:4px}
.mav2-pro-qtyrow{display:flex;align-items:center;justify-content:space-between;margin:14px 0}
.mav2-qtystep{display:flex;align-items:center;gap:14px;border:1px solid #e0e5ec;border-radius:999px;padding:4px 14px}
.mav2-qtystep button{border:0;background:none;color:var(--mav2-primary);font-size:20px;line-height:1;cursor:pointer;width:22px}
.mav2-qtystep b{min-width:16px;text-align:center}
/* Per-add-on quantity stepper (multi-select add-on groups in the product modal). */
.mav2-addon-row{cursor:default}
.mav2-addon-nm{min-width:0}
.mav2-addon-rt{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.mav2-aqstep{display:flex;align-items:center;gap:10px;border:1px solid #e0e5ec;border-radius:999px;padding:2px 10px}
.mav2-aqstep button{border:0;background:none;color:var(--mav2-primary);font-size:18px;line-height:1;cursor:pointer;width:20px}
.mav2-aqstep b{min-width:14px;text-align:center;font-size:14px}

/* ── Bottom tab bar: icon + label on wide, icon-only on narrow ── */
/* height = 56px content bar + the safe-area strip ADDED below it (not subtracted
   from it). With the global box-sizing:border-box, padding-bottom:env() would
   otherwise eat into the 56px and squash the icons; calc() keeps the icon row a
   full 56px and lets the bar's background paint down over the home-indicator
   strip so no page background shows through. */
.mav2-tabbar{position:fixed;left:0;right:0;bottom:0;
  height:calc(56px + env(safe-area-inset-bottom));display:flex;align-items:center;
  justify-content:space-around;background:var(--mav2-surface,#fff);border-top:1px solid rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);z-index:30}
.mav2-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  flex:1;min-width:0;font-size:11px;color:#8a929b;text-decoration:none}
.mav2-tab i{font-size:18px;line-height:1}
.mav2-tab.active{color:var(--mav2-primary);font-weight:700}
.mav2-tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Narrow screens: hide labels, show icons only */
@media (max-width:380px){
  .mav2-tab-label{display:none}
  .mav2-tab i{font-size:20px}
}
/* Many tabs (>5): icon-only even on wider screens so they all fit */
.mav2-tabbar--compact .mav2-tab-label{display:none}
.mav2-tabbar--compact .mav2-tab i{font-size:20px}

/* ── QR ordering template (templates/ordering/qr.js) ── */
/* Align the list inset with the search box + category chips (all 12px). The base
   .mav2-ord uses 4px (for grid/list); qr overrides it so edges line up. */
.mav2-ord--qr{padding:0 12px}
/* Search */
.mav2-qr-searchwrap{position:relative;margin:12px 12px 4px}
.mav2-qr-searchwrap > i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9aa3ad;font-size:14px}
.mav2-qr-search{width:100%;border:1px solid #d7dde4;border-radius:var(--mav2-radius);background:var(--mav2-surface,#fff);
  padding:11px 16px 11px 38px;font-size:14px;font-family:inherit;color:var(--mav2-text);-webkit-appearance:none}
.mav2-qr-search:focus{outline:none;border-color:var(--mav2-primary)}
.mav2-qr-search::-webkit-search-cancel-button{-webkit-appearance:none}
/* "Today's Special" banner */
.mav2-qr-banner{display:flex;align-items:center;gap:12px;margin:8px 12px;padding:14px;border-radius:var(--mav2-radius);
  background:linear-gradient(135deg,color-mix(in srgb,var(--mav2-primary) 14%,var(--mav2-surface,#fff)),var(--mav2-surface,#fff));
  box-shadow:var(--mav2-shadow)}
.mav2-qr-banner-i{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:color-mix(in srgb,var(--mav2-primary) 18%,transparent);color:var(--mav2-primary);font-size:16px}
.mav2-qr-banner-tx{min-width:0}
.mav2-qr-banner-k{font-size:12px;font-weight:700;color:var(--mav2-primary)}
.mav2-qr-banner-t{font-size:15px;font-weight:800;color:var(--mav2-text)}
.mav2-qr-banner-m{font-size:12px;color:#8a929b;margin-top:1px}
/* "Special" badge + strikethrough original price on rows */
.mav2-qr-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:var(--mav2-accent);background:color-mix(in srgb,var(--mav2-accent) 15%,transparent);
  border-radius:999px;padding:1px 7px;vertical-align:middle;margin-left:4px}
.mav2-was{color:#9aa3ad;font-weight:600;margin-right:4px;font-size:12px}
/* No-result hint */
.mav2-noresult[hidden]{display:none}
/* Required-option accent in the product modal */
.mav2-req{font-weight:700;color:#c0392b}

/* Cart bar: cart icon + "N items" + running total on the left, "View Cart" on the right */
.mav2-cartbar-l{display:flex;align-items:center;gap:12px;min-width:0}
.mav2-cartbar-ico{position:relative;font-size:20px}
.mav2-cartbar-info{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mav2-cartbar-items{font-size:12px;font-weight:600;opacity:.92}
.mav2-cartbar-cnt{background:none;border-radius:0;padding:0;font-size:12px}
.mav2-cartbar-sub{font-size:15px;font-weight:800}
.mav2-cartbar-txt{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);
  border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;flex:0 0 auto}

/* Closed-store banner (business hours) — shown on ordering/cart/checkout when shut */
.mav2-closed-banner{display:flex;align-items:center;gap:10px;margin:12px;padding:12px 16px;
  background:#fff4e5;color:#8a4b00;border:1px solid #ffd9a8;border-radius:12px;
  font-size:14px;font-weight:600}
.mav2-closed-banner i{font-size:16px}
/* ── Unified toast (notify.js) — system-wide success/error/AJAX feedback ──
   Single-bar notice sliding in from the top; one channel for the whole storefront
   (see console/docs/ui/ui-notification.md). Colours are solid semantic backgrounds
   with white text; curve follows the merchant theme via --mav2-radius. */
.mav2-toast-host{position:fixed;top:0;left:0;right:0;z-index:1200;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none}
.mav2-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;
  width:100%;max-width:420px;padding:11px 14px;border-radius:var(--mav2-radius,10px);
  color:#fff;font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-14px);transition:opacity .2s ease,transform .2s ease}
.mav2-toast--show{opacity:1;transform:translateY(0)}
.mav2-toast i{font-size:16px;flex:0 0 auto}
.mav2-toast-msg{flex:1 1 auto;line-height:1.3}
.mav2-toast-x{flex:0 0 auto;background:transparent;border:0;color:#fff;opacity:.85;
  font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.mav2-toast-x:hover{opacity:1}
.mav2-toast--success{background:#16794a}
.mav2-toast--danger{background:#c0392b}
.mav2-toast--warning{background:#b45309}
.mav2-toast--info{background:#1a56b3}

/* ── Stamp cards (assets/stampcard.js) ─────────────────────────────────────────
   A punch card: a grid of slots, filled left-to-right as the customer buys.
   Every colour comes from the merchant theme vars — no hardcoded hues. */
.mav2-stamp{background:var(--mav2-surface,#fff);border-radius:var(--mav2-radius);
  box-shadow:var(--mav2-shadow);padding:14px;margin-bottom:12px}
.mav2-stamp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.mav2-stamp-name{font-size:15px;font-weight:800;color:#1f2937;line-height:1.25}
.mav2-stamp-desc{font-size:12px;color:#8a929b;margin-top:2px}
.mav2-stamp-count{font-size:22px;font-weight:800;color:var(--mav2-primary);line-height:1;white-space:nowrap}
.mav2-stamp-count span{font-size:13px;font-weight:700;color:#9aa3ad}

/* auto-fill keeps the slots a comfortable size whether the card needs 3 or 20 */
.mav2-stamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;margin-bottom:12px}
.mav2-stamp-slot{aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px dashed rgba(0,0,0,.16);color:#c3c9d0;font-size:12px;font-weight:700}
.mav2-stamp-slot.is-filled{border:2px solid var(--mav2-primary);background:var(--mav2-primary);color:#fff}
.mav2-stamp-slot svg{width:56%;height:56%;fill:currentColor;stroke:none}
/* the outline icons (scissors, tick) read as strokes, not fills */
.mav2-stamp-slot svg path{vector-effect:non-scaling-stroke}

.mav2-stamp-note{font-size:12.5px;color:#5b6570;line-height:1.4}
.mav2-stamp-note.is-done{color:var(--mav2-accent);font-weight:700}
.mav2-stamp-note a{color:var(--mav2-primary);font-weight:700;text-decoration:none}
.mav2-stamp-exp{font-size:11.5px;color:#9aa3ad;margin-top:4px}
.mav2-stamp-exp.is-soon{color:#b45309;font-weight:700}

.mav2-stamp-reward{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.12);font-size:12.5px;color:#1f2937;font-weight:600}
.mav2-stamp-gift{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--mav2-accent);padding:3px 7px;border-radius:6px;flex:0 0 auto}

.mav2-stamp-terms{margin-top:8px}
.mav2-stamp-terms summary{font-size:11.5px;color:#9aa3ad;cursor:pointer}
.mav2-stamp-terms p{font-size:11.5px;color:#6b7280;margin:6px 0 0;white-space:pre-line;line-height:1.45}

/* simple variant: one compact progress row, for embedding on Home / Membership */
.mav2-stamp--simple{padding:12px 14px}
.mav2-stamp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mav2-stamp--simple .mav2-stamp-count{font-size:15px}
.mav2-stamp-bar{height:8px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;margin-bottom:6px}
.mav2-stamp-bar i{display:block;height:100%;border-radius:999px;background:var(--mav2-primary);transition:width .3s ease}

/* ── Full card, waiting to be claimed ──────────────────────────────────────────
   The card stays full until the customer taps Claim — the reset is theirs to
   trigger. Make that state impossible to walk past. */
.mav2-stamp.is-full{box-shadow:0 0 0 2px var(--mav2-accent),var(--mav2-shadow)}
.mav2-stamp.is-full .mav2-stamp-slot.is-filled{animation:mav2StampPop 2.4s ease-in-out infinite}
/* stagger so the ring reads as a wave rather than one blinking block */
.mav2-stamp.is-full .mav2-stamp-slot:nth-child(2n){animation-delay:.15s}
.mav2-stamp.is-full .mav2-stamp-slot:nth-child(3n){animation-delay:.3s}
@keyframes mav2StampPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.08)}}

/* The pulse is a glow, never a transform: a button that changes size also moves
   its own hit area under a thumb that is already on its way down. */
.mav2-stamp-claim{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:10px;padding:12px 14px;border:0;border-radius:calc(var(--mav2-radius) - 4px);
  background:var(--mav2-accent);color:#fff;font-size:14px;font-weight:800;line-height:1;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  animation:mav2ClaimGlow 2.2s ease-in-out infinite}
.mav2-stamp-claim svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.mav2-stamp-claim:active{filter:brightness(.94)}
.mav2-stamp-claim.is-busy,.mav2-stamp-claim:disabled{opacity:.65;animation:none;cursor:default}
@keyframes mav2ClaimGlow{
  0%,100%{box-shadow:0 4px 12px -6px var(--mav2-accent)}
  50%{box-shadow:0 6px 22px -4px var(--mav2-accent)}}

.mav2-stamp-err{margin-top:8px;font-size:12px;font-weight:600;color:#b91c1c;line-height:1.4}

/* ── Reward unlocked (the payoff for tapping Claim) ────────────────────────────
   Full-screen, appended to <body>. Confetti is plain absolutely-positioned
   elements with per-piece inline delay/drift — no library, because some MY
   mobile networks block the public CDNs and a blocked celebration is a broken
   feature. Honours prefers-reduced-motion via .is-plain. */
.mav2-reward-pop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(17,24,39,.62);backdrop-filter:blur(2px);overflow:hidden;
  animation:mav2RewardFade .2s ease-out}
@keyframes mav2RewardFade{from{opacity:0}to{opacity:1}}

.mav2-reward-box{position:relative;z-index:1;width:100%;max-width:320px;text-align:center;
  background:var(--mav2-surface,#fff);border-radius:calc(var(--mav2-radius) + 4px);
  padding:26px 20px 20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  animation:mav2RewardIn .5s cubic-bezier(.18,.89,.32,1.28)}
@keyframes mav2RewardIn{from{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:none}}

.mav2-reward-gift{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--mav2-accent);color:#fff;box-shadow:0 0 0 8px rgba(0,0,0,.04);
  animation:mav2RewardGift 1.1s ease-in-out .25s both}
.mav2-reward-gift svg{width:32px;height:32px;fill:currentColor}
@keyframes mav2RewardGift{
  0%{transform:scale(.6) rotate(-12deg)}
  40%{transform:scale(1.12) rotate(8deg)}
  60%{transform:scale(1) rotate(-4deg)}
  100%{transform:scale(1) rotate(0)}}

.mav2-reward-head{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mav2-accent)}
.mav2-reward-name{font-size:19px;font-weight:800;color:#1f2937;margin-top:6px;line-height:1.3}
.mav2-reward-amt{font-size:30px;font-weight:800;color:var(--mav2-primary);margin-top:4px;line-height:1}
.mav2-reward-code{margin-top:14px;padding:10px;border-radius:10px;background:rgba(0,0,0,.045);
  border:1px dashed rgba(0,0,0,.16)}
.mav2-reward-code span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#9aa3ad}
.mav2-reward-code b{display:block;margin-top:3px;font-size:20px;font-weight:800;letter-spacing:.12em;
  color:#1f2937;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mav2-reward-sub{font-size:12px;color:#6b7280;line-height:1.45;margin:12px 0 0}
.mav2-reward-link{display:block;margin-top:12px;font-size:13px;font-weight:700;
  color:var(--mav2-primary);text-decoration:none}
.mav2-reward-done{width:100%;margin-top:12px;padding:11px;border:0;border-radius:10px;
  background:var(--mav2-primary);color:#fff;font-size:14px;font-weight:800;cursor:pointer;
  -webkit-appearance:none;appearance:none}

.mav2-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mav2-confetti-bit{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation-name:mav2ConfettiFall;animation-timing-function:cubic-bezier(.25,.6,.5,1);
  animation-fill-mode:forwards}
@keyframes mav2ConfettiFall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  10%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--drift,0),82vh,0) rotate(var(--spin,360deg))}}

/* Reduced motion: keep the moment, drop the movement. */
.mav2-reward-pop.is-plain{animation:none}
.mav2-reward-pop.is-plain .mav2-reward-box,
.mav2-reward-pop.is-plain .mav2-reward-gift{animation:none}
@media (prefers-reduced-motion:reduce){
  .mav2-stamp.is-full .mav2-stamp-slot.is-filled,
  .mav2-stamp-claim{animation:none}
}