/* === VARIABLES & RESET === */
:root {
  --red: #e2001a; --red-dark: #c00016; --red-light: #fef2f2;
  --red-glow: rgba(226,0,26,0.08);
  --green: #16a34a; --green-light: #f0fdf4;
  --orange: #ea580c; --orange-light: #fff7ed;
  --g0: #fff; --g50: #f9fafb; --g100: #f3f4f6; --g200: #e5e7eb;
  --g300: #d1d5db; --g400: #7c8391; --g500: #5a6170; --g600: #424a57;
  --g700: #374151; --g800: #1f2937; --g900: #111827;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
  --r: 10px; --r-lg: 14px;
  --max-w: 1400px;
  --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;width:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--g50);color:var(--g900);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip;width:100%;max-width:100vw}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}

/* === FOCUS RINGS (accessibility) === */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)!important}
button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
a:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.af-chip:focus-visible,.pg-btn:focus-visible,.mega-item:focus-visible,.cat-item:focus-visible,.typ-node:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

/* === Z-INDEX SCALE === */
/* 100: sticky header | 200: mega-menu | 500: cart overlay | 501: cart drawer | 600: mobile drawers | 900: modal overlay | 950: modal | 990: lightbox | 999: lightbox close */