/*
 * هدر/فوترِ اختصاصیِ ویکران — جایگزینِ Elementor.
 * طراحی: مارکت‌پلیسِ مدرن (سبکِ دیجی‌کالا) — سرچِ پررنگِ مرکزی، لوگوی راست،
 * حساب+سبد چپ، ردیفِ منوی هم‌تراز، sticky که موقعِ اسکرول جمع می‌شود.
 * از توکن‌های مرکزیِ افزونه (--vk-*، در tokens.css سراسری) استفاده می‌کند.
 */

/* ═══════════════════════════════════════════════════════════
   هدر
   ═══════════════════════════════════════════════════════════ */

/* رفعِ شکستنِ position:sticky: یک قاعده‌ی سراسری body را `overflow-x: hidden`
   می‌کند که body را اسکرول-کانتینر کرده و sticky را از کار می‌اندازد.
   `overflow-x: clip` همان جلوگیری از اسکرولِ افقی را می‌دهد بدونِ این عارضه. */
html body {
	overflow-x: clip;
}

/* ── Sticky footer (فوترِ چسبیده به کفِ صفحه) ──
   بدونِ این، هر صفحه‌ای که محتوایش از ارتفاعِ مانیتور کوتاه‌تر باشد (مثلاً سبد
   با چند آیتم روی نمایشگرِ بلند) زیرِ فوتر یک نوارِ سفیدِ خالی نشان می‌داد.
   body حداقل یک صفحه ارتفاع می‌گیرد و <main> فضای اضافی را پر می‌کند تا فوتر
   همیشه کفِ صفحه بنشیند. `min-height:0` روی main لازم است تا محتوای بلند
   همچنان درست سرریز/اسکرول کند.
   نکته: فرزندانِ fixed/absoluteِ body (نوارِ پایینِ موبایل، دکمه‌ی واتساپ،
   اسکیپ‌لینک) خارج از جریان‌اند و flex روی آن‌ها اثری ندارد. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh; /* موبایل: ارتفاعِ واقعیِ دیداری، بدونِ نوارِ آدرس */
}

main.site-main {
	flex: 1 0 auto;
	min-height: 0;
}

.vikrun-footer {
	flex-shrink: 0;
}

.vikrun-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--vk-border, #eeeeee);
	transition: box-shadow .22s ease;
}
.vikrun-header.vk-scrolled {
	box-shadow: 0 6px 22px rgba(17, 17, 17, .07);
}

body:has(.vikrun-header) {
	/* جبرانِ ارتفاعِ هدرِ چسبان تا محتوای صفحه زیرش قایم نشود */
	scroll-padding-top: 132px;
}

/* ── ردیفِ بالا: لوگو | سرچ | حساب+سبد (تمامِ عرض پر می‌شود) ── */
.vikrun-header-top {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	justify-content: space-between;
}

.vikrun-header-brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.vikrun-header-brand img {
	display: block;
	height: 50px;
	width: auto;
}
.vikrun-header-sitename {
	font-size: 20px;
	font-weight: 900;
	color: var(--vk-ink, #111111);
}

/* ── سرچ: عنصرِ اصلیِ هدر، کلِ فضای بینِ لوگو و دکمه‌ها را پر می‌کند (کشیده/غالب) ── */
.vikrun-header-search {
	flex: 1 1 auto;
	min-width: 0;
}
/* override پررنگ و on-brand روی سرچِ افزونه (selectorِ اختصاصی‌تر از قواعدِ ID افزونه) */
.vikrun-header-search #rb_header_search .vk-header-search__input {
	min-height: 50px;
	line-height: 50px;
	background: #f4f4f6;
	border: 1.5px solid transparent;
	border-radius: 14px;
	/* ۱۶px: جلوگیری از auto-zoomِ iOS هنگامِ focus روی موبایل */
	font-size: 16px;
	font-weight: 600;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vikrun-header-search #rb_header_search:hover .vk-header-search__input,
.vikrun-header-search #rb_header_search .vk-header-search__input:focus {
	background: #fff;
	border-color: var(--vk-yellow, #ffcd11);
	box-shadow: 0 0 0 4px rgba(255, 205, 17, .20);
}
.vikrun-header-search #rb_header_search .vk-header-search__button {
	right: auto;
	left: 6px;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--vk-yellow, #ffcd11);
}
.vikrun-header-search #rb_header_search .vk-header-search__button svg path {
	stroke: var(--vk-ink, #111111);
	fill: var(--vk-ink, #111111);
}
/* چون دکمه به چپ رفت، جای پدینگِ ورودی هم برعکس می‌شود */
.vikrun-header-search #rb_header_search .vk-header-search__input {
	padding: 0 16px 0 54px;
}

/* ── حساب + سبد ── */
.vikrun-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.vikrun-header-account {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--vk-ink, #111111) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}
.vikrun-header-account svg { flex-shrink: 0; }
.vikrun-header-account:hover {
	background: var(--vk-yellow-tint, #fff8d9);
	color: var(--vk-ink, #111111) !important;
}

.vikrun-header .vikrun-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	/* !important برای غلبه بر رنگِ لینکِ پیش‌فرضِ #c36 در reset.css والد که دیرتر لود می‌شود */
	border: 1px solid var(--vk-border, #eeeeee) !important;
	background: #fff;
	color: var(--vk-ink, #111111) !important;
	cursor: pointer;
	padding: 0;
	transition: background-color .2s ease, border-color .2s ease;
}
.vikrun-header .vikrun-header-cart svg { stroke: var(--vk-ink, #111111); }
.vikrun-header .vikrun-header-cart:hover {
	background: var(--vk-yellow-tint, #fff8d9);
	border-color: var(--vk-yellow, #ffcd11) !important;
}

.vikrun-cart-count {
	position: absolute;
	top: -5px;
	left: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--vk-yellow, #ffcd11);
	color: var(--vk-ink, #111111);
	font-size: 10px;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}
.vikrun-cart-count:empty,
.vikrun-cart-count[data-zero="1"] {
	display: none;
}

/* ── ردیفِ منو: هم‌تراز با لوگو (راست‌چین)، نه وسط‌چین ── */
.vikrun-header-nav {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px 12px;
	border-top: 1px solid var(--vk-border, #eeeeee);
	overflow: hidden;
	transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.vikrun-header-nav .vk-pro-desktop {
	justify-content: flex-start !important;
}

/* sticky-shrink: ردیفِ منو موقعِ اسکرول جمع می‌شود (فقط دسکتاپ) */
@media (min-width: 769px) {
	.vikrun-header.vk-scrolled .vikrun-header-nav {
		max-height: 0;
		opacity: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top-color: transparent;
	}
}

/* ── ریسپانسیو ── */
@media (max-width: 768px) {
	.vikrun-header-top {
		flex-wrap: wrap;
		gap: 12px;
		padding: 10px 16px;
	}
	.vikrun-header-brand img { height: 42px; }
	.vikrun-header-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin: 0;
	}
	/* ورود روی موبایل فقط آیکون */
	.vikrun-header-account .vk-account-label { display: none; }
	.vikrun-header-account {
		width: 44px;
		padding: 0;
		justify-content: center;
	}
	/* دکمه‌ی «منو»ی هدر روی موبایل زائد است — ناوبریِ کامل از نوارِ پایین
	   (تریگرِ «دسته‌بندی‌ها» → همان مگامنو) در دسترس است. هدر ۲-ردیفی می‌شود.

	   ⚠️ اینجا `display:none` نگذارید: پنلِ کشویی و اورلیِ مگامنو (`.vk-pro-mobile-panel`
	   و `.vk-pro-mobile-overlay`) فرزندِ همین nav هستند و `display:none` کلِ زیردرخت را
	   می‌کُشد — حتی `position:fixed` را. آن‌وقت تریگرِ «دسته‌بندی‌ها» کلاسِ `vk-mobile-open`
	   را می‌گذارد ولی هیچ‌چیز رندر نمی‌شود (دکمه کار نمی‌کند). پس فقط نوارِ دیداری پنهان
	   می‌شود و خودِ nav بی‌اثر ولی زنده می‌ماند. */
	.vikrun-header-nav {
		padding: 0;
		border-top: 0;
	}
	/* نوارِ دسکتاپ صریحاً اینجا هم پنهان می‌شود: ProMenu در ≤767px پنهانش می‌کند
	   ولی این بلاک ≤768px است — بدونِ این، دقیقاً روی ۷۶۸px نوار ظاهر می‌شد. */
	.vikrun-header-nav .vk-pro-desktop,
	.vikrun-header-nav .vk-pro-mobile-toggle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   فوتر
   ═══════════════════════════════════════════════════════════ */
.vikrun-footer {
	background: var(--vk-bg, #fafafa);
	border-top: 1px solid var(--vk-border, #eeeeee);
	padding: 36px 20px 0;
	direction: rtl;
}

.vikrun-footer-top {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--vk-border, #eeeeee);
}
.vikrun-footer-brand img { max-height: 44px; width: auto; }

.vikrun-back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--vk-muted, #747474);
	text-decoration: none;
	transition: color .2s ease;
}
.vikrun-back-to-top:hover { color: var(--vk-ink, #111111); }

.vikrun-footer-contact {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	padding: 24px 0;
	font-size: 14px;
	color: var(--vk-text, #2b2b2b);
}
.vikrun-footer-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.vikrun-footer-contact-item svg {
	flex-shrink: 0;
	color: var(--vk-yellow-strong, #e7b900);
}
.vikrun-footer-contact-item a { color: inherit; text-decoration: none; }
.vikrun-footer-contact-item a:hover { color: var(--vk-ink, #111111); }

.vikrun-footer-trust {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	padding-bottom: 32px;
}
.vikrun-footer-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--vk-border, #eeeeee);
	border-radius: var(--vk-radius-sm, 10px);
	font-size: 13px;
	font-weight: 700;
	color: var(--vk-ink, #111111);
}
.vikrun-footer-trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--vk-yellow-tint, #fff8d9);
	color: var(--vk-yellow-strong, #e7b900);
}
.vikrun-footer-trust-icon svg { width: 22px; height: 22px; }

.vikrun-footer-columns {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	gap: 24px;
	padding-bottom: 32px;
	align-items: start;
}
.vikrun-footer-col h3 {
	font-size: 14px;
	font-weight: 900;
	color: var(--vk-ink, #111111);
	margin: 0 0 16px;
}
.vikrun-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}
.vikrun-footer-col a {
	font-size: 13px;
	color: var(--vk-muted, #747474);
	text-decoration: none;
	transition: color .18s ease;
}
.vikrun-footer-col a:hover { color: var(--vk-ink, #111111); }
/* مهرِ اینماد: عمودی وسطِ ردیفِ ستون‌ها (نه بالا-چینِ شناور) + جعبه‌ی ملایم */
.vikrun-footer-enamad {
	align-self: center;
	justify-self: center;
}
.vikrun-footer-enamad img {
	border-radius: var(--vk-radius-sm, 10px);
	background: #fff;
	padding: 6px;
	border: 1px solid var(--vk-border, #eeeeee);
}

.vikrun-footer-bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding-bottom: 24px;
}
.vikrun-footer-bottom hr {
	border: none;
	border-top: 1px solid var(--vk-border, #eeeeee);
	margin: 0 0 18px;
}
.vikrun-footer-copyright {
	text-align: center;
	font-size: 12.5px;
	color: var(--vk-muted, #747474);
	margin: 0;
}

/* نوارِ پایینِ موبایل — فقط زیرِ ۷۶۸px */
.vikrun-mobile-bottom-bar { display: none; }

@media (max-width: 768px) {
	.vikrun-footer-columns { grid-template-columns: 1fr 1fr; }
	.vikrun-footer-enamad { grid-column: 1 / -1; justify-self: center; }
	.vikrun-footer-trust { grid-template-columns: repeat(2, 1fr); }

	.vikrun-mobile-bottom-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 90;
		background: #fff;
		border-top: 1px solid var(--vk-border, #eeeeee);
		padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
		justify-content: space-around;
		box-shadow: 0 -4px 18px rgba(17, 17, 17, .06);
	}

	/* این نوار fixed است و از layout بیرون است — بدونِ این padding، ~۶۱px
	   از انتهایِ هر صفحه (فوتر/آخرین بخش) همیشه زیرش پنهان می‌ماند و هیچ‌وقت
	   با اسکرول کامل دیده نمی‌شود. اندازه‌گیری‌شده روی ۳۷۵px: bottom-bar
	   ارتفاعش ۶۱px است. */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
	.vikrun-mobile-bottom-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		font-size: 10.5px;
		font-weight: 700;
		color: var(--vk-muted, #747474);
		text-decoration: none;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
	.vikrun-mobile-bottom-item:hover,
	.vikrun-mobile-bottom-item:active {
		color: var(--vk-ink, #111111);
	}
}

/* ── فوکوسِ کیبورد در هدر/فوتر/مگامنو ───────────────────────────────────────
   مگامنو `outline:none` داشت و هیچ نشانه‌ی فوکوسی نمی‌داد (کاربرِ کیبورد گم
   می‌شد). همان رینگِ زردِ برندِ صفحه‌ی اصلی، این‌بار برای کلِ نوارِ سایت.
   `:focus-visible` تا کلیکِ ماوس رینگ نیندازد. */
.vikrun-header a:focus-visible,
.vikrun-header button:focus-visible,
.vikrun-header input:focus-visible,
.vikrun-footer a:focus-visible,
.vikrun-footer button:focus-visible,
.vk-pro-menu a:focus-visible,
.vk-pro-menu button:focus-visible,
.vk-pro-floating-layer a:focus-visible,
.vk-pro-mobile-panel a:focus-visible,
.vk-pro-mobile-panel button:focus-visible {
	outline: 2px solid transparent; /* حالتِ کنتراستِ بالای ویندوز */
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(255, 205, 17, .55);
	border-radius: 10px;
}