/* layout.css — shared section layout helpers */
.section-head { text-align: center; margin-block-end: var(--space-2xl); }
.section-head .eyebrow { color: var(--color-accent-strong); letter-spacing: 0.15em;
  text-transform: uppercase; font-size: 0.8rem; font-family: var(--font-body-latin);
  margin-block-end: var(--space-sm); }
/* Anchor jumps (تسوّقي الآن → #categories, etc.) shouldn't land under the sticky header. */
.section[id], section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-lg)); }
.grid { display: grid; gap: var(--space-lg); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .grid-4, .grid-3 { grid-template-columns: 1fr; } }
/* Category tiles stay 2-up on mobile — 1-up made the homepage excessively tall. */
@media (max-width: 600px)  { .grid-3.category-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }