/* ==========================================================================
   بام پنجم — صفحات مینی‌پروژه (ماشین‌حساب هزینه‌ی اجرا و مصالح)
   ==========================================================================

   موبایل‌فرست: قاعده‌های بدون media query چیدمان گوشی‌اند و صفحه‌های بزرگ‌تر
   فقط با min-width اضافه می‌شوند. بعد از blog.css و sample-project.css لود
   می‌شود و توکن‌های رنگ، مسیر صفحه، CTA و «بیشتر/بستن» را از آن‌ها می‌گیرد.

   چیدمان همان اپ اندروید است: بالای صفحه یک هدر چسبان با عنوان و کادر مقدار،
   زیرش گزینه‌ها و بعد مقاله. سه لایه‌ی رنگی از هم جدا دیده می‌شوند:
   هدر آبی تیره‌ی برند، پنل خاکستری‌آبیِ گزینه‌ها، و کارت‌های سفید روی آن.
   فاصله‌ی چسبیدن را mini-project.js از ارتفاع واقعی هدر سایت می‌گذارد؛
   6.15rem (هدر ۹۰ پیکسلی + ۸) فقط مقدار پیش از اجرای اسکریپت است.

   اندازه‌ها جمع‌وجور و هم‌سنگ دیوار و زومیت‌اند: متن فهرست ۱۲–۱۵ پیکسل، عنوان
   گزینه ۱۵. کف‌ها رعایت شده: هیچ متنی زیر ‎.75rem‎ نیست، کادر مقدار بالای ۱۶
   پیکسل است تا Safari زوم نکند، و ردیف‌های منوی گوشی دست‌کم ۴۴ پیکسل ارتفاع
   دارند (حداقل ناحیه‌ی لمس اپل).
   ========================================================================== */

.mp-page {
    --mp-sticky-top: 6.15rem;
    --mp-radius: 18px;

    /* هدر چسبان: آبی تیره‌ی برند، هم‌خانواده‌ی CTA سایت */
    --mp-bar-from: #1e3a8a;
    --mp-bar-to: #1d4ed8;
    --mp-on-bar: #ffffff;
    --mp-on-bar-soft: rgba(255, 255, 255, .8);
    --mp-on-bar-faint: rgba(255, 255, 255, .16);

    /* پنل گزینه‌ها و کارت‌ها */
    --mp-panel: #eef2f7;
    --mp-panel-line: #dbe3ee;
    --mp-card: #ffffff;
    --mp-card-line: #e2e8f0;
    --mp-card-body: #f8fafc;
    --mp-price-bg: #eff6ff;
    --mp-price-fg: #1e40af;

    /* جمع کل مثل اپ قرمز است؛ توضیحات یادداشت کهربایی */
    --mp-total-bg: #fef2f2;
    --mp-total-fg: #b91c1c;
    --mp-note-bg: #fffbeb;
    --mp-note-line: #fde68a;
    --mp-note-fg: #78350f;

    /* سه گروه دسته‌ها، همان رنگ‌های وایرفریم */
    --mp-g0: #475569;
    --mp-g1: #b45309;
    --mp-g2: #0f766e;
}

/* ============================== هدر چسبان ============================== */
.mp-sentinel { height: 1px; }

.mp-bar {
    position: sticky;
    top: var(--mp-sticky-top);
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    padding: .8rem .9rem;
    border-radius: var(--mp-radius);
    background: linear-gradient(135deg, var(--mp-bar-from), var(--mp-bar-to));
    color: var(--mp-on-bar);
    box-shadow: 0 14px 30px -18px rgba(30, 58, 138, .7);
}

.mp-bar-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

/* آیکون‌های دسته خطی و تیره‌اند؛ روی زمینه‌ی سفید خوانا می‌مانند */
.mp-bar-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
}

.mp-bar-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mp-bar-heading { min-width: 0; }

.mp-bar h1 {
    margin: 0;
    font-size: clamp(1.1rem, 4.4vw, 1.4rem);
    font-weight: 800;
    line-height: 1.45;
    color: var(--mp-on-bar);
}

