/*!
 * Stylish Categories — ویجت دستهبندی تعاملی ووکامرس
 * همهی رنگها از متغیرهای CSS میآیند و از پنل تنظیمات قابل تغییرند.
 */

.sc {
	--sc-accent: #1f4d3a;
	--sc-accent-soft: #e7efe9;
	--sc-surface: #ffffff;
	--sc-canvas: #f7f5f0;
	--sc-ink: #1b1b1b;
	--sc-muted: #6b7280;
	--sc-line: #e8e4da;
	--sc-radius: 16px;
	--sc-cols: 3;
	--sc-rail-w: 88px;
	--sc-h: 70vh;
	--sc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 100%;
	height: var(--sc-h);
	overflow: hidden;
	/*
	 * چیدمان داخلی به عرضِ خودِ ویجت واکنش نشان میدهد، نه عرض پنجره.
	 * قبلاً با @media بود و داخل کشوی ۴۴۰پیکسلی روی دسکتاپ، ۵ ستون کاشی
	 * و ریل ۱۶۸پیکسلی میگرفت و بههم میریخت.
	 */
	container-type: inline-size;
	container-name: sc;
	color: var(--sc-ink);
	background: var(--sc-surface);
	border-radius: var(--sc-radius);
	font-family: var(--sc-font, inherit);
	line-height: 1.7;
	-webkit-tap-highlight-color: transparent;
}

.sc *,
.sc *::before,
.sc *::after {
	box-sizing: border-box;
}

/*
 * هر قانون display در استایلِ نویسنده، [hidden] مرورگر را خنثی میکند.
 * این قانون صفتِ hidden را دوباره معتبر میکند تا هر جا در مارکآپ
 * hidden گذاشتیم واقعاً پنهان شود.
 */
.sc [hidden],
.sc-overlay [hidden] {
	display: none !important;
}

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

.sc button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sc .sc-i {
	width: 20px;
	height: 20px;
	flex: none;
}

.sc-payload {
	display: none;
}

/* ---------------------------------------------------------------- سربرگ */

.sc-drawer__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 4px;
	font-weight: 700;
	font-size: 16px;
}

.sc-close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--sc-muted);
	background: var(--sc-canvas);
	transition: background 0.2s var(--sc-ease), color 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

.sc-close:hover {
	color: var(--sc-ink);
	transform: rotate(90deg);
}

/* ------------------------------------------------------- بازدیدهای اخیر */

.sc-recent {
	flex: none;
	padding: 12px 14px 10px;
	animation: sc-fade 0.3s var(--sc-ease);
}

.sc-recent__label {
	display: block;
	font-size: 11px;
	color: var(--sc-muted);
	margin-bottom: 6px;
}

.sc-recent__row {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.sc-recent__row::-webkit-scrollbar {
	display: none;
}

.sc-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding-inline: 10px;
	font-size: 12px;
	border-radius: 999px;
	background: var(--sc-canvas);
	border: 1px solid var(--sc-line);
	white-space: nowrap;
	transition: background 0.2s var(--sc-ease), border-color 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

.sc-chip:hover {
	border-color: var(--sc-accent);
	background: var(--sc-accent-soft);
	transform: translateY(-1px);
}

.sc-chip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: hsl(var(--hue, 150) 42% 62%);
}

/* -------------------------------------------------------------- بدنه */

.sc-body {
	display: grid;
	grid-template-columns: var(--sc-rail-w) minmax(0, 1fr);
	flex: 1;
	min-height: 0;
	border-top: 1px solid var(--sc-line);
}

/* ریل سطح یک */

.sc-rail {
	position: relative;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--sc-canvas);
	scrollbar-width: none;
	padding-block: 6px;
}

.sc-rail::-webkit-scrollbar {
	display: none;
}

.sc-rail__marker {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--h, 0px);
	background: var(--sc-surface);
	/* گوشهها فقط سمت بیرونی گرد است تا کارت فعال با پنل یکی شود. */
	border-start-start-radius: 14px;
	border-end-start-radius: 14px;
	transform: translateY(var(--y, 0px));
	transition: transform 0.38s var(--sc-ease-out), height 0.38s var(--sc-ease-out);
	pointer-events: none;
	opacity: 0;
}

.sc--ready .sc-rail__marker {
	opacity: 1;
}

.sc-rail__marker::before {
	content: "";
	position: absolute;
	inset-block: 24%;
	inset-inline-start: 5px;
	width: 3px;
	border-radius: 3px;
	background: var(--sc-accent);
}

.sc-rail__item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 6px 10px;
	text-align: center;
	transition: color 0.25s var(--sc-ease);
}

.sc-rail__item:not(.is-active) .sc-media {
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.3s var(--sc-ease), opacity 0.3s var(--sc-ease);
}

.sc-rail__item:hover .sc-media {
	filter: none;
	opacity: 1;
}

.sc-rail__label {
	font-size: 11px;
	line-height: 1.5;
	color: var(--sc-muted);
	transition: color 0.25s var(--sc-ease), font-weight 0.25s var(--sc-ease);
	word-break: break-word;
}

.sc-rail__item.is-active .sc-rail__label {
	color: var(--sc-accent);
	font-weight: 700;
}

/* پنل */

.sc-pane {
	position: relative;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 14px 24px;
	scrollbar-width: thin;
}

.sc-pane::-webkit-scrollbar {
	width: 5px;
}

.sc-pane::-webkit-scrollbar-thumb {
	background: var(--sc-line);
	border-radius: 999px;
}

.sc-pane.is-swapping {
	animation: sc-pane-in 0.34s var(--sc-ease-out);
}

/* لینک «همهی محصولات» */

.sc-all {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
	border-radius: 12px;
	background: var(--sc-accent-soft);
	color: var(--sc-accent);
	font-size: 13px;
	font-weight: 600;
	transition: transform 0.2s var(--sc-ease), box-shadow 0.2s var(--sc-ease);
}

.sc-all:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--sc-accent) 55%, transparent);
}

.sc-all__t {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-all__c {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.75;
	white-space: nowrap;
}

.sc-all .sc-i {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--sc-ease);
}

.sc-all:hover .sc-i {
	transform: translateX(-3px);
}

.sc[dir="ltr"] .sc-all:hover .sc-i {
	transform: translateX(3px) rotate(180deg);
}

.sc[dir="ltr"] .sc-all .sc-i {
	transform: rotate(180deg);
}

/* ------------------------------------------------- گرید سطح دو */

.sc-grid {
	display: grid;
	grid-template-columns: repeat(var(--sc-cols), minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}

.sc-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	will-change: transform;
	animation: sc-rise 0.42s var(--sc-ease-out) backwards;
	animation-delay: calc(var(--i, 0) * 28ms);
}

.sc-tile__label {
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: var(--sc-ink);
	transition: color 0.2s var(--sc-ease);
	word-break: break-word;
}

.sc-tile .sc-media {
	width: 100%;
	aspect-ratio: 1 / 1;
	transition: box-shadow 0.25s var(--sc-ease), border-color 0.25s var(--sc-ease);
	border: 2px solid transparent;
}

.sc-tile:hover .sc-media {
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
}

.sc-tile:hover .sc-tile__label {
	color: var(--sc-accent);
}

.sc-tile.is-picked .sc-media {
	border-color: var(--sc-accent);
}

.sc-tile.is-picked .sc-tile__label {
	color: var(--sc-accent);
	font-weight: 700;
}

/* حالت نوار افقی: گرید به یک ردیف اسکرولشونده تبدیل میشود */

.sc-grid[data-state="strip"] {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
}

.sc-grid[data-state="strip"]::-webkit-scrollbar {
	display: none;
}

.sc-grid[data-state="strip"] .sc-tile {
	flex: none;
	width: 66px;
	animation: none;
	scroll-snap-align: center;
}

.sc-grid[data-state="strip"] .sc-tile__label {
	font-size: 10px;
	line-height: 1.4;
	max-height: 2.8em;
	overflow: hidden;
}

/* در حین انیمیشن FLIP، ترنزیشنهای جانبی خاموش میشوند */

.sc-grid.is-flipping .sc-tile,
.sc-grid.is-flipping .sc-media {
	transition: none;
}

/* ------------------------------------------------- کاشیهای سطح سه */

/*
 * سطح سه همان کاشیهای تصویری سطح دو را دارد (نه لیست متنی)،
 * زیر نوار افقیِ سطح دو باز میشود.
 */

.sc-third {
	margin-top: 18px;
}

.sc-third[hidden] {
	display: none;
}

.sc-third__all {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: var(--sc-canvas);
	font-size: 13px;
	font-weight: 700;
	animation: sc-rise 0.34s var(--sc-ease-out) backwards;
	transition: background 0.18s var(--sc-ease), color 0.18s var(--sc-ease);
}

.sc-third__all:hover {
	background: var(--sc-accent-soft);
	color: var(--sc-accent);
}

.sc-third__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-third__all .sc-i {
	width: 15px;
	height: 15px;
	color: var(--sc-muted);
	transition: transform 0.2s var(--sc-ease), color 0.2s var(--sc-ease);
}

.sc-third__all:hover .sc-i {
	color: var(--sc-accent);
	transform: translateX(-3px);
}

.sc[dir="ltr"] .sc-third__all .sc-i {
	transform: rotate(180deg);
}

.sc[dir="ltr"] .sc-third__all:hover .sc-i {
	transform: rotate(180deg) translateX(-3px);
}

/* ورود پلکانی کمی دیرتر از دکمهی «مشاهدهی همه» */
.sc-grid--third .sc-tile {
	animation-delay: calc(60ms + var(--i, 0) * 28ms);
}

/* ------------------------------------------------------------- برندها */

.sc-brands {
	margin-top: 26px;
}

.sc-brands__title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sc-ink);
}

.sc-brands__title .sc-i {
	width: 16px;
	height: 16px;
	color: var(--sc-accent);
}

.sc-brands__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.sc-brands__row::-webkit-scrollbar {
	display: none;
}

.sc-brand {
	flex: none;
	display: grid;
	place-items: center;
	width: 84px;
	height: 52px;
	padding: 6px;
	border: 1px solid var(--sc-line);
	border-radius: 10px;
	background: var(--sc-surface);
	transition: border-color 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

.sc-brand:hover {
	border-color: var(--sc-accent);
	transform: translateY(-2px);
}

.sc-brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.sc-brand__txt {
	font-size: 11px;
	text-align: center;
	color: var(--sc-muted);
	line-height: 1.3;
}

/* ------------------------------------------------- تصویر / جایگزین حرف */

.sc-media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 12px;
	background: var(--sc-canvas);
	flex: none;
}

.sc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sc-media--rail {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.sc-media--result {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.sc-media--ph {
	background: linear-gradient(
		145deg,
		hsl(var(--hue, 150) 38% 92%),
		hsl(var(--hue, 150) 34% 84%)
	);
}

.sc-media__ch {
	font-size: 0.9em;
	font-weight: 700;
	color: hsl(var(--hue, 150) 40% 32%);
}

.sc-media--tile .sc-media__ch {
	font-size: 28px;
}

.sc-media--rail .sc-media__ch {
	font-size: 15px;
}

.sc-empty {
	padding: 16px;
	border: 1px dashed #d9d3c6;
	border-radius: 12px;
	font-size: 13px;
	color: #6b7280;
	text-align: center;
}

/* ------------------------------------------------------ کشوی تمامصفحه */

.sc-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
}

.sc-overlay[hidden] {
	display: none;
}

.sc-overlay__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 20, 0.42);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s var(--sc-ease, ease);
}

.sc-overlay.is-open .sc-overlay__scrim {
	opacity: 1;
}

.sc-overlay__sheet {
	position: relative;
	margin-block: auto;
	background: #fff;
	box-shadow: 0 -10px 60px -20px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
	will-change: transform;
}

.sc-overlay__sheet .sc {
	height: 100%;
	border-radius: 0;
	flex: 1;
	min-height: 0;
}

.sc-overlay__grip {
	display: none;
}

/* کشوی کناری — جهت اسلاید بر اساس dir محاسبه میشود */

.sc-overlay--end .sc-overlay__sheet,
.sc-overlay--start .sc-overlay__sheet {
	width: min(440px, 92vw);
	height: 100%;
	margin-block: 0;
	opacity: 0;
}

/*
 * روی دسکتاپ کشو مثل یک «مگا پنل» پهن باز میشود تا سه سطح دستهبندی
 * واقعاً جا شوند. زیر ۶۴۰px قوانین شیت پایینیِ موبایل (که ویژگی سلکتور
 * بالاتری دارند) دستنخورده باقی میمانند.
 */
@media (min-width: 1000px) {
	.sc-overlay--end .sc-overlay__sheet,
	.sc-overlay--start .sc-overlay__sheet {
		width: min(1060px, 92vw);
	}
}

@media (min-width: 760px) and (max-width: 999px) {
	.sc-overlay--end .sc-overlay__sheet,
	.sc-overlay--start .sc-overlay__sheet {
		width: min(680px, 92vw);
	}
}

.sc-overlay--end .sc-overlay__sheet {
	margin-inline-start: auto;
}

.sc-overlay--start .sc-overlay__sheet {
	margin-inline-end: auto;
}

/* لبهی پایانی: در RTL سمت چپ، در LTR سمت راست. */
.sc-overlay--end[dir="rtl"] .sc-overlay__sheet {
	transform: translateX(-100%);
}

.sc-overlay--end[dir="ltr"] .sc-overlay__sheet {
	transform: translateX(100%);
}

/* لبهی آغازین: برعکس. */
.sc-overlay--start[dir="rtl"] .sc-overlay__sheet {
	transform: translateX(100%);
}

.sc-overlay--start[dir="ltr"] .sc-overlay__sheet {
	transform: translateX(-100%);
}

.sc-overlay.is-open .sc-overlay__sheet {
	transform: none;
	opacity: 1;
}

/* حالت تمامصفحه */

.sc-overlay--full .sc-overlay__sheet {
	width: 100%;
	height: 100%;
	margin: 0;
	transform: scale(0.97);
	opacity: 0;
}

/* روی موبایل همیشه ورق پایینکشویی */

@media (max-width: 640px) {
	/* ویژگی سلکتور عمداً برابر قوانین جهتدار بالاست تا با ترتیب منبع برنده شود. */
	.sc-overlay[dir] .sc-overlay__sheet {
		width: 100%;
		height: min(88dvh, 88vh);
		margin-block: auto 0;
		margin-inline: 0;
		border-start-start-radius: 20px;
		border-start-end-radius: 20px;
		transform: translateY(100%);
		opacity: 1;
	}

	.sc-overlay[dir].is-open .sc-overlay__sheet {
		transform: none;
	}

	.sc-overlay__grip {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background: #d8d3c8;
		margin: 8px auto 0;
		flex: none;
	}
}

