/* أنماط أساسية */
* { box-sizing: border-box; }
html { line-height: 1.6; }
body {
  margin: 0;
  direction: rtl;
  font-family: system-ui, Arial, sans-serif;
  color: #222;
  background: #fafafa;
}

.container { max-width: 980px; margin: 0 auto; padding: 0 16px; }

header, footer { background: #1a237e; color: #fff; }
header .tagline { margin: 0 0 12px; opacity: 0.9; }
header h1, footer p { margin: 12px 0; }

main { padding: 24px 0 32px; }

/* عناوين مخفية لقارئات الشاشة */
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.product {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 2px solid #e0e0e0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.product:focus, .product:hover {
  border-color: #3949ab;
  outline: 3px solid #9fa8da;
}

.product article { padding: 8px; }
figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; }
figcaption { padding: 8px 4px 0; }
figcaption h3 { margin: 6px 0 4px; font-size: 1.05rem; }
figcaption p { margin: 0 0 8px; font-size: 0.95rem; color: #444; }

.cart {
  background: #fff;
  padding: 24px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
}
.cart h2 { margin-top: 0; }

.btn {
  display: inline-block;
  padding: 10px 16px;
  border: 2px solid #1a237e;
  border-radius: 6px;
  text-decoration: none;
  color: #1a237e;
  font-weight: 600;
}
.btn:hover, .btn:focus { background: #1a237e; color: #fff; }

:focus { outline-offset: 2px; }