.mp-bar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .8rem;
    margin: .1rem 0 0;
    font-size: .75rem;
    color: var(--mp-on-bar-soft);
}

.mp-bar-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.mp-bar-meta i { color: #bfdbfe; }

/* دکمه‌ی «تغییر دسته» — فقط زیر lg، جایی که فهرست دسته‌ها منوی کشویی است.
   داخل هدر آبی کنار عنوان می‌نشیند، چون همان عنوان است که عوض می‌شود. */
.mp-cats-toggle {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: none;
    gap: .35rem;
    margin-inline-start: auto;
    padding: .3rem .7rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: var(--mp-on-bar-faint);
    color: var(--mp-on-bar);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}

.mp-cats-toggle:hover { background: rgba(255, 255, 255, .26); }

.mp-cats-toggle:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
}

.mp-amount { min-width: 0; }

.mp-amount-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mp-on-bar-soft);
}

.mp-amount-field {
    display: flex;
    align-items: stretch;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .15s ease;
}

.mp-amount-field:focus-within { box-shadow: 0 0 0 4px rgba(191, 219, 254, .55); }

/* ‎1.05rem‎ (۱۶٫۸ پیکسل) بالای ۱۶ است تا Safari روی گوشی صفحه را زوم نکند */
.mp-amount-field input {
    flex: 1;
    min-width: 0;
    padding: .5rem .8rem;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
    direction: ltr;
    outline: none;
}

.mp-amount-unit {
    display: flex;
    align-items: center;
    flex: none;
    padding: 0 .75rem;
    background: var(--mp-price-bg);
    color: var(--mp-price-fg);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.mp-amount-hint {
    margin: .3rem 0 0;
    font-size: .75rem;
    line-height: 1.7;
    color: var(--mp-on-bar-soft);
}

/* چسبیده: فقط عنوان و کادر مقدار، در یک ردیف. ارتفاعی که هدر با جمع‌شدن از
   دست می‌دهد (‎--mp-bar-shrink‎، اندازه‌گرفته در mini-project.js) به حاشیه‌ی
   پایینش اضافه می‌شود تا فهرست زیرش در لحظه‌ی چسبیدن بالا نپرد. برای همین
   فاصله‌ی زیر هدر فقط از همین حاشیه می‌آید و حاشیه‌ی بالای عنصر بعدی صفر است؛
   وگرنه دو حاشیه روی هم می‌افتادند و جبران ناقص می‌شد. */
.mp-bar { margin-bottom: .75rem; }

.mp-bar + * { margin-top: 0; }

.mp-bar.is-stuck {
    grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 46%);
    align-items: center;
    gap: .6rem;
    margin-bottom: calc(.75rem + var(--mp-bar-shrink, 0px));
    padding: .45rem .5rem .45rem .7rem;
    border-radius: 16px;
}

/* فاصله‌ی ۸ پیکسلی زیر هدر سایت را با رنگ زمینه‌ی صفحه می‌پوشاند تا کارت‌هایی
   که از زیر هدر چسبان رد می‌شوند از لای آن دیده نشوند */
.mp-bar.is-stuck::before {
    content: "";
    position: absolute;
    inset-inline: -1rem;
    bottom: 100%;
    height: .6rem;
    background: #fdfdff;
}

.mp-bar.is-stuck .mp-bar-icon,
.mp-bar.is-stuck .mp-bar-meta,
.mp-bar.is-stuck .mp-amount-label,
.mp-bar.is-stuck .mp-amount-hint { display: none; }

