/* ==========================================================================
   مگامنوی دسکتاپ تازه (طرح «ب»، ۱۴۰۵/۰۷/۱۳)

   از templates/boxes_tpls/menu/menu_mega_menu_bpr.tpl.html لینک می‌شود، فقط وقتی
   config/bpr_old_megamenu.on نباشد. با آن فایل نه این CSS لود می‌شود نه client/js/bpr-megamenu.js
   و منوی قبلی (megamenu_new_bpshop_3level.css) بی‌تغییر برمی‌گردد.

   نوار: دسته‌ها با آیکن، زیر دسته‌ی باز خط فیروزه‌ای (دکمه‌های «پیشنهاد ویژه» و «خرید اقساطی» به
   درخواست مدیر سایت برداشته شد). اگر دسته‌ها جا نشوند (ظرف باریک مثل صفحه‌ی اقساط، یا دسته‌ی تازه در
   پنل منوساز) اسکریپت اول نوار را فشرده می‌کند (.is-tight) و اگر باز هم جا نشد لغزان (.is-scroll).
   ارتفاع نوار همان ۴۰px قبلی است (سربرگ دسکتاپ position:absolute است و فاصله‌ی محتوای صفحه
   از بالا ثابت؛ بلندتر شدن نوار روی محتوا می‌افتاد). لبه‌ها هم‌خط لوگو و دکمه‌ی ورود سربرگ‌اند.
   پنل: زیر نوار با ۱۲px فاصله (پل نامرئی ::before ماوس را در این فاصله نگه می‌دارد)، صفحه‌ی
   پشت تیره (.bmm-dim، جایش را اسکریپت از پایین نوار می‌گذارد). سه چیدمان (bmm_panel):
   .bmm-m-rail  برندها سمت راست (.bmm-rail)، سری‌های برند انتخاب‌شده وسط، دکمه‌های پردازنده/کاربری زیرش
   .bmm-m-cards کارت برندها (.bmm-bcards؛ زیرشاخه‌دارها از بیشترین به کمترین، بی‌زیرشاخه‌ها .bmm-stack دوتا دوتا)
   .bmm-m-tiles کاشی (.bmm-tiles)
   و کارت «خرید …» سمت چپ با تصویر مگامنوی همان دسته (پنل منوساز)، از 1200px به بالا.
   زیر 768px پنهان (گوشی منوی bpr-mobile را دارد؛ جعبه‌ی گوشی همین منو، rmd3975، هم این قالب است).
   ========================================================================== */

@font-face { font-family: "bpaYekan"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/iranyekan/fonts/woff2/iranyekanwebregular.woff2") format("woff2"); }
@font-face { font-family: "bpaYekan"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("../fonts/iranyekan/fonts/woff2/iranyekanwebbold.woff2") format("woff2"); }

/* گوشی: این فایل آن‌جا اصلاً اعمال نمی‌شود (media لینک)؛ پنهان بودن نوار با hidden-xs بوت‌استرپ است. این
   قاعده فقط برای جایی است که فایل بی media لود شود. */
@media (max-width: 767px) {
	.bmm { display: none !important; }
}

/* ---------------------------------------------------------------- پایه
   CSSهای قدیمی سایت روی a / ul / li سربرگ قاعده دارند و جعبه (طراحی جعبه‌ی منو) قلم ۱۱px و
   text-indent می‌دهد؛ همه این‌جا صریح برگردانده می‌شوند. */
.bmm {
	--bmm-acc: #1AC3BA; --bmm-acc-d: #0B8F88; --bmm-acc-l: #E9F8F7; --bmm-line: #EEF1F5;
	--bmm-r: 45px; --bmm-l: 45px;
	position: relative; display: flex; align-items: stretch; gap: 10px; height: 40px; margin: 0;
	padding: 0 var(--bmm-r) 0 var(--bmm-l); direction: rtl; text-align: right; text-indent: 0; letter-spacing: normal;
	font: 400 14px/1.6 "bpaYekan", "byekan", Tahoma, sans-serif; color: #334155; -webkit-font-smoothing: antialiased;
}
.bmm *, .bmm *::before, .bmm *::after { box-sizing: border-box; }
.bmm a, .bmm a:hover, .bmm a:focus, .bmm a:visited { text-decoration: none !important; outline: 0; }
.bmm a:focus-visible { box-shadow: 0 0 0 3px rgba(26, 195, 186, .45) !important; }
.bmm a { color: inherit; font-family: inherit; }
.bmm ul, .bmm li { margin: 0; padding: 0; list-style: none; float: none; border: 0; background: none; }
.bmm b { font-weight: 700; }
.bmm .material-icons { font-family: "Material Icons"; font-weight: 400; direction: ltr; text-indent: 0; line-height: 1; }

/* ---------------------------------------------------------------- نوار */
.bmm-bar { display: flex; align-items: stretch; gap: 2px; flex: 0 1 auto; min-width: 0; height: 100%; }
.bmm-li { position: static; display: flex; }
.bmm-top {
	position: relative; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px;
	font-size: 14px; line-height: 1; color: #334155; white-space: nowrap; transition: color .15s;
}
.bmm-top .material-icons { font-size: 20px; color: #94A3B8; transition: color .15s; }
.bmm-top::after {
	content: ""; position: absolute; right: 12px; left: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
	background: var(--bmm-acc); transform: scaleX(0); transition: transform .2s ease-out;
}
.bmm-top:hover, .bmm-li.is-open > .bmm-top, .bmm-li.is-current > .bmm-top { color: var(--bmm-acc-d); }
.bmm-top:hover .material-icons, .bmm-li.is-open > .bmm-top .material-icons, .bmm-li.is-current > .bmm-top .material-icons { color: var(--bmm-acc); }
.bmm-li.is-open > .bmm-top::after { transform: scaleX(1); }

/* جا نشد (bpr-megamenu.js با scrollWidth می‌سنجد): اول بی آیکن و فشرده، بعد لغزان با ماوس/لمس */
.bmm.is-tight .bmm-top { gap: 0; padding: 0 8px; }
.bmm.is-tight .bmm-top::after { right: 8px; left: 8px; }
.bmm.is-tight .bmm-top .material-icons { display: none; }
.bmm.is-scroll .bmm-bar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.bmm.is-scroll .bmm-bar::-webkit-scrollbar { display: none; }

/* فلش کوچک «‹» (بی SVG: گوشه‌ی دو حاشیه، چرخیده) */
.bmm-chev {
	flex: none; display: inline-block; width: 7px; height: 7px; margin: 0 3px 0 2px; border: solid currentColor;
	border-width: 0 0 2px 2px; border-radius: 0 0 0 1px; transform: rotate(45deg);
}

/* ---------------------------------------------------------------- پنل */
.bmm-panel {
	display: none; position: absolute; z-index: 902; top: calc(100% + 12px); right: var(--bmm-r); left: var(--bmm-l);
	align-items: stretch; background: #fff; border: 1px solid var(--bmm-line); border-radius: 24px;
	box-shadow: 0 30px 70px -28px rgba(0, 43, 81, .45); text-align: right; line-height: 1.6; white-space: normal; cursor: default;
}
/* پل نامرئی روی فاصله‌ی نوار تا پنل: ماوس در راه پنل از دسته بیرون نیفتد */
.bmm-panel::before { content: ""; position: absolute; right: 0; left: 0; top: -14px; height: 14px; }
.bmm-li.is-open > .bmm-panel { display: flex; animation: bmm-in .18s ease-out both; }
/* بی اسکریپت: با رفتن ماوس روی دسته */
.bmm:not(.bmm-js) .bmm-li.has-sub:hover > .bmm-panel { display: flex; }
@keyframes bmm-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bmm-li.is-open > .bmm-panel { animation: none; } }

.bmm-dim {
	position: fixed; z-index: 900; right: 0; left: 0; bottom: 0; top: 0; background: rgba(15, 23, 42, .38);
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility 0s linear .18s;
}
.bmm.is-open .bmm-dim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s; }

/* فهرست برندها (چیدمان rail) */
.bmm-rail {
	flex: 0 0 248px; padding: 14px 10px; background: #F7F9FB; border-left: 1px solid var(--bmm-line);
	border-radius: 0 23px 23px 0;
}
.bmm-rail-t { padding: 4px 12px 10px; font-size: 12px; color: #94A3B8; }
.bmm-ri {
	display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 14px;
	font-size: 14px; color: #334155; transition: background-color .15s, color .15s, box-shadow .15s;
}
.bmm-ri + .bmm-ri { margin-top: 2px; }
.bmm-ri-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmm-ri > .bmm-cnt, .bmm-ri > .bmm-chev { margin-right: auto; }
.bmm-ri > .bmm-chev { color: #CBD5E1; }
.bmm-ri:hover { background: rgba(255, 255, 255, .75); color: #0F172A; }
.bmm-ri.is-on { background: #fff; color: var(--bmm-acc-d); font-weight: 700; box-shadow: 0 8px 22px -14px rgba(0, 43, 81, .45), 0 0 0 1px #E3F6F4; }
.bmm-ri.is-on > .bmm-chev { color: var(--bmm-acc); }
.bmm-cnt {
	flex: none; padding: 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--bmm-line);
	font-size: 11.5px; font-weight: 400; line-height: 20px; color: #94A3B8; white-space: nowrap;
}
.bmm-ri.is-on .bmm-cnt { background: var(--bmm-acc-l); color: var(--bmm-acc-d); box-shadow: none; }

/* ستون وسط */
.bmm-mid { flex: 1 1 auto; min-width: 0; padding: 22px 28px 24px; }
.bmm-mid-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bmm-mid-t { min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.5; color: #0F172A; }
.bmm a.bmm-all {
	flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
	background: var(--bmm-acc-l); color: var(--bmm-acc-d); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
	transition: background-color .15s;
}
.bmm a.bmm-all:hover { background: #CDEFEC; }
.bmm-pane { display: none; }
.bmm-pane.is-on { display: block; animation: bmm-fade .16s ease-out both; }
@keyframes bmm-fade { from { opacity: 0; } to { opacity: 1; } }

.bmm-series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bmm-se {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; padding: 0 16px;
	border: 1px solid var(--bmm-line); border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.4; color: #1F2937;
	transition: border-color .15s, background-color .15s, color .15s;
}
.bmm-se > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmm-se > .bmm-chev { color: #CBD5E1; }
.bmm a.bmm-se:hover { border-color: #A6E3DF; background: #F4FCFB; color: var(--bmm-acc-d); }
.bmm-se:hover > .bmm-chev { color: var(--bmm-acc); }

.bmm-empty {
	display: flex; align-items: center; gap: 12px; padding: 22px 24px; border: 1.5px dashed #E3E8EF; border-radius: 16px;
	font-size: 14px; color: #64748B; transition: border-color .15s, background-color .15s;
}
.bmm-empty .material-icons { font-size: 26px; color: var(--bmm-acc); }
.bmm-empty b { color: #0F172A; }
.bmm-empty > span { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bmm-acc-d); }
.bmm a.bmm-empty:hover { border-color: #A6E3DF; background: #F4FCFB; }

.bmm-sub-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 13px; font-weight: 700; color: #64748B; }
.bmm-sub-h::after { content: ""; flex: 1; height: 1px; background: #F0F2F5; }
.bmm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bmm-chip {
	display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #F3F6F9;
	font-size: 13px; line-height: 1; color: #334155; white-space: nowrap; transition: background-color .15s, color .15s;
}
.bmm a.bmm-chip:hover { background: var(--bmm-acc-l); color: var(--bmm-acc-d); }

/* کارت برندها (چیدمان cards) */
.bmm-bcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bmm-bcard { display: block; padding: 12px 14px 10px; border: 1px solid var(--bmm-line); border-radius: 16px; background: #fff; }
.bmm-bcard-h {
	display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #F0F2F5;
	font-size: 14.5px; font-weight: 700; line-height: 1.5; color: #0F172A; transition: color .15s;
}
.bmm-bcard-t { min-width: 0; }
.bmm-bcard-h .bmm-cnt { box-shadow: none; background: #F3F6F9; }
.bmm-bcard-h > .bmm-chev, .bmm-nolist > .bmm-chev { margin-right: auto; color: var(--bmm-acc); }
.bmm a.bmm-bcard-h:hover { color: var(--bmm-acc-d); }
.bmm-it { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; line-height: 1.6; color: #475569; transition: color .15s; }
.bmm-it::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #CBD5E1; transition: background-color .15s; }
.bmm a.bmm-it:hover { color: var(--bmm-acc-d); }
.bmm-it:hover::before { background: var(--bmm-acc); }
/* برندهای بی‌زیرشاخه: هر ستون یک «stack» با حداکثر دو کارت کوتاه زیر هم (bmm_panel) */
.bmm-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bmm-bcard.bmm-nolist {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 54px; padding: 0 16px;
	transition: border-color .15s, background-color .15s;
}
.bmm-nolist .bmm-bcard-t { font-size: 14.5px; font-weight: 700; color: #0F172A; }
.bmm a.bmm-nolist:hover { border-color: #A6E3DF; background: #F4FCFB; }

/* کاشی‌ها (چیدمان tiles) */
.bmm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bmm-tile {
	display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px 16px; border: 1px solid var(--bmm-line);
	border-radius: 16px; background: #fff; transition: border-color .15s, background-color .15s;
}
.bmm-tico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #F3F6F9; color: #475569; }
.bmm-tico .material-icons { font-size: 22px; }
.bmm-tt { min-width: 0; }
.bmm-tt b { display: block; font-size: 14.5px; line-height: 1.5; color: #0F172A; }
.bmm-tt small { display: block; font-size: 12px; line-height: 1.6; color: #94A3B8; }
.bmm a.bmm-tile:hover, .bmm a.bmm-tile-all { border-color: #A6E3DF; background: #F4FCFB; }
.bmm-tile-all .bmm-tico { background: var(--bmm-acc); color: #fff; }

/* کارت «خرید …» با تصویر مگامنوی دسته */
.bmm a.bmm-promo {
	flex: 0 0 250px; display: flex; flex-direction: column; min-height: 300px; margin: 18px; padding: 20px; border-radius: 20px;
	background: linear-gradient(160deg, #F1FBFA 0%, #E3F6F4 55%, #CFF2EF 100%); color: #0F172A;
}
.bmm-promo-t { font-size: 17px; line-height: 1.6; }
.bmm-promo-s { font-size: 12.5px; line-height: 1.9; color: #475569; }
.bmm-promo-img { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 10px 0; }
.bmm-promo-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 200px; object-fit: contain; mix-blend-mode: multiply; }
.bmm-cta {
	display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: auto; border-radius: 12px;
	background: #002B51; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; transition: background-color .15s;
}
.bmm a.bmm-promo:hover .bmm-cta { background: #0B3D6B; }

/* ---------------------------------------------------------------- اندازه‌ها
   لبه‌ها مثل سربرگ: از 1200px به بالا ۵۰px از دو طرف (۵px حاشیه‌ی جعبه + ۴۵)، 993 تا 1199 سمت چپ ۱۶px. */
@media (max-width: 1399px) {
	.bmm-top { padding: 0 10px; }
	.bmm-top::after { right: 10px; left: 10px; }
}
@media (min-width: 993px) and (max-width: 1199px) {
	.bmm { --bmm-l: 11px; }
	.bmm-top { gap: 5px; padding: 0 8px; font-size: 13.5px; }
	.bmm-top::after { right: 8px; left: 8px; }
	.bmm-top .material-icons { font-size: 18px; }
	.bmm-rail { flex-basis: 220px; }
	/* کارت «خرید …» این‌جا جا نمی‌شود (همان پیوند خود دسته در نوار است) */
	.bmm a.bmm-promo { display: none; }
	.bmm-mid { padding: 20px 24px 22px; }
}
/* صفحه‌ی اقساط (installments/custom_header.html): منو داخل .container بوت‌استرپ است، نه تمام‌عرض؛
   لبه‌ها همان لبه‌ی ظرف (فاصله‌ی ۴۵px برای هم‌خطی با لوگوی سربرگ اصلی سایت است). */
.desktop-mega-menu .bmm { --bmm-r: 0px; --bmm-l: 0px; }

/* تبلت: سربرگ سایت این‌جا ستونی است و منو زیرش؛ نوار اگر جا نشد افقی می‌لغزد (پنل‌ها بیرون از
   این لغزش‌اند چون جایشان از .bmm حساب می‌شود). لمس اول دسته پنل را باز می‌کند (bpr-megamenu.js). */
@media (min-width: 768px) and (max-width: 992px) {
	.bmm { --bmm-r: 3px; --bmm-l: 3px; }
	.bmm-bar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.bmm-bar::-webkit-scrollbar { display: none; }
	.bmm-top { gap: 5px; padding: 0 9px; font-size: 13.5px; }
	.bmm-top::after { right: 9px; left: 9px; }
	.bmm-top .material-icons { font-size: 18px; }
	.bmm a.bmm-promo { display: none; }
	.bmm-rail { flex-basis: 196px; }
	.bmm-mid { padding: 18px 18px 20px; }
	.bmm-series, .bmm-bcards, .bmm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}