/* =========================================================
   شعرك — تنسيق الصفحة الرئيسية
   الترتيب: المتغيرات ← الأساسيات ← أقسام الصفحة بالترتيب
   ========================================================= */

/* ---------- 1) المتغيرات ---------- */
:root {
	/* الألوان (الذهبي الغامق للأزرار والنصوص، الفاتح للزخرفة فقط) */
	--color-bg: #ffffff;
	--color-surface: #fbf7f1;
	--color-surface-2: #f4ece0;
	--color-border: #eae1d3;
	--color-heading: #1c1917;
	--color-text: #3d3833;
	--color-muted: #6b6259;
	--color-primary: #8c6a2f;
	--color-primary-hover: #74572a;
	--color-accent: #b8914f;
	--color-accent-soft: #f3e8d6;
	--color-star: #c28a1e;
	--color-star-empty: #e6dccd;
	--color-whatsapp: #1da851;

	/* خط واحد للصفحة كلها */
	--font: "Cairo", "Segoe UI", Tahoma, sans-serif;

	/* سُلّم المقاسات: 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48 */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-price: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);    /* 18 → 20 */
	--fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);       /* 20 → 24 */
	--fs-h2: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);          /* 24 → 32 */
	--fs-display-2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);  /* 28 → 40  عنوان بانر العروض */
	--fs-display: clamp(2rem, 1.2rem + 2.6vw, 3rem);       /* 32 → 48  أكبر عنوان: البانر الرئيسي */

	--lh-display: 1.35;
	--lh-heading: 1.4;
	--lh-body: 1.7;

	/* المسافات (مضاعفات 4px) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--section-space: clamp(2rem, 1.25rem + 2vw, 3rem);     /* 32 → 48 بين كل قسم والتاني */

	/* الحواف والظلال */
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 3px rgb(28 25 23 / 0.08);
	--shadow-md: 0 10px 30px rgb(28 25 23 / 0.08);

	--container: 1240px;
	--gutter: clamp(1rem, 3vw, 1.5rem);
}

/* ---------- 2) الأساسيات ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
	margin: 0;
}

h1,
h2,
h3 {
	color: var(--color-heading);
	line-height: var(--lh-heading);
	text-wrap: balance;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	color: inherit;
	font: inherit;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-heading);
	color: #fff;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* الأيقونات */
.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon--fill {
	fill: currentColor;
	stroke: none;
}

/* الأزرار: شكل واحد لكل أزرار الصفحة */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-5);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn:hover {
	background: var(--color-primary-hover);
}

.btn .icon {
	transition: transform 0.2s ease;
}

.btn:hover .icon--arrow {
	transform: translateX(-3px);
}

.btn--lg {
	min-height: 3.25rem;
	padding-inline: var(--space-6);
	font-size: var(--fs-md);
}

.btn--block {
	width: 100%;
}

/* عنوان القسم + رابط "عرض الكل" (نفس الشكل في كل الأقسام) */
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-end: var(--space-5);
}

.section-title {
	position: relative;
	padding-block-end: var(--space-2);
	font-size: var(--fs-h2);
	font-weight: 700;
}

.section-title::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--color-accent);
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 2.75rem;
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: 700;
	white-space: nowrap;
}

.link-more:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.link-more .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* ---------- 3) الشريط العلوي ---------- */
.topbar {
	border-block-end: 1px solid var(--color-border);
	background: var(--color-surface);
	font-size: var(--fs-sm);
}

.topbar__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 2.5rem;
}

.topbar__list li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.topbar .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-primary);
}

/* ---------- 4) الهيدر ---------- */
.header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 36rem) auto;
	grid-template-areas: "logo search actions";
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-block: var(--space-4);
}

.logo {
	grid-area: logo;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.logo__mark {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-accent);
	stroke-width: 1.5;
}

.logo__name {
	display: block;
	color: var(--color-heading);
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1.2;
}

.logo__tagline {
	display: block;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.search {
	grid-area: search;
	position: relative;
}

.search input {
	width: 100%;
	height: 3rem;
	padding-inline: var(--space-5) 3.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-heading);
	font-size: var(--fs-base);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.search input::placeholder {
	color: var(--color-muted);
}

.search input:focus {
	border-color: var(--color-primary);
	background: #fff;
}

.search button {
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--space-1);
	display: grid;
	place-items: center;
	width: 2.75rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
}

.search button:hover {
	color: var(--color-primary);
}

.header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	min-width: 3.5rem;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.action:hover {
	color: var(--color-primary);
}

.action .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.action__icon {
	position: relative;
}

.badge {
	position: absolute;
	top: -0.375rem;
	inset-inline-start: -0.625rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: var(--space-1);
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
}

.nav {
	border-block: 1px solid var(--color-border);
}

.nav__list {
	display: flex;
	justify-content: space-between;
	gap: var(--space-5);
	overflow-x: auto;
	scrollbar-width: none;
}

.nav__list::-webkit-scrollbar {
	display: none;
}

.nav__list a {
	position: relative;
	display: block;
	padding-block: var(--space-3);
	color: var(--color-heading);
	font-size: var(--fs-base);
	font-weight: 600;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.nav__list a:focus-visible {
	outline-offset: -2px;
}

.nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.nav__list a:hover,
.nav__list a[aria-current="page"] {
	color: var(--color-primary);
}

.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
}

/* ---------- 5) المحتوى: مسافة واحدة ثابتة بين كل الأقسام ---------- */
main {
	display: flex;
	flex-direction: column;
	gap: var(--section-space);
	padding-block: var(--space-5) var(--section-space);
}

/* ---------- 6) البانر الرئيسي ---------- */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	min-height: 27.5rem;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.hero__content {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-7) var(--space-6);
	text-align: center;
}

.hero__title {
	font-size: var(--fs-display);
	font-weight: 800;
	line-height: var(--lh-display);
}

.hero__title span {
	display: block;
	color: var(--color-primary);
}

.hero__text {
	font-size: var(--fs-md);
}

.hero__content .btn {
	margin-block-start: var(--space-2);
}

.hero__media {
	grid-column: 1;
	grid-row: 1;
	position: relative;
}

.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to left, #000 65%, transparent);
	mask-image: linear-gradient(to left, #000 65%, transparent);
}

.hero__features {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-3);
	margin-inline-start: var(--space-5);
}

.hero__features li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-1);
	padding-inline: var(--space-1) var(--space-4);
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.92);
	box-shadow: var(--shadow-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.feature-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-accent-soft);
	color: var(--color-primary);
}

.feature-icon .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* ---------- 7) الأقسام (سيدات / رجال) ---------- */
.cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

.cat-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.cat-card__top {
	display: grid;
	flex-grow: 1;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 13.75rem;
}

.cat-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-6) var(--space-5);
}

.cat-card__title {
	font-size: var(--fs-h3);
	font-weight: 700;
}

.cat-card__body .btn {
	margin-block-start: var(--space-2);
}

.cat-card__media {
	position: relative;
}

.cat-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-card__tiles {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--space-2);
	margin: 0 var(--space-3) var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: #fff;
}

.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-2) var(--space-1);
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tile img {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius-sm);
	object-fit: contain;
}

.tile:hover {
	background: var(--color-surface);
	color: var(--color-primary);
}

/* ---------- 8) كروت المنتجات ---------- */
.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
}

.product {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.product:hover {
	box-shadow: var(--shadow-md);
}

.product__media {
	position: relative;
	margin-block-end: var(--space-2);
}

.product__media img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
	object-fit: contain;
}

.product__wish {
	position: absolute;
	top: var(--space-2);
	inset-inline-end: var(--space-2);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: #fff;
	color: var(--color-heading);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.product__wish:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.product__title {
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.5;
}

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

/* التقييم والسعر والزر ينزلوا لتحت، فيبقوا على خط واحد في كل الكروت */
.product__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-block-start: auto;
}

.stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-star);
}

.stars .icon {
	width: 1rem;
	height: 1rem;
}

.stars .star--half {
	fill: url(#star-half);
}

.product__reviews {
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.product__price {
	color: var(--color-heading);
	font-size: var(--fs-price);
	font-weight: 800;
	line-height: 1.4;
}

.product__price span {
	font-size: var(--fs-sm);
	font-weight: 700;
}

.product .btn {
	margin-block-start: var(--space-1);
}

/* ---------- 9) بانر العروض ---------- */
.promo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "badge content media";
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-6) var(--space-7);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-2);
}

.promo__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-align: center;
}

.promo__eyebrow {
	font-size: var(--fs-base);
	font-weight: 600;
}

.promo__title {
	color: var(--color-primary);
	font-size: var(--fs-display-2);
	font-weight: 800;
	line-height: var(--lh-display);
}

.promo__text {
	font-size: var(--fs-md);
}

.promo__content .btn {
	margin-block-start: var(--space-3);
}

.promo__badge {
	grid-area: badge;
	display: grid;
	place-content: center;
	width: 9.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 0.5rem rgb(140 106 47 / 0.15);
	color: #fff;
	line-height: 1.2;
	text-align: center;
}

.promo__badge span {
	font-size: var(--fs-md);
	font-weight: 600;
}

.promo__badge strong {
	font-size: var(--fs-h2);
	font-weight: 800;
}

.promo__media {
	grid-area: media;
}

.promo__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-md);
	object-fit: cover;
}

/* ---------- 10) مميزات المتجر ---------- */
.trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-block: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding-inline: var(--space-4);
}

.trust__item + .trust__item {
	border-inline-start: 1px solid var(--color-border);
}

.trust__item .icon {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-heading);
	stroke-width: 1.5;
}

.trust__title,
.trust__text {
	display: block;
	line-height: 1.5;
}

.trust__title {
	color: var(--color-heading);
	font-size: var(--fs-base);
	font-weight: 700;
}

