/* ================================================================
 * Haika KingSize — Shop V2 (Premium UI/UX)
 *   • Sticky toolbar with view modes
 *   • Product Card with hover image swap + swatches
 *   • Multi-view (grid-4 / grid-3 / list)
 *   • Mobile bottom-sheet filter
 *   • Skeleton loader
 *   • سازگار با ۳ نمای رنگی
 * ================================================================ */

.haika-shop {
	--hks-fg:         var(--cb-text, #e6edf3);
	--hks-fg-muted:   var(--cb-text-2, rgba(255,255,255,0.62));
	--hks-card-bg:    rgba(255,255,255,0.04);
	--hks-card-bg-2:  rgba(255,255,255,0.07);
	--hks-card-border:rgba(255,255,255,0.10);
	--hks-card-hover: rgba(231, 166, 174, 0.30);
	--hks-purple:     var(--ks-purple, #6B2D5C);
	--hks-purple-glow:var(--ks-purple-glow, #E7A6AE);
	--hks-purple-soft:rgba(231, 166, 174, 0.12);
	--hks-radius:     16px;
	--hks-radius-sm:  10px;
	--hks-shadow:     0 12px 40px rgba(0,0,0,.28);
}
.haika-theme-light .haika-shop {
	--hks-card-bg:    #ffffff;
	--hks-card-bg-2:  #f7f5fb;
	--hks-card-border:rgba(107, 45, 92, 0.12);
	--hks-shadow:     0 12px 40px rgba(107, 45, 92, 0.10);
	--hks-fg:         #1a1a2e;
	--hks-fg-muted:   #6b7280;
}

.haika-shop { padding-block: 0 60px; }

/* ═══════════════════════════════════════════════════════════════
   SEARCH HERO (top of archive)
   ═══════════════════════════════════════════════════════════════ */
.haika-shop-search-hero {
	position: relative;
	padding: 56px 16px 40px;
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(231,166,174,0.18), transparent 70%),
		radial-gradient(ellipse 50% 70% at 100% 100%, rgba(107,45,92,0.15), transparent 70%);
	margin-bottom: 30px;
	border-radius: 0 0 var(--hks-radius) var(--hks-radius);
	/* overflow visible تا panel نتایج جستجو زیر بلاک بعدی نره */
	overflow: visible;
	z-index: 50;
}
.haika-shop-search-hero__inner { position: relative; z-index: 2; }
.haika-shop-search-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.haika-shop-search-hero .haika-shop-title {
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 900;
	margin: 0 0 6px;
	background: linear-gradient(135deg, var(--hks-fg) 30%, var(--hks-purple-glow));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.haika-shop-subtitle {
	font-size: 14px;
	color: var(--hks-fg-muted);
	margin: 0 0 24px;
}

.haika-shop-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 28px;
	align-items: flex-start;
}
.haika-shop-layout.no-sidebar { grid-template-columns: 1fr; }
@media (max-width: 960px) {
	.haika-shop-layout { grid-template-columns: 1fr; }
}

.haika-shop-header { margin-bottom: 18px; }
.haika-shop-title {
	font-size: clamp(22px, 3.2vw, 32px);
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--hks-fg);
}

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR (Filter Bar)
   ═══════════════════════════════════════════════════════════════ */
.hktb {
	position: sticky;
	top: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	margin-bottom: 18px;
	background: var(--hks-card-bg);
	border: 1px solid var(--hks-card-border);
	border-radius: var(--hks-radius);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
}
.hktb__left, .hktb__right { display: flex; align-items: center; gap: 10px; }

.hktb__filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--hks-purple-soft);
	color: var(--hks-purple-glow);
	border: 1px solid rgba(231, 166, 174, 0.3);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s;
}
.hktb__filter-trigger:hover {
	background: var(--hks-purple-glow);
	color: #fff;
}
.hktb__filter-badge {
	background: var(--hks-purple);
	color: #fff;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
}
.hktb__filter-trigger:hover .hktb__filter-badge {
	background: #fff;
	color: var(--hks-purple);
}