/* --------------------------------------------------------- دکمهی شناور */

.sc-fab {
	position: fixed;
	z-index: 999990;
	bottom: max(18px, env(safe-area-inset-bottom));
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding-inline: 16px;
	border-radius: 999px;
	color: #fff;
	background: #1f4d3a;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
	font-size: 13px;
	font-weight: 700;
	/* از خصوصیت مستقل scale استفاده میکنیم تا با translateX مرکزچین تداخل نکند. */
	transition: translate 0.24s cubic-bezier(0.16, 1, 0.3, 1), scale 0.18s ease, box-shadow 0.24s ease;
	animation: sc-fab-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* وقتی کشو باز است، دکمهی شناور خودمان هم کنار میرود. */
body.sc-locked .sc-fab {
	opacity: 0;
	scale: 0.85;
	pointer-events: none;
	transition: opacity 0.18s ease, scale 0.18s ease;
}

.sc-fab:hover {
	translate: 0 -3px;
	box-shadow: 0 18px 38px -12px rgba(0, 0, 0, 0.6);
}

.sc-fab:active {
	scale: 0.96;
}

.sc-fab--bottom-start {
	inset-inline-start: 18px;
}

.sc-fab--bottom-end {
	inset-inline-end: 18px;
}

.sc-fab--bottom-center {
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

.sc-fab .sc-i {
	width: 18px;
	height: 18px;
}

body.sc-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------ دسکتاپ */

/*
 * از اینجا به بعد بر اساس عرضِ خودِ ویجت است، نه عرض پنجره.
 * مرورگرهای بدون پشتیبانی @container همان چیدمان موبایل را میگیرند که
 * در هر عرضی سالم است.
 */

/* ویجت جا دارد: ریل افقی میشود. */
@container sc (min-width: 560px) {
	/* توجه: کانتینر نمیتواند خودش را استایل کند، پس متغیرها روی .sc-body مینشینند. */
	.sc-body {
		--sc-rail-w: 176px;
		--sc-cols: 4;
	}

	.sc-rail__item {
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		padding: 10px 14px;
		text-align: start;
	}

	.sc-rail__label {
		font-size: 13px;
	}

	.sc-media--rail {
		width: 30px;
		height: 30px;
	}

	.sc-tile__label {
		font-size: 13px;
	}

	.sc-grid[data-state="strip"] .sc-tile {
		width: 78px;
	}
}

/* ------------------------------------------- چیدمان پهنِ دسکتاپ */

@container sc (min-width: 820px) {
	.sc-body {
		--sc-rail-w: 248px;
		--sc-cols: 4;
	}

	.sc-drawer__title {
		padding: 20px 26px 6px;
		font-size: 19px;
	}

	.sc-rail {
		padding-block: 10px;
	}

	.sc-rail__item {
		gap: 12px;
		padding: 12px 18px;
	}

	.sc-rail__label {
		font-size: 14px;
		/* در این عرض دیگر لازم نیست نام دسته دو خط شود. */
		word-break: normal;
	}

	.sc-media--rail {
		width: 38px;
		height: 38px;
	}

	.sc-pane {
		padding: 18px 26px 32px;
	}

	.sc-all {
		padding: 14px 16px;
		margin-bottom: 18px;
		font-size: 14px;
		border-radius: 14px;
	}

	.sc-tile__label {
		font-size: 14px;
	}

	.sc-grid[data-state="strip"] .sc-tile {
		width: 96px;
	}

	.sc-third__all {
		padding: 13px 16px;
		margin-bottom: 16px;
		font-size: 14px;
	}

	/* نوار افقی برندها لبهی پنل را میبُرید؛ اینجا جا هست پس میپیچد. */
	.sc-brands__row {
		flex-wrap: wrap;
		overflow-x: visible;
	}

	.sc-brands__title {
		font-size: 13px;
	}
}

@container sc (min-width: 1000px) {
	.sc-body {
		--sc-cols: 5;
	}
}

/* -------------------------------------------------------- انیمیشنها */

@keyframes sc-rise {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sc-slide-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sc-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes sc-fab-in {
	from {
		opacity: 0;
		scale: 0.8;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes sc-pane-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* احترام به تنظیم «کاهش حرکت» سیستمعامل */

@media (prefers-reduced-motion: reduce) {
	.sc *,
	.sc-overlay *,
	.sc-fab {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
.cvs-color-label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.cvs-swatch-list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cvs-swatch-item {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	text-decoration: none;
	flex-shrink: 0;
	transition: opacity .2s ease, border-color .2s ease, padding .2s ease;
}

.cvs-swatch-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.cvs-swatch-color {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: inherit;
}

.cvs-swatch-fallback {
	font-size: 12px;
	color: #999;
}
/**
 * استایل سمت کاربر — موبایلاول، RTL.
 * فونت MyVazirmatn روی هاست تعریف شده است و اینجا فقط فراخوانی میشود.
 */

.sam-widget,
.sam-archive {
	--sam-header-bg: #12301f;
	--sam-header-text: #ffffff;
	--sam-badge-bg: #e5384a;
	--sam-timer-bg: #e0562d;
	--sam-badge-text: #ffffff;
	--sam-price: #1f7a4d;
	--sam-card-bg: #ffffff;
	--sam-surface: #ffffff;
	--sam-radius: 16px;
	--sam-muted: #8a8f8c;
	--sam-line: #eceeed;
	--sam-ink: #16211b;

	direction: rtl;
	font-family: "MyVazirmatn", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--sam-ink);
	box-sizing: border-box;
}

.sam-widget *,
.sam-archive * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- ویجت */

.sam-widget {
	background: var(--sam-header-bg);
	border-radius: var(--sam-radius);
	padding: 12px;
	margin: 16px 0;
	overflow: hidden;
}

.sam-widget__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 4px 12px;
	color: var(--sam-header-text);
}

.sam-widget__brand {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sam-widget__icon {
	font-size: 18px;
	line-height: 1;
	color: var(--sam-timer-bg);
	font-weight: 700;
}

.sam-widget__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--sam-header-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sam-timer {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-inline-start: 6px;
	direction: rtl;
}

.sam-timer__box {
	background: var(--sam-timer-bg);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 6px;
	border-radius: 6px;
	min-width: 26px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sam-timer__sep {
	color: var(--sam-header-text);
	opacity: 0.7;
	font-size: 12px;
}

.sam-widget__all {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--sam-header-text);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 5px 10px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.sam-widget__all:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--sam-header-text);
}

.sam-widget__all svg {
	width: 14px;
	height: 14px;
}

.sam-widget__body {
	background: var(--sam-surface);
	border-radius: calc(var(--sam-radius) - 2px);
	padding: 10px 8px 8px;
}

.sam-track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-bottom: 6px;
}

.sam-track::-webkit-scrollbar {
	display: none;
}

/* ---------------------------------------------------------------- کارت */

.sam-card {
	flex: 0 0 auto;
	width: 43vw;
	max-width: 168px;
	display: flex;
	flex-direction: column;
	background: var(--sam-card-bg);
	border-radius: 12px;
	padding: 6px;
	text-decoration: none;
	color: inherit;
	border: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.sam-card:hover {
	border-color: var(--sam-line);
	color: inherit;
}

.sam-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #f6f7f6;
}

/* قاب همیشه مربع است و عکس کل آن را پر میکند؛ عکس غیرمربعی زوم/برش میخورد.
   absolute + !important تا height:auto / max-width قالب زیر عکس حاشیه نسازد. */
.sam-card__media .sam-card__img,
.sam-card__media img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: cover;
	object-position: center;
	display: block;
}

.sam-card__title {
	margin: 8px 2px 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--sam-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.4em;
}

.sam-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 0 2px 2px;
}

.sam-card__badge {
	background: var(--sam-badge-bg);
	color: var(--sam-badge-text);
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 8px;
	line-height: 1.4;
	flex: 0 0 auto;
}

.sam-card__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	min-width: 0;
}

.sam-card__old {
	color: var(--sam-muted);
	font-size: 11px;
	text-decoration: line-through;
}

.sam-card__price {
	color: var(--sam-price);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.sam-card__cur {
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	margin-inline-start: 2px;
}

/* ------------------------------------------------- اسلاید «مشاهده همه» */

.sam-slide-all {
	flex: 0 0 auto;
	width: 43vw;
	max-width: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	color: var(--sam-badge-bg);
}

.sam-slide-all__circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sam-slide-all__circle svg {
	width: 22px;
	height: 22px;
}

.sam-slide-all__text {
	font-size: 12px;
	font-weight: 700;
}

/* ---------------------------------------------------- نوار پیشرفت اسکرول */

.sam-progress {
	height: 3px;
	background: var(--sam-line);
	border-radius: 999px;
	overflow: hidden;
	margin: 4px 6px 2px;
}

.sam-progress__bar {
	display: block;
	height: 100%;
	width: 20%;
	background: var(--sam-price);
	border-radius: 999px;
	will-change: transform;
}

/* ------------------------------------------------------- صفحهی آرشیو */

.sam-archive {
	padding: 8px 0 32px;
}

.sam-archive__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.sam-archive__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.sam-archive__count {
	font-size: 12px;
	color: var(--sam-muted);
}

.sam-filters {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--sam-surface);
	padding: 8px 0;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--sam-line);
}

.sam-filters__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	align-items: center;
}

.sam-filters__row::-webkit-scrollbar {
	display: none;
}

.sam-filter {
	position: relative;
	flex: 0 0 auto;
}

.sam-filter__toggle {
	list-style: none;
	cursor: pointer;
	border: 1px solid var(--sam-line);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #fff;
}

.sam-filter__toggle::-webkit-details-marker {
	display: none;
}

.sam-filter[open] > .sam-filter__toggle {
	border-color: var(--sam-price);
	color: var(--sam-price);
}

.sam-filter__count {
	background: var(--sam-price);
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	padding: 1px 6px;
}

.sam-filter__panel {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 6px);
	z-index: 10;
	background: #fff;
	border: 1px solid var(--sam-line);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: 8px;
	min-width: 200px;
	max-height: 260px;
	overflow-y: auto;
}

.sam-filter__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	font-size: 13px;
	cursor: pointer;
	border-radius: 8px;
}

.sam-filter__item:hover {
	background: #f6f7f6;
}

.sam-sort {
	flex: 0 0 auto;
	border: 1px solid var(--sam-line);
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 12px;
	font-family: inherit;
	background: #fff;
	cursor: pointer;
}

.sam-filters__reset {
	flex: 0 0 auto;
	border: none;
	background: none;
	color: var(--sam-badge-bg);
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
}

.sam-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sam-grid .sam-card {
	width: auto;
	max-width: none;
	border: 1px solid var(--sam-line);
}

.sam-archive__foot {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.sam-more {
	border: 1px solid var(--sam-price);
	background: #fff;
	color: var(--sam-price);
	border-radius: 999px;
	padding: 10px 26px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sam-more:hover {
	background: var(--sam-price);
	color: #fff;
}

.sam-more[disabled] {
	opacity: 0.6;
	cursor: default;
}

.sam-empty {
	color: var(--sam-muted);
	font-size: 13px;
	text-align: center;
}

.sam-is-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* ------------------------------------------------------------ دسکتاپ */

@media (min-width: 600px) {
	.sam-widget {
		padding: 16px;
	}

	.sam-widget__title {
		font-size: 17px;
	}

	.sam-timer__box {
		font-size: 13px;
		min-width: 30px;
		padding: 6px 8px;
	}

	.sam-card,
	.sam-slide-all {
		width: 30vw;
		max-width: 190px;
	}

	.sam-card__title {
		font-size: 13px;
	}

	.sam-card__price {
		font-size: 14px;
	}

	.sam-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.sam-archive__title {
		font-size: 22px;
	}
}

@media (min-width: 992px) {
	.sam-widget__body {
		padding: 14px 12px 10px;
	}

	.sam-card,
	.sam-slide-all {
		width: 200px;
		max-width: 200px;
	}

	.sam-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sam-track {
		gap: 10px;
	}
}

/* ------------------------- جمعوجورسازی فیلترها و هماهنگی دکمهها با تم سایت */

.sam-filters__row {
	flex-wrap: wrap;
	row-gap: 8px;
}

.sam-archive .sam-filter__toggle,
.sam-archive .sam-sort {
	width: auto !important;
	min-width: 0 !important;
	max-width: none;
	height: auto !important;
	min-height: 0 !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	line-height: 1.7 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.sam-archive .sam-more {
	background: var(--sam-header-bg) !important;
	border: 1px solid var(--sam-header-bg) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 10px 30px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.sam-archive .sam-more:hover {
	filter: brightness(1.15);
	color: #fff !important;
}

.sam-archive .sam-filters__reset {
	border: 1px solid var(--sam-line) !important;
	background: #fff !important;
	color: var(--sam-header-bg) !important;
	border-radius: 999px !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.7 !important;
	box-shadow: none !important;
}

.sam-archive .sam-filters__reset:hover {
	background: #f4f6f5 !important;
}
/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.5.1
	Stable tag: 3.5.1
	Requires at least: 6.0
	Tested up to: 7.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/
/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Description: Child theme for Hello Elementor
Version: 1.0
*/

/* Your custom styles will go here */

body {
    direction: rtl;
    text-align: right;
}


/* =========================================
   Yoast FAQ Accordion Styles
   ========================================= */

/* Container styling */
.wp-block-yoast-faq-block {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* The Question (Header) */
.schema-faq-section .schema-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    font-size: 16px;
    color: #1a202c;
    transition: background-color 0.2s ease;
    direction: rtl;
    text-align: right;
}

.schema-faq-section .schema-faq-question:hover {
    background-color: #f8fafc;
}

/* Remove border from the last question if closed */
.schema-faq-section:last-child .schema-faq-question {
    border-bottom: none;
}

/* The Icon (Chevron/Plus) */
.schema-faq-section .schema-faq-question::after {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 15px; 
    font-size: 20px;
    font-weight: 300;
    color: #718096;
    transition: transform 0.3s ease;
}

/* The Answer (Hidden by default) */
.schema-faq-section .schema-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    margin: 0;
    opacity: 0;
    background-color: #fff;
    color: #4a5568;
    line-height: 1.6;
    transition: all 0.3s ease-out;
    direction: rtl;
    text-align: right;
}

/* --- ACTIVE STATE --- */

/* Rotate icon */
.schema-faq-section.active .schema-faq-question::after {
    transform: rotate(45deg);
    color: #000;
}

/* Show answer */
.schema-faq-section.active .schema-faq-answer {
    max-height: 1000px; /* Allows expansion */
    opacity: 1;
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid #f1f5f9;
}html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}[tabindex]:not([tabindex="-1"]):focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000;outline-offset:2px}[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){box-shadow:none;outline:none}
.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw;overflow-x:hidden;width:100vw}.alignfull img{width:100%}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{display:block;position:relative}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{margin:50px auto;max-width:500px}.post-password-form p{align-items:flex-end;display:flex;width:100%}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#eee;clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{max-height:500px;-o-object-fit:cover;object-fit:cover;width:100%}@media(max-width:991px){.post .wp-post-image{max-height:400px}}@media(max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{font-size:.9em;list-style:none;margin:0;padding:0}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{border-block-end:1px solid #ccc;display:flex;flex-direction:column;padding-block-end:30px;padding-block-start:30px;padding-inline-end:0;padding-inline-start:60px}#comments .comment .avatar,#comments .pingback .avatar{border-radius:50%;left:0;margin-inline-end:10px;position:absolute}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{list-style:none;margin:0;padding-inline-start:30px;position:relative}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{content:"↪";display:inline-block;font-size:1em;font-weight:400;left:0;line-height:1;position:absolute;top:45px;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media(min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media(max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{float:left;position:inherit}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{margin-inline-end:auto;margin-inline-start:auto;width:100%}@custom-media --hello-screen-xs-and-below (width < 576px);@custom-media --hello-screen-xs-and-above (width >= 576px);@custom-media --hello-screen-xs-only (0 <= width < 576px);@custom-media --hello-screen-sm-and-below (width < 768px);@custom-media --hello-screen-sm-and-above (width >= 768px);@custom-media --hello-screen-sm-only (576px <= width < 768px);@custom-media --hello-screen-md-and-below (width < 992px);@custom-media --hello-screen-md-and-above (width >= 992px);@custom-media --hello-screen-md-only (768px <= width < 992px);@custom-media --hello-screen-xl-and-below (width < 1200px);@custom-media --hello-screen-xl-and-above (width >= 1200px);@custom-media --hello-screen-xl-only (992px <= width < 1200px);@media(max-width:575px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{padding-inline-end:10px;padding-inline-start:10px}}@media(min-width:576px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media(min-width:768px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:992px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media(min-width:1200px){.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header),body:not([class*=elementor-page-]) .site-main{max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)}
@font-face{ font-display:swap;
    font-family: "IRANYekanWeb";
    src: url("/wp-content/plugins/buy-with-digikala/assets/public/fonts/IRANYekanWebRegular.woff")
 }

.digikala-box {
    background-color: #fff1f1;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.digikala-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 960px;
}

.digikala-logo {
    width: 36px;
    height: 36px;
}

.digikala-text {
    flex: 1;
    min-width: 200px;
    font-size: 14px;
    color: #333;
    direction: rtl;
}

.digikala-text strong {
    display: block;
    font-weight: bold;
    color: #000;
    margin-bottom: 4px;
}

.bwdk-button {
    background-color: #DA1E28;
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.arrow {
    font-size: 18px;
}

.separator {
    text-align: center;
    color: #999;
    margin: 16px 0;
    position: relative;
    font-size: 18px;
}

.separator::before,
.separator::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #ccc;
}

.separator::before {
    right: 50%;
    margin-right: 10px;
}

.separator::after {
    left: 50%;
    margin-left: 10px;
}
.digikala-box-before-header {
    background: #ED1944;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    position: relative;
    z-index: 999;
}
.dg-kala-content {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.digikala-box-after-addToCart {
    background: #FFF1F1;
    border-radius: 15px;
    padding: 10px;
    margin: 10px 0;
    cursor: pointer;
}
.dk-content-sp {
    display: flex;
    align-items: center;
    gap: 15px;
}
.title-dk-call {
    display: flex;
    color: #EF365C;
    font-size: 14px;
    font-weight: 700;
}
span.sub-dk-call {
    color: #262626;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.dk-callToAction {
    display: grid;
    gap: 6px;
}
.digikala-modal-sp {
    position: fixed;
    top: 50%;
    right: 50%;
    background: #fff;
    width: 80%;
    max-width: 540px;
    z-index: 1001;
    min-height: 600px;
    transform: translate(50%, -50%);
    padding: 55px 15px 15px 15px;
    border-radius: 10px;
    max-height: 90%;
}

.dk-mask {
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100vw;
    height:100vh;
}
.img-modal-sp {
    background: #FFF1F1;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    margin-bottom: 7%;
    border: 1px solid #FFD7D9;
}
.title-modal-sp {
    font-size: 14px;
    color: #262626;
    font-weight: 600;
    margin-bottom: 7%;
    display: block;
}
.desc-digikala-modal-sp img{
    max-width:30px
}
.desc-digikala-modal-sp span{
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.desc-digikala-modal-sp p{
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    text-align: justify;
}

.desc-digikala-modal-sp {
    margin-bottom: 5%;
}
.digikala-modal-sp button{
    background: #FA4D56;
    color: #fff;
    font-size: 14px;
    border: none;
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
}
.desc-digikala-modal-sp a{
    color: #0F62FE;
    font-size: 14px;
    margin-top: 4%;
    display: block;
    text-align: left;
}

i.close-modal-sp {
    font-size: 16px;
    color: #262626;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 10px;
    cursor: pointer;
}
.dk-mask,
.digikala-modal-sp{
    display:none;
}
.digikala-box-before-ct {
    background: #FFF1F1;
    padding: 25px 15px 17px;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #DA1E280A;
    position: relative;
    overflow: hidden;
}
/* .digikala-box-before-ct:after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    content: '';
    background: #DA1E28;
    transition: transform .3s;
    right: auto;
    bottom: auto;
    width: 140%;
    height: 100%;
    transform-origin: left top;
    transform: skewX(-30deg) scale(1, 1);
}
.digikala-box-before-ct.active:after{
    right: auto;
    bottom: auto;
    width: 140%;
    height: 100%;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
} */
.logo-digi-loader {
    position: absolute;
    z-index: 1;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    min-width: 75px;
    transition: 0.5s;
}
.digikala-box-before-ct.active .logo-digi-loader {
    right: -50%;
    opacity: 0;
}
.dk-content-before-ct {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}
.sub-dk-before-ct i{
    display:flex;
}
.dk-callToAction-before-ct {
    display: flex;
    gap: 15px;
    align-items: center;
    font-family: 'IRANYekanWeb';
}

.dk-content-before-ct .logo-digi{
    min-width: 48px;
    margin-bottom: 7px;
}
span.title-before-ct {
    font-size: 14px;
    font-weight: 700;
    color: #262626;
}
span.sub-dk-before-ct {
    color: #DA1E28;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-direction: row-reverse;
    position: relative;
}
a.bwdk-button {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400;
    min-width: 258px;
    justify-content: center;
}
a.bwdk-button i{
    display:flex;
}
.woocommerce-info {
    font-family: "IRANYekanWeb";
}
.wrap-sub-dk-before-ct {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    position:relative;
    margin: 8px 0;
}

.wrap-sub-dk-before-ct > .sub-dk-before-ct:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 16px;
    opacity: 1;
    border-radius: 20px;
    background: #0000001F;
    position: absolute;
    left: 0;
    top: 5px;

}
.dg-kala-content .anim-text span{
    display: block;
    font-size: 24px;
    font-weight: 900;
}
.wrap-anim-text {
    height: 40px !important;
    overflow: hidden;
}
.anim-text{
    text-align: center;
}
.digikala-badge-cardPd {
    font-family: 'IRANYekanWeb';
    background: rgba(246, 246, 246, 1);
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(82, 82, 82, 1);
    width: 120px;

}
.auth-divider {
    align-items: center;
    display: flex;
    margin: 20px 0;
}
.auth-line {
    background: #C6C6C6;
    flex-grow: 1;
    height: 1px;
}
.auth-or {
    color: #6F6F6F;
    font-size: 20px;
    padding: 0 10px;
}
.woocommerce_before_shop_loop_item.digikala-badge-cardPd{
    position: absolute;
    z-index: 100;
    margin: 10px;
    left: 0;
}
.digikala-badge-cardPd img{
    max-width:16px !important;
}
.pdp-anim-text{
    height: 20px ;
    overflow: hidden;
    z-index: 100;


}
.wrap-pdp-anim-text{
    position: absolute;
    left: 15px;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    top: 15px;
    z-index: 999;
}
*:has(.wrap-pdp-anim-text) {
    position: relative;
}


.pdp-anim-text .anim-text span{
    display: block;
    font-size: 14px;
    font-weight: 900;
    color:rgba(237, 25, 68, 1);
    text-align: center;
    height:20px;
}
.anim-text img{
    max-width:30px !important;
    height:20px !important;
    text-align: center;
    margin:auto
}
.wrap-bwdk-error {
    position: fixed;
    top: 50%;
    right: 50%;
    background: rgba(255, 240, 247, 1);
    z-index: 9999;
    border: 2px solid rgba(218, 30, 40, 1);
    padding: 15px;
    border-radius: 8px;
    transform: translate(50%, -50%);
    width: 90%;
    max-width: 400px;
    display: none;
}
#bwdk-error {
    font-size: 14px;
    color: rgba(38, 38, 38, 1);
    line-height: 2;
    position:relative;
}
.wrap-bwdk-error span{
    color: rgba(0, 67, 206, 1);
    display: block;
    text-align: left;
    cursor: pointer;
}
#bwdk-error:before{
    content: "!";
    width: 16px;
    display: inline-flex;
    background: rgba(218, 30, 40, 1);
    height: 16px;
    color: #fff;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    border-radius: 50%;
    line-height: 30px;
    margin-left: 10px;
}
.anim-text{
    text-align: center;
}
.onsale-image {
    position: absolute;
    top: 15px !important;
    right: unset !important;
    z-index: 1;
    left: 15px;
}
.digikala-addToCart-pop {
    background: rgba(255, 241, 241, 1);
    border-radius: 5px;
    margin: 5px 0;
    padding: 10px;
}
.dg-kala-addToCart-pop {
    color: rgba(237, 25, 68, 1);
    font-size: 12px;
    font-weight: 900;
    display: flex;
    gap: 5px;
}
.dg-kala-addToCart-pop .anim-text span{
    display:block;
    height: 20px;
}
.wrap-anim-text-addToCart-pop {
    height: 20px !important;
    overflow: hidden;
}
.dg-kala-addToCart-pop img{
    max-width:22px;
    margin-left: 5px;
}
.pdp-anim-text,
.digikala-addToCart-pop,
.digikala-box-before-ct,
.digikala-box-after-addToCart,
.digikala-box-before-header {
    font-family: "IRANYekanWeb";
}

@media screen and (max-width: 480px) {
    .dk-content-before-ct {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }
    .dk-callToAction-before-ct {
        flex-direction: column;
        gap: 5px;
    }
    a.bwdk-button {
        margin-right: unset;
        width: 100%;
        justify-content: center;
    }
}

.order-estimate-box {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    background: #DEFBE6;
    padding: 10px;
    border-radius: 12px;
    margin: 15px 0 !important;
    font-size: 16px !important;
    font-family: "IRANYekanWeb" !important;
}

.order-estimate-box h3 {
    margin: 0 0 10px 0;
    font-size: 16px !important;
    font-weight: bold;
    color: #1e5f2c;
}

.order-estimate-box p {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.bwdk-woocommerce-order .woocommerce-thankyou-order-received{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    background: #DEFBE6;
    padding: 10px;
    border-radius: 12px;
    margin: 15px 0 !important;
    font-size: 16px !important;
    font-family: "IRANYekanWeb" !important;
}
.bwdk-woocommerce-order .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received span {
    color: #393939;
    font-size: 13px;
    line-height: 1.8;
}
ul.bwdk-woocommerce-order-overview.bwdk-woocommerce-thankyou-order-details.order_details {
    padding: 15px;
    border: 1px solid #E0E0E0;
    margin: 15px 0;
    list-style: none;
    border-radius: 12px;
    display: grid;
    gap: 10px;
    font-family: "IRANYekanWeb";
}
.bwdk-woocommerce-order-overview__payment-method,
.bwdk-woocommerce-order-overview__total,
.bwdk-woocommerce-order-overview__email,
.bwdk-woocommerce-order-overview__date,
.bwdk-woocommerce-order-overview__order {
    color: #525252;
    font-size: 15px;
    font-family: "IRANYekanWeb";
}
.bwdk-woocommerce-order-overview__payment-method strong,
.bwdk-woocommerce-order-overview__total strong,
.bwdk-woocommerce-order-overview__email strong,
.bwdk-woocommerce-order-overview__date strong,
.bwdk-woocommerce-order-overview__order strong {
    color: #262626;
}
.bwdk-woocommerce-column__title,
h2.bwdk-woocommerce-order-details__title {
    color: #525252;
    font-size: 15px;
    font-family: "IRANYekanWeb" !important;
}
.bwdk-woocommerce-customer-details address{
    padding: 15px;
    border: 1px solid #E0E0E0;
    margin: 15px 0;
    list-style: none;
    border-radius: 12px;
    font-family: "IRANYekanWeb";
    font-style: normal;
}
.bwdk-woocommerce-table .wc-item-meta{
    display: flex;
    list-style: none;
    padding: 0;
    gap:5px;
    margin: 8px 0 0;
}
.bwdk-woocommerce-table .wc-item-meta li{
    display: flex;
    gap: 3px;
}
.bwdk-woocommerce-table a{
    text-decoration: none;
}
table.bwdk-woocommerce-table th,
table.bwdk-woocommerce-table td {
    border: transparent
}
/*table.bwdk-woocommerce-table tbody>tr:nth-child(odd)>td, table.bwdk-woocommerce-table tbody>tr:nth-child(odd)>th {*/
/*    background-color: transparent;*/
/*}*/

table.bwdk-woocommerce-table tbody tr:hover>td, table.bwdk-woocommerce-table tbody tr:hover>th {
    background: #E0E0E0 !important;
}
table thead:first-child tr:first-child th {
    border-block-start: transparent;
}
table.bwdk-woocommerce-table thead:first-child tr:first-child th {
    border-block-start: transparent;
    border-right: transparent;
    border-left: transparent;
    background: #E0E0E0;
    border-radius: 12px;
}
table.bwdk-woocommerce-table tfoot th,
table.bwdk-woocommerce-table tfoot td,
table.bwdk-woocommerce-table tbody td {
    border-block-start: transparent;
    border-right: transparent;
    border-left: transparent;
    background: #e0e0e04d;
    border-radius: 12px;
    text-align: right;
}
table.bwdk-woocommerce-table.bwdk-woocommerce-table--order-details.shop_table.order_details {
    border-collapse: separate;
    border-spacing: 5px 5px;
}
table.bwdk-woocommerce-table a{
    color:#393939 !important
}
.related-modal-sp {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: center;
}
.related-modal-sp img{
    max-width:70px;
}
.bwdk-digikala img{
    max-width:110px;
}
.bwdk-digikala {
    width: 100%;
        padding: 20px 16px;
        border-radius: 16px;
        margin: 15px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(238, 238, 238, 1);
}
.bwdk-digikala strong{
    font-size: 14px;
    font-weight: 700;
    color: rgb(0, 0, 0);
    text-align: center;
    margin: 12px 0px 0px;
}
.bwdk-digikala p{
    font-size: 12px;
    font-weight: 400;
    color: rgb(82, 82, 82);
    text-align: center;
    margin: 8px 0px 0px;
}
.help-pop span{
    font-size: 16px;
    font-weight: 500;
    color: rgb(0, 0, 0);
    text-align: center;
}
.help-pop p{
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 0px;
    line-height: 22px;
    color: rgb(82, 82, 82);
    text-align: center;
}

.bwd-progress {
    position: relative;
    height: 100px;
    overflow: hidden;
    border-radius: 12px;
    margin: 24px auto;
    display: block;
}
.help-pop {
    margin-top: 24px;
    text-align: center;
}
.dk-modal {
    overflow-y: auto;
    height: 80vh;
    padding-left: 15px;
}
#bwdk-single-buy-form {
    position: relative;
    margin: 5px 0;
}

