/* تخطيط الصفحات. يُنقل حرفيًا إلى القالب في المرحلة ٣ — لا مكوّنات هنا، فقط تخطيط.
   كل الاتجاهات منطقية (inline/block) — لا `left` ولا `right` كخصائص. */

/* ===== وصل التصميم بتخطيط ووردبريس =====
   الأنماط العامة المولَّدة تضيف `:where(.wp-site-blocks) > *{margin-block-start:24px}`
   لكل ابن مباشر عدا الأول (فراغ الكتل). في نموذج التصميم شريط الإعلان والرأس
   ملتصقان بلا فراغ، فقيس على `/shop/`: ظهر شريط بعرض ٢٤px من لون الخلفية
   بينهما.

   نصفّر الرأس وحده لا كل الأبناء: التصفير الشامل كان يسحب ٢٤px من `<main>` في
   كل قالب أيضًا — أثر جانبي لم يكن مقصودًا ولا مقيسًا، وكان سيصير عقدًا خفيًا
   ترثه قوالب المهام ٤–٧ بلا أن تعرف بوجوده. كل قالب يملك تباعده العلوي بنفسه:
   الهيرو ملاصق للرأس عمدًا، والقوالب البسيطة تعلن حشوها في ملفها.

   `.fs-footer` يحتفظ بتباعده الخاص من قاعدته أدناه. المحدّد هنا (0,2,0) يغلب
   قاعدة `:where()` ذات الخصوصية (0,0,0) — بالخصوصية لا بترتيب المصدر. */
.wp-site-blocks > .fs-header {
	margin-block-start: 0;
}

/* الصفحة الرئيسية وحدها: `<main>` فيها ملاصق للرأس، فالهيرو أول ما يُرى بلا
   فاصل — هكذا في `design/index.html` حيث لا قاعدة تعطي `<main>` أي هامش.
   قِيس قبل هذه القاعدة على `/` عند 1440px: `main` بهامش علوي `24px` من
   `:where(.wp-site-blocks) > *`، والمسافة بين أسفل `.fs-header` (109.39px)
   وأعلى `.fs-hero` (133.39px) = 24px من لون الخلفية فوق صورة الهيرو.

   نقصرها على `.home` لا على كل `main`: `page.html` و`single.html` و`404.html`
   تعلن ٤٨px عمدًا (إصلاح مراجعة المهمة ٣)، وقوالب ووكومرس ليست ملكنا وتغيير
   تباعدها هنا أثر جانبي غير مقيس. */
.home .wp-site-blocks > main {
	margin-block-start: 0;
}

/* الأرشيف كذلك: `.fs-crumbs` شريط سطحٍ بحدٍّ سفلي يبدأ فور انتهاء الرأس.
   قِيس في `design/archive.html` عند 1440px: أسفل `.fs-header` = 109.39px،
   وأعلى `.fs-crumbs` = 109.39px، أي فجوة صفر. وقِيس على `/shop/` قبل هذه
   القاعدة: 109.39px مقابل 133.39px — شريط ٢٤px من لون الخلفية يقطع الشريطين.
   المصدر هو `:where(.wp-site-blocks) > *{margin-block-start:24px}` الواقعة على
   `<main>`.

   الصنف على العنصر لا على `body`: صنف الجسم يختلف بين `/shop/` وأرشيف التصنيف
   وأرشيف البراند، والقالب هو من يعرف أنه يفتح بفتات طريق ملاصقة. */
.wp-site-blocks > .fs-archive-main {
	margin-block-start: 0;
}

.fs-container {
	inline-size: 100%;
	max-inline-size: var(--fs-container);
	margin-inline: auto;
	padding-inline: var(--fs-space-5);
}

/* شبكة المنتجات — عمودان على الجوال، ثلاثة على اللوح، أربعة على سطح المكتب.
   أعمدة صريحة لا auto-fill، حتى لا تنزلق الشبكة إلى ٥ أعمدة على ١٤٤٠px. */
.fs-grid--products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fs-space-4);
}

@media (min-width: 700px) {
	.fs-grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--fs-space-5);
	}
}

@media (min-width: 1080px) {
	.fs-grid--products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fs-shell {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--fs-space-6);
	align-items: start;
}

@media (max-width: 900px) {
	.fs-shell {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===== رابط التخطّي ===== */

.fs-skip {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 200;
	background: var(--fs-ink);
	color: #fff;
	padding-block: var(--fs-space-3);
	padding-inline: var(--fs-space-5);
	font-size: var(--fs-text-sm);
	font-weight: 600;
	border-end-end-radius: var(--fs-radius);
	transform: translateY(-130%);
	transition: transform 0.2s ease;
}

.fs-skip:focus {
	transform: translateY(0);
}

/* ===== شريط الإعلان ===== */

.fs-announce {
	background: var(--fs-ink);
	color: #F2F1EE;
}

.fs-announce__text {
	margin: 0;
	padding-block: var(--fs-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fs-space-3);
	font-size: var(--fs-text-xs);
	letter-spacing: 0.02em;
	text-align: center;
}

.fs-announce__dot {
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--fs-accent);
	flex: 0 0 auto;
}

/* ===== رأس الصفحة ===== */

.fs-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background: var(--fs-surface);
	border-block-end: 1px solid var(--fs-border);
}

.fs-header__bar {
	block-size: var(--fs-header-height);
	display: flex;
	align-items: center;
}

/* مقصورة على شريط الرأس وحده — لا تلمس حاوية قائمة الجوال. */
.fs-header__bar .fs-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-5);
	inline-size: 100%;
}

/* الشعار */
.fs-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-3);
	flex: 0 0 auto;
}

/* رابط الرأس وحده بحاجة مساحة لمس ٤٤px — نسخة الفوتر عنصر `span` بلا رابط. */
a.fs-logo {
	padding-block: 6px;
}

.fs-logo__mark {
	inline-size: 22px;
	block-size: 22px;
	flex: 0 0 auto;
	background: var(--fs-accent);
	transform: rotate(45deg);
	box-shadow: inset 0 0 0 3px var(--fs-surface), inset 0 0 0 4px var(--fs-accent);
}

.fs-logo__text {
	display: grid;
	line-height: 1.1;
}

.fs-logo__word {
	font-family: var(--fs-font-head);
	font-weight: 800;
	font-size: var(--fs-text-lg);
	letter-spacing: -0.01em;
	color: var(--fs-ink);
}

.fs-logo__sub {
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	color: var(--fs-ink-soft);
}

/* شريط التنقّل */
/* القائمة تبدأ من الحافة البادئة (اليمين) بجوار الشعار، والأيقونات تُدفع
   إلى الحافة المنتهية (اليسار) بفضل space-between على الحاوية. */
.fs-nav-wrap {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-start;
	padding-inline-start: var(--fs-space-5);
	min-inline-size: 0;
}

.fs-nav {
	display: flex;
	align-items: center;
	gap: var(--fs-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-nav a {
	position: relative;
	display: inline-block;
	padding-block: var(--fs-space-2);
	font-size: var(--fs-text-sm);
	font-weight: 500;
	color: var(--fs-ink);
	white-space: nowrap;
}

.fs-nav a::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 1px;
	background: var(--fs-accent);
	transition: inline-size 0.24s ease;
}

.fs-nav a:hover::after,
.fs-nav a:focus-visible::after {
	inline-size: 100%;
}

/* التحويم يترك لون النص كما هو ويُظهر الخط الذهبي أسفله:
   الذهبي على الأبيض 2.6:1 فقط — لا يصلح لونًا لنصّ. */
.fs-nav a:hover {
	color: var(--fs-ink);
}

/* رابط «تخفيضات» أحمر في القائمتين. المحدّد أخص من `.fs-nav a` و`.fs-nav a:hover`
   و`.fs-mobile-nav__list a:hover`، فيكسب بالخصوصية وحدها بلا `!important`:
   (0,3,1) عند التحويم مقابل (0,2,1)، و(0,2,1) في الحالة العادية مقابل (0,1,1). */
.fs-nav a.fs-nav__sale,
.fs-nav a.fs-nav__sale:hover,
.fs-mobile-nav__list a.fs-nav__sale,
.fs-mobile-nav__list a.fs-nav__sale:hover {
	color: var(--fs-sale);
	font-weight: 600;
}

/* أيقونات الرأس */
.fs-actions {
	display: flex;
	align-items: center;
	gap: var(--fs-space-1);
	flex: 0 0 auto;
}

.fs-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	color: var(--fs-ink);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.fs-iconbtn:hover {
	background: var(--fs-bg);
	color: var(--fs-ink);
}

.fs-count {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-inline-size: 17px;
	block-size: 17px;
	display: grid;
	place-items: center;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--fs-accent);
	color: var(--fs-accent-ink);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
}

/* زر الهمبرغر */
.fs-burger {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--fs-ink);
}

.fs-burger__bars,
.fs-burger__bars::before,
.fs-burger__bars::after {
	display: block;
	inline-size: 20px;
	block-size: 1.5px;
	background: currentColor;
	transition: transform 0.22s ease, opacity 0.18s ease;
}

.fs-burger__bars {
	position: relative;
}

.fs-burger__bars::before,
.fs-burger__bars::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
}

.fs-burger__bars::before {
	inset-block-start: -6px;
}

.fs-burger__bars::after {
	inset-block-start: 6px;
}

.fs-burger[aria-expanded='true'] .fs-burger__bars {
	background: transparent;
}

.fs-burger[aria-expanded='true'] .fs-burger__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.fs-burger[aria-expanded='true'] .fs-burger__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* قائمة الجوال */
.fs-mobile-nav {
	display: none;
	background: var(--fs-surface);
	border-block-start: 1px solid var(--fs-border);
	padding-block: var(--fs-space-4) var(--fs-space-5);
	animation: fs-drop 0.24s ease both;
}

.fs-mobile-nav[data-open] {
	display: block;
}

@keyframes fs-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fs-mobile-nav__list {
	list-style: none;
	margin: 0 0 var(--fs-space-4);
	padding: 0;
	display: grid;
}

.fs-mobile-nav__list a {
	display: block;
	padding-block: var(--fs-space-3);
	border-block-end: 1px solid var(--fs-border);
	font-size: var(--fs-text-base);
	font-weight: 500;
}

.fs-mobile-nav__list a:hover {
	color: var(--fs-accent);
}

.fs-mobile-nav__foot {
	display: grid;
	gap: var(--fs-space-3);
}

@media (max-width: 1023px) {
	.fs-nav-wrap {
		display: none;
	}
	.fs-burger {
		display: inline-flex;
	}
	.fs-iconbtn--wide {
		display: none;
	}
}

@media (min-width: 1024px) {
	.fs-mobile-nav {
		display: none !important;
	}
}

/* ===== الهيرو ===== */

.fs-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: clamp(430px, 68vh, 620px);
	overflow: hidden;
	isolation: isolate;
	background: var(--fs-ink);
}

.fs-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.fs-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

/* الحجاب: داكن عند الحافة البادئة (يمين) ويخفّ نحو الحافة المنتهية.
   270deg يتّجه نحو اليسار، فأول لون يستقرّ عند اليمين. */
.fs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(270deg, rgba(28, 32, 36, 0.90) 0%, rgba(28, 32, 36, 0.72) 34%, rgba(28, 32, 36, 0.28) 68%, rgba(28, 32, 36, 0.10) 100%),
		linear-gradient(0deg, rgba(28, 32, 36, 0.55) 0%, rgba(28, 32, 36, 0) 55%);
}

/* نسيج قطري خفيف جدًا — يعطي إحساس القماش بلا صور خارجية. */
.fs-hero__weave {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.5;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.045) 0px,
		rgba(255, 255, 255, 0.045) 1px,
		transparent 1px,
		transparent 5px
	);
}

.fs-hero__inner {
	padding-block: clamp(3rem, 8vw, 5.5rem);
	color: #F6F5F2;
	max-inline-size: 100%;
}

.fs-hero__eyebrow,
.fs-hero__title,
.fs-hero__text,
.fs-hero__actions {
	animation: fs-rise 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

.fs-hero__title    { animation-delay: 0.07s; }
.fs-hero__text     { animation-delay: 0.14s; }
.fs-hero__actions  { animation-delay: 0.21s; }

@keyframes fs-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fs-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--fs-space-3);
	margin: 0 0 var(--fs-space-4);
	font-size: var(--fs-text-xs);
	letter-spacing: 0.24em;
	color: #E8D69A;
}

.fs-rule {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--fs-accent);
	flex: 0 0 auto;
}

.fs-hero__title {
	font-size: clamp(2.4rem, 7.2vw, 4.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--fs-space-4);
	text-wrap: balance;
}

.fs-hero__text {
	max-inline-size: 44ch;
	margin: 0 0 var(--fs-space-6);
	color: #DFDDD7;
	font-size: var(--fs-text-base);
	line-height: 1.85;
}

.fs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-3);
}

/* الزر الشبح فوق الصورة — حدود فاتحة لا رمادية. */
.fs-hero__actions .fs-btn--ghost {
	border-color: rgba(246, 245, 242, 0.55);
	color: #F6F5F2;
}

.fs-hero__actions .fs-btn--ghost:hover {
	border-color: #F6F5F2;
	background: rgba(246, 245, 242, 0.12);
}

/* ===== إيقاع الأقسام ===== */

.fs-section {
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.fs-section--tight {
	padding-block: clamp(2rem, 4vw, 3rem);
}

.fs-band {
	background: var(--fs-surface);
	border-block: 1px solid var(--fs-border);
}

/* ترويسة القسم */
.fs-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--fs-space-5);
	flex-wrap: wrap;
	margin-block-end: var(--fs-space-6);
	padding-block-end: var(--fs-space-4);
	border-block-end: 1px solid var(--fs-border);
}

.fs-sec-head--slim {
	margin-block-end: var(--fs-space-4);
}

.fs-sec-head__main {
	min-inline-size: 0;
}

/* رقم القسم بلون النص الخافت (5.1:1) والمعيّن الذهبي يحمل اللون المميّز —
   الذهبي نفسه على الخلفية الحجرية 2.1:1 فلا يُستعمل نصًّا. */
.fs-sec-num {
	display: flex;
	align-items: center;
	gap: var(--fs-space-2);
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-xs);
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--fs-ink-soft);
	margin-block-end: var(--fs-space-2);
}

.fs-sec-num::before {
	content: '';
	inline-size: 7px;
	block-size: 7px;
	flex: 0 0 auto;
	background: var(--fs-accent);
	transform: rotate(45deg);
}

.fs-sec-title {
	font-size: clamp(1.5rem, 3.6vw, var(--fs-text-2xl));
	font-weight: 800;
	letter-spacing: -0.015em;
}

.fs-sec-title--sm {
	font-size: clamp(1.25rem, 3vw, var(--fs-text-xl));
}

.fs-sec-sub {
	margin: var(--fs-space-2) 0 0;
	color: var(--fs-ink-soft);
	font-size: var(--fs-text-sm);
	max-inline-size: 52ch;
}

.fs-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-2);
	font-size: var(--fs-text-sm);
	font-weight: 600;
	color: var(--fs-ink);
	/* الحشو العلوي يكبّر مساحة اللمس إلى ٤٤px مع إبقاء الخط السفلي ملاصقًا للنص. */
	padding-block: 19px 2px;
	border-block-end: 1px solid var(--fs-accent);
	white-space: nowrap;
}

.fs-link-arrow svg {
	transition: transform 0.22s ease;
}

.fs-link-arrow:hover {
	border-block-end-width: 2px;
	padding-block-end: 1px;
}

.fs-link-arrow:hover svg {
	transform: translateX(-4px);
}

/* ===== بطاقات الأقسام ===== */

.fs-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fs-space-4);
}

@media (min-width: 1024px) {
	.fs-cats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--fs-space-5);
	}
	/* إزاحة رأسية متناوبة — تكسر رتابة الصف الواحد. */
	.fs-cats .fs-cat:nth-child(even) {
		margin-block-start: var(--fs-space-7);
	}
}

.fs-cat {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--fs-radius-lg);
	background: var(--fs-ink);
	isolation: isolate;
}

.fs-cat__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.fs-cat__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.fs-cat::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(28, 32, 36, 0.86) 0%, rgba(28, 32, 36, 0.34) 42%, rgba(28, 32, 36, 0) 72%);
	pointer-events: none;
}

.fs-cat__body {
	position: absolute;
	z-index: 2;
	inset-block-end: 0;
	inset-inline: 0;
	display: grid;
	gap: var(--fs-space-2);
	padding: var(--fs-space-4);
	color: #F6F5F2;
}

.fs-cat__name {
	font-family: var(--fs-font-head);
	font-weight: 800;
	font-size: clamp(1.05rem, 2.4vw, var(--fs-text-lg));
	line-height: 1.2;
}

.fs-cat__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-2);
	font-size: var(--fs-text-xs);
	letter-spacing: 0.14em;
	color: #E8D69A;
}

.fs-cat__cta::before {
	content: '';
	inline-size: 0;
	block-size: 1px;
	background: var(--fs-accent);
	transition: inline-size 0.32s ease;
}

.fs-cat:hover .fs-cat__cta::before,
.fs-cat:focus-visible .fs-cat__cta::before {
	inline-size: 24px;
}

.fs-cat:hover .fs-cat__media img,
.fs-cat:focus-visible .fs-cat__media img {
	transform: scale(1.06);
}

/* ===== شريط البراندات ===== */

.fs-brands {
	border-block: 1px solid var(--fs-border);
	background: var(--fs-surface);
}

/* الأسماء الاثنا عشر تتوزّع داخل حاويتها وتلتفّ إلى صفوف على الشاشات الضيّقة،
   فلا يخرج أي اسم خارج إطار الصفحة ولا يوجد تمرير أفقي على الإطلاق.
   الفواصل الشعرية مصنوعة من فجوة ١px فوق لون الحدّ. */
.fs-brands__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--fs-border);
}

.fs-brands__track > li {
	background: var(--fs-surface);
	min-inline-size: 0;
}

.fs-brand {
	display: block;
	padding-block: var(--fs-space-4);
	padding-inline: var(--fs-space-2);
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fs-ink-soft);
	overflow-wrap: anywhere;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.fs-brand:hover {
	color: var(--fs-ink);
	background: var(--fs-bg);
}

@media (min-width: 560px) {
	.fs-brands__track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.fs-brand {
		font-size: var(--fs-text-xs);
		letter-spacing: 0.16em;
	}
}

@media (min-width: 1024px) {
	/* صفّ واحد على سطح المكتب — الأسماء الاثنا عشر بعرض الحاوية كاملًا. */
	.fs-brands__track {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

/* ===== شريط الثقة ===== */

.fs-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fs-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--fs-space-3);
	padding-block: var(--fs-space-5);
	padding-inline: var(--fs-space-4);
	border-block-end: 1px solid var(--fs-border);
	border-inline-end: 1px solid var(--fs-border);
}

.fs-trust__item:nth-child(even) {
	border-inline-end: 0;
}

.fs-trust__item:nth-child(n + 3) {
	border-block-end: 0;
}

.fs-trust__item svg {
	flex: 0 0 auto;
	color: var(--fs-accent);
	margin-block-start: 2px;
}

.fs-trust__text {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

.fs-trust__title {
	font-family: var(--fs-font-head);
	font-weight: 700;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink);
}

.fs-trust__note {
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
	line-height: 1.6;
}

@media (min-width: 860px) {
	.fs-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.fs-trust__item {
		border-block-end: 0;
		border-inline-end: 1px solid var(--fs-border);
	}
	.fs-trust__item:nth-child(even) {
		border-inline-end: 1px solid var(--fs-border);
	}
	.fs-trust__item:last-child {
		border-inline-end: 0;
	}
}

/* ===== تذييل الصفحة ===== */

.fs-footer {
	margin-block-start: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(2.5rem, 5vw, 4rem) var(--fs-space-5);
	background: var(--fs-ink);
	color: #CFCEC9;
	font-size: var(--fs-text-sm);
}

.fs-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-space-6);
}

@media (min-width: 700px) {
	.fs-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.fs-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
		gap: var(--fs-space-6);
	}
}

.fs-footer__col {
	min-inline-size: 0;
}

.fs-logo--footer {
	margin-block-end: var(--fs-space-4);
}

.fs-logo--footer .fs-logo__word {
	color: #F6F5F2;
}

.fs-logo--footer .fs-logo__mark {
	box-shadow: inset 0 0 0 3px var(--fs-ink), inset 0 0 0 4px var(--fs-accent);
}

.fs-logo--footer .fs-logo__sub {
	color: #A9A79F;
}

.fs-footer__title {
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--fs-accent);
	margin-block-end: var(--fs-space-4);
	padding-block-end: var(--fs-space-3);
	border-block-end: 1px solid rgba(246, 245, 242, 0.14);
}

.fs-footer__about {
	margin: 0 0 var(--fs-space-4);
	line-height: 1.9;
	max-inline-size: 46ch;
}

.fs-footer__links,
.fs-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fs-space-3);
}

/* الروابط وحدها بحاجة مساحة لمس ٤٤px — عناصر التواصل نص عادي فلا تلمسها. */
.fs-footer__links {
	gap: 0;
}

.fs-footer__links a {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: 12px;
	color: #CFCEC9;
	transition: color 0.18s ease, transform 0.18s ease;
}

.fs-footer__links a:hover {
	color: #F6F5F2;
	transform: translateX(-4px);
}

.fs-footer__contact li {
	display: grid;
	gap: 2px;
	line-height: 1.7;
}

.fs-footer__label {
	font-size: var(--fs-text-xs);
	letter-spacing: 0.12em;
	color: #A9A79F;
}

.fs-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--fs-space-2);
}

.fs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid rgba(246, 245, 242, 0.2);
	border-radius: 50%;
	color: #CFCEC9;
	transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.fs-social a:hover {
	border-color: var(--fs-accent);
	color: var(--fs-accent);
	background: rgba(195, 159, 50, 0.1);
}

.fs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-3);
	margin-block-start: var(--fs-space-6);
	padding-block-start: var(--fs-space-4);
	border-block-start: 1px solid rgba(246, 245, 242, 0.14);
	font-size: var(--fs-text-xs);
	color: #A9A79F;
}

.fs-footer__bottom p {
	margin: 0;
}

.fs-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-4);
}

.fs-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.fs-footer__legal a:hover {
	color: #F6F5F2;
}

/* ===== أرشيف المنتجات =====
   تخطيط الصفحة فقط. أنماط مكوّن الفلتر نفسه في components.css. */

/* فتات الطريق */
.fs-crumbs {
	background: var(--fs-surface);
	border-block-end: 1px solid var(--fs-border);
}

.fs-crumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-block: var(--fs-space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fs-space-2);
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
}

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

.fs-crumbs__list li::after {
	content: '\2039';
	color: var(--fs-border);
}

.fs-crumbs__list li:last-child::after {
	content: none;
}

.fs-crumbs__list a:hover {
	color: var(--fs-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fs-crumbs__list [aria-current='page'] {
	color: var(--fs-ink);
	font-weight: 600;
}

/* رأس الأرشيف */
.fs-archive-head {
	padding-block: clamp(1.75rem, 4vw, 2.75rem) 0;
}

.fs-archive-head__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--fs-space-3) var(--fs-space-5);
}

.fs-archive-title {
	font-size: clamp(1.6rem, 4.4vw, var(--fs-text-3xl));
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fs-archive-count {
	display: inline-flex;
	align-items: baseline;
	gap: var(--fs-space-2);
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
	padding-block-end: 4px;
}

.fs-archive-count b {
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-lg);
	color: var(--fs-ink);
}

.fs-archive-desc {
	margin: var(--fs-space-3) 0 0;
	max-inline-size: 62ch;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

/* شريط الفلاتر النشطة */
.fs-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fs-space-3);
	margin-block-start: var(--fs-space-5);
	padding-block: var(--fs-space-4);
	border-block-start: 1px solid var(--fs-border);
}

.fs-active[hidden] {
	display: none;
}

.fs-active__label {
	font-size: var(--fs-text-xs);
	letter-spacing: 0.14em;
	color: var(--fs-ink-soft);
	flex: 0 0 auto;
}

.fs-active__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-2);
	min-inline-size: 0;
}

/* رقاقة قابلة للإزالة — تُحذف عند النقر، فلا تحمل حالة ضغط. */
.fs-active__list .fs-chip:hover {
	border-color: var(--fs-sale);
	color: var(--fs-sale);
}

