/* =============================================================================
   Breadcrumb — the shared _Breadcrumb partial

   ONE definition for every page that renders the partial: product details,
   Contact Us, FAQ, Terms, Privacy, Checkout and the sell-used-device flow.
   Loaded from _header.cshtml, so it is present wherever the trail can appear.

   -----------------------------------------------------------------------------
   What this replaces: the trail used to render at 14px in mid-grey with the
   ANCESTORS darker than the current page, separated by a 16px double chevron in
   brand blue. The separator was the loudest thing in the row and the emphasis
   ran backwards — the trail read as the headline and the page's own title under
   it as an afterthought.

   It is treated here as what it is: quiet context above the page. Ancestors are
   muted and only darken on hover, the current item is the one dark item, and the
   separator shrinks to a single hairline chevron.

   Colours are literals rather than the --sd-* tokens the details page uses:
   those are declared inside .sd-v2 / #buy_device and would not resolve on
   Contact Us or Terms. The values are the same greys either way.
   ============================================================================= */

.page_title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 2px, with the rest of the rhythm coming from the items' own padding — that keeps the hover
       target generous without the gaps looking blown out. */
    gap: 2px;
    margin: 0 0 28px;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #86868b;
}

/* !important is unavoidable on the colour: deviceassessment.css sets
   `.shop-template .page_title a { color:#191919 !important }` and mobile.css does the same for
   `#sell_old_device .page_title a`. Specificity alone cannot beat an !important declaration. */
.page_title a {
    padding: 4px 6px;
    border-radius: 6px;
    color: #6e6e73 !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}

.page_title a:hover {
    color: #1d1d1f !important;
    background: #f5f5f7;
}

/* :focus-visible so the ring never shows on a mouse click, only for keyboard users. */
.page_title a:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 1px;
}

/* The page you are on: the only dark item in the row, and never a link.
   Rendered by _Breadcrumb.cshtml as <span class="page_title__current" aria-current="page">. */
.page_title .page_title__current {
    padding: 4px 6px;
    color: #1d1d1f;
    font-weight: 500;
    /* A long product name would otherwise wrap the trail onto three lines on a phone. */
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The partial draws a 16px DOUBLE chevron with stroke="#1971e4" baked into the markup as a
   presentation attribute. Presentation attributes lose to any CSS rule, so both the size and the
   colour can be taken back here without touching the shared file — and hiding the second path
   turns it into a single, quiet chevron. */
.page_title svg {
    flex: none;
    inline-size: 13px;
    block-size: 13px;
}

.page_title svg path {
    stroke: #86868b;
    stroke-width: 2;
}

.page_title svg path + path {
    display: none;
}

/* A chevron has to point the way the text runs, and this one is drawn pointing end-ward in LTR. */
[dir="rtl"] .page_title svg {
    transform: scaleX(-1);
}

@media (max-width: 767.98px) {
    .page_title {
        margin-block-end: 18px;
        /* One line, scrolled, beats a three-line trail eating the top of a phone screen. */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .page_title::-webkit-scrollbar {
        display: none;
    }
}