/*
File: rafina/inc/frontend/header/header.css
پورت مستقیم از src/components/Header/Header.css مرجع (rafinastore.com)
متغیرهای رنگ و قوانین لوگو در assets/css/theme-vars.css مشترک هستند.
*/

.rafina-header {
	position: sticky;
	/* اگر نوار اطلاعیه چسبیده باشد، هدر درست زیرش می‌ایستد */
	top: var(--rafina-topbar-sticky-h, 0px);
	z-index: 100;
	backdrop-filter: blur(14px) saturate(140%);
	background: var(--rafina-header-bg);
	border-bottom: 1px solid var(--rafina-border);
	direction: rtl;
	font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif);
}
/*
 * کلید «چسبیدن هدر» خاموش. relative نه static تا z-index بماند؛ طرح دوطبقه
 * top منفی خودش را دارد و روی relative هدر را بالا می‌کشید (دیجیتال هرگز
 * has-top نمی‌گیرد، پس قاعده‌ی جدا نمی‌خواهد).
 */
.rafina-header.is-static,
.rafina-header.is-split.is-static.has-top {
	position: relative;
	top: auto;
}
/*
 * `flex-wrap` این‌جا فقط برای ردیف دوم نوار طلاست.
 *
 * بقیه‌ی عناصر هدر `flex-shrink` و پهنای خودشان را دارند و هیچ‌وقت به سر خط
 * بعد نمی‌روند؛ تنها چیزی که `flex-basis: 100%` دارد همان ردیف طلاست. پس این
 * تغییر روی هدر بدون طلا هیچ اثری ندارد — سنجیده شد.
 */
.rafina-nav-wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 20px; flex-wrap: wrap; }

/* ردیف اول باید همان چیدمان قبلی را داشته باشد، پس اعضایش پیش از ردیف طلا می‌آیند */
.rafina-nav-wrap > .rafina-logo,
.rafina-nav-wrap > .rafina-main-links,
.rafina-nav-wrap > .rafina-nav-search,
.rafina-nav-wrap > .rafina-search-wrap,
.rafina-nav-wrap > .rafina-nav-actions { order: 1; }

/*
 * تا وقتی فایل لوگو نرسیده، مرورگر متن alt را داخل قاب تصویر می‌کشد.
 * روی رفرش، برای یک لحظه نام فروشگاه به‌جای لوگو دیده می‌شد و بعد می‌پرید.
 * با رنگ نامرئی، جای تصویر خالی می‌ماند تا خودش برسد؛ خواننده‌ی صفحه هنوز
 * alt را می‌خواند، پس چیزی از دسترس‌پذیری کم نمی‌شود.
 */
.rafina-logo-img { color: transparent; }

.rafina-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; flex-shrink: 0; text-decoration: none; color: var(--rafina-header-text, var(--rafina-text)); }

/*
 * نام کنار لوگو. قاب فقط وقتی فلکس می‌شود که نام داخلش باشد، وگرنه لوگوی
 * تنهای هر فروشگاه چند پیکسل جابه‌جا می‌شد؛ بی :has همان vertical-align بس است.
 */
.rafina-logo-link:has(.rafina-logo-name) { display: flex; align-items: center; }
.rafina-logo-name { display: inline-block; vertical-align: middle; margin-inline-start: 10px; font-weight: 800; font-size: 15px; color: var(--rafina-text); white-space: nowrap; }

.rafina-main-links { display: flex; align-items: center; gap: 30px; }
/* فقط لینک‌های خود منو؛ نه لینک‌هایی که داخل پنل مگا منو باز می‌شوند */
.rafina-main-links > a { font-size: 15px; color: var(--rafina-header-text, var(--rafina-text-dim)); font-weight: 500; text-decoration: none; transition: color .2s ease; }
.rafina-main-links > a:hover { color: var(--rafina-header-link-hover, var(--rafina-text)); }

.rafina-nav-search {
	display: flex; align-items: center; gap: 8px; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border-2);
	border-radius: 11px; padding: 9px 14px; flex: 1; max-width: 340px; min-width: 0;
}
.rafina-nav-search svg { width: 16px; height: 16px; color: var(--rafina-text-dimmer); flex-shrink: 0; }
.rafina-nav-search input { background: transparent; border: none; outline: none; color: var(--rafina-text); font-family: inherit; font-size: 14px; width: 100%; min-width: 0; }
@media (max-width: 1100px) { .rafina-nav-search { display: none; } }

/* ---------------------------------------------------------
   نوار قیمت طلای ۱۸ عیار
   ردیف جداگانه‌ی خودش، وسط‌چین، زیر ردیف اصلی هدر.
   در هر دو ظاهر هدر با همان مارک‌آپ کار می‌کند.
   --------------------------------------------------------- */

/*
 * ردیف تمام‌عرض است تا نوار دقیقاً وسط هدر بنشیند — نه وسط فضای باقی‌مانده.
 * وقتی کنار دکمه‌ها بود، هر بار که تعداد دکمه‌ها عوض می‌شد جای نوار هم
 * می‌لغزید و در عرض‌های میانی ناچار بودیم برچسبش را پنهان کنیم.
 */
/* در ظاهر کلاسیک اصلاً دیده نمی‌شود؛ آن‌جا نوار طلا ردیف خودش را دارد */
.rafina-row-break { display: none; }

.rafina-gold-row {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	order: 9;                     /* همیشه بعد از بقیه، در هر دو ظاهر */
	padding-bottom: 10px;
}

/*
 * رنگ‌ها از «رافینا پنل ← رنگ‌بندی سایت ← نوار قیمت طلا» می‌آیند؛ مقدارهای
 * پیش‌فرض این‌جا فقط برای وقتی است که هنوز چیزی تنظیم نشده.
 */
