.c-breadcrumb { width: min(760px, 100%); margin-bottom: 24px; border: 1px solid rgb(255 255 255 / 78%); border-radius: 14px; background: rgb(246 241 230 / 87%); backdrop-filter: blur(16px); box-shadow: 0 2px 8px rgb(89 79 63 / 4%); }
.c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 8px 12px; list-style: none; }
.c-breadcrumb li { display: flex; align-items: center; min-width: 0; max-width: 100%; font-size: 16px; line-height: 1.4; }
.c-breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--muted); }
.c-breadcrumb a, .c-breadcrumb span { display: flex; align-items: center; min-height: 44px; min-width: 0; padding: 8px 4px; overflow-wrap: anywhere; }
.c-breadcrumb a { font-weight: 600; text-decoration: none; }
.c-breadcrumb span { color: var(--ink); }
@media (max-width: 600px) { .c-breadcrumb { margin-bottom: 16px; } .c-breadcrumb ol { padding: 4px 12px; } }