/* =========================================================
   MANTIQTI — customer UI design tokens + components
   Plain CSS, no framework. Ready to move into Laravel Blade.
   ========================================================= */

:root {
  /* Brand */
  --mq-primary: #1E3A8A;
  --mq-primary-hover: #172E6E;
  --mq-primary-50: #EEF2FB;
  --mq-primary-100: #DCE4F7;
  --mq-accent: #F59E0B;
  --mq-accent-50: #FEF5E4;
  --mq-accent-200: #F9D79A;
  --mq-accent-ink: #8A4B00;

  /* Neutrals (warm) */
  --mq-bg: #F7F6F2;
  --mq-surface: #FFFFFF;
  --mq-surface-2: #F1EFE9;
  --mq-ink: #16192B;
  --mq-ink-2: #474C61;
  --mq-ink-3: #636879;
  --mq-line: #E4E1D8;

  /* Status */
  --mq-success: #15803D;
  --mq-success-50: #E7F5EC;
  --mq-danger: #B42318;
  --mq-danger-50: #FCEBE9;
  --mq-info: #075985;
  --mq-info-50: #E3F2FB;

  /* Type */
  --mq-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mq-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Spacing */
  --mq-s1: 4px; --mq-s2: 8px; --mq-s3: 12px; --mq-s4: 16px;
  --mq-s5: 20px; --mq-s6: 24px; --mq-s8: 32px; --mq-s10: 40px;

  /* Radius */
  --mq-r-sm: 8px; --mq-r: 12px; --mq-r-lg: 16px; --mq-r-xl: 24px; --mq-r-full: 999px;

  --mq-shadow: 0 1px 2px rgba(22,25,43,.06), 0 4px 16px rgba(22,25,43,.06);
  --mq-shadow-up: 0 -4px 20px rgba(22,25,43,.08);
}

/* Dark mode */
[data-theme="dark"], .mq-dark {
  --mq-primary: #8FA9F0;
  --mq-primary-hover: #A9BDF4;
  --mq-primary-50: #1B2440;
  --mq-primary-100: #26335A;
  --mq-accent: #F7B13A;
  --mq-accent-50: #33270F;
  --mq-accent-200: #5A4317;
  --mq-accent-ink: #F7C66E;
  --mq-bg: #0F1220;
  --mq-surface: #181C2E;
  --mq-surface-2: #22263A;
  --mq-ink: #F2F3F7;
  --mq-ink-2: #C3C6D3;
  --mq-ink-3: #9EA2B3;
  --mq-line: #2D3247;
  --mq-success: #4ADE80; --mq-success-50: #13291C;
  --mq-danger: #F87171; --mq-danger-50: #331616;
  --mq-info: #7DD3FC; --mq-info-50: #102633;
}

/* ---------- Base ---------- */
.mq { font-family: var(--mq-font); color: var(--mq-ink); background: var(--mq-bg); font-size: 15px; line-height: 1.55; box-sizing: border-box; }
.mq *, .mq *::before, .mq *::after { box-sizing: border-box; }
.mq-screen { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mq-scroll { flex: 1; display: flex; flex-direction: column; padding-bottom: 96px; }
.mq h1, .mq h2, .mq h3, .mq p { margin: 0; }
.mq-h1 { font-family: var(--mq-display); font-size: 24px; font-weight: 700; line-height: 1.3; }
.mq-h2 { font-family: var(--mq-display); font-size: 18px; font-weight: 700; line-height: 1.35; }
.mq-h3 { font-size: 16px; font-weight: 700; }
.mq-muted { color: var(--mq-ink-3); font-size: 13px; }
.mq-small { font-size: 13px; }
.mq-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.mq-clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mq-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mq-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mq-ic--sm { width: 16px; height: 16px; }
.mq-ic--lg { width: 28px; height: 28px; }
[dir="rtl"] .mq-flip { transform: scaleX(-1); }
.mq-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mq-s3); }
.mq-stack { display: flex; flex-direction: column; gap: var(--mq-s3); }
.mq-divider { height: 1px; background: var(--mq-line); border: 0; margin: 0; }
.mq-optional { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--mq-info); background: var(--mq-info-50); border: 1px dashed var(--mq-info); border-radius: var(--mq-r-full); padding: 1px 8px; }

