/* Base: reset-lite, typography, layout primitives. Logical properties = free RTL/LTR. */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-ar);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-text);
	background: var(--color-canvas);
	-webkit-font-smoothing: antialiased;
}

html[lang='en'] body { font-family: var(--font-en); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--leading-heading); margin: 0 0 var(--space-4); font-weight: 700; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0 0 var(--space-4); }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

button { font: inherit; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.kh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.kh-skip {
	position: absolute;
	inset-inline-start: 8px;
	top: -999px; /* Off-screen vertically: horizontal offsets create side scroll in RTL. */
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-2) var(--space-4);
	z-index: 100;
	text-decoration: none;
}
.kh-skip:focus { top: 8px; }

.kh-muted { color: var(--color-text-muted); }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) var(--space-6);
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font-weight: 500;
	font-size: var(--text-body);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--soft { background: var(--color-secondary-soft); border-color: transparent; color: var(--color-primary); font-weight: 600; }
.btn--soft:hover { background: var(--color-primary); color: #fff; }
.btn--whatsapp { background: var(--color-whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #168d50; color: #fff; }
/* "عرض" on product cards — accent-colored so it reads as its own action. */
.btn--view { background: var(--color-accent-bright, #d9b45a); color: var(--color-text); font-weight: 600; }
.btn--view:hover { filter: brightness(0.92); color: var(--color-text); }
.btn__ico { flex-shrink: 0; }
.btn--small { min-height: 38px; padding: var(--space-1) var(--space-4); font-size: var(--text-small); }
.btn--large { min-height: 50px; padding-inline: var(--space-7); }
.btn--block { width: 100%; }

.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	font-size: 1.2rem;
}
.icon-btn:hover { background: var(--color-secondary-soft); }
.icon-btn__count {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* Sections rhythm */
.section { padding-block: var(--space-10); }
.section--soft { background: var(--color-secondary-soft); }
.section__title { font-size: var(--text-h2); margin-bottom: var(--space-6); position: relative; }
.section__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	margin-top: var(--space-2);
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
.section__title--center { text-align: center; }
.section__title--center::after { margin-inline: auto; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section__more { font-size: var(--text-small); }

/* Empty states */
.empty { text-align: center; padding-block: var(--space-11); color: var(--color-text-muted); }
.empty--page { min-height: 40vh; }
.empty__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Breadcrumbs */
.crumbs {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	font-size: var(--text-small);
	color: var(--color-text-muted);
	padding-block: var(--space-4);
}
.crumbs a { text-decoration: none; color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-primary); }
.crumbs [aria-current] { color: var(--color-text); }

/* Prose */
.prose { max-width: 65ch; }

/* Pagination (core paginate_links list) */
.page-numbers { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-8) 0 0; justify-content: center; flex-wrap: wrap; }
.page-numbers a, .page-numbers span {
	display: inline-flex;
	min-width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	text-decoration: none;
}
.page-numbers span.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }