/* ════════════════════════════════════════════════════
   KachaBazar — Base / Reset
   Browser normalisation + layout primitives.
   Loaded on every page.
   ════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,picture,video,canvas,svg { display: block; max-width: 100%; }
input,button,textarea,select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--color-text-primary); }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--color-primary); }
ul,ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-muted); }
::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--radius-full); }

/* ── Layout ── */
.kbz-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.kbz-wrap {
  padding-top: calc(var(--header-height) + var(--subnav-height));
  min-height: 100vh;
}
.kbz-grid-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* ── Flex Utilities ── */
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }