/* Base styles. FOUNDATION. Units add theirs in public/<unit>.css. */
:root {
  --bg: #fbfaf7; --fg: #1f2421; --muted: #5d6762; --line: #dcdcd3;
  --accent: #1d6b52; --accent-fg: #ffffff; --warn: #a33a1f; --card: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151917; --fg: #e8ebe8; --muted: #a2aca6; --line: #2f3632;
    --accent: #5cc29d; --accent-fg: #0d1210; --warn: #f0886a; --card: #1c211f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
.test-banner { background: var(--fg); color: var(--bg); font-size: 14px; padding: 6px 16px; text-align: center; }
.test-banner a { color: inherit; }
header.site { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 22px; text-decoration: none; color: var(--fg); }
form.search { flex: 1 1 220px; }
form.search input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--fg); font: inherit; }
nav.user { display: flex; gap: 16px; }
nav.categories { flex-basis: 100%; display: flex; gap: 16px; overflow-x: auto; font-size: 15px; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
footer.site { display: flex; gap: 20px; justify-content: center; padding: 24px 16px;
  border-top: 1px solid var(--line); font-size: 14px; }
button, .button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-fg); text-decoration: none; display: inline-block; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
label { display: block; margin: 10px 0 4px; }
.error { color: var(--warn); font-weight: 600; }
.muted { color: var(--muted); }

/* Links read as links only inside sentences; anything you press looks like a button. */
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p a, li p a, .crumbs a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.test-banner a { text-decoration: underline; }

/* Buttons: primary (default), secondary (outlined), small. */
button:hover, .button:hover { filter: brightness(1.08); text-decoration: none; }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.secondary, .button.secondary, button.link,
.wishlist-login, .review-login a, .mission-start, .mission-notice a.button, .missions-signup, p.empty a {
  display: inline-block; font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); text-decoration: none;
}
button.secondary:hover, .button.secondary:hover, button.link:hover, .wishlist-login:hover,
.review-login a:hover, .mission-start:hover, .missions-signup:hover, p.empty a:hover {
  background: var(--accent); color: var(--accent-fg); text-decoration: none; filter: none;
}
.button.small, button.small, button.link, .mission-start { font-size: 13px; padding: 4px 10px; }

/* Header: menu items as quiet buttons, the cart as the main one, categories as chips. */
nav.user { align-items: center; gap: 8px; flex-wrap: wrap; }
nav.user a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg);
  font-size: 15px; text-decoration: none; white-space: nowrap; }
nav.user a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
nav.user a.cart-link { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
nav.user a.cart-link:hover { color: var(--accent-fg); filter: brightness(1.08); }
nav.user a.lang-link { font-size: 13px; font-weight: 600; padding: 6px 10px; }
nav.categories { gap: 8px; padding-bottom: 2px; }
nav.categories a { padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  color: var(--fg); white-space: nowrap; text-decoration: none; }
nav.categories a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--accent); }
@media (max-width: 420px) {
  nav.user { gap: 6px; }
  nav.user a { padding: 5px 9px; font-size: 14px; }
  nav.user a.lang-link { padding: 5px 8px; }
}
p.empty a { margin-left: 6px; }