/* Synara v2 shared styles. Works from phone width up. */
/* ---------- Colours ----------
   A colour scheme is only this list. To change the look of the whole site,
   change the values here. Other schemes are at the bottom of this file and
   can be tried on any page by adding ?theme=emerald (or royal, violet,
   charcoal) to the address.
     --brand   headers of the agent, rider and admin pages, links, "selected"
     --accent  the button that does the next thing (add to cart, pay, save)
     --bar-*   the buyer's top bar
     green (--ok) only ever means paid or done */
:root {
  /* "Synara": the blues of the logo, with gold for the button that does the next thing. */
  --brand: #0a5fd0;
  --brand-2: #0a7de8;
  --brand-deep: #062a78;
  --brand-soft: #e8f2ff;
  --brand-grad: linear-gradient(90deg, #062a78, #0a5fd0 45%, #12a4ee);
  --accent: #ffb81c;
  --accent-dark: #f2a400;
  --accent-ink: #1a1200;
  --accent-soft: #fff5d6;
  --bar-bg: #ffffff;
  --bar-ink: #0b1530;
  --bar-line: #e4e7ec;
  --bar-edge: #cfd8e6;
  --search-btn: var(--brand);
  --search-ink: #ffffff;
  --strip-bg: #e8f2ff;
  --strip-ink: #062a78;
  --cat-bg: var(--brand-grad);
  --cat-ink: #ffffff;
  --cat-on: #ffd34d;
  --focus: #8cc4ff;
  --star: #f5a623;
  --ok: #0f8a5f;
  --ok-soft: #e6f6ef;
  --ink: #0f1728;
  --muted: #5d6673;
  --line: #e4e7ec;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --red: #b91c1c;
  --red-soft: #fef2f2;
  --amber: #92400e;
  --amber-soft: #fffbeb;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.15rem; }
a { color: var(--brand-2); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* Top bar */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; position: sticky; top: 0; z-index: 5;
}
.topbar img { height: 36px; width: auto; display: block; }
.topbar .who { margin-left: auto; text-align: right; min-width: 0; }
.topbar .who strong { display: block; overflow-wrap: anywhere; }

.page { max-width: 1040px; margin: 0 auto; padding: 20px 16px 56px; display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

/* Sign-in style pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; background: linear-gradient(160deg, var(--brand-soft), var(--bg) 55%); }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.auth-card.wide { max-width: 620px; }
.auth-card .logo { height: 64px; width: auto; align-self: center; }
.auth-card h1 { text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); }

/* Forms */
form { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
label, .label { font-weight: 600; font-size: 0.88rem; }
.hint { font-size: 0.82rem; color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; min-width: 0;
}
textarea { min-height: 84px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand);
}
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
legend { font-weight: 700; padding: 0 6px; }

/* Buttons */
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 10px 16px;
  border: 1.5px solid var(--brand); background: var(--brand); color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover { background: var(--brand-2); border-color: var(--brand-2); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--brand-2); }
button.secondary:hover, .btn.secondary:hover { background: var(--brand-soft); }
button.danger { background: var(--surface); color: var(--red); border-color: #fca5a5; }
button.danger:hover { background: var(--red-soft); }
button.small { padding: 6px 10px; font-size: 0.85rem; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Messages */
.notice { border-radius: 8px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.notice.error { color: var(--red); background: var(--red-soft); border-color: #fecaca; }
.notice.ok { color: var(--brand-2); background: var(--brand-soft); border-color: #a7f3d0; }
.notice.warn { color: var(--amber); background: var(--amber-soft); border-color: #fde68a; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; max-width: calc(100% - 32px);
}
.toast.error { background: var(--red); }

/* Tabs and pills */
.btn.small { padding: 6px 12px; font-size: 0.88rem; }
.btn[aria-current="page"] { background: var(--brand); color: #fff; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { background: var(--surface); color: var(--ink); border-color: var(--line); padding: 7px 12px; }
.tabs button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.pill { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #e2e8f0; color: var(--ink); white-space: nowrap; }
.pill.ok { background: #d1fae5; color: #065f46; }
.pill.warn { background: #fef3c7; color: var(--amber); }
.pill.bad { background: #fee2e2; color: var(--red); }

/* Tables. On phones each row becomes a card. */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: #f1f5f9; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; }
td.actions button { margin-right: 4px; }
.thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #e2e8f0; display: block; }
.thumb.empty { display: grid; place-items: center; color: var(--muted); font-size: 0.7rem; }
.name-cell { display: flex; gap: 10px; align-items: center; min-width: 0; }
.name-cell > div { min-width: 0; overflow-wrap: anywhere; }
.empty-state { background: var(--surface); border: 1px dashed #cbd5e1; border-radius: var(--radius); padding: 28px 18px; text-align: center; color: var(--muted); }

/* Dialogs */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(620px, calc(100% - 24px)); max-height: calc(100% - 24px); color: var(--ink); }
dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
dl.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
dl.details dt { color: var(--muted); }
dl.details dd { margin: 0; overflow-wrap: anywhere; }

/* Product photo picker */
.photos { display: flex; gap: 10px; flex-wrap: wrap; }
.photo { position: relative; width: 84px; height: 84px; }
.photo img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: #e2e8f0; display: block; }
.photo button { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--ink); border-color: var(--ink); color: #fff; font-size: 0.9rem; line-height: 1; }

@media (max-width: 640px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { border-bottom: 1px solid var(--line); padding: 10px 12px; }
  table.cards tr:last-child { border-bottom: 0; }
  table.cards td { border: 0; padding: 3px 0; text-align: left; }
  table.cards td.num { text-align: left; }
  table.cards td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.85rem; }
  table.cards td.actions { padding-top: 8px; white-space: normal; }
  .topbar .who { margin-left: 0; text-align: left; width: 100%; }
}

/* ---------- Storefront ---------- */
.shopbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.shopbar-inner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shopbar img { height: 34px; width: auto; display: block; }
.shopbar .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.1rem; }
.shopbar form.search { flex: 1 1 220px; flex-direction: row; gap: 8px; min-width: 0; }
.shopbar form.search input { flex: 1; }
.cart-link { position: relative; text-decoration: none; font-weight: 700; color: var(--ink); border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 14px; background: var(--surface); white-space: nowrap; }
.cart-link:hover { border-color: var(--brand); }
.cart-count { display: inline-block; min-width: 22px; text-align: center; background: var(--brand); color: #fff; border-radius: 999px; padding: 0 7px; margin-left: 6px; font-size: 0.85rem; }
.strip { background: var(--brand-2); color: #fff; text-align: center; font-size: 0.85rem; padding: 6px 16px; }
.shop-page { max-width: 1100px; margin: 0 auto; padding: 18px 16px 56px; display: flex; flex-direction: column; gap: 18px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chips a { flex: 0 0 auto; text-decoration: none; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.9rem; }
.chips a[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); position: relative; }
.card:hover { border-color: var(--brand); }
.card .pic, .gallery .main { aspect-ratio: 1 / 1; width: 100%; max-width: 100%; object-fit: cover; background: #e2e8f0; display: block; }
.pic.empty, .main.empty { display: grid; place-items: center; color: var(--muted); font-size: 0.85rem; }
.card .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card .title { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { font-weight: 800; font-size: 1.05rem; }
.was { color: var(--muted); text-decoration: line-through; font-size: 0.85rem; font-weight: 400; margin-left: 6px; }
.badge { position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff; font-weight: 700; font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; }
.badge.out { background: var(--ink); }
.center { display: flex; justify-content: center; }
.shop-footer { border-top: 1px solid var(--line); background: var(--surface); }
.shop-footer div { max-width: 1100px; margin: 0 auto; padding: 18px 16px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.9rem; }

/* Product page */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gallery .main { border-radius: var(--radius); border: 1px solid var(--line); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs button { padding: 0; width: 62px; height: 62px; border-radius: 8px; border: 2px solid var(--line); background: #e2e8f0; overflow: hidden; }
.thumbs button[aria-pressed="true"] { border-color: var(--brand); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buybox { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.buybox h1 { overflow-wrap: anywhere; }
.buybox .price { font-size: 1.6rem; }
.qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.qty button { border: 0; border-radius: 0; background: var(--surface); color: var(--ink); padding: 8px 14px; font-size: 1.1rem; }
.qty button:hover { background: var(--brand-soft); }
.qty output, .qty span { min-width: 40px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.desc { white-space: pre-line; overflow-wrap: anywhere; }

/* Cart, checkout, order */
.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; padding-bottom: 0; }
.line img, .line .pic { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #e2e8f0; aspect-ratio: auto; }
.line .pic.empty { font-size: 0.65rem; }
.line .meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.line .end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sums { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; }
.sums dt { color: var(--muted); }
.sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sums .total { font-weight: 800; font-size: 1.15rem; color: var(--ink); border-top: 1px solid var(--line); padding-top: 8px; }
.ref { font-family: ui-monospace, Consolas, monospace; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; }
.link-button { background: none; border: 0; padding: 0; color: var(--red); font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-button:hover { background: none; }

@media (max-width: 760px) {
  .product, .two-col { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Deliveries: shop orders, rider app, codes */
.page.narrow { max-width: 640px; }
.jobs { display: flex; flex-direction: column; gap: 14px; }
.job .ref { font-size: 1.05rem; }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.code-box { display: flex; flex-direction: column; gap: 4px; background: var(--brand-soft); border: 1px dashed var(--brand); border-radius: var(--radius); padding: 10px 14px; }
.code { font-family: ui-monospace, Consolas, monospace; font-weight: 800; font-size: 2rem; letter-spacing: 0.3em; color: var(--brand-2); }
.code-input { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; max-width: 220px; }
.panel.offer { border: 2px solid var(--brand); }
ol.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
ol.steps li { color: var(--muted); }
ol.steps li.current { color: var(--ink); }
ol.steps li.done strong { text-decoration: line-through; }
ol.steps li p { margin-top: 2px; overflow-wrap: anywhere; }
h3 { font-size: 1rem; }

/* Earnings */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stats .panel { gap: 4px; }
.big { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* Legal pages and photo viewer */
.prose { max-width: 760px; }
.prose h2 { margin-top: 10px; }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.prose .draft { font-weight: 700; }
.photo-view { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: 8px; }
dl.details dd button { margin-right: 6px; }

/* Admin order tools */
.tools { display: flex; flex-direction: column; gap: 14px; }
.tools > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tools .row { width: 100%; }
.tools .row input { flex: 1 1 200px; }
.tools .pick { border-top: 1px solid var(--line); padding-top: 8px; }
label.check { font-weight: 400; display: flex; gap: 8px; align-items: center; }
label.check input { width: auto; }

/* Ads */
.stage { width: 100%; max-width: 270px; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); background: #0f172a; display: block; }
.ad-kit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.caption { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.caption pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
ol.steps.how li p, ol.steps.how li { color: var(--ink); }
@media (max-width: 760px) { .ad-kit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Theme: one action colour, calm bars ---------- */
button, .btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 10px; }
button:hover, .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--brand); border-color: var(--bar-edge); }
button.secondary:hover, .btn.secondary:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn[aria-current="page"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.tabs button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.notice.ok { color: var(--ok); background: var(--ok-soft); border-color: #a7e3cb; }
.strip { background: var(--strip-bg); color: var(--strip-ink); font-weight: 600; }
.topbar { background: var(--brand-grad); color: #fff; border-bottom: 0; }
.topbar .muted { color: rgba(255, 255, 255, 0.78); }
.topbar img { background: #fff; border-radius: 8px; padding: 3px; }
.topbar button.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.topbar button.secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.card { border-radius: 14px; transition: box-shadow 0.15s, border-color 0.15s; }
.card:hover { box-shadow: 0 6px 18px rgba(21, 25, 31, 0.1); }
.thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.panel.offer { border-color: var(--accent); }
.code { color: var(--brand); }
.code-box { border-color: var(--brand-2); }
.shop-footer a, .auth-card a, .panel a:not(.btn) { color: var(--brand); }

/* ---------- Buyer's top bar: stays put on every page ---------- */
.shopbar { background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--bar-line); z-index: 10; }
.shopbar-inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; gap: 12px; flex-wrap: nowrap; }
.shopbar .brand { color: var(--bar-ink); }
.shopbar img { background: #fff; border-radius: 8px; padding: 2px; }
.shopbar form.search { gap: 0; }
.shopbar form.search input { border-radius: 10px 0 0 10px; border-right: 0; border-color: var(--bar-edge); }
.shopbar form.search button { border-radius: 0 10px 10px 0; background: var(--search-btn); border-color: var(--search-btn); color: var(--search-ink); }
.shopbar form.search button:hover { filter: brightness(0.92); }
.nav-link { color: var(--bar-ink); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.nav-link:hover { text-decoration: underline; }
.cart-link { background: transparent; color: var(--bar-ink); border-color: var(--bar-edge); border-radius: 10px; }
.cart-link:hover { border-color: var(--accent); }
.cart-count { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.catbar { background: var(--cat-bg); border-top: 1px solid var(--bar-line); }
.catbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.catbar-inner::-webkit-scrollbar { display: none; }
.catbar a { flex: none; padding: 9px 10px 6px; font-weight: 600; font-size: 0.9rem; color: var(--cat-ink); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.catbar a:hover { color: var(--cat-on); }
.catbar a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--cat-on); }
@media (max-width: 640px) {
  .shopbar-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 8px 12px; gap: 8px 10px; }
  .shopbar form.search { grid-column: 1 / -1; grid-row: 2; }
  .brand-text small { display: none; }
  .brand-text b { font-size: 1.05rem; letter-spacing: 0.1em; }
  .shopbar .brand img { height: 34px; width: 34px; }
  .shopbar .nav-link { display: none; }
  .cart-link { padding: 7px 10px; }
}

/* Sort and filter row above the products */
.toolbar { display: flex; flex-direction: row; gap: 8px 14px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.toolbar label { font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 6px; }
.toolbar select, .toolbar input[type="number"] { width: auto; padding: 6px 8px; }
.toolbar input[type="number"] { width: 96px; }
.toolbar input[type="checkbox"] { width: auto; }
.toolbar .clear { margin-left: auto; font-size: 0.88rem; }
.rating-line { font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.starsview { color: #cfd4dc; letter-spacing: 1px; white-space: nowrap; }
.starsview b { color: var(--star); font-weight: 400; }

/* ---------- Product page ---------- */
.crumbs { font-size: 0.85rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
.gallery .main { border-radius: 16px; background: var(--surface); object-fit: contain; }
.buybox { position: sticky; top: 118px; }
.buybox h1 { font-size: 1.55rem; }
.buybox .price { font-size: 1.9rem; }
.save { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.stock-low { color: var(--amber); font-weight: 700; }
.stock-out { color: var(--red); font-weight: 700; }
.stock-ok { color: var(--ok); font-weight: 700; }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
.cta button { min-height: 52px; font-size: 1rem; }
.cta .mpesa { margin-left: 4px; }
.deliver-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.deliver-box strong { font-size: 1.02rem; }
ul.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
ul.trust li::before { content: "\2713"; color: var(--ok); font-weight: 800; margin-right: 8px; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: 12px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 185px); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.rail .card { scroll-snap-align: start; }
.review-summary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.review-summary .score { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.bars { display: grid; grid-template-columns: auto minmax(120px, 220px) auto; gap: 2px 8px; align-items: center; font-size: 0.82rem; color: var(--muted); }
.bars progress { width: 100%; height: 8px; accent-color: var(--star); }
.review { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.review .who { font-size: 0.82rem; color: var(--muted); }
.verified { color: var(--ok); font-weight: 700; }
.herobar { display: none; }
@media (max-width: 760px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .buybox { position: static; }
  .gallery .main { max-height: 46vh; }
  /* On a phone the two buttons stay at the bottom of the screen. */
  body.hero-page .herobar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(21, 25, 31, 0.12); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  body.hero-page .herobar button { min-height: 48px; }
  body.hero-page .buybar { display: none; }
  body.hero-page, body.hero-page.has-buybar { padding-bottom: 72px; }
  body.hero-page .toast { bottom: 84px; }
}

.deliver-box .link-button { color: var(--brand); }

/* How delivery works */
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .how { grid-template-columns: minmax(0, 1fr); } }

/* M-Pesa reassurance mark. Plain text, so no logo file is needed. If you
   have Safaricom's permission to use their logo, put the file at
   /images/mpesa.png and it can replace this. */
.mpesa { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #1f8f3a; border: 1px solid #cfe9d6; border-radius: 8px; padding: 3px 9px; font-weight: 800; letter-spacing: 0.03em; font-size: 0.82rem; white-space: nowrap; }
.mpesa small { color: #5d6673; font-weight: 600; letter-spacing: 0; }

/* Checkout bar: always in reach on the shop pages once the cart has something */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(21, 25, 31, 0.12); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.buybar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.buybar .sum { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.buybar .sum strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.buybar .sum a { color: var(--muted); font-size: 0.82rem; }
.buybar .btn { padding: 12px 22px; font-size: 1rem; white-space: nowrap; }
body.has-buybar { padding-bottom: 84px; }
body.has-buybar .toast { bottom: 96px; }
@media (max-width: 420px) { .buybar .mpesa small { display: none; } .buybar .btn { padding: 12px 16px; } }

/* Order progress line */
.track { display: flex; align-items: center; }
.track i { width: 16px; height: 16px; border-radius: 50%; background: var(--line); flex: none; }
.track i.done { background: var(--ok); }
.track i.now { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.track em { flex: 1; height: 3px; background: var(--line); }
.track em.done { background: var(--ok); }
.track-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-top: 4px; }
.pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Bigger targets for riders, who use the page outdoors with one hand */
.page.narrow button, .page.narrow .btn { min-height: 48px; }
.page.narrow .small { min-height: 0; }

/* Star ratings */
.stars { display: inline-flex; gap: 4px; }
.stars .star { background: none; border: 0; padding: 2px 4px; font-size: 1.9rem; line-height: 1; color: #cbd2e0; min-height: 0; }
.stars .star:hover { background: none; color: var(--star); }
.stars .star[aria-pressed="true"] { color: var(--star); }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.standing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.standing div { background: var(--brand-soft); border-radius: 10px; padding: 8px 4px; }
.standing strong { display: block; font-size: 1.25rem; }
.standing span { font-size: 0.75rem; color: var(--muted); }

/* Where the buyer is */
.placebar { background: var(--brand-soft); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.placebar-inner { max-width: 1100px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.placebar #place-text { margin-right: auto; }
.card .near { font-size: 0.78rem; font-weight: 700; color: var(--ok); }
.card .near.far { color: var(--muted); font-weight: 600; }
.hub-list { display: flex; flex-direction: column; gap: 8px; }
.hub-list label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.hub-list label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.hub-list input { width: auto; margin-top: 3px; }
.warn-text { color: var(--amber); font-weight: 600; }

/* Product cards with their own Add button */
.card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; min-width: 0; }
.card-add { margin: 0 10px 10px; padding: 7px 8px; }
.rail .card-add { font-size: 0.82rem; }

/* Suggestions under the search box */
.shopbar form.search { position: relative; }
.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(21, 25, 31, 0.18); overflow: hidden; display: flex; flex-direction: column; }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
.suggest a:hover, .suggest a:focus { background: var(--brand-soft); outline: none; }
.suggest .mini { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: #e2e8f0; flex: none; font-size: 0; }
.suggest .all { border-top: 1px solid var(--line); color: var(--brand); font-weight: 600; }

/* Front page */
#home { display: flex; flex-direction: column; gap: 22px; }
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; text-align: center; padding-bottom: 8px; gap: 2px; }
.cat-tile:hover { border-color: var(--brand); }
.cat-tile .pic { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: #e2e8f0; display: block; margin-bottom: 6px; }
.shop-head { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.review .reply { background: var(--bg); border-left: 3px solid var(--brand); border-radius: 6px; padding: 6px 10px; margin-top: 6px; font-size: 0.92rem; }
@media (max-width: 640px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* ---------- Side menu: categories opening to their items ---------- */
.menu-btn { background: transparent; color: var(--bar-ink); border-color: var(--bar-edge); padding: 8px 12px; gap: 8px; font-weight: 700; }
.menu-btn:hover { background: transparent; border-color: var(--accent); }
.sidemenu h2 { font-size: 1rem; padding: 0 10px 6px; }
.menu-tree { display: flex; flex-direction: column; }
.menu-tree a { display: block; padding: 7px 10px; color: var(--ink); text-decoration: none; border-radius: 8px; font-size: 0.92rem; overflow-wrap: anywhere; }
.menu-tree a:hover { background: var(--brand-soft); color: var(--brand); }
.menu-tree .menu-all { font-weight: 700; }
.menu-tree summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; font-weight: 700; cursor: pointer; border-radius: 8px; list-style: none; }
.menu-tree summary::-webkit-details-marker { display: none; }
.menu-tree summary::before { content: "\203a"; color: var(--muted); font-size: 1.1rem; width: 10px; transition: transform 0.15s; }
.menu-tree details[open] > summary::before { transform: rotate(90deg); }
.menu-tree summary span:first-child { margin-right: auto; }
.menu-tree summary:hover { background: var(--brand-soft); }
.menu-tree .count { font-weight: 600; font-size: 0.78rem; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
.menu-tree details a { padding-left: 28px; }
.menu-tree details .more { color: var(--brand); font-weight: 600; }
.menu-tree details { border-top: 1px solid var(--line); }
.menu-links { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
dialog.drawer { margin: 0; left: 0; top: 0; height: 100%; max-height: 100%; width: min(330px, 88vw); border-radius: 0 16px 16px 0; padding: 0; overflow-y: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.drawer .sidemenu { padding: 8px; }
.sidemenu.docked { display: none; }
.shop-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 1000px) {
  /* The menu sits hard against the left edge of the screen, full height,
     so the products get the rest of the width. */
  .shop-page.with-side { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; align-items: start; max-width: none; margin: 0; padding: 0; }
  .shop-page.with-side .shop-main { padding: 18px 24px 56px; max-width: 1280px; width: 100%; margin: 0 auto; }
  .sidemenu.docked { display: block; background: var(--surface); border-right: 1px solid var(--line); box-shadow: 4px 0 16px rgba(6, 42, 120, 0.06); position: sticky; top: 108px; height: calc(100vh - 108px); overflow-y: auto; padding: 0 0 24px; }
  .sidemenu.docked h2 { background: var(--brand-grad); color: #fff; padding: 12px 16px; font-size: 1rem; letter-spacing: 0.03em; position: sticky; top: 0; z-index: 1; }
  .sidemenu.docked .menu-tree { padding: 8px 8px 0; }
  .sidemenu.docked details[open] { background: var(--brand-soft); border-radius: 10px; border-top-color: transparent; }
  .sidemenu.docked details[open] > summary { color: var(--brand-deep); box-shadow: inset 4px 0 0 var(--accent); border-radius: 10px 10px 0 0; }
  .sidemenu.docked details[open] + details { border-top-color: transparent; }
}

/* ---------- Banners at the top of the shop ---------- */
.promo { position: relative; }
.promo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 18px; }
.promo-track::-webkit-scrollbar { display: none; }
.promo-slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 210px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 24px 32px; text-decoration: none; color: #fff; position: relative; overflow: hidden; background: var(--brand-grad); }
.promo-slide.gold { background: linear-gradient(100deg, #ffb81c, #ffd75e 60%, #fff0b8); color: #1a1200; }
.promo-slide.dark { background: linear-gradient(100deg, #0b1530, #1b2a55); }
.promo-slide.green { background: linear-gradient(100deg, #0b6b4b, #12a36f); }
/* A slow band of light crossing the banner. */
.promo-slide::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: rotate(14deg); animation: promo-shine 5s ease-in-out infinite; pointer-events: none; }
.promo-text { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; position: relative; z-index: 1; }
.promo-text strong { font-size: clamp(1.4rem, 3.4vw, 2.3rem); line-height: 1.1; font-weight: 800; overflow-wrap: anywhere; }
.promo-sub { font-size: 1rem; opacity: 0.92; }
.promo-tag { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; }
.promo-slide.gold .promo-tag { background: var(--brand-deep); color: #fff; }
.promo-cta { margin-top: 4px; background: #fff; color: var(--brand-deep); font-weight: 800; padding: 9px 18px; border-radius: 10px; }
.promo-slide.gold .promo-cta { background: var(--brand-deep); color: #fff; }
.promo-pic { width: 190px; height: 190px; object-fit: cover; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); position: relative; z-index: 1; }
.promo-pic.empty { display: none; }
.promo-mark { width: 130px; height: 130px; opacity: 0.9; position: relative; z-index: 1; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2)); }
.promo-slide.on .promo-text > * { animation: promo-in 0.5s ease both; }
.promo-slide.on .promo-text > *:nth-child(2) { animation-delay: 0.08s; }
.promo-slide.on .promo-text > *:nth-child(3) { animation-delay: 0.16s; }
.promo-slide.on .promo-text > *:nth-child(4) { animation-delay: 0.24s; }
.promo-slide.on .promo-pic { animation: promo-pop 0.6s ease both; }
.promo-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.promo-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; background: var(--bar-edge); border: 0; min-height: 0; }
.promo-dots button[aria-current="true"] { background: var(--brand); width: 24px; }
@keyframes promo-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@keyframes promo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes promo-pop { from { opacity: 0; transform: scale(0.9) rotate(-3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-slide::after, .promo-slide.on .promo-text > *, .promo-slide.on .promo-pic { animation: none; } }
@media (max-width: 640px) {
  .promo-slide { min-height: 150px; padding: 16px; }
  .promo-pic { width: 104px; height: 104px; border-radius: 12px; }
  .promo-mark { width: 70px; height: 70px; }
  .promo-sub { font-size: 0.88rem; }
}

/* "Get the app" bar across the very top */
.install-bar { display: flex; align-items: center; gap: 12px; background: var(--brand-deep); color: #fff; padding: 8px 16px; }
.install-bar img { border-radius: 8px; flex: none; }
.install-bar div { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
.install-bar span { font-size: 0.82rem; opacity: 0.85; }
.install-bar .install-close { background: transparent; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; padding: 2px 8px; min-height: 0; }

/* ---------- The brand ---------- */
.shopbar .brand { gap: 10px; }
.shopbar .brand img { height: 42px; width: 42px; padding: 0; background: none; border-radius: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-size: 1.32rem; font-weight: 800; letter-spacing: 0.14em; color: var(--bar-ink); }
.brand-text small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: var(--brand); white-space: nowrap; }
.buybox .price, .card .price { color: var(--brand-deep); }
.seal { display: flex; gap: 12px; align-items: center; border: 1px solid var(--brand); background: var(--brand-soft); border-radius: var(--radius); padding: 10px 14px; }
.seal img { flex: none; }
.seal div { display: flex; flex-direction: column; }
.seal span { font-size: 0.85rem; color: var(--muted); }
.shop-footer { border-top: 4px solid transparent; border-image: var(--brand-grad) 1; }
.shop-footer .foot-brand { max-width: 1100px; margin: 0 auto; padding: 18px 16px 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; }
.foot-brand b { letter-spacing: 0.14em; color: var(--ink); margin-right: 6px; }
.auth-card .logo { height: 96px; }
.buybar { border-top: 3px solid var(--brand); }

/* ---------- Gold touches ----------
   Thin gold lines and edges that tie the pages to the gold buttons. They all
   use --accent, so another colour scheme changes them too. */
.catbar { border-bottom: 3px solid var(--accent); }
.menu-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.shopbar form.search input:focus-visible { outline-color: var(--accent); border-color: var(--accent); }
.section > h2, .section > .row > h2, .shop-main > .row > h1 { padding-left: 12px; border-left: 4px solid var(--accent); line-height: 1.15; }
.card:hover, .cat-tile:hover { border-color: var(--accent); }
.cat-tile { border-bottom: 3px solid var(--accent-soft); }
.cat-tile:hover { border-bottom-color: var(--accent); }
.seal { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.promo-track { box-shadow: 0 0 0 2px var(--accent-soft), 0 10px 28px rgba(6, 42, 120, 0.12); }
.promo-dots button[aria-current="true"] { background: var(--accent); }
.drawer-head { border-bottom: 3px solid var(--accent); }
dialog.drawer { border-right: 3px solid var(--accent); }
.menu-tree .count { background: var(--accent-soft); color: var(--accent-ink); }
.shop-footer { border-image: linear-gradient(90deg, #062a78, #0a5fd0 40%, var(--accent)) 1; }
.foot-brand b { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.topbar { border-bottom: 3px solid var(--accent); }
.buybar { border-top-color: var(--accent); }
.toolbar { border-top: 2px solid var(--accent-soft); }
@media (min-width: 1000px) {
  .sidemenu.docked { border-right: 2px solid var(--accent); }
  .sidemenu.docked h2 { border-bottom: 3px solid var(--accent); }
}

/* ---------- BodaKe ---------- */
.strip-logo { height: 20px; width: auto; vertical-align: middle; margin: -3px 2px 0; }
.ride-link { display: inline-flex; align-items: center; gap: 6px; }
.ride-link img { height: 15px; width: auto; }
.auth-card .logo.bodake { height: auto; width: min(320px, 90%); }
.topbar img.bodake-top { height: 34px; width: auto; padding: 4px 8px; background: #fff; }
.bodake-inline { height: 56px; width: auto; align-self: flex-start; }
.rider-card { display: flex; gap: 12px; align-items: center; }
.rider-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); flex: none; }
.track-map { height: 260px; border-radius: var(--radius); border: 1px solid var(--line); margin-top: 8px; background: var(--bg); }

/* ---------- Rider app ---------- */
.go-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.go-row .btn { min-height: 48px; text-align: center; }
.dash-today { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-today > div:first-child { display: flex; flex-direction: column; }
.dash-big { font-size: 2rem; font-weight: 800; color: var(--brand-deep); line-height: 1.1; }
.dash-target { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.dash-target progress { width: 100%; height: 12px; accent-color: var(--accent); }
.docs-grid { display: flex; flex-direction: column; gap: 8px; }
.doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.doc span:first-child { display: flex; flex-direction: column; }
.doc.ok { border-color: #a7e3cb; background: var(--ok-soft); }
.doc label.btn { margin: 0; }

/* Phone-width tidying for the buyer's header */
@media (max-width: 640px) {
  .strip { font-size: 0.78rem; padding: 4px 12px; }
  .placebar-inner { flex-wrap: nowrap; padding: 5px 12px; }
  .placebar #place-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .placebar a { display: none; }
  .placebar button { flex: none; }
  .menu-word { display: none; }
  .menu-btn { padding: 7px 11px; font-size: 1.1rem; }
  .cta .mpesa small { display: none; }
}

/* ---------- Other colour schemes ----------
   To make one of these the site's colours, copy its values over the ones in
   :root at the top of this file. */
:root[data-theme="emerald"] {
  --brand: #0b6b4b;
  --brand-2: #0a7f58;
  --brand-soft: #e8f5ef;
  --accent: #dc4a12;
  --accent-dark: #bd3d0c;
  --accent-ink: #ffffff;
  --accent-soft: #fff1ea;
  --bar-bg: #ffffff;
  --bar-ink: #15191f;
  --bar-line: #e4e7ec;
  --bar-edge: #d5dae1;
  --search-btn: var(--brand);
  --search-ink: #ffffff;
  --strip-bg: var(--brand);
  --strip-ink: #ffffff;
  --focus: #7cc8a6;
  --ink: #15191f;
  --muted: #5d6673;
  --line: #e4e7ec;
  --bg: #f6f7f8;
  --cat-bg: var(--surface); --cat-ink: var(--ink); --cat-on: var(--brand); --brand-grad: var(--brand); --brand-deep: var(--ink);
}
:root[data-theme="royal"] {
  --cat-bg: var(--surface); --cat-ink: var(--ink); --cat-on: var(--brand); --brand-grad: var(--brand); --brand-deep: var(--ink);

  --brand: #1a48c8; --brand-2: #1d55e6; --brand-soft: #eaf0ff;
  --accent: #ff7a1a; --accent-dark: #ec6808; --accent-ink: #201000; --accent-soft: #fff2e5;
  --bar-bg: #1a48c8; --bar-ink: #ffffff; --bar-line: #1a48c8; --bar-edge: rgba(255, 255, 255, 0.45);
  --search-btn: #ff7a1a; --search-ink: #201000; --strip-bg: #12338f; --strip-ink: #ffffff; --focus: #ffc48f;
}
:root[data-theme="violet"] {
  --cat-bg: var(--surface); --cat-ink: var(--ink); --cat-on: var(--brand); --brand-grad: var(--brand); --brand-deep: var(--ink);

  --brand: #5a2ee0; --brand-2: #6b40f0; --brand-soft: #f0ebff;
  --accent: #5a2ee0; --accent-dark: #4621b8; --accent-ink: #ffffff; --accent-soft: #f0ebff;
  --bar-bg: #ffffff; --bar-ink: #15191f; --bar-line: #e4e7ec; --bar-edge: #d5dae1;
  --search-btn: #15191f; --search-ink: #ffffff; --strip-bg: #1c1040; --strip-ink: #e6dcff; --focus: #b9a4ff;
}
:root[data-theme="charcoal"] {
  --cat-bg: var(--surface); --cat-ink: var(--ink); --cat-on: var(--brand); --brand-grad: var(--brand); --brand-deep: var(--ink);

  --brand: #17191e; --brand-2: #2b2f38; --brand-soft: #f1f2f4;
  --accent: #e11d48; --accent-dark: #be123c; --accent-ink: #ffffff; --accent-soft: #ffe9ee;
  --bar-bg: #17191e; --bar-ink: #ffffff; --bar-line: #17191e; --bar-edge: rgba(255, 255, 255, 0.4);
  --search-btn: #e11d48; --search-ink: #ffffff; --strip-bg: #e11d48; --strip-ink: #ffffff; --focus: #ff9db3;
}
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---------- Agent tools ---------- */
/* The shop's section links scroll sideways on phones instead of piling up. */
@media (max-width: 640px) {
  nav.tabs[aria-label="Shop sections"] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  nav.tabs[aria-label="Shop sections"] .btn { flex: 0 0 auto; }
}
.bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-bottom: 2px solid var(--line); border-radius: 6px 6px 0 0; overflow: hidden; }
.bar-fill { width: 100%; background: var(--brand); border-radius: 6px 6px 0 0; }
.bar.today .bar-fill { background: var(--accent); }
.bar-label { font-size: 0.7rem; color: var(--muted); }
.dash-lists { align-items: start; }
.dash-lists .panel { height: 100%; }
.rank { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rank li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.rank li:last-child { border-bottom: 0; }
.pill.variant { margin-left: 6px; background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.chips a.out { color: var(--muted); text-decoration: line-through; }
.variants { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.bulk-errors { color: var(--red); max-height: 160px; overflow: auto; padding-left: 18px; }
.settings { display: flex; flex-direction: column; gap: 16px; }
.switch-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch-row input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.logo-edit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.shop-logo { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; border: 2px solid var(--accent); background: var(--surface); flex: none; }
.shop-logo.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; border-style: dashed; border-color: var(--line); }
.shop-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.shop-head .shop-about { flex: 1 1 260px; }
.hours { display: flex; flex-direction: column; gap: 6px; }
.hours-row { display: grid; grid-template-columns: 140px auto auto auto; gap: 8px; align-items: center; justify-content: start; }
.hours-row input[type="time"] { width: auto; min-width: 0; padding: 6px 8px; }
@media (max-width: 480px) {
  .hours-row { grid-template-columns: auto auto auto; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
  .hours-row label { grid-column: 1 / -1; }
  .hours-row input[type="time"] { width: 130px; }
}
/* The agent guide */
.guide { max-width: 860px; }
.guide h2 { margin-top: 8px; scroll-margin-top: 16px; }
.guide .toc { columns: 2; padding-left: 20px; }
@media (max-width: 640px) { .guide .toc { columns: 1; } }
.guide .tip { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.guide ol, .guide ul { padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.guide table { width: 100%; border-collapse: collapse; }
.guide th, .guide td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media print { .topbar, nav.tabs, .no-print { display: none !important; } .guide { max-width: none; } }

/* ---------- Staff pages ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.todo { display: flex; flex-wrap: wrap; gap: 8px; }
.todo a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 600; }
.todo a strong { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 8px; }
.todo a.zero { opacity: 0.55; }
.todo a.zero strong { background: var(--line); color: var(--muted); }
.bars-month { grid-template-columns: repeat(31, minmax(0, 1fr)); }
.complaints { display: flex; flex-direction: column; gap: 12px; }
.complaint { display: flex; flex-direction: column; gap: 8px; }
.complaint .said { border-left: 4px solid var(--line); padding: 6px 12px; background: var(--bg); border-radius: 0 8px 8px 0; }
.complaint .said.shop { border-left-color: var(--brand); }
.complaint .said.buyer { border-left-color: var(--accent); }
.complaint .decide { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; align-items: end; }
.icon-input { width: 72px; text-align: center; font-size: 1.3rem; }
.pos-input { width: 96px; }
.field.grow { flex: 1 1 200px; }
.cat-icon { font-size: 1.5rem; }
.pass-input { width: 150px; }
.complaint-box { display: flex; flex-direction: column; gap: 6px; } .complaint-box textarea { min-height: 70px; }

/* ---------- Site footer (all buyer pages) ---------- */
.site-footer { background: var(--brand-deep); color: #dbe6ff; margin-top: 24px; border-top: 4px solid var(--accent); }
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--accent); }
.foot-cols { max-width: 1200px; margin: 0 auto; padding: 28px 16px 18px; display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 22px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; min-width: 0; }
.foot-col h2 { font-size: 0.95rem; color: #fff; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 4px; }
.site-footer .foot-brand { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; color: #fff; }
.site-footer .foot-brand img { background: #fff; border-radius: 10px; padding: 3px; }
.site-footer .foot-brand b { letter-spacing: 0.16em; font-size: 1.15rem; color: #fff; display: block; }
.site-footer .foot-brand small { color: var(--accent); font-weight: 600; }
.pay-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pay-badges img { background: #fff; border-radius: 6px; padding: 3px 6px; height: 26px; width: auto; }
.mpesa-badge { background: #ffffff; color: #1b9e3e; font-weight: 900; letter-spacing: 0.04em; border-radius: 6px; padding: 3px 10px; }
.site-footer .ride-link img { background: #fff; border-radius: 4px; padding: 1px 3px; vertical-align: middle; margin-right: 6px; }
.site-contact { display: flex; flex-direction: column; gap: 6px; }
.foot-base { text-align: center; color: #9fb4e6; font-size: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0; padding: 14px 16px 20px; }
@media (max-width: 900px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-about { grid-column: 1 / -1; } }
.help-page details { border-top: 1px solid var(--line); padding: 10px 0; }
.help-page summary { font-weight: 700; cursor: pointer; }
.help-page .contact-lines { display: flex; flex-direction: column; gap: 6px; font-size: 1.05rem; }
.help-page ol, .help-page ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Front page (ideas from the first Synara page) ---------- */
/* On the front page the category icons take the place of the docked menu. */
@media (min-width: 1000px) {
  .is-home .shop-page.with-side { grid-template-columns: minmax(0, 1fr); }
  .is-home .sidemenu.docked { display: none; }
}
.announce { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--brand-grad); color: #fff; border-radius: var(--radius); padding: 10px 16px; text-decoration: none; border-bottom: 3px solid var(--accent); }
.announce strong { font-size: 1.05rem; }
.announce .announce-cta { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 3px 12px; font-weight: 700; }
.spot-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px; gap: 16px; align-items: stretch; margin-bottom: 8px; }
.cat-icons h2, .trust-card h2 { font-size: 1rem; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.cat-icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; }
.cat-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); text-align: center; background: none; border: 0; padding: 4px 2px; border-radius: 10px; cursor: pointer; font: inherit; }
.cat-icon:hover { background: var(--brand-soft); }
.cat-bubble { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--brand-deep); box-shadow: 0 0 0 3px var(--brand-soft), 0 3px 8px rgba(6, 42, 120, 0.25); color: #fff; }
.cat-icon:hover .cat-bubble { box-shadow: 0 0 0 3px var(--accent), 0 3px 8px rgba(6, 42, 120, 0.25); }
.cat-name { font-size: 0.74rem; font-weight: 700; line-height: 1.15; color: var(--brand-deep); }
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.spot-media { position: relative; }
.spot-pic { display: block; border-radius: var(--radius); overflow: hidden; background: #e2e8f0; aspect-ratio: 1 / 1; }
.spot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-pic .spot-img.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.spot-nav { position: absolute; top: 45%; width: 38px; height: 38px; border-radius: 50%; padding: 0; background: rgba(255, 255, 255, 0.92); color: var(--brand-deep); border: 1px solid var(--line); font-size: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.spot-nav.prev { left: 8px; } .spot-nav.next { right: 8px; }
.spot-nav:hover { background: var(--accent); color: var(--accent-ink); }
.spot-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.spot-dots button { width: 9px; height: 9px; min-height: 0; padding: 0; border-radius: 50%; background: var(--line); border: 0; }
.spot-dots button[aria-current="true"] { background: var(--accent); width: 22px; border-radius: 999px; }
.spot-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spot-tag { align-self: flex-start; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.78rem; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.spot-name { margin: 0; font-size: 1.4rem; line-height: 1.2; }
.spot-name a { color: var(--ink); text-decoration: none; }
.spot-name a:hover { color: var(--brand); }
.spot-price .price { font-size: 1.7rem; color: var(--brand-deep); }
.spot-desc { color: var(--muted); margin: 0; }
.spot-info .cta { grid-template-columns: minmax(0, 1fr); }
.spot-info .cta button { min-height: 48px; }
.spot-info #spot-buy { order: -1; }
.trust-card { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--brand); }
.trust-place { display: flex; flex-direction: column; gap: 2px; }
.trust-place p { margin: 0; font-weight: 600; }
.trust-card .link-button { color: var(--brand); align-self: flex-start; }
.t-fee { margin: 0; background: var(--ok-soft); color: var(--ok); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 0.9rem; }
.trust-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; }
.trust-list li { padding-left: 22px; position: relative; }
.trust-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #fff; background: var(--ok); width: 16px; height: 16px; border-radius: 50%; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.seller-card { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.seller-card > div:first-child { display: flex; flex-direction: column; }
.join-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.join-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); text-decoration: none; color: #fff; }
.join-card.shop { background: linear-gradient(90deg, #0b7a55, #10a36f); }
.join-card.ride { background: var(--brand-grad); }
.join-card img { background: #fff; border-radius: 6px; padding: 3px 6px; height: 28px; width: auto; }
.join-card strong { display: block; font-size: 1.05rem; }
.join-card small { opacity: 0.9; }
.join-icon { font-size: 1.8rem; }
.join-go { margin-left: auto; background: #fff; color: var(--brand-deep); border-radius: 999px; padding: 4px 14px; font-weight: 800; }
.join-card:hover .join-go { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 1099px) {
  .spot-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .cat-icons { grid-column: 1 / -1; }
  .cat-icon-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
@media (max-width: 760px) {
  .spot-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-icon-grid { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .cat-icon { flex: 0 0 76px; scroll-snap-align: start; }
  .cat-bubble { width: 48px; height: 48px; font-size: 1.4rem; }
  .spotlight { grid-template-columns: minmax(0, 1fr); }
  .spot-pic { aspect-ratio: 4 / 3; }
  .spot-name { font-size: 1.2rem; }
  .join-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Buyer account */
.account-page .login-box { max-width: 480px; }
.order-list, .follow-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.order-list a { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
.order-list a:hover { border-color: var(--brand); }
.follow-list li { display: flex; align-items: center; gap: 10px; }
.follow-list li a { flex: 1; color: var(--ink); text-decoration: none; }
.follow-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.follow-logo.empty { display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; }

/* ---------- Front page, second pass ---------- */
html, body { overflow-x: clip; }
/* The banner at the top */
.announce { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 18px;
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 184, 28, 0.35), transparent 45%), linear-gradient(100deg, #041d57 0%, #0a4fc0 55%, #0f8fe6 100%);
  color: #fff; text-decoration: none; border: 0; box-shadow: 0 10px 28px rgba(6, 42, 120, 0.28); }
.announce::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.announce-badge { flex: none; width: 58px; height: 58px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--accent); }
.announce-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.announce-text strong { font-size: 1.55rem; line-height: 1.15; letter-spacing: 0.01em; }
.announce-text span { font-size: 1rem; opacity: 0.92; }
.announce mark { background: none; color: var(--accent); font-weight: 900; }
.announce .announce-cta { margin-left: auto; flex: none; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 10px 22px; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.announce .announce-cta::after { content: ' →'; display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.announce.swap .announce-text { animation: fadeup 0.5s ease; }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .announce::after, .announce .announce-cta::after, .announce.swap .announce-text { animation: none; } }
@media (max-width: 640px) {
  .announce { padding: 14px; gap: 12px; flex-wrap: wrap; border-radius: 14px; }
  .announce-badge { width: 46px; height: 46px; }
  .announce-badge img { width: 32px; height: 32px; }
  .announce-text { flex: 1 1 200px; }
  .announce-text strong { font-size: 1.2rem; }
  .announce-text span { font-size: 0.9rem; }
  .announce .announce-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* Category menu flush to the left edge, safety card flush to the right, the featured product wider between. */
@media (min-width: 1100px) {
  .is-home .shop-page.with-side .shop-main { max-width: none; }
  .spot-grid { grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 20px; margin-left: -24px; margin-right: -24px; }
  .spot-grid .edge-left { border-radius: 0 18px 18px 0; border-left: 0; }
  .spot-grid .edge-right { border-radius: 18px 0 0 18px; border-right: 0; }
  .is-home .shop-main > *:not(#home), .is-home #home > *:not(.spot-grid) { max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%; }
  .spotlight { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; padding: 24px 28px; }
  .spot-name { font-size: 1.8rem; }
  .spot-price .price { font-size: 2.1rem; }
  .spot-desc { font-size: 1.02rem; }
}
.cat-icon.empty { opacity: 0.55; }
.cat-icon.empty .cat-bubble { background: var(--muted); }
.cat-icon-grid { gap: 12px 4px; }

/* "Your shop is waiting" and "Ride with BodaKe" */
.join-card { padding: 18px 22px; gap: 18px; min-height: 104px; }
.join-logo { flex: none; background: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.join-logo img { background: none; padding: 0; width: 58px; height: 58px; border-radius: 0; }
.join-logo.wide { width: auto; height: 76px; padding: 0 14px; }
.join-logo.wide img { width: 170px; height: auto; }
.join-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.join-card strong { font-size: 1.35rem; }
.join-card small { font-size: 0.95rem; }
.join-go { background: var(--accent); color: var(--accent-ink); padding: 8px 18px; white-space: nowrap; }
.join-card:hover .join-go { background: #fff; color: var(--brand-deep); }
@media (max-width: 640px) {
  .join-card { padding: 14px; gap: 12px; flex-wrap: wrap; }
  .join-logo { width: 60px; height: 60px; }
  .join-logo img { width: 46px; height: 46px; }
  .join-logo.wide { height: 60px; }
  .join-logo.wide img { width: 130px; }
  .join-text { flex: 1 1 160px; }
  .join-card strong { font-size: 1.15rem; }
  .join-go { margin-left: 0; width: 100%; text-align: center; }
}
@media (min-width: 1100px) {
  .spot-pic { aspect-ratio: 4 / 5; max-height: 560px; }
  .spot-grid .cat-bubble { width: 46px; height: 46px; font-size: 1.35rem; }
  .spot-grid .cat-icon-grid { gap: 8px 4px; }
}
@media (min-width: 1600px) {
  .spotlight { grid-template-columns: minmax(0, 560px) minmax(0, 620px); justify-content: center; gap: 40px; }
  .spot-pic { max-height: none; }
}

/* ---------- Front page, third pass ---------- */
/* A quieter top: the front page has its own categories, delivery card and banner. */
.is-home .strip, .is-home .menu-btn, .is-home .catbar, .is-home .placebar { display: none; }
.is-home .shopbar-inner { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
@media (max-width: 640px) { .is-home .shopbar-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.is-home .announce { padding: 12px 20px; }
.is-home .announce-badge { width: 50px; height: 50px; }
.is-home .announce-badge img { width: 36px; height: 36px; }
.is-home .announce-text strong { font-size: 1.35rem; }
.is-home .shop-page.with-side .shop-main { padding-top: 14px; }
.is-home #home { display: flex; flex-direction: column; gap: 14px; }

/* Category tiles with line icons */
.cat-tile-icon { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, box-shadow 0.15s; }
.cat-tile-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tone-blue { background: #e6efff; color: #0a4fc0; }
.tone-gold { background: #fff3d1; color: #a86a00; }
.tone-green { background: #e2f6ec; color: #0b7a55; }
.tone-rose { background: #ffe6ec; color: #c0264f; }
.tone-violet { background: #efe9ff; color: #5b35c9; }
.tone-teal { background: #dff5f7; color: #0b7f8c; }
.cat-icon:hover { background: none; }
.cat-icon:hover .cat-tile-icon { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(6, 42, 120, 0.18), 0 0 0 2px var(--accent); }
.cat-icon.empty { opacity: 1; }
.cat-icon.empty .cat-tile-icon { filter: saturate(0.25); opacity: 0.6; }
.cat-icon.empty .cat-name { color: var(--muted); }
.cat-name { color: var(--ink); font-weight: 600; font-size: 0.74rem; }

/* The featured product: photos on the left (other shots down the side), a tidy column of details on the right. */
.spotlight { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: stretch; padding: 18px; }
.spot-media { display: flex; gap: 10px; min-width: 0; }
.spot-thumbs { display: flex; flex-direction: column; gap: 8px; flex: none; }
.spot-thumbs button { width: 62px; height: 62px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: #e2e8f0; min-height: 0; }
.spot-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.spot-thumbs .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-main { position: relative; flex: 1; min-width: 0; }
.spot-pic { aspect-ratio: 1 / 1; max-height: 520px; width: 100%; }
.spot-main .spot-tag { position: absolute; top: 12px; left: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.spot-info { justify-content: center; gap: 10px; }
.spot-name { font-size: 1.45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-shop { margin: 0; color: var(--muted); }
.spot-price { margin: 0; }
.spot-price .price { font-size: 1.9rem; }
.spot-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; }
.spot-actions { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.spot-actions button { min-height: 48px; }
.spot-next-box { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.spot-next-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.spot-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.spot-strip .mini { padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; color: var(--ink); }
.spot-strip .mini:hover { border-color: var(--brand); }
.spot-strip .mini-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #e2e8f0; }
.spot-strip .mini-img.empty { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--muted); }
.mini-price { font-size: 0.78rem; font-weight: 700; padding: 3px 4px; }
.spot-dots { justify-content: flex-start; margin-top: 2px; }
@media (min-width: 1100px) {
  .spotlight { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 18px 22px; }
  .spot-pic { aspect-ratio: 1 / 1; max-height: 540px; }
  .spot-name { font-size: 1.6rem; }
  .spot-price .price { font-size: 2rem; }
}
@media (min-width: 1600px) {
  .spotlight { grid-template-columns: minmax(0, 640px) minmax(0, 560px); justify-content: center; gap: 36px; }
}
@media (max-width: 760px) {
  .spot-media { flex-direction: column-reverse; }
  .spot-thumbs { flex-direction: row; overflow-x: auto; }
  .spot-thumbs button { width: 54px; height: 54px; }
  .spot-pic { aspect-ratio: 4 / 3; }
  .spot-actions { grid-template-columns: minmax(0, 1fr); }
  .spot-name { font-size: 1.2rem; }
}
/* The big photo fills its column; the photo itself is never cut off. */
.spot-media { align-items: stretch; }
.spot-main { display: flex; flex-direction: column; }
.spot-pic { position: relative; flex: 1; min-height: 360px; aspect-ratio: auto; max-height: none; overflow: hidden; background: #eef2f7; }
.spot-blur { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) saturate(1.1); opacity: 0.55; transform: scale(1.1); }
.spot-pic .spot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.spot-pic .spot-img.empty { display: flex; align-items: center; justify-content: center; }
.spot-actions { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.spot-actions button { white-space: nowrap; }
.mini-price { white-space: nowrap; font-size: 0.74rem; }
@media (min-width: 1100px) { .spot-pic { max-height: none; aspect-ratio: auto; } }
@media (max-width: 760px) { .spot-pic { flex: none; aspect-ratio: 1 / 1; min-height: 0; } }
@media (max-width: 760px) {
  .spotlight { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
  .spot-media { flex-direction: column-reverse; }
  .spot-pic { flex: none; aspect-ratio: 1 / 1; min-height: 0; }
  .spot-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Menu and featured product always fit the first screen on a computer:
   the row takes the height left under the header and banner, and the
   category tiles and the photo shrink or grow to fill it. */
@media (min-width: 1100px) {
  .is-home .shop-page.with-side .shop-main { padding-top: 12px; }
  .is-home #home { gap: 12px; }
  .spot-grid { height: clamp(470px, calc(100vh - 182px), 700px); }
  .spot-grid > * { min-height: 0; }
  .cat-icons { display: flex; flex-direction: column; overflow: hidden; padding: 14px 12px 10px; }
  .cat-icons h2 { flex: none; }
  .spot-grid .cat-icon-grid { flex: 1; min-height: 0; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 2px 4px; align-content: stretch; }
  .spot-grid .cat-icon { justify-content: center; padding: 0 2px; min-height: 0; overflow: hidden; gap: 3px; }
  .spot-grid .cat-tile-icon { width: clamp(30px, 5.4vh, 50px); height: clamp(30px, 5.4vh, 50px); border-radius: 13px; flex: none; }
  .spot-grid .cat-tile-icon svg { width: 55%; height: 55%; }
  .spot-grid .cat-name { font-size: clamp(0.64rem, 1.35vh, 0.74rem); }
  .spotlight { height: 100%; padding: 14px 18px; }
  .spot-media, .spot-main, .spot-pic { min-height: 0; }
  .spot-thumbs { overflow-y: auto; }
  .spot-info { min-height: 0; overflow: hidden; gap: 8px; }
  .trust-card { overflow: auto; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  .spot-desc { -webkit-line-clamp: 2; }
  .spot-name { font-size: 1.35rem; }
  .spot-price .price { font-size: 1.7rem; }
  .spot-strip .mini-img { aspect-ratio: 4 / 3; }
  .trust-card { gap: 6px; }
  .trust-list { font-size: 0.82rem; gap: 5px; }
  .is-home .announce { padding: 8px 18px; }
  .is-home .announce-text strong { font-size: 1.2rem; }
}
@media (min-width: 1100px) and (max-height: 740px) {
  .spot-next-box { display: none; }
  .spot-grid .cat-name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
}
/* Category tile pictures (Phosphor): filled shapes in the tile's colour, second tone lighter. */
.cat-tile-icon svg.ph { fill: currentColor; stroke: none; width: 62%; height: 62%; }
.cat-tile-icon svg.ph .ph-tone { opacity: 0.3; }
.spot-grid .cat-tile-icon svg.ph { width: 62%; height: 62%; }

/* BodaKe in the top bar of the front page (other pages say it in the strip) */
.boda-badge { display: none; }
.is-home .boda-badge { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bar-ink); padding: 4px 14px 4px 4px; border-radius: 12px; border: 1px solid var(--bar-edge); background: rgba(255, 255, 255, 0.06); white-space: nowrap; }
.is-home .boda-badge:hover { border-color: var(--accent); }
.is-home .boda-badge img { height: 34px; width: auto; padding: 3px 6px; }
.boda-words { display: flex; flex-direction: column; line-height: 1.15; }
.boda-words b { font-size: 0.85rem; }
.boda-words small { font-size: 0.72rem; opacity: 0.8; }
.is-home .shopbar-inner { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; }
@media (max-width: 1180px) { .is-home .boda-words small { display: none; } }
@media (max-width: 900px) { .is-home .boda-words { display: none; } .is-home .boda-badge { padding: 4px; } }
@media (max-width: 640px) {
  .is-home .shopbar-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .is-home .boda-badge { border: 0; padding: 0; background: none; }
  .is-home .boda-badge img { height: 30px; }
}
/* Few categories with items yet: tiles keep their size; a note for shops fills the space */
.spot-grid .cat-icon-grid.short { flex: none; grid-template-rows: none; grid-auto-rows: auto; gap: 16px 4px; padding-top: 8px; }
.cat-sell { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 12px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); text-decoration: none; font-size: 0.85rem; border: 1px dashed var(--brand); }
.cat-sell b { color: var(--brand); }
.cat-sell:hover { border-style: solid; }
.cat-sell[hidden] { display: none; }
@media (max-width: 1099px) { .cat-sell { display: none; } }

/* ---------- Search: wide, tall and easy to spot on every buyer page ---------- */
.shopbar-inner { max-width: 1320px; }
.shopbar form.search { min-width: 0; }
.shopbar form.search input {
  height: 48px; font-size: 1rem; padding-left: 46px; border: 2px solid var(--brand); border-right: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5fd0' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 15px center / 20px 20px;
}
.shopbar form.search input::placeholder { color: #55607a; opacity: 1; }
.shopbar form.search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 184, 28, 0.45); }
.shopbar form.search button { height: 48px; padding: 0 26px; font-size: 1rem; font-weight: 800; background: var(--accent); border: 2px solid var(--accent); color: var(--accent-ink); }
.shopbar form.search button:hover { filter: brightness(0.95); }
@media (min-width: 1100px) { .shopbar form.search { min-width: 420px; } }
@media (max-width: 640px) {
  .shopbar form.search input { height: 46px; padding-left: 42px; background-position: 13px center; }
  .shopbar form.search button { height: 46px; padding: 0 18px; }
}

/* ---------- Sharing: shop links, invites, QR codes ---------- */
canvas.qr { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.share-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.share-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 220px; }
.share-link { margin: 6px 0 12px; font-size: 1.15rem; font-weight: 800; word-break: break-all; }
.share-link a { color: var(--brand); text-decoration: none; }
.share-link a:hover { text-decoration: underline; }
.share-stats { margin-top: 14px; }
.wa-btn { background: #25d366; border-color: #25d366; color: #06301a; }
.wa-btn:hover { filter: brightness(0.95); }
.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.plain-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plain-list .pill { margin-left: auto; }
.invite-card { border: 2px dashed var(--accent); background: linear-gradient(180deg, #fffaf0, #fff); }
.invite-card h2 { margin-top: 0; }
.signup-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.signup-card { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.signup-card canvas.qr { max-width: 130px; }
.signup-card .share-link { font-size: 0.95rem; margin: 4px 0 8px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 12px; }
.settings-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.settings-group legend { font-weight: 800; padding: 0 6px; }
button.fit { width: auto; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.slug-input { width: 13rem; max-width: 100%; }
@media (max-width: 760px) {
  .share-card { grid-template-columns: minmax(0, 1fr); }
  .share-qr { width: auto; }
  .share-qr canvas.qr { max-width: 200px; }
}

/* =====================================================================
   Shop, rider and staff dashboards: sidebar menu and top bar (app-shell.js)
   ===================================================================== */
.has-app { background: #f2f4f9; }
.app { --side-w: 252px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.app.side-narrow { --side-w: 76px; }

/* Sidebar */
.app-side {
  position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #071a45 0%, #0a2563 55%, #0b2f7a 100%); color: #dfe7f7;
  border-right: 1px solid rgba(255, 255, 255, 0.06); z-index: 20;
}
.app-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); min-height: 74px; }
.app-brand img { width: 38px; height: 38px; border-radius: 10px; background: #fff; padding: 3px; flex: none; }
.app-brand.wide img { width: auto; height: 36px; padding: 4px 8px; }
.app-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.app-brand-text b { letter-spacing: 0.18em; font-size: 1.05rem; }
.app-brand-text small { color: #ffcf5c; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; }
.app-nav { flex: 1; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.app-group { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(223, 231, 247, 0.5); padding: 14px 12px 5px; }
.app-group:first-child { padding-top: 6px; }
.app-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px;
  color: #dfe7f7; text-decoration: none; font-weight: 600; font-size: 0.93rem; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.app-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.app-link:focus-visible { outline: 2px solid #ffcf5c; outline-offset: 1px; }
.app-link[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.app-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.app-icon { width: 21px; height: 21px; flex: none; fill: currentColor; }
.app-link[aria-current="page"] .app-icon { color: var(--accent); }
.app-link-text { overflow: hidden; text-overflow: ellipsis; }
.app-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.app-side-foot { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.app-collapse { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 36px; height: 32px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); color: #dfe7f7; }
.app-collapse:hover { background: rgba(255, 255, 255, 0.1); }
.app-collapse .app-icon { width: 16px; height: 16px; transition: transform 0.2s ease; }

/* Narrow menu: icons only */
.app.side-narrow .app-brand { justify-content: center; padding: 18px 8px 16px; }
.app.side-narrow .app-brand-text, .app.side-narrow .app-link-text, .app.side-narrow .app-group { display: none; }
.app.side-narrow .app-brand.wide img { height: 26px; padding: 3px 4px; max-width: 58px; object-fit: contain; }
.app.side-narrow .app-nav { padding: 10px 10px; }
.app.side-narrow .app-link { justify-content: center; padding: 11px 0; }
.app.side-narrow .app-link[aria-current="page"]::before { left: -10px; }
.app.side-narrow .app-badge { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.68rem; }
.app.side-narrow .app-collapse { align-self: center; }
.app.side-narrow .app-collapse .app-icon { transform: rotate(180deg); }
.app.side-narrow .app-group + .app-link { margin-top: 10px; }

/* Main column and top bar */
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app .topbar.app-top {
  position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(8px);
  color: var(--ink); border-bottom: 1px solid #e3e7ef; box-shadow: 0 1px 0 rgba(15, 23, 40, 0.02);
  padding: 12px 28px; gap: 14px; flex-wrap: nowrap; min-height: 66px;
}
.app .topbar .muted { color: var(--muted); }
.app-menu-btn { display: none; width: 40px; height: 40px; padding: 0; border-radius: 10px; background: #fff; border: 1px solid #e3e7ef; color: var(--ink); align-items: center; justify-content: center; flex: none; }
.app-menu-btn .app-icon { width: 22px; height: 22px; }
.app-crumb { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.app-crumb-app { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.app-crumb-title { font-size: 1.12rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .topbar .who { margin-left: auto; text-align: right; min-width: 0; line-height: 1.25; }
.app .topbar .who strong { font-size: 0.95rem; }
.app .topbar .who .muted { font-size: 0.8rem; }
.app-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #0a5fd0, #062a78); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e3e7ef; }
.app .topbar .who + .app-avatar { margin-left: 0; }
@media (max-width: 960px) { .app .topbar .app-avatar { margin-left: auto; } }
.app .topbar button.secondary { background: #fff; color: var(--ink); border: 1px solid #e3e7ef; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.app .topbar button.secondary:hover { background: #f5f7fb; border-color: #cfd6e3; }
.app .topbar #logout .app-icon { width: 17px; height: 17px; }
.app .topbar img.bodake-top { display: none; }

/* Page content */
.app .page { max-width: 1240px; width: 100%; margin: 0 auto; padding: 26px 28px 64px; gap: 20px; }
.app .page.narrow { max-width: 760px; }
.app .page > h1:first-child, .app .page h1 { font-size: 1.55rem; letter-spacing: -0.01em; }
.app .panel { border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 40, 0.04), 0 4px 16px -8px rgba(15, 23, 40, 0.08); padding: 18px 20px; }
.app .panel h2 { font-size: 1.08rem; }
.app .stats .panel { padding: 16px 18px; border-top: 3px solid var(--brand); }
.app .stats .panel:nth-child(2) { border-top-color: var(--accent); }
.app .stats .panel:nth-child(3) { border-top-color: #0f8a5f; }
.app .stats .panel:nth-child(4) { border-top-color: #7c3aed; }
.app .big { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.app .table-wrap { border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 40, 0.04); }
.app th { background: #f7f9fc; color: #6b7487; font-size: 0.72rem; letter-spacing: 0.08em; padding: 12px 14px; }
.app td { padding: 12px 14px; border-bottom-color: #eef1f6; }
.app tbody tr:hover td { background: #fafbfe; }
.app .tabs button { border-radius: 999px; padding: 7px 14px; font-weight: 600; }
.app .notice { border-radius: 12px; }
.app input, .app select, .app textarea { border-radius: 10px; }

/* Tablets and phones: the sidebar becomes a drawer */
@media (max-width: 960px) {
  .app, .app.side-narrow { grid-template-columns: minmax(0, 1fr); --side-w: 272px; }
  .app-side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); transform: translateX(-102%); transition: transform 0.22s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
  .app.side-open .app-side { transform: none; }
  .app.side-narrow .app-brand-text, .app.side-narrow .app-link-text, .app.side-narrow .app-group { display: revert; }
  .app.side-narrow .app-link { justify-content: flex-start; padding: 9px 12px; }
  .app-collapse { display: none; }
  .app-scrim { position: fixed; inset: 0; background: rgba(7, 18, 45, 0.45); z-index: 15; }
  .app-menu-btn { display: inline-flex; }
  .app .topbar.app-top { padding: 10px 14px; gap: 10px; min-height: 60px; }
  .app .page { padding: 18px 14px 56px; }
  .app .topbar .who { display: none; }
}
@media (max-width: 480px) {
  .app .topbar #logout { padding: 7px 9px; font-size: 0; gap: 0; }
  .app .topbar #logout .app-icon { width: 19px; height: 19px; }
  .app-crumb-title { font-size: 1.02rem; }
}
@media print { .app-side, .app-scrim, .app-menu-btn { display: none !important; } .app { display: block; } }
@media (prefers-reduced-motion: reduce) { .app-side, .app-link { transition: none; } }