/* ===== Horizontal Product Showcase - Frontend Styles ===== */

.hps-widget {
	direction: rtl;
	font-family: inherit;
	margin: 40px 0;
	max-width: 100%;
	box-sizing: border-box;
}

.hps-widget * { box-sizing: border-box; }

.hps-track {
	--hps-card-w: calc((100% - (var(--hps-cols) - 1) * var(--hps-card-gap, 16px)) / var(--hps-cols));
}

/* پس‌زمینه سفارشی کلی باکس افزونه: مستقل از تم، به‌صورت خودکار با ارتفاع محتوا (از جمله کارت‌های تصویری بلند) هماهنگ می‌شود چون فقط padding دور محتوا اضافه می‌کند، نه ارتفاع ثابت */
.hps-widget.hps-has-custom-bg {
	background: var(--hps-widget-bg);
	padding: 22px;
	border-radius: 20px;
}

.hps-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.hps-heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hps-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	position: relative;
	padding-right: 14px;
}

.hps-title::before {
	content: "";
	position: absolute;
	right: 0;
	top: 4px;
	bottom: 4px;
	width: 5px;
	border-radius: 4px;
	background: var(--hps-accent, #2563eb);
}

.hps-subtitle {
	margin: 0;
	font-size: 13px;
	color: #888;
	padding-right: 14px;
}

/* Tabs row: centered */
.hps-tabs-row {
	display: flex;
	justify-content: center;
	width: 100%;
}

.hps-tabs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.hps-tab-btn {
	border: 1px solid #e5e5e5;
	background: #fff;
	padding: 8px 20px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	transition: all .2s ease;
	white-space: nowrap;
}

.hps-tab-btn.is-active {
	background: var(--hps-accent, #2563eb);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Body: track + optional side banner */
.hps-body {
	display: flex;
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

.hps-body .hps-panels {
	flex: 1 1 0%;
	min-width: 0;
	order: 1;
}

.hps-has-banner .hps-banner {
	flex: 0 0 var(--hps-banner-w, 260px);
	width: var(--hps-banner-w, 260px);
	max-width: var(--hps-banner-w, 260px);
	height: var(--hps-banner-h, 260px);
	min-height: var(--hps-banner-h, 260px);
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: flex-end;
	background: var(--hps-accent, #2563eb);
	align-self: flex-start;
	margin-block: var(--hps-banner-offset, -14px);
}

/* پیش‌فرض: بنر سمت چپ گرید (در چیدمان راست‌به‌چپ یعنی آخرین آیتم) */
.hps-banner-left .hps-banner { order: 2; }
.hps-banner-left .hps-panels { order: 1; }

/* بنر سمت راست گرید (اولین آیتم در چیدمان راست‌به‌چپ) */
.hps-banner-right .hps-banner { order: 1; }
.hps-banner-right .hps-panels { order: 2; }

.hps-banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hps-banner-content {
	position: relative;
	z-index: 2;
	padding: 22px;
	color: #fff;
	width: 100%;
}

.hps-banner-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(var(--hps-banner-overlay-rgb, 0, 0, 0), var(--hps-banner-overlay-opacity, .65)),
		rgba(var(--hps-banner-overlay-rgb, 0, 0, 0), 0) 70%
	);
}

.hps-banner-title {
	font-size: 19px;
	font-weight: 800;
	margin: 0 0 6px;
	line-height: 1.5;
}

.hps-banner-subtitle {
	font-size: 13px;
	margin: 0 0 14px;
	opacity: .9;
	line-height: 1.6;
}

.hps-banner-btn {
	display: inline-block;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 8px;
	text-decoration: none;
	transition: transform .2s ease;
}

.hps-banner-btn:hover {
	transform: translateY(-2px);
}

/* ============ Banner themes ============ */

/* Classic (default): full-bleed image, gradient overlay, content pinned to bottom */
.hps-banner-theme-classic { align-items: flex-end; }

/* Minimal: image fills the top area, content sits in its own solid block below */
.hps-banner-theme-minimal {
	flex-direction: column;
	align-items: stretch;
	background: #fff;
}
.hps-banner-theme-minimal.has-image .hps-banner-img {
	position: static;
	height: 60%;
	width: 100%;
	object-fit: cover;
}
.hps-banner-theme-minimal .hps-banner-overlay { display: none; }
.hps-banner-theme-minimal .hps-banner-content {
	position: static;
	color: #111;
	background: var(--hps-accent, #2563eb);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hps-banner-theme-minimal .hps-banner-title,
.hps-banner-theme-minimal .hps-banner-subtitle { color: #fff; }

/* Split: image on top half, solid accent color block on bottom half */
.hps-banner-theme-split {
	flex-direction: column;
	align-items: stretch;
}
.hps-banner-theme-split.has-image .hps-banner-img {
	position: static;
	height: 50%;
	width: 100%;
	object-fit: cover;
}
.hps-banner-theme-split .hps-banner-overlay { display: none; }
.hps-banner-theme-split .hps-banner-content {
	position: static;
	background: var(--hps-accent, #2563eb);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Badge: title shown as a rounded pill badge pinned to the top corner of the image */
.hps-banner-theme-badge { align-items: flex-end; }
.hps-banner-theme-badge .hps-banner-content { padding-top: 50px; }
.hps-banner-theme-badge .hps-banner-title {
	display: inline-block;
	background: #fff;
	color: #111;
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	position: absolute;
	top: 14px;
	right: 14px;
	margin: 0;
}

/* Frame: polaroid-style white padding/frame around the image */
.hps-banner-theme-frame {
	background: #fff;
	padding: 10px 10px 0;
	align-items: flex-end;
	border: 1px solid #eee;
}
.hps-banner-theme-frame .hps-banner-img { border-radius: 6px; inset: 10px 10px 0 10px; height: calc(100% - 10px); }
.hps-banner-theme-frame .hps-banner-overlay { inset: 10px 10px 0 10px; border-radius: 6px 6px 0 0; }
.hps-banner-theme-frame .hps-banner-content { color: #fff; }

/* Outline: bordered card, no gradient overlay on the image */
.hps-banner-theme-outline {
	border: 2px solid var(--hps-accent, #2563eb);
	align-items: flex-end;
}
.hps-banner-theme-outline .hps-banner-overlay { display: none; }
.hps-banner-theme-outline .hps-banner-content {
	background: rgba(var(--hps-banner-overlay-rgb, 0,0,0), var(--hps-banner-overlay-opacity, .65));
}

/* Bold: oversized title text stacked over the image */
.hps-banner-theme-bold { align-items: flex-end; }
.hps-banner-theme-bold .hps-banner-title {
	font-size: 30px;
	line-height: 1.15;
	text-transform: uppercase;
}

/* Soft: extra rounded corners and a gentle shadow, no hard overlay edge */
.hps-banner-theme-soft {
	border-radius: 28px;
	box-shadow: 0 14px 30px rgba(0,0,0,.12);
	align-items: flex-end;
}
.hps-banner-theme-soft .hps-banner-overlay {
	background: linear-gradient(
		to top,
		rgba(var(--hps-banner-overlay-rgb, 0,0,0), var(--hps-banner-overlay-opacity, .65)),
		rgba(var(--hps-banner-overlay-rgb, 0,0,0), 0) 85%
	);
}

/* Panels & track */
.hps-panel { display: none; }
.hps-panel.is-active { display: block; }

.hps-track {
	display: flex;
	gap: var(--hps-card-gap, 16px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
	width: 100%;
}

.hps-track::-webkit-scrollbar { height: 6px; }
.hps-track::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
.hps-track::-webkit-scrollbar-track { background: transparent; }

/* ============ کارت تصویری میان‌ردیف ============ */
.hps-image-card {
	flex: 0 0 auto !important;
	position: relative;
	scroll-snap-align: start;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.hps-image-card img {
	width: 100%;
	height: 100%;
	display: block;
}
.hps-image-card.hps-fit-cover img { object-fit: cover; }
.hps-image-card.hps-fit-contain img { object-fit: contain; }

/* ============ چیدمان: گرید چندردیفه (بدون اسکرول) ============ */
.hps-layout-grid .hps-track {
	flex-wrap: wrap;
	overflow: visible;
	scroll-snap-type: none;
}
.hps-layout-grid .hps-track .hps-card:not(.hps-image-card) {
	flex: 0 0 var(--hps-card-w);
}

/* ============ چیدمان: کاروسل وسط‌چین (کارت‌های کناری نیمه‌نمایان) ============ */
.hps-layout-centered .hps-track {
	scroll-snap-type: x mandatory;
	padding-inline: 8%;
}
.hps-layout-centered .hps-track .hps-card {
	scroll-snap-align: center;
}

.hps-empty {
	color: #999;
	text-align: center;
	padding: 30px 0;
}

/* Card base */
.hps-card {
	flex: 0 0 var(--hps-card-w);
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #eee;
	transition: transform .25s ease, box-shadow .25s ease;
}

.hps-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

.hps-card-img {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fafafa;
	overflow: hidden;
}

.hps-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.hps-card:hover .hps-card-img img {
	transform: scale(1.06);
}

.hps-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 9px;
	border-radius: 8px;
	line-height: 1.5;
}

.hps-badge-oos {
	background: rgba(20,20,20,.75);
	color: #fff;
}

.hps-badge-sale {
	background: #ef4444;
	color: #fff;
}

.hps-card-body {
	padding: 12px 14px 16px;
	text-align: center;
}

.hps-card-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 8px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 44px;
	text-align: center;
	color: var(--hps-text-color, #1a1a1a);
}

.hps-card-price,
.hps-card-price bdi,
.hps-card-price .woocommerce-Price-amount,
.hps-card-price ins,
.hps-card-price ins bdi,
.hps-card-price ins .woocommerce-Price-amount {
	color: var(--hps-price-color, var(--hps-accent, #2563eb)) !important;
	font-size: 14px;
	font-weight: 700;
}

.hps-card-price del,
.hps-card-price del bdi,
.hps-card-price del .woocommerce-Price-amount {
	color: #aaa !important;
	font-weight: 400;
	font-size: 12px;
	margin-inline-start: 6px;
}

.hps-card-price ins {
	text-decoration: none;
}

/* ============ Theme: Modern (default look above) ============ */
.hps-theme-modern .hps-card {
	border-radius: 18px;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

/* ============ Theme: Minimal ============ */
.hps-theme-minimal .hps-card {
	border-radius: 4px;
	border: 1px solid #ececec;
	box-shadow: none;
}
.hps-theme-minimal .hps-card:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--hps-accent, #2563eb);
}
.hps-theme-minimal .hps-title {
	font-weight: 600;
}
.hps-theme-minimal .hps-card-img {
	aspect-ratio: 4 / 3;
}

/* ============ Theme: Dark / Neon ============ */
.hps-theme-dark {
	background: #0f1115;
	padding: 24px;
	border-radius: 20px;
}
.hps-theme-dark .hps-title,
.hps-theme-dark .hps-subtitle {
	color: #fff;
}
.hps-theme-dark .hps-title::before {
	box-shadow: 0 0 10px var(--hps-accent, #22d3ee);
}
.hps-theme-dark .hps-tab-btn {
	color: #9aa0ab;
	background: #1b1e26;
	border-color: #262a33;
}
.hps-theme-dark .hps-tab-btn.is-active {
	box-shadow: 0 0 14px color-mix(in srgb, var(--hps-accent, #22d3ee) 60%, transparent);
}
.hps-theme-dark .hps-nav {
	background: #1b1e26;
	border-color: #262a33;
	color: #cfd3da;
}
.hps-theme-dark .hps-card {
	background: #161920;
	border: 1px solid #262a33;
}
.hps-theme-dark .hps-card:hover {
	box-shadow: 0 0 22px color-mix(in srgb, var(--hps-accent, #22d3ee) 35%, transparent);
	border-color: var(--hps-accent, #22d3ee);
}
.hps-theme-dark .hps-card-title {
	color: var(--hps-text-color, #f1f2f4);
}
.hps-theme-dark .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #22d3ee)) !important;
}
.hps-theme-dark .hps-empty { color: #777; }

/* ============ Theme: Glass ============ */
.hps-theme-glass {
	background: rgba(37,99,235,.08);
	background: linear-gradient(135deg, color-mix(in srgb, var(--hps-accent, #2563eb) 15%, transparent), transparent);
	padding: 24px;
	border-radius: 24px;
}
.hps-theme-glass .hps-card {
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: 0 8px 32px rgba(31,38,135,.1);
}
.hps-theme-glass .hps-nav {
	background: rgba(255,255,255,.6);
	backdrop-filter: blur(6px);
	border-color: rgba(255,255,255,.7);
}

/* ============ Theme: Pastel ============ */
.hps-theme-pastel {
	background: #fef4f8;
	background: color-mix(in srgb, var(--hps-accent, #f472b6) 8%, #fff);
	padding: 22px;
	border-radius: 26px;
}
.hps-theme-pastel .hps-card {
	border-radius: 24px;
	border: none;
	background: #fff;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--hps-accent, #f472b6) 18%, transparent);
}
.hps-theme-pastel .hps-card:hover {
	box-shadow: 0 10px 26px color-mix(in srgb, var(--hps-accent, #f472b6) 30%, transparent);
}
.hps-theme-pastel .hps-tab-btn.is-active {
	border-radius: 999px;
}
.hps-theme-pastel .hps-card-price {
	color: var(--hps-price-color, color-mix(in srgb, var(--hps-accent, #f472b6) 80%, #000)) !important;
}

/* ============ Theme: Gradient ============ */
.hps-theme-gradient .hps-card {
	border: none;
	border-radius: 18px;
	position: relative;
	background: #fff;
}
.hps-theme-gradient .hps-card::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: 18px;
	background: var(--hps-accent, #6366f1);
	background: linear-gradient(135deg, var(--hps-accent, #6366f1), color-mix(in srgb, var(--hps-accent, #6366f1) 30%, #fff));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.hps-theme-gradient .hps-tab-btn.is-active {
	background: var(--hps-accent, #6366f1);
	background: linear-gradient(135deg, var(--hps-accent, #6366f1), color-mix(in srgb, var(--hps-accent, #6366f1) 40%, #a855f7));
}
.hps-theme-gradient .hps-card-price {
	color: var(--hps-accent, #6366f1);
	background: linear-gradient(135deg, var(--hps-accent, #6366f1), color-mix(in srgb, var(--hps-accent, #6366f1) 40%, #a855f7));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
.hps-theme-gradient .hps-card-price ins,
.hps-theme-gradient .hps-card-price ins bdi,
.hps-theme-gradient .hps-card-price bdi,
.hps-theme-gradient .hps-card-price .woocommerce-Price-amount {
	color: transparent !important;
}

/* ============ Theme: Outline ============ */
.hps-theme-outline .hps-card {
	border: 1.5px solid var(--hps-accent, #2563eb);
	border-radius: 10px;
	box-shadow: none;
	background: transparent;
}
.hps-theme-outline .hps-card:hover {
	transform: none;
	box-shadow: none;
	background: rgba(37,99,235,.05);
	background: color-mix(in srgb, var(--hps-accent, #2563eb) 6%, transparent);
}
.hps-theme-outline .hps-tab-btn {
	border: 1.5px solid transparent;
}
.hps-theme-outline .hps-tab-btn.is-active {
	background: transparent;
	color: var(--hps-accent, #2563eb);
	border-color: var(--hps-accent, #2563eb);
	box-shadow: none;
}
.hps-theme-outline .hps-nav {
	border-radius: 8px;
}

/* ============ Theme: Elegant / Gold ============ */
.hps-theme-elegant {
	background: #f9f7f2;
	padding: 26px;
	border-radius: 6px;
}
.hps-theme-elegant .hps-title {
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: .3px;
}
.hps-theme-elegant .hps-card {
	border-radius: 2px;
	border: 1px solid #e6ddc9;
	background: #fff;
}
.hps-theme-elegant .hps-card:hover {
	border-color: var(--hps-accent, #b8860b);
}
.hps-theme-elegant .hps-card-title {
	font-family: Georgia, 'Times New Roman', serif;
}
.hps-theme-elegant .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #b8860b)) !important;
	font-family: Georgia, 'Times New Roman', serif;
}
.hps-theme-elegant .hps-tab-btn.is-active {
	background: var(--hps-accent, #b8860b);
	border-radius: 2px;
}

/* ============ Theme: Flat ============ */
.hps-theme-flat .hps-card {
	border: 2px solid #111;
	border-radius: 0;
	box-shadow: none;
}
.hps-theme-flat .hps-card:hover {
	transform: none;
	box-shadow: 4px 4px 0 var(--hps-accent, #2563eb);
}
.hps-theme-flat .hps-badge {
	border-radius: 0;
}
.hps-theme-flat .hps-tab-btn {
	border-radius: 0;
}
.hps-theme-flat .hps-tab-btn.is-active {
	border-radius: 0;
}
.hps-theme-flat .hps-nav {
	border-radius: 0;
	border: 2px solid #111;
}

/* ============ Theme: Retro ============ */
.hps-theme-retro {
	background: #fdf6ec;
	padding: 22px;
	border-radius: 14px;
}
.hps-theme-retro .hps-card {
	border: 3px solid #2b2b2b;
	border-radius: 10px;
	background: #fffdf8;
	box-shadow: 5px 5px 0 color-mix(in srgb, var(--hps-accent, #e07a5f) 80%, #000);
}
.hps-theme-retro .hps-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 color-mix(in srgb, var(--hps-accent, #e07a5f) 80%, #000);
}
.hps-theme-retro .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #e07a5f)) !important;
}
.hps-theme-retro .hps-tab-btn.is-active {
	border: 2px solid #2b2b2b;
	box-shadow: 3px 3px 0 #2b2b2b;
}

/* ============ Theme: 3D / Playful ============ */
.hps-theme-3d .hps-card {
	border-radius: 20px;
	border: none;
	box-shadow: 0 10px 0 color-mix(in srgb, var(--hps-accent, #2563eb) 70%, #000 30%);
}
.hps-theme-3d .hps-card:hover {
	transform: translateY(4px);
	box-shadow: 0 6px 0 color-mix(in srgb, var(--hps-accent, #2563eb) 70%, #000 30%);
}
.hps-theme-3d .hps-nav {
	border-radius: 12px;
	box-shadow: 0 4px 0 #ddd;
}
.hps-theme-3d .hps-nav:hover {
	box-shadow: 0 4px 0 color-mix(in srgb, var(--hps-accent, #2563eb) 60%, #000 40%);
}

/* ============ Theme: Magazine ============ */
.hps-theme-magazine .hps-card {
	border-radius: 0;
	border: none;
	border-bottom: 3px solid var(--hps-accent, #111);
	background: #fff;
}
.hps-theme-magazine .hps-card-title {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .3px;
}
.hps-theme-magazine .hps-card-price {
	font-size: 15px;
}
.hps-theme-magazine .hps-title {
	text-transform: uppercase;
	letter-spacing: 1px;
}
.hps-theme-magazine .hps-tab-btn {
	border-radius: 0;
}
.hps-theme-magazine .hps-tab-btn.is-active {
	border-radius: 0;
}

/* ============ Theme: Neumorphic ============ */
.hps-theme-neumorphic {
	background: #eef0f3;
	padding: 22px;
	border-radius: 24px;
}
.hps-theme-neumorphic .hps-card {
	border: none;
	border-radius: 20px;
	background: #eef0f3;
	box-shadow: 8px 8px 16px #d1d3d8, -8px -8px 16px #ffffff;
}
.hps-theme-neumorphic .hps-card:hover {
	box-shadow: 4px 4px 10px #d1d3d8, -4px -4px 10px #ffffff;
}
.hps-theme-neumorphic .hps-nav {
	background: #eef0f3;
	border: none;
	box-shadow: 4px 4px 8px #d1d3d8, -4px -4px 8px #ffffff;
}

/* ============ Theme: Monochrome ============ */
.hps-theme-mono {
	filter: grayscale(1);
}
.hps-theme-mono .hps-card {
	border: 1px solid #ddd;
	border-radius: 8px;
}
.hps-theme-mono .hps-card-price,
.hps-theme-mono .hps-title::before,
.hps-theme-mono .hps-tab-btn.is-active {
	background: #111 !important;
	color: #fff;
}
.hps-theme-mono .hps-card-price { background: none !important; color: #111 !important; }

/* ============ Theme: Split Image ============ */
.hps-theme-split .hps-card {
	border-radius: 0;
	border: none;
	box-shadow: 0 1px 0 #eee;
}
.hps-theme-split .hps-card-img {
	aspect-ratio: 1 / 1.05;
	border-radius: 0;
}
.hps-theme-split .hps-card-body {
	padding: 10px 4px 4px;
}
.hps-theme-split .hps-card-title {
	font-size: 13px;
	min-height: auto;
	-webkit-line-clamp: 1;
}
.hps-theme-split .hps-card-price {
	font-size: 13px;
}
.hps-theme-split .hps-card:hover .hps-card-img img {
	transform: none;
	opacity: .85;
}

/* ============ Theme: Ribbon / Badge Pop ============ */
.hps-theme-ribbon .hps-card {
	border-radius: 14px;
	overflow: visible;
}
.hps-theme-ribbon .hps-card-img { border-radius: 14px 14px 0 0; overflow: hidden; }
.hps-theme-ribbon .hps-badge {
	top: -8px;
	left: -8px;
	font-size: 12px;
	padding: 8px 12px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.hps-theme-ribbon .hps-badge-sale {
	background: var(--hps-accent, #ef4444);
}
.hps-theme-ribbon .hps-card-price {
	display: inline-block;
	background: color-mix(in srgb, var(--hps-accent, #2563eb) 12%, transparent);
	background: rgba(37,99,235,.12);
	background: color-mix(in srgb, var(--hps-accent, #2563eb) 12%, transparent);
	padding: 3px 10px;
	border-radius: 8px;
}

/* ============ Theme: Ink / Dark Luxury ============ */
.hps-theme-ink {
	background: #050505;
	padding: 26px;
	border-radius: 18px;
}
.hps-theme-ink .hps-title,
.hps-theme-ink .hps-subtitle {
	color: #f2f2f2;
}
.hps-theme-ink .hps-card {
	background: #101010;
	border: 1px solid #1f1f1f;
	border-radius: 6px;
}
.hps-theme-ink .hps-card-title { color: var(--hps-text-color, #eaeaea); }
.hps-theme-ink .hps-card-price { color: var(--hps-price-color, var(--hps-accent, #d4af37)) !important; }
.hps-theme-ink .hps-tab-btn { color: #999; background: #111; border-color: #222; }
.hps-theme-ink .hps-nav { background: #111; border-color: #222; color: #ccc; }

/* ============ Theme: Soft Shadow / Airy ============ */
.hps-theme-airy .hps-card {
	border: none;
	border-radius: 22px;
	box-shadow: 0 20px 40px -20px rgba(0,0,0,.25);
}
.hps-theme-airy .hps-card:hover {
	box-shadow: 0 26px 46px -18px rgba(0,0,0,.3);
	transform: translateY(-6px);
}
.hps-theme-airy .hps-card-img { border-radius: 22px 22px 0 0; }

/* ============ Theme: Sunset (گرادیان گرم) ============ */
.hps-theme-sunset {
	background: linear-gradient(135deg, color-mix(in srgb, var(--hps-accent, #f97316) 12%, #fff), #fff);
	padding: 22px;
	border-radius: 20px;
}
.hps-theme-sunset .hps-card {
	border: none;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--hps-accent, #f97316) 18%, transparent);
}
.hps-theme-sunset .hps-card:hover {
	box-shadow: 0 14px 30px color-mix(in srgb, var(--hps-accent, #f97316) 28%, transparent);
}
.hps-theme-sunset .hps-badge-sale {
	background: linear-gradient(135deg, var(--hps-accent, #f97316), #ef4444);
}

/* ============ Theme: Ocean (آبی خنک) ============ */
.hps-theme-ocean {
	background: linear-gradient(160deg, color-mix(in srgb, var(--hps-accent, #0ea5e9) 10%, #fff), #fff);
	padding: 22px;
	border-radius: 20px;
}
.hps-theme-ocean .hps-card {
	border: 1px solid color-mix(in srgb, var(--hps-accent, #0ea5e9) 25%, #fff);
	border-radius: 14px;
	background: #fff;
}
.hps-theme-ocean .hps-card:hover {
	border-color: var(--hps-accent, #0ea5e9);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--hps-accent, #0ea5e9) 20%, transparent);
}
.hps-theme-ocean .hps-tab-btn.is-active {
	background: linear-gradient(135deg, var(--hps-accent, #0ea5e9), color-mix(in srgb, var(--hps-accent, #0ea5e9) 60%, #22d3ee));
}

/* ============ Theme: Polaroid (قاب عکس سفید) ============ */
.hps-theme-polaroid .hps-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 10px 10px 4px;
	box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.hps-theme-polaroid .hps-card-img {
	border-radius: 2px;
	aspect-ratio: 1/1;
}
.hps-theme-polaroid .hps-card-body {
	padding: 10px 4px 6px;
}
.hps-theme-polaroid .hps-card:hover {
	transform: rotate(-1deg) translateY(-3px);
}

/* ============ Theme: Bubble (کاملاً گرد) ============ */
.hps-theme-bubble .hps-card {
	border-radius: 30px;
	border: none;
	background: color-mix(in srgb, var(--hps-accent, #2563eb) 6%, #fff);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--hps-accent, #2563eb) 12%, transparent);
}
.hps-theme-bubble .hps-card-img {
	border-radius: 24px;
	margin: 10px;
	width: calc(100% - 20px);
	aspect-ratio: 1/1;
}
.hps-theme-bubble .hps-tab-btn.is-active,
.hps-theme-bubble .hps-banner-btn {
	border-radius: 999px;
}

/* ============ Theme: Tag (بج مربعی گوشه) ============ */
.hps-theme-tag .hps-card {
	border-radius: 10px;
	border: 1px solid #eee;
}
.hps-theme-tag .hps-badge {
	border-radius: 0;
	top: 0;
	left: 0;
	font-size: 10px;
	padding: 6px 10px;
}
.hps-theme-tag .hps-badge-sale {
	background: var(--hps-accent, #ef4444);
}

/* ============ Theme: Glow (درخشش نئونی هنگام هاور) ============ */
.hps-theme-glow .hps-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	transition: box-shadow .3s ease, border-color .3s ease, transform .25s ease;
}
.hps-theme-glow .hps-card:hover {
	border-color: var(--hps-accent, #2563eb);
	box-shadow: 0 0 0 1px var(--hps-accent, #2563eb), 0 0 26px color-mix(in srgb, var(--hps-accent, #2563eb) 55%, transparent);
}

/* ============ Theme: Luxury (مشکی طلایی) ============ */
.hps-theme-luxury {
	background: #0b0b0b;
	padding: 26px;
	border-radius: 16px;
}
.hps-theme-luxury .hps-title,
.hps-theme-luxury .hps-subtitle {
	color: #f2f2f2;
}
.hps-theme-luxury .hps-title::before {
	background: linear-gradient(180deg, var(--hps-accent, #d4af37), color-mix(in srgb, var(--hps-accent, #d4af37) 50%, #fff));
}
.hps-theme-luxury .hps-card {
	background: #141414;
	border: 1px solid color-mix(in srgb, var(--hps-accent, #d4af37) 35%, #222);
	border-radius: 10px;
}
.hps-theme-luxury .hps-card:hover {
	border-color: var(--hps-accent, #d4af37);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--hps-accent, #d4af37) 25%, transparent);
}
.hps-theme-luxury .hps-card-title { color: var(--hps-text-color, #eee); }
.hps-theme-luxury .hps-card-price,
.hps-theme-luxury .hps-card-price bdi,
.hps-theme-luxury .hps-card-price .woocommerce-Price-amount {
	color: var(--hps-price-color, var(--hps-accent, #d4af37)) !important;
}
.hps-theme-luxury .hps-tab-btn { color: #999; background: #1a1a1a; border-color: #2a2a2a; }
.hps-theme-luxury .hps-tab-btn.is-active {
	background: linear-gradient(135deg, var(--hps-accent, #d4af37), color-mix(in srgb, var(--hps-accent, #d4af37) 50%, #fff));
	color: #111;
}

/* ============ Theme: Candy (آب‌نباتی رنگارنگ) ============ */
.hps-theme-candy {
	background: linear-gradient(135deg, color-mix(in srgb, var(--hps-accent, #ec4899) 14%, #fff), color-mix(in srgb, var(--hps-accent, #ec4899) 4%, #fff));
	padding: 22px;
	border-radius: 26px;
}
.hps-theme-candy .hps-card {
	border: 3px solid #fff;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 10px 0 color-mix(in srgb, var(--hps-accent, #ec4899) 55%, #fff), 0 14px 24px color-mix(in srgb, var(--hps-accent, #ec4899) 22%, transparent);
}
.hps-theme-candy .hps-card:hover {
	transform: translateY(-2px) rotate(-1deg);
}
.hps-theme-candy .hps-badge-sale {
	background: var(--hps-accent, #ec4899);
	border-radius: 999px;
}
.hps-theme-candy .hps-tab-btn.is-active {
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hps-accent, #ec4899), color-mix(in srgb, var(--hps-accent, #ec4899) 40%, #f59e0b));
}

/* ============ Theme: Paper (کاغذی کرافت) ============ */
.hps-theme-paper {
	background: #f4ede1;
	padding: 24px;
	border-radius: 10px;
}
.hps-theme-paper .hps-title,
.hps-theme-paper .hps-subtitle {
	color: #4a3f30;
}
.hps-theme-paper .hps-card {
	background: #fbf7ef;
	border: 1px solid #e3d7c0;
	border-radius: 4px;
	box-shadow: 3px 4px 0 #e3d7c0;
}
.hps-theme-paper .hps-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 6px 0 #e3d7c0;
}
.hps-theme-paper .hps-card-title { color: var(--hps-text-color, #3d3324); }
.hps-theme-paper .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #a5682a)) !important;
}
.hps-theme-paper .hps-tab-btn { background: #fbf7ef; border-color: #e3d7c0; color: #6b5c44; }
.hps-theme-paper .hps-tab-btn.is-active { background: var(--hps-accent, #a5682a); border-color: var(--hps-accent, #a5682a); }

/* ============ Theme: Cyber (سایبری نئون دوتایی) ============ */
.hps-theme-cyber {
	background: #0a0a12;
	padding: 24px;
	border-radius: 14px;
}
.hps-theme-cyber .hps-title,
.hps-theme-cyber .hps-subtitle { color: #e8e8ff; }
.hps-theme-cyber .hps-title::before {
	background: linear-gradient(180deg, var(--hps-accent, #ff2fd0), #22d3ee);
}
.hps-theme-cyber .hps-card {
	background: #10101c;
	border: 1px solid color-mix(in srgb, var(--hps-accent, #ff2fd0) 40%, #22d3ee);
	border-radius: 4px;
	position: relative;
}
.hps-theme-cyber .hps-card:hover {
	box-shadow: 0 0 0 1px var(--hps-accent, #ff2fd0), 0 0 22px color-mix(in srgb, #22d3ee 55%, transparent);
	border-color: #22d3ee;
}
.hps-theme-cyber .hps-card-title { color: #eaeaff; }
.hps-theme-cyber .hps-card-price { color: #22d3ee !important; }
.hps-theme-cyber .hps-tab-btn { background: #14141f; color: #9aa0c9; border-color: #23233a; }
.hps-theme-cyber .hps-tab-btn.is-active {
	background: linear-gradient(135deg, var(--hps-accent, #ff2fd0), #22d3ee);
	color: #0a0a12;
}

/* ============ Theme: Wood (چوبی گرم) ============ */
.hps-theme-wood {
	background: linear-gradient(160deg, #7a5230, #5c3d24);
	padding: 24px;
	border-radius: 14px;
}
.hps-theme-wood .hps-title,
.hps-theme-wood .hps-subtitle { color: #fdf2e3; }
.hps-theme-wood .hps-card {
	background: #fdf6ea;
	border: 3px solid #4a3018;
	border-radius: 8px;
}
.hps-theme-wood .hps-card-title { color: #3c2a16; }
.hps-theme-wood .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #a5682a)) !important;
}
.hps-theme-wood .hps-tab-btn { background: #6b4a2a; color: #f0e2cd; border-color: #4a3018; }
.hps-theme-wood .hps-tab-btn.is-active { background: var(--hps-accent, #c98a3f); color: #3c2a16; }

/* ============ Theme: Ice (یخی بلورین) ============ */
.hps-theme-ice {
	background: linear-gradient(160deg, #eaf7ff, #ffffff);
	padding: 22px;
	border-radius: 22px;
}
.hps-theme-ice .hps-card {
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(8px);
	border: 1px solid #cfeeff;
	border-radius: 18px;
	box-shadow: 0 10px 26px rgba(56,189,248,.14);
}
.hps-theme-ice .hps-card:hover {
	border-color: var(--hps-accent, #38bdf8);
	box-shadow: 0 14px 30px rgba(56,189,248,.22);
}
.hps-theme-ice .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #0ea5e9)) !important;
}
.hps-theme-ice .hps-tab-btn.is-active {
	background: linear-gradient(135deg, var(--hps-accent, #0ea5e9), #a5f3fc);
}

/* ============ Theme: Velvet (مخملی جواهری) ============ */
.hps-theme-velvet {
	background: #240b1f;
	padding: 26px;
	border-radius: 20px;
}
.hps-theme-velvet .hps-title,
.hps-theme-velvet .hps-subtitle { color: #f3e6ef; }
.hps-theme-velvet .hps-card {
	background: #341328;
	border: 1px solid color-mix(in srgb, var(--hps-accent, #d946ef) 35%, #3a1730);
	border-radius: 16px;
}
.hps-theme-velvet .hps-card:hover {
	border-color: var(--hps-accent, #d946ef);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--hps-accent, #d946ef) 30%, transparent);
}
.hps-theme-velvet .hps-card-title { color: var(--hps-text-color, #f3e6ef); }
.hps-theme-velvet .hps-card-price {
	color: var(--hps-price-color, var(--hps-accent, #d946ef)) !important;
}
.hps-theme-velvet .hps-tab-btn { background: #3a1730; color: #d9b8cf; border-color: #4a1f3c; }
.hps-theme-velvet .hps-tab-btn.is-active {
	background: linear-gradient(135deg, var(--hps-accent, #d946ef), color-mix(in srgb, var(--hps-accent, #d946ef) 50%, #f472b6));
}

/* Responsive */
@media (max-width: 1024px) {
	.hps-track { --hps-cols: 3.3; }
}

@media (max-width: 782px) {
	.hps-body { flex-direction: column; }
	.hps-has-banner .hps-banner { width: 100%; max-width: 100%; order: -1 !important; height: auto; min-height: 160px; margin-block: 0; }
	.hps-has-banner .hps-panels { order: 0 !important; }
	.hps-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100%;
	}
	.hps-tabs::-webkit-scrollbar { display: none; }
	.hps-tab-btn { flex: 0 0 auto; }
}

@media (max-width: 640px) {
	.hps-widget { margin: 24px 0; }
	.hps-track { --hps-cols: 2.15; gap: 10px; }
	.hps-title { font-size: 18px; }
	.hps-subtitle { font-size: 12px; }
	.hps-card-title { font-size: 13px; min-height: 38px; }
	.hps-card-price { font-size: 13px; }
	.hps-nav { width: 32px; height: 32px; }
	.hps-theme-dark,
	.hps-theme-glass,
	.hps-theme-pastel,
	.hps-theme-retro,
	.hps-theme-elegant { padding: 14px; border-radius: 14px; }
}

@media (max-width: 380px) {
	.hps-track { --hps-cols: 1.55; }
}

@media (max-width: 480px) {
	.hps-image-card { max-width: 78vw !important; }
}