/* ==========================================================================
   الجيل الأخضر — أنماط الواجهة
   Green Generation Storefront — component layer

   قواعد كتابة هذا الملف:
   ❶ لا لون ثابت (hex) — كل لون من متغيّرات الهوية أو presets الـ theme.json.
   ❷ كل اتجاه بخصائص منطقية (inline/block) — لا left/right — فالمتجر عربي
     أولاً ويجب أن يبقى صحيحاً لو فُتحت نسخة إنجليزية غداً.
   ❸ لا !important إلا حيث تفرضه أنماط ووكومرس المدمجة، ومعها سطر يشرح لماذا.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ❶ أدوات مشتركة
   -------------------------------------------------------------------------- */

.ggen-icon {
	flex: 0 0 auto;
	display: block;
}

/* نص بتدرّج الهوية — يُستعمل داخل عنوان البطل. */
.ggen-gradient-text {
	background: var(--ggen-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/*
 * أيقونات نصّية: تُرسم كقناع (mask) لا كصورة، فترث لون النص تلقائياً وتعمل
 * في الشريط الداكن والفاتح بلا نسخة ثانية من الملف.
 */
.ggen-ico {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ggen-ico::before {
	content: "";
	inline-size: 1.15em;
	block-size: 1.15em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--ggen-ico) center / contain no-repeat;
	mask: var(--ggen-ico) center / contain no-repeat;
}

.ggen-ico--truck {
	--ggen-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h11v10H3zM14 10h3.5l2.5 3v3.5H14z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E");
}

.ggen-ico--location {
	--ggen-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.6 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.4'/%3E%3C/svg%3E");
}

.ggen-ico--headset {
	--ggen-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 14v-2a7.5 7.5 0 0 1 15 0v2'/%3E%3Cpath d='M4.5 13h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1zM19.5 13h-2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1z'/%3E%3C/svg%3E");
}

.ggen-ico--shield {
	--ggen-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4 2.9 7.6 7 9 4.1-1.4 7-5 7-9V6l-7-2.5Z'/%3E%3Cpath d='m9.2 12 2 2 3.6-3.8'/%3E%3C/svg%3E");
}

.ggen-ico--refresh {
	--ggen-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4.5V10h-5.5'/%3E%3C/svg%3E");
}

.ggen-ico--whatsapp {
	--ggen-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.8c0 4.3-3.6 7.8-8 7.8-1.4 0-2.7-.3-3.8-.9L4 20l1.4-4a7.6 7.6 0 0 1-1.4-4.3C4 7.5 7.6 4 12 4s8 3.5 8 7.8Z'/%3E%3Cpath d='M9.3 9.2c.3-.6.6-.6.9-.6h.6l.9 2-.7.9c.5 1 1.4 1.8 2.4 2.2l.8-.8 2 .9v.7c0 .4-.2.8-.8 1-1.6.5-5.2-1.4-6.3-4.2-.3-.8-.3-1.6.2-2.1Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   ❷ تنويعات أنماط الكتل (المسجَّلة في inc/blocks.php)
   -------------------------------------------------------------------------- */

.is-style-ggen-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--sp-5);
	transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.is-style-ggen-card:hover {
	box-shadow: var(--shadow-md);
}

.is-style-ggen-panel {
	background: var(--ggen-gradient-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
}

.is-style-ggen-eyebrow {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--teal-700);
}

.ggen-eyebrow--harvest {
	color: var(--harvest);
}

.is-style-ggen-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.7rem;
	border-radius: var(--radius-full);
	background: var(--teal-50);
	color: var(--teal-800);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.9;
}

.is-style-ggen-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-ggen-checklist li {
	position: relative;
	padding-inline-start: 1.9rem;
	margin-block-end: 0.6rem;
}

.is-style-ggen-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	background-color: var(--teal-600);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-style-ggen-rounded img {
	border-radius: var(--radius-lg);
}

/* أزرار — التنويعات الثلاث من دليل الهوية. */
.wp-block-button.is-style-ggen-secondary > .wp-block-button__link {
	background: transparent;
	color: var(--teal-700);
	border: 2px solid var(--teal-600);
	box-shadow: none;
}

.wp-block-button.is-style-ggen-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-ggen-secondary > .wp-block-button__link:focus-visible {
	background: var(--teal-50);
	color: var(--teal-800);
}

.wp-block-button.is-style-ggen-ghost > .wp-block-button__link {
	background: rgba(255, 255, 255, 0.14);
	color: var(--neutral-0);
	border: 2px solid rgba(255, 255, 255, 0.45);
	box-shadow: none;
}

.wp-block-button.is-style-ggen-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-ggen-ghost > .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	border-color: var(--neutral-0);
}

