/* ─────────────────────────────────────────
   Potel Breadcrumb — breadcrumb.css
───────────────────────────────────────── */

.potel-breadcrumb {
    display: block;
    width: 100%;
    background: var(--potel-bc-bg, transparent);
    padding:
        var(--potel-bc-padding-top, 0px)
        var(--potel-bc-padding-right, 0px)
        var(--potel-bc-padding-bottom, 0px)
        var(--potel-bc-padding-left, 0px);
    margin:
        var(--potel-bc-margin-top, 0px)
        var(--potel-bc-margin-right, 0px)
        var(--potel-bc-margin-bottom, 0px)
        var(--potel-bc-margin-left, 0px);
    border-style: var(--potel-bc-border-style, none);
    border-color: var(--potel-bc-border-color, #dddddd);
    border-width:
        var(--potel-bc-border-top, 0px)
        var(--potel-bc-border-right, 0px)
        var(--potel-bc-border-bottom, 0px)
        var(--potel-bc-border-left, 0px);
    border-radius:
        var(--potel-bc-border-radius-tl, 0px)
        var(--potel-bc-border-radius-tr, 0px)
        var(--potel-bc-border-radius-br, 0px)
        var(--potel-bc-border-radius-bl, 0px);
    box-sizing: border-box;
}

.potel-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.potel-bc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: var(--potel-bc-line-height, 1.4);
}

.potel-bc-link {
    color: var(--potel-bc-color-link, #555555);
    font-size: var(--potel-bc-font-size, 13px);
    font-family: var(--potel-bc-font-family, inherit);
    font-style: var(--potel-bc-font-style, normal);
    font-weight: var(--potel-bc-font-weight-link, 400);
    letter-spacing: var(--potel-bc-letter-spacing, 0em);
    text-transform: var(--potel-bc-text-transform, none);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.potel-bc-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.potel-bc-sep {
    color: var(--potel-bc-color-separator, #aaaaaa);
    font-size: var(--potel-bc-font-size, 13px);
    font-family: var(--potel-bc-font-family, inherit);
    font-weight: 400;
    user-select: none;
    pointer-events: none;
}

.potel-bc-sep::before {
    content: var(--potel-bc-separator-char, '/');
}

.potel-bc-current {
    color: var(--potel-bc-color-current, #111111);
    font-size: var(--potel-bc-font-size, 13px);
    font-family: var(--potel-bc-font-family, inherit);
    font-style: var(--potel-bc-font-style, normal);
    font-weight: var(--potel-bc-font-weight-current, 600);
    letter-spacing: var(--potel-bc-letter-spacing, 0em);
    text-transform: var(--potel-bc-text-transform, none);
}

@media (max-width: 480px) {
    .potel-breadcrumb ol { gap: 4px; }
}