#bwdk-single-buy-form .bwdk-single-buy-button {
    background: #FA4D56;
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-size: 15px;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    display: flex    ;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.bwdk-single-buy-button img{
    max-width: 21px;
}


.bwdk-single-buy-button:disabled,
.bwdk-single-buy-button.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.bwdk-single-tip {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
    max-width: 420px;
    font-size: 14px;
    direction: rtl;
    font-family: "IRANYekanWeb";
    position: absolute;
    transform: translateY(calc(-100% - 60px));
}

.bwdk-single-tip-inner {
    padding: .75rem .9rem;
}

.bwdk-single-tip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.bwdk-single-tip-title {
    font-weight: 600;
    font-size: 14px;
    color: #262626;
}

.bwdk-single-tip-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
    color: #666;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bwdk-single-tip-close:hover {
    color: #000;
        background: #fff;
}

.bwdk-single-tip p {
    margin: 0;
    color: #525252;
    line-height: 1.6;
    font-size: 13px;
}

.bwdk-single-tip-footer {
    margin-top: .5rem;
    display: flex;
    justify-content: flex-end;
}

.bwdk-single-tip-ok {
    border-radius: 4px;
    background: #FA4D56;
    cursor: pointer;
    padding: .25rem .75rem;
    font-size: 13px;
    color: #fff;
    transition: all 0.2s ease;
}
.bwdk-single-tip:after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    background: #fff;
    right: 35px;
    bottom: -5px;
    transform: rotate(45deg);
    
}
.bwdk-single-tip-ok:hover {
    background: #FA4D56;
}
.bwdk-single-tip-title img{
    max-width: 20px;
    margin-left: 10px;
}

@media screen and (max-width: 576px) {
    .digikala-modal-sp {
        width: 95%;
    }
    .digikala-modal-sp {
        padding: 35px 10px 15px 0px;
    }
}


.hint {
    margin: 5px 0;
}
#bwdk-cart-widget{
    margin: 5px 0 !important;
} 
#bwdk-checkout-widget{
    margin: 5px 0 !important;
}

/* Delivery / store-pickup summary (thank-you + view order) */
.bwdk-delivery-box {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 15px;
    border-radius: 12px;
    margin: 15px 0 !important;
    font-family: "IRANYekanWeb" !important;
    direction: rtl;
    text-align: right;
}

.bwdk-delivery-box--pickup {
    background: #FFF7E6;
    border-color: #F4D48A;
}

.bwdk-delivery-box h3 {
    margin: 0 0 10px 0;
    font-size: 16px !important;
    font-weight: bold;
    color: #1e5f2c;
}

.bwdk-delivery-box--pickup h3 {
    color: #8A5A00;
}

.bwdk-delivery-box__lead {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.8;
    color: #616161;
}

.bwdk-delivery-box .bwdk-delivery-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.bwdk-delivery-box .bwdk-delivery-rows li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.9;
}

.bwdk-delivery-rows__key {
    color: #757575;
    flex: 0 0 auto;
}

.bwdk-delivery-rows__val {
    color: #303030;
    font-weight: bold;
    text-align: left;
}

.bwdk-delivery-rows__val.ltr {
    direction: ltr;
    unicode-bidi: embed;
}

.bwdk-delivery-rows__val a {
    color: inherit;
    text-decoration: none;
}

@media screen and (max-width: 480px) {
    .bwdk-delivery-box .bwdk-delivery-rows li {
        flex-direction: column;
        gap: 2px;
    }
    .bwdk-delivery-rows__val {
        text-align: right;
    }
    .bwdk-delivery-rows__val.ltr {
        text-align: left;
    }
}
/* ==========================================================================
   Stylish Home Page
   Mobile-first base (< 768px), then a tablet layer and a separate desktop
   layout (>= 1024px). Everything is scoped under .shp so the Elementor
   header/footer and other plugins are untouched.
   ========================================================================== */

main.shp {
	--shp-ink: #1a3a33;
	--shp-pine: #2c5f54;
	--shp-sage: #7fb89e;
	--shp-sage-soft: #e8f1ec;
	--shp-cream: #fbf2de;
	--shp-cream-soft: #fdf9f0;
	--shp-line: #e9e3d5;
	--shp-text: #22302c;
	--shp-muted: #5d6b65; /* ≥ 4.8:1 on every section background (WCAG AA) */
	--shp-hot: #c2410c;
	--shp-surface: #ffffff;
	--shp-media-bg: #f4f1ea;
	--shp-radius: 16px;
	--shp-radius-sm: 12px;
	--shp-gutter: 16px;
	--shp-gap: 10px;
	--shp-sec-space: 28px;
	--shp-card-w: 42vw;
	--shp-font: "MyVazirmatn", "Vazirmatn", Tahoma, sans-serif;

	direction: rtl;
	display: block;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px var(--shp-gutter) 8px;
	box-sizing: border-box;
	/* Full-bleed rails use negative margins; never let them widen the page. */
	overflow-x: hidden;
	overflow-x: clip;
	color: var(--shp-text);
	font-family: var(--shp-font);
	font-size: 14px;
	line-height: 1.8;
}

main.shp *,
main.shp *::before,
main.shp *::after {
	box-sizing: border-box;
}

main.shp h1,
main.shp h2,
main.shp h3,
main.shp p {
	margin: 0;
	font-family: var(--shp-font);
	letter-spacing: 0;
}

main.shp a {
	color: inherit;
	text-decoration: none;
}

main.shp ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

main.shp img {
	display: block;
	max-width: 100%;
	height: auto;
}

main.shp button {
	font-family: var(--shp-font);
}

main.shp :focus-visible {
	outline: 2px solid var(--shp-pine);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Guard against the theme reset (Hello: pink buttons/links) and the Elementor
   kit's global a/button styles, which would otherwise leak into our UI. */
main.shp a:hover,
main.shp a:focus,
main.shp a:active {
	color: inherit;
	text-decoration: none;
}

main.shp button {
	text-transform: none;
	box-shadow: none;
}

main.shp button:hover,
main.shp button:focus,
main.shp button:active {
	text-decoration: none;
}

main.shp .shp-chip:hover,
main.shp .shp-chip:focus {
	background: #fff;
	color: var(--shp-text);
}

main.shp .shp-chip.is-active,
main.shp .shp-chip.is-active:hover,
main.shp .shp-chip.is-active:focus {
	color: #fff;
	border-color: var(--shp-pine);
	background: var(--shp-pine);
}

main.shp .shp-hero__dot:hover,
main.shp .shp-hero__dot:focus {
	background: rgba(255, 255, 255, .85);
}

main.shp .shp-hero__dot.is-active:hover {
	background: #fff;
}

main.shp .shp-seo__more:hover,
main.shp .shp-seo__more:focus {
	color: var(--shp-ink);
	background: none;
}

main.shp .shp-rail__btn:focus {
	color: var(--shp-ink);
	background: #fff;
}

main.shp .shp-btn:hover,
main.shp .shp-btn:focus {
	color: #fff;
}

main.shp .shp-ico {
	width: 1em;
	height: 1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

main.shp .shp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

main.shp .shp-sec {
	margin: 0 0 var(--shp-sec-space);
}

/* The theme styles every button as display:inline-block, which beats the
   browser's [hidden] rule; without this, hidden controls (e.g. "ادامه مطلب"
   when the text is short) stay visible but do nothing. */
main.shp [hidden] {
	display: none !important;
}

main.shp .shp-sec[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------ Section head */

main.shp .shp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

main.shp .shp-head__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--shp-ink);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.5;
}

main.shp .shp-head__icon {
	display: inline-flex;
	color: var(--shp-pine);
	font-size: 20px;
}

main.shp .shp-head__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	padding: 5px 10px;
	color: var(--shp-pine);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	border: 1px solid var(--shp-line);
	border-radius: 10px;
	transition: background .18s, color .18s, border-color .18s;
}

main.shp .shp-head__all .shp-ico {
	font-size: 14px;
}

/* -------------------------------------------------------------------- Hero */

main.shp .shp-hero {
	display: grid;
	gap: var(--shp-gap);
	margin-bottom: 18px;
}

main.shp .shp-hero__slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--shp-radius);
	background: var(--shp-media-bg);
}

main.shp .shp-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

main.shp .shp-hero__track::-webkit-scrollbar {
	display: none;
}

main.shp .shp-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

main.shp .shp-hero__link,
main.shp .shp-hero__pic {
	display: block;
}

main.shp .shp-hero__img {
	width: 100%;
	height: auto;
}

main.shp .shp-hero__dots {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}

main.shp .shp-hero__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
	cursor: pointer;
	transition: width .2s, background .2s;
}

main.shp .shp-hero__dot.is-active {
	width: 20px;
	background: #fff;
}

main.shp .shp-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--shp-gap);
}

main.shp .shp-tile__link {
	position: relative;
	display: block;
	height: 100%;
	min-height: 128px;
	overflow: hidden;
	border-radius: var(--shp-radius-sm);
	background: var(--shp-media-bg);
	isolation: isolate;
}

main.shp .shp-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .5s ease;
	z-index: -1;
}

/* Tiles alone (no banner): nothing beside them to stretch to, so the image
   sets the height at its own ratio — shown whole, never cropped. */
main.shp .shp-hero:not(.has-slides) .shp-tile__link {
	height: auto;
	min-height: 0;
}

main.shp .shp-hero:not(.has-slides) .shp-tile__img {
	position: relative;
	display: block;
	height: auto !important;
}

main.shp .shp-tile__text {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding: 28px 12px 10px;
	color: #fff;
	background: linear-gradient(to top, rgba(18, 38, 33, .78), rgba(18, 38, 33, 0));
}

main.shp .shp-tile__title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.4;
}

main.shp .shp-tile__sub {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	opacity: .92;
}

/* ------------------------------------------------------------------- Intro */

main.shp .shp-intro {
	margin-bottom: 16px;
}

main.shp .shp-intro__h1 {
	color: var(--shp-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.6;
}

main.shp .shp-intro__tag {
	margin-top: 2px;
	color: var(--shp-muted);
	font-size: 13px;
	line-height: 1.8;
}

/* ------------------------------------------------------------------- Trust */

main.shp .shp-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
	padding: 10px 4px;
	border: 1px solid var(--shp-line);
	border-radius: var(--shp-radius);
	background: var(--shp-cream-soft);
}

main.shp .shp-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

main.shp .shp-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	color: var(--shp-pine);
	font-size: 20px;
	border-radius: 10px;
	background: var(--shp-sage-soft);
}

main.shp .shp-trust__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.5;
}

main.shp .shp-trust__txt strong {
	color: var(--shp-ink);
	font-size: 12.5px;
	font-weight: 800;
}

main.shp .shp-trust__txt strong {
	font-size: 11px;
	line-height: 1.5;
}

main.shp .shp-trust__txt span {
	display: none;
	color: var(--shp-muted);
	font-size: 11px;
}

/* ------------------------------------------------------------ Product rail */

main.shp .shp-rail {
	position: relative;
}

main.shp .shp-rail__track {
	display: flex;
	gap: var(--shp-gap);
	margin: 0 calc(var(--shp-gutter) * -1) !important;
	padding: 2px var(--shp-gutter) 6px !important;
	overflow-x: auto;
	overflow-y: hidden;
	/* Free momentum scrolling, like the reels and amazing strips. Mandatory snap
	   made each swipe jump to a card edge and felt unnatural. Arrow buttons
	   still animate via JS (scrollBy with behavior: smooth). */
	scroll-snap-type: none;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

main.shp .shp-rail__track::-webkit-scrollbar {
	display: none;
}

main.shp .shp-rail__btn {
	display: none;
}

/* ------------------------------------------------------------ Product card */

main.shp .shp-card {
	flex: 0 0 var(--shp-card-w);
	min-width: 0;
}

main.shp .shp-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 6px 6px 10px;
	border: 1px solid var(--shp-line);
	border-radius: var(--shp-radius);
	background: var(--shp-surface);
	transition: box-shadow .2s, border-color .2s, transform .2s;
}

main.shp .shp-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--shp-radius-sm);
	background: var(--shp-media-bg);
}

main.shp .shp-card__img,
main.shp .shp-card__img2 {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

main.shp .shp-card__img2 {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
}

main.shp .shp-card__title {
	display: -webkit-box;
	min-height: 3.2em;
	margin: 8px 4px 6px !important;
	overflow: hidden;
	color: var(--shp-text);
	font-size: 12.5px !important;
	font-weight: 600;
	line-height: 1.6 !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Price row (RTL): discount badge on the right, old + current price stacked on the left. */
main.shp .shp-card__price {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	margin-top: auto;
	padding: 0 4px;
	line-height: 1.5;
}

main.shp .shp-card__amounts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
	margin-inline-start: auto;
}

/* The shop's currency position puts "تومان" before the number, which renders it
   on the right in RTL. Force the symbol after the number (left) whatever the
   WooCommerce setting, with or without the <bdi> wrapper. */
main.shp .shp-card__price .woocommerce-Price-amount,
main.shp .shp-card__price .woocommerce-Price-amount > bdi {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	direction: rtl;
	white-space: nowrap;
}

main.shp .shp-card__price .woocommerce-Price-currencySymbol {
	order: 2;
}

/* The old price hides its symbol, so it needs no flex; inline-flex would also
   stop the <del> line-through from reaching the number. */
main.shp .shp-card__price del,
main.shp .shp-card__price del .woocommerce-Price-amount,
main.shp .shp-card__price del .woocommerce-Price-amount > bdi {
	display: inline;
	text-decoration: line-through;
	text-decoration-color: currentColor;
}

main.shp .shp-card__price ins {
	color: var(--shp-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	background: none;
}

main.shp .shp-card__price ins .woocommerce-Price-currencySymbol {
	font-size: 11px;
	font-weight: 500;
	color: var(--shp-muted);
}

main.shp .shp-card__price del {
	color: #6b7470; /* 4.8:1 on white — the old #a3aaa6 failed Lighthouse contrast */
	font-size: 11.5px;
}

main.shp .shp-card__price del .woocommerce-Price-currencySymbol {
	display: none;
}

main.shp .shp-card__off {
	flex: none;
	align-self: center;
	padding: 1px 8px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.8;
	border-radius: 99px;
	background: var(--shp-hot);
}

main.shp .shp-card__call {
	color: var(--shp-muted) !important;
	font-size: 12px !important;
}

main.shp .shp-card--more .shp-card__morelink {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	min-height: 200px;
	color: var(--shp-pine);
	font-size: 13px;
	font-weight: 800;
	border: 1px dashed var(--shp-sage);
	border-radius: var(--shp-radius);
	background: var(--shp-sage-soft);
}

main.shp .shp-card__moreicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	border-radius: 50%;
	background: #fff;
}

main.shp .shp-card--skeleton .shp-card__link {
	pointer-events: none;
}

main.shp .shp-card--skeleton .shp-card__media,
main.shp .shp-card--skeleton .shp-skel {
	background: linear-gradient(90deg, #f1eee7 25%, #f8f6f1 50%, #f1eee7 75%);
	background-size: 200% 100%;
	animation: shp-shimmer 1.2s infinite linear;
}

main.shp .shp-skel {
	display: block;
	height: 12px;
	margin: 10px 4px 0;
	border-radius: 6px;
}

main.shp .shp-skel--short {
	width: 55%;
	margin-right: auto;
}

@keyframes shp-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ----------------------------------------------------- Accent product row */

main.shp .shp-row--accent {
	margin-right: calc(var(--shp-gutter) * -1);
	margin-left: calc(var(--shp-gutter) * -1);
	padding: 18px var(--shp-gutter) 14px;
	background: var(--shp-ink);
}

main.shp .shp-row--accent .shp-head__title {
	color: #fff;
}

main.shp .shp-row--accent .shp-head__all {
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
}

main.shp .shp-row--accent .shp-card__link {
	border-color: transparent;
}

main.shp .shp-row--accent .shp-card--more .shp-card__morelink {
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .08);
}

/* -------------------------------------------------------------- Categories */

main.shp .shp-cats__list {
	display: flex;
	gap: 12px;
	margin: 0 calc(var(--shp-gutter) * -1) !important;
	padding: 2px var(--shp-gutter) 4px !important;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

main.shp .shp-cats__list::-webkit-scrollbar {
	display: none;
}

main.shp .shp-cat {
	flex: 0 0 74px;
}

main.shp .shp-cat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

main.shp .shp-cat__ring {
	display: block;
	width: 68px;
	height: 68px;
	overflow: hidden;
	border: 2px solid var(--shp-line);
	border-radius: 50%;
	background: var(--shp-cream-soft);
	transition: border-color .2s, transform .2s;
}

main.shp .shp-cat__img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

main.shp .shp-cat__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--shp-text);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* ------------------------------------------------------ Tabs / chip bar */

main.shp .shp-chips {
	display: flex;
	gap: 7px;
	margin: 0 calc(var(--shp-gutter) * -1) 12px;
	padding: 2px var(--shp-gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

main.shp .shp-chips::-webkit-scrollbar {
	display: none;
}

main.shp .shp-chip {
	flex: none;
	min-height: 36px;
	padding: 6px 14px;
	color: var(--shp-text);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	border: 1px solid var(--shp-line);
	border-radius: 99px;
	background: #fff;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

main.shp .shp-chip.is-active {
	color: #fff;
	border-color: var(--shp-pine);
	background: var(--shp-pine);
}

main.shp .shp-panel__bar {
	display: none;
}

/* ---------------------------------------------------------------- Seasonal */

main.shp .shp-season {
	margin-right: calc(var(--shp-gutter) * -1);
	margin-left: calc(var(--shp-gutter) * -1);
	padding: 18px var(--shp-gutter) 14px;
	background: linear-gradient(160deg, #eef5f7 0%, #f6faf8 60%, #eef6f1 100%);
}

main.shp .shp-season--summer {
	background: linear-gradient(160deg, #fdf3e1 0%, #fdf9f0 60%, #fbf2de 100%);
}

main.shp .shp-season--spring,
main.shp .shp-season--autumn {
	background: linear-gradient(160deg, var(--shp-sage-soft) 0%, var(--shp-cream-soft) 100%);
}

main.shp .shp-season__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

main.shp .shp-season__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	color: #fff;
	font-size: 22px;
	border-radius: 13px;
	background: var(--shp-pine);
}

main.shp .shp-season__eyebrow {
	color: var(--shp-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

main.shp .shp-season__title {
	color: var(--shp-ink);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
}

main.shp .shp-season .shp-card__link {
	border-color: transparent;
}

/* ----------------------------------------------------------------- Size-me */

main.shp .shp-sizeme__box {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: var(--shp-radius);
	background: var(--shp-cream);
}

main.shp .shp-sizeme__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--shp-pine);
	font-size: 26px;
	border-radius: 14px;
	background: #fff;
}

main.shp .shp-sizeme__txt h2 {
	color: var(--shp-ink);
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.5;
}

main.shp .shp-sizeme__txt p {
	color: var(--shp-muted);
	font-size: 12.5px;
	line-height: 1.7;
}

main.shp .shp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 18px;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 800;
	border-radius: 12px;
	background: var(--shp-ink);
	transition: background .18s;
}

main.shp .shp-sizeme .shp-btn {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------- SEO */

main.shp .shp-seo {
	padding: 18px;
	border: 1px solid var(--shp-line);
	border-radius: var(--shp-radius);
	background: var(--shp-cream-soft);
}

main.shp .shp-seo__title {
	margin-bottom: 8px !important;
	color: var(--shp-ink);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
}

main.shp .shp-seo__body {
	position: relative;
	color: var(--shp-muted);
	font-size: 13px;
	line-height: 2;
}

main.shp .shp-seo__body p + p {
	margin-top: 8px;
}

main.shp .shp-seo__body a {
	color: var(--shp-pine);
	text-decoration: underline;
	text-underline-offset: 3px;
}

main.shp .shp-seo__body.is-clamped {
	max-height: 7.8em;
	overflow: hidden;
}

main.shp .shp-seo__body.is-clamped::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3em;
	background: linear-gradient(to top, var(--shp-cream-soft), rgba(253, 249, 240, 0));
}

main.shp .shp-seo__more {
	margin-top: 6px;
	padding: 4px 0;
	color: var(--shp-pine);
	font-size: 13px;
	font-weight: 800;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Embedded plugin widgets: remove their outer spacing so our rhythm rules. */
main.shp .shp-reels .wcpv-reels {
	margin-bottom: 0;
}

main.shp .shp-amazing > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Phone & tablet: the amazing band runs edge to edge instead of sitting inside the page gutter. */
@media (max-width: 1023px) {
	main.shp .shp-amazing {
		margin-right: calc(var(--shp-gutter) * -1);
		margin-left: calc(var(--shp-gutter) * -1);
	}

	main.shp .shp-amazing > * {
		border-radius: 0 !important;
	}
}

/* ==========================================================================
   Tablet 768–1023
   ========================================================================== */

@media (min-width: 768px) {
	main.shp {
		--shp-gutter: 24px;
		--shp-gap: 14px;
		--shp-sec-space: 40px;
		--shp-card-w: calc((100% - 3 * 14px) / 4.3);
		padding-top: 20px;
	}

	main.shp .shp-tile__link {
		min-height: 170px;
	}

	main.shp .shp-intro__h1 {
		font-size: 22px;
	}

	main.shp .shp-trust__item {
		flex-direction: row;
		justify-content: center;
		gap: 10px;
		text-align: right;
	}

	main.shp .shp-trust__txt strong {
		font-size: 13px;
	}

	main.shp .shp-trust__txt span {
		display: block;
	}

	main.shp .shp-head__title {
		font-size: 20px;
	}

	main.shp .shp-cat {
		flex-basis: 96px;
	}

	main.shp .shp-cat__ring {
		width: 88px;
		height: 88px;
	}

	main.shp .shp-sizeme__box {
		grid-template-columns: auto 1fr auto;
		padding: 20px 24px;
	}

	main.shp .shp-sizeme .shp-btn {
		grid-column: auto;
	}

	main.shp .shp-season,
	main.shp .shp-row--accent {
		margin-right: 0;
		margin-left: 0;
		padding: 24px;
		border-radius: 22px;
	}

	main.shp .shp-season .shp-rail__track,
	main.shp .shp-row--accent .shp-rail__track,
	main.shp .shp-season .shp-chips {
		margin-right: -24px !important;
		margin-left: -24px !important;
		padding-right: 24px !important;
		padding-left: 24px !important;
	}
}

/* ==========================================================================
   Desktop >= 1024 — its own layout, not a stretched phone
   ========================================================================== */

@media (min-width: 1024px) {
	main.shp {
		--shp-gutter: 24px;
		--shp-gap: 16px;
		--shp-sec-space: 52px;
		padding-top: 24px;
		font-size: 15px;
	}

	/* Hero: slider two-thirds, category tiles stacked on the left third. */
	main.shp .shp-hero.has-tiles.has-slides {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: stretch;
	}

	main.shp .shp-hero__slider {
		border-radius: 20px;
	}

	main.shp .shp-hero.has-tiles.has-slides .shp-tiles {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}

	main.shp .shp-tile__link {
		min-height: 0;
		border-radius: 20px;
	}

	/* Tiles alone (no banner): roughly the size they had beside the banner. */
	main.shp .shp-hero:not(.has-slides) .shp-tiles {
		width: 100%;
		max-width: 960px;
		margin-inline: auto;
	}

	main.shp .shp-tile__text {
		padding: 40px 22px 18px;
	}

	main.shp .shp-tile__title {
		font-size: 24px;
	}

	main.shp .shp-tile__sub {
		font-size: 13px;
	}

	main.shp .shp-intro {
		max-width: 820px;
		margin: 8px auto 22px;
		text-align: center;
	}

	main.shp .shp-intro__h1 {
		font-size: 26px;
	}

	main.shp .shp-intro__tag {
		font-size: 15px;
	}

	/* Trust: a single calm bar with dividers. */
	main.shp .shp-trust__list {
		gap: 0;
		padding: 6px;
		border-radius: 20px;
	}

	main.shp .shp-trust__item {
		padding: 14px 16px;
	}

	main.shp .shp-trust__item + .shp-trust__item {
		border-right: 1px solid var(--shp-line);
	}

	main.shp .shp-trust__icon {
		width: 44px;
		height: 44px;
		font-size: 22px;
		border-radius: 12px;
	}

	main.shp .shp-trust__txt strong {
		font-size: 14px;
	}

	main.shp .shp-trust__txt span {
		font-size: 12.5px;
	}

	main.shp .shp-head {
		margin-bottom: 16px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--shp-line);
	}

	main.shp .shp-row--accent .shp-head {
		border-bottom-color: rgba(255, 255, 255, .14);
	}

	main.shp .shp-head__title {
		font-size: 22px;
	}

	main.shp .shp-head__all {
		padding: 6px 14px;
		font-size: 13.5px;
	}

	/* Rail: 6 cards per view, no bleed, arrow buttons. */
	main.shp .shp-rail__track,
	main.shp .shp-season .shp-rail__track,
	main.shp .shp-row--accent .shp-rail__track {
		--shp-card-w: calc((100% - 5 * 16px) / 6);
		margin: 0 !important;
		padding: 2px 0 8px !important;
		scroll-padding-inline: 0;
	}

	main.shp .shp-rail__btn {
		position: absolute;
		top: 38%;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		color: var(--shp-ink);
		font-size: 20px;
		border: 1px solid var(--shp-line);
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 6px 18px rgba(26, 58, 51, .12);
		cursor: pointer;
		transition: opacity .2s, transform .2s;
	}

	main.shp .shp-rail__btn[hidden] {
		display: none;
	}

	main.shp .shp-rail__btn--prev {
		right: -14px;
	}

	main.shp .shp-rail__btn--next {
		left: -14px;
	}

	main.shp .shp-card__link {
		padding: 8px 8px 12px;
	}

	main.shp .shp-card__title {
		font-size: 13.5px !important;
	}

	main.shp .shp-card__price ins {
		font-size: 15px;
	}

	/* Categories: always one row. Columns share the width evenly; when there are
	   more categories than fit (min 90px each) the row scrolls with the rail arrows. */
	main.shp .shp-cats__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(90px, 1fr);
		gap: 12px;
		margin: 0 !important;
		padding: 2px 0 6px !important;
		overflow-x: auto;
		overflow-y: hidden;
	}

	main.shp .shp-cat {
		min-width: 0;
	}

	main.shp .shp-cat__ring {
		width: min(100%, 104px);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	main.shp .shp-cat__name {
		font-size: 13px;
	}

	main.shp .shp-cats .shp-rail__btn {
		top: 30%;
	}

	/* Tabs: chips wrap on one line beside the heading. */
	main.shp .shp-chips {
		flex-wrap: wrap;
		margin: 0 0 16px !important;
		padding: 0 !important;
		overflow: visible;
	}

	main.shp .shp-chip {
		min-height: 38px;
		padding: 6px 16px;
		font-size: 13.5px;
	}

	main.shp .shp-panel__bar {
		display: flex;
		justify-content: flex-end;
		margin: -6px 0 12px;
	}

	main.shp .shp-season {
		padding: 28px 32px 22px;
		border-radius: 24px;
	}

	main.shp .shp-season .shp-chips {
		margin: 0 0 18px !important;
		padding: 0 !important;
	}

	main.shp .shp-season__title {
		font-size: 26px;
	}

	main.shp .shp-season__icon {
		width: 54px;
		height: 54px;
		font-size: 28px;
		border-radius: 16px;
	}

	main.shp .shp-row--accent {
		padding: 28px 32px 22px;
		border-radius: 24px;
	}

	main.shp .shp-sizeme__box {
		padding: 26px 32px;
		gap: 20px;
		border-radius: 24px;
	}

	main.shp .shp-sizeme__icon {
		width: 60px;
		height: 60px;
		font-size: 32px;
	}

	main.shp .shp-sizeme__txt h2 {
		font-size: 20px;
	}

	main.shp .shp-sizeme__txt p {
		font-size: 14px;
	}

	main.shp .shp-seo {
		padding: 28px 32px;
		border-radius: 24px;
	}

	main.shp .shp-seo__title {
		font-size: 19px;
	}

	main.shp .shp-seo__body {
		font-size: 14px;
	}
}

@media (min-width: 1280px) {
	main.shp .shp-rail__btn--prev {
		right: -21px;
	}

	main.shp .shp-rail__btn--next {
		left: -21px;
	}
}

/* ---------------------------------------------------- Hover (mouse only) */

@media (hover: hover) and (pointer: fine) {
	main.shp .shp-card__link:hover {
		border-color: var(--shp-sage);
		box-shadow: 0 10px 26px rgba(26, 58, 51, .10);
		transform: translateY(-2px);
	}

	main.shp .shp-card:hover .shp-card__img2 {
		opacity: 1;
	}

	main.shp .shp-tile__link:hover .shp-tile__img {
		transform: scale(1.04);
	}

	main.shp .shp-cat__link:hover .shp-cat__ring {
		border-color: var(--shp-sage);
		transform: translateY(-3px);
	}

	main.shp .shp-head__all:hover {
		color: #fff;
		border-color: var(--shp-pine);
		background: var(--shp-pine);
	}

	main.shp .shp-row--accent .shp-head__all:hover {
		color: var(--shp-ink);
		border-color: #fff;
		background: #fff;
	}

	main.shp .shp-chip:not(.is-active):hover {
		color: var(--shp-pine);
		border-color: var(--shp-pine);
	}

	main.shp .shp-btn:hover {
		background: var(--shp-pine);
	}

	main.shp .shp-rail__btn:hover {
		color: #fff;
		background: var(--shp-pine);
		border-color: var(--shp-pine);
	}
}

/* Mouse drag-to-scroll (see home.js initDrag). */
@media (hover: hover) and (pointer: fine) {
	main.shp .shp-can-drag {
		cursor: grab;
	}

	main.shp .shp-is-dragging,
	main.shp .shp-is-dragging * {
		cursor: grabbing !important;
		user-select: none;
	}

	main.shp .shp-is-dragging a,
	main.shp .shp-is-dragging button {
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	main.shp *,
	main.shp *::before,
	main.shp *::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}
@font-face{ 
  font-family: 'efaicons';
  src:  url('/wp-content/plugins/persian-elementor/includes/icons/efaicons/fonts/efaicons.eot?6xl4u9');
  src:  url('/wp-content/plugins/persian-elementor/includes/icons/efaicons/fonts/efaicons.eot?6xl4u9#iefix') format('embedded-opentype'),
    url('/wp-content/plugins/persian-elementor/includes/icons/efaicons/fonts/efaicons.ttf?6xl4u9') format('truetype'),
    url('/wp-content/plugins/persian-elementor/includes/icons/efaicons/fonts/efaicons.woff?6xl4u9') format('woff'),
    url('/wp-content/plugins/persian-elementor/includes/icons/efaicons/fonts/efaicons.svg?6xl4u9#efaicons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display:swap;
 }

[class^="efa-"], [class*=" efa-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'efaicons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.efa-rubika:before {
  content: "\e90b";
}
.efa-tamin:before {
  content: "\e900";
}
.efa-karafarin:before {
  content: "\e901";
}
.efa-postbank:before {
  content: "\e902";
}
.efa-keshavarzi:before {
  content: "\e903";
}
.efa-ayandeh:before {
  content: "\e904";
}
.efa-toseetaavon:before {
  content: "\e905";
}
.efa-resalat:before {
  content: "\e906";
}
.efa-sepah:before {
  content: "\e907";
}
.efa-post:before {
  content: "\e908";
}
.efa-blu:before {
  content: "\e909";
}
.efa-gap:before {
  content: "\e90a";
}
.efa-bisphone:before {
  content: "\e916";
}
.efa-EFA:before {
  content: "\e917";
}
.efa-Enbank:before {
  content: "\e918";
}
.efa-aparat:before {
  content: "\e919";
}
.efa-cloob:before {
  content: "\e91a";
}
.efa-dey:before {
  content: "\e91b";
}
.efa-gardeshgari:before {
  content: "\e91c";
}
.efa-Hekmat:before {
  content: "\e91d";
}
.efa-iranzamin:before {
  content: "\e91e";
}
.efa-ghavamin:before {
  content: "\e91f";
}
.efa-markazi:before {
  content: "\e920";
}
.efa-mehr:before {
  content: "\e921";
}
.efa-mellat:before {
  content: "\e922";
}
.efa-melli:before {
  content: "\e923";
}
.efa-parsian:before {
  content: "\e924";
}
.efa-refah:before {
  content: "\e925";
}
.efa-saderat:before {
  content: "\e926";
}
.efa-salehin:before {
  content: "\e927";
}
.efa-saman:before {
  content: "\e928";
}
.efa-sarmayeh:before {
  content: "\e929";
}
.efa-Mahak:before {
  content: "\e93e";
}
.efa-Maskan:before {
  content: "\e940";
}
.efa-MEBank:before {
  content: "\e941";
}
.efa-Mehreghtesad:before {
  content: "\e942";
}
.efa-Mehriran:before {
  content: "\e947";
}
.efa-eitaa:before {
  content: "\e97c";
}
.efa-soroush:before {
  content: "\e97d";
}
.efa-bale:before {
  content: "\e97e";
}
.efa-tejarat:before {
  content: "\e97f";
}
.efa-Pasargad:before {
  content: "\e99b";
}
.efa-PayamNoor:before {
  content: "\e99d";
}
.efa-SanatMadan:before {
  content: "\e9c7";
}
.efa-Shahr:before {
  content: "\e9d1";
}
.efa-Shetab:before {
  content: "\e9d3";
}
.efa-Sina:before {
  content: "\e9d4";
}
.efa-Tosse:before {
  content: "\ea09";
}
.efa-ZarinPal:before {
  content: "\ea12";
}
.efa-Afzal-toos:before {
  content: "\ea13";
}
.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}/**
 * Stylish OmniSearch — استایل نوار جستوجو و صفحهی نتایج.
 *
 * همهی رنگها و اندازهها از متغیر خوانده میشوند تا قالب سایت بتواند بدون ویرایش
 * این فایل بازنویسیشان کند. کافی است متغیرها را روی :root یا روی خودِ .sos-search
 * تعریف کنید.
 */

.sos-search,
.sos-results {
	/* پالت */
	--sos-pine: #1f3d32;
	--sos-pine-soft: #2c5546;
	--sos-cream: #f7f3ea;
	--sos-cream-deep: #efe8da;
	--sos-sage: #a8bfad;
	--sos-clay: #c87b5a;
	--sos-text: #1c2321;
	--sos-muted: #6b7573;
	--sos-faint: #9aa4a1;
	--sos-border: #e6e1d6;
	--sos-surface: #ffffff;

	/* شکل */
	--sos-radius: 16px;
	--sos-radius-sm: 11px;
	--sos-radius-pill: 999px;

	/* سایههای لایهای؛ یک سایهی تک همیشه مسطح بهنظر میرسد */
	--sos-shadow-sm: 0 1px 2px rgba(31, 61, 50, 0.06), 0 2px 6px rgba(31, 61, 50, 0.05);
	--sos-shadow-lg:
		0 2px 4px rgba(31, 61, 50, 0.04),
		0 8px 16px rgba(31, 61, 50, 0.07),
		0 24px 48px -12px rgba(31, 61, 50, 0.22);
	--sos-ring: 0 0 0 4px rgba(168, 191, 173, 0.3);

	--sos-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	direction: rtl;
	text-align: right;
	font-family: inherit;
	color: var(--sos-text);
	box-sizing: border-box;
}

.sos-search *,
.sos-results * {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.sos-search *,
	.sos-results * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------
 * نوار جستوجو
 * ------------------------------------------------------------------ */

.sos-search {
	position: relative;
	max-width: 560px;
	width: 100%;
}

.sos-search--full {
	max-width: 100%;
}

.sos-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--sos-surface);
	border: 1.5px solid var(--sos-border);
	border-radius: var(--sos-radius-pill);
	padding: 5px 6px 5px 20px;
	box-shadow: var(--sos-shadow-sm);
	transition: border-color 0.2s var(--sos-ease), box-shadow 0.2s var(--sos-ease);
}

.sos-search__form:hover {
	border-color: var(--sos-sage);
}

.sos-search.is-open .sos-search__form,
.sos-search__form:focus-within {
	border-color: var(--sos-sage);
	box-shadow: var(--sos-ring), var(--sos-shadow-sm);
}

.sos-search__icon {
	display: flex;
	color: var(--sos-faint);
	flex: 0 0 auto;
	transition: color 0.2s var(--sos-ease);
}

.sos-search__form:focus-within .sos-search__icon {
	color: var(--sos-pine);
}

.sos-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: inherit;
	padding: 11px 0;
	line-height: 1.4;
}

.sos-search__input::placeholder {
	color: var(--sos-faint);
	opacity: 1;
}

.sos-search__input::-webkit-search-cancel-button,
.sos-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.sos-search__clear {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--sos-cream);
	color: var(--sos-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s var(--sos-ease), color 0.15s var(--sos-ease);
}

.sos-search__clear:hover {
	background: var(--sos-cream-deep);
	color: var(--sos-text);
}

.sos-search__submit {
	flex: 0 0 auto;
	border: 0;
	border-radius: var(--sos-radius-pill);
	background: var(--sos-pine);
	color: var(--sos-cream);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 11px 24px;
	cursor: pointer;
	transition: background 0.18s var(--sos-ease), transform 0.12s var(--sos-ease);
}

.sos-search__submit:hover {
	background: var(--sos-pine-soft);
}

.sos-search__submit:active {
	transform: scale(0.97);
}

/* ---------------------------------------------------------------------
 * پنل نتایج زنده
 * ------------------------------------------------------------------ */

.sos-search__panel {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 10px);
	z-index: 9999;
	max-height: min(72vh, 560px);
	display: flex;
	flex-direction: column;
	background: var(--sos-surface);
	border: 1px solid var(--sos-border);
	border-radius: var(--sos-radius);
	box-shadow: var(--sos-shadow-lg);
	animation: sos-panel-in 0.18s var(--sos-ease);
}

/*
 * محتوای قابلاسکرول از دکمهی «مشاهدهی همه» جدا شده تا آن دکمه بهصورت
 * فوتر ثابت پایین کارت بماند و کاربر مجبور به اسکرولکردن تا انتها برای
 * دیدنش نباشد.
 */
.sos-panel__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--sos-border) transparent;
}

@keyframes sos-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sos-search__panel[hidden] {
	display: none;
}

.sos-panel__scroll::-webkit-scrollbar {
	width: 8px;
}

.sos-panel__scroll::-webkit-scrollbar-thumb {
	background: var(--sos-border);
	border-radius: 20px;
	border: 2px solid var(--sos-surface);
}

.sos-panel__footer {
	flex: 0 0 auto;
	padding: 8px;
	border-top: 1px solid var(--sos-border);
	background: var(--sos-surface);
	border-radius: 0 0 var(--sos-radius) var(--sos-radius);
}

.sos-panel__footer[hidden] {
	display: none;
}

.sos-panel__label {
	position: sticky;
	top: -6px;
	z-index: 1;
	background: var(--sos-surface);
	font-size: 11px;
	font-weight: 700;
	color: var(--sos-faint);
	padding: 12px 12px 7px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sos-panel__list,
.sos-panel__terms,
.sos-panel__suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* یک نتیجهی محصول */

.sos-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 8px 10px;
	border-radius: var(--sos-radius-sm);
	text-decoration: none;
	color: inherit;
	transition: background 0.14s var(--sos-ease);
}

.sos-item:hover,
.sos-item.is-active,
.sos-term:hover,
.sos-term.is-active,
.sos-suggestion:hover,
.sos-suggestion.is-active {
	background: var(--sos-cream);
}

.sos-item__media {
	position: relative;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: var(--sos-radius-sm);
	overflow: hidden;
	background: var(--sos-cream);
}

.sos-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s var(--sos-ease);
}

.sos-item:hover .sos-item__media img {
	transform: scale(1.07);
}

.sos-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sos-item__title {
	font-size: 14px;
	line-height: 1.55;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sos-item__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--sos-muted);
	flex-wrap: wrap;
}

.sos-item__price {
	color: var(--sos-pine);
	font-weight: 700;
}

.sos-item__price del {
	color: var(--sos-faint);
	font-weight: 400;
	font-size: 12px;
	margin-inline-start: 6px;
}

.sos-item__price ins {
	text-decoration: none;
}

.sos-item__stock {
	color: var(--sos-clay);
	font-size: 11px;
	font-weight: 600;
	background: rgba(200, 123, 90, 0.11);
	border-radius: var(--sos-radius-pill);
	padding: 2px 9px;
}

.sos-item--out .sos-item__media img {
	filter: grayscale(0.7);
	opacity: 0.7;
}

/* دستهبندی و برند */

.sos-term,
.sos-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--sos-radius-sm);
	text-decoration: none;
	color: inherit;
	font-size: 14px;
	transition: background 0.14s var(--sos-ease);
}

.sos-term::before,
.sos-suggestion::before {
	content: '';
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sos-cream) center / 14px no-repeat;
}

/* آیکن دستهبندی */
.sos-term::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5546' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

/* آیکن جستوجوی پیشنهادی */
.sos-suggestion::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7573' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
}

.sos-term__label,
.sos-suggestion__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sos-term__count {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--sos-muted);
	background: var(--sos-cream);
	border-radius: var(--sos-radius-pill);
	padding: 3px 10px;
}

/* دکمهی همهی نتایج */

.sos-panel__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px;
	border-radius: var(--sos-radius-sm);
	background: var(--sos-pine);
	color: var(--sos-cream);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.18s var(--sos-ease);
}

.sos-panel__all::after {
	content: '←';
	font-size: 16px;
	transition: transform 0.2s var(--sos-ease);
}

.sos-panel__all:hover,
.sos-panel__all.is-active {
	background: var(--sos-pine-soft);
	color: var(--sos-cream);
}

.sos-panel__all:hover::after,
.sos-panel__all.is-active::after {
	transform: translateX(-4px);
}

/* حالت خالی و بارگذاری */

.sos-panel__empty {
	padding: 34px 20px;
	text-align: center;
	color: var(--sos-muted);
	font-size: 14px;
}

.sos-panel__empty strong {
	display: block;
	color: var(--sos-text);
	font-size: 15px;
	margin-bottom: 6px;
}

.sos-skeleton {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px;
}

.sos-skeleton__box,
.sos-skeleton__line {
	background: linear-gradient(90deg, var(--sos-cream) 25%, var(--sos-cream-deep) 50%, var(--sos-cream) 75%);
	background-size: 200% 100%;
	animation: sos-shimmer 1.3s linear infinite;
	border-radius: 6px;
}

.sos-skeleton__box {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: var(--sos-radius-sm);
}

