/* ═══════════════════════════════════════════════════════════════
   كيوت كوزما — تصميم Organic (نسخة مصحّحة)
   اللوحة: وردي #ff5894 / أزرق باستيل #d3f1f9 / داكن #3f2803 / أبيض نقي #ffffff
   الخط: Cairo في القالب بالكامل (تم الاستغناء عن Amiri)
   كل الكلاسات بادئة oc- لتفادي أي تعارض مع cutecosma.css / woocommerce.css
   RTL بالكامل عبر الخصائص المنطقية (logical properties)

   إصلاحات هذه النسخة:
   ١) منع التمرير الأفقي للصفحة على كل الشاشات (overflow-x: clip + إخفاء دُرج الجوال المغلق)
   ٢) الهيرو على الشاشات الكبيرة: الصورة تغطي القسم كاملاً خلف النص — لا انقسام لنصفين
   ٣) آراء العميلات: الاسم داخل بطاقة التقييم + نقاط تنقّل بدل الصور الرمزية والأسماء
   ٤) توحيد الخط على Cairo عبر متغيّري الخط
   ٥) شبكة أمان لحركة الظهور: لو تعطّل السكربت/الأوبزرفر يظهر المحتوى تلقائياً (لا فراغ)
   ٦) قائمة درج الجوال رأسية — إجبار عمودي يتفوّق على flex الموروث من GeneratePress
   ═══════════════════════════════════════════════════════════════ */

:root {
	--oc-cream: #eefafd; /* أزرق فاتح جداً — الخلفيات الناعمة */
	--oc-beige: #d3f1f9; /* أزرق باستيل — الشريط العلوي والحدود الناعمة */
	--oc-gold:  #ff5894; /* الوردي — الأكسنت الرئيسي (أزرار/روابط/شارات) */
	--oc-brown: #e8437f; /* وردي غامق — الأكسنت الثانوي */
	--oc-dark:  #3f2803; /* الداكن — العناوين وشريط الحقوق */
	--oc-ink:   #7c7568; /* رمادي النصوص */
	--oc-line:  #eeeeee; /* الحدود */
	--oc-white: #ffffff; /* أبيض نقي */
	--oc-display: 'Cairo', 'Tahoma', sans-serif; /* كان Amiri — أصبح Cairo لتوحيد الخط */
	--oc-body:    'Cairo', 'Tahoma', sans-serif;
	--oc-shadow:  0 16px 38px rgba(63, 40, 3, .10);
	--oc-radius:  12px;
}

/* ─── منع التمرير الأفقي للصفحة بالكامل ───
   السبب الأصلي: دُرج الجوال (oc-drawer) مدفوع خارج الشاشة بـ translateX
   فيتسبب في مساحة تمرير جانبية. clip لا يكسر position: sticky (بعكس hidden على body) */
html { overflow-x: hidden; overflow-x: clip; }

/* ─── أساسيات ─── */
.oc-body { font-family: var(--oc-body); background: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.oc-body ::selection { background: var(--oc-gold); color: #fff; }
.oc-header :focus-visible, .oc-main :focus-visible, .oc-footer :focus-visible,
.oc-drawer :focus-visible, .oc-float :focus-visible, .oc-totop:focus-visible {
	outline: 2px solid var(--oc-gold);
	outline-offset: 2px;
	border-radius: 4px;
}
.oc-main { overflow-x: clip; }
.oc-header a, .oc-footer a, .oc-main a { text-decoration: none; }
.oc-icon { flex: none; vertical-align: middle; }

/* أيقونات اتجاهية: تنقلب تلقائياً في RTL */
svg.oc-dirprev { transform: scaleX(-1); }
html[dir="rtl"] svg.oc-dir { transform: scaleX(-1); }
html[dir="rtl"] svg.oc-dirprev { transform: none; }

.oc-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 20px;
}

.oc-section { padding-block: 72px; }

/* عناوين الأقسام */
.oc-sechead { text-align: center; margin-bottom: 44px; }
.oc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--oc-display);
	font-weight: 800;
	font-size: 15.5px;
	color: var(--oc-gold);
}
.oc-sechead__title {
	margin: 6px 0 0;
	font-family: var(--oc-body);
	font-weight: 900;
	font-size: clamp(1.55rem, 3vw, 2.05rem);
	color: var(--oc-dark);
}
.oc-sechead__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	border-radius: 99px;
	background: var(--oc-gold);
	margin: 14px auto 0;
}
.oc-sechead--nav {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	text-align: start;
}
.oc-sechead--nav .oc-sechead__title::after { margin-inline: 0; }

.oc-secnav { display: flex; gap: 10px; }
.oc-secnav__btn {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--oc-white);
	border: 1px solid var(--oc-beige);
	border-radius: 50%;
	color: var(--oc-gold);
	cursor: pointer;
	transition: all .3s ease;
}
.oc-secnav__btn:hover { background: var(--oc-gold); border-color: var(--oc-gold); color: #fff; }

/* أزرار */
.oc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--oc-gold);
	color: #fff !important;
	font-family: var(--oc-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 14px 30px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: all .3s ease;
}
.oc-btn:hover {
	background: var(--oc-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(63, 40, 3, .22);
}
.oc-btn--dark { background: var(--oc-dark); }
.oc-btn--dark:hover { background: var(--oc-gold); }
.oc-btn--sm { padding: 11px 20px; font-size: 14px; }

/* صور بديلة أنيقة عند غياب الصور */
.oc-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: linear-gradient(135deg, var(--oc-cream), var(--oc-beige));
	color: var(--oc-gold);
}
.oc-ph .oc-icon { opacity: .55; }

/* شارات المنتج */
.oc-badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 3;
	background: var(--oc-gold);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 5px 13px;
	border-radius: 99px;
}
.oc-badge--new { background: var(--oc-brown); }

/* ═══════════════════ الهيدر ═══════════════════ */

/* الشريط العلوي */
.oc-topbar {
	background: var(--oc-beige);
	font-size: 13px;
	font-weight: 700;
}
.oc-topbar__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
	padding-block: 4px;
}
.oc-topbar__links { display: flex; gap: 24px; }
.oc-topbar__links a { color: var(--oc-dark); transition: color .25s; }
.oc-topbar__links a:hover { color: var(--oc-gold); }
.oc-topbar__meta { display: flex; align-items: center; gap: 20px; }
.oc-topbar__account {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--oc-dark);
	transition: color .25s;
}
.oc-topbar__account:hover { color: var(--oc-gold); }
.oc-social { display: flex; align-items: center; gap: 13px; }
.oc-topbar .oc-social a { color: var(--oc-dark); display: grid; place-items: center; transition: color .25s; }
.oc-topbar .oc-social a:hover { color: var(--oc-gold); }

/* شريط الشعار */
.oc-logobar { background: var(--oc-white); }
.oc-logobar__in {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 24px;
	position: relative;
}
.oc-logo { text-align: center; }
.oc-logo img { max-height: 84px; width: auto; display: block; }
.oc-logo__text { display: inline-grid; justify-items: center; gap: 2px; }
.oc-logo__text strong {
	font-family: var(--oc-display);
	font-weight: 800;
	font-size: 28px;
	color: var(--oc-dark);
	line-height: 1.3;
}
.oc-logo__text em {
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	color: var(--oc-gold);
}
.oc-logobar__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	translate: 0 -50%;
}

/* أزرار الأيقونات */
.oc-iconbtn {
	position: relative;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--oc-dark);
	cursor: pointer;
	transition: all .25s;
}
.oc-iconbtn:hover { background: var(--oc-cream); color: var(--oc-gold); }
.oc-burger { display: none; }
@media (max-width: 1023px) { .oc-burger { display: grid; } }

/* عدّاد السلة */
.oc-cart-count {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	background: var(--oc-brown);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	border-radius: 99px;
}
.oc-cart-count[data-empty] { display: none; }

/* شريط التنقل */
.oc-navbar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--oc-white);
	border-block: 1px solid var(--oc-line);
	transition: box-shadow .3s;
}
.oc-navbar.is-scrolled { box-shadow: 0 8px 24px rgba(63, 40, 3, .08); }
.admin-bar .oc-navbar { top: 32px; }
@media (max-width: 1023px) {
	.admin-bar .oc-logobar { top: 32px; }
}
@media (max-width: 782px) {
	.admin-bar .oc-logobar { top: 46px; }
}
.oc-navbar__in {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 56px;
}
.oc-navbar .oc-searchtoggle {
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	translate: 0 -50%;
}

.oc-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.oc-menu > li { position: relative; }
.oc-menu > li + li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	translate: 0 -50%;
	width: 1px;
	height: 15px;
	background: var(--oc-line);
}
.oc-menu > li > a {
	display: block;
	padding: 18px 22px;
	font-weight: 700;
	font-size: 15px;
	color: var(--oc-dark);
	transition: color .25s;
}
.oc-menu > li > a:hover,
.oc-menu > li.current-menu-item > a,
.oc-menu > li.current_page_item > a { color: var(--oc-gold); }

/* قوائم فرعية */
.oc-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 210px;
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: 0 0 10px 10px;
	box-shadow: var(--oc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .25s ease;
	z-index: 70;
}
.oc-menu > li:hover > .sub-menu,
.oc-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.oc-menu .sub-menu a {
	display: block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--oc-dark);
	transition: all .2s;
}
.oc-menu .sub-menu a:hover { color: var(--oc-gold); background: var(--oc-cream); }

/* البحث المنسدل */
.oc-searchdrop {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s ease;
	background: var(--oc-white);
}
.oc-searchdrop.is-open {
	max-height: 110px;
	border-top: 1px solid var(--oc-line);
}
.oc-searchform {
	display: flex;
	gap: 10px;
	padding-block: 16px;
}
.oc-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	background: var(--oc-cream);
	border: 1px solid var(--oc-line);
	border-radius: 6px;
	padding: 12px 16px;
	font-family: var(--oc-body);
	font-size: 14.5px;
	color: var(--oc-dark);
}
.oc-searchform input[type="search"]:focus { outline: none; border-color: var(--oc-gold); }
.oc-searchform button {
	width: 48px;
	background: var(--oc-gold);
	border: 0;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .25s;
}
.oc-searchform button:hover { background: var(--oc-dark); }

/* قائمة الجوال المنزلقة */
.oc-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s;
}
.oc-scrim.is-on { opacity: 1; }
.oc-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	z-index: 95;
	width: min(84vw, 340px);
	background: var(--oc-white);
	box-shadow: 0 0 44px rgba(0, 0, 0, .18);
	transform: translateX(105%);
	visibility: hidden; /* مخفي كلياً وهو مغلق — لا يخلق تمريراً جانبياً ولا يستقبل التركيز */
	transition: transform .32s ease, visibility 0s linear .32s;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
html[dir="rtl"] .oc-drawer { transform: translateX(-105%); }
.oc-drawer.is-open,
html[dir="rtl"] .oc-drawer.is-open {
	transform: none;
	visibility: visible;
	transition: transform .32s ease;
}
body.oc-lock { overflow: hidden; }
html.oc-lock { overflow: hidden; }

.oc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--oc-line);
}
.oc-drawer__brand {
	font-family: var(--oc-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--oc-dark);
}
.oc-drawer__search { padding: 4px 20px 0; border-bottom: 1px solid var(--oc-line); }

/* ══ قائمة الدرج: إجبار عمودي — يتفوّق على flex/float الموروث من GeneratePress ══
   السبب: wp_nav_menu يُخرج الـ <ul> بكلاس oc-drawer__menu، لكن قواعد GeneratePress
   العامة على .menu و li.menu-item تطبّق display:flex فتصفّ العناصر أفقياً.
   القواعد التالية تجبر الـ <ul> block والـ <li> كل واحد بعرض كامل في سطر مستقل. */
.oc-drawer__menu,
ul.oc-drawer__menu,
.oc-drawer__menu.menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	flex-direction: column !important;
	width: 100% !important;
}
.oc-drawer__menu > li,
.oc-drawer__menu li.menu-item {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
}
.oc-drawer__menu a {
	display: block;
	padding: 15px 20px;
	border-bottom: 1px solid var(--oc-line);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--oc-dark);
	transition: all .2s;
}
.oc-drawer__menu a:hover,
.oc-drawer__menu .current-menu-item > a { color: var(--oc-gold); background: var(--oc-cream); }
.oc-drawer__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.oc-drawer__menu .sub-menu a { padding-inline-start: 36px; font-weight: 600; font-size: 14.5px; }
.oc-drawer__meta {
	margin-top: auto;
	padding: 20px;
	display: grid;
	gap: 16px;
	justify-items: start;
}
.oc-drawer__account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--oc-ink);
	font-weight: 700;
	font-size: 14.5px;
}
.oc-drawer__account:hover { color: var(--oc-gold); }
.oc-social--drawer a,
.oc-social--footer a {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--oc-beige);
	border-radius: 50%;
	color: var(--oc-brown);
	transition: all .25s;
}
.oc-social--drawer a:hover,
.oc-social--footer a:hover { background: var(--oc-gold); border-color: var(--oc-gold); color: #fff; }

/* ═══════════════════ الهيرو ═══════════════════ */
.oc-hero {
	position: relative;
	height: 74vh;
	min-height: 540px;
	max-height: 800px;
	overflow: hidden;
	background: var(--oc-cream);
}
.oc-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
	z-index: 0;
}
.oc-hero__slide.is-on { opacity: 1; z-index: 1; }
/* الصورة تملأ القسم بالكامل على كل الشاشات — قسم واحد متصل، والنص فوقها */
.oc-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oc-hero__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--oc-cream) 30%, var(--oc-beige));
	color: var(--oc-gold);
}
.oc-hero__ph .oc-icon { opacity: .35; }
.oc-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .96) 12%, rgba(255, 255, 255, .74) 48%, rgba(255, 255, 255, .06) 78%);
}
html[dir="rtl"] .oc-hero__shade { transform: scaleX(-1); }
.oc-hero__box {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-block: 40px;
}
.oc-hero__title {
	margin: 12px 0 14px;
	font-family: var(--oc-display);
	font-weight: 900;
	font-size: clamp(2rem, 4.5vw, 3.3rem);
	line-height: 1.5;
	text-wrap: balance;
	color: var(--oc-dark);
}
.oc-hero__text {
	margin: 0;
	max-width: 520px;
	font-size: 16.5px;
	line-height: 1.95;
	color: var(--oc-ink);
}
.oc-hero__box .oc-btn { margin-top: 28px; }
.oc-hero__dots {
	position: absolute;
	bottom: 26px;
	inset-inline: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.oc-hero__dot {
	width: 26px;
	height: 4px;
	border: 0;
	border-radius: 99px;
	background: rgba(63, 40, 3, .18);
	cursor: pointer;
	transition: all .3s;
	padding: 0;
}
.oc-hero__dot.is-on { width: 40px; background: var(--oc-gold); }

/* الشاشات الكبيرة: تدرج أبيض أقوى من جهة النص لضمان القراءة فوق الصورة الممتدة */
@media (min-width: 992px) {
	.oc-hero__shade {
		background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 32%, rgba(255, 255, 255, .45) 58%, rgba(255, 255, 255, .02) 80%);
	}
}

/* ═══════════════════ أقسام المتجر ═══════════════════ */
.oc-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.oc-catcard {
	display: grid;
	justify-items: center;
	gap: 6px;
	text-align: center;
}
.oc-catcard__media {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--oc-radius);
	overflow: hidden;
	border: 1px solid var(--oc-line);
	background: var(--oc-cream);
	margin-bottom: 12px;
	transition: all .35s ease;
}
.oc-catcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.oc-catcard:hover .oc-catcard__media { border-color: var(--oc-gold); box-shadow: var(--oc-shadow); }
.oc-catcard:hover .oc-catcard__media img { transform: scale(1.05); }
.oc-catcard__name {
	font-weight: 800;
	font-size: 18px;
	color: var(--oc-dark);
	transition: color .25s;
}
.oc-catcard:hover .oc-catcard__name { color: var(--oc-gold); }
.oc-catcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--oc-gold);
}

/* ═══════════════════ البانر الترويجي ═══════════════════ */
.oc-promo { padding-block: 24px 72px; }
.oc-promo__box {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: stretch;
	border: 2px solid var(--oc-gold);
	border-radius: var(--oc-radius);
	overflow: hidden;
	background: var(--oc-white);
}
.oc-promo__body {
	padding: clamp(32px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.oc-promo__title {
	margin: 0 0 14px;
	font-family: var(--oc-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
	line-height: 1.5;
	text-wrap: balance;
	color: var(--oc-dark);
}
.oc-promo__text {
	margin: 0 0 26px;
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--oc-ink);
	max-width: 460px;
}
.oc-promo__media { position: relative; min-height: 280px; }
.oc-promo__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oc-ph--promo { position: absolute; inset: 0; min-height: 0; }

/* ═══════════════════ الكاروسيل العام ═══════════════════ */
.oc-carousel__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block: 6px 14px;
	padding-inline: 2px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.oc-carousel__track::-webkit-scrollbar { display: none; }
.oc-carousel__item {
	scroll-snap-align: start;
	flex: 0 0 var(--oc-w, 260px);
	min-width: 0;
}
.oc-products .oc-carousel__item { --oc-w: calc((100% - 96px) / 5); }
.oc-blog .oc-carousel__item { --oc-w: calc((100% - 72px) / 4); }

/* ═══════════════════ بطاقة المنتج ═══════════════════ */
.oc-prodcard { text-align: center; }
.oc-prodcard__media {
	position: relative;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	background: var(--oc-white);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	transition: all .35s ease;
}
.oc-prodcard:hover .oc-prodcard__media { border-color: var(--oc-gold); box-shadow: var(--oc-shadow); }
.oc-prodcard__imglink {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
}
.oc-prodcard__imglink img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .5s ease;
}
.oc-prodcard:hover .oc-prodcard__imglink img { transform: scale(1.06); }
.oc-prodcard .oc-prodcard__add,
.oc-prodcard a.oc-prodcard__add.button {
	position: absolute;
	inset-inline: 12px;
	bottom: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--oc-gold);
	color: #fff !important;
	font-family: var(--oc-body);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	margin: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	opacity: 0;
	transform: translateY(10px);
	transition: all .3s ease;
}
.oc-prodcard:hover a.oc-prodcard__add,
.oc-prodcard:hover .oc-prodcard__add,
.oc-prodcard .oc-prodcard__add:focus-visible { opacity: 1; transform: none; }
.oc-prodcard .oc-prodcard__add:hover,
.oc-prodcard a.oc-prodcard__add.button:hover { background: var(--oc-dark); color: #fff !important; }
.oc-prodcard .oc-prodcard__add.loading { opacity: .65 !important; pointer-events: none; }
.oc-prodcard .added_to_cart { display: none; }

.oc-prodcard__cat {
	display: block;
	margin-top: 15px;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--oc-gold);
}
.oc-prodcard__title { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.oc-prodcard__title a {
	color: var(--oc-dark);
	transition: color .25s;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oc-prodcard__title a:hover { color: var(--oc-gold); }

/* نجوم التقييم */
.oc-stars {
	position: relative;
	display: inline-block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1;
	color: var(--oc-beige);
}
.oc-stars::before { content: "★★★★★"; letter-spacing: 3px; }
.oc-stars__fill {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--oc-gold);
}
.oc-stars__fill::before { content: "★★★★★"; letter-spacing: 3px; }

.oc-prodcard__price { margin-top: 7px; font-weight: 800; font-size: 15.5px; color: var(--oc-dark); }
.oc-prodcard__price del { color: #b8b8b8; font-weight: 500; font-size: 13.5px; margin-inline-end: 6px; }
.oc-prodcard__price ins { text-decoration: none; color: var(--oc-brown); }

/* ═══════════════════ بطاقة المدونة ═══════════════════ */
.oc-postcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--oc-radius);
	overflow: hidden;
	border: 1px solid var(--oc-line);
	background: var(--oc-cream);
}
.oc-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.oc-postcard:hover .oc-postcard__media img { transform: scale(1.05); }
.oc-postcard__title { margin: 16px 0 0; font-size: 17px; font-weight: 700; line-height: 1.7; }
.oc-postcard__title a {
	color: var(--oc-dark);
	transition: color .25s;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oc-postcard__title a:hover { color: var(--oc-gold); }
.oc-postcard__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 9px;
	font-size: 13px;
	font-weight: 600;
	color: #9a9a9a;
}
.oc-postcard__comments { display: inline-flex; align-items: center; gap: 5px; }
.oc-postcard__comments .oc-icon { color: var(--oc-gold); }
.oc-postcard__excerpt {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--oc-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══════════════════ آراء العميلات ═══════════════════ */
.oc-testi {
	position: relative;
	background: var(--oc-cream);
	overflow: hidden;
}
.oc-testi__deco { position: absolute; color: var(--oc-beige); pointer-events: none; }
.oc-testi__deco--a { top: 34px; inset-inline-start: 4%; transform: rotate(18deg); }
.oc-testi__deco--b { bottom: 30px; inset-inline-end: 5%; transform: rotate(-14deg) scaleX(-1); }

.oc-testi__stage {
	position: relative;
	display: grid;
	max-width: 780px;
	margin-inline: auto;
}
.oc-testi__quote {
	grid-area: 1 / 1;
	margin: 0;
	background: var(--oc-white);
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(63, 40, 3, .08);
	padding: 46px 42px 32px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all .5s ease;
	position: relative;
}
.oc-testi__quote.is-on { opacity: 1; visibility: visible; transform: none; }
.oc-testi__mark {
	position: absolute;
	top: -22px;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--oc-gold);
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 10px 20px rgba(255, 88, 148, .35);
}
html[dir="rtl"] .oc-testi__mark { translate: 50% 0; }
.oc-testi__quote p {
	margin: 0;
	text-align: center;
	font-family: var(--oc-display);
	font-weight: 600;
	font-size: 16.5px;
	line-height: 2.05;
	color: var(--oc-ink);
}

/* اسم المقيّمة داخل البطاقة نفسها */
.oc-testi__who {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-weight: 800;
	font-size: 15px;
	color: var(--oc-dark);
}
.oc-testi__who::before,
.oc-testi__who::after {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 99px;
	background: var(--oc-gold);
}

/* نقاط التنقل بين الآراء — نفس الكلاس وخاصية data-person القديمة
   حتى يستمر الجافاسكريبت الحالي بالعمل دون أي تعديل */
.oc-testi__people {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 34px;
}
.oc-testi__person {
	width: 26px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: rgba(63, 40, 3, .16);
	cursor: pointer;
	transition: all .3s;
}
.oc-testi__person:hover { background: var(--oc-brown); }
.oc-testi__person.is-on { width: 40px; background: var(--oc-gold); }

/* ═══════════════════ الفوتر ═══════════════════ */
.oc-footer { background: var(--oc-white); border-top: 1px solid var(--oc-line); }
.oc-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
	padding-block: 64px 48px;
}
.oc-fcol__title {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 800;
	color: var(--oc-dark);
}
.oc-fcol__title::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 99px;
	background: var(--oc-gold);
	margin-top: 10px;
}
.oc-fcol__text { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--oc-ink); }
.oc-fcol__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-weight: 800;
	font-size: 14.5px;
	color: var(--oc-brown);
	transition: color .25s;
}
.oc-fcol__wa:hover { color: var(--oc-gold); }
.oc-social--footer { margin-top: 18px; gap: 10px; }

.oc-fposts { list-style: none; margin: 0; padding: 0; }
.oc-fposts li { display: flex; align-items: center; gap: 13px; }
.oc-fposts li + li { margin-top: 16px; }
.oc-fposts__thumb {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--oc-line);
}
.oc-fposts__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oc-ph-thumb {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: var(--oc-cream);
	color: var(--oc-gold);
}
.oc-fposts__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--oc-dark);
	transition: color .25s;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.oc-fposts__title:hover { color: var(--oc-gold); }

.oc-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.oc-tags a {
	display: inline-block;
	background: var(--oc-cream);
	border: 1px solid var(--oc-line);
	border-radius: 5px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--oc-ink);
	transition: all .25s;
}
.oc-tags a:hover { background: var(--oc-gold); border-color: var(--oc-gold); color: #fff; }

.oc-flinks { list-style: none; margin: 0; padding: 0; }
.oc-flinks li + li { margin-top: 11px; }
.oc-flinks a { font-size: 14.5px; font-weight: 600; color: var(--oc-ink); transition: all .25s; }
.oc-flinks a:hover { color: var(--oc-gold); padding-inline-start: 5px; }

/* شريط النشرة */
.oc-newsletter { border-top: 1px solid var(--oc-line); background: var(--oc-white); }
.oc-newsletter__in {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	padding-block: 34px;
}
.oc-newsletter__title {
	margin: 0;
	font-family: var(--oc-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--oc-dark);
	flex: none;
}
.oc-newsletter__text {
	margin: 0;
	flex: 1;
	min-width: 240px;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--oc-ink);
}
.oc-newsletter__text strong { color: var(--oc-gold); font-weight: 800; }
.oc-newsform { display: flex; gap: 10px; flex: none; }
.oc-newsform input[type="email"] {
	width: min(300px, 62vw);
	background: var(--oc-cream);
	border: 1px solid var(--oc-line);
	border-radius: 6px;
	padding: 12px 16px;
	font-family: var(--oc-body);
	font-size: 14.5px;
	color: var(--oc-dark);
	transition: border-color .25s;
}
.oc-newsform input[type="email"]:focus { outline: none; border-color: var(--oc-gold); }
.oc-newsform.is-error input[type="email"] { border-color: #c0392b; }

/* شريط الحقوق */
.oc-footbar { background: var(--oc-dark); color: #f2f2f2; }
.oc-footbar__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 16px;
	font-size: 13.5px;
	font-weight: 600;
}
.oc-footbar__badge { display: inline-flex; align-items: center; gap: 7px; }
.oc-footbar .oc-icon { color: var(--oc-gold); }

/* ═══════════════════ العناصر العائمة ═══════════════════ */
.oc-float {
	position: fixed;
	top: 50%;
	inset-inline-end: 0;
	translate: 0 -50%;
	z-index: 80;
	display: grid;
}
.oc-float__btn {
	position: relative;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--oc-dark);
	color: #ffffff;
	transition: background .25s;
}
.oc-float__btn + .oc-float__btn { border-top: 1px solid rgba(255, 255, 255, .12); }
.oc-float__btn:first-child { border-start-start-radius: 10px; }
.oc-float__btn:last-child { border-end-start-radius: 10px; }
.oc-float__btn:hover { background: var(--oc-gold); color: #fff; }
.oc-float .oc-cart-count { top: 3px; inset-inline-end: 3px; }

.oc-totop {
	position: fixed;
	bottom: 22px;
	inset-inline-start: 18px;
	z-index: 80;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--oc-gold);
	color: #fff;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(63, 40, 3, .25);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: all .3s ease;
}
.oc-totop.is-show { opacity: 1; pointer-events: auto; transform: none; }
.oc-totop:hover { background: var(--oc-dark); }

/* ═══════════════════ حركة الظهور ═══════════════════ */
[data-reveal].oc-pre {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
	/* شبكة أمان: لو تعطّل IntersectionObserver أو تأخّر/تعطّل السكربت لأي سبب،
	   المحتوى يظهر أوتوماتيك بعد ثانيتين بدل ما يفضل مخفي ويسيب فراغ */
	animation: oc-reveal-safety .7s ease 2s forwards;
}
@keyframes oc-reveal-safety { to { opacity: 1; transform: none; } }
[data-reveal].oc-pre.is-in {
	opacity: 1;
	transform: none;
	animation: none; /* ظهر عبر التمرير — نلغي مؤقّت الأمان */
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal].oc-pre { opacity: 1; transform: none; transition: none; animation: none; }
	.oc-hero__slide { transition: none; }
	* { scroll-behavior: auto !important; }
}

/* ═══════════════════ التجاوب ═══════════════════ */
@media (max-width: 1199px) {
	.oc-products .oc-carousel__item { --oc-w: calc((100% - 72px) / 4); }
	.oc-blog .oc-carousel__item { --oc-w: calc((100% - 48px) / 3); }
}

@media (max-width: 1023px) {
	/* إخفاء الشريط العلوي وشريط القوائم — تظهر قائمة الجوال */
	.oc-topbar { display: none; }
	.oc-navbar { display: none; }
	.oc-logobar { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--oc-line); }
	.oc-logobar__in { justify-content: flex-start; padding-block: 12px; min-height: 64px; }
	.oc-logo img { max-height: 54px; }
	.oc-logo__text strong { font-size: 22px; }
	.oc-logo__text em { display: none; }
	.oc-logobar__actions { display: flex; }
	.oc-searchdrop.is-open { border-top: 1px solid var(--oc-line); }
}

@media (max-width: 991px) {
	.oc-section { padding-block: 52px; }
	.oc-sechead { margin-bottom: 32px; }
	.oc-products .oc-carousel__item { --oc-w: calc((100% - 48px) / 3); }
	.oc-blog .oc-carousel__item { --oc-w: calc((100% - 24px) / 2); }
	.oc-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; padding-block: 48px 36px; }
	.oc-promo__box { grid-template-columns: 1fr; }
	.oc-promo__media { min-height: 240px; order: -1; }
	.oc-hero { height: 66vh; min-height: 480px; }
}

@media (max-width: 767px) {
	.oc-products .oc-carousel__item { --oc-w: calc((100% - 24px) / 2); }
	/* زر الإضافة ظاهر دائماً على اللمس */
	.oc-prodcard .oc-prodcard__add { opacity: 1; transform: none; }
	/* الهيرو: الصورة تظهر أعلى والنص أسفلها فوق تدرج أبيض — مقروئية كاملة */
	.oc-hero__shade { background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .3) 36%, rgba(255, 255, 255, .9) 60%, #fff 80%); }
	.oc-hero__box { justify-content: flex-end; padding-block: 24px 58px; }
	.oc-hero__title { line-height: 1.4; }
	.oc-hero__text { font-size: 15px; color: #665e51; }
	.oc-newsletter__in { flex-direction: column; align-items: flex-start; gap: 14px; }
	.oc-newsform { width: 100%; }
	.oc-newsform input[type="email"] { flex: 1; width: auto; min-width: 0; }
	.oc-testi__quote { padding: 38px 20px 26px; }
	.oc-testi__quote p { font-size: 15px; }
}

@media (max-width: 600px) {
	.oc-footer__cols { grid-template-columns: 1fr; gap: 32px; }
	.oc-footbar__in { justify-content: center; text-align: center; }
	.oc-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.oc-catcard__media { margin-bottom: 8px; border-radius: 10px; }
	.oc-catcard__name { font-size: 13.5px; }
	.oc-catcard__cta { display: none; }
	.oc-sechead--nav { flex-wrap: wrap; }
}

@media (max-width: 520px) {
	.oc-products .oc-carousel__item { --oc-w: 74%; }
	.oc-blog .oc-carousel__item { --oc-w: 82%; }
	.oc-hero { height: 62vh; min-height: 440px; }
	.oc-float__btn { width: 42px; height: 42px; }
}
/* ═══ إصلاح التمرير الأفقي: غلاف يقصّ الدرج (fixed) وهو خارج الشاشة ═══ */
.oc-offcanvas{
	position: fixed;
	inset: 0;
	z-index: 90;
	overflow: hidden;         /* يقصّ الدرج المتزحلق خارج الشاشة */
	pointer-events: none;     /* لا يبلك الكليك على الصفحة وهو مقفول */
	transform: translateZ(0); /* يجعل الغلاف يقصّ العناصر fixed بداخله */
}
/* ⚠ pointer-events خاصية موروثة — من غير السطرين دول بيورّثها الغلاف لكل
   أبنائه، فيبقى زر الإغلاق والحجاب وكل روابط المنيو ميّتين (تفتح ولا تُغلق) */
.oc-offcanvas .oc-scrim,
.oc-offcanvas .oc-drawer { pointer-events: auto; }
/* ═══ شبكة أمان نهائية ضد التمرير الأفقي ═══ */
html, body.oc-body{ max-width:100%; overflow-x:clip; }

.oc-body img,
.oc-body svg:not(.oc-icon),
.oc-body video,
.oc-body iframe,
.oc-body table{ max-width:100%; }

.oc-container{ width:100%; max-width:min(1280px,100%); }
/* ═══ ألوان الفوتر مطابقة للمرجع: خلفية زرقاء باستيل بالكامل ═══ */
.oc-footer {
	background: var(--oc-beige) !important; /* #d3f1f9 أزرق باستيل */
	border-top: 0 !important;
}

/* شريط النشرة البريدية — نفس الخلفية الزرقاء (بدون فاصل أبيض) */
.oc-newsletter {
	background: transparent !important;
	border-top: 1px solid rgba(28, 28, 28, .08) !important;
}

/* حقل البريد داخل النشرة — أبيض عشان يبان على الأزرق */
.oc-newsform input[type="email"] {
	background: var(--oc-white) !important;
	border-color: rgba(28, 28, 28, .12) !important;
}

/* أيقونات التواصل — إطار داكن خفيف على الأزرق */
.oc-social--footer a {
	border-color: rgba(28, 28, 28, .22) !important;
	color: var(--oc-dark) !important;
	background: transparent !important;
}
.oc-social--footer a:hover {
	background: var(--oc-gold) !important;
	border-color: var(--oc-gold) !important;
	color: #fff !important;
}

/* بطاقات المقالات المصغّرة — خلفية بيضا عشان تبان على الأزرق */
.oc-fposts__thumb { background: var(--oc-white) !important; }
.oc-ph-thumb { background: var(--oc-white) !important; }

/* وسوم المنتجات — أبيض على الأزرق */
.oc-tags a {
	background: var(--oc-white) !important;
	border-color: rgba(28, 28, 28, .12) !important;
}

/* ═══ شريط الحقوق السفلي — أبيض نقي زي المرجع ═══ */
.oc-footbar {
	background: var(--oc-white) !important;
	color: var(--oc-dark) !important;
	border-top: 1px solid rgba(28, 28, 28, .10) !important;
}
.oc-footbar .oc-icon { color: var(--oc-gold) !important; }