/* ============================================================================
   Ryan breadcrumb - desktop presentation.

   Every Ryan view that renders a trail uses the same `.vp-breadcrumb ul li`
   markup (Catalog/_CategoryBreadcrumb, Product/_ProductBreadcrumb, Catalog/Search,
   ManufacturerAll, ProductsByTag, Blog, News, Topic, Cart, Deals, Faq), so this
   normalises presentation in one place. No markup, no text and no URLs change.

   The language is the one already approved on mobile Search: one tight line,
   understated 13px text with a hairline underline, and a border-drawn chevron
   whose apex points LEFT - the direction an RTL trail advances:

       خانه  ‹  دسته بندی  ‹  محصول

   not the theme's `خانه / دسته بندی / محصول`.

   Desktop only. The mobile treatment is owned by mobile-search-header.css and is
   deliberately untouched here - this file starts at the same 960px boundary that
   file stops at, so the two can never both apply.
   ============================================================================ */

/* The house glyph in front of `خانه`. Deliberately outside the breakpoint below:
   this file is registered on every Ryan page at every width, so one rule covers
   Search, Product, Category, Manufacturer and Cart on both mobile and desktop -
   the alternative was the same suppression written into five views and two
   stylesheets. Only Manufacturer still ships the markup (`<i class="fal fa-home">`);
   Category and Product have it commented out and could uncomment it at any time,
   which is the reason to suppress rather than delete. The `<a>`, its route and the
   text stay exactly as they are - nothing but the glyph is affected, and it carries
   no layout of its own, so the trail's spacing and height do not move. */
html body .vp-breadcrumb ul li i,
html body .vp-breadcrumb ul li svg {
    display: none !important;
}

@media only screen and (min-width: 960px) {

    /* The trail itself is the scroll port, so a long trail scrolls sideways
       instead of wrapping into a block. Scrollbar hidden on all three engines. */
    html body .vp-breadcrumb {
        padding: 0 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html body .vp-breadcrumb::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* The theme's clearfix would drop an extra box into the track. */
    html body .vp-breadcrumb.after-clear::after {
        display: none;
    }

    /* max-content is what actually overflows the port; min-width keeps a short
       trail flush with the gutter. */
    html body .vp-breadcrumb ul {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: -moz-max-content;
        width: max-content;
        min-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 10px 0 12px;
        list-style: none;
    }

    html body .vp-breadcrumb ul li {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        position: relative;
        margin: 0;
        padding: 0;
        line-height: 18px;
        white-space: nowrap;
    }

    /* Theme spacer pseudo-element; the chevron below replaces it. */
    html body .vp-breadcrumb ul li::before {
        display: none;
    }

    /* line-height 18 rather than the theme's 2.7: at 13px that leaves ~2.5px of
       half-leading under the em box, which puts the rule close under a Persian
       descender instead of a third of a line below it. */
    html body .vp-breadcrumb ul li > a,
    html body .vp-breadcrumb ul li > h1,
    html body .vp-breadcrumb ul li > h2,
    html body .vp-breadcrumb ul li > span,
    html body .vp-breadcrumb ul li > strong {
        display: inline-block;
        margin: 0;
        padding: 0 0 2px;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: #5f6368;
        text-decoration: none;
        border-bottom: 1px solid #dadce0;
    }

    /* The current page's crumb is a bare text node in _ProductBreadcrumb (and a
       `.vp-active` li elsewhere), so it has no child element to carry the box.
       Styled on the li itself, otherwise it sits 2px short of its siblings and
       loses the underline the rest of the trail has. */
    html body .vp-breadcrumb ul li.vp-active,
    html body .vp-breadcrumb ul li:last-child {
        padding-bottom: 2px;
        font-size: 13px;
        line-height: 18px;
        color: #3c4043;
        border-bottom: 1px solid #dadce0;
    }

    /* ...but not when that li already has a child carrying the box. */
    html body .vp-breadcrumb ul li.vp-active:has(> a),
    html body .vp-breadcrumb ul li:last-child:has(> a),
    html body .vp-breadcrumb ul li.vp-active:has(> h1),
    html body .vp-breadcrumb ul li:last-child:has(> h1),
    html body .vp-breadcrumb ul li.vp-active:has(> h2),
    html body .vp-breadcrumb ul li:last-child:has(> h2),
    html body .vp-breadcrumb ul li.vp-active:has(> span),
    html body .vp-breadcrumb ul li:last-child:has(> span),
    html body .vp-breadcrumb ul li.vp-active:has(> strong),
    html body .vp-breadcrumb ul li:last-child:has(> strong) {
        padding-bottom: 0;
        border-bottom: 0;
    }

    html body .vp-breadcrumb ul li > a:hover {
        color: #3c4043;
        border-bottom-color: #b6bac1;
    }

    /* The trail's own "/" separators, replaced by the chevron. */
    html body .vp-breadcrumb ul li .mx-3 {
        display: none;
    }

    /* Chevron drawn from two borders, so there is no glyph for the bidi
       algorithm to mirror and the orientation is stated in physical terms only:
       `border-top` + `border-left` make a corner at the top-left, and rotating
       -45deg swings that corner onto the left edge - apex LEFT. */
    html body .vp-breadcrumb ul li:not(:last-child)::after {
        content: "";
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        margin: 0 9px;
        position: relative;
        top: -1px;
        border-top: 1.4px solid #b6bac1;
        border-left: 1.4px solid #b6bac1;
        transform: rotate(-45deg);
    }
}