* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { margin: 0; min-height: 100vh; font-family: "Tajawal", "Cairo", Arial, sans-serif; background: var(--bg); color: var(--text); }
[dir="ltr"] body { font-family: "Inter", "Segoe UI", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { border: 0; background: transparent; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { max-width: var(--container); margin: auto; padding: 0 28px; }
.skip-link { position: fixed; inset-inline-start: 18px; top: 10px; z-index: 5000; padding: 10px 14px; border-radius: 7px; background: #fff; color: #000; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 18px; border-radius: 7px; font-weight: 800; font-size: 14px; cursor: pointer; transition: .25s ease; }
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { transform: translateY(-2px); opacity: .88; }
.btn-secondary { color: #fff; border: 1px solid var(--border); background: #151518; }
.btn-secondary:hover { border-color: #555; }
body.drawer-open { overflow: hidden; }
section { padding: 86px 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .marquee-track { transform: none!important; }
  .hero-tabs::before { animation: none!important; }
  .btn-primary:hover, .ui8-card:hover, .ui8-card:hover .ui8-card-thumb img, .category-card:hover img { transform: none!important; }
}
@media (max-width: 550px) { .container { padding-inline: 18px; } }