.fs-active__clear {
	margin-inline-start: auto;
	/* الحشو العلوي يكبّر مساحة اللمس إلى ٤٤px مع إبقاء الخط السفلي ملاصقًا للنص. */
	padding-block: 21px 2px;
	padding-inline: 0;
	background: none;
	border: 0;
	border-block-end: 1px solid var(--fs-accent);
	font-family: inherit;
	font-size: var(--fs-text-sm);
	font-weight: 600;
	color: var(--fs-ink);
	cursor: pointer;
	white-space: nowrap;
}

.fs-active__clear:hover {
	border-block-end-width: 2px;
	padding-block-end: 1px;
}

/* هيكل الأرشيف */
.fs-archive {
	padding-block: var(--fs-space-5) clamp(2rem, 5vw, 3.5rem);
}

/* الشريط الجانبي */
.fs-filters {
	--fs-slide: 1;
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-lg);
	padding: var(--fs-space-5);
}

[dir='ltr'] .fs-filters {
	--fs-slide: -1;
}

.fs-filters__head,
.fs-filters__foot {
	display: none;
}

/* شريط الأدوات */
.fs-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--fs-space-3);
	margin-block-end: var(--fs-space-5);
	padding-block-end: var(--fs-space-4);
	border-block-end: 1px solid var(--fs-border);
}

.fs-toolbar__count {
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
	min-inline-size: 0;
}

/* زر فتح لوحة الفلاتر — على الجوال وحده */
.fs-filters-btn {
	display: none;
}

.fs-sort {
	display: flex;
	align-items: center;
	gap: var(--fs-space-3);
	min-inline-size: 0;
}

.fs-sort label {
	white-space: nowrap;
	color: var(--fs-ink-soft);
	font-size: var(--fs-text-xs);
	letter-spacing: 0.1em;
}

.fs-sort select {
	min-inline-size: 0;
	min-block-size: 44px;
	padding-block: var(--fs-space-2);
	font-size: var(--fs-text-sm);
}

/* على الشاشات الضيّقة يهبط الترتيب إلى سطر مستقلّ — يملؤه بدل أن يترك فراغًا. */
@media (max-width: 640px) {
	.fs-sort {
		inline-size: 100%;
	}
	.fs-sort select {
		flex: 1 1 auto;
	}
}

/* تذييل الشبكة */
.fs-loadmore {
	display: grid;
	justify-items: center;
	gap: var(--fs-space-4);
	margin-block-start: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.fs-loadmore__bar {
	inline-size: min(240px, 100%);
	block-size: 3px;
	border-radius: 999px;
	background: var(--fs-border);
	overflow: hidden;
}

.fs-loadmore__bar span {
	display: block;
	block-size: 100%;
	inline-size: 19%;
	border-radius: 999px;
	background: var(--fs-accent);
}

.fs-loadmore__note {
	margin: 0;
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
}

/* الحالة الفارغة للشبكة — فجوة تصميمية سُدّت في المهمة ٥أ لا نقلٌ عن التصميم.
   `design/archive.html` لا يعرض شبكةً فارغة قط، و`.fs-empty` غير معرَّفة في
   `components.css` ولا في `design/layout.css` ولا `design/components.css`.
   بُنيت من مفردات التصميم القائمة: لوح `--fs-surface` بحدّ وزاوية
   `--fs-radius-lg` (كـ`.fs-filters`)، وتوسيط رأسي كما في `.fs-loadmore`.

   `grid-column: 1 / -1` ضرورة لا زينة: `#fs-results` شبكة صريحة من ٢/٣/٤
   أعمدة، فبلا الامتداد قِيس أن الرسالة تحتلّ خانةً واحدة بعرض بطاقة (٣١٩px
   من ١٣٦٠px عند 1440px) ويبقى بجانبها ثلاثة أرباع السطر فارغة. */
.fs-empty {
	grid-column: 1 / -1;
	display: grid;
	justify-items: center;
	gap: var(--fs-space-3);
	padding-block: clamp(2.5rem, 8vw, 4.5rem);
	padding-inline: var(--fs-space-5);
	text-align: center;
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-lg);
}

.fs-empty__title {
	margin: 0;
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-xl);
	font-weight: 800;
}

.fs-empty__text {
	margin: 0;
	max-inline-size: 46ch;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

/* ===== لوحة الفلاتر على الجوال ===== */

@media (max-width: 900px) {
	.fs-filters-btn {
		display: inline-flex;
	}

	/* مغلقة = display:none لا إزاحة خارج الشاشة: العنصر المزاح يظلّ له صندوق
	   خارج حدود العرض، وهو ما يرصده فحص الفيضان الأفقي بحق. */
	.fs-filters {
		display: none;
		position: fixed;
		z-index: 120;
		inset-block: 0;
		inset-inline: 0;
		border: 0;
		border-radius: 0;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.fs-filters[data-open] {
		display: block;
		animation: fs-slide-over 0.28s cubic-bezier(0.22, 0.7, 0.25, 1) both;
	}

	@keyframes fs-slide-over {
		from { opacity: 0; transform: translateX(calc(100% * var(--fs-slide))); }
		to   { opacity: 1; transform: none; }
	}

	.fs-filters__head {
		position: sticky;
		inset-block-start: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fs-space-4);
		padding-block: var(--fs-space-4);
		padding-inline: var(--fs-space-5);
		background: var(--fs-surface);
		border-block-end: 1px solid var(--fs-border);
	}

	.fs-filters__title {
		font-size: var(--fs-text-lg);
		font-weight: 800;
	}

	.fs-filters__body {
		padding-block: var(--fs-space-5);
		padding-inline: var(--fs-space-5);
	}

	.fs-filters__foot {
		position: sticky;
		inset-block-end: 0;
		display: grid;
		gap: var(--fs-space-2);
		padding-block: var(--fs-space-4);
		padding-inline: var(--fs-space-5);
		background: var(--fs-surface);
		border-block-start: 1px solid var(--fs-border);
	}

	.fs-active__clear {
		margin-inline-start: 0;
	}

	/* اللوحة نفسها تتمرّر، فمنطقة تمرير متداخلة داخلها تحبس الإصبع. */
	.fs-filter__list--scroll {
		max-block-size: none;
		overflow-y: visible;
		padding-inline-end: 0;
	}

	/* بلا JavaScript لا يفتح أحدٌ اللوحة: `display:none` أعلاه يُخرجها من
	   التدفّق ولا شيء يضيف `data-open` سوى النصّ البرمجي. قِيس على `/shop/`
	   عند 375px مع تعطيل JavaScript: صندوق `.fs-filters` = 0×0، أي أن الفلاتر
	   — محور هذه الصفحة كلها — غير موجودة عمليًا للزائر. فنُعيدها هنا إلى
	   التدفّق فوق الشبكة: عمود واحد في `.fs-shell` أصلًا دون 900px، فالنتيجة
	   فلاتر ثم نتائج، وهو التخطيط الطبيعي لصفحة أرشيف بلا نصوص برمجية. */
	.no-js .fs-filters {
		display: block;
		position: static;
		border: 1px solid var(--fs-border);
		border-radius: var(--fs-radius-lg);
		padding: var(--fs-space-5);
		overflow-y: visible;
		animation: none;
	}

	.no-js .fs-filters__body {
		padding: 0;
	}

	/* رأس اللوحة زرّ إغلاق، وذيلها زرّ إغلاق آخر — كلاهما بلا معنى للوحة
	   ليست لوحة، وكلاهما ميت بلا JavaScript. وزرّ فتح اللوحة كذلك. */
	.no-js .fs-filters__head,
	.no-js .fs-filters__foot,
	.no-js .fs-filters-btn {
		display: none;
	}
}

/* حقل البحث داخل قائمة البراندات يُخفي الخيارات بـJavaScript وحدها — حقل
   إدخال لا يفعل شيئًا أسوأ من غيابه. */
.no-js [data-filter-search] {
	display: none;
}

/* زرّ الإرسال داخل `<noscript>` هو ما يجعل الفلاتر تعمل بلا JavaScript.
   له تباعده الخاص لأنه يأتي مباشرةً بعد آخر `<fieldset>`، و`.fs-filter`
   لا تحمل هامشًا سفليًا. */
.fs-filters__apply {
	margin-block-start: var(--fs-space-5);
}

/* ===== صفحة المنتج =====
   تخطيط الصفحة فقط. مكوّنات السواتش والرقاقات والأزرار من components.css. */

.fs-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-space-7);
	align-items: start;
}

