/* Shared shell bar: viewport border, existing page gutters, measured sticky stack. */
html[data-tcgn-v1] {--tcgn-breadcrumb-bar-height:39px}
html[data-tcgn-v1] #main:has(> .breadcrumb-bar) {padding-top:0}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar,
html[data-tcgn-v1] #main.tcgn-page-shell > .breadcrumb-bar {
 position:sticky;top:var(--product-header-height);z-index:30;
 width:auto;max-width:none;box-sizing:border-box;
 margin:0 calc(-1 * var(--gutter)) var(--tcgn-page-stack-gap);
 padding:4px var(--gutter);
 height:var(--tcgn-breadcrumb-bar-height);min-height:0;
 background:var(--page);border:0;border-bottom:1px solid var(--border);box-shadow:none;
}
/* #main deliberately caps content at 1800px. Extend only the bar's paint,
   without widening the page, moving its gutters or creating horizontal scroll. */
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar::before,
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar::after {
 content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:-1;
 box-shadow:0 0 0 100vmax var(--page);clip-path:inset(0 -100vmax);
}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar::before {top:0;bottom:0;background:var(--page)}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar::after {bottom:-1px;height:1px;background:var(--border);box-shadow:0 0 0 100vmax var(--border)}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar .breadcrumbs,
html[data-tcgn-v1] #main.tcgn-page-shell > .breadcrumb-bar .breadcrumbs {margin:0;padding:0;min-height:30px;height:30px;line-height:30px;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;overflow:hidden;white-space:nowrap}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar .breadcrumbs > * {flex-shrink:0}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar .breadcrumbs > :last-child {min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar a:hover {text-decoration:none}
html[data-tcgn-v1] #main.tcgn-page-shell :is(.catalogue-controls,.activity-filters) {top:calc(var(--product-header-height) + var(--breadcrumb-height,var(--tcgn-breadcrumb-bar-height)))}
@media(min-width:901px){html[data-tcgn-v1] .tcgn-card-detail .detail-image {top:calc(var(--product-header-height) + var(--breadcrumb-height,var(--tcgn-breadcrumb-bar-height)) + var(--tcgn-page-breadcrumb-inset))}}
@media(max-width:700px){html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar .breadcrumbs > :is(:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)):not(:last-child) {display:none}}

/* Hide the whole mobile bar and release its measured sticky offset. */
@media (max-width:768px) {
 html[data-tcgn-v1] {--tcgn-breadcrumb-bar-height:0px;--breadcrumb-height:0px!important}
 html[data-tcgn-v1] :is(#main, #main > main[data-stock-article], #main > main[data-stock-network-page]) > .breadcrumb-bar,
 html[data-tcgn-v1] #main.tcgn-page-shell > .breadcrumb-bar {display:none}
}