```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM BREADCRUMB SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/breadcrumbs.css
   Full Path:
   /public_html/assets/css/components/breadcrumbs.css

   Version: 1.0

   Purpose:
   - Global Breadcrumb Navigation
   - Inner Page Navigation
   - Product Category Breadcrumbs
   - Product Detail Breadcrumbs
   - Light / Dark Variants
   - Glass / Gold Variants
   - Responsive Breadcrumbs
   - SEO Friendly Semantic Navigation

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   ============================================================ */


/* ============================================================
   01. BREADCRUMB WRAPPER
   ============================================================ */

.breadcrumb-wrap {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
}


/* ============================================================
   02. BREADCRUMB NAV
   ============================================================ */

.breadcrumb-nav {
    position: relative;

    display: block;

    width: 100%;
}


/* ============================================================
   03. BREADCRUMB LIST
   ============================================================ */

.breadcrumb {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* ============================================================
   04. BREADCRUMB ITEM
   ============================================================ */

.breadcrumb-item {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-width: 0;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.58rem;

    font-weight: var(--font-semibold);

    line-height: 1.5;

    letter-spacing: 0.025em;
}


/* ============================================================
   05. BREADCRUMB LINK
   ============================================================ */

.breadcrumb-item a {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--text-muted);

    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);
}


/* ============================================================
   06. BREADCRUMB LINK HOVER
   ============================================================ */

.breadcrumb-item a:hover {
    color: var(--color-secondary-dark);
}


/* ============================================================
   07. BREADCRUMB HOME ICON
   ============================================================ */

.breadcrumb-home-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    color: var(--color-secondary-dark);

    font-size: 0.58rem;

    line-height: 1;
}


/* ============================================================
   08. BREADCRUMB SEPARATOR
   ============================================================ */

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin:
        0
        11px;

    color:
        rgba(183, 138, 61, 0.62);

    font-family: var(--font-ui);

    font-size: 0.55rem;

    font-weight: var(--font-medium);

    line-height: 1;
}


/* ============================================================
   09. CURRENT ITEM
   ============================================================ */

.breadcrumb-item.active {
    color: var(--color-primary-deep);

    font-weight: var(--font-bold);
}


/* ============================================================
   10. CURRENT ITEM LIMIT
   ============================================================ */

.breadcrumb-item.active
.breadcrumb-current {
    display: inline-block;

    max-width: 320px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   11. ARROW SEPARATOR
   ============================================================ */

.breadcrumb-arrow
.breadcrumb-item +
.breadcrumb-item::before {
    content: "›";

    font-size: 0.82rem;

    font-weight: var(--font-medium);
}


/* ============================================================
   12. CHEVRON SEPARATOR
   ============================================================ */

.breadcrumb-chevron
.breadcrumb-item +
.breadcrumb-item::before {
    content: "›";

    width: 18px;
    height: 18px;

    margin:
        0
        8px;

    border:
        1px solid rgba(183, 138, 61, 0.18);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        rgba(183, 138, 61, 0.055);

    font-size: 0.7rem;
}


/* ============================================================
   13. DOT SEPARATOR
   ============================================================ */

.breadcrumb-dot
.breadcrumb-item +
.breadcrumb-item::before {
    content: "";

    width: 4px;
    height: 4px;

    margin:
        0
        12px;

    border-radius:
        var(--radius-circle);

    background: var(--color-secondary);
}


/* ============================================================
   14. GOLD BREADCRUMB
   ============================================================ */

.breadcrumb-gold
.breadcrumb-item {
    color:
        rgba(183, 138, 61, 0.78);
}

.breadcrumb-gold
.breadcrumb-item a {
    color:
        rgba(183, 138, 61, 0.78);
}

.breadcrumb-gold
.breadcrumb-item a:hover {
    color: var(--color-secondary-dark);
}

.breadcrumb-gold
.breadcrumb-item.active {
    color: var(--color-primary-deep);
}


/* ============================================================
   15. DARK BREADCRUMB
   ============================================================ */

.breadcrumb-dark
.breadcrumb-item {
    color:
        rgba(255, 255, 255, 0.48);
}

.breadcrumb-dark
.breadcrumb-item a {
    color:
        rgba(255, 255, 255, 0.58);
}

.breadcrumb-dark
.breadcrumb-item a:hover {
    color: var(--color-secondary-light);
}

.breadcrumb-dark
.breadcrumb-item.active {
    color: #ffffff;
}

.breadcrumb-dark
.breadcrumb-home-icon {
    color: var(--color-secondary-light);
}

.breadcrumb-dark
.breadcrumb-item +
.breadcrumb-item::before {
    color:
        rgba(212, 175, 104, 0.55);
}


/* ============================================================
   16. WHITE BREADCRUMB
   ============================================================ */

.breadcrumb-white
.breadcrumb-item,
.breadcrumb-white
.breadcrumb-item a {
    color:
        rgba(255, 255, 255, 0.66);
}

.breadcrumb-white
.breadcrumb-item a:hover {
    color: #ffffff;
}

.breadcrumb-white
.breadcrumb-item.active {
    color: #ffffff;
}

.breadcrumb-white
.breadcrumb-item +
.breadcrumb-item::before {
    color:
        rgba(255, 255, 255, 0.35);
}


/* ============================================================
   17. BREADCRUMB BOX
   ============================================================ */

.breadcrumb-box {
    display: inline-flex;

    align-items: center;

    max-width: 100%;

    padding:
        10px
        15px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    background:
        rgba(255, 255, 255, 0.78);

    box-shadow:
        0 8px 26px rgba(11, 43, 32, 0.045);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   18. GOLD BREADCRUMB BOX
   ============================================================ */

.breadcrumb-box-gold {
    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);

    box-shadow:
        0 10px 28px rgba(183, 138, 61, 0.08);
}


/* ============================================================
   19. GLASS BREADCRUMB BOX
   ============================================================ */

.breadcrumb-box-glass {
    border-color:
        rgba(255, 255, 255, 0.16);

    background:
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}


/* ============================================================
   20. DARK BREADCRUMB BOX
   ============================================================ */

.breadcrumb-box-dark {
    border-color:
        rgba(212, 175, 104, 0.12);

    background:
        rgba(4, 19, 14, 0.72);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.14);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}


/* ============================================================
   21. SMALL BREADCRUMB
   ============================================================ */

.breadcrumb-sm
.breadcrumb-item {
    font-size: 0.52rem;
}

.breadcrumb-sm
.breadcrumb-item +
.breadcrumb-item::before {
    margin:
        0
        8px;

    font-size: 0.5rem;
}


/* ============================================================
   22. LARGE BREADCRUMB
   ============================================================ */

.breadcrumb-lg
.breadcrumb-item {
    font-size: 0.64rem;
}

.breadcrumb-lg
.breadcrumb-item +
.breadcrumb-item::before {
    margin:
        0
        13px;
}


/* ============================================================
   23. UPPERCASE BREADCRUMB
   ============================================================ */

.breadcrumb-uppercase
.breadcrumb-item {
    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ============================================================
   24. BREADCRUMB HOME BUTTON
   ============================================================ */

.breadcrumb-home-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.breadcrumb-home-button:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.38);

    background:
        var(--gradient-gold);

    transform:
        translateY(-2px);
}


/* ============================================================
   25. BREADCRUMB WITH BACK BUTTON
   ============================================================ */

.breadcrumb-with-back {
    display: flex;

    align-items: center;

    gap: var(--space-4);
}


/* ============================================================
   26. BREADCRUMB BACK BUTTON
   ============================================================ */

.breadcrumb-back {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-circle);

    color: var(--color-primary);

    background:
        rgba(255, 255, 255, 0.80);

    cursor: pointer;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.breadcrumb-back:hover {
    color: var(--color-primary-deep);

    border-color: var(--border-gold);

    background: var(--bg-gold-soft);

    transform:
        translateX(-2px);
}


/* ============================================================
   27. PAGE BREADCRUMB
   ============================================================ */

.page-breadcrumb {
    position: relative;

    z-index: 4;

    margin-bottom:
        var(--space-5);
}


/* ============================================================
   28. PAGE BREADCRUMB CENTER
   ============================================================ */

.page-breadcrumb-center
.breadcrumb {
    justify-content: center;
}


/* ============================================================
   29. PAGE BREADCRUMB RIGHT
   ============================================================ */

.page-breadcrumb-end
.breadcrumb {
    justify-content: flex-end;
}


/* ============================================================
   30. PRODUCT BREADCRUMB
   ============================================================ */

.product-breadcrumb {
    padding:
        var(--space-4)
        0;

    border-bottom:
        1px solid var(--border-light);
}


/* ============================================================
   31. PRODUCT BREADCRUMB CURRENT
   ============================================================ */

.product-breadcrumb
.breadcrumb-item.active {
    color: var(--color-secondary-dark);
}


/* ============================================================
   32. PRODUCT CATEGORY ICON
   ============================================================ */

.breadcrumb-category-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 22px;
    height: 22px;

    margin-right: 3px;

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.45rem;
}


/* ============================================================
   33. BREADCRUMB LABEL
   ============================================================ */

.breadcrumb-label {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-right:
        var(--space-4);

    color: var(--color-secondary-dark);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-bold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   34. BREADCRUMB LABEL LINE
   ============================================================ */

.breadcrumb-label::after {
    content: "";

    width: 24px;
    height: 1px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   35. BREADCRUMB DIVIDER
   ============================================================ */

.breadcrumb-divider {
    width: 100%;
    height: 1px;

    margin-top:
        var(--space-4);

    background:
        linear-gradient(
            90deg,
            rgba(183, 138, 61, 0.38),
            rgba(183, 138, 61, 0)
        );
}


/* ============================================================
   36. BREADCRUMB HOVER UNDERLINE
   ============================================================ */

.breadcrumb-underline
.breadcrumb-item a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -3px;
    left: 0;

    height: 1px;

    background: currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform var(--transition-premium);
}

.breadcrumb-underline
.breadcrumb-item a:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* ============================================================
   37. BREADCRUMB ICON SEPARATOR
   ============================================================ */

.breadcrumb-icon-separator
.breadcrumb-item +
.breadcrumb-item::before {
    content: "→";

    color:
        rgba(183, 138, 61, 0.65);

    font-size: 0.58rem;
}


/* ============================================================
   38. BREADCRUMB NUMBER
   ============================================================ */

.breadcrumb-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 21px;
    height: 21px;

    padding:
        0
        5px;

    margin-right:
        5px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.46rem;

    font-weight: var(--font-bold);
}


/* ============================================================
   39. SCROLLABLE BREADCRUMB
   ============================================================ */

.breadcrumb-scroll {
    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;

    -ms-overflow-style: none;
}

.breadcrumb-scroll::-webkit-scrollbar {
    display: none;
}

.breadcrumb-scroll
.breadcrumb {
    flex-wrap: nowrap;

    width: max-content;

    min-width: 100%;
}


/* ============================================================
   40. SCROLLABLE ITEMS
   ============================================================ */

.breadcrumb-scroll
.breadcrumb-item {
    flex: 0 0 auto;
}


/* ============================================================
   41. BREADCRUMB FOCUS
   ============================================================ */

.breadcrumb-item a:focus-visible,
.breadcrumb-home-button:focus-visible,
.breadcrumb-back:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   42. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .breadcrumb-item.active
    .breadcrumb-current {
        max-width: 260px;
    }

}


/* ============================================================
   43. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .breadcrumb-item {
        font-size: 0.54rem;
    }

    .breadcrumb-item +
    .breadcrumb-item::before {
        margin:
            0
            8px;
    }

    .breadcrumb-item.active
    .breadcrumb-current {
        max-width: 200px;
    }

    .breadcrumb-box {
        padding:
            9px
            13px;
    }

    .page-breadcrumb {
        margin-bottom:
            var(--space-4);
    }

    .breadcrumb-lg
    .breadcrumb-item {
        font-size: 0.58rem;
    }

}


/* ============================================================
   44. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .breadcrumb {
        flex-wrap: nowrap;

        width: max-content;

        min-width: 100%;
    }

    .breadcrumb-nav {
        overflow-x: auto;

        overflow-y: hidden;

        scrollbar-width: none;

        -ms-overflow-style: none;
    }

    .breadcrumb-nav::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-item {
        flex: 0 0 auto;
    }

    .breadcrumb-item.active
    .breadcrumb-current {
        max-width: 180px;
    }

    .breadcrumb-with-back {
        gap: var(--space-3);
    }

    .breadcrumb-label {
        display: none;
    }

}


/* ============================================================
   45. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .breadcrumb-item.active
    .breadcrumb-current {
        max-width: 145px;
    }

    .breadcrumb-item +
    .breadcrumb-item::before {
        margin:
            0
            7px;
    }

}


/* ============================================================
   46. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .breadcrumb-home-button:hover {
        transform: none;
    }

    .breadcrumb-back:hover {
        transform: none;
    }

}


/* ============================================================
   47. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .breadcrumb-item a,
    .breadcrumb-home-button,
    .breadcrumb-back,
    .breadcrumb-underline
    .breadcrumb-item a::after {
        transition: none;
    }

    .breadcrumb-home-button:hover,
    .breadcrumb-back:hover {
        transform: none;
    }

}


/* ============================================================
   END OF GLOBAL BREADCRUMB SYSTEM
   ============================================================ */
```