.rafina-gold {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 15px; border-radius: 999px;
	background: var(--rafina-gold-bar-bg, #fdf6e3);
	border: 1px solid var(--rafina-gold-bar-border, #e3c76a);
	color: var(--rafina-gold-bar-text, var(--rafina-text));
	font-size: 13px; line-height: 1; white-space: nowrap;
}
.rafina-gold svg { color: var(--rafina-gold-bar-icon, #b8912a); flex-shrink: 0; }
.rafina-gold__label { color: var(--rafina-gold-bar-label, var(--rafina-text-dim)); font-size: 12px; }
.rafina-gold__rate { font-weight: 800; font-variant-numeric: tabular-nums; color: inherit; }
.rafina-gold__unit { color: var(--rafina-gold-bar-label, var(--rafina-text-dim)); font-size: 11.5px; }

/*
 * ردیف خودش را دارد، پس دیگر لازم نیست در عرض‌های میانی برچسب را پنهان کنیم؛
 * فقط در موبایل که هدر باید کوتاه بماند کنار می‌رود.
 */
@media (max-width: 640px) { .rafina-gold-row { display: none; } }

.rafina-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.rafina-icon-btn {
	width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg);
	display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rafina-header-icon, var(--rafina-text-dim));
	transition: color .2s ease, border-color .2s ease, background .2s ease; position: relative; flex-shrink: 0; text-decoration: none;
}
/*
 * دکمه‌ی پشتیبانی فقط روی موبایل.
 *
 * قاعده‌اش این‌جاست نه در index.css: این فایل بعد از بسته‌ی اپ بار می‌شود و
 * `.rafina-icon-btn { display: flex }` هم‌ویژگی است، پس هرچه آن‌جا نوشته شود
 * را می‌شکند. با گزینشگر دوکلاسه این‌جا، ترتیب دیگر مهم نیست.
 */
.rafina-nav-actions .rafina-support-btn { display: none; }

@media (max-width: 900px) {
	.rafina-nav-actions .rafina-support-btn { display: flex; }
}

.rafina-icon-btn:hover { color: var(--rafina-header-link-hover, var(--rafina-accent-2)); border-color: var(--rafina-accent-2); background: var(--rafina-ghost-bg-hover); }
.rafina-icon-btn svg { width: 19px; height: 19px; }
.rafina-cart-count {
	position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
	background: var(--rafina-cart-badge-bg, var(--rafina-accent-2)); color: var(--rafina-cart-badge-text, #06210b); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.rafina-btn-ghost {
	border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); border-radius: 10px; padding: 0 18px; height: 42px;
	display: inline-flex; align-items: center; font-weight: 700; font-size: 13.5px; color: var(--rafina-header-text, var(--rafina-text)); text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.rafina-btn-ghost:hover { background: var(--rafina-ghost-bg-hover); border-color: var(--rafina-accent-2); }

@media (max-width: 640px) { .rafina-btn-ghost { display: none; } }

.rafina-burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rafina-burger span, .rafina-burger span::before, .rafina-burger span::after { content: ''; display: block; width: 18px; height: 2px; background: var(--rafina-text); position: relative; transition: .25s ease; }
.rafina-burger span::before { position: absolute; top: -6px; }
.rafina-burger span::after { position: absolute; top: 6px; }
.rafina-burger.open span { background: transparent; }
.rafina-burger.open span::before { transform: rotate(45deg); top: 0; }
.rafina-burger.open span::after { transform: rotate(-45deg); top: 0; }
@media (max-width: 900px) { .rafina-main-links { display: none; } .rafina-burger { display: flex; } }

.rafina-mobile-panel { display: none; flex-direction: column; gap: 4px; padding: 14px 24px 22px; border-top: 1px solid var(--rafina-border); background: var(--rafina-header-bg-solid); }
.rafina-mobile-panel.open { display: flex; }
.rafina-mobile-panel .rafina-mp-link { padding: 12px 6px; color: var(--rafina-text-dim); font-weight: 600; border-bottom: 1px solid var(--rafina-border); text-decoration: none; display: block; }

/* ---------------------------------------------------------
   جستجوی زنده
--------------------------------------------------------- */
.rafina-search-wrap { position: relative; flex: 1; max-width: 420px; }
.rafina-search-wrap .rafina-nav-search { width: 100%; }
.rafina-search-clear {
	background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
	color: var(--rafina-text-dimmer); padding: 0 2px; flex-shrink: 0;
}

.rafina-search-panel {
	position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 999;
	background: var(--rafina-panel); border: 1px solid var(--rafina-border);
	border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.14);
	padding: 10px; max-height: 70vh; overflow-y: auto;
	animation: rafinaSearchIn .18s ease-out;
}
@keyframes rafinaSearchIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.rafina-search-heading { font-size: 12px; font-weight: 700; color: var(--rafina-text-dimmer); padding: 6px 8px 8px; }
.rafina-search-empty { padding: 22px 10px; text-align: center; font-size: 13px; color: var(--rafina-text-dimmer); }
.rafina-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rafina-search-list button {
	width: 100%; display: flex; align-items: center; gap: 10px; text-align: right;
	background: none; border: none; cursor: pointer; padding: 8px; border-radius: 10px;
	transition: background .15s ease;
}
.rafina-search-list button:hover { background: var(--rafina-ghost-bg); }
.rafina-search-list img, .rafina-search-noimg {
	width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
	background: var(--rafina-bg-2); flex-shrink: 0;
}
.rafina-search-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rafina-search-name { font-size: 13px; font-weight: 600; color: var(--rafina-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rafina-search-price { font-size: 12px; font-weight: 700; color: var(--rafina-accent-2, #19672a); }

.rafina-search-banner {
	display: block; margin-top: 10px; border-radius: 12px; overflow: hidden;
}
/* ارتفاع بنر همیشه همانی است که در پنل تنظیم شده، صرف‌نظر از ابعاد فایل */
.rafina-search-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* موبایل: جستجو داخل شیت منوی پایین */
.rafina-search-mobile { display: none; max-width: none; margin-bottom: 10px; }
.rafina-mobile-panel .rafina-search-mobile,
.rf-bn__sheet .rafina-search-mobile { display: block; }
.rafina-mobile-panel .rafina-nav-search,
.rf-bn__sheet .rafina-nav-search { display: flex; }

/* داخل شیت، نتایج زیر کادر جستجو و به‌شکل عادی نمایش داده می‌شوند
   (نه به‌صورت پنل شناور، وگرنه بیرون از شیت می‌افتد و دیده نمی‌شود). */
.rf-bn__sheet .rafina-search-panel {
	position: static; box-shadow: none; border: 0; padding: 6px 0 0;
	max-height: none; background: transparent; animation: none;
}
@media (max-width: 1100px) {
	.rafina-search-desktop { display: none; }
}

/* ---------------------------------------------------------
   افکت ورود صفحات (چون SPA است و رفرش ندارد)
--------------------------------------------------------- */
/*
 * فقط opacity، عمدا بی transform.
 *
 * transform روی والد، position:fixed هر فرزندی را به همان والد می‌چسباند نه
 * به پنجره — حتی پس از پایان انیمیشن، چون fill-mode مقدار انیمیشنی را نگه
 * می‌دارد و مرورگر آن را ماتریس همانی می‌بیند. دو بار قبل با پورتال دورش
 * زدند (فیلتر آرشیو، استوری)؛ بار سوم نوار «تکمیل سفارش» سبد موبایل وسط
 * سند می‌نشست. opacity هیچ ظرفی نمی‌سازد.
 */
@keyframes rafinaPageIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/*
 * فقط سر جابه‌جایی داخل اپ، نه بارگذاری اول: کروم عنصری را که داخل
 * انیمیشن opacity از صفر رنگ می‌گیرد کاندیدای LCP نمی‌شمرد؛ هیروی ۱۱۸۰
 * پیکسلی هرگز شمرده نمی‌شد و LCP روی بنر سه‌تایی بی preload می‌افتاد.
 * کلاس را ScrollToTop از دومین مسیر به بعد می‌گذارد.
 */
html.rafina-navigated .rafina-page-enter { animation: rafinaPageIn .32s cubic-bezier(.22,1,.36,1) both; }

/* اسکلت بارگذاری */
@keyframes rafinaShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.rafina-skeleton {
	background: linear-gradient(90deg, var(--rafina-bg-2) 25%, var(--rafina-ghost-bg) 37%, var(--rafina-bg-2) 63%);
	background-size: 200% 100%;
	animation: rafinaShimmer 1.2s ease-in-out infinite;
	border-radius: 12px;
}

/* پیشنهادهای جستجو: چیپ افقی بدون عکس */
.rafina-search-suggest { margin-bottom: 6px; }
.rafina-search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 4px; }
.rafina-search-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--rafina-ghost-bg);
	border: 1px solid var(--rafina-border);
	border-radius: 999px; padding: 8px 14px;
	font-size: 12.5px; font-weight: 600; color: var(--rafina-text);
	cursor: pointer; transition: border-color .15s ease, background .15s ease;
	font-family: inherit;
}
.rafina-search-chip:hover { border-color: var(--rafina-accent-2, #19672a); background: var(--rafina-ghost-bg-hover); }
.rafina-search-chip svg { width: 13px; height: 13px; opacity: .55; flex-shrink: 0; }

/* ---------------------------------------------------------
   مگا منوی دسته‌بندی‌ها (هدر)
--------------------------------------------------------- */
/* flex تا ارتفاع این پوشش دقیقاً اندازه‌ی خود دکمه شود؛ وگرنه خط‌کرسی متن
   چند پیکسل اضافه می‌آورد و دکمه بالاتر از بقیه‌ی لینک‌های هدر می‌نشیند */
.rafina-mega { display: flex; align-items: center; }

/*
 * مرجع جای‌گیری پنل، نوار هدر است نه خود دکمه. اگر مرجع دکمه باشد، پنل
 * فقط به اندازه‌ی فضای کنار دکمه پهن می‌شود و ستون‌ها روی تصویر تبلیغاتی
 * می‌افتند؛ با این مرجع، پنل تمام عرض نوار را در اختیار دارد و هیچ‌وقت هم از
 * آن بیرون نمی‌زند.
 */
.rafina-nav-wrap { position: relative; }

/* دقیقاً مثل بقیه‌ی لینک‌های هدر: بدون کادر و بدون پس‌زمینه */
.rafina-mega-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 0; border: 0; background: none;
	color: var(--rafina-text-dim); font-family: inherit; font-size: 15px; font-weight: 500;
	cursor: pointer; transition: color .2s ease;
}
.rafina-mega-btn:hover, .rafina-mega-btn.open { color: var(--rafina-text); }
.rafina-mega-btn svg { width: 17px; height: 17px; }

.rafina-mega-panel {
	position: absolute; top: calc(100% + 12px); inset-inline-start: 0;
	/*
	 * بدون تصویر، عرض کمینه رزرو نمی‌شود؛ وگرنه پنل یک کادر سفید پهن کنار
	 * فهرست می‌ساخت — همان چیزی که مثل «عکس نیامده» به نظر می‌رسید.
	 */
	display: grid; grid-template-columns: 250px max-content;
	/* به اندازه‌ی محتوایش پهن شود، ولی نه بیرون از صفحه */
	width: max-content;
	max-width: min(1240px, calc(100vw - 32px));
	background: var(--rafina-menu-panel-bg, var(--rafina-panel)); border: 1px solid var(--rafina-border);
	border-radius: 18px; box-shadow: 0 26px 60px -20px rgba(var(--rafina-shadow-rgb, 0, 0, 0), .28);
	overflow: hidden; z-index: 200;
	animation: rafinaSearchIn .18s ease-out;
}
/* پل نامرئی بین دکمه و پنل تا با حرکت ماوس بسته نشود */
.rafina-mega-panel.has-promo { grid-template-columns: 250px minmax(560px, max-content); }
.rafina-mega-panel::before { content: ''; position: absolute; top: -12px; inset-inline: 0; height: 12px; }

.rafina-mega-side { list-style: none; margin: 0; padding: 10px; background: var(--rafina-bg-2); border-inline-end: 1px solid var(--rafina-border); max-height: min(62vh, 520px); overflow-y: auto; }
.rafina-mega-side-item {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 12px; border-radius: 11px; text-decoration: none;
	font-size: 14px; font-weight: 600; color: var(--rafina-text-dim);
	transition: background .16s ease, color .16s ease;
}
.rafina-mega-side-item span { flex: 1; }
.rafina-mega-side-item svg { width: 15px; height: 15px; opacity: .5; transform: scaleX(-1); flex-shrink: 0; }
.rafina-mega-side-item:hover, .rafina-mega-side-item.active { background: var(--rafina-panel); color: var(--rafina-accent-2); }
.rafina-mega-icon { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }

/*
 * منو از یک حدی بلندتر نمی‌شود: ارتفاع سقف دارد و زیردسته‌ها به‌جای پایین‌رفتن،
 * ستون تازه می‌سازند و منو پهن‌تر می‌شود — همان رفتاری که فروشگاه‌های بزرگ دارند.
 * چیدمان چندستونی CSS دقیقاً برای همین است: با ارتفاع ثابت، هر چه جا نشود
 * می‌رود ستون بعد.
 */
.rafina-mega-content {
	display: flex; gap: 26px; padding: 24px 26px;
	/* سقف ارتفاع؛ اگر ستون‌ها از عرض سقف هم بگذرند، همین‌جا افقی اسکرول می‌شوند */
	max-height: min(70vh, 620px);
	overflow: auto;
}
.rafina-mega-cols {
	flex: 1;
	display: grid;
	/*
	 * تعداد ردیف‌ها را خود منو تعیین می‌کند (هرچه زیردسته بیشتر، ردیف بیشتر تا
	 * سقف سه)، و ستون‌ها با grid-auto-flow:column به سمت چپ اضافه می‌شوند؛
	 * یعنی منو پهن می‌شود، نه بلند.
	 */
	grid-template-rows: repeat(var(--rafina-mega-rows, 1), min-content);
	grid-auto-flow: column;
	grid-auto-columns: minmax(176px, 1fr);
	gap: 22px 26px;
	align-content: start;
}
.rafina-mega-col { min-width: 0; }
.rafina-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rafina-mega-col-title { display: block; font-size: 14px; font-weight: 800; color: var(--rafina-text); margin-bottom: 12px; text-decoration: none; }
.rafina-mega-col-title:hover { color: var(--rafina-accent-2); }
.rafina-mega-col a, .rafina-mega-col span { font-size: 13px; color: var(--rafina-text-dim); text-decoration: none; transition: color .16s ease; }
.rafina-mega-col a:hover { color: var(--rafina-accent-2); }

/*
 * تصویر تبلیغاتی، ابعاد خودش را نگه می‌دارد — عمودی، افقی یا مربع، هرچه مدیر
 * گذاشته باشد. نه بریده می‌شود و نه کشیده؛ فقط اگر خیلی بزرگ باشد تا سقف
 * ۳۶۰ پیکسل عرض و همان اندازه ارتفاع ستون‌ها کوچک می‌شود تا منو را نترکاند.
 *
 * sticky هم نیست: اگر ستون‌ها پهن‌تر از پنل شوند، تصویر چسبنده رویشان می‌افتد.
 */
.rafina-mega-promo {
	flex: 0 1 auto;
	max-width: 360px;
	border-radius: 14px; overflow: hidden; align-self: start; display: block;
}
.rafina-mega-promo img {
	display: block;
	max-width: 100%;
	max-height: min(60vh, 520px);
	width: auto; height: auto;
	object-fit: contain;
}

@media (max-width: 1320px) {
	.rafina-mega-panel { grid-template-columns: 220px minmax(420px, max-content); }
	.rafina-mega-promo { display: none; }
}

/* ---------------------------------------------------------
   موبایل: ردیف بسته + صفحه‌ی جدا (کشویی) برای دسته‌بندی‌ها
--------------------------------------------------------- */
.rafina-mega-mobile-open {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 13px 12px; margin-bottom: 8px;
	border: 1px solid var(--rafina-border-2); border-radius: 12px;
	background: var(--rafina-ghost-bg); color: var(--rafina-text);
	font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.rafina-mega-mobile-open-label { display: flex; align-items: center; gap: 9px; }
.rafina-mega-mobile-open svg { width: 17px; height: 17px; }
.rafina-mega-mobile-open > svg { opacity: .45; transform: scaleX(-1); }

.rafina-mega-sheet {
	position: fixed; inset: 0; z-index: 2147483000;
	background: var(--rafina-bg); display: flex; flex-direction: column;
	animation: rafinaSheetIn .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rafinaSheetIn { from { transform: translateX(-100%); } to { transform: none; } }

.rafina-mega-sheet-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; border-bottom: 1px solid var(--rafina-border);
	background: var(--rafina-header-bg-solid); flex-shrink: 0;
}
.rafina-mega-sheet-title { font-size: 15px; font-weight: 800; color: var(--rafina-text); }
.rafina-mega-sheet-back {
	display: flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
	color: var(--rafina-text); font-family: inherit; font-size: 15px; font-weight: 800; padding: 0;
}
.rafina-mega-sheet-back svg { width: 17px; height: 17px; opacity: .55; }
.rafina-mega-sheet-close {
	width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
	border: 1px solid var(--rafina-border-2); background: var(--rafina-ghost-bg);
	color: var(--rafina-text-dim); font-size: 15px; cursor: pointer; line-height: 1;
}

.rafina-mega-sheet-body { flex: 1; overflow-y: auto; padding: 14px 18px 34px; -webkit-overflow-scrolling: touch; }

.rafina-mega-row-btn {
	width: 100%; display: flex; align-items: center; gap: 10px;
	padding: 15px 12px; border: 0; border-bottom: 1px solid var(--rafina-border);
	background: none; color: var(--rafina-text); text-align: right; text-decoration: none;
	font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.rafina-mega-row-btn span { flex: 1; }
.rafina-mega-row-btn svg { width: 15px; height: 15px; opacity: .4; transform: scaleX(-1); flex-shrink: 0; }

.rafina-mega-seeall {
	display: block; text-align: center; margin-bottom: 16px; padding: 12px;
	border-radius: 12px; background: var(--rafina-ghost-bg); border: 1px solid var(--rafina-border-2);
	font-size: 13.5px; font-weight: 700; color: var(--rafina-accent-2); text-decoration: none;
}
.rafina-mega-group { margin-bottom: 22px; }
.rafina-mega-group-title { display: block; font-size: 14px; font-weight: 800; color: var(--rafina-text); margin-bottom: 8px; text-decoration: none; }
.rafina-mega-group-link {
	display: block; padding: 12px 10px; font-size: 13.5px; color: var(--rafina-text-dim);
	text-decoration: none; border-bottom: 1px solid var(--rafina-border);
}

/* =========================================================
   مدل دوم هدر — «شناور» (is-modern)
   نوار در یک کارت شیشه‌ای گرد شناور می‌شود؛ دکمه‌ها دایره‌ای و
   جست‌وجو کپسولی می‌شود. همان مارک‌آپ، فقط ظاهر عوض می‌شود.
   ========================================================= */

.rafina-header.is-modern {
	background: transparent;
	border-bottom: none;
	backdrop-filter: none;
	padding-block: 10px;
}

/*
 * خود نوار یک کارت است، نه تمام عرض صفحه. برای همین پس‌زمینه و سایه روی
 * container می‌نشیند و هدر بیرونی شفاف می‌ماند.
 */
.rafina-header.is-modern .rafina-nav-wrap {
	background: var(--rafina-header-bg);
	backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid var(--rafina-border);
	border-radius: 20px;
	padding: 12px 18px 0;
	box-shadow: 0 10px 30px rgba(16, 40, 22, .07);
	gap: 14px;

	/*
	 * چیدمان دو ردیفه: ردیف اول لوگو، جست‌وجوی بزرگ و دکمه‌ها؛ ردیف دوم فقط
	 * منو. با flex-wrap و order انجام می‌شود تا مارک‌آپ هدر یکی بماند و هر دو
	 * مدل از یک کد بیرون بیایند.
	 */
	flex-wrap: wrap;
}
.rafina-header.is-modern .rafina-logo { order: 1; }
.rafina-header.is-modern .rafina-search-wrap,
.rafina-header.is-modern .rafina-nav-search { order: 2; }
.rafina-header.is-modern .rafina-nav-actions { order: 3; }

/*
 * در این ظاهر، نوار طلا **هم‌ردیف منو**ست، نه ردیفی جدا.
 *
 * کارت شناور از قبل دو ردیف دارد؛ ردیف سوم فقط برای یک نوار، بلندش می‌کرد و
 * حس فشردگی‌اش را می‌گرفت. پس منو و نوار همان ردیف دوم را با هم می‌گیرند:
 * منو فضای باقی‌مانده را پر می‌کند و نوار سر جای خودش می‌نشیند.
 *
 * `.rafina-row-break` خط اول را می‌بندد تا این دو با هم پایین بیایند؛ بدون
 * آن، وابسته می‌شدیم به این‌که جست‌وجو دقیقاً چقدر پهن شده.
 *
 * خط جداکننده هم روی همین عنصر کشیده می‌شود، نه روی منو و نوار.
 *
 * وقتی هر کدام خط خودش را داشت، خط شکسته دیده می‌شد: `align-items: center`
 * هر آیتم را در ارتفاع ردیف وسط‌چین می‌کند و چون منو ۵۶ و نوار ۳۸ پیکسل بلند
 * است، دو خط با ۹ پیکسل اختلاف ارتفاع کنار هم می‌افتادند.
 */
.rafina-header.is-modern .rafina-row-break {
	display: block;
	flex-basis: 100%;
	height: 0;
	order: 4;
	margin-top: 10px;
	border-top: 1px solid var(--rafina-border);
}

.rafina-header.is-modern .rafina-gold-row {
	order: 6;
	flex: 0 0 auto;
	justify-content: flex-end;
	padding: 4px 0;
}

.rafina-header.is-modern .rafina-gold { padding-block: 6px; }

/* ردیف دوم: منو، کنار نوار طلا زیر همان خط جداکننده */
.rafina-header.is-modern .rafina-main-links {
	order: 5;
	flex: 1 1 auto;
	min-width: 0;
	gap: 4px;
	padding: 4px 0;
}
/*
 * لینک‌های این ردیف کپسولی‌اند. با انتخابگر فرزند مستقیم نوشته شده‌اند چون
 * مگا منو هم بچه‌ی همین ردیف است؛ وگرنه همین گردی ۹۹۹ پیکسلی به تصویر
 * تبلیغاتی و لینک‌های داخل پنل هم می‌رسید و عکس را بیضی می‌کرد.
 */
.rafina-header.is-modern .rafina-main-links > a {
	padding: 9px 14px;
	border-radius: 999px;
	transition: background .18s ease, color .18s ease;
}
.rafina-header.is-modern .rafina-main-links > a:hover {
	background: var(--rafina-ghost-bg-hover);
	color: var(--rafina-text);
}

/* جست‌وجو در این مدل عنصر اصلی هدر است، پس بزرگ‌تر و پهن‌تر می‌شود */
.rafina-header.is-modern .rafina-nav-search {
	border-radius: 999px;
	padding: 14px 22px;
	background: var(--rafina-ghost-bg);
	border-color: transparent;
	transition: border-color .18s ease, background .18s ease;
}
.rafina-header.is-modern .rafina-nav-search input { font-size: 15px; }
.rafina-header.is-modern .rafina-nav-search svg { width: 19px; height: 19px; }
.rafina-header.is-modern .rafina-nav-search:focus-within {
	border-color: var(--rafina-accent-2);
	background: var(--rafina-panel);
}
/* هم نسخه‌ی ری‌اکت (search-wrap) و هم رندر سروری (nav-search) پهن می‌شوند */
.rafina-header.is-modern .rafina-search-wrap,
.rafina-header.is-modern .rafina-nav-search { max-width: 620px; flex: 1; }
@media (max-width: 1100px) {
	.rafina-header.is-modern .rafina-search-wrap,
	.rafina-header.is-modern .rafina-nav-search { max-width: none; }
}

/* گروه دکمه‌ها یک تکه‌ی به‌هم‌چسبیده می‌شود */
.rafina-header.is-modern .rafina-nav-actions {
	gap: 6px;
	padding: 4px;
	border-radius: 999px;
	background: var(--rafina-ghost-bg);
}
.rafina-header.is-modern .rafina-icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border-color: transparent;
	background: transparent;
}
.rafina-header.is-modern .rafina-icon-btn:hover {
	background: var(--rafina-panel);
	border-color: transparent;
}
.rafina-header.is-modern .rafina-btn-ghost {
	border-radius: 999px;
	height: 38px;
	border-color: transparent;
	background: var(--rafina-accent-2);
	color: #fff;
}
.rafina-header.is-modern .rafina-btn-ghost:hover { filter: brightness(1.06); background: var(--rafina-accent-2); }

.rafina-header.is-modern .rafina-burger { border-radius: 50%; border-color: transparent; }

.rafina-header.is-modern .rafina-mobile-panel {
	margin-top: 10px;
	border: 1px solid var(--rafina-border);
	border-radius: 18px;
	background: var(--rafina-header-bg-solid);
	padding: 10px 16px 16px;
}

/* دکمه‌ی دسته‌بندی مثل بقیه‌ی لینک‌های منو: بدون پس‌زمینه، فقط هم‌تراز با آن‌ها */
.rafina-header.is-modern .rafina-mega-btn {
	padding: 9px 14px;
	border: 0;
	background: none;
}

/* در موبایل منو جای خودش را به دکمه‌ی همبرگری می‌دهد، پس ردیف دوم می‌رود */
@media (max-width: 900px) {
	.rafina-header.is-modern .rafina-nav-wrap { padding: 10px 14px; }
}
@media (max-width: 640px) {
	.rafina-header.is-modern .rafina-nav-wrap { border-radius: 16px; padding: 8px 12px; }
	.rafina-header.is-modern .rafina-nav-search { padding: 11px 16px; }
}

/* =========================================================
   مدل سوم هدر — «جست‌وجومحور» (is-search)
   سه ردیف: لوگو و دکمه‌ها، کادر جست‌وجوی همیشه‌باز با دکمه‌ی
   دسته‌ها، و نوار میان‌بر دسته‌ها.
   ========================================================= */

.rafina-header.is-search .rafina-nav-wrap {
	/* فاصله‌ی بین ردیف‌ها با padding خود ردیف‌ها ساخته می‌شود، نه با row-gap */
	row-gap: 0;
	padding-block: 8px 0;
	align-items: center;
}

/* منوی ردیف اول در این طرح نیست؛ جایش ردیف سوم است */
.rafina-header.is-search .rafina-main-links { display: none; }

.rafina-search-row {
	order: 2;
	flex-basis: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 8px;
}

/*
 * کادر جست‌وجو در این طرح تمام پهنا را می‌گیرد و در موبایل هم می‌ماند.
 *
 * قاعده‌های عمومی زیر ۱۱۰۰ پیکسل هم `.rafina-search-desktop` و هم
 * `.rafina-nav-search` را پنهان می‌کنند؛ آن‌جا جست‌وجو داخل شیت منوست. این‌جا
 * خود طرح روی جست‌وجو بنا شده، پس همان‌جا که هست باز می‌ماند.
 */
.rafina-header.is-search .rafina-search-row .rafina-search-wrap {
	display: block;
	flex: 1;
	min-width: 0;
	max-width: none;
}
.rafina-header.is-search .rafina-search-row .rafina-nav-search {
	display: flex;
	max-width: none;
	/* دو پیکسل بیشتر از هدف لمسی، چون قاب یک‌پیکسلی از ارتفاع خود ورودی می‌کند */
	height: 46px;
	padding-block: 0;
}

/*
 * خود ورودی هم تا ته کادر کشیده می‌شود.
 *
 * وگرنه کادر ۴۴ است ولی ناحیه‌ی لمسی همان ۲۳ پیکسل متن می‌ماند و انگشت روی
 * لبه‌ی بالا و پایین کادر می‌خورد بی‌آنکه صفحه‌کلید باز شود.
 */
.rafina-header.is-search .rafina-search-row .rafina-nav-search input { align-self: stretch; }

.rafina-cats-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding-inline: 18px;
	border-radius: 11px;
	background: var(--rafina-cats-btn-bg, #16211a);
	color: var(--rafina-cats-btn-text, #fff);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .2s ease;
}
.rafina-cats-btn:hover { filter: brightness(1.15); }

/*
 * نوار میان‌بر.
 *
 * `min-width: 0` حیاتی است: بدون آن ستون فلکس تا اندازه‌ی محتوا باز می‌شود،
 * اسکرول افقی هرگز فعال نمی‌شود و کل نوار از لبه بیرون می‌زند — در راست‌چین
 * از سمت چپ، جایی که scrollWidth هم گزارشش نمی‌کند.
 */
.rafina-cats-strip {
	order: 3;
	flex-basis: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	border-top: 1px solid var(--rafina-border);
	padding-block: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.rafina-cats-strip::-webkit-scrollbar { display: none; }

.rafina-cats-strip > a,
.rafina-cats-strip .rafina-cats-strip__link {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* هدف لمسی کامل حتی برای برچسب کوتاه مثل «خانه» */
	min-width: 44px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--rafina-header-text, var(--rafina-text-dim));
	text-decoration: none;
	transition: color .2s ease;
}
.rafina-cats-strip > a:hover { color: var(--rafina-header-link-hover, var(--rafina-accent-2)); }

/* دکمه‌ی مگامنو داخل همین نوار می‌نشیند، پس ارتفاعش هم باید ۴۴ باشد */
.rafina-header.is-search .rafina-cats-strip .rafina-mega { flex-shrink: 0; }
.rafina-header.is-search .rafina-cats-strip .rafina-mega-btn { min-height: 44px; }

/* هدف لمسی ۴۴ در ۴۴، فقط در همین طرح تا دو طرح قدیمی دست‌نخورده بمانند */
.rafina-header.is-search .rafina-icon-btn,
.rafina-header.is-search .rafina-user__btn { width: 44px; height: 44px; }
.rafina-header.is-search .rafina-btn-ghost { height: 44px; }

@media (max-width: 640px) {
	/* در موبایل دکمه‌ی ورود می‌رود ولی این طرح بدون آن ناقص است */
	.rafina-header.is-search .rafina-btn-ghost { display: inline-flex; padding-inline: 12px; font-size: 12.5px; }
	.rafina-cats-btn { padding-inline: 12px; font-size: 12.5px; }
	.rafina-cats-strip { gap: 10px; }
	.rafina-cats-strip > a { font-size: 13px; }
}

/* =========================================================
   مدل چهارم هدر — «دوطبقه» (is-split)
   طبقه‌ی بالا با اسکرول می‌رود، طبقه‌ی پایین می‌چسبد و از هدر
   معمولی کوتاه‌تر است.
   ========================================================= */

/*
 * طبقه‌ی بالا با اسکرول می‌رود، طبقه‌ی پایین می‌ماند.
 *
 * راهش یک `top` منفی به اندازه‌ی همان طبقه است، نه چسباندن جداگانه‌ی طبقه‌ی
 * پایین: عنصر چسبان بیش از قد پدرش نمی‌تواند بچسبد، و با هدر کوتاه، نوار
 * پایین بعد از چند صد پیکسل رها می‌شد — سنجیده شد و رها می‌شد.
 *
 * کلاس `has-top` را ریاکت وقتی می‌گذارد که آن طبقه واقعاً رسم شده باشد؛ وگرنه
 * جابه‌جایی منفی، خود نوار اصلی را از بالای صفحه بیرون می‌برد.
 */
.rafina-header.is-split {
	background: transparent;
	border-bottom: 0;
	backdrop-filter: none;
}
.rafina-header.is-split.has-top {
	top: calc(var(--rafina-topbar-sticky-h, 0px) - var(--rafina-split-top-h, 44px));
}

.rafina-split-top {
	/* قد ثابت، چون جابه‌جایی منفی چسبندگی دقیقاً به همین اندازه است */
	height: var(--rafina-split-top-h, 44px);
	background: var(--rafina-split-top-bg, #16211a);
	color: var(--rafina-split-top-text, rgba(255, 255, 255, .86));
	font-size: 12.5px;
}
.rafina-split-top__in {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
	padding-block: 0;
}
.rafina-split-top__note {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rafina-split-top__tel {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	/* شماره روی گوشی زده می‌شود، پس هدف لمسی کامل می‌خواهد */
	min-height: 44px;
	gap: 6px;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.rafina-split-top__tel svg { width: 15px; height: 15px; }

.rafina-split-main {
	background: var(--rafina-header-bg);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--rafina-border);
}

/* ارتفاع چسبان باید از هدر معمولی کمتر باشد، پس padding کمتر می‌شود */
.rafina-header.is-split .rafina-nav-wrap { padding-block: 8px; gap: 16px; }

/*
 * لوگو در این طرح کوتاه‌تر می‌شود.
 *
 * تمام ارزش طرح دوطبقه در کوتاه‌بودن نوار چسبان است و بلندترین چیز همان
 * تصویر لوگوست؛ بی این سقف، نوار از هدر معمولی کوتاه‌تر درنمی‌آمد.
 */
.rafina-header.is-split .rafina-logo-img { max-height: 34px; }
.rafina-header.is-split .rafina-gold-row { padding-bottom: 6px; }
.rafina-header.is-split .rafina-gold { padding-block: 5px; font-size: 12px; }

/* هدف لمسی لینک‌های منو و دکمه‌ی مگامنو در همین طرح */
.rafina-header.is-split .rafina-main-links > a,
.rafina-header.is-split .rafina-mega-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* خط جداکننده بین لوگو و منو، در راست‌چین سمت راست منو می‌افتد */
.rafina-header.is-split .rafina-main-links {
	border-inline-start: 1px solid var(--rafina-border);
	padding-inline-start: 18px;
	gap: 24px;
}

.rafina-header.is-split .rafina-icon-btn,
.rafina-header.is-split .rafina-user__btn { width: 44px; height: 44px; }
.rafina-header.is-split .rafina-btn-ghost { height: 44px; }

@media (max-width: 900px) {
	/* منو که به همبرگری می‌رود، خط جداکننده هم بی‌معنا می‌شود */
	.rafina-header.is-split .rafina-main-links { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 640px) {
	.rafina-split-top { font-size: 11.5px; }
}

/*
 * طرح «دیجیتال» فایل خودش را دارد: `header-digitali.css`.
 *
 * بلوکش سیصد خط بود و این فایل را از هر اندازه‌ی خواندنی رد می‌کرد؛ و مهم‌تر،
 * هر دست بردن در آن، چهار طرح دیگر را هم در معرض خطا می‌گذاشت. جدا که شد،
 * «چهار طرح قدیمی عوض نشده‌اند» با مقایسه‌ی بایتی همین فایل سنجیدنی است.
 */

/* =========================================================
   هدر روی گوشی (وب‌اپ): همبرگر، کشوی منو و کلیدهای تنظیم موبایل
   هرچه از این‌جا به پایین است فقط زیر ۹۰۰ پیکسل اثر دارد یا با کشو باز
   می‌شود؛ نگهبان `mobile-header-test` بالای این خط را بایت‌به‌بایت می‌پاید.
   ========================================================= */

@media (max-width: 900px) {
	/* همبرگر پیش از لوگو، سمت آغاز؛ هدف لمسی ۴۴ */
	.rafina-nav-wrap > .rafina-burger { order: 0; width: 44px; height: 44px; }
	/* لوگو کنار همبرگر می‌ماند و کلیدها به سمت پایان می‌روند */
	.rafina-nav-wrap > .rafina-logo { margin-inline-end: auto; }
}

@media (max-width: 782px) {
	/*
	 * با آمدن همبرگر، ردیف روی ۳۶۰ پیکسل جا نمی‌شد و کلیدها به ردیف دوم می‌رفتند
	 * (سنجیده شد: قد هدر ۸۷ → ۱۴۸). `flex-shrink` این‌جا بی‌اثر است: ردیف
	 * `wrap` دارد و عضو پیش از کوچک شدن به خط بعد می‌رود. پس مبنای لوگو صفر
	 * می‌شود تا هرگز خط را نشکند و جای مانده را بگیرد؛ تصویر داخلش با نسبت خودش.
	 */
	.rafina-nav-wrap { gap: 12px; }
	.rafina-nav-wrap > .rafina-logo { flex: 1 1 0; min-width: 0; }
	/*
	 * تصویر لوگو inline-block است و در جعبه‌ی خطی، فاصله‌ی زیرخط (۱۴ پیکسل) زیرش می‌ماند؛
	 * مرکز لوگو ۷ پیکسل بالاتر از آیکون‌ها می‌افتاد. فلکس جعبه‌ی خطی نمی‌سازد.
	 */
	.rafina-nav-wrap > .rafina-logo .rafina-logo-link { display: flex; align-items: center; min-width: 0; max-width: 100%; }
	.rafina-nav-wrap > .rafina-logo .rafina-logo-img { max-width: 100%; object-fit: contain; }

	.rafina-header.is-mob-notheme .rafina-nav-actions .rafina-theme-toggle { display: none; }
	/* بی همبرگر، کلیدها تنها فرزند جریان‌اند و space-between به آغاز می‌بردشان؛ جایشان سمت پایان است */
	.rafina-nav-wrap > .rafina-nav-actions { margin-inline-start: auto; }
	/*
	 * وب‌کیت گوشی روی کارتی که هم backdrop-filter دارد هم گوشه‌ی گرد، در گوشه
	 * مربع سیاه می‌کشد (گزارش مشتری روی آیفون؛ در فایرفاکس و کرومیوم نیست).
	 * لایه‌ی ترکیب جدا این را می‌بندد.
	 */
	.rafina-header.is-modern .rafina-nav-wrap { isolation: isolate; transform: translateZ(0); }

	/* نه static: z-index هدر باید بماند تا پنل جست‌وجو روی محتوا بیفتد */
	.rafina-header.is-mob-static { position: relative; top: auto; }

	/*
	 * لوگوی وسط‌چین از جریان بیرون می‌رود؛ همبرگر و کلیدها هم‌عرض نیستند و
	 * در جریان، مرکز لوگو به اندازه‌ی نصف اختلافشان جابه‌جا می‌شد.
	 * هدر راست‌به‌چپ ثابت است، پس ۵۰٪ از آغاز و برگشت ۵۰٪ درست وسط می‌نشیند.
	 */
	.rafina-header.is-mob-logo-center .rafina-nav-wrap { position: relative; }
	.rafina-header.is-mob-logo-center .rafina-nav-wrap > .rafina-logo {
		position: absolute; inset-block-start: 50%; inset-inline-start: 50%; margin: 0;
		transform: translate(50%, -50%);
	}
	/* طرح جست‌وجومحور ردیف‌های دیگری داخل nav-wrap دارد؛ ردیف اول ۴۴ با ۸ فاصله از بالاست */
	.rafina-header.is-search.is-mob-logo-center .rafina-nav-wrap > .rafina-logo { inset-block-start: 8px; height: 44px; transform: translateX(50%); }

	/*
	 * ردیف جست‌وجوی گوشی. دو قاعده‌ی عمومی زیر ۱۱۰۰ هم قاب (`search-desktop`) و
	 * هم کادر داخلش (`nav-search`) را پنهان می‌کنند؛ سنجیده شد: با برگرداندن
	 * فقط قاب، کادر صفر پیکسل می‌ماند. هر دو این‌جا برمی‌گردند.
	 */
	.rafina-header.is-mob-search .rafina-mob-search { padding-bottom: 12px; }
	.rafina-header.is-mob-search .rafina-mob-search .rafina-search-desktop { display: block; max-width: none; }
	.rafina-header.is-mob-search .rafina-mob-search .rafina-nav-search { display: flex; max-width: none; }
}

/* ---- کشوی منو؛ روی body پورتال می‌شود، پس ریست جعبه‌ای قالب به آن نمی‌رسد ---- */
.rafina-mdrawer {
	position: fixed; inset: 0; z-index: 1000; direction: rtl;
	font-family: var(--rafina-font, 'IRANSansX', Tahoma, sans-serif);
	visibility: hidden; transition: visibility 0s .28s;
}
.rafina-mdrawer.is-open { visibility: visible; transition-delay: 0s; }
.rafina-mdrawer *, .rafina-mdrawer *::before, .rafina-mdrawer *::after { box-sizing: border-box; }

.rafina-mdrawer__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .28s ease; }
.rafina-mdrawer.is-open .rafina-mdrawer__veil { opacity: 1; }

/* از سمت آغاز؛ هدر راست‌به‌چپ ثابت است، پس بیرون ماندن یعنی +۱۰۰٪ */
.rafina-mdrawer__panel {
	position: absolute; inset-block: 0; inset-inline-start: 0; width: 300px; max-width: 88vw;
	display: flex; flex-direction: column;
	background: var(--rafina-header-bg-solid, var(--rafina-panel)); color: var(--rafina-text);
	box-shadow: 0 0 40px rgba(0, 0, 0, .25);
	transform: translateX(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.rafina-mdrawer.is-open .rafina-mdrawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.rafina-mdrawer__panel, .rafina-mdrawer__veil { transition: none; }
}

.rafina-mdrawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rafina-border); }
.rafina-mdrawer__logo { display: flex; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.rafina-mdrawer__logo .rafina-logo-img { height: 32px; width: auto; max-width: 180px; object-fit: contain; }
.rafina-mdrawer__logo .rafina-logo-fallback { font-weight: 800; font-size: 17px; }
.rafina-mdrawer__close {
	width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: transparent;
	color: var(--rafina-text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rafina-mdrawer__close:hover { background: var(--rafina-ghost-bg); color: var(--rafina-text); }

.rafina-mdrawer__nav { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 10px; }
.rafina-mdrawer__label { padding: 14px 18px 4px; font-size: 12px; font-weight: 700; color: var(--rafina-text-dim); }
.rafina-mdrawer__link {
	display: flex; align-items: center; min-height: 48px; padding: 0 18px;
	font-size: 15px; font-weight: 600; color: var(--rafina-text); text-decoration: none;
	border-bottom: 1px solid var(--rafina-border);
}
.rafina-mdrawer__link:hover { background: var(--rafina-ghost-bg); }

.rafina-mdrawer__foot { border-top: 1px solid var(--rafina-border); padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
.rafina-mdrawer__row {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px;
	border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-decoration: none;
	color: var(--rafina-text); font: inherit; font-size: 14px; font-weight: 600; text-align: start;
}
.rafina-mdrawer__row:hover { background: var(--rafina-ghost-bg); }
.rafina-mdrawer__row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--rafina-text-dim); }
.rafina-mdrawer__row.is-sub { min-height: 40px; padding-inline-start: 42px; font-weight: 500; color: var(--rafina-text-dim); }
.rafina-mdrawer__count {
	margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
	background: var(--rafina-cart-badge-bg, var(--rafina-accent-2)); color: var(--rafina-cart-badge-text, #06210b);
	font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}