/*
 * گروهِ «کاتالوگ» — فهرستِ دسته / فروشگاه، نتیجهٔ جست‌وجو، فهرستِ برندها.
 *
 * فقط چیزهایی که خودِ قالب (`main.css`) ندارد: نوارِ مسیرِ بالای نوارِ عنوان،
 * توضیح و شمارِ کالا در نوارِ عنوان، حالتِ «لینکیِ» گزینه‌های فیلتر (قالب
 * چک‌باکس دارد، ما لینک)، ردیفِ دسته‌ها در موبایل، وضعیتِ صفحه‌بندی، نوارِ
 * جست‌وجوی درونِ صفحه و شبکهٔ برندها. همه با متغیرهای قالب، موبایل‌اول.
 */

/* ── نوارِ مسیر، تمام‌عرض بالای نوارِ عنوان ── */
.mg-shop-crumbs { background: var(--mg-bg); border-bottom: 1px solid var(--mg-border); }
.mg-shop-crumbs .mg-breadcrumb-section { background: transparent; border-bottom: 0; padding: .75rem 0; }

/* ── نوارِ عنوان: شمارِ کالا و توضیحِ دسته ── */
.mg-shop-count { align-self: center; padding: .3rem .85rem; border-radius: var(--mg-radius-full); background: rgba(255, 255, 255, .18); color: #fff; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.mg-shop-desc { flex: 1 1 100%; margin: 0; max-width: 70ch; color: rgba(255, 255, 255, .92); font-size: .95rem; line-height: 1.8; }
@media (max-width: 640px) {
    .mg-shop-count { align-self: flex-start; }
    .mg-shop-title { font-size: 1.35rem; }
}

/* ── سایدبارِ فیلتر ── */
/* دسکتاپ: پنلِ بلندتر از صفحه خودش اسکرول بخورد، نه اینکه تهش تا آخرِ فهرست دیده نشود. */
@media (min-width: 1025px) {
    .mg-shop-sidebar { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--mg-primary-rgb), .3) transparent; }
}
.mg-shop-filters-form { margin: 0; }
.mg-sidebar-title, .mg-filter-title { letter-spacing: 0; line-height: 1.5; }
.mg-filter-title svg { flex-shrink: 0; }
.mg-filter-checkbox { flex-shrink: 0; }

/* بخشِ قیمت اسکرولِ درونی نگیرد (اسلایدر + دو خانه + دکمه). */
.mg-price-filter-section .mg-filter-content { max-height: none; overflow: visible; padding-inline-start: 0; }
.mg-price-apply-btn { min-height: 44px; font-family: inherit; }
.mg-price-input { font-family: inherit; }
.mg-price-slider:focus-visible { outline: none; }
.mg-price-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--mg-primary-rgb), .3); }
.mg-price-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--mg-primary-rgb), .3); }

/* گزینهٔ «وضعیت» لینک است، نه چک‌باکس: حالتِ روشن با کلاس. */
a.mg-filter-checkbox-item { color: var(--mg-text); text-decoration: none; }
.mg-filter-checkbox-item .mg-checkmark { flex-shrink: 0; }
.mg-filter-checkbox-item.is-checked { background: rgba(var(--mg-primary-rgb), .1); color: var(--mg-primary-dark); }
.mg-filter-checkbox-item.is-checked .mg-checkmark { background: var(--mg-primary); border-color: var(--mg-primary); }
.mg-filter-checkbox-item.is-checked .mg-checkmark::after { content: '✓'; color: #fff; font-size: .7rem; }
.mg-filter-item.active { color: var(--mg-primary-dark); font-weight: 600; }

/* ── ردیفِ دسته‌ها بالای فهرست — فقط وقتی سایدبار کشویی است ── */
.mg-subcats { flex-wrap: nowrap; gap: .5rem; margin-bottom: 1rem; padding-block: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mg-subcats::-webkit-scrollbar { display: none; }
.mg-subcats a { flex: none; white-space: nowrap; padding: .5rem 1rem; background: var(--mg-bg); border-color: var(--mg-border); color: var(--mg-text); }
@media (min-width: 1025px) {
    .mg-subcats { display: none; }
}

/* ── نوارِ ابزار ── */
form.mg-sort-wrapper { margin: 0; }
.mg-sort-select { font-family: inherit; max-width: 100%; }
.mg-sort-apply { min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--mg-border); border-radius: var(--mg-radius); background: var(--mg-surface); color: var(--mg-text); font: inherit; font-size: .85rem; cursor: pointer; }
.mg-filter-toggle { font-family: inherit; min-height: 44px; }
.mg-result-count strong { color: var(--mg-text); }
.mg-filter-chip { min-height: 32px; }

/* ── حالتِ خالی (قالب عنوان را h3 می‌گذارد؛ ما h2 تا ترتیبِ عنوان‌ها نپرد) ── */
.mg-no-products h2 { font-size: 1.5rem; color: var(--mg-text); margin-bottom: .5rem; letter-spacing: 0; line-height: 1.5; }
.mg-no-products svg { display: block; margin-inline: auto; }
.mg-no-products .mg-search-tags { justify-content: center; }
@media (max-width: 640px) {
    .mg-no-products { padding: 2.5rem 1.25rem; }
    .mg-no-products h2 { font-size: 1.2rem; }
}

/* ── صفحه‌بندی ── */
.mg-pagination { flex-wrap: wrap; }
.mg-pagination .dots { min-width: 24px; padding: 0; color: var(--mg-text-muted); }
.mg-pagination-status { margin: 0 0 1rem; text-align: center; font-size: .85rem; color: var(--mg-text-muted); }
@media (max-width: 480px) {
    .mg-pagination { gap: .35rem; padding-inline: 0; }
    .mg-pagination a, .mg-pagination span { min-width: 36px; height: 36px; padding: 0 .5rem; font-size: .85rem; }
}

/* ── صفحهٔ جست‌وجو ── */
.mg-shop-search-box { max-width: 720px; margin: 0 auto 1.5rem; }
.mg-page-search .mg-search-input { padding-inline-end: 4.5rem; font-family: inherit; }
.mg-search-fallback { margin-top: 2.5rem; padding-bottom: 1rem; }

/* ── فهرستِ برندها ── */
.mg-brands-directory { padding-bottom: 3rem; }
.mg-brands-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.mg-brands-grid .mg-brand-item { margin-top: 0; padding: 0; border: 1px solid var(--mg-border); min-height: 0; }
.mg-brands-grid .mg-brand-item:hover { border-color: rgba(var(--mg-primary-rgb), .35); }
.mg-brands-grid .mg-brand-link { padding: 1.25rem .75rem; border-radius: inherit; }
.mg-brands-grid .mg-brand-logo:not(:has(img)) .mg-brand-name { font-size: 1rem; color: var(--mg-text); overflow-wrap: anywhere; }
.mg-brands-grid .mg-brand-item:hover .mg-brand-name { color: var(--mg-primary-dark); }
.mg-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--mg-primary-rgb), .1); color: var(--mg-primary-dark); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.mg-brand-count { padding: .15rem .6rem; border-radius: var(--mg-radius-full); background: var(--mg-surface); color: var(--mg-text-muted); font-size: .75rem; }
@media (min-width: 640px) {
    .mg-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
    .mg-brands-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ── ستونِ فهرست نباید از ردیفِ دسته‌های بی‌شکن عریض‌تر شود ──
   زیر ۱۰۲۴px چیدمان `1fr` است (= minmax(auto,1fr))؛ ردیفِ `.mg-subcats` با
   `nowrap` عرضِ ذاتیِ بزرگی دارد و ستون را از صفحه بیرون می‌کشید (کارت‌ها و
   نوارِ ابزار در موبایل از چپ بریده می‌شدند). `min-width:0` + `minmax(0,1fr)`
   یعنی ستون به عرضِ صفحه می‌ماند و ردیفِ دسته‌ها خودش اسکرول می‌خورد. */
.mg-shop-layout { grid-template-columns: 280px minmax(0, 1fr); }
.mg-shop-content { min-width: 0; }
@media (max-width: 1024px) {
    .mg-shop-layout { grid-template-columns: minmax(0, 1fr); }
}
.mg-shop-layout-no-sidebar { grid-template-columns: minmax(0, 1fr); }