@media (min-width: 860px) {
	.fs-product__layout {
		/* المعرض ٥٥٪ تقريبًا والتفاصيل ٤٥٪ — المعرض أول عنصر في الشجرة فيقع
		   عند الحافة البادئة (اليمين) تلقائيًا لأن الاتجاه rtl. */
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: var(--fs-space-8);
	}
}

/* المعرض */
.fs-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-3);
}

.fs-gallery__main {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--fs-radius-lg);
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	/* الصورة الرئيسية لا تتجاوز ارتفاع الشاشة على سطح المكتب. */
	max-block-size: 78vh;
}

.fs-gallery__main img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fs-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--fs-space-3);
}

.fs-gallery__thumb {
	flex: 1 1 0;
	min-inline-size: 0;
	aspect-ratio: 3 / 4;
	padding: 0;
	overflow: hidden;
	border-radius: var(--fs-radius);
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	cursor: pointer;
}

.fs-gallery__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fs-gallery__thumb[aria-pressed='true'] {
	border-color: var(--fs-ink);
	outline: 2px solid var(--fs-ink);
	outline-offset: 2px;
}

@media (min-width: 860px) {
	.fs-gallery {
		flex-direction: row;
	}

	.fs-gallery__main {
		order: 2;
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.fs-gallery__thumbs {
		order: 1;
		flex: 0 0 88px;
		flex-direction: column;
	}
}

/* عمود التفاصيل */
.fs-product__details {
	display: grid;
	/* فراغ أساسي بين الكتل، وكل كتلة تضبط فراغها الداخلي عند الحاجة. */
	gap: var(--fs-space-5);
}

.fs-product__brand {
	font-size: var(--fs-text-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fs-ink-soft);
}

.fs-product__title {
	font-size: clamp(1.6rem, 3.4vw, var(--fs-text-3xl));
	font-weight: 800;
	letter-spacing: -0.01em;
}

.fs-product__label {
	margin: 0;
	font-size: var(--fs-text-sm);
	font-weight: 600;
	color: var(--fs-ink);
}

/* التقييم */
.fs-rating {
	display: flex;
	align-items: center;
	gap: var(--fs-space-3);
}

.fs-rating__stars {
	display: inline-flex;
	gap: 2px;
}

.fs-star path {
	fill: var(--fs-border);
}

.fs-star--full path {
	fill: var(--fs-accent);
}

.fs-star--half path {
	fill: url('#star-half');
}

.fs-rating__count {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

.fs-rating__count:hover {
	color: var(--fs-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fs-rating--sm {
	gap: var(--fs-space-2);
}

/* السعر */
.fs-product__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--fs-space-3);
}

.fs-product__price-current {
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-2xl);
	font-weight: 800;
	color: var(--fs-ink);
}

.fs-product__price-original {
	font-size: var(--fs-text-base);
	font-weight: 400;
	color: var(--fs-ink-soft);
}

.fs-product__discount {
	display: inline-flex;
	align-items: center;
	padding-block: var(--fs-space-1);
	padding-inline: var(--fs-space-3);
	border-radius: 999px;
	background: var(--fs-sale);
	color: #fff;
	font-size: var(--fs-text-xs);
	font-weight: 700;
}

/* اللون والمقاس */
.fs-product__colors,
.fs-product__sizes {
	display: grid;
	gap: var(--fs-space-3);
}

.fs-product__swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-3);
}

.fs-size-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-3);
}

.fs-size-guide {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	background: none;
	border: 0;
	padding: 0;
	font-size: var(--fs-text-sm);
	font-weight: 600;
	color: var(--fs-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.fs-size-note {
	margin: 0;
	padding: var(--fs-space-3) var(--fs-space-4);
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius);
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

.fs-size-note[hidden] {
	display: none;
}

/* محدّد الكمية */
.fs-product__qty-row {
	display: flex;
	align-items: center;
	gap: var(--fs-space-4);
}

.fs-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius);
	overflow: hidden;
}

.fs-qty__btn {
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	background: var(--fs-surface);
	border: 0;
	color: var(--fs-ink);
	cursor: pointer;
}

.fs-qty__btn:hover {
	background: var(--fs-bg);
}

.fs-qty__btn:disabled {
	color: var(--fs-ink-soft);
	cursor: not-allowed;
	opacity: 0.5;
}

.fs-qty__value {
	inline-size: 3rem;
	block-size: 44px;
	border: 0;
	border-inline: 1px solid var(--fs-border);
	text-align: center;
	font-family: inherit;
	font-size: var(--fs-text-base);
	font-weight: 600;
	color: var(--fs-ink);
	background: var(--fs-surface);
	font-variant-numeric: tabular-nums;
}

/* الإجراءات الرئيسية */
.fs-product__actions {
	display: grid;
	gap: var(--fs-space-3);
}

/* مربّع معلومات التوصيل */
.fs-info-box {
	list-style: none;
	margin: 0;
	padding: var(--fs-space-4) var(--fs-space-5);
	display: grid;
	gap: var(--fs-space-3);
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-lg);
}

.fs-info-box li {
	display: flex;
	align-items: center;
	gap: var(--fs-space-3);
	font-size: var(--fs-text-sm);
	color: var(--fs-ink);
}

.fs-info-box svg {
	flex: 0 0 auto;
	color: var(--fs-ink-soft);
}

/* ===== تبويبات المنتج ===== */

.fs-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-2) var(--fs-space-6);
	border-block-end: 1px solid var(--fs-border);
	margin-block-end: var(--fs-space-6);
}

.fs-tabs__tab {
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	padding-block: var(--fs-space-3);
	margin-block-end: -1px;
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-sm);
	font-weight: 700;
	color: var(--fs-ink-soft);
	cursor: pointer;
}

.fs-tabs__tab:hover {
	color: var(--fs-ink);
}

.fs-tabs__tab[aria-selected='true'] {
	color: var(--fs-ink);
	border-block-end-color: var(--fs-accent);
}

.fs-tabs__panel {
	max-inline-size: 72ch;
	color: var(--fs-ink);
	font-size: var(--fs-text-base);
	line-height: 1.8;
}

.fs-tabs__panel[hidden] {
	display: none;
}

.fs-tabs__list-plain {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--fs-space-3);
}

.fs-tabs__list-plain li {
	padding-inline-start: var(--fs-space-4);
	position: relative;
}

.fs-tabs__list-plain li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.65em;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--fs-accent);
}

/* المراجعات */
.fs-reviews {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fs-space-5);
	max-inline-size: none;
}

.fs-review {
	padding-block-end: var(--fs-space-5);
	border-block-end: 1px solid var(--fs-border);
	display: grid;
	gap: var(--fs-space-2);
}

.fs-review:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.fs-review__head {
	display: flex;
	align-items: baseline;
	gap: var(--fs-space-3);
}

.fs-review__name {
	font-weight: 700;
	color: var(--fs-ink);
}

.fs-review__date {
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
}

.fs-review__text {
	margin: 0;
	max-inline-size: 72ch;
	color: var(--fs-ink-soft);
}

/* ===== السلة والدفع =====
   تخطيط الصفحة فقط. مؤشّر الخطوات وبطاقة الراديو من components.css. */

.fs-checkout__title {
	font-size: clamp(1.6rem, 4vw, var(--fs-text-3xl));
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 var(--fs-space-5);
}

.fs-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-space-7);
	align-items: start;
	margin-block-start: var(--fs-space-6);
}

@media (min-width: 900px) {
	.fs-checkout__layout {
		/* النموذج ~٦٠٪ والملخّص ~٤٠٪. النموذج أول عنصر في الشجرة فيقع عند
		   الحافة البادئة (اليمين) تلقائيًا لأن الاتجاه rtl — كما في معرض صفحة المنتج. */
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--fs-space-8);
	}
}

.fs-checkout__form {
	display: grid;
	gap: var(--fs-space-7);
	min-inline-size: 0;
}

.fs-checkout__block {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.fs-checkout__block-title {
	display: block;
	font-size: var(--fs-text-lg);
	font-weight: 800;
	margin: 0 0 var(--fs-space-4);
	padding: 0 0 var(--fs-space-3);
	border-block-end: 1px solid var(--fs-border);
}

.fs-checkout__count {
	font-size: var(--fs-text-sm);
	font-weight: 400;
	color: var(--fs-ink-soft);
}

.fs-checkout__note {
	margin: var(--fs-space-3) 0 0;
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
}

/* السلة */
.fs-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fs-space-5);
}

