/* Souq shared primitives — buttons, badges, container, section heading,
   product grid, empty state. Every other component CSS file builds on
   these instead of redefining its own button/badge styles. */

.souq-container{ max-width:1280px; margin-inline:auto; padding-inline:16px; }

.souq-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	border:0; border-radius:var(--souq-radius-md);
	padding-block:12px; padding-inline:20px;
	font-weight:700; font-size:14px; line-height:1;
	transition:background var(--souq-motion-fast), transform var(--souq-motion-fast), box-shadow var(--souq-motion-fast);
}
.souq-btn--block{ width:100%; }
.souq-btn--primary{ background:var(--souq-primary); color:#fff; }
.souq-btn--primary:hover{ background:var(--souq-primary-dark); }
.souq-btn--secondary{ background:var(--souq-primary-light); color:var(--souq-primary-dark); }
.souq-btn--outline{ background:transparent; border:1px solid var(--souq-border-strong); color:var(--souq-primary-dark); }
.souq-btn--danger{ background:var(--souq-danger); color:#fff; }
.souq-btn--danger:hover{ background:#C43D3D; }
.souq-btn--hero-primary{ background:#fff; color:var(--souq-primary-deep); }
.souq-btn--hero-primary:hover{ transform:translateY(-2px); box-shadow:var(--souq-shadow-md); }
.souq-btn--hero-secondary{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); }

.souq-badge{ display:inline-block; border-radius:999px; font-size:12px; font-weight:800; padding:4px 10px; }
.souq-badge--gold{ background:var(--souq-accent-light); color:var(--souq-accent-dark); }
.souq-badge--danger{ background:var(--souq-danger); color:#fff; }
.souq-badge--new{ background:var(--souq-primary-light); color:var(--souq-primary-dark); }
.souq-badge--muted{ background:var(--souq-surface-secondary); color:var(--souq-text-muted); border:1px solid var(--souq-border); }
.souq-badge--corner{ position:absolute; top:8px; }
.souq-product-card .souq-badge--gold{ position:absolute; top:8px; }
[dir="rtl"] .souq-badge--corner{ inset-inline-start:8px; }

.souq-section-heading{ display:flex; align-items:center; justify-content:space-between; margin-block-end:16px; }
.souq-section-heading h2{ font-size:20px; font-weight:900; color:var(--souq-text); margin:0; }
.souq-link{ color:var(--souq-primary); font-weight:700; font-size:14px; }
.souq-link:hover{ text-decoration:underline; }

.souq-product-grid{
	display:grid; gap:16px;
	grid-template-columns:repeat(2, 1fr);
}
@media (min-width:768px){ .souq-product-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1024px){ .souq-product-grid{ grid-template-columns:repeat(4, 1fr); } }

.souq-empty-state{
	text-align:center; padding:48px 16px; color:var(--souq-text-muted);
	background:var(--souq-surface); border:1px dashed var(--souq-border-strong);
	border-radius:var(--souq-radius-lg);
}

.souq-content{ padding-block:32px; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
.souq-skip-link{ position:absolute; inset-inline-start:-999px; top:0; background:var(--souq-primary); color:#fff; padding:10px 16px; z-index:1000; }
.souq-skip-link:focus{ inset-inline-start:8px; top:8px; }