/* MenuCraft - look templates for the customer page. Same HTML for all; only variables + layout rules.
   brand.js sets data-template on <html>. "classic" is the base look in style.css (no rules needed). */

/* ---------- grid: two photo cards per row ---------- */
[data-template="grid"] #menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-template="grid"] #menu > :not(.item) { grid-column: 1 / -1; }
[data-template="grid"] .item { flex-direction: column; margin-bottom: 0; padding: 0; overflow: hidden; }
[data-template="grid"] .item .pic { width: 100%; height: 120px; flex: 0 0 120px; border-radius: 0; }
[data-template="grid"] .item .body { padding: 10px 12px 12px; }
[data-template="grid"] .item .row { flex-wrap: wrap; }
@media (min-width: 560px) { [data-template="grid"] #menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- minimal: compact text list, no photos ---------- */
[data-template="minimal"] .item { box-shadow: none; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; margin-bottom: 0; }
[data-template="minimal"] .item .pic { display: none; }
[data-template="minimal"] .item h3 { font-size: 16px; }
[data-template="minimal"] .cat-title { font-size: 18px; border-bottom: 2px solid var(--brand); padding-bottom: 4px; }

/* ---------- dark ---------- */
[data-template="dark"] {
  --bg: #14110f; --card: #1f1a17; --ink: #f3ece6; --muted: #b8aaa0; --line: #3a322c; --shadow: 0 2px 10px rgba(0, 0, 0, .5);
  --surface: #1f1a17; --surface-2: #332b26; --pic-bg: #2a231f;
  --ok: #7ad39a; --ok-bg: #12301c; --warn: #ffd37a; --warn-bg: #3a2c0a; --bad: #ff9a92; --bad-bg: #3d1916;
  --info: #a9cbff; --info-bg: #12263f;
  color-scheme: dark;
}
[data-template="dark"] .info-box { border-color: #2a4a75; }
[data-template="dark"] .btn.ghost:hover { background: var(--brand-soft); }
[data-template="dark"] .overlay { background: rgba(0, 0, 0, .65); }
[data-template="dark"] .toast { background: #f3ece6; color: #14110f; }
[data-template="dark"] .map-box { background: #2a231f; }
[data-template="dark"] .lang-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }