/*
Theme Name: Calma Child
Theme URI: http://www.wpbingosite.com/calma
Author: wpbingo
Description: This is a child theme for Calma
Version: 1.0.0
Author URI: http://wpbingosite.com
Template: calma
Text Domain: calma-child
*/
/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* =====================================================================
   Shop / Archive grid — توحيد أحجام صور المنتجات + صورة الـ hover
   ---------------------------------------------------------------------
   المشكلة: في صفحة الـ shop كانت الصورة التانية (.hover-image.back)
   هي اللي بتحدّد ارتفاع البوكس لأنها static، والصورة الأساسية فوقها
   absolute بمقاس مختلف. وبما إن المنتجات نِسبها مختلفة، كل منتج كان
   بيطلع بارتفاع مختلف + نطّة عند الـ hover.

   الحل: بوكس بنسبة ثابتة 3:4، والصورتين absolute بيملوه بالكامل
   بـ object-fit:cover. كله بقى بنفس الحجم والـ hover ناعم من غير نطّة.
   (CSS بس — من غير regenerate للصور)
   ===================================================================== */

/* 1) البوكس الموحّد بنسبة 600x808 (نسبة صور المنتجات الفعلية) */
.products-list.grid .product-wapper .products-thumb .product-thumb-img {
	position: relative;
	width: 100%;
	aspect-ratio: 600 / 808;
	overflow: hidden;
}

/* 2) عناصر التغليف الداخلية تملأ البوكس بالكامل */
.products-list.grid .product-wapper .products-thumb .product-thumb-img .product-thumb-hover,
.products-list.grid .product-wapper .products-thumb .product-thumb-img .woocommerce-LoopProduct-link,
.products-list.grid .product-wapper .products-thumb .product-thumb-img .product-thumb-swiper,
.products-list.grid .product-wapper .products-thumb .product-thumb-img .swiper-wrapper,
.products-list.grid .product-wapper .products-thumb .product-thumb-img .swiper-slide {
	display: block;
	width: 100%;
	height: 100%;
}

/* 3) الصورة الأساسية + صورة الـ hover تملأ البوكس بنفس المقاس تماماً (Cover) */
.products-list.grid .product-wapper .products-thumb .product-thumb-img:not(.product-thumb-slider) img,
.products-list.grid .product-wapper .products-thumb .product-thumb-hover .wp-post-image,
.products-list.grid .product-wapper .products-thumb .product-thumb-hover .hover-image,
.products-list.grid .product-wapper .products-thumb .product-thumb-hover .hover-image.active {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
}

/* صورة الـ hover لما تظهر تبقى فوق الأساسية */
.products-list.grid .product-wapper .products-thumb .product-thumb-hover .hover-image.active {
	z-index: 2;
}

/* 4) وضع الـ slider: الصور تملأ السلايد من غير absolute عشان السلايدر يفضل شغّال */
.products-list.grid .product-wapper .products-thumb .product-thumb-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* =====================================================================
   RTL fix — أسهم الكاروسيل (arrow-above) كانت متراكبة فوق العنوان في العربي
   ---------------------------------------------------------------------
   في الإنجليزي (LTR): العنوان شمال + الأسهم يمين فوق = مفيش تداخل.
   في العربي (RTL): العنوان بيتحاذى يمين، والأسهم لسه يمين (top:-45px;right:..)
   فبيتراكبوا فوق العنوان. الحل: نعكس الأسهم على الشمال في RTL.
   ===================================================================== */
.rtl .elementor-widget-bwp-info-box.arrow-above .bwp-swiper-button-next {
	right: auto !important;
	left: 0 !important;
}
.rtl .elementor-widget-bwp-info-box.arrow-above .bwp-swiper-button-prev {
	right: auto !important;
	left: 55px !important;
}

/* =====================================================================
   منع التمرير الأفقي الزيادة (horizontal overflow)
   ---------------------------------------------------------------------
   سلايدر الهيرو (Slider Revolution) وشريط الـ marquee بيقيسوا عرضهم بـ
   window.innerWidth اللي بيشمل عرض شريط التمرير (~15px)، فبيطلع عرض زيادة
   عن الشاشة وبيظهر سكرو.بار أفقي. الحل: نقصّ الزيادة الأفقية. نستخدم
   overflow-x:clip لأنه بيقصّ من غير ما يعمل scroll-container جديد (مايأثرش
   على أي عنصر position:sticky)، مع fallback لـ hidden في المتصفحات القديمة.
   ===================================================================== */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}