/* =====================================================================
   موضة ستور — تحسين بطاقات المنتجات (عصري + متوافق مع الهوية)
   يُطبَّق على الصفحة الرئيسية والمتجر والتصنيفات والمنتجات ذات الصلة.
   لون الهوية: #5b142a (عنّابي غامق)
   ===================================================================== */

/* ---- البطاقة: زوايا دائرية + حد ناعم + ظل خفيف + رفع عند المرور ----
   (البطاقات في الصفحة الرئيسية div.product-small، وفي المتجر li.product) */
.product-small.product,
ul.products li.product {
	position: relative;
	isolation: isolate;              /* حاوية تكديس مستقلة: تُبقي الشارة/الزر ضمن البطاقة */
	border: 1px solid #efe9eb !important;
	border-radius: 16px !important;
	overflow: hidden;
	background: #ffffff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.product-small.product:hover,
ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(91, 20, 42, .14) !important;
	border-color: #e6d0d8 !important;
}

/* ---- حاوية الصورة: قص التكبير + زاوية علوية دائرية ----
   (.box-image موضعها relative أصلاً من الثيم — نبقيها مرجع التموضع للشارة والزر) */
.product-small .box-image,
.product-small .box-image-wrap,
.product-small .box-image-inner {
	overflow: hidden !important;
	border-radius: 15px 15px 0 0;
}

.product-small .box-image img {
	transition: transform .55s cubic-bezier(.2, .6, .2, 1);
	width: 100%;
}

.product-small:hover .box-image img {
	transform: scale(1.07);
}

/* ---- زر "عرض المنتج" يظهر بنعومة عند المرور (CSS فقط، لا يعيق النقر) ---- */
.product-small .box-image::after {
	content: "عرض المنتج";
	position: absolute;
	inset-inline: 0;
	bottom: 14px;
	margin: 0 auto;
	width: -moz-max-content;
	width: max-content;
	max-width: 80%;
	background: rgba(91, 20, 42, .96);
	color: #fff;
	font-family: "El Messiri", "Tajawal", sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 22px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(91, 20, 42, .35);
	z-index: 110;                     /* أعلى من رابط الصورة (100) ليظهر فوق الصورة */
}

.product-small:hover .box-image::after {
	opacity: 1;
	transform: translateY(0);
}

/* ---- شارة الخصم: حبة دائرية بلون الهوية ---- */
.product-small .onsale,
.products .onsale {
	border-radius: 999px !important;
	background: #5b142a !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 5px 12px !important;
	font-size: 12px !important;
	line-height: 1 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	box-shadow: 0 2px 8px rgba(91, 20, 42, .28);
	top: 12px !important;
	inset-inline-start: 12px !important;
	inset-inline-end: auto !important;
	z-index: 120 !important;          /* أعلى من رابط الصورة (z-index:100 من الثيم) */
}

.product-small .onsale span,
.product-small .onsale strong {
	background: transparent !important;
	color: #fff !important;
	padding: 0 !important;
}

/* ---- منطقة النص: تنفّس داخلي ومحاذاة يمين ---- */
.product-small .box-text {
	padding: 14px 15px 18px !important;
	text-align: right;
}

/* ---- العنوان: سطران بارتفاع ثابت (محاذاة البطاقات) + لون الهوية عند المرور ---- */
.product-small .box-text .woocommerce-loop-product__title,
.product-small .box-text .name.product-title,
.product-small .box-text .name a {
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	min-height: 2.9em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px !important;
	color: #3a272c !important;
	transition: color .25s ease;
}

.product-small:hover .box-text .woocommerce-loop-product__title,
.product-small:hover .box-text .name a {
	color: #5b142a !important;
}

/* ---- السعر: الحالي بلون الهوية بارز، القديم رمادي مقروء ومشطوب ---- */
.product-small .box-text .price {
	font-size: 16px !important;
	display: block;
}

.product-small .box-text .price ins,
.product-small .box-text .price ins .amount {
	text-decoration: none !important;
	color: #5b142a !important;
	font-weight: 800 !important;
}

.product-small .box-text .price > .amount {
	color: #5b142a !important;
	font-weight: 800 !important;
}

.product-small .box-text .price del,
.product-small .box-text .price del .amount {
	color: #6e6e6e !important;   /* مقروء (تباين ≥ 4.5:1) */
	font-size: .82em !important;
	font-weight: 500 !important;
	margin-inline-start: 6px;
}

/* ---- الجوال: مسافات أنسب للبطاقة ---- */
@media only screen and (max-width: 549px) {
	.product-small .box-text {
		padding: 10px 10px 14px !important;
	}
	.product-small .box-text .woocommerce-loop-product__title,
	.product-small .box-text .name a {
		font-size: 13px !important;
	}
	.product-small .box-text .price {
		font-size: 14.5px !important;
	}
	.product-small .box-image-wrap::after {
		font-size: 12px;
		padding: 7px 16px;
	}
}