/* دکمه‌ی قلب علاقه‌مندی */
.dcpwl-heart-btn {
	all: unset; /* اول همه‌چیز را از استایل‌های عمومی قالب (button، svg و...) خالی می‌کنیم */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 50% !important;
	color: #9aa1af;
	cursor: pointer;
	overflow: hidden;
	transition: color 0.2s, transform 0.15s, border-color 0.2s;
}

.dcpwl-heart-btn:hover {
	color: #e0245e;
	border-color: #e0245e !important;
}

.dcpwl-heart-btn.is-active {
	color: #e0245e;
	border-color: #e0245e !important;
}

.dcpwl-heart-btn:active {
	transform: scale(0.9);
}

.dcpwl-heart-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.dcpwl-icon-svg {
	width: 22px !important;
	height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	flex-shrink: 0;
}

.dcpwl-icon-svg path {
	fill: none;
	transition: fill 0.2s;
}

.dcpwl-heart-btn.is-active .dcpwl-icon-svg path {
	fill: currentColor;
}

/*
 * آیکون‌های سفارشی آپلودی — سقف اندازه‌ی سخت‌گیرانه (max-width/height با
 * !important) عمداً گذاشته شده تا صرف‌نظر از اندازه‌ی واقعی فایل آپلودشده
 * (حتی اگر ادمین یک عکس ۵۰۰×۵۰۰ پیکسلی انتخاب کرده باشد)، داخل دکمه‌ی
 * ۳۸×۳۸ همیشه درست جا بگیرد و کارت محصول را به‌هم نریزد.
 */
.dcpwl-icon {
	width: 20px !important;
	height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	object-fit: contain !important;
	flex-shrink: 0;
}
.dcpwl-icon-empty { display: inline-block !important; }
.dcpwl-icon-active { display: none !important; }
.dcpwl-heart-btn.is-active .dcpwl-icon-empty { display: none !important; }
.dcpwl-heart-btn.is-active .dcpwl-icon-active { display: inline-block !important; }

/* موقعیت قلب روی کارت محصول در لوپ واقعی ووکامرس (فروشگاه/دسته‌بندی) —
   اینجا از li.product واقعی خودِ ووکامرس استفاده می‌شود، چون این کارت‌ها را
   خودِ قالب می‌سازد، نه ما؛ فقط قلب را رویش می‌نشانیم */
li.product {
	position: relative !important;
}
li.product .dcpwl-heart-btn {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 5 !important;
}

/*
 * شبکه‌ی صفحه‌ی علاقه‌مندی‌ها — کاملاً مستقل از کلاس‌های products/product
 * خودِ ووکامرس (که قبلاً استفاده می‌شد تا استایل قالب را به‌ارث ببرد، ولی در
 * عمل باعث می‌شد گرید/فلکس عجیب خودِ قالب این کارت‌ها را بشکند — همان چیزی
 * که در تصویر دیدید). این‌جا هر چیزی از صفر و با !important تعریف شده تا
 * هیچ قانون عمومی قالب نتواند رویش بنشیند.
 */
.dcpwl-wishlist-page {
	direction: rtl;
	font-family: inherit;
}

.dcpwl-wishlist-page .dcpwl-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 20px !important;
	padding-bottom: 14px !important;
	border-bottom: 2px solid #f1f1f1 !important;
	color: #1f2333 !important;
}

.dcpwl-empty-state {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 60px 20px !important;
	color: #9aa1af !important;
}
.dcpwl-empty-icon {
	color: #d1d5db !important;
	margin-bottom: 14px !important;
}
.dcpwl-wishlist-page .dcpwl-empty {
	font-size: 15px !important;
	color: #6b7280 !important;
	margin: 0 !important;
}

ul.dcpwl-products {
	all: unset !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 22px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.dcpwl-product-item {
	all: unset !important;
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	border: 1px solid #eef0f2 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
	transition: box-shadow 0.2s, transform 0.2s;
	box-sizing: border-box !important;
}

.dcpwl-product-item:hover {
	box-shadow: 0 8px 20px -6px rgba(16, 24, 40, 0.16) !important;
	transform: translateY(-2px);
}

.dcpwl-product-media {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	background: #f9fafb !important;
	overflow: hidden !important;
}

.dcpwl-product-thumb {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	text-decoration: none !important;
}

.dcpwl-product-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.dcpwl-product-heart {
	position: absolute !important;
	top: 10px !important;
	inset-inline-end: 10px !important;
	z-index: 5 !important;
}

.dcpwl-product-heart .dcpwl-heart-btn {
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.15) !important;
}

.dcpwl-product-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 14px !important;
	flex: 1 !important;
}

.dcpwl-product-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: #1f2333 !important;
	text-decoration: none !important;
	min-height: calc(14px * 1.5 * 2);
}

.dcpwl-product-title:hover {
	color: #0d8f74 !important;
}

.dcpwl-product-price {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #0d8f74 !important;
	margin-top: auto !important;
}

.dcpwl-product-price del {
	font-weight: 400 !important;
	color: #9aa1af !important;
	font-size: 12px !important;
	margin-inline-end: 6px !important;
	text-decoration: line-through !important;
}

.dcpwl-product-price ins {
	text-decoration: none !important;
}

/* پیام کوتاه (toast) بعد از کلیک */
.dcpwl-toast {
	position: fixed;
	bottom: 24px;
	inset-inline-end: 24px;
	background: #1f2333;
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 99999;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s, transform 0.25s;
	pointer-events: none;
}
.dcpwl-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* واکنش‌گرا در سه لایه: دسکتاپ (پیش‌فرض بالا)، تبلت/موبایل بزرگ، موبایل باریک */
@media (max-width: 782px) {
	ul.dcpwl-products {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
		gap: 16px !important;
	}
	.dcpwl-wishlist-page .dcpwl-title {
		font-size: 19px !important;
	}
}

@media (max-width: 480px) {
	.dcpwl-wishlist-page {
		padding: 0 4px !important;
	}
	ul.dcpwl-products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.dcpwl-product-body {
		padding: 10px !important;
		gap: 6px !important;
	}
	.dcpwl-product-title {
		font-size: 13px !important;
	}
	.dcpwl-product-price {
		font-size: 13px !important;
	}
}