.fs-cart-line {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: var(--fs-space-4);
	padding-block-end: var(--fs-space-5);
	border-block-end: 1px solid var(--fs-border);
}

.fs-cart-line:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.fs-cart-line__media {
	display: block;
	inline-size: 84px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--fs-radius);
	background: var(--fs-bg);
}

.fs-cart-line__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fs-cart-line__info {
	display: grid;
	gap: var(--fs-space-2);
	align-content: start;
	min-inline-size: 0;
}

.fs-cart-line__brand {
	font-size: var(--fs-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fs-ink-soft);
}

.fs-cart-line__title {
	font-size: var(--fs-text-base);
	font-weight: 700;
}

.fs-cart-line__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fs-cart-line__variant {
	margin: 0;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

/* .fs-qty هو inline-flex في سياقه الأصل بصفحة المنتج، لكن كعنصر شبكي هنا يُحوَّل
   إلى block ويتمدّد ليملأ عرض العمود افتراضيًا (justify-self: stretch) —
   نُثبّته بعرض محتواه فقط. */
.fs-cart-line__qty {
	justify-self: start;
	inline-size: fit-content;
	margin-block-start: var(--fs-space-1);
}

.fs-cart-line__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--fs-space-3);
	text-align: end;
}

.fs-cart-line__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--fs-ink-soft);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.fs-cart-line__remove:hover {
	background: var(--fs-bg);
	color: var(--fs-sale);
}

.fs-cart-line__price {
	margin: 0;
	font-weight: 700;
	color: var(--fs-ink);
	white-space: nowrap;
}

/* على الجوّال الضيّق جدًا: الحذف والسعر ينزلان إلى سطر كامل العرض تحت الصورة
   والمعلومات، بدل عمود ثالث يضغط عمود المعلومات إلى عرض غير قابل للقراءة. */
@media (max-width: 480px) {
	.fs-cart-line {
		grid-template-columns: 64px minmax(0, 1fr);
	}
	.fs-cart-line__end {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: start;
	}
}

/* بيانات التوصيل */
.fs-delivery-grid {
	display: grid;
	gap: var(--fs-space-4);
}

@media (min-width: 560px) {
	.fs-delivery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.fs-field--full {
		grid-column: 1 / -1;
	}
}

/* ملخّص الطلب — لاصق عند التمرير على سطح المكتب، ثابت أسفل النموذج على الجوال. */
.fs-summary {
	position: sticky;
	inset-block-start: calc(var(--fs-header-height) + var(--fs-space-4));
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-lg);
	padding: var(--fs-space-5);
	display: grid;
	gap: var(--fs-space-4);
	align-self: start;
}

.fs-summary h2 {
	font-size: var(--fs-text-lg);
	font-weight: 800;
}

.fs-summary__lines {
	margin: 0;
	display: grid;
	gap: var(--fs-space-3);
}

.fs-summary__lines > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fs-space-3);
	margin: 0;
}

.fs-summary__lines dt {
	color: var(--fs-ink-soft);
	font-size: var(--fs-text-sm);
	font-weight: 400;
}

.fs-summary__lines dd {
	margin: 0;
	font-weight: 600;
	color: var(--fs-ink);
	white-space: nowrap;
}

.fs-summary__free {
	color: var(--fs-success);
}

/* سطر الضريبة مُفرد بخط أصغر وفاصل منقّط — بصريًا هو توضيح لا بند إضافي،
   حتى لا يُقرأ كأنه مبلغ يُجمع مع الأسطر الأخرى. */
.fs-summary__note {
	padding-block-start: var(--fs-space-3);
	border-block-start: 1px dashed var(--fs-border);
}

.fs-summary__note dt,
.fs-summary__note dd {
	font-size: var(--fs-text-xs);
	font-weight: 400;
	color: var(--fs-ink-soft);
}

.fs-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fs-space-3);
	margin: 0;
	padding-block-start: var(--fs-space-4);
	border-block-start: 1px solid var(--fs-border);
	font-size: var(--fs-text-base);
	font-weight: 700;
}

.fs-summary__total strong {
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-xl);
	font-weight: 800;
}

.fs-summary__reassure {
	margin: 0;
	text-align: center;
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
}

@media (max-width: 900px) {
	.fs-summary {
		position: static;
	}
}

/* ===== تفضيل تقليل الحركة ===== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===== إضافات القالب على مكوّنات النموذج =====
   لا تُنقل حرفيًا من design/ — components.css يبقى كما هو بالضبط، وهذه
   الإضافات الخاصة بالقالب مكانها هنا. */

/* نص لقارئ الشاشة فقط.
   ووكومرس يحقن <span class="screen-reader-text"> داخل سعر المنتج نفسه
   (wc_format_sale_price و WC_Product_Variable::get_price_html)، وهذا الصنف
   يُعرَّف في woocommerce.css التي أسقطناها عمدًا وفي wp-block-library التي
   لا تُحمَّل مع الأصول المنفصلة. فبلا القاعدة هنا يظهر النص مرئيًا داخل
   .fs-card__price — وهي flex — فيصير عنصرًا مستقلًا يزيد ارتفاع البطاقة
   ويتجاوز حدودها. النسخة القياسية من ووردبريس بخاصيات منطقية بدل left/top. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* يبقى الاستثناء الوحيد: عنصر قابل للتركيز (رابط تخطّي مثلًا) يجب أن يظهر
   عند وصول لوحة المفاتيح إليه. */