.sos-skeleton__lines {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sos-skeleton__line {
	height: 11px;
}

.sos-skeleton__line--short {
	width: 40%;
}

@keyframes sos-shimmer {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

.sos-search mark,
.sos-results mark {
	background: linear-gradient(transparent 58%, rgba(200, 123, 90, 0.32) 58%);
	color: inherit;
	font-weight: 700;
	padding: 0;
}

/* ---------------------------------------------------------------------
 * صفحهی نتایج
 * ------------------------------------------------------------------ */

.sos-results {
	max-width: 1240px;
	margin-inline: auto;
	padding: 8px 0 40px;
}

.sos-results__hero {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(168, 191, 173, 0.28) 0%, transparent 60%),
		var(--sos-cream);
	border-radius: calc(var(--sos-radius) + 6px);
	padding: 30px 32px;
	margin-bottom: 26px;
}

.sos-results__search {
	margin-top: 18px;
	max-width: 620px;
}

.sos-results__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.sos-results__title {
	margin: 0;
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--sos-pine);
}

.sos-results__title em {
	font-style: normal;
	position: relative;
	white-space: nowrap;
}

.sos-results__title em::after {
	content: '';
	position: absolute;
	inset-inline: -2px;
	bottom: 2px;
	height: 8px;
	background: rgba(200, 123, 90, 0.28);
	border-radius: 3px;
	z-index: -1;
}

.sos-results__count {
	color: var(--sos-muted);
	font-size: 14px;
	background: var(--sos-surface);
	border-radius: var(--sos-radius-pill);
	padding: 4px 13px;
	box-shadow: var(--sos-shadow-sm);
}

.sos-results__notice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	background: rgba(200, 123, 90, 0.1);
	border-radius: var(--sos-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sos-text);
	margin: 0 0 20px;
}

.sos-results__notice::before {
	content: 'ⓘ';
	color: var(--sos-clay);
	font-size: 15px;
	line-height: 1.6;
}

/* میانبرهای دستهبندی — همان ظاهرِ دراپداونِ لایوسرچ */

.sos-results__cats {
	background: var(--sos-surface);
	border: 1px solid var(--sos-border);
	border-radius: var(--sos-radius);
	box-shadow: var(--sos-shadow-sm);
	padding: 6px;
	margin-bottom: 22px;
}

/* در پنل لایوسرچ این برچسب چسبان است؛ اینجا چیزی برای چسبیدن نیست. */
.sos-results__cats .sos-panel__label {
	position: static;
}

/*
 * ردیفها همان .sos-term دراپداوناند؛ فقط چون صفحهی نتایج پهن است در چند
 * ستون چیده میشوند تا یک ستون بلندِ خالی درست نشود.
 */
.sos-results__cats .sos-panel__terms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 2px;
}

.sos-results__layout {
	display: grid;
	grid-template-columns: 252px 1fr;
	gap: 28px;
	align-items: start;
}

.sos-results__layout--full {
	grid-template-columns: 1fr;
}

.sos-results__empty {
	padding: 60px 24px;
	text-align: center;
	background: var(--sos-cream);
	border-radius: var(--sos-radius);
}

.sos-results__empty strong {
	display: block;
	font-size: 17px;
	margin-bottom: 8px;
	color: var(--sos-pine);
}

.sos-results__empty span {
	color: var(--sos-muted);
	font-size: 14px;
}

/* ستون فیلترها (دسکتاپ) */

.sos-filters {
	background: var(--sos-surface);
	border: 1px solid var(--sos-border);
	border-radius: var(--sos-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 24px;
	box-shadow: var(--sos-shadow-sm);
}

.sos-filters__bar {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sos-filter__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* فاصله را gap میدهد، نه margin. */
.sos-filter__panel .sos-filters__label {
	margin-bottom: 0;
}

/*
 * chip و دکمههای شیت فقط در موبایل معنا دارند؛ در دسکتاپ خودِ پنل همیشه باز
 * است و یک دکمهی «اعمال فیلتر» برای کل فرم کافی است.
 */
.sos-filter__chip,
.sos-filter__close,
.sos-filter__apply,
.sos-filters__backdrop {
	display: none;
}

.sos-filters__heading {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--sos-pine);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sos-border);
}

.sos-filters__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--sos-text);
}

.sos-filters__select,
.sos-filters__range input {
	width: 100%;
	border: 1.5px solid var(--sos-border);
	border-radius: var(--sos-radius-sm);
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	background: var(--sos-surface);
	color: inherit;
	transition: border-color 0.16s var(--sos-ease), box-shadow 0.16s var(--sos-ease);
}

.sos-filters__select:focus,
.sos-filters__range input:focus {
	outline: 0;
	border-color: var(--sos-sage);
	box-shadow: var(--sos-ring);
}

.sos-filters__range {
	display: flex;
	gap: 9px;
}

.sos-filters__check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.sos-filters__check input {
	width: 17px;
	height: 17px;
	accent-color: var(--sos-pine);
	cursor: pointer;
}

.sos-filters__submit {
	border: 0;
	border-radius: var(--sos-radius-sm);
	background: var(--sos-pine);
	color: var(--sos-cream);
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	padding: 12px;
	cursor: pointer;
	transition: background 0.18s var(--sos-ease);
}

.sos-filters__submit:hover {
	background: var(--sos-pine-soft);
}

.sos-filters__reset {
	text-align: center;
	font-size: 13px;
	color: var(--sos-muted);
	text-decoration: none;
}

.sos-filters__reset:hover {
	color: var(--sos-clay);
}

/* گرید محصولات */

.sos-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 24px 20px;
}

.sos-card__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.sos-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--sos-radius);
	overflow: hidden;
	background: var(--sos-cream);
	box-shadow: var(--sos-shadow-sm);
	transition: box-shadow 0.28s var(--sos-ease), transform 0.28s var(--sos-ease);
}

.sos-card__link:hover .sos-card__media {
	transform: translateY(-4px);
	box-shadow: var(--sos-shadow-lg);
}

.sos-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--sos-ease);
}

.sos-card__link:hover .sos-card__media img {
	transform: scale(1.06);
}

.sos-badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--sos-radius-pill);
	padding: 5px 11px;
	color: #fff;
	backdrop-filter: blur(4px);
	letter-spacing: 0.01em;
}

.sos-badge--sale {
	background: var(--sos-clay);
}

.sos-badge--out {
	background: rgba(28, 35, 33, 0.72);
}

.sos-card--out .sos-card__media img {
	filter: grayscale(0.75);
	opacity: 0.72;
}

.sos-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-inline: 2px;
}

.sos-card__title {
	font-size: 14px;
	line-height: 1.65;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.18s var(--sos-ease);
}

.sos-card__link:hover .sos-card__title {
	color: var(--sos-pine);
}

.sos-card__price {
	font-weight: 700;
	color: var(--sos-pine);
	font-size: 15px;
}

.sos-card__price del {
	font-weight: 400;
	color: var(--sos-faint);
	margin-inline-start: 7px;
	font-size: 13px;
}

.sos-card__price ins {
	text-decoration: none;
}

/* صفحهبندی */

.sos-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 38px;
}

.sos-pagination__link,
.sos-pagination__current,
.sos-pagination__dots {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 13px;
	border-radius: var(--sos-radius-sm);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sos-pagination__link {
	border: 1px solid var(--sos-border);
	color: var(--sos-pine);
	background: var(--sos-surface);
	transition: border-color 0.16s var(--sos-ease), background 0.16s var(--sos-ease);
}

.sos-pagination__link:hover {
	background: var(--sos-cream);
	border-color: var(--sos-sage);
}

.sos-pagination__current {
	background: var(--sos-pine);
	color: var(--sos-cream);
}

.sos-pagination__dots {
	color: var(--sos-faint);
	min-width: 24px;
	padding: 0;
}

/* جستوجوهای پرتکرار */

.sos-popular {
	margin-top: 32px;
	text-align: center;
}

.sos-popular__title {
	font-size: 15px;
	margin: 0 0 14px;
	color: var(--sos-muted);
	font-weight: 600;
}

.sos-popular__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 0;
}

.sos-popular__list a {
	display: inline-block;
	border: 1px solid var(--sos-border);
	border-radius: var(--sos-radius-pill);
	padding: 8px 17px;
	font-size: 14px;
	text-decoration: none;
	color: var(--sos-pine);
	background: var(--sos-surface);
	transition: border-color 0.18s var(--sos-ease), background 0.18s var(--sos-ease), transform 0.18s var(--sos-ease);
}

.sos-popular__list a:hover {
	border-color: var(--sos-sage);
	background: var(--sos-cream);
	transform: translateY(-1px);
}

.sos-results--empty {
	padding-top: 30px;
}

/* ---------------------------------------------------------------------
 * واکنشگرا
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.sos-results__layout {
		grid-template-columns: 1fr;
	}

	.sos-results__hero {
		padding: 22px 20px;
	}

	/*
	 * موبایل: ستون فیلتر به نوار افقیِ chip تبدیل میشود.
	 *
	 * پیش از این، ستون فیلتر در چیدمان تکستونی بالای نتایج میافتاد و اولین
	 * چیزی که کاربر میدید فرم فیلتر بود نه محصولات. حالا خودِ فرم نوار است:
	 * `__bar` روی display:contents میرود تا گروهها مستقیماً آیتمهای فلکسِ
	 * فرم شوند و دکمهی «حذف فیلترها» بدون تغییر ترتیب DOM ته نوار بنشیند.
	 */
	.sos-filters {
		position: sticky;
		top: 0;
		z-index: 30;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 10px 0;
		margin-bottom: 16px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--sos-surface);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sos-filters::-webkit-scrollbar {
		display: none;
	}

	.sos-filters__bar {
		display: contents;
	}

	.sos-filters__heading,
	.sos-filters__submit {
		display: none;
	}

	.sos-filter {
		position: static;
		flex: 0 0 auto;
	}

	.sos-filter__chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		max-width: 62vw;
		border: 1.5px solid var(--sos-border);
		border-radius: var(--sos-radius-pill);
		background: var(--sos-surface);
		color: var(--sos-text);
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		padding: 9px 15px;
		cursor: pointer;
		white-space: nowrap;
		transition: background 0.16s var(--sos-ease), border-color 0.16s var(--sos-ease), color 0.16s var(--sos-ease);
	}

	.sos-filter__chip-text {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sos-filter__chip-arrow {
		flex: 0 0 auto;
		width: 0;
		height: 0;
		border-inline: 4px solid transparent;
		border-top: 5px solid currentColor;
		opacity: 0.7;
		transition: transform 0.18s var(--sos-ease);
	}

	.sos-filter.is-open .sos-filter__chip-arrow {
		transform: rotate(180deg);
	}

	/* chipِ فیلترِ فعال پر میشود تا از یک نگاه معلوم باشد چه چیزی اعمال است. */
	.sos-filter.is-set .sos-filter__chip {
		background: var(--sos-pine);
		border-color: var(--sos-pine);
		color: var(--sos-cream);
	}

	.sos-filters__reset {
		flex: 0 0 auto;
		border: 1.5px dashed var(--sos-border);
		border-radius: var(--sos-radius-pill);
		padding: 9px 15px;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
	}

	/*
	 * پنل بهصورت شیتِ پایینصفحه باز میشود، نه دراپداونِ مطلق: نوار chip خودش
	 * ظرفِ اسکرول افقی است و هر عنصر مطلقِ داخلش عمودی بریده میشد.
	 */
	.sos-filter__panel {
		display: none;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 10000;
		background: var(--sos-surface);
		border-radius: calc(var(--sos-radius) + 6px) calc(var(--sos-radius) + 6px) 0 0;
		box-shadow: var(--sos-shadow-lg);
		padding: 26px 18px calc(18px + env(safe-area-inset-bottom, 0px));
		max-height: 80vh;
		overflow-y: auto;
		gap: 12px;
	}

	.sos-filter.is-open .sos-filter__panel {
		display: flex;
		animation: sos-sheet-in 0.22s var(--sos-ease);
	}

	/* دستگیرهی بالای شیت */
	.sos-filter__panel::before {
		content: '';
		position: absolute;
		top: 9px;
		inset-inline: 0;
		margin-inline: auto;
		width: 42px;
		height: 4px;
		border-radius: 999px;
		background: var(--sos-border);
	}

	.sos-filter__close {
		display: block;
		position: absolute;
		top: 14px;
		inset-inline-end: 14px;
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 50%;
		background: var(--sos-cream);
		color: var(--sos-muted);
		font-size: 19px;
		line-height: 1;
		cursor: pointer;
		padding: 0;
	}

	.sos-filter__apply {
		display: block;
		margin-top: 6px;
		border: 0;
		border-radius: var(--sos-radius-sm);
		background: var(--sos-pine);
		color: var(--sos-cream);
		font: inherit;
		font-weight: 700;
		font-size: 15px;
		padding: 14px;
		cursor: pointer;
	}

	.sos-filters__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba(28, 35, 33, 0.45);
		animation: sos-fade-in 0.22s var(--sos-ease);
	}

	.sos-filters__backdrop[hidden] {
		display: none;
	}

	.sos-filters__label {
		font-size: 14px;
		margin-bottom: 2px;
	}

	.sos-filters__select,
	.sos-filters__range input {
		padding: 13px 12px;
		font-size: 15px;
	}

	.sos-filters__check {
		padding: 6px 0;
		font-size: 15px;
	}
}

@keyframes sos-sheet-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes sos-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* وقتی شیت فیلتر باز است، صفحهی پشتش نباید اسکرول شود. */
body.sos-sheet-open {
	overflow: hidden;
}

@media (max-width: 560px) {
	.sos-search__submit {
		display: none;
	}

	.sos-search__form {
		padding-inline-start: 8px;
	}

	.sos-search__panel {
		max-height: 68vh;
	}

	.sos-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 12px;
	}

	.sos-item__media {
		width: 50px;
		height: 50px;
	}
}

/* ---------------------------------------------------------------------
 * پوستهی تیره (فقط با theme="dark" صریح)
 *
 * عمداً به prefers-color-scheme وصل نشده: قالب سایت ممکن است روشن باشد و
 * تیرهشدنِ خودکارِ فقط این بخش ناهماهنگ بهنظر میرسد.
 * ------------------------------------------------------------------ */

.sos-search--theme-dark,
.sos-results--theme-dark {
	--sos-surface: #16211d;
	--sos-cream: #1f2d28;
	--sos-cream-deep: #263630;
	--sos-text: #eef2ef;
	--sos-muted: #9baba4;
	--sos-faint: #78877f;
	--sos-border: #2c3d36;
	--sos-pine: #a8bfad;
	--sos-pine-soft: #c1d3c5;
	--sos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--sos-shadow-lg: 0 20px 44px -14px rgba(0, 0, 0, 0.7);
	--sos-ring: 0 0 0 4px rgba(168, 191, 173, 0.2);
}