.hktb__count {
	font-size: 13px;
	color: var(--hks-fg-muted);
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.hktb__count-num   { color: var(--hks-fg); font-weight: 700; }
.hktb__count-label { color: var(--hks-fg-muted); }

.hktb__views {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: rgba(0,0,0,0.15);
	border-radius: 10px;
}
.haika-theme-light .hktb__views { background: #f1f5f9; }

/* فقط یکی از desktop/mobile نمایش بدید */
.hktb__views--desktop { display: inline-flex; }
.hktb__views--mobile  { display: none; }
@media (max-width: 720px) {
	.hktb__views--desktop { display: none; }
	.hktb__views--mobile  { display: inline-flex; }
}
.hktb__view-btn {
	background: transparent;
	border: 0;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--hks-fg-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .15s;
}
.hktb__view-btn:hover { color: var(--hks-fg); }
.hktb__view-btn.is-active {
	background: var(--hks-purple);
	color: #fff;
	box-shadow: 0 2px 8px rgba(107, 45, 92, .3);
}
/* ─── Toolbar Mobile (تک‌سطره، آیکن‌ها در سایز کوچک‌تر) ─── */
@media (max-width: 720px) {
	.hktb {
		grid-template-columns: auto auto 1fr;
		gap: 8px;
		padding: 8px 10px;
		align-items: center;
	}
	.hktb__left { gap: 6px; }
	.hktb__filter-trigger { padding: 7px 12px; font-size: 12.5px; }
	.hktb__count { font-size: 12px; white-space: nowrap; }
	.hktb__views { padding: 2px; }
	.hktb__view-btn { padding: 6px 8px; }
	.hktb__select { min-width: 100px; padding: 7px 30px 7px 10px; font-size: 12.5px; }
	[dir="ltr"] .hktb__select { padding: 7px 10px 7px 30px; }
	.hktb__right { justify-self: end; }
}
/* سایز کوچک‌تر — حذف متن فیلتر، فقط آیکن  +  حذف برچسب "محصول" (عدد می‌مونه) */
@media (max-width: 480px) {
	.hktb__filter-trigger span:not(.hktb__filter-badge) { display: none; }
	.hktb__filter-trigger { padding: 8px 10px; }
	.hktb__count-label { display: none; }
	.hktb__select { min-width: 0; width: 110px; }
}
/* سایز خیلی کوچک — حذف view toggle */
@media (max-width: 380px) {
	.hktb__views { display: none; }
	.hktb { grid-template-columns: auto 1fr auto; }
}

.hktb__orderby {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.hktb__select {
	padding: 9px 36px 9px 14px;
	border-radius: 10px;
	border: 1px solid var(--hks-card-border);
	background: var(--hks-card-bg);
	color: var(--hks-fg);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	min-width: 160px;
	appearance: none;
	-webkit-appearance: none;
}
[dir="ltr"] .hktb__select { padding: 9px 14px 9px 36px; }
.hktb__sort-icon {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hks-fg-muted);
	pointer-events: none;
}
.hktb__select:focus { outline: 2px solid var(--hks-purple-glow); }
.hktb__select option { background: var(--cb-bg-2, #111); color: var(--hks-fg); }

.hktb__chips {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding-top: 10px;
	border-top: 1px dashed var(--hks-card-border);
}
.hktb__chips-label {
	font-size: 12px;
	color: var(--hks-fg-muted);
	margin-inline-end: 4px;
}
.hktb__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 12px;
	border-radius: 999px;
	background: var(--hks-purple);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s;
}
.hktb__chip:hover { background: #ef4444; }
.hktb__chips-clear {
	font-size: 11.5px;
	color: var(--hks-fg-muted);
	text-decoration: underline;
	margin-inline-start: 4px;
}
.hktb__chips-clear:hover { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID
   ═══════════════════════════════════════════════════════════════ */
.haika-products {
	display: grid;
	gap: 18px;
}
/* Desktop / Tablet grid */
@media (min-width: 721px) {
	.haika-products--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.haika-products--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.haika-products--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.haika-products--cols-1 { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 721px) {
	.haika-products--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

/* List view (desktop) */
.haika-products.is-list-view { grid-template-columns: 1fr; }
@media (min-width: 721px) {
	.haika-products.is-list-view .hkc {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 18px;
		padding: 12px;
	}
	.haika-products.is-list-view .hkc__media { aspect-ratio: 1/1; }
	.haika-products.is-list-view .hkc__body { padding: 0; }
	.haika-products.is-list-view .hkc__quick-add { position: static; transform: none; opacity: 1; padding: 12px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE VIEW MODES (≤ 720px)
   ═══════════════════════════════════════════════════════════════
   سه حالت اختصاصی موبایل (override روی همه‌ی cols-* و list-view):
   • mob-compact:    2 ستون فشرده — تصویر/قیمت/badge، بدون body
   • mob-standard:   1 ستون استاندارد (default)
   • mob-magazine:   نمایش بزرگ مجله‌ای — تصویر hero با اطلاعات روی gradient
*/
@media (max-width: 720px) {
	/* base: standard همیشه ۱ ستون است */
	.haika-products { grid-template-columns: 1fr !important; gap: 12px; }

	/* Compact (mob-grid) — ۲ ستون */
	.haika-products.is-mob-compact { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
	.haika-products.is-mob-compact .hkc { font-size: 12.5px; }
	.haika-products.is-mob-compact .hkc__body { padding: 10px; gap: 4px; }
	.haika-products.is-mob-compact .hkc__title { font-size: 12.5px; min-height: calc(1.4em * 2); line-height: 1.4; }
	.haika-products.is-mob-compact .hkc__cat { display: none; }
	.haika-products.is-mob-compact .hkc__rating { display: none; }
	.haika-products.is-mob-compact .hkc__swatches { display: none; }
	.haika-products.is-mob-compact .hkc__price { font-size: 12.5px; }
	.haika-products.is-mob-compact .hkc__urgency { font-size: 9px; padding: 2px 5px; }
	.haika-products.is-mob-compact .hkc__quick-view,
	.haika-products.is-mob-compact .hkc__quick-add { display: none; }
	.haika-products.is-mob-compact .hkc__wishlist { width: 28px; height: 28px; }
	.haika-products.is-mob-compact .hkc__badges { font-size: 9px; gap: 2px; }
	.haika-products.is-mob-compact .hkc__badge { font-size: 9px; padding: 2px 6px; }

	/* Standard mode — کارت بزرگ‌تر full-width با همه‌ی اطلاعات */
	.haika-products.is-mob-standard,
	.haika-products:not(.is-mob-compact):not(.is-mob-magazine) {
		grid-template-columns: 1fr !important;
	}
	.haika-products.is-mob-standard .hkc,
	.haika-products:not(.is-mob-compact):not(.is-mob-magazine) .hkc {
		display: grid;
		grid-template-columns: 130px 1fr;
		gap: 0;
	}
	.haika-products.is-mob-standard .hkc__media,
	.haika-products:not(.is-mob-compact):not(.is-mob-magazine) .hkc__media {
		aspect-ratio: 1/1;
	}
	.haika-products.is-mob-standard .hkc__body,
	.haika-products:not(.is-mob-compact):not(.is-mob-magazine) .hkc__body {
		padding: 12px;
	}
	.haika-products.is-mob-standard .hkc__quick-add,
	.haika-products:not(.is-mob-compact):not(.is-mob-magazine) .hkc__quick-add {
		position: static;
		opacity: 1;
		transform: none;
		padding: 8px 0 0;
		background: none;
	}
	.haika-products.is-mob-standard .hkc__quick-view {
		display: none;
	}

	/* Magazine mode — کارت بزرگ، تصویر hero، اطلاعات روی gradient */
	.haika-products.is-mob-magazine { grid-template-columns: 1fr !important; gap: 16px; }
	.haika-products.is-mob-magazine .hkc {
		display: block;
		position: relative;
		overflow: hidden;
		border-radius: 20px;
	}
	.haika-products.is-mob-magazine .hkc__media {
		aspect-ratio: 4/5;
		width: 100%;
	}
	.haika-products.is-mob-magazine .hkc__body {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 80px 16px 16px;
		background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
		color: #fff;
		gap: 6px;
	}
	.haika-products.is-mob-magazine .hkc__title a { color: #fff; }
	.haika-products.is-mob-magazine .hkc__cat { color: rgba(255,255,255,0.85); }
	.haika-products.is-mob-magazine .hkc__title { font-size: 17px; }
	.haika-products.is-mob-magazine .hkc__price { color: #fff; font-size: 16px; }
	.haika-products.is-mob-magazine .hkc__price del { color: rgba(255,255,255,0.6); }
	.haika-products.is-mob-magazine .hkc__price ins { color: var(--ks-purple-glow); }
	.haika-products.is-mob-magazine .hkc__urgency { background: rgba(245,158,11,0.95); color: #000; }
	.haika-products.is-mob-magazine .hkc__quick-add {
		position: static;
		opacity: 1;
		transform: none;
		padding: 10px 0 0;
		background: none;
	}
	.haika-products.is-mob-magazine .hkc__rating { display: none; }
	.haika-products.is-mob-magazine .hkc__swatches { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD (hkc)
   ═══════════════════════════════════════════════════════════════ */
.hkc {
	position: relative;
	background: var(--hks-card-bg);
	border: 1px solid var(--hks-card-border);
	border-radius: var(--hks-radius);
	overflow: hidden;
	transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), border-color .2s, box-shadow .2s;
	display: flex;
	flex-direction: column;
}
.hkc:hover {
	transform: translateY(-4px);
	border-color: var(--hks-card-hover);
	box-shadow: 0 18px 40px rgba(231, 166, 174, 0.18);
}
.hkc.is-out-of-stock { opacity: .78; }

/* Media */
.hkc__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--hks-card-bg-2);
	isolation: isolate;
}
.hkc__media-link { display: block; width: 100%; height: 100%; }
.hkc__img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .45s, transform .6s;
}
.hkc__img--primary { z-index: 1; }
.hkc__img--hover {
	z-index: 2;
	opacity: 0;
	transform: scale(1.05);
}
.hkc:hover .hkc__img--hover { opacity: 1; transform: scale(1); }
.hkc:hover .hkc__img--primary { transform: scale(1.05); }
.hkc__img-placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--hks-fg-muted);
}

/* Badges */
.hkc__badges {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: calc(100% - 60px);
}
.hkc__badge {
	background: var(--badge-c, var(--hks-purple-glow));
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* Wishlist (top-end) */
.hkc__wishlist {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 4;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.95);
	color: #94a3b8;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	transition: all .2s;
}
.hkc__wishlist:hover { transform: scale(1.1); color: #ef4444; }
.hkc__wishlist.is-active {
	background: #ef4444;
	color: #fff;
	animation: hkc-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hkc__wishlist.is-active svg { fill: currentColor; }
@keyframes hkc-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* Quick view (bottom-end) */
.hkc__quick-view {
	position: absolute;
	bottom: 12px;
	inset-inline-end: 12px;
	z-index: 4;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.95);
	color: var(--hks-purple);
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(8px);
	transition: all .25s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.hkc:hover .hkc__quick-view { opacity: 1; transform: translateY(0); }
.hkc__quick-view:hover { background: var(--hks-purple); color: #fff; transform: scale(1.1); }

/* Quick add (slide up) */
.hkc__quick-add {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 50px 12px 12px;
	z-index: 3;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 40%);
}
.hkc:hover .hkc__quick-add { transform: translateY(0); }
.hkc__add-btn, .hkc__quick-add .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 14px !important;
	background: linear-gradient(135deg, var(--hks-purple-glow), var(--hks-purple)) !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	border: 0 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all .2s !important;
	box-shadow: 0 8px 20px rgba(231, 166, 174, 0.4);
}
.hkc__add-btn:hover, .hkc__quick-add .button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(231, 166, 174, 0.55) !important;
}

/* Body */
.hkc__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	flex: 1;
}
.hkc__cat {
	font-size: 11px;
	font-weight: 600;
	color: var(--hks-purple-glow);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.hkc__cat:hover { text-decoration: underline; }
.hkc__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.55em * 2);
}
.hkc__title a {
	color: var(--hks-fg);
	text-decoration: none;
}
.hkc__title a:hover { color: var(--hks-purple-glow); }

/* Rating */
.hkc__rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--hks-fg-muted);
}
.hkc__stars {
	font-size: 13px;
	background: linear-gradient(90deg, #fbbf24 calc(var(--rating) / 5 * 100%), rgba(148, 163, 184, 0.3) calc(var(--rating) / 5 * 100%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	letter-spacing: 1px;
}
.hkc__rating-count { font-size: 10px; opacity: .7; }

/* Swatches */
.hkc__swatches {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 2px 0;
}
.hkc__swatch-row {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.hkc__swatch--color {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.6);
	box-shadow: 0 0 0 1px var(--hks-card-border);
	transition: transform .15s;
	cursor: pointer;
}
.hkc__swatch--color:hover { transform: scale(1.2); }
.hkc__swatch--size {
	min-width: 26px;
	padding: 2px 6px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--hks-fg-muted);
	background: var(--hks-card-bg-2);
	border: 1px solid var(--hks-card-border);
	border-radius: 5px;
	text-align: center;
	transition: all .15s;
}
.hkc__swatch--size:hover {
	color: var(--hks-purple-glow);
	border-color: var(--hks-purple-glow);
}

/* Price */
.hkc__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}
.hkc__price {
	font-size: 14px;
	font-weight: 800;
	color: var(--hks-fg);
}
.hkc__price del { display: block; font-size: 11px; opacity: .55; font-weight: 400; line-height: 1; margin-bottom: 2px; }
.hkc__price ins { background: transparent; text-decoration: none; color: var(--hks-purple-glow); }

.hkc__urgency {
	display: inline-block;
	padding: 3px 8px;
	background: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	animation: hkc-pulse-orange 2.5s ease-in-out infinite;
}
.hkc__urgency--out {
	background: rgba(239, 68, 68, 0.15);
	color: #ef4444;
	animation: none;
}
@keyframes hkc-pulse-orange {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
	50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15); }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR (V2)
   ═══════════════════════════════════════════════════════════════ */
.haika-shop-sidebar { position: sticky; top: 90px; max-height: calc(100vh - 100px); overflow-y: auto; }
.haika-filter-sidebar {
	background: var(--hks-card-bg);
	border: 1px solid var(--hks-card-border);
	border-radius: var(--hks-radius);
	padding: 18px;
	backdrop-filter: blur(20px);
}
.haika-filter-sidebar__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hks-card-border);
}
.haika-filter-sidebar__header h3 { margin: 0; font-size: 15px; color: var(--hks-fg); }
.haika-filter-sidebar__close { display: none; background: 0; border: 0; color: var(--hks-fg-muted); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM-SHEET (Filter Drawer)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
	.haika-shop-sidebar {
		position: fixed;
		bottom: -100%;
		left: 0;
		right: 0;
		top: auto;
		max-height: 85vh;
		z-index: 10000;
		transition: bottom .35s cubic-bezier(0.22, 1, 0.36, 1);
		padding: 0;
		overflow: hidden;
	}
	.haika-shop-sidebar.is-open { bottom: 0; }
	.haika-filter-sidebar {
		border-radius: 24px 24px 0 0;
		padding: 24px 20px;
		max-height: 85vh;
		overflow-y: auto;
		box-shadow: 0 -16px 40px rgba(0,0,0,.4);
	}
	.haika-filter-sidebar::before {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		background: var(--hks-card-border);
		border-radius: 4px;
		margin: 0 auto 14px;
	}
	.haika-filter-sidebar__close { display: inline-flex; }
	.haika-filter-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9999;
		opacity: 0;
		transition: opacity .25s;
		pointer-events: none;
	}
	.haika-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   FILTER GROUPS (sidebar)
   ═══════════════════════════════════════════════════════════════ */
.haika-filter-group {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hks-card-border);
}
.haika-filter-group:last-of-type { border-bottom: 0; }
.haika-filter-group__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hks-fg);
}
.haika-filter-list,
.haika-filter-quick {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.haika-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s;
	font-size: 13px;
	color: var(--hks-fg);
}
.haika-check:hover { background: var(--hks-purple-soft); }
.haika-check.is-active { background: var(--hks-purple-soft); color: var(--hks-purple-glow); font-weight: 700; }
.haika-check input { width: 16px; height: 16px; accent-color: var(--hks-purple); cursor: pointer; }
.haika-check__label { flex: 1; }
.haika-check__count { font-size: 11px; color: var(--hks-fg-muted); }