.trust__text {
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* ---------- 11) الفوتر ---------- */
.footer {
	border-block-start: 1px solid var(--color-border);
}

.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--space-6);
	padding-block: var(--space-7);
}

.footer__about {
	max-width: 38ch;
	margin-block-start: var(--space-3);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.footer__title {
	margin-block-end: var(--space-3);
	font-size: var(--fs-base);
	font-weight: 700;
}

.footer__links {
	display: grid;
	gap: var(--space-1);
}

.footer__links a {
	display: inline-block;
	padding-block: var(--space-1);
	font-size: var(--fs-sm);
	transition: color 0.2s ease;
}

.footer__links a:hover,
.footer__legal a:hover {
	color: var(--color-primary);
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-heading);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.social a:hover {
	background: var(--color-primary);
	color: #fff;
}

.social .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.footer__bottom {
	background: var(--color-surface);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

.footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	padding-block: var(--space-4);
}

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

/* زر واتساب */
.whatsapp {
	position: fixed;
	inset-block-end: var(--space-5);
	inset-inline-start: var(--space-5);
	z-index: 50;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--color-whatsapp);
	box-shadow: var(--shadow-md);
	color: #fff;
	transition: transform 0.2s ease;
}

.whatsapp:hover {
	transform: translateY(-2px);
}

.whatsapp .icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* ---------- 12) التابلت (أقل من 1024px) ---------- */
@media (max-width: 1023px) {
	.nav__list {
		justify-content: flex-start;
	}

	.cats {
		grid-template-columns: minmax(0, 1fr);
	}

	.products {
		gap: var(--space-4);
	}

	.product__title {
		font-size: var(--fs-sm);
	}

	.product__wish {
		width: 2.5rem;
		height: 2.5rem;
	}

	.product .btn {
		gap: var(--space-1);
		padding-inline: var(--space-2);
		font-size: var(--fs-sm);
	}

	.product .btn .icon {
		width: 1.125rem;
		height: 1.125rem;
	}

	.promo {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"badge content"
			"media media";
		padding: var(--space-6);
	}

	.trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-5);
	}

	.trust__item {
		justify-content: flex-start;
	}

	.trust__item + .trust__item {
		border: 0;
	}

	.footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer__brand {
		grid-column: 1 / -1;
	}
}

/* ---------- 13) الموبايل (أقل من 768px) ---------- */
@media (max-width: 767px) {
	.topbar__list {
		justify-content: center;
	}

	.topbar__list li + li {
		display: none;
	}

	.header__inner {
		grid-template-columns: auto auto;
		grid-template-areas:
			"logo actions"
			"search search";
		gap: var(--space-3);
		padding-block: var(--space-3);
	}

	.logo__mark {
		width: 2rem;
		height: 2rem;
	}

	.header__actions {
		gap: 0;
	}

	.action {
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

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

	.hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.hero__media {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 4 / 3;
	}

	.hero__media img {
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
		mask-image: linear-gradient(to bottom, #000 70%, transparent);
	}

	.hero__content {
		grid-column: 1;
		grid-row: 2;
		padding: var(--space-2) var(--space-4) var(--space-5);
	}

	.hero__features {
		grid-column: 1;
		grid-row: 3;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-self: stretch;
		gap: var(--space-2);
		margin: 0 var(--space-4) var(--space-5);
	}

	.hero__features li {
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	.feature-icon {
		width: 2rem;
		height: 2rem;
	}

	.cat-card__top {
		grid-template-columns: minmax(0, 1fr) 7.5rem;
		min-height: 11rem;
	}

	.cat-card__body {
		padding: var(--space-5) var(--space-4);
	}

	/* صف الأقسام يتسحب بالعرض، والتلاشي على الطرف يوضح إن فيه باقي */
	.cat-card__tiles {
		grid-auto-columns: 6.5rem;
		padding-inline-end: 2.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
		mask-image: linear-gradient(to right, transparent, #000 2.5rem);
	}

	.tile {
		scroll-snap-align: start;
	}

	.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.promo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"badge"
			"content"
			"media";
		gap: var(--space-4);
		padding: var(--space-5) var(--space-4);
	}

	.promo__badge {
		justify-self: center;
		width: 7rem;
	}

	.promo__badge span {
		font-size: var(--fs-sm);
	}

	.trust {
		padding-inline: var(--space-2);
	}

	.trust__item {
		flex-direction: column;
		gap: var(--space-2);
		text-align: center;
	}

	.footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer__col--social {
		grid-column: 1 / -1;
	}

	.footer__bottom-inner {
		justify-content: center;
		text-align: center;
	}
}

/* الموبايلات الصغيرة جدًا (أقل من 360px) */
@media (max-width: 359px) {
	.cat-card__top {
		grid-template-columns: minmax(0, 1fr) 5.5rem;
	}

	.cat-card__body .btn {
		padding-inline: var(--space-4);
	}

	.product .btn .icon {
		display: none;
	}
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}