.screen-reader-text:focus {
	clip-path: none;
	width: auto;
	height: auto;
	inset-block-start: var(--fs-space-2);
	inset-inline-start: var(--fs-space-2);
	z-index: 100000;
	display: block;
	padding-block: var(--fs-space-2);
	padding-inline: var(--fs-space-4);
	background: var(--fs-ink);
	color: #F6F5F2;
	border-radius: 999px;
	font-size: var(--fs-text-sm);
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

/* سعر التخفيض كما يخرجه ووكومرس: <del>القديم</del> <ins>الحالي</ins>.
   النموذج المعتمد يعرض الحالي أولًا ثم القديم مشطوبًا (design/index.html)،
   والمتصفح يسطّر <ins> افتراضيًا ولا شيء في أنماطنا يلغي ذلك بعد إسقاط
   woocommerce.css. نصحّح الأمرين هنا دون لمس ترتيب الشجرة: قارئ الشاشة
   يظل يسمع «كان … صار …» بترتيبه المنطقي، والعين ترى ترتيب التصميم. */
/* البطاقة عند العروض الضيقة.
   `.fs-card__body` شبكة، وأبناء الشبكة `min-inline-size: auto` افتراضًا — أي
   أن أعرض ابن يفرض عرضه على العمود كلّه فيتجاوز البطاقة. ونصوص ووكومرس أطول
   من نصوص النموذج: نطاق سعر منتج متغيّر («ر.س ٢٬٩١٩٫٠٠ – ر.س ٣٬١٠٩٫٠٠») سطر
   واحد لا ينكسر.

   قيس على الصفحة الرئيسية عند 375px قبل هذه القاعدة: ٣ بطاقات من ١٦ تُقصّ،
   أسوأها صندوق سعر ٢١٤px داخل بطاقة ١٤٨px — ٨٢٫٧٨px مقصوصة، ومعها العنوان
   والبراند لأنهما في العمود نفسه. النموذج نفسه لا يفيض عند هذا العرض، فالعيب
   من طول نصوص ووكومرس لا من التصميم. وبعدها: صفر بطاقة تُقصّ.

   الثمن المقيس: انكسار السعر يزيد ارتفاع صفّه، فترتفع الصفوف التي تحوي منتجًا
   متغيّرًا (365.83px تصير 397.63/401.02). صفّ متفاوت أهون من سعر مبتور —
   و١٦١ من ٣٠٠ منتج متغيّر، فهذه الحالة الشائعة لا النادرة. */
.fs-card__body > * {
	min-inline-size: 0;
}

.fs-card__price {
	flex-wrap: wrap;
}

/* حلقة التركيز على رابط صورة البطاقة.
   الرابط يملأ البطاقة حافةً إلى حافة، و.fs-card عليها overflow:hidden
   (components.css، مقفلة على النموذج)، والحلقة الافتراضية تُرسم على بعد
   ‎+2px خارج العنصر (tokens.css) — فتُقصّ من ثلاث جهات ولا يبقى منها إلا
   الحافة السفلى. نرسمها داخل الرابط بدل خارجه فتظهر كاملة. */
.fs-card__media:focus-visible {
	outline-offset: -3px;
}

.fs-card__price ins {
	text-decoration: none;
	background: none;
	font-weight: inherit;
	order: 1;
}
.fs-card__price del {
	order: 2;
}

/* `hidden` لا يُخفي زرًّا من أزرار التصميم.
   `.fs-btn { display: inline-flex }` في components.css (المقفلة على النموذج)
   تغلب قاعدة المتصفّح `[hidden] { display: none }` — والتصميم يعالج هذا لكل
   عنصر يُخفيه بهذه الطريقة (`.fs-active[hidden]` و`.fs-filter__body[hidden]`
   و`.fs-size-note[hidden]` و`.fs-tabs__panel[hidden]`) ولا قاعدة فيه للأزرار
   لأنه لا يُخفي زرًّا.

   قيس على `/shop/?brand[]=aurelia` (١٢ نتيجة، صفحة واحدة): زرّ «عرض المزيد»
   يحمل `hidden` ويُرسم مع ذلك ‎117.6×49.8‎ ويقود إلى صفحة ثانية فارغة. والمهمة
   ٥ب ستضبط `more.hidden` من JavaScript، فالقاعدة تحصّنها هي أيضًا. */
.fs-btn[hidden] {
	display: none;
}

/* والفخّ نفسه في تذييل الشبكة: `.fs-loadmore { display: grid }` أعلاه تغلب
   قاعدة المتصفّح. صار التذييل يُرسم دائمًا ويُخفى بـ`hidden` بدل أن يُحذف من
   الترميز (المهمة ٥ب: بلا وجوده في DOM لا تجد الفلترة الحيّة زرًّا تُظهره حين
   تعود النتائج بعد رابطٍ صفريّ). بلا هذه القاعدة كان `hidden` زينةً: شريط
   ممتلئ ونصّ «شاهدت ٣٠٠ من ٣٠٠» فوق حالة فارغة. */
.fs-loadmore[hidden] {
	display: none;
}

/* رسالة فشل الشبكة — حالة لا يعرفها التصميم (تظهر بـJavaScript وحدها، فلا
   وجود لها في `design/archive.html`)، و`.fs-error` غير معرَّفة في أي ملف أنماط
   حتى الآن. مبنيّة من مفردات التصميم القائمة كما بُنيت `.fs-empty` في ٥أ:
   لوح `--fs-surface` بزاوية `--fs-radius-lg`، ونصّ `--fs-text-sm`، وزرّ
   `.fs-btn--ghost`. الفارق الوحيد عن الحالة الفارغة أنها تحمل حدًّا جانبيًا
   بلون `--fs-sale` (أحمر التصميم الوحيد) ليُقرأ الفرق بين «لا نتائج» و«تعذّر
   الجلب» بلا قراءة النصّ.

   `grid-column: 1 / -1` ضرورة لا زينة: تُحقن داخل `#fs-results` — وهي شبكة من
   ٢/٣/٤ أعمدة — **فوق البطاقات الباقية**، فبلا الامتداد تحتلّ خانة بطاقة
   واحدة وتزيح الشبكة.

   `border-inline-start` لا `border-left`: الخاصيات الاتجاهية ممنوعة في هذا
   المشروع، والصفحة عربية RTL. */
.fs-error {
	grid-column: 1 / -1;
	display: grid;
	justify-items: center;
	gap: var(--fs-space-3);
	margin-block-end: var(--fs-space-4);
	padding-block: var(--fs-space-5);
	padding-inline: var(--fs-space-5);
	text-align: center;
	background: var(--fs-surface);
	border: 1px solid var(--fs-border);
	border-inline-start: 3px solid var(--fs-sale);
	border-radius: var(--fs-radius-lg);
}

.fs-error__text {
	margin: 0;
	max-inline-size: 46ch;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink);
}

/* ===== المهمة ٦: صفحة المنتج وأرشيف البراند ===== */

/* سعر المنتج المفرد.
   التصميم يكتب `.fs-product__price-current` و`.fs-product__price-original`،
   وووكومرس لا يكتب أيًّا منهما: `get_price_html()` تُخرج `<ins>` و`<del>`
   حول `<span class="amount"><bdi>`. فبلا هذه القاعدة يخرج السعر بحجم النصّ
   العادي — أي أن أبرز رقم في الصفحة يصير أصغر من عنوانها.

   نُسنِد مظهرَ التصميم إلى ترميز ووكومرس بدل أن نعيد كتابة الترميز: قاعدتا
   `.fs-product__price-current/-original` تبقيان كما نُسختا من
   `design/layout.css` بلا مساس. */
.fs-product__price > ins,
.fs-product__price > .woocommerce-Price-amount,
.fs-product__price > bdi {
	font-family: var(--fs-font-head);
	font-size: var(--fs-text-2xl);
	font-weight: 800;
	color: var(--fs-ink);
	text-decoration: none;
	background: none;
	order: 1;
}

.fs-product__price > del {
	font-size: var(--fs-text-base);
	font-weight: 400;
	color: var(--fs-ink-soft);
	order: 2;
}

/* شارة الخصم تلي السعرين دائمًا مهما كان ترتيبها في الترميز. */
.fs-product__discount {
	order: 3;
}

/* زرّ معطَّل.
   `components.css` تحمل `[disabled]` للرقعة والرقاقة ولا تحمله للزرّ — لأن
   التصميم لا يعطّل زرًّا أصلًا. وصفحة المنتج تعطّله فعلًا: «أضف إلى السلة»
   مقفل حتى يُختار اللون والمقاس. مقيس بلا هذه القاعدة: الزرّ المعطَّل مطابق
   للمفعَّل في كل خاصية محسوبة — الخلفية والنص والشفافية، وحتى
   `cursor: pointer` — أي أن الزائر يرى زرًّا حيًّا لا يفعل شيئًا حين يُنقر.

   لا نستعمل `opacity` وحدها: تخفت معها كل طبقة فيصير النص رماديًا على رمادي.
   نُبدّل اللونين صراحةً فيبقى النص مقروءًا وهو يقول «غير متاح الآن». */
.fs-btn[disabled],
.fs-btn:disabled {
	background: var(--fs-border);
	color: var(--fs-ink-soft);
	border-color: transparent;
	cursor: not-allowed;
	box-shadow: none;
}

/* والتحويم لا يحيي ميتًا. */
.fs-btn[disabled]:hover,
.fs-btn:disabled:hover {
	background: var(--fs-border);
	color: var(--fs-ink-soft);
	transform: none;
}

/* سطر حالة المتغيّر: «اختر اللون والمقاس» / «نفدت الكمية». */
.fs-product__status {
	margin: 0;
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

.fs-product__status[hidden] {
	display: none;
}

/* نموذج الشراء — نفس تباعد كتل التفاصيل في التصميم. */
.fs-product__form {
	display: grid;
	gap: var(--fs-space-5);
}

/* القوائم المنسدلة البديلة بلا JavaScript. */
.fs-product__noscript {
	display: grid;
	gap: var(--fs-space-3);
}

/* لا مراجعات بعد — الحالة التي يراها كل زائر اليوم (٠ من ٣٠٠ منتجًا). */
.fs-reviews__empty {
	margin: 0;
	color: var(--fs-ink-soft);
}

.fs-reviews__form {
	margin-block-start: var(--fs-space-5);
	padding-block-start: var(--fs-space-5);
	border-block-start: 1px solid var(--fs-border);
}

/* وصف البراند أعلى أرشيفه. */
.fs-brand-note {
	max-inline-size: 68ch;
	margin-block: 0 var(--fs-space-5);
	color: var(--fs-ink-soft);
}

/* ===== المهمة ٧: السلة والدفع والحساب ===== */

/* حقول ووكومرس داخل شبكة التوصيل.
   الحقل نفسه يبنيه `woocommerce_form_field()` بغلاف `.form-row` لا
   `.fs-field` — ولا نعيد كتابته لأنه يحمل التحقّق والإكمال التلقائي وقواعد
   الدولة. فنُسنِد إليه مظهر `.fs-field` من التصميم. */
.fs-delivery-grid .form-row {
	display: grid;
	gap: var(--fs-space-2);
	margin: 0;
}

.fs-delivery-grid .form-row label {
	font-size: var(--fs-text-sm);
	font-weight: 600;
	color: var(--fs-ink);
}

.fs-delivery-grid .form-row .required {
	color: var(--fs-sale);
	text-decoration: none;
}

.fs-delivery-grid .form-row-wide,
.fs-delivery-grid .notes {
	grid-column: 1 / -1;
}

/* الحقل الواسع في التصميم يمتدّ على الشبكة كلها. */
.fs-delivery-grid textarea {
	min-block-size: 6rem;
	resize: vertical;
}

/* رسالة الحقل الخاطئ. */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid textarea {
	border-color: var(--fs-sale);
}

/* منتجات الملخّص في صفحة الدفع. */
.fs-summary__list {
	list-style: none;
	margin: 0 0 var(--fs-space-4);
	padding: 0 0 var(--fs-space-4);
	border-block-end: 1px solid var(--fs-border);
	display: grid;
	gap: var(--fs-space-3);
}

.fs-summary__item {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--fs-space-3);
	font-size: var(--fs-text-sm);
}

