/* Canonical breadcrumb component. */
/* Standalone variant (archive, single, page): looks exactly like the embedded one used
   inside .pc-shell on the other pages — no band, same width, same spacing. */
.ts-breadcrumb-region {
    width: 100%;
    padding: 18px 0 0;
}

.ts-breadcrumb-region > .ts-site-breadcrumb.pc-shell {
    width: min(100% - 48px, 1440px);
    margin: 0 auto 20px;
}

@media (max-width: 1199px) {
    .ts-breadcrumb-region > .ts-site-breadcrumb.pc-shell { width: min(100% - 32px, 1024px); }
}

@media (max-width: 640px) {
    .ts-breadcrumb-region > .ts-site-breadcrumb.pc-shell { width: min(100% - 24px, 520px); }
}

.ts-site-breadcrumb {
    --ts-breadcrumb-accent: var(--pc-blue, #0969da);
    --ts-breadcrumb-text: #64748b;
    --ts-breadcrumb-current: #172033;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    margin: 0;
    padding: 8px 14px;
    overflow: hidden;
    border: 1px solid #e3e9f3;
    border-radius: 9px;
    background: #fff;
    color: var(--ts-breadcrumb-text);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    font-family: var(--ts-font-main, "Be Vietnam Pro", Arial, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.ts-site-breadcrumb--embedded { margin-bottom: 20px; }

/* Separate the video archive breadcrumb from the full-width hero banner. */
.ts-video-archive .ts-site-breadcrumb--embedded {
    margin-top: 20px;
}

.ts-site-breadcrumb__list {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.ts-site-breadcrumb__list > li {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    margin: 0;
    padding: 0;
    color: inherit;
}

.ts-site-breadcrumb__list > li::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin: 0 11px;
    border-top: 1.5px solid #94a3b8;
    border-right: 1.5px solid #94a3b8;
    content: '';
    transform: rotate(45deg);
}

.ts-site-breadcrumb__list > li:last-child::after { display: none; }

/* Long trails (e.g. product > parent cat > cat > product): middle crumbs shrink with an
   ellipsis instead of overlapping, and the current page always keeps some room. */
.ts-site-breadcrumb__list > li:first-child { flex-shrink: 0; }
.ts-site-breadcrumb__list > li:not(:first-child):not(:last-child) { flex: 0 1 auto; }
.ts-site-breadcrumb__list > li:not(:first-child):not(:last-child) > a {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ts-site-breadcrumb__list > li:last-child:not(:first-child) { min-width: 30%; flex: 0 1 auto; }

.ts-site-breadcrumb a,
.ts-site-breadcrumb span,
.ts-site-breadcrumb h1 {
    display: inline-block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ts-breadcrumb-text);
    font: inherit;
    line-height: inherit;
    text-decoration: none;
}

.ts-site-breadcrumb a {
    flex: 0 0 auto;
    transition: color .18s ease;
}

.ts-site-breadcrumb__list > li:first-child > a::before {
    margin-right: 7px;
    color: var(--ts-breadcrumb-accent);
    content: "\f015";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 11px;
    font-weight: 900;
}

.ts-site-breadcrumb a:hover,
.ts-site-breadcrumb a:focus-visible {
    color: var(--ts-breadcrumb-accent);
    text-decoration: none;
}

.ts-site-breadcrumb [aria-current="page"] {
    overflow: hidden;
    color: var(--ts-breadcrumb-current);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Single video titles can be long: reserve their own flexible space and clamp to two lines. */
.single-videos .ts-site-breadcrumb {
    height: auto;
}

.single-videos .ts-site-breadcrumb__list > li:not(:last-child) {
    flex: 0 0 auto;
}

.single-videos .ts-site-breadcrumb__list > li:last-child {
    min-width: 0;
    flex: 1 1 0;
}

.single-videos .ts-site-breadcrumb [aria-current="page"] {
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    max-height: 2.8em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .ts-breadcrumb-region { padding-top: 12px; }
    .ts-breadcrumb-region > .ts-site-breadcrumb.pc-shell { margin-bottom: 14px; }

    .ts-site-breadcrumb {
        min-height: 40px;
        padding: 7px 11px;
        font-size: 12px;
    }

    .ts-site-breadcrumb--embedded { margin-bottom: 14px; }

    .ts-video-archive .ts-site-breadcrumb--embedded {
        margin-top: 12px;
    }

    .ts-site-breadcrumb__list > li::after { margin-right: 8px; margin-left: 8px; }

    /* Mobile: keep Home > direct parent > current; the full trail stays in the schema. */
    body:not(.single-videos) .ts-site-breadcrumb__list > li:not(:first-child):nth-last-child(n+3) { display: none; }
    .ts-site-breadcrumb__list > li:last-child { min-width: 0; }

    .single-videos .ts-site-breadcrumb {
        min-height: 54px;
        align-items: flex-start;
    }

    .single-videos .ts-site-breadcrumb__list {
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .single-videos .ts-site-breadcrumb__list > li,
    .single-videos .ts-site-breadcrumb__list > li::after {
        margin-top: 1px;
    }

    .single-videos .ts-site-breadcrumb__list > li:nth-last-child(2)::after {
        display: none;
    }

    .single-videos .ts-site-breadcrumb__list > li:last-child {
        width: 100%;
        flex: 1 0 100%;
        margin-top: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-site-breadcrumb a { transition: none; }
}