/* ==========================================================================
   Product-details breadcrumb fix
   --------------------------------------------------------------------------
   Goal: render the breadcrumb as  Home > Shop > Category > Product
   with clear ">" separators on the white product page.

   Why this file exists:
   The theme's main.css sets the breadcrumb separator to a WHITE
   Font Awesome glyph (meant for the dark hero banner). On the white
   product page that glyph is invisible, so "Home" and "Shop" collapse
   together ("HomeShop"). The rules below override that with a plain
   ">" separator in a readable grey. Higher specificity + !important +
   loaded last = guaranteed to win over Bootstrap and main.css.
   ========================================================================== */

.phase3-product-breadcrumb .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

/* Item + link text colours (readable on white) */
.phase3-product-breadcrumb .breadcrumb .breadcrumb-item,
.phase3-product-breadcrumb .breadcrumb .breadcrumb-item a {
    color: #6b7280 !important;      /* muted grey */
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.phase3-product-breadcrumb .breadcrumb .breadcrumb-item a:hover {
    color: #1f2937 !important;      /* darker on hover */
    text-decoration: underline !important;
}

/* Current page (product name) — a touch darker, no link */
.phase3-product-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

/* Space before every item after the first */
.phase3-product-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item {
    -webkit-padding-start: 8px !important;
    padding-inline-start: 8px !important;
}

/* The ">" separator — overrides Bootstrap "/" and the theme's white FA glyph */
.phase3-product-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    font-family: inherit !important;           /* NOT Font Awesome */
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #9ca3af !important;                  /* light grey chevron */
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    -webkit-padding-end: 8px !important;
    padding-inline-end: 8px !important;
    padding-inline-start: 0 !important;
    -webkit-padding-start: 0 !important;
}

/* Small screens: keep it on one scrollable line, still readable */
@media (max-width: 575.98px) {
    .phase3-product-breadcrumb .breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }
    .phase3-product-breadcrumb .breadcrumb::-webkit-scrollbar {
        display: none !important;
    }
    .phase3-product-breadcrumb .breadcrumb .breadcrumb-item,
    .phase3-product-breadcrumb .breadcrumb .breadcrumb-item a {
        font-size: 12px !important;
    }
}