.fs-summary__item-name {
	min-inline-size: 0;
}

.fs-summary__item-meta {
	display: block;
	color: var(--fs-ink-soft);
	font-size: var(--fs-text-xs);
}

/* ووكومرس يغلّف بيانات المتغيّر في <dl class="variation"> — نُسطّحها. */
.fs-summary__item-meta dl,
.fs-cart-line__variant dl {
	margin: 0;
}

.fs-summary__item-meta dt,
.fs-summary__item-meta dd,
.fs-cart-line__variant dt,
.fs-cart-line__variant dd {
	display: inline;
	margin: 0;
	font-weight: inherit;
}

.fs-summary__item-meta dd::after,
.fs-cart-line__variant dd::after {
	content: " · ";
}

.fs-summary__item-meta dd:last-child::after,
.fs-cart-line__variant dd:last-child::after {
	content: "";
}

.fs-summary__item-price {
	white-space: nowrap;
}

.fs-summary__subtitle {
	margin-block: var(--fs-space-5) var(--fs-space-3);
	font-size: var(--fs-text-base);
}

/* قائمة طرق الشحن داخل سطر الملخّص. */
.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fs-space-1);
	text-align: start;
}

.woocommerce-shipping-destination {
	margin-block: var(--fs-space-2) 0;
	font-size: var(--fs-text-xs);
	color: var(--fs-ink-soft);
}

/* طرق الدفع — بطاقات المذياع من التصميم. */
.fs-payment .fs-radio-group {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-payment .payment_box {
	margin-block: var(--fs-space-2) var(--fs-space-3);
	padding: var(--fs-space-3);
	border-radius: var(--fs-radius-md);
	background: var(--fs-bg);
	font-size: var(--fs-text-sm);
	color: var(--fs-ink-soft);
}

.fs-payment .payment_box p:last-child {
	margin-block-end: 0;
}

.fs-payment__place {
	margin-block-start: var(--fs-space-5);
	display: grid;
	gap: var(--fs-space-3);
}

/* أزرار السلة تحت القائمة. */
.fs-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--fs-space-3);
	margin-block-start: var(--fs-space-5);
	padding-block-start: var(--fs-space-5);
	border-block-start: 1px solid var(--fs-border);
}

.fs-coupon {
	display: flex;
	align-items: end;
	gap: var(--fs-space-2);
	flex-wrap: wrap;
}

.fs-cart-line__nsqty {
	display: inline-grid;
	gap: var(--fs-space-1);
	font-size: var(--fs-text-sm);
}

/* السلة الفارغة. */
.fs-empty--cart {
	text-align: center;
	padding-block: var(--fs-space-8);
}

/* إشعارات ووكومرس بلغة التصميم. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper li {
	margin-block-end: var(--fs-space-4);
	padding: var(--fs-space-3) var(--fs-space-4);
	border: 1px solid var(--fs-border);
	border-inline-start: 3px solid var(--fs-accent);
	border-radius: var(--fs-radius-lg);
	background: var(--fs-surface);
	list-style: none;
	font-size: var(--fs-text-sm);
}

.woocommerce-error,
.woocommerce-error li {
	border-inline-start-color: var(--fs-sale);
}

.woocommerce-error {
	margin: 0 0 var(--fs-space-4);
	padding-inline-start: var(--fs-space-4);
}

/* «(يتضمن ٦٨ ر.س ضريبة القيمة المضافة)» داخل سطر الإجمالي.
   ووكومرس يلحقها بـ`<small class="includes_tax">` داخل الرقم نفسه، فورثت خطّ
   الإجمالي الضخم وانكسرت على سطرين وطغت على المبلغ الذي جاء الزائر ليقرأه.
   نُعيدها إلى حجمها: سطرٌ صغير تحت الرقم — والإفصاح الأساسي قائم فوقه في
   `.fs-summary__note`. */
.fs-summary__total .includes_tax {
	display: block;
	margin-block-start: var(--fs-space-1);
	font-family: var(--fs-font-body);
	font-size: var(--fs-text-xs);
	font-weight: 400;
	color: var(--fs-ink-soft);
}

/* أزرار ووكومرس بلغة التصميم.
   نماذج الحساب والسلة يبنيها ووكومرس بأصنافه (`button.button`،
   `.wp-element-button`) لا بـ`.fs-btn` — وهي نماذج لا نعيد كتابتها لأنها
   تحمل النونس والتحقّق. فنُسنِد إليها مظهر الزرّ الأساسي من التصميم بدل
   تركها على الافتراضي.

   `:where()` تُبقي الوزن صفرًا، فأي `.fs-btn` صريح على العنصر يغلبها. */
:where(.fs-checkout, .fs-account, .woocommerce) button.button,
:where(.fs-checkout, .fs-account, .woocommerce) .woocommerce-button,
:where(.fs-checkout, .fs-account, .woocommerce) input[type="submit"].button,
:where(.fs-checkout, .fs-account, .woocommerce) a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fs-space-2);
	padding-block: var(--fs-space-3);
	padding-inline: var(--fs-space-5);
	border: 1px solid transparent;
	border-radius: var(--fs-radius);
	background: var(--fs-accent);
	color: var(--fs-accent-ink);
	font-family: var(--fs-font-body);
	font-size: var(--fs-text-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

:where(.fs-checkout, .fs-account, .woocommerce) button.button:hover,
:where(.fs-checkout, .fs-account, .woocommerce) .woocommerce-button:hover,
:where(.fs-checkout, .fs-account, .woocommerce) a.button:hover {
	background: var(--fs-accent-hover);
}

/* صفحة الحساب. */
.fs-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--fs-space-5);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fs-space-2);
}

.fs-account .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	padding: var(--fs-space-2) var(--fs-space-4);
	border: 1px solid var(--fs-border);
	border-radius: 999px;
	background: var(--fs-surface);
	font-size: var(--fs-text-sm);
}

.fs-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--fs-ink);
	border-color: var(--fs-ink);
	color: var(--fs-surface);
}

/* صفحة تأكيد الطلب.
   ووكومرس يرسمها بقالب كتل خاصّ به (`order-confirmation.html`) يغلب قالب
   الصفحة في التسلسل، فنسخناه إلى القالب وألبسناه غلاف التصميم. الكتل نفسها
   باقية كما هي — هي التي تقرأ الطلب وتتحقّق من صلاحية المشاهد. */
.fs-confirm__body {
	display: grid;
	gap: var(--fs-space-5);
	max-inline-size: 70ch;
}

.fs-confirm__body h1 {
	font-size: var(--fs-text-2xl);
}

.fs-confirm__addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--fs-space-5);
}

.wc-block-order-confirmation-summary-list {
	list-style: none;
	margin: 0;
	padding: var(--fs-space-4);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-lg);
	background: var(--fs-surface);
	display: grid;
	gap: var(--fs-space-2);
	font-size: var(--fs-text-sm);
}

.wc-block-order-confirmation-summary-list-item__key {
	color: var(--fs-ink-soft);
}

.fs-confirm__body table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--fs-text-sm);
}

.fs-confirm__body table th,
.fs-confirm__body table td {
	padding: var(--fs-space-2) 0;
	text-align: start;
	border-block-end: 1px solid var(--fs-border);
}

@media (max-width: 900px) {
	.fs-cart-actions {
		flex-direction: column;
		align-items: stretch;
	}
}