/* Shared stylesheet for the static legal/company pages (terms, privacy, returns,
   legal notice, about, contact). It reuses the storefront palette so the pages look
   like part of the shop, and it also works in dark mode and in RTL (Arabic). */
:root {
  --bg: #EFE6D3;
  --surface: #FBF7EE;
  --ink: #221D16;
  --ink-soft: #6B6152;
  --line: rgba(34, 29, 22, .12);
  --green: #2B6E4E;
  --font-display: Montserrat, system-ui, sans-serif;
}
:root.dark-theme {
  --bg: #181614;
  --surface: #24211e;
  --ink: #F4EFE6;
  --ink-soft: #A39C93;
  --line: rgba(244, 239, 230, .14);
  --green: #7FC29B;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 var(--font-display);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.site-head {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head-inner { display: flex; align-items: center; gap: 12px; min-height: 62px; }
.brand {
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  font-size: 14px; color: var(--ink); text-decoration: none;
}
.lang-switch { margin-inline-start: auto; display: flex; gap: 4px; }
.lang-switch button {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
}
.lang-switch button[aria-current="true"] { background: var(--green); border-color: var(--green); color: #FBF7EE; }

.hero { padding: 44px 0 8px; }
.hero .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.hero h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 8px 0 10px; font-weight: 800; }
.hero .updated { font-size: 13px; color: var(--ink-soft); }
.hero .lede { font-size: 17px; color: var(--ink-soft); margin: 14px 0 0; }

.doc main { padding: 8px 0 56px; }
.doc section { margin-top: 34px; }
.doc h2 { font-size: 19px; margin: 0 0 8px; font-weight: 800; }
.doc h3 { font-size: 16px; margin: 20px 0 6px; font-weight: 700; }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-inline-start: 22px; }
.doc li { margin-bottom: 6px; }
.doc strong { font-weight: 700; }

.callout {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 16px 18px; margin: 0 0 18px;
}
.callout.todo { border-color: #C9762B; background: #FFF6E8; color: #4A3418; }
.dark-theme .callout.todo { background: #2A231B; color: #E8D8BE; }
/* A placeholder that no value in store-config.js replaced yet. */
.is-missing {
  background: #FFF1D6; color: #7A4A12; border: 1px dashed #C9762B;
  border-radius: 6px; padding: 0 6px; font-size: .92em; font-style: italic;
}
.dark-theme .is-missing { background: #33291C; color: #F0C78A; }

.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 6px; }
.card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 16px 18px; }
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-top: 22px; font-size: 14px; }
.toc ol { columns: 2; gap: 24px; margin: 0; padding-inline-start: 20px; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.site-foot { border-top: 1px solid var(--line); padding: 26px 0 40px; margin-top: 20px; font-size: 14px; color: var(--ink-soft); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot nav button {
  font: inherit; color: var(--ink-soft); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline dotted;
}
.site-foot nav button:hover { color: var(--green); }

.skip {
  position: absolute; inset-inline-start: -9999px;
}
.skip:focus { inset-inline-start: 8px; top: 8px; z-index: 20; background: var(--surface); padding: 8px 12px; border-radius: 8px; }

[dir="rtl"] body { letter-spacing: 0; line-height: 1.9; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }