/* ===========================================================================
   نوارِ مسیرِ راهنما — فست‌کارت. فاز ۷۴، طراحیِ تازه در docs/27 «مسیرِ راهنمای فست‌کارت».

   تا این فاز نوار یک بلوکِ خاکستریِ ۹۵ پیکسلی بود: مسیر با قلمِ ریز در یک سو،
   تیتر در سوی دیگر، و در موبایل همه وسط‌چین روی هم. حالا یک سرِ صفحهٔ فشرده
   است، مثلِ فروشگاه‌های بزرگ:

     * مسیر بالا، با نشانِ خانه، جداکنندهٔ ظریف (نه قلمِ نمادِ قالب، که در
       این پروژه همیشه بار نمی‌شد) و حلقهٔ آخرِ پررنگ که اگر بلند است کوتاه
       می‌شود و متنِ کاملش در `title` است؛
     * تیتر زیرِ مسیر و هم‌راستا با آن، نه آن سرِ صفحه؛
     * موبایل: مسیر یک خطِ لغزان است و روی حلقهٔ آخر باز می‌شود
       (`js/breadcrumb.js`)، با سایهٔ محوِ لبه که می‌گوید «ادامه دارد»، و
       کنارِ تیتر «بازگشت به …» به حلقهٔ والد.

   رنگ‌ها از نشانه‌های قالب (`--theme-*`، `_shared/design_tokens.html`) و رنگِ
   اصلیِ فست‌کارت (`--theme-color`)؛ پس هر رنگی که فروشنده در پنل بگذارد
   اینجا هم هست. همه با پیشوندِ `:root .breadscrumb-section.fk-crumbs` و
   زنجیرهٔ کامل، چون قاعده‌های قدیمیِ `style.css` تا ویژگیِ (۰،۶،۱) می‌روند
   (`[dir=rtl] … nav .breadcrumb .breadcrumb-item+.breadcrumb-item`) و
   جداکنندهٔ قلمِ نماد و `margin-right:auto`ِ نوار را تحمیل می‌کردند؛ این‌طور
   بی `!important` کنار می‌روند.
   =========================================================================== */

:root .breadscrumb-section.fk-crumbs {
    --fk-crumbs-ink: var(--theme-ink, #1f2937);
    --fk-crumbs-muted: var(--theme-ink-muted, #6b7280);
    --fk-crumbs-line: var(--theme-line, #e5e7eb);
    --fk-crumbs-accent: var(--theme-color, #0da487);
    position: relative;
    overflow: visible;
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(var(--theme-color-rgb, 13, 164, 135), .07) 0%, transparent 70%),
        var(--theme-surface, #fff);
    border-bottom: 1px solid var(--fk-crumbs-line);
}

:root .breadscrumb-section.fk-crumbs .breadscrumb-contain.fk-crumbs__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 0 20px;
    text-align: start;
    color: var(--fk-crumbs-ink);
    font-family: inherit;
}
:root .breadscrumb-section.fk-crumbs.fk-crumbs--slim .breadscrumb-contain.fk-crumbs__inner { padding: 12px 0; }

/* --- مسیر ---------------------------------------------------------------- */
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__nav { margin: 0; max-width: 100%; min-width: 0; }
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 0;
    margin: 0;
    font-weight: 500;
    color: var(--fk-crumbs-muted);
}
/* جداکنندهٔ خودِ بوت‌استرپ/قالب کنار، یک «‹»ِ نازکِ CSS جایش — جهتش با صفحه
   می‌چرخد، چون حلقهٔ بعدی در فارسی سمتِ چپ است. */
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__trail .fk-crumbs__item + .fk-crumbs__item { padding: 0; }
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__trail .fk-crumbs__item + .fk-crumbs__item::before {
    content: "";
    float: none;
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 8px;
    padding: 0;
    border: solid currentColor;
    border-width: 0 0 1.6px 1.6px;
    opacity: .45;
    transform: rotate(45deg);
    font-family: inherit;
}
:root[dir="ltr"] .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__trail .fk-crumbs__item + .fk-crumbs__item::before { transform: rotate(-135deg); }

:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--fk-crumbs-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__item--home .fk-crumbs__link {
    padding-inline-start: 8px;
    background: var(--theme-tint, #f5f6f8);
    border: 1px solid var(--fk-crumbs-line);
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__home { width: 15px; height: 15px; flex: none; }
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__link:hover,
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__link:focus-visible {
    color: var(--fk-crumbs-accent);
    background: rgba(var(--theme-color-rgb, 13, 164, 135), .09);
    text-decoration: none;
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__link:focus-visible { outline: 2px solid var(--fk-crumbs-accent); outline-offset: 1px; }
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__item.active {
    margin: 0;
    color: var(--fk-crumbs-ink);
    font-weight: 700;
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__current {
    display: block;
    max-width: 42ch;
    padding: 4px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- تیتر ---------------------------------------------------------------- */
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__head { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
/* `breadscrumb-title` از فاز ۷۴: تا آن فاز این `<h1>` بی‌کلاس بود و قاعدهٔ
   ظاهرِ قالب فقط `h2` را می‌شناخت. حالا تیترِ سرِ صفحه است، نه برچسبِ نوار. */
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__title.breadscrumb-title {
    margin: 0;
    padding-inline-start: 14px;
    position: relative;
    font-size: clamp(20px, 16px + 1vw, 28px);
    font-weight: 800;
    line-height: 1.45;
    text-align: start;
    text-transform: none;
    color: var(--fk-crumbs-ink);
    overflow-wrap: anywhere;
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .3em;
    bottom: .3em;
    width: 4px;
    border-radius: 4px;
    background: var(--fk-crumbs-accent);
}
:root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__back { display: none; }

/* --- موبایل -------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* جعبهٔ جست‌وجوی سرِ صفحه در این پهنا `position: absolute` است و ۳۵ تا ۳۷
       پیکسل روی بخشِ بعدی می‌افتد؛ نوارِ قدیمی با پدینگِ بزرگش این را پنهان
       می‌کرد. اندازه‌گیری‌شده در ۳۷۵ تا ۷۶۷ پیکسل. `!important` چون
       `minified-style.css`ِ خودِ قالب در همین پهنا پدینگِ این جعبه را با
       `!important` می‌گذارد. */
    :root .breadscrumb-section.fk-crumbs .breadscrumb-contain.fk-crumbs__inner { gap: 8px; padding: 48px 0 14px !important; }
    :root .breadscrumb-section.fk-crumbs.fk-crumbs--slim .breadscrumb-contain.fk-crumbs__inner { padding: 46px 0 10px !important; }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__nav { width: 100%; }
    /* سایهٔ محو فقط روی لبه‌ای که پشتش هنوز حلقه هست — `js/breadcrumb.js`
       `data-fade` را می‌گذارد؛ مسیرِ کوتاه که جا می‌شود هیچ لبهٔ محوی ندارد. */
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__nav[data-fade~="start"] {
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__nav[data-fade~="end"] {
        -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
        mask-image: linear-gradient(to left, #000 85%, transparent);
    }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__nav[data-fade~="start"][data-fade~="end"] {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__trail {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        font-size: 12.5px;
    }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__trail::-webkit-scrollbar { display: none; }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__item { flex: none; }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__current { max-width: 60vw; }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__head { width: 100%; justify-content: space-between; }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__title.breadscrumb-title { font-size: 19px; }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__back {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 36px;
        max-width: 46%;
        padding: 6px 12px 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--fk-crumbs-line);
        background: var(--theme-surface, #fff);
        color: var(--fk-crumbs-ink);
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__back svg { width: 14px; height: 14px; flex: none; color: var(--fk-crumbs-accent); }
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__back:focus-visible { outline: 2px solid var(--fk-crumbs-accent); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    :root .breadscrumb-section.fk-crumbs .fk-crumbs__inner .fk-crumbs__link { transition: none; }
}