/* Quantum OBP: palette (flag colors), light/dark, base and layout */

:root{
  /* Zambian flag: green = brand, orange = highlights, red = errors only, black = top bar and text */
  --green:#158000;--green-d:#0f6400;--green-soft:#e6f4e2;--link:#158000;
  --orange:#ef7d00;--orange-d:#e56a00;--on-orange:#1c1300;--orange-soft:#fff1de;
  --red:#de2010;--red-text:#c4190c;--red-soft:#fde8e6;
  --ink:#111614;--muted:#5d6a64;--line:#dfe5e1;--bg:#f3f5f4;--card:#fff;--field:#fff;--chip:#edf1ee;
  --skel-a:#e6ebe8;--skel-b:#f4f7f5;--warn:#8a4b00;--ok:#12805c;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);
  --r:14px;--top:56px;--tab:0px;--badge:0px;
  color-scheme:light;

  /* icons (drawn with CSS masks, so they take the text color and cost no downloads) */
  --i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
  --i-heart-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'/%3E%3C/svg%3E");
  --i-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  --i-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Dark mode: when the device is dark (and the user did not force Light) ... */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --link:#5ad24a;--green-soft:#15300f;--orange-soft:#33240f;--red-text:#ff7b70;--red-soft:#3a1714;
    --ink:#eef3f0;--muted:#9ba8a1;--line:#2a312d;--bg:#0d100f;--card:#171b19;--field:#1d2220;--chip:#232927;
    --skel-a:#1f2522;--skel-b:#2a312e;--warn:#ffb25c;--ok:#5ad2a0;--shadow:none;
    color-scheme:dark;
  }
}
/* ... or when the user chose Dark */
:root[data-theme="dark"]{
  --link:#5ad24a;--green-soft:#15300f;--orange-soft:#33240f;--red-text:#ff7b70;--red-soft:#3a1714;
  --ink:#eef3f0;--muted:#9ba8a1;--line:#2a312d;--bg:#0d100f;--card:#171b19;--field:#1d2220;--chip:#232927;
  --skel-a:#1f2522;--skel-b:#2a312e;--warn:#ffb25c;--ok:#5ad2a0;--shadow:none;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}
html[data-text="small"]{font-size:87.5%}
html[data-text="large"]{font-size:112.5%}
body{margin:0;padding-top:calc(var(--top) + 3px);padding-bottom:calc(var(--tab) + var(--badge) + env(safe-area-inset-bottom,0px));background:var(--bg);color:var(--ink);font:1rem/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
[hidden]{display:none!important}
a{color:var(--link);text-decoration:none}
h1{font-size:1.4rem;margin:.2rem 0 .8rem;line-height:1.2}
h2{font-size:1.1rem;margin:1.2rem 0 .5rem}
h3{font-size:.95rem;margin:0 0 .2rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
img{max-width:100%;height:auto;display:block}
p{margin:.5rem 0}

/* ---------- icons ---------- */
.ic{display:inline-block;width:24px;height:24px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-home{--ic:var(--i-home)}
.ic-heart-o{--ic:var(--i-heart-o)}
.ic-heart{--ic:var(--i-heart)}
.ic-plus{--ic:var(--i-plus)}
.ic-chat{--ic:var(--i-chat)}
.ic-user{--ic:var(--i-user)}
.ic-gear{--ic:var(--i-gear)}

/* ---------- top bar (black, with a small flag-stripe accent) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;background:#000;color:#fff}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--green) 0 76%,var(--red) 76% 84%,#000 84% 92%,var(--orange) 92%)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.2px;color:#fff;min-width:0}
.brand img{border-radius:6px}
.brand span{white-space:nowrap}
.top-icons{display:flex;align-items:center;gap:4px}
.top-search input{margin:0;padding:9px 16px;border-radius:99px;border:1px solid #333;background:#1b1e1c;color:#fff}
.top-search input::placeholder{color:#9aa39e}
.top-search input:focus{outline:2px solid var(--green);border-color:var(--green)}

.ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;padding:0}
.ibtn:hover{background:rgba(255,255,255,.14)}
.ibtn.on{color:#5ad24a}
.dot{position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;background:var(--orange);border:2px solid #000}

/* ---------- page area ---------- */
main{max-width:1240px;margin:0 auto}
.view{padding:12px}
.narrow{max-width:640px;margin-left:auto;margin-right:auto}
.back{display:inline-block;margin-bottom:8px;font-weight:600}

/* ---------- forms ---------- */
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset:disabled{opacity:.65}
label{display:block;margin:0 0 12px;font-size:.9rem;font-weight:600}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font:inherit;font-weight:400}
input[type=file]{padding:9px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);border-color:var(--green)}

.btn{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-align:center}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover,.btn.primary:active{background:var(--green-d)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.btn.orange:active{background:var(--orange-d)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent}
.btn.small{padding:6px 12px;font-size:.85rem}
.btn.block{display:block;width:100%;margin-bottom:8px}
.btn.wa{background:#1a8a46;border-color:#1a8a46;color:#fff}
.btn.danger{color:var(--red-text);border-color:var(--red-soft)}
.link{background:none;border:0;padding:4px 0;color:var(--link);font:inherit;font-size:.9rem;cursor:pointer}

/* ---------- cards and grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.meta,.by,.muted{color:var(--muted);font-size:.85rem}
.price{font-weight:700;color:var(--link)}

/* ---------- laptop layout ---------- */
.desk{display:none}
@media(min-width:600px){
  .grid{grid-template-columns:repeat(3,1fr)}
  html[data-density="compact"] .grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:900px){
  .topbar{display:grid;grid-template-columns:1fr minmax(320px,560px) 1fr;padding:0 18px}
  .brand{justify-self:start}
  .top-icons{justify-self:end}
  .desk{display:inline-flex}
  .btn.desk{display:inline-block}
  .top-search.desk{display:block}
  .view{padding:16px 20px}
  .grid{grid-template-columns:repeat(4,1fr);gap:14px}
  html[data-density="compact"] .grid{grid-template-columns:repeat(5,1fr)}
}
@media(min-width:1250px){
  .grid{grid-template-columns:repeat(5,1fr)}
  html[data-density="compact"] .grid{grid-template-columns:repeat(6,1fr)}
}
/* Phones: keep room at the bottom for the floating "Powered by Netlify" badge (bottom-right) */
@media(max-width:899px){
  :root{--badge:60px}
}