/* Prance Smart Recommendations — frontend */
:root {
	--psr-primary: #7aad8a;
	--psr-ink: #2f3a33;
	--psr-muted: #8b938e;
	--psr-line: #e8ece9;
	--psr-soft: #eef5f0;
	--psr-radius: 14px;
	--psr-gap: 20px;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
	:root {
		--psr-soft: color-mix(in srgb, var(--psr-primary) 11%, #fff);
		--psr-soft-2: color-mix(in srgb, var(--psr-primary) 22%, #fff);
	}
}

/* ───────────── نوار ───────────── */
.psr-bar {
	margin: 44px 0 8px;
	clear: both;
}
.psr-bar + .psr-bar {
	margin-top: 36px;
}
.psr-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.psr-head__titles {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex-wrap: wrap;
}
.psr-head__icon {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--psr-soft);
	color: var(--psr-primary);
	flex: none;
}
.psr-head__icon svg,
.psr-tab__icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.psr-title {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 800;
	line-height: 1.4;
	color: var(--psr-ink);
	text-transform: none;
}
.psr-sub {
	font-size: 12.5px;
	color: var(--psr-muted);
	white-space: nowrap;
}

.psr-viewall {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 7px 10px 7px 14px;
	border: 1px solid var(--psr-primary);
	border-radius: 999px;
	color: var(--psr-primary) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	transition: background .2s, color .2s;
}
.psr-viewall__count {
	font-style: normal;
	font-size: 11px;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--psr-soft);
	transition: inherit;
}
.psr-viewall:hover {
	background: var(--psr-primary);
	color: #fff !important;
}
.psr-viewall:hover .psr-viewall__count {
	background: rgba(255, 255, 255, .22);
}
.psr-viewall svg {
	transition: transform .2s;
}
.psr-viewall:hover svg {
	transform: translateX(-3px);
}

/* کاروسل وودمارت داخل نوار: فاصله‌ی اضافه‌ی عنوان عنصر حذف شود */
.psr-body .wd-products-element .title-wrapper,
.psr-body .element-title {
	display: none;
}

/* ───────────── کاروسل داخلی ───────────── */
.psr-carousel {
	--psr-n: var(--psr-d, 5);
	position: relative;
}
.psr-track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--psr-n) - 1) * var(--psr-gap)) / var(--psr-n));
	gap: var(--psr-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin: 0 !important;
	padding: 2px 2px 6px !important;
	list-style: none;
}
.psr-track::before, .psr-track::after, .psr-grid::before, .psr-grid::after { display: none !important; }
.psr-track::-webkit-scrollbar {
	display: none;
}
.psr-track > *,
.psr-grid > * {
	scroll-snap-align: start;
	min-width: 0;
	list-style: none;

	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 !important;
	float: none !important;
}

.psr-nav {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border: 1px solid var(--psr-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--psr-ink) !important;
	box-shadow: 0 6px 18px rgba(30, 50, 40, .12);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s, transform .2s, background .2s;
}
.psr-nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.psr-nav--prev { inset-inline-start: -14px; }
.psr-nav--next { inset-inline-end: -14px; }
.psr-carousel:hover .psr-nav:not([disabled]) { opacity: 1; }
.psr-nav:hover { background: var(--psr-primary) !important; color: #fff !important; border-color: var(--psr-primary) !important; }
.psr-nav[disabled] { opacity: 0 !important; pointer-events: none; }

.psr-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}
.psr-dots button {
	width: 7px;
	height: 7px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--psr-line) !important;
	cursor: pointer;
	transition: width .25s, background .25s;
}
.psr-dots button.is-active {
	width: 20px;
	background: var(--psr-primary) !important;
}

@media (max-width: 1024px) {
	.psr-carousel { --psr-n: var(--psr-t, 3); }
}
@media (max-width: 767px) {
	:root { --psr-gap: 12px; }
	.psr-carousel { --psr-n: var(--psr-m, 2); }
	.psr-carousel .psr-track { grid-auto-columns: calc((100% - (var(--psr-n) - 1) * var(--psr-gap)) / var(--psr-n) - 18px); }
	.psr-nav { display: none; }
	.psr-sub { display: none; }
	.psr-title { font-size: 16px !important; }
	.psr-bar { margin-top: 32px; }
}
@media (hover: none) {
	.psr-nav { opacity: 1; }
}

/* ───────────── صفحه «مشاهده همه» ───────────── */
.psr-page {
	margin: 10px 0 40px;
}
.psr-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	margin-bottom: 22px;
	border-radius: var(--psr-radius);
	background: var(--psr-soft);
}
.psr-hero__img {
	flex: none;
	width: 92px;
	height: 92px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 14px rgba(30, 50, 40, .08);
}
.psr-hero__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0 !important;
}
.psr-hero__info {
	min-width: 0;
	flex: 1;
}
.psr-hero__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--psr-primary);
	margin-bottom: 2px;
}
.psr-hero__name {
	margin: 0 0 4px !important;
	font-size: 17px !important;
	font-weight: 800;
	line-height: 1.5;
}
.psr-hero__name a {
	color: var(--psr-ink) !important;
}
.psr-hero__price {
	font-size: 14px;
}

.psr-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--psr-primary);
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	transition: filter .2s;
}
.psr-btn:hover { filter: brightness(.94); }
.psr-btn--ghost {
	background: #fff;
	color: var(--psr-primary) !important;
	border: 1px solid var(--psr-primary);
}
.psr-btn--ghost:hover { background: var(--psr-primary); color: #fff !important; filter: none; }

.psr-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: #f4f6f5;
	max-width: 100%;
	overflow-x: auto;
}
.psr-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	color: var(--psr-ink) !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.psr-tab__icon { display: inline-grid; color: var(--psr-primary); }
.psr-tab__count {
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #fff;
	color: var(--psr-muted);
}
.psr-tab:hover { background: #fff; }
.psr-tab.is-active {
	background: var(--psr-primary);
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(30, 60, 40, .15);
}
.psr-tab.is-active .psr-tab__icon { color: #fff; }
.psr-tab.is-active .psr-tab__count { background: rgba(255, 255, 255, .25); color: #fff; }

.psr-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--psr-line);
}
.psr-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}
.psr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid var(--psr-line);
	border-radius: 999px;
	background: #fff;
	color: var(--psr-ink) !important;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: border-color .2s, background .2s;
}
.psr-chip em {
	font-style: normal;
	font-size: 11px;
	color: var(--psr-muted);
}
.psr-chip:hover { border-color: var(--psr-primary); }
.psr-chip.is-active {
	border-color: var(--psr-primary);
	background: var(--psr-soft);
	color: var(--psr-primary) !important;
	font-weight: 700;
}
.psr-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin: 0 !important;
	margin-inline-start: auto !important;
	font-size: 13px;
	color: var(--psr-muted);
}
.psr-sort label { margin: 0; white-space: nowrap; }
.psr-sort select {
	min-width: 150px;
	height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	border-color: var(--psr-line);
	font-size: 13px;
}

.psr-grid {
	display: grid !important;
	padding: 0 !important;
	list-style: none;
	grid-template-columns: repeat(var(--psr-cols, 4), minmax(0, 1fr));
	gap: 24px var(--psr-gap);
	margin: 0 !important;
}

.psr-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 30px;
}
.psr-page-num {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border-radius: 10px;
	border: 1px solid var(--psr-line);
	color: var(--psr-ink) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.psr-page-num:hover { border-color: var(--psr-primary); }
.psr-page-num.is-active {
	background: var(--psr-primary);
	border-color: var(--psr-primary);
	color: #fff !important;
}

.psr-empty {
	padding: 50px 20px;
	text-align: center;
	color: var(--psr-muted);
	border: 1px dashed var(--psr-line);
	border-radius: var(--psr-radius);
}
.psr-empty p { margin-bottom: 14px; }

@media (max-width: 1024px) {
	.psr-grid { grid-template-columns: repeat(var(--psr-cols-t, 3), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.psr-hero { flex-wrap: wrap; gap: 12px; padding: 14px; }
	.psr-hero__img { width: 72px; height: 72px; }
	.psr-hero__back { width: 100%; justify-content: center; }
	.psr-tabs { display: flex; }
	.psr-tab { flex: 1; justify-content: center; padding: 9px 10px; font-size: 13px; }
	.psr-toolbar { flex-direction: column; align-items: stretch; }
	.psr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
	.psr-chips::-webkit-scrollbar { display: none; }
	.psr-sort { margin-inline-start: 0 !important; }
	.psr-sort select { flex: 1; }
	.psr-grid { grid-template-columns: repeat(var(--psr-cols-m, 2), minmax(0, 1fr)); gap: 16px 12px; }
}