/* ── Breadcrumb ──────────────────────────────────────────────
   Figma (room page): 1366:64946.
   ─────────────────────────────────────────────────────────── */

.breadcrumb {
    padding: 24px var(--pad-x);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    max-width: var(--site-max-w);
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 4.48px;
    text-transform: uppercase;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The slash between, in light Fraunces */
.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0;
    color: rgba(20, 13, 12, 0.3);
}

.breadcrumb__link {
    color: var(--color-walnut);
}

a.breadcrumb__link:hover {
    color: var(--color-copper-text);
}

a.breadcrumb__link:focus-visible {
    outline: 2px solid var(--color-beamwood);
    outline-offset: 2px;
}

.breadcrumb__current {
    font-weight: 500;
    color: var(--color-beamwood);
}

/* On a dark picture (the collection hero): no padding of its own */
.breadcrumb.breadcrumb--inverse {
    padding: 0;
}

.breadcrumb--inverse .breadcrumb__list {
    max-width: none;
}

.breadcrumb--inverse .breadcrumb__item + .breadcrumb__item::before {
    color: rgba(250, 250, 250, 0.5);
}

.breadcrumb--inverse .breadcrumb__link {
    color: var(--color-candle-wax);
}

.breadcrumb--inverse a.breadcrumb__link:hover {
    color: var(--color-ochre);
}

.breadcrumb--inverse .breadcrumb__current {
    font-weight: 400;
    color: var(--color-canvas);
}

@media (max-width: 767px) {
    .breadcrumb {
        padding: 20px var(--pad-x) 16px;
    }

    .breadcrumb__list {
        font-size: 12px;
        letter-spacing: 3.84px;
    }
}