/* ---------- Header ---------- */
.mq-header { background: var(--mq-surface); border-bottom: 1px solid var(--mq-line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.mq-header__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mq-header__actions { display: flex; align-items: center; gap: 2px; }
.mq-logo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--mq-primary); font-family: var(--mq-display); font-weight: 800; font-size: 22px; min-height: 44px; }
.mq-logo svg { width: 24px; height: 30px; }
.mq-region { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 14px; border-radius: var(--mq-r-full); background: var(--mq-primary-50); color: var(--mq-primary); border: 0; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; align-self: flex-start; }
.mq-region span { color: var(--mq-ink-3); font-weight: 500; }
.mq-iconbtn { width: 44px; height: 44px; border-radius: var(--mq-r); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--mq-ink); position: relative; text-decoration: none; cursor: pointer; }
.mq-iconbtn .mq-ic { width: 22px; height: 22px; }
.mq-count { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--mq-r-full); background: var(--mq-accent); color: #16192B; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mq-lang { min-width: 44px; height: 44px; border-radius: var(--mq-r); border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; color: var(--mq-ink-2); cursor: pointer; }
.mq-topbar { background: var(--mq-surface); border-bottom: 1px solid var(--mq-line); display: flex; align-items: center; gap: 4px; padding: 6px 8px; min-height: 56px; }
.mq-topbar__title { font-weight: 700; font-size: 16px; flex: 1; }

/* ---------- Search ---------- */
.mq-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--mq-surface); border: 1.5px solid var(--mq-line); color: var(--mq-ink-3); }
.mq-search--filled { background: var(--mq-surface-2); border-color: transparent; }
.mq-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--mq-ink); outline: none; }
.mq-search input::placeholder { color: var(--mq-ink-3); }

/* ---------- Sections ---------- */
.mq-section { padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.mq-section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mq-link { color: var(--mq-primary); font-weight: 600; font-size: 14px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Avatar (store logo fallback) ---------- */
.mq-avatar { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mq-display); font-weight: 700; font-size: 20px; color: #fff; flex: none; }
.mq-avatar--lg { width: 72px; height: 72px; border-radius: 20px; font-size: 30px; }
.mq-avatar--sm { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.mq-av-1 { background: #1E3A8A; } .mq-av-2 { background: #A1520A; } .mq-av-3 { background: #0F766E; }
.mq-av-4 { background: #6D28D9; } .mq-av-5 { background: #BE123C; } .mq-av-6 { background: #374151; }

/* ---------- Store cards ---------- */
.mq-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mq-store-card { background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-r-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.mq-store-card__name { font-weight: 700; font-size: 15px; }
.mq-store-row { background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-r-lg); padding: 12px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-height: 72px; }
.mq-store-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mq-store-feature { background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-r-xl); padding: 18px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.mq-chips { display: flex; gap: 8px; overflow: hidden; }
.mq-chip { flex: none; height: 36px; padding: 0 14px; border-radius: var(--mq-r-full); background: var(--mq-surface); border: 1px solid var(--mq-line); font: inherit; font-size: 13px; font-weight: 600; color: var(--mq-ink-2); display: inline-flex; align-items: center; }
.mq-chip--on { background: var(--mq-primary); border-color: var(--mq-primary); color: #fff; }

/* ---------- Product cards ---------- */
.mq-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mq-product { background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-r-lg); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.mq-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; }
.mq-img .mq-ic { width: 34px; height: 34px; stroke-width: 1.5; opacity: .75; }
.mq-tint-1 { background: #E6ECF9; color: #1E3A8A; } .mq-tint-2 { background: #FBEBD2; color: #8A4B00; }
.mq-tint-3 { background: #DDF1EC; color: #0F766E; } .mq-tint-4 { background: #ECE4FB; color: #6D28D9; }
.mq-tint-5 { background: #FBE3E8; color: #BE123C; } .mq-tint-6 { background: #ECEAE4; color: #636879; }
.mq-product__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mq-product__name { font-size: 14px; font-weight: 600; line-height: 1.45; min-height: 2.9em; }
.mq-product__store { font-size: 12px; color: var(--mq-ink-3); display: flex; align-items: center; gap: 4px; min-width: 0; }
.mq-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.mq-price { font-weight: 700; font-size: 15px; color: var(--mq-ink); white-space: nowrap; }
.mq-price small { font-size: 12px; font-weight: 600; color: var(--mq-ink-3); }
.mq-price--lg { font-size: 24px; font-family: var(--mq-display); }
.mq-add { width: 44px; height: 44px; border-radius: var(--mq-r); background: var(--mq-primary); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.mq-add[disabled] { background: var(--mq-surface-2); color: #A3A6B2; cursor: not-allowed; }
.mq-product--out .mq-img { opacity: .5; filter: grayscale(1); }
.mq-product--out .mq-product__name, .mq-product--out .mq-price { color: var(--mq-ink-3); }

/* ---------- Badges ---------- */
.mq-badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--mq-r-full); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mq-badge--onimg { position: absolute; top: 8px; inset-inline-start: 8px; }
.mq-badge--out { background: #3F4354; color: #fff; }
.mq-badge--low { background: var(--mq-accent-50); color: var(--mq-accent-ink); }
.mq-badge--ok { background: var(--mq-success-50); color: var(--mq-success); }
.mq-badge--awaiting { background: var(--mq-accent-50); color: var(--mq-accent-ink); }
.mq-badge--cod { background: var(--mq-primary-50); color: var(--mq-primary); }
.mq-badge--paid { background: var(--mq-success-50); color: var(--mq-success); }
.mq-badge--shipping { background: var(--mq-info-50); color: var(--mq-info); }
.mq-badge--delivered { background: var(--mq-success); color: #fff; }
.mq-badge--cancelled { background: var(--mq-danger-50); color: var(--mq-danger); }
.mq-badge--review { background: var(--mq-accent-50); color: var(--mq-accent-ink); }
.mq-badge--rejected { background: var(--mq-danger-50); color: var(--mq-danger); }
.mq-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Buttons ---------- */
.mq-btn { min-height: 48px; padding: 0 20px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mq-btn--primary { background: var(--mq-primary); color: #fff; }
.mq-btn--accent { background: var(--mq-accent); color: #16192B; }
.mq-btn--ghost { background: var(--mq-surface); color: var(--mq-primary); border: 1.5px solid var(--mq-primary-100); }
.mq-btn--soft { background: var(--mq-primary-50); color: var(--mq-primary); }
.mq-btn--danger { background: var(--mq-danger); color: #fff; }
.mq-btn--text { background: transparent; color: var(--mq-primary); padding: 0 8px; }
.mq-btn--block { width: 100%; }
.mq-btn--sm { min-height: 44px; font-size: 14px; padding: 0 14px; border-radius: 12px; }
.mq-btn[disabled] { background: var(--mq-surface-2); color: #A3A6B2; cursor: not-allowed; }

/* ---------- Forms ---------- */
.mq-field { display: flex; flex-direction: column; gap: 6px; }
.mq-label { font-size: 14px; font-weight: 600; color: var(--mq-ink); }
.mq-label em { color: var(--mq-danger); font-style: normal; }
.mq-input { height: 48px; width: 100%; border: 1.5px solid var(--mq-line); border-radius: var(--mq-r); padding: 0 14px; font: inherit; font-size: 15px; background: var(--mq-surface); color: var(--mq-ink); }
textarea.mq-input { height: 88px; padding: 12px 14px; resize: none; }
.mq-input--error { border-color: var(--mq-danger); background: var(--mq-danger-50); }
.mq-input[readonly] { background: var(--mq-surface-2); color: var(--mq-ink-2); }
.mq-input--ltr { direction: ltr; text-align: right; }
.mq-hint { font-size: 12px; color: var(--mq-ink-3); }
.mq-error { color: var(--mq-danger); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mq-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--mq-r); font-size: 14px; }
.mq-alert--danger { background: var(--mq-danger-50); color: var(--mq-danger); }
.mq-alert--warn { background: var(--mq-accent-50); color: var(--mq-accent-ink); }
.mq-alert--info { background: var(--mq-primary-50); color: var(--mq-primary); }

/* ---------- Cards / panels ---------- */
.mq-card { background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mq-sumrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--mq-ink-2); }
.mq-sumrow--total { font-size: 17px; font-weight: 800; color: var(--mq-ink); }

/* Checkout steps */
.mq-step { display: flex; align-items: center; gap: 10px; }
.mq-step__num { width: 28px; height: 28px; border-radius: 50%; background: var(--mq-primary); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Payment option */
.mq-option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--mq-line); border-radius: 14px; background: var(--mq-surface); min-height: 64px; cursor: pointer; }
.mq-option--on { border-color: var(--mq-primary); background: var(--mq-primary-50); }
.mq-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mq-line); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--mq-surface); }
.mq-option--on .mq-radio { border-color: var(--mq-primary); }
.mq-option--on .mq-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mq-primary); }
.mq-option__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--mq-surface-2); color: var(--mq-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mq-option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* CliQ copy box + upload */
.mq-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--mq-surface); border: 1.5px dashed var(--mq-primary-100); border-radius: var(--mq-r); padding: 6px 6px 6px 6px; padding-inline-start: 14px; }
.mq-copy__value { font-weight: 700; font-size: 16px; direction: ltr; letter-spacing: .02em; }
.mq-upload { border: 1.5px dashed var(--mq-line); border-radius: var(--mq-r-lg); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--mq-ink-2); background: var(--mq-surface); }
.mq-upload--error { border-color: var(--mq-danger); background: var(--mq-danger-50); }
.mq-upload--done { flex-direction: row; text-align: start; border-style: solid; }
.mq-thumb { width: 56px; height: 56px; border-radius: 10px; flex: none; }

/* Qty stepper */
.mq-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--mq-line); border-radius: var(--mq-r); background: var(--mq-surface); height: 44px; }
.mq-qty button { width: 44px; height: 42px; border: 0; background: transparent; color: var(--mq-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mq-qty span { min-width: 28px; text-align: center; font-weight: 700; }
.mq-qty--lg { height: 52px; } .mq-qty--lg button { height: 50px; width: 48px; }

/* Cart line */
.mq-line { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.mq-line .mq-img { width: 72px; height: 72px; border-radius: 12px; flex: none; aspect-ratio: auto; }
.mq-line .mq-img .mq-ic { width: 24px; height: 24px; }
.mq-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Bottom bars */
.mq-bottombar { position: absolute; bottom: 0; inset-inline: 0; background: var(--mq-surface); border-top: 1px solid var(--mq-line); box-shadow: var(--mq-shadow-up); padding: 12px 16px 24px; display: flex; align-items: center; gap: 12px; }
.mq-bottomnav { position: absolute; bottom: 0; inset-inline: 0; background: var(--mq-surface); border-top: 1px solid var(--mq-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 4px 18px; }
.mq-bottomnav a { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--mq-ink-3); text-decoration: none; }
.mq-bottomnav a.is-active { color: var(--mq-primary); font-weight: 700; }
.mq-cartbar { position: absolute; bottom: 0; inset-inline: 0; padding: 10px 12px 22px; background: linear-gradient(to top, var(--mq-bg) 70%, transparent); }
.mq-cartbar__inner { background: var(--mq-primary); color: #fff; border-radius: 16px; padding: 8px 8px 8px 8px; padding-inline-start: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: var(--mq-shadow); }
.mq-cartbar__inner .mq-btn { min-height: 44px; }

/* Modal / sheet */
.mq-backdrop { position: absolute; inset: 0; background: rgba(15,18,32,.55); display: flex; align-items: flex-end; }
.mq-sheet { background: var(--mq-surface); border-radius: 24px 24px 0 0; padding: 12px 20px 28px; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.mq-sheet__grip { width: 40px; height: 4px; border-radius: 4px; background: var(--mq-line); align-self: center; }
.mq-modal-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--mq-accent-50); color: var(--mq-accent-ink); display: inline-flex; align-items: center; justify-content: center; }

/* Toast */
.mq-toast { display: flex; align-items: center; gap: 10px; background: #16192B; color: #fff; border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; box-shadow: var(--mq-shadow); }
.mq-toast .mq-ic { color: #4ADE80; }
.mq-toast--error .mq-ic { color: #F87171; }
.mq-toast a { color: var(--mq-accent); margin-inline-start: auto; font-weight: 700; text-decoration: none; }

/* Skeleton */
.mq-skel { background: #E9E6DE; border-radius: 8px; }

/* Empty state */
.mq-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 24px; }
.mq-empty__art { width: 96px; height: 96px; border-radius: 32px; background: var(--mq-primary-50); color: var(--mq-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.mq-empty__art .mq-ic { width: 40px; height: 40px; stroke-width: 1.6; }

/* Timeline */
.mq-timeline { display: flex; flex-direction: column; }
.mq-tl { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.mq-tl::before { content: ""; position: absolute; inset-inline-start: 11px; top: 24px; bottom: 0; width: 2px; background: var(--mq-line); }
.mq-tl:last-child::before { display: none; }
.mq-tl__dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mq-line); background: var(--mq-surface); flex: none; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.mq-tl--done .mq-tl__dot { background: var(--mq-success); border-color: var(--mq-success); color: #fff; }
.mq-tl--done::before { background: var(--mq-success); }
.mq-tl--now .mq-tl__dot { border-color: var(--mq-primary); }
.mq-tl--now .mq-tl__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mq-primary); }
.mq-tl__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.mq-tl--todo .mq-tl__text { color: var(--mq-ink-3); }

/* Store-owner CTA */
.mq-cta { background: var(--mq-accent-50); border: 1px solid var(--mq-accent-200); border-radius: var(--mq-r-xl); padding: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Footer */
.mq-footer { background: #16192B; color: #C9CCD8; padding: 28px 16px 120px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.mq-footer a { color: #E8EAF2; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mq-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

/* Wallet */
.mq-balance { background: var(--mq-primary); color: #fff; border-radius: var(--mq-r-xl); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.mq-balance__value { font-family: var(--mq-display); font-size: 38px; font-weight: 700; line-height: 1.2; }
.mq-balance__value small { font-size: 16px; font-weight: 500; opacity: .85; }

/* Tabs */
.mq-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--mq-surface-2); border-radius: 14px; padding: 4px; }
.mq-tabs a { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--mq-ink-2); text-decoration: none; }
.mq-tabs a.is-active { background: var(--mq-surface); color: var(--mq-primary); box-shadow: var(--mq-shadow); }

/* List menu (account) */
.mq-menu { background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-r-lg); overflow: hidden; }
.mq-menu a, .mq-menu button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; text-decoration: none; color: var(--mq-ink); font: inherit; font-weight: 600; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--mq-line); cursor: pointer; }
.mq-menu > :last-child { border-bottom: 0; }
.mq-menu .mq-grow { flex: 1; text-align: start; }

/* Canvas helpers (presentation only, not for Blade) */
.mq-board { background: #DCD9D0; display: flex; gap: 40px; padding: 0; align-items: flex-start; }
.mq-board__phone { width: 375px; flex: none; }
.mq-board__label { font-family: var(--mq-font); font-size: 13px; font-weight: 700; color: #474C61; margin-bottom: 8px; }

/* ---------- Desktop ---------- */
.mq-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mq-dheader { background: var(--mq-surface); border-bottom: 1px solid var(--mq-line); }
.mq-dheader__row { display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; padding: 8px 0; }
.mq-dheader .mq-search { flex: 1 1 320px; max-width: 560px; }
.mq-dgrid-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mq-dgrid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.mq-dhero { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 40px 0 32px; }
.mq-dhero__text { flex: 999 1 420px; display: flex; flex-direction: column; gap: 16px; }
.mq-dfooter { background: #16192B; color: #C9CCD8; padding: 40px 0; font-size: 14px; }
.mq-dfooter a { color: #E8EAF2; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* =========================================================
   Page shell — used by the exported HTML pages (not the canvas)
   Mobile-first: phone screens are centred and capped at 600px,
   bars stick to the viewport.
   ========================================================= */
html, body { margin: 0; background: var(--mq-bg); }
body { font-family: var(--mq-font); -webkit-font-smoothing: antialiased; }
.mq-page { width: 100%; max-width: 600px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.mq-page .mq-header, .mq-page .mq-topbar { position: sticky; top: 0; z-index: 10; }
.mq-page .mq-bottombar, .mq-page .mq-bottomnav, .mq-page .mq-cartbar { position: fixed; width: 100%; max-width: 600px; margin: 0 auto; z-index: 20; }
.mq-page .mq-bottombar, .mq-page .mq-bottomnav { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.mq-page .mq-backdrop { position: fixed; z-index: 50; justify-content: center; }
.mq-page .mq-sheet { max-width: 600px; }
@media (min-width: 640px) {
  .mq-page .mq-backdrop { align-items: center; }
  .mq-page .mq-sheet { border-radius: 24px; max-width: 440px; }
  .mq-page .mq-sheet__grip { display: none; }
}
/* Reference galleries (design-system.html, states.html) */
.mq-gallery { overflow-x: auto; }
.mq-board__label { font-family: var(--mq-font); }
/* Copy feedback */
.mq-copy.is-copied .mq-btn { background: var(--mq-success-50); color: var(--mq-success); }
.mq-toast-host { position: fixed; inset-inline: 0; bottom: 96px; display: flex; justify-content: center; z-index: 60; pointer-events: none; padding: 0 16px; }
.mq-toast-host .mq-toast { pointer-events: auto; max-width: 420px; width: 100%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}