:root{
    --accent:#2e8057;
    --accent-light:#e9f1ec;
    --muted:#6b7b70;
    --bg:#fafafa;
    --text:#245d44;
    --header-height:60px; /* used by sticky categories */
  }
  
  /* Reset / base */
  *{ box-sizing:border-box; margin:0; padding:0; }
  html, body{ height:100%; }
  body{
    font-family:system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    line-height:1.4;
  }
  
  /* Header (sticky) */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 12px;
    background:#fff;
    border-bottom:1px solid var(--accent-light);
    position:sticky; top:0; z-index:20;
    min-height:var(--header-height);
  }
  header .logo img{ height:42px; }
  header h1{
    font-size:18px; font-weight:700; text-align:center;
    flex:1; margin:0 10px;
  }

  /* Keep header always on top */
header {
    position: sticky;
    top: 0;
    z-index: 100; /* above everything else */
    background: #fff;
  }
  
  /* If your header height varies, you can standardize: */
  :root { --header-height: 60px; }
  header { min-height: var(--header-height); }

  
  
  /* Language selector (compact chip) */
  .lang-selector{ position:relative; cursor:pointer; font-size:14px; font-weight:600; }
  .lang-selector .selected{
    padding:6px 10px; border-radius:10px; background:var(--accent); color:#fff;
    display:inline-flex; align-items:center; gap:6px;
  }
  .lang-selector .options{
    position:absolute; right:0; top:100%; margin-top:6px;
    background:#fff; border:1px solid var(--accent-light); border-radius:10px;
    display:none; flex-direction:column; min-width:132px;
    box-shadow:0 10px 18px rgba(0,0,0,.12); z-index:30;
  }
  .lang-selector.open .options{ display:flex; }
  .lang-selector .options div{
    padding:10px 12px; display:flex; gap:8px; align-items:center; cursor:pointer;
  }
  .lang-selector .options div:hover{ background:var(--accent-light); }
  .flag-cat{
    display:inline-block; width:18px; height:12px;
    background:url("../img/flags/cat.svg") center/cover no-repeat;
  }
  
  /* Mobile tweaks */
  @media (max-width:768px){
    header .logo img{ height:36px; }
    header h1{ font-size:16px; line-height:1.25; max-width:230px; }
  }
  @media (max-width:380px){
    header h1{ font-size:15px; }
  }