/* Breadcrumb — flat redesign row (Figma Transition-Pages 421:9216 / 428:13782).

   Restyles the shared breadcrumb partial into the redesign look on the redesign
   pages, WITHOUT touching the partial's markup: the swiper wrapper, the
   schema.org BreadcrumbList microdata and the aria-current="page" on the last crumb
   all stay, so structured data and the long-trail horizontal scroll are preserved
   and no other template's breadcrumb changes. The look is applied purely here:
   flat row, transparent, house + arrow SVGs (committed under overrides/assets/),
   dark-blue regular-weight ancestors, grey regular current crumb.

   Outer edges consume the content-column tokens (custom-clone.css :root): the same
   1600px frame as the nav, but the content 64px gutter (--jtl-content-gutter), so
   the breadcrumb lines up with the hero and body content — which sit further in
   than the nav pill's own 42px edge. Scoped to one translation-neutral structural
   hook shared across WPML twins: any page that renders the picture-header hero
   (pages 11/12/13). Keying on the rendered hero rather than the page template
   keeps the restyle on exactly the redesign hero pages — the shared
   product-landing template class sits on ~200 unrelated pages and must not be a
   scope arm here. */

/* ---- Outer edge: align to the redesign content column (64px, was 1570/60) ------
   Overrides the compiled theme rule (1570px/60px !important) on these hero pages. */
body:has(.jtl-picture-header) #nav-breadcrumb .container {
    max-width: var(--jtl-shell-max, 1600px) !important;
    padding-left: var(--jtl-content-gutter, 64px) !important;
    padding-right: var(--jtl-content-gutter, 64px) !important;
}

/* ---- Flat row: transparent, no pill, no swiper chrome ------------------------- */
body:has(.jtl-picture-header) #nav-breadcrumb,
body:has(.jtl-picture-header) #nav-breadcrumb .container,
body:has(.jtl-picture-header) #nav-breadcrumb .swiper,
body:has(.jtl-picture-header) #nav-breadcrumb .swiper-container,
body:has(.jtl-picture-header) #nav-breadcrumb .swiper-wrapper.breadcrumb,
body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body:has(.jtl-picture-header) #nav-breadcrumb .swiper-button-prev,
body:has(.jtl-picture-header) #nav-breadcrumb .swiper-button-next {
    display: none !important;
}

/* The row itself: single vertically-centred line, uniform 12.07px rhythm. */
body:has(.jtl-picture-header) #nav-breadcrumb .swiper-wrapper.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12.07px;
    min-height: 25px;
    /* Reset Bootstrap's .breadcrumb 0.75rem top padding so the row sits flush. */
    padding-top: 0;
    padding-bottom: 0.61px;
}

/* The <meta> microdata nodes are flex children — keep them out of the gap flow. */
body:has(.jtl-picture-header) #nav-breadcrumb .swiper-wrapper.breadcrumb > meta {
    display: none;
}

body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    width: auto !important;   /* neutralise the per-slide width swiper sets inline */
    margin: 0;
    padding: 0;               /* drop Bootstrap's 0.75rem divider padding-left */
    white-space: nowrap;
}

/* ---- Type + colour: ancestors dark-blue semibold, current crumb grey regular --- */
body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item,
body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item a,
body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item span:not(.fa-home) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
}

body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item a {
    color: #0b1b45;
    font-weight: 400;
    text-decoration: none;
}

body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item.active,
body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item.active span {
    color: #767676;
    font-weight: 400;
}

/* ---- Icons: the partial's own Font-Awesome house on the first crumb, arrow
   between crumbs. The house is the shipped fa-home glyph (f015); the flat-row type
   rule above forces Inter onto crumb spans, which would blank a glyph, so the icon
   is excluded there (span:not(.fa-home)) and keeps the Font-Awesome family + light
   weight, taking the crumb's dark-blue. The separator FA glyph is replaced by the
   committed arrow SVG below. */
body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item .fa-home {
    display: inline-block;
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 15px;
    line-height: 1;
    color: #0b1b45;
}

body:has(.jtl-picture-header) #nav-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    float: none;              /* drop Bootstrap's float:left on the divider */
    box-sizing: border-box;
    width: 9.669px;
    height: 8px;
    padding: 0;               /* drop Bootstrap's 0.75rem divider padding-right */
    margin-right: 12.07px;
    background-color: #767676;
    /* override the Font-Awesome separator glyph */
    font-family: inherit;
    -webkit-mask: url(assets/breadcrumb-arrow.svg) center / contain no-repeat;
    mask: url(assets/breadcrumb-arrow.svg) center / contain no-repeat;
}

/* ---- Narrow viewports: keep the row scrollable rather than overflowing -------- */
@media (max-width: 767.98px) {
    body:has(.jtl-picture-header) #nav-breadcrumb .swiper-container {
        overflow-x: auto;
    }
}