/* --------------------------------------------------------------------------
   ❸ الشريط العلوي والترويسة
   -------------------------------------------------------------------------- */

.ggen-topbar a {
	color: inherit;
	text-decoration: none;
}

.ggen-topbar a:hover {
	text-decoration: underline;
}

.ggen-topbar__links {
	gap: var(--sp-5);
}

.ggen-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 30;
	background: var(--color-surface);
	transition: box-shadow var(--dur-base) var(--ease);
}

/* الظل يظهر فقط بعد مغادرة أعلى الصفحة — يضبطه storefront.js. */
.ggen-header.is-stuck {
	box-shadow: var(--shadow-md);
}

.ggen-header__row {
	gap: var(--sp-5);
}

.ggen-header__logo img {
	block-size: auto;
	max-block-size: 52px;
	inline-size: auto;
}

.ggen-header__search {
	flex: 1 1 auto;
	max-inline-size: 560px;
	margin-block: 0;
}

.ggen-header__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--neutral-50);
	padding-inline-start: var(--sp-4);
	transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.ggen-header__search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--teal-400);
	background: var(--neutral-0);
}

.ggen-header__search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding-block: 0.7rem;
	font-size: var(--fs-sm);
}

.ggen-header__search .wp-block-search__input:focus {
	outline: none;
}

.ggen-header__search .wp-block-search__button {
	border-radius: var(--radius-full);
	background: var(--color-action);
	color: var(--neutral-0);
	border: 0;
	padding: 0.55rem 1rem;
	margin: 0.25rem;
}

.ggen-header__actions {
	gap: var(--sp-3);
}

.ggen-header__nav {
	border-block-start: 1px solid var(--color-border);
}

.ggen-nav {
	padding-block: 0.55rem;
	font-size: var(--fs-sm);
	overflow-x: auto;
	scrollbar-width: none;
}

.ggen-nav::-webkit-scrollbar {
	display: none;
}

.ggen-nav .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-block-end: 2px solid transparent;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.ggen-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.ggen-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--teal-700);
	border-block-end-color: var(--teal-500);
}

.ggen-nav__highlight .wp-block-navigation-item__content {
	color: var(--teal-700);
	font-weight: var(--fw-bold);
}

.ggen-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding-block: var(--sp-2);
	min-inline-size: 260px;
}

/* --------------------------------------------------------------------------
   ❹ شريط الثقة
   -------------------------------------------------------------------------- */

.ggen-trustbar__row {
	gap: var(--sp-5);
}

.ggen-trustbar__item {
	align-items: flex-start;
	color: var(--color-text);
}

.ggen-trustbar__item::before {
	color: var(--teal-600);
	inline-size: 1.5em;
	block-size: 1.5em;
	margin-block-start: 0.1em;
}

.ggen-trustbar__item strong {
	display: block;
	line-height: 1.5;
}

.ggen-trustbar__item span {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   ❺ البطل
   -------------------------------------------------------------------------- */

.ggen-hero {
	position: relative;
	overflow: hidden;
}

/*
 * هالة خضراء خفيفة خلف اللوحة. زخرفة بحتة، لذلك pointer-events:none حتى لا
 * تعترض أي نقرة، وتُخفى على الشاشات الضيّقة حيث تزاحم النص.
 */
.ggen-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -18%;
	inset-inline-start: -8%;
	inline-size: 46rem;
	block-size: 46rem;
	background: radial-gradient(circle, rgba(14, 164, 137, 0.16) 0%, rgba(14, 164, 137, 0) 65%);
	pointer-events: none;
}

.ggen-hero__title {
	text-wrap: balance;
}

.ggen-hero__lede {
	max-inline-size: 46ch;
	color: var(--color-text-muted);
}

.ggen-hero__panel {
	box-shadow: var(--shadow-brand);
}

.ggen-hero__facts {
	display: grid;
	gap: var(--sp-5);
}

.ggen-hero__fact {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	color: var(--neutral-0);
}

.ggen-hero__fact + .ggen-hero__fact {
	padding-block-start: var(--sp-5);
	border-block-start: 1px solid rgba(255, 255, 255, 0.24);
}

.ggen-hero__fact strong {
	display: block;
	font-size: var(--fs-lg);
	line-height: 1.4;
}

.ggen-hero__fact span {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   ❻ الأقسام العامة
   -------------------------------------------------------------------------- */

.ggen-section__head {
	gap: var(--sp-5);
}

.ggen-section__more a {
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.ggen-section__more a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   ❼ شبكة الأقسام
   -------------------------------------------------------------------------- */

.ggen-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sp-4);
}

.ggen-cat-card {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.ggen-cat-card:hover {
	border-color: var(--teal-300);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--color-text);
}

.ggen-cat-card__icon {
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	flex: 0 0 auto;
	border-radius: var(--radius-md);
	background: var(--teal-50);
	color: var(--teal-700);
	transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.ggen-cat-card:hover .ggen-cat-card__icon {
	background: var(--ggen-gradient);
	color: var(--neutral-0);
}

.ggen-cat-card__body {
	min-inline-size: 0;
	flex: 1 1 auto;
}

.ggen-cat-card__title {
	display: block;
	font-weight: var(--fw-bold);
	line-height: 1.5;
}

.ggen-cat-card__note {
	display: block;
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--color-text-muted);
}

/*
 * السهم يشير إلى جهة التقدّم في القراءة. الأساس هو حالة LTR (يمين)، وحالة RTL
 * تقلبه — لا العكس — كي يبقى الاتجاه صحيحاً حتى لو غاب محدّد الاتجاه.
 */
.ggen-cat-card__arrow {
	color: var(--neutral-400);
	transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ggen-cat-card:hover .ggen-cat-card__arrow {
	color: var(--teal-600);
	transform: translateX(3px);
}

[dir="rtl"] .ggen-cat-card__arrow {
	transform: scaleX(-1);
}

[dir="rtl"] .ggen-cat-card:hover .ggen-cat-card__arrow {
	transform: scaleX(-1) translateX(3px);
}

/* --------------------------------------------------------------------------
   ❽ لماذا الجيل الأخضر
   -------------------------------------------------------------------------- */

.ggen-why__lede {
	max-inline-size: 62ch;
	margin-inline: auto;
}

.ggen-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-5);
}

.ggen-why__card {
	padding: var(--sp-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.ggen-why__icon {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--radius-md);
	background: var(--leaf-50);
	color: var(--leaf-700);
	margin-block-end: var(--sp-4);
}

.ggen-why__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	margin: 0 0 var(--sp-2);
}

.ggen-why__text {
	font-size: var(--fs-sm);
	line-height: 1.8;
	color: var(--color-text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   ❾ بطاقتا الحلول
   -------------------------------------------------------------------------- */

.ggen-split__card {
	block-size: 100%;
}

.ggen-split__icon {
	display: grid;
	place-items: center;
	inline-size: 4rem;
	block-size: 4rem;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.18);
	color: var(--neutral-0);
}

.ggen-split__icon--dark {
	background: var(--neutral-0);
	color: var(--teal-700);
}

/* --------------------------------------------------------------------------
   ❿ الأسئلة الشائعة
   -------------------------------------------------------------------------- */

.ggen-faq__item {
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.ggen-faq__item summary {
	font-weight: var(--fw-bold);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}

.ggen-faq__item summary::-webkit-details-marker {
	display: none;
}

.ggen-faq__item summary::after {
	content: "";
	inline-size: 1.1rem;
	block-size: 1.1rem;
	flex: 0 0 auto;
	background-color: var(--teal-600);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-base) var(--ease);
}

.ggen-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.ggen-faq__item p {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   ⓫ شريط الدعم
   -------------------------------------------------------------------------- */

.ggen-cta__note {
	opacity: 0.85;
}

.wp-block-button.ggen-cta__primary > .wp-block-button__link {
	box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   ⓬ التذييل
   -------------------------------------------------------------------------- */

/*
 * شعار واحد للموقع كلّه: التذييل داكن، فنقلب الشعار إلى أبيض بمرشّح بدل
 * رفع ملف ثانٍ يجب تحديثه مع كل تغيير في الهوية.
 */
.ggen-footer__logo img {
	filter: brightness(0) invert(1);
	max-block-size: 56px;
	inline-size: auto;
	block-size: auto;
}

.ggen-footer a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.ggen-footer a:hover {
	color: var(--neutral-0);
	text-decoration: underline;
}

.ggen-footer__about {
	color: rgba(255, 255, 255, 0.78);
	max-inline-size: 42ch;
	line-height: 1.9;
}

.ggen-footer__title {
	color: var(--neutral-0);
	font-weight: var(--fw-bold);
	margin-block-end: var(--sp-4);
}

.ggen-footer__list {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
}

.ggen-footer__list li {
	margin-block-end: 0.55rem;
}

.ggen-footer__contact {
	margin-block: 0 0.55rem;
}

.ggen-footer__hours {
	color: rgba(255, 255, 255, 0.7);
}

.ggen-footer__rule {
	border: 0;
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	background: none;
}

.ggen-footer__legal {
	gap: var(--sp-4);
	color: rgba(255, 255, 255, 0.7);
}

.ggen-payments__label {
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 var(--sp-2);
}

.ggen-payments__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ggen-payments__item {
	font-size: var(--fs-xs);
	line-height: 1.9;
	padding: 0.1rem 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   ⓭ ترويسة وتذييل صفحة الدفع
   -------------------------------------------------------------------------- */

.ggen-checkout-header__logo img {
	max-block-size: 44px;
	inline-size: auto;
	block-size: auto;
}

.ggen-checkout-header__aside {
	gap: var(--sp-5);
}

.ggen-secure-note {
	color: var(--teal-700);
}

/* --------------------------------------------------------------------------
   ⓮ صفحات المحتوى
   -------------------------------------------------------------------------- */

.ggen-policy h2 {
	margin-block-start: var(--sp-7);
}

.ggen-policy__updated {
	margin-block: var(--sp-3) 0;
}

.ggen-404__search {
	max-inline-size: 460px;
	margin-inline: auto;
}

.ggen-post-card .wp-block-post-featured-image {
	margin-block-end: var(--sp-4);
}

/* --------------------------------------------------------------------------
   ⓯ الاتجاه والثنائية اللغوية (bidi)

   العربية ليست «إنجليزية معكوسة»: لها قواعد طباعية خاصة، ولها مشكلة ترتيب
   حقيقية حين تختلط بأرقام ومعرّفات لاتينية. هذا القسم يعالج الاثنين.
   -------------------------------------------------------------------------- */

/*
 * الخط العربي متصل، وأي تباعد بين الحروف يفكّ وصلاتها فتبدو الكلمة مقطّعة.
 * التباعد الواسع في دليل الهوية (‎0.14em‎) موضوعه لوكاب «GREEN GENERATION»
 * اللاتيني — لا النص العربي. والتضييق السالب على العناوين يضرّ بالوصلات أيضاً.
 *
 * المحدّد بسمة [dir] لا بـ :dir() لسببين: تخصيصه أعلى من الأنماط التي يولّدها
 * theme.json (‎:root :where(h1)‎)، ودعمه شامل في كل المتصفحات.
 */
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6),
[dir="rtl"] .wp-block-heading,
[dir="rtl"] .is-style-ggen-eyebrow,
[dir="rtl"] .ggen-hero__title,
[dir="rtl"] .ggen-footer__title,
[dir="rtl"] .ggen-why__title {
	letter-spacing: 0;
}

/*
 * عزل ثنائي الاتجاه: رقم المنتج والسعر والبريد والهاتف كلها «جُزُر» لاتينية
 * داخل نص عربي. بلا عزل ينتقل المحرف المحايد الأخير (نقطة، شرطة، قوس) إلى
 * الطرف الخطأ، فيظهر «GG-IRR-0142 :رمز المنتج» أو ينكسر ترتيب السعر.
 */
.sku,
.sku_wrapper,
.wc-block-components-product-sku,
code,
kbd,
samp,
.woocommerce-Price-amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price,
.ggen-product-card__price,
.ggen-product__price,
.ggen-footer__contact a,
a[href^="mailto:"],
a[href^="tel:"] {
	unicode-bidi: isolate;
}

/* أرقام بعرض ثابت حيث تُقارَن الأسعار رأسياً. */
.ggen-product-card__price,
.ggen-product__price,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/*
 * حقول تُملأ لاتينياً دائماً. تركها ترث اتجاه الصفحة يضع المؤشّر يميناً
 * ويقفز الرقم عند أول محرف، وهو أشهر شكوى في نماذج الدفع العربية.
 */
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[autocomplete="postal-code"],
input[name*="postcode"],
input[name*="phone"] {
	direction: ltr;
	text-align: start;
}

input[type="number"] {
	text-align: center;
}

/* الاقتباس: الشريط عند بداية السطر — يمين في العربية ويسار في اللاتينية. */
.wp-block-quote {
	border-inline-start: 3px solid var(--teal-500);
	padding-inline-start: var(--sp-5);
}

/* --------------------------------------------------------------------------
   ⓰ الاستجابة
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ggen-header__search {
		max-inline-size: 320px;
	}
}

@media (max-width: 781px) {
	.ggen-hero::before {
		display: none;
	}

	.ggen-header__row {
		flex-wrap: wrap;
		gap: var(--sp-3);
	}

	.ggen-header__search {
		order: 3;
		flex-basis: 100%;
		max-inline-size: none;
	}

	.ggen-header {
		position: static;
	}

	.ggen-topbar__note {
		flex-basis: 100%;
	}

	.ggen-trustbar__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.ggen-trustbar__row {
		grid-template-columns: 1fr;
	}

	.ggen-cat-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   ⓱ الوصولية
   -------------------------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
	.ggen-cat-card,
	.ggen-cat-card__arrow,
	.is-style-ggen-card {
		transition: none;
	}

	.ggen-cat-card:hover {
		transform: none;
	}
}