.mp-bar.is-stuck h1 {
    font-size: .98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-bar.is-stuck .mp-amount-field input { padding: .4rem .6rem; }

.mp-bar.is-stuck .mp-amount-unit { padding: 0 .6rem; font-size: .75rem; }

/* چسبیده: دکمه فقط آیکون می‌شود و به ابتدای ردیف می‌رود، مثل دکمه‌ی منو */
.mp-bar.is-stuck .mp-bar-title { gap: .5rem; }

.mp-bar.is-stuck .mp-cats-toggle {
    order: -1;
    align-self: center;
    margin-inline-start: 0;
    padding: .4rem .5rem;
    border-radius: 10px;
}

.mp-bar.is-stuck .mp-cats-toggle-text { display: none; }

.mp-lead {
    margin: 0;
    max-width: 70ch;
    color: var(--text-body);
    font-size: .95rem;
    line-height: 1.85;
}

/* ============================== پنل گزینه‌ها ============================== */
.mp-lead + .mp-results { margin-top: .75rem; }

.mp-results {
    padding: .7rem;
    border: 1px solid var(--mp-panel-line);
    border-radius: 20px;
    background: var(--mp-panel);
}

/* ------------------------------ فیلترها ------------------------------ */
/* منوها نسبت به همین جعبه جا می‌گیرند، نه نسبت به ردیف اسکرول‌خور چیپ‌ها،
   پس بریده نمی‌شوند و روی گوشی تمام عرض پنل را می‌گیرند */
.mp-filters {
    position: relative;
    margin-bottom: .6rem;
}

.mp-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .45rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.mp-toolbar::-webkit-scrollbar { display: none; }

.mp-toolbar > * { flex: none; }

.mp-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border: 1px solid var(--mp-card-line);
    border-radius: 999px;
    background: var(--mp-card);
    color: var(--text-body);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.mp-chip:focus-visible,
.mp-sort select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: 1px;
}

.mp-clear {
    border-color: #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

.mp-clear[hidden] { display: none; }

.mp-filter { position: static; }

.mp-filter > summary { list-style: none; }

.mp-filter > summary::-webkit-details-marker { display: none; }

.mp-filter[open] > summary,
.mp-filter.has-selection > summary {
    border-color: var(--primary-color);
    background: var(--mp-price-bg);
    color: var(--mp-price-fg);
}

.mp-filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: .75rem;
}

.mp-filter-count[hidden] { display: none; }

.mp-filter > summary .bi-chevron-down { font-size: .75rem; transition: transform .2s ease; }

.mp-filter[open] > summary .bi-chevron-down { transform: rotate(180deg); }

.mp-filter-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .35rem);
    z-index: 15;
    max-height: min(50vh, 22rem);
    overflow-y: auto;
    padding: .4rem;
    border: 1px solid var(--mp-card-line);
    border-radius: 16px;
    background: var(--mp-card);
    box-shadow: 0 18px 36px -14px rgba(15, 23, 42, .3);
}

.mp-filter-menu label {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .45rem .55rem;
    border-radius: 10px;
    font-size: .88rem;
    color: var(--text-main);
    cursor: pointer;
}

.mp-filter-menu label:hover { background: var(--mp-card-body); }

.mp-filter-menu input {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    accent-color: var(--primary-color);
}

.mp-filter-menu small {
    margin-inline-start: auto;
    font-size: .75rem;
    color: var(--text-muted);
}

/* ------------------------------ شمارش و ترتیب ------------------------------ */
.mp-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
}

.mp-result {
    margin: 0;
    font-size: .8rem;
    color: var(--text-muted);
}

.mp-result strong { color: var(--text-main); }

.mp-sort {
    flex: none;
    margin: 0;
}

.mp-sort select {
    padding: .3rem .75rem;
    border: 1px solid var(--mp-card-line);
    border-radius: 999px;
    background-color: var(--mp-card);
    color: var(--text-body);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

/* ------------------------------ کارت گزینه ------------------------------ */
.mp-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-option[hidden] { display: none; }

/* لنگر #option-‹id› زیر هدر سایت و هدر چسبان پنهان نشود */
.mp-option { scroll-margin-top: calc(var(--mp-sticky-top) + 4.5rem); }

.mp-option > details {
    border: 1px solid var(--mp-card-line);
    border-radius: var(--mp-radius);
    background: var(--mp-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mp-option > details:hover { border-color: #bfd0ea; }

.mp-option > details[open] {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 16px 32px -20px rgba(30, 58, 138, .45);
}

.mp-option summary {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem .9rem;
    list-style: none;
    cursor: pointer;
}

.mp-option summary::-webkit-details-marker { display: none; }

.mp-option summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: -3px;
    border-radius: var(--mp-radius);
}

.mp-option-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.mp-option-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--text-main);
}

.mp-option-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding-top: .1rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.mp-option-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.mp-option-amount {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-muted);
}

