/* ============================================================================
   COMPONENT: breadcrumb — page breadcrumb trail (STRUCTURE, brand-agnostic)
   ----------------------------------------------------------------------------
   Migrated: 2026-07-05 (A8 in DOC_CSS_COMPONENT_MIGRATION_LIST.md)
   Source templates: ~118 templates render the trail as
       <ul class="breadcrumb-navigation-list"> … <li class="breadcrumb-current-page-item">
     (classes renamed from legacy `nav-list` / `main-heading` during extraction;
      content rules in -Documentation Project/DOC_BREADCRUMB.md)
   Extracted from:
     - global-style-V2.1.css   (was lines 612-652: base ul/li/a/hover/current rules)
     - global-responsive-V2.1.css (was lines 2863-2874: 270-479px mobile rules)
   Brand overrides live in breadcrumb--<dns_domain_base>.css (tokens on the
   component root, never :root). Page-scoped breadcrumb tweaks (e.g.
   .search_sec.<page> …, .artwork-not-found-page …, immersive utl-/gn-/moom-
   scopes, hero-banner scopes) intentionally remain with their page families.
   NO !important in this file — it loads after the legacy stack and wins by
   source order; page-scoped rules keep winning by specificity.
   ============================================================================ */

ul.breadcrumb-navigation-list {
    display: flex;
    gap: var(--breadcrumb-item-gap, 15px);
    position: relative;
    z-index: 9;
    align-items: center;
    padding: 0px;
    margin: 16px 0px 0px;
}

ul.breadcrumb-navigation-list li {
    font-family: var(--breadcrumb-font-family, var(--font-body));
    font-weight: 400;
    font-size: var(--breadcrumb-font-size, 14px);
    line-height: 20px;
    letter-spacing: 0%;
    color: var(--breadcrumb-ink, #3E342A);
}

ul.breadcrumb-navigation-list a {
    font-family: var(--breadcrumb-font-family, var(--font-body));
    font-weight: 400;
    font-size: var(--breadcrumb-font-size, 14px);
    line-height: 20px;
    letter-spacing: 0%;
    color: var(--breadcrumb-link-ink, var(--breadcrumb-ink, #3E342A));
    text-decoration: none;
    opacity: 1;
    transition: color 0.25s ease, opacity 0.25s ease;
}

ul.breadcrumb-navigation-list a:hover {
    opacity: 0.65;
}

/* Final crumb = current page (never a link) */
.breadcrumb-current-page-item {
    opacity: 0.6;
}

@media screen and (min-width: 270px) and (max-width: 479px) {
    ul.breadcrumb-navigation-list li {
        font-size: var(--breadcrumb-font-size-mobile, 11px);
    }

    ul.breadcrumb-navigation-list a {
        font-size: var(--breadcrumb-font-size-mobile, 11px);
    }

    ul.breadcrumb-navigation-list {
        gap: var(--breadcrumb-item-gap-mobile, 6px);
        flex-wrap: wrap;
    }
}