.sos-search--theme-dark .sos-search__submit,
.sos-results--theme-dark .sos-filters__submit,
.sos-results--theme-dark .sos-pagination__current {
	color: #16211d;
}
/* ==========================================================================
   پلیر ریلز — افزونه ویدیوی محصول
   استایل استریپ دایرهای در reels-strip.css است (درونخط چاپ میشود، نه از فوتر).
   همهی مقادیر قابل تنظیم بهصورت CSS Variable از سمت PHP تزریق میشوند تا این
   فایل ثابت و کاملاً قابل کش بماند.
   ========================================================================== */

body.wcpv-reels-lock {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

.wcpv-overlay {
	direction: rtl;
	--wcpv-player-bg: #000;
	--wcpv-btn-bg: #fff;
	--wcpv-btn-color: #111;
	--wcpv-btn-radius: 12px;
	--wcpv-like-color: #ff2d55;
	--wcpv-thumb: 48px;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	background: var(--wcpv-player-bg);
	color: #fff;
	font-family: inherit;
	overscroll-behavior: contain;
}

.wcpv-overlay.is-open {
	display: block;
}

.wcpv-track {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.wcpv-track::-webkit-scrollbar {
	display: none;
}

/* حالت تکمحصول (پلیر صفحهی محصول): یک اسلاید بیشتر نیست، پس اسکرول عمودی
   بسته میشود. بدون این، کاربر روی iOS میتواند همان یک اسلاید را بکشد و رها
   کند و حس «خراب بودن» بگیرد. */
.wcpv-overlay.wcpv-single .wcpv-track {
	overflow-y: hidden;
	scroll-snap-type: none;
}

.wcpv-slide {
	position: relative;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.wcpv-stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/**
 * `contain` لایهی دوم دفاع در برابر پرش اسکرول است: اضافه شدن فریمهای گالری
 * نباید layout والدِ scroll-snap (`.wcpv-track`) را کثیف کند، وگرنه مرورگر دوباره
 * snap میکند و اگر کاربر وسط سوایپ باشد به اسلاید قبلی برمیگردد. ابعاد این
 * المان صراحتاً ۱۰۰٪ است، پس size containment چیزی را جمع نمیکند.
 */
.wcpv-frames {
	display: flex;
	width: 100%;
	height: 100%;
	direction: ltr;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	contain: layout size;
}

.wcpv-frames::-webkit-scrollbar {
	display: none;
}

.wcpv-frame {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.wcpv-fit-contain .wcpv-frame {
	background-size: contain;
}

.wcpv-frame video,
.wcpv-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcpv-fit-contain .wcpv-frame video,
.wcpv-fit-contain .wcpv-frame img {
	object-fit: contain;
}

.wcpv-frame-gallery img {
	object-fit: contain;
	background: #0a0a0a;
}

/* لایهی تیره برای خوانا ماندن متنها */
.wcpv-stage::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 50%;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0));
}

.wcpv-ui {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.wcpv-ui > * {
	pointer-events: auto;
}

/* نوارهای بالا و پایین خودشان ضربه نمیگیرند تا تکضربه روی نواحی خالی
   به ویدیو برسد؛ فقط عناصر تعاملی داخلشان فعالاند. */
.wcpv-top,
.wcpv-bottom,
.wcpv-meta {
	pointer-events: none;
}

.wcpv-top > *,
.wcpv-thumbs,
.wcpv-dots,
.wcpv-actions,
.wcpv-meta-buttons {
	pointer-events: auto;
}

/* نوار پیشرفت */
.wcpv-progress {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.25);
}

/* عمداً از چپ پر میشود و نه از راستِ اورلیِ RTL: نوار زمان در همهی پلیرها —
   از جمله استوری اینستاگرام روی زبان فارسی — چپبهراست است. */
.wcpv-progress span,
.wcpv-progress b {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 0;
	height: 100%;
}

/* مقدار بافرشده — کمرنگتر، پشت نوار پخش */
.wcpv-progress b {
	background: rgba(255, 255, 255, 0.45);
}

.wcpv-progress span {
	background: #fff;
}

/* نوار قطعهای اسلاید عکسی: یک قطعه بهازای هر عکس، درست جای نوار پیشرفت.
   بدون این نوار، بالای اسلاید عکسی خالی است و مثل ویدیویی به نظر میرسد که
   هنوز شروع نشده. */
.wcpv-segs {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	/* اورلی RTL است ولی این نوار باید مثل استوری اینستاگرام چپبهراست پر شود؛
	   یعنی قطعهی اول سمت چپ. با `direction` نه با `flex-direction`، تا ترتیب
	   `is-on` گرفتن قطعهها در `updateFrameNav()` هم با چیدمان یکی بماند. */
	direction: ltr;
	gap: 3px;
	padding: 7px 12px 0;
	/* بعد از `.wcpv-ui > *` میآید تا ضربه روی این نوار به ویدیو برسد. */
	pointer-events: none;
}

.wcpv-segs i {
	height: 3px;
	flex: 1 1 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.3);
	transition: background 0.25s ease;
}

.wcpv-segs i.is-on {
	background: #fff;
}

/* بج «عکس» — جای دکمهی صدا، چون اسلاید عکسی صدایی ندارد */
.wcpv-photo-badge {
	display: flex;
	height: 34px;
	align-items: center;
	padding: 0 12px;
	border-radius: 17px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 13px;
	gap: 6px;
	line-height: 1;
	/* بعد از `.wcpv-top > *` میآید تا ضربهی روی بج هم به ویدیو برسد. */
	pointer-events: none;
}

.wcpv-photo-badge svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* شمارنده همیشه چپبهراست نوشته میشود تا «۱/۵» جابهجا خوانده نشود */
.wcpv-photo-badge span:empty {
	display: none;
}

.wcpv-photo-badge span {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ورود عکس: زوم بسیار آهسته. transform عمداً روی خودِ `img` است نه روی فریم؛
   فریم یک نقطهی snap است و دست زدن به کادرش اسکرول را جابهجا میکند.
   `overflow: hidden` لازم است وگرنه تصویرِ بزرگشده از لبهی فریم بیرون میزند
   و روی فریم گالریِ کناری دیده میشود. */
.wcpv-slide-photo .wcpv-frame-video {
	overflow: hidden;
}

.wcpv-slide-photo.is-shown .wcpv-photo-img {
	animation: wcpv-photo-in 9s ease-out both;
}

@keyframes wcpv-photo-in {
	from {
		transform: scale(1.06);
	}

	to {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcpv-slide-photo.is-shown .wcpv-photo-img {
		animation: none;
	}
}

/* دکمههای بالا */
.wcpv-top {
	position: absolute;
	top: 14px;
	right: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.wcpv-icon-btn {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	backdrop-filter: blur(6px);
	-webkit-tap-highlight-color: transparent;
}

.wcpv-icon-btn svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* بلوک پایین: تامبنیلها + (اطلاعات محصول | ستون کنشها) */
.wcpv-bottom {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 14px 18px;
}

.wcpv-bottom-row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

/* راهنمای «برای بعدی بالا بکشید» در پایان ویدیو.
   همیشه در DOM و در جریان چیدمانِ بلوک پایین است و فقط شفافیتش عوض میشود؛
   ظاهر و ناپدید شدنش نباید تامبنیلها را بالا و پایین بپراند. */
.wcpv-end-hint {
	display: flex;
	max-width: 100%;
	height: 32px;
	align-self: center;
	align-items: center;
	padding: 0 14px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 13px;
	gap: 6px;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease;
	backdrop-filter: blur(4px);
	white-space: nowrap;
}

.wcpv-end-hint svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.wcpv-end-hint.is-on {
	opacity: 1;
	transform: none;
}

/* انیمیشن فقط وقتی دیده میشود اجرا شود، نه در تمام مدت پخش. */
.wcpv-end-hint.is-on svg {
	animation: wcpv-hint-bob 1.5s ease-in-out infinite;
}

@keyframes wcpv-hint-bob {
	0%, 100% { transform: translateY(2px); }
	50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.wcpv-end-hint {
		transition: none;
	}

	.wcpv-end-hint.is-on svg {
		animation: none;
	}
}

/* ستون کنشها — سمت راست، مثل اینستاگرام */
.wcpv-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.wcpv-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 48px;
	padding: 4px;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

.wcpv-action svg {
	width: 36px;
	height: 36px;
	fill: #fff;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
	transition: transform 0.16s ease;
}

.wcpv-action:active svg {
	transform: scale(0.86);
}

.wcpv-action .wcpv-count {
	font-size: 13px;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.wcpv-like.is-liked svg {
	fill: var(--wcpv-like-color);
}

/* اطلاعات محصول */
.wcpv-meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: right;
}

.wcpv-meta-title {
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* قیمت
   ترتیب فرزندها در RTL از راست: قیمت فعلی، قیمت قبلیِ خطخورده، چیپ تخفیف. */
.wcpv-meta-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* عدد اول میآید و واحد پول بعد از آن؛ در RTL یعنی «تومان» سمت چپِ عدد.
   این چیدمان جای واحد پول را از تنظیم ووکامرس مستقل میکند. */
.wcpv-price-main {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	min-width: 0;
}

.wcpv-price-now {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.2px;
}

.wcpv-price-cur {
	font-size: 12px;
	font-weight: 700;
	opacity: 0.85;
}

.wcpv-price-old {
	font-size: 13px;
	opacity: 0.7;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.wcpv-price-off {
	padding: 2px 8px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.75;
	text-shadow: none;
	white-space: nowrap;
}

.wcpv-meta-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.wcpv-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--wcpv-btn-radius);
	background: var(--wcpv-btn-bg);
	color: var(--wcpv-btn-color);
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.wcpv-cta-alt {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	backdrop-filter: blur(6px);
}

.wcpv-cta[disabled] {
	opacity: 0.65;
	cursor: default;
}

/* نوار تامبنیل تصاویر محصول */
.wcpv-thumbs {
	display: flex;
	gap: 8px;
	direction: ltr;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 2px 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wcpv-thumbs::-webkit-scrollbar {
	display: none;
}

.wcpv-thumb {
	position: relative;
	flex: 0 0 auto;
	width: var(--wcpv-thumb, 48px);
	height: calc(var(--wcpv-thumb, 48px) * 1.3);
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	opacity: 0.72;
	transition: opacity 0.18s ease, border-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.wcpv-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcpv-thumb.is-on {
	border-color: #fff;
	opacity: 1;
}

/* نشانهی پخش روی تامبنیل ویدیو */
.wcpv-thumb-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -7px 0 0 -4px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* نگه داشتن انگشت روی ویدیو: مکث + محو شدن رابط کاربری */
.wcpv-slide.is-holding .wcpv-bottom,
.wcpv-slide.is-holding .wcpv-segs,
.wcpv-slide.is-holding .wcpv-top {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.wcpv-slide.is-holding .wcpv-top > *,
.wcpv-slide.is-holding .wcpv-thumbs,
.wcpv-slide.is-holding .wcpv-dots,
.wcpv-slide.is-holding .wcpv-actions,
.wcpv-slide.is-holding .wcpv-meta-buttons {
	pointer-events: none;
}

.wcpv-slide.is-holding .wcpv-stage::after {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* این المانها `display: flex` دارند و استایل نویسنده بر قاعدهی `[hidden]`
   مرورگر غلبه میکند؛ بدون این خط، مخفی کردنشان بیاثر است. */
.wcpv-dots[hidden],
.wcpv-segs[hidden],
.wcpv-thumbs[hidden] {
	display: none;
}

/* نقطههای گالری (وقتی تامبنیل خاموش است) */
.wcpv-dots {
	display: flex;
	justify-content: center;
	gap: 5px;
}

.wcpv-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transition: background 0.2s ease, transform 0.2s ease;
}

.wcpv-dots i.is-on {
	background: #fff;
	transform: scale(1.25);
}

/* نشانهی مکث/پخش وسط صفحه (تکضربه روی ویدیو) */
.wcpv-tap-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	display: flex;
	width: 82px;
	height: 82px;
	margin: -41px 0 0 -41px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.42);
	opacity: 0;
	pointer-events: none;
	transform: scale(0.72);
	transition: opacity 0.16s ease, transform 0.16s ease;
	backdrop-filter: blur(4px);
}

.wcpv-tap-icon svg {
	width: 42px;
	height: 42px;
	fill: #fff;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.wcpv-tap-icon.is-on {
	opacity: 1;
	transform: scale(1);
}

.wcpv-tap-icon.is-flash {
	animation: wcpv-tap-flash 0.6s ease-out;
}

@keyframes wcpv-tap-flash {
	0%   { opacity: 0; transform: scale(0.72); }
	22%  { opacity: 1; transform: scale(1); }
	55%  { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.22); }
}

/* هنگام نگه داشتن انگشت، مثل بقیهی رابط محو میشود. */
.wcpv-slide.is-holding .wcpv-tap-icon {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* قلب دابلتپ */
.wcpv-burst {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	margin: -40px 0 0 -40px;
	opacity: 0;
	pointer-events: none;
}

.wcpv-burst svg {
	width: 80px;
	height: 80px;
	fill: #fff;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.wcpv-burst.is-on {
	animation: wcpv-burst 0.75s ease-out;
}

@keyframes wcpv-burst {
	0%   { opacity: 0; transform: scale(0.4); }
	25%  { opacity: 1; transform: scale(1.12); }
	60%  { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.3); }
}

/* اسپینر بافر — همیشه در DOM هست و فقط با کلاس روشن میشود، چون در طول پخش
   ممکن است چند بار لازم شود. تأخیر ۲۵۰ms در نمایش عمدی است تا وقفههای خیلی
   کوتاه باعث چشمک زدن اسپینر نشوند. */
.wcpv-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: wcpv-spin 0.8s linear infinite;
	transition: opacity 0.15s ease;
}

/* تأخیر فقط موقع ظاهر شدن است؛ پنهان شدن باید فوری باشد. */
.wcpv-spinner.is-on {
	opacity: 1;
	transition: opacity 0.15s ease 0.25s;
}

@keyframes wcpv-spin {
	to { transform: rotate(360deg); }
}

.wcpv-toast {
	position: fixed;
	bottom: 26px;
	left: 50%;
	z-index: 1000000;
	padding: 10px 18px;
	transform: translateX(-50%) translateY(12px);
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.92);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wcpv-toast.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (min-width: 783px) {
	.wcpv-slide {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.wcpv-stage {
		position: relative;
		width: min(440px, 46vh);
		height: 100%;
		max-height: 100%;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcpv-track { scroll-behavior: auto; }
	.wcpv-burst.is-on { animation-duration: 0.01s; }
	.wcpv-tap-icon { transition: opacity 0.01s linear; }
}