.mp-option-amount i { color: #94a3b8; }

/* مبلغ کل در یک کپسول رنگی تا در یک نگاه از بقیه‌ی کارت جدا شود */
.mp-option-total {
    padding: .18rem .7rem;
    border-radius: 999px;
    background: var(--mp-price-bg);
    color: var(--mp-price-fg);
    font-size: .98rem;
    font-weight: 800;
    white-space: nowrap;
}

.mp-option-total small {
    font-size: .75rem;
    font-weight: 600;
    color: var(--mp-price-fg);
    opacity: .75;
}

.mp-option-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .7rem .9rem .8rem;
    border-top: 1px solid var(--mp-card-line);
    background: var(--mp-card-body);
}

/* ------------------------- جدول مصالح -------------------------
   روی گوشی مثل اپ: نام کالا یک سطر کامل، زیرش مقدار و مبلغ. از تبلت به بالا
   یک جدول سه‌ستونی معمولی. */
.mp-materials,
.mp-materials tbody {
    display: block;
}

.mp-materials {
    width: 100%;
    border: 1px solid var(--mp-card-line);
    border-radius: 14px;
    background: var(--mp-card);
    overflow: hidden;
    font-size: .85rem;
}

.mp-materials thead { display: none; }

.mp-materials tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .75rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--mp-card-line);
}

.mp-materials tbody tr:last-child { border-bottom: 0; }

.mp-materials tbody th {
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.6;
}

.mp-materials tbody td {
    color: var(--text-body);
    white-space: nowrap;
}

.mp-materials tbody td:last-child {
    text-align: end;
    font-weight: 700;
    color: var(--text-main);
}

.mp-materials small,
.mp-sums dd small {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ------------------------------ جمع‌ها ------------------------------ */
.mp-sums {
    margin: 0;
    border: 1px solid var(--mp-card-line);
    border-radius: 14px;
    background: var(--mp-card);
    overflow: hidden;
}

.mp-sums > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--mp-card-line);
    font-size: .9rem;
}

.mp-sums dt {
    font-weight: 700;
    color: var(--text-body);
}

.mp-sums dd {
    margin: 0;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
}

.mp-sums > .mp-sums-total {
    border-bottom: 0;
    background: var(--mp-total-bg);
}

.mp-sums-total dt,
.mp-sums-total dd,
.mp-sums-total dd small {
    font-size: .98rem;
    color: var(--mp-total-fg);
}

.mp-sums-total dd small { font-size: .75rem; }

.mp-per-unit {
    margin: -.2rem 0 0;
    font-size: .75rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.mp-option-desc {
    padding: .6rem .8rem;
    border: 1px solid var(--mp-note-line);
    border-radius: 14px;
    background: var(--mp-note-bg);
    color: var(--mp-note-fg);
    font-size: .85rem;
    line-height: 1.8;
}

.mp-empty { margin-top: .6rem; background: var(--mp-card); }

.mp-empty[hidden] { display: none; }

.mp-empty p { margin: 0 0 .6rem; }

.mp-note {
    display: flex;
    gap: .4rem;
    margin: .75rem .25rem 0;
    font-size: .75rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.mp-note i { color: var(--primary-color); }

/* ------------------------------ مقاله ------------------------------ */
/* مقاله یک برگه‌ی سفید جدا زیر پنل گزینه‌هاست تا ماشین‌حساب و متن با هم قاطی نشوند */
.mp-article {
    margin-top: 1.25rem;
    padding: 1rem .9rem;
    border: 1px solid var(--mp-card-line);
    border-radius: 20px;
    background: var(--mp-card);
}

.mp-article .sp-section-title { margin-bottom: .5rem; font-size: 1.1rem; }

.mp-article .article-body { margin-top: 0; }

.mp-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin: 0 0 .85rem;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--mp-card-line);
    font-size: .8rem;
    color: var(--text-muted);
}

.mp-article-meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* ==================== فهرست دسته‌ها: ستون کناری / منوی کشویی ==================== */
/* زیر lg بوت‌استرپ این را پنل کشویی از راست می‌کند (offcanvas-lg offcanvas-start) */
.mp-side { --bs-offcanvas-width: min(21rem, 88vw); }

.mp-side .offcanvas-header {
    background: linear-gradient(135deg, var(--mp-bar-from), var(--mp-bar-to));
    color: var(--mp-on-bar);
}

.mp-side .offcanvas-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
}

.mp-side .offcanvas-body { background: var(--mp-panel); }

.mp-side-nav {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* عنوان ستون فقط روی دسکتاپ؛ در منوی کشویی هدر خود پنل همین کار را می‌کند */
.mp-side-head { display: none; }

.mp-side-group { --mp-group: var(--mp-g0); }

.mp-side-group[data-group="1"] { --mp-group: var(--mp-g1); }
.mp-side-group[data-group="2"] { --mp-group: var(--mp-g2); }

.mp-side-group-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .25rem;
    padding: 0 .5rem;
    font-size: .78rem;
    font-weight: 800;
    color: var(--mp-group);
}

.mp-side-group-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mp-group);
}

.mp-side-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* روی گوشی (منوی کشویی) هر ردیف دست‌کم ۴۴ پیکسل تا با انگشت راحت زده شود؛
   روی دسکتاپ با موس فشرده‌تر است */
.mp-side-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .35rem .5rem;
    border-radius: 12px;
    color: var(--text-body);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}

.mp-side-link:hover { background: var(--mp-card); color: var(--text-main); }

.mp-side-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: -3px;
}

/* دسته‌ی همین صفحه */
.mp-side-link[aria-current="page"] {
    background: var(--mp-card);
    color: var(--mp-price-fg);
    font-weight: 800;
    box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, .45);
}

.mp-side-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--mp-card);
    color: var(--primary-color);
    font-size: .9rem;
}

.mp-side-link[aria-current="page"] .mp-side-icon { background: var(--mp-price-bg); }

.mp-side-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.mp-side-name {
    flex: 1;
    min-width: 0;
    line-height: 1.55;
}

.mp-side-link small {
    flex: none;
    min-width: 1.5rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

/* ============================== فهرست دسته‌ها ============================== */
.mp-group {
    --mp-group: var(--mp-g0);
    margin-top: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: var(--surface);
    overflow: hidden;
}

.mp-group[data-group="1"] { --mp-group: var(--mp-g1); }
.mp-group[data-group="2"] { --mp-group: var(--mp-g2); }

.mp-group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem .9rem;
    border-bottom: 2px solid var(--mp-group);
    background: var(--mp-panel);
    font-size: .85rem;
    font-weight: 700;
    color: var(--mp-group);
}

.mp-group-head h2 {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--mp-group);
}

.mp-cats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-cats > li { border-top: 1px solid var(--border-softer); }

.mp-cats > li:first-child { border-top: 0; }

.mp-cats-boxed {
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: var(--surface);
    overflow: hidden;
}

.mp-cat {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .9rem;
    color: inherit;
    text-decoration: none;
}

.mp-cat:hover { background: var(--surface-soft); }

.mp-cat:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: -3px;
}

.mp-cat-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1.1rem;
}

.mp-cat-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.mp-cat-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.mp-cat-text strong {
    font-size: .9rem;
    color: var(--text-main);
}

.mp-cat-text small {
    font-size: .75rem;
    color: var(--text-muted);
}

.mp-cat-arrow {
    color: var(--text-muted);
    transition: transform .2s ease;
}

.mp-cat:hover .mp-cat-arrow { transform: translateX(-4px); }

/* ============================== تبلت ============================== */
@media (min-width: 576px) {
    .mp-results { padding: .85rem; }

    .mp-materials { display: table; border-collapse: separate; border-spacing: 0; }

    .mp-materials thead { display: table-header-group; }

    .mp-materials tbody { display: table-row-group; }

    .mp-materials tbody tr { display: table-row; padding: 0; }

    .mp-materials th,
    .mp-materials td {
        padding: .45rem .75rem;
        border-bottom: 1px solid var(--mp-card-line);
        text-align: start;
        vertical-align: middle;
    }

    .mp-materials thead th {
        background: var(--mp-price-bg);
        font-size: .75rem;
        font-weight: 700;
        color: var(--mp-price-fg);
    }

    .mp-materials tbody tr:nth-child(even) > * { background: var(--mp-card-body); }

    .mp-materials tbody tr:last-child th,
    .mp-materials tbody tr:last-child td { border-bottom: 0; }

    .mp-materials thead th:last-child,
    .mp-materials tbody td:last-child { text-align: end; }
}

@media (min-width: 768px) {
    /* عنوان راست، کادر مقدار چپ؛ در هر دو حالت یک ردیف */
    .mp-bar {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
        align-items: end;
        gap: 1rem;
        padding: .9rem 1.1rem;
    }

    .mp-bar.is-stuck {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
        padding: .5rem .7rem .5rem .95rem;
    }

    .mp-bar.is-stuck h1 { font-size: 1.05rem; }

    .mp-results,
    .mp-article { padding: 1rem 1.1rem; }

    /* جا هست: چیپ‌ها می‌شکنند به‌جای اسکرول، و هر منو زیر چیپ خودش باز می‌شود */
    .mp-toolbar {
        flex-wrap: wrap;
        overflow: visible;
    }

    .mp-filter { position: relative; }

    .mp-filter-menu {
        inset-inline: 0 auto;
        width: max(100%, 17rem);
    }

    .mp-cats:not(.mp-cats-boxed) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-cats:not(.mp-cats-boxed) > li:nth-child(2) { border-top: 0; }

    .mp-cats:not(.mp-cats-boxed) > li:nth-child(odd) { border-inline-end: 1px solid var(--border-softer); }

    .mp-cats-boxed {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-cats-boxed > li:nth-child(2) { border-top: 0; }

    .mp-cats-boxed > li:nth-child(odd) { border-inline-end: 1px solid var(--border-softer); }
}

/* ============================== دسکتاپ ============================== */
@media (min-width: 992px) {
    /* فهرست دسته‌ها ستون راست و ماشین‌حساب ستون چپ؛ در RTL ستون اول راست است.
       ستون کناری عرض ماشین‌حساب را هم محدود می‌کند، تا نام گزینه و مبلغش آن‌قدر
       از هم دور نیفتند که چشم کل عرض را طی کند. */
    .mp-shell {
        display: grid;
        grid-template-columns: 17rem minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }

    .mp-main {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .mp-side {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: var(--mp-sticky-top);
        max-height: calc(100vh - var(--mp-sticky-top) - 1rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* offcanvas-lg بدنه را flex می‌کند و گروه‌ها کنار هم می‌افتادند */
    .mp-side .offcanvas-body {
        display: block;
        background: transparent;
    }

    .mp-side-nav {
        gap: .6rem;
        padding: .7rem .5rem;
        border: 1px solid var(--mp-panel-line);
        border-radius: 20px;
        background: var(--mp-panel);
    }

    .mp-side-link {
        min-height: 0;
        padding: .3rem .5rem;
    }

    .mp-side-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: 0 .5rem .55rem;
        border-bottom: 1px solid var(--mp-panel-line);
        color: var(--text-main);
        font-size: .9rem;
        font-weight: 800;
        text-decoration: none;
    }

    .mp-side-head span { display: inline-flex; align-items: center; gap: .4rem; }

    .mp-side-head span i { color: var(--primary-color); }

    .mp-side-head small {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        color: var(--primary-color);
        font-size: .75rem;
        font-weight: 700;
    }

    .mp-cats-toggle { display: none; }

    /* ستون کناری همین فهرست را دارد */
    .mp-related { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-option > details,
    .mp-amount-field,
    .mp-cat-arrow,
    .mp-filter > summary .bi-chevron-down { transition: none; }
}