.haika-filter-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.haika-filter-price label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hks-fg-muted); }
.haika-filter-price input {
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--hks-card-border);
	background: var(--hks-card-bg-2);
	color: var(--hks-fg);
	font-family: inherit;
	font-size: 13px;
}
.haika-filter-price input:focus { outline: 2px solid var(--hks-purple-glow); }

.haika-filter-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.haika-btn--block { width: 100%; }
.haika-btn--primary {
	background: linear-gradient(135deg, var(--hks-purple-glow), var(--hks-purple));
	color: #fff;
	border: 0;
	padding: 12px 18px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
}
.haika-btn--ghost {
	background: transparent;
	color: var(--hks-fg);
	border: 1px solid var(--hks-card-border);
	padding: 12px 18px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.haika-shop-empty {
	text-align: center;
	padding: 80px 20px;
	background: var(--hks-card-bg);
	border: 1px dashed var(--hks-card-border);
	border-radius: 24px;
}
.haika-shop-empty__icon {
	display: inline-flex;
	width: 80px; height: 80px;
	border-radius: 50%;
	background: var(--hks-purple-soft);
	color: var(--hks-purple-glow);
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.haika-shop-empty__title { font-size: 19px; margin: 0 0 8px; color: var(--hks-fg); }
.haika-shop-empty__desc { color: var(--hks-fg-muted); margin: 0 0 18px; }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION (hidden when infinite scroll is on, but styled)
   ═══════════════════════════════════════════════════════════════ */
.haika-shop-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 36px;
	flex-wrap: wrap;
}
.haika-shop-pagination .page-numbers {
	min-width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--hks-fg);
	background: var(--hks-card-bg);
	border: 1px solid var(--hks-card-border);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	transition: all .15s;
}
.haika-shop-pagination .page-numbers:hover {
	border-color: var(--hks-purple-glow);
	color: var(--hks-purple-glow);
}
.haika-shop-pagination .page-numbers.current {
	background: linear-gradient(135deg, var(--hks-purple-glow), var(--hks-purple));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(231, 166, 174, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   INFINITE SCROLL — Sentinel + Status + Spinner + Skeleton
   ═══════════════════════════════════════════════════════════════ */
.haika-loadmore-sentinel {
	width: 100%;
	height: 1px;
	pointer-events: none;
}
.haika-loadmore-status {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	margin-top: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}
.haika-loadmore-status.is-visible { opacity: 1; }
.haika-loadmore-spinner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--hks-card-bg);
	border: 1px solid var(--hks-card-border);
	color: var(--hks-fg);
	font-size: 13px;
	font-weight: 600;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.haika-loadmore-spinner svg {
	color: var(--hks-purple-glow);
	animation: hks-spin .9s linear infinite;
	transform-origin: 50% 50%;
}
.haika-loadmore-spinner.is-end svg {
	color: #10b981;
	animation: none;
}
@keyframes hks-spin { to { transform: rotate(360deg); } }

.haika-loadmore-btn {
	display: block;
	margin: 28px auto 0;
	padding: 12px 28px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hks-purple-glow), var(--hks-purple));
	color: #fff;
	border: 0;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 6px 18px rgba(231, 166, 174, 0.35);
}
.haika-loadmore-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(231, 166, 174, 0.45); }

.haika-loadmore-skeletons {
	display: contents;
}
.hkc--skeleton { pointer-events: none; }
.hkc__sk {
	background: linear-gradient(90deg,
		rgba(255,255,255,0.04) 0%,
		rgba(255,255,255,0.10) 50%,
		rgba(255,255,255,0.04) 100%);
	background-size: 200% 100%;
	animation: hkc-shimmer 1.4s linear infinite;
	border-radius: 6px;
}
.hkc__sk--img { width: 100%; aspect-ratio: 3/4; border-radius: 12px; }
.hkc__sk--line { height: 12px; margin-top: 8px; }
@keyframes hkc-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.haika-theme-light .hkc__sk {
	background: linear-gradient(90deg,
		rgba(107, 45, 92, 0.04) 0%,
		rgba(107, 45, 92, 0.10) 50%,
		rgba(107, 45, 92, 0.04) 100%);
	background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════════════════════
   Card enter animation (cards added by infinite scroll)
   ═══════════════════════════════════════════════════════════════ */
.hkc--enter {
	opacity: 0;
	transform: translateY(12px);
	animation: hkc-enter .4s ease forwards;
}
@keyframes hkc-enter {
	to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   Hide native WC pagination when infinite-scroll is active
   ═══════════════════════════════════════════════════════════════ */
.haika-shop .woocommerce-pagination { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   CURVANA polish — رنگ برند کِروانا + امضای «نخ طلایی»
   (افزایشی؛ سازگار با سه‌نما — رنگ‌های accent از --cv-* می‌آیند)
   ═══════════════════════════════════════════════════════════════ */
.haika-shop{
	--hks-purple:      var(--cv-plum, #6B2D5C);
	--hks-purple-glow: var(--cv-rose, #E7A6AE);
	--hks-purple-soft: rgba(107,45,92,.10);
	--hks-card-hover:  rgba(201,162,75,.40);
}
/* hero با ته‌رنگ برند + «نخ طلایی» زیر عنوان */
.haika-shop-search-hero{
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(107,45,92,.16), transparent 70%),
		radial-gradient(ellipse 50% 70% at 100% 100%, rgba(231,166,174,.16), transparent 70%);
}
.haika-shop-search-hero .haika-shop-title{ position: relative; }
.haika-shop-search-hero .haika-shop-title::after{
	content:""; display:block; width:90px; height:14px; margin:8px auto 0;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 16'%3E%3Cpath d='M4 5 C24 17 38 17 47 8 C56 -1 70 1 80 10' fill='none' stroke='%23C9A24B' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* «نخ طلایی» زیر نام محصول هنگام hover (مثل موکاپ) */
.haika-shop .hkc__title{ position: relative; display: inline-block; }
.haika-shop .hkc__title::after{
	content:""; position:absolute; right:0; bottom:-5px; width:0; height:8px; opacity:0;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M3 3 C18 11 28 11 34 5 C40 -1 50 1 57 7' fill='none' stroke='%23C9A24B' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right/contain;
	transition: all .35s var(--cv-ease, ease);
}
.haika-shop .hkc:hover .hkc__title::after{ width:46px; opacity:1; }
/* چیپ‌های فیلتر/مرتب‌سازیِ فعال = بنفش برند (از طریق توکن‌ها از قبل اعمال شده) */