/*
====================================================================
MOBILE UX — ناوبری پایین، نوار چسبان افزودن به سبد، فیلتر bottom-sheet
====================================================================
این فایل فقط زیر breakpoint موبایل اثر دارد؛ در دسکتاپ این عناصر یا
اصلاً رندر نمی‌شوند یا با display:none مخفی‌اند.
====================================================================
*/

.vitrin-bottom-nav,
.vitrin-sticky-atc,
.vitrin-filter-mobile-toggle,
.vitrin-filter-backdrop {
	display: none;
}

@media (max-width: 768px) {

	/* ---------- ناوبری پایین ---------- */
	.vitrin-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		inset-inline: 0;
		z-index: 60;
		background: var(--color-surface);
		border-top: 1px solid var(--color-border);
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -4px 16px rgba(26, 29, 35, 0.06);
	}

	.vitrin-bottom-nav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding-block: var(--space-2);
		font-size: 0.65rem;
		color: var(--color-ink-soft);
		position: relative;
	}

	.vitrin-bottom-nav__item.is-active {
		color: var(--color-primary);
	}

	.vitrin-bottom-nav__cart-icon {
		position: relative;
	}

	.vitrin-bottom-nav__badge {
		position: absolute;
		top: -4px;
		inset-inline-end: -8px;
		min-width: 16px;
		height: 16px;
		font-size: 0.6rem;
	}

	/* جا باز کردن برای محتوای صفحه تا پشت نوار پایین قایم نشود */
	body {
		padding-bottom: 56px;
	}

	/* ---------- نوار چسبان افزودن به سبد (روی صفحه‌ی محصول) ---------- */
	.vitrin-sticky-atc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		position: fixed;
		bottom: 56px; /* بالای bottom-nav می‌نشیند */
		inset-inline: 0;
		z-index: 55;
		background: var(--color-surface);
		border-top: 1px solid var(--color-border);
		padding: var(--space-3) var(--space-4);
		box-shadow: 0 -4px 16px rgba(26, 29, 35, 0.08);
	}

	.vitrin-sticky-atc[hidden] {
		display: none;
	}

	.vitrin-sticky-atc__price {
		font-weight: 700;
		font-size: var(--font-size-md);
		color: var(--color-ink);
	}

	.vitrin-sticky-atc .vitrin-btn {
		flex-shrink: 0;
	}

	/* ---------- فیلتر به‌صورت bottom-sheet ---------- */
	.vitrin-filter-mobile-toggle {
		display: block;
		width: 100%;
		margin-bottom: var(--space-4);
	}

	.vitrin-filter-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(26, 29, 35, 0.4);
		z-index: 70;
	}

	.vitrin-filter-backdrop[hidden] {
		display: none;
	}

	.vitrin-shop-sidebar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		top: auto;
		max-height: 80vh;
		overflow-y: auto;
		z-index: 71;
		background: var(--color-surface);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		padding: var(--space-4);
		transform: translateY(100%);
		transition: transform var(--transition-base);
	}

	.vitrin-shop-sidebar.is-open {
		transform: translateY(0);
	}

	.vitrin-shop-sidebar__mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--space-4);
		padding-bottom: var(--space-3);
		border-bottom: 1px solid var(--color-border);
		font-weight: 700;
	}
}

@media (min-width: 769px) {
	.vitrin-shop-sidebar__mobile-header {
		display: none;
	}
}

/* ---------- فهرست فیلتر (همه‌ی اندازه‌ها) ---------- */
.vitrin-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vitrin-filter-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) 0;
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

.vitrin-filter-item.is-active a {
	color: var(--color-primary);
	font-weight: 600;
}

.vitrin-filter-item__count {
	color: var(--color-ink-soft);
	font-size: var(--font-size-xs);
}