/**
 * System Breadcrumbs — 32px strip, content-track aligned (1180px axis).
 *
 * Desktop/tablet: compact utility row between Header spacer and next block.
 * Mobile ≤699px (theme breakpoint): optional show (compact pad) or hide
 * via body.ital-bc-mobile-on / .ital-breadcrumbs--mobile-hide (schema stays in head).
 */

.ital-breadcrumbs {
	--ital-bc-bg: #ffffff;
	--ital-bc-link: #6b7280;
	--ital-bc-hover: #4b5563;
	--ital-bc-current: #4b5563;
	--ital-bc-sep: #9ca3af;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--ital-bc-bg, #ffffff);
	border: 0;
	box-shadow: none;
	position: relative;
	/*
	 * Must stay BELOW fixed Header (10060). When this was 10051 > Header 10050,
	 * the white 32px strip stole pointer events from Catalog dropdown and it
	 * collapsed while the cursor travelled from «Каталог» into the panel.
	 */
	z-index: 10040;
	overflow: hidden;
}

.ital-breadcrumbs__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	padding-inline: 0;
	/*
	 * Same useful-width axis as H1 / grids (vnext-content-axis).
	 * Desktop pad-x is intentionally 0 — use gutter, or crumbs hug the viewport edge
	 * while Hero/H1 stay inset (septiki / grease traps).
	 */
	width: min(
		var(--ital-content-max, 1180px),
		calc(100% - 2 * var(--ital-content-gutter, clamp(1rem, 3vw, 2.5rem)))
	);
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	margin: 0 auto !important;
}

@media (max-width: 899.98px) {
	.ital-breadcrumbs__inner {
		width: min(
			var(--ital-content-max, 1180px),
			calc(100% - 2 * var(--ital-content-pad-x, calc(4 * var(--q2-rem, 1rem))))
		);
	}
}

@media (max-width: 699px) {
	.ital-breadcrumbs__inner {
		width: min(
			var(--ital-content-max, 1180px),
			calc(100% - 2 * var(--ital-content-pad-x, 15px))
		);
	}
}

.ital-breadcrumbs__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-family: var(--ital-font-body, inherit);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: var(--ital-bc-current);
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ital-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	height: auto;
	line-height: 1;
}

.ital-breadcrumbs__link {
	color: var(--ital-bc-link);
	text-decoration: none;
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ital-breadcrumbs__link:hover,
.ital-breadcrumbs__link:focus-visible {
	color: var(--ital-bc-hover, var(--ital-bc-current));
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.ital-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--ital-bc-current);
	outline-offset: 2px;
}

.ital-breadcrumbs__current {
	color: var(--ital-bc-current);
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ital-breadcrumbs__separator {
	display: inline-block;
	flex-shrink: 0;
	margin: 0 0.4em;
	color: var(--ital-bc-sep);
	font-weight: 400;
	line-height: 1;
	user-select: none;
}

/*
 * Hero-adjacent context: inherit Hero surface (+ optional pattern).
 * Compose (Hero on): crumbs live INSIDE the Hero shell — transparent strip.
 * Solo (Hero off): strip owns colour + pattern once.
 */
.ital-breadcrumbs.ital-breadcrumbs--hero-context {
	background: var(--ital-bc-hero-surface, transparent);
	background-image: none;
	isolation: isolate;
}

.ital-breadcrumbs.ital-breadcrumbs--hero-shared,
.ital-breadcrumbs.ital-breadcrumbs--in-hero {
	background-color: transparent !important;
	background-image: none !important;
}

/*
 * Inside Hero: transparent full-bleed strip (seamless bg/pattern).
 * Content axis lives on __inner — never left-stick a constrained nav
 * (margin:0 !important previously killed margin-inline:auto → edge + clip).
 */
.ital-breadcrumbs.ital-breadcrumbs--in-hero {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding-inline: 0 !important;
	flex: 0 0 auto;
	box-sizing: border-box;
	/* May grow when path wraps; solo 32px strip unchanged. */
	height: auto !important;
	min-height: 32px !important;
	max-height: none !important;
	overflow: visible;
}

.ital-breadcrumbs.ital-breadcrumbs--in-hero .ital-breadcrumbs__list {
	flex-wrap: wrap;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	row-gap: 0.15rem;
}

.ital-breadcrumbs.ital-breadcrumbs--hero-solo.ital-breadcrumbs--hero-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--ital-bc-hero-pattern, none);
	background-repeat: repeat;
	background-position: 0 0;
	background-size: auto;
	opacity: var(--ital-bc-hero-pattern-opacity, 0.18);
}

/* Solo pattern strip: text above ::before pattern (never over letters). */
.ital-breadcrumbs.ital-breadcrumbs--hero-solo .ital-breadcrumbs__inner {
	position: relative;
	z-index: 1;
}

.ital-breadcrumbs--pattern-soft::before {
	background-size: 180px auto;
	filter: blur(0.2px);
}

.ital-breadcrumbs--pattern-medium::before {
	background-size: 140px auto;
}

.ital-breadcrumbs--pattern-crisp::before {
	background-size: 110px auto;
}

.ital-breadcrumbs.ital-breadcrumbs--hero-context .ital-breadcrumbs__inner {
	position: relative;
	z-index: 1;
}

/*
 * In-Hero content track = same useful width as H1 / grids.
 * Nav stays full-bleed; __inner is centered on the content axis.
 */
.ital-breadcrumbs.ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
	position: relative;
	z-index: 1;
	width: min(
		var(--ital-content-max, 1180px),
		calc(100% - 2 * var(--ital-content-gutter, clamp(1rem, 3vw, 2.5rem)))
	);
	max-width: none;
	margin: 0 auto !important;
	padding-inline: 0;
	box-sizing: border-box;
	height: auto !important;
	min-height: 32px !important;
	max-height: none !important;
}

@media (max-width: 899.98px) {
	.ital-breadcrumbs.ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
		width: min(
			var(--ital-content-max, 1180px),
			calc(100% - 2 * var(--ital-content-pad-x, calc(4 * var(--q2-rem, 1rem))))
		);
	}
}

@media (max-width: 699px) {
	.ital-breadcrumbs.ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
		width: min(
			var(--ital-content-max, 1180px),
			calc(100% - 2 * var(--ital-content-pad-x, 15px))
		);
	}
}

/*
 * Hero V1 compose — crumbs = top row inside shell (not mid-band).
 * Vertical flex-start / tall band live in hero-v1-geometry.css + shell-closure.
 */
.ital-hero.ital-hero--bc-compose {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
}

.ital-hero.ital-hero--bc-compose > .ital-breadcrumbs--in-hero {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding-top: 0;
	padding-bottom: 0.15rem;
	flex: 0 0 auto;
	align-self: stretch;
	/* In-Hero strip may grow when the path wraps. */
	height: auto !important;
	min-height: 32px !important;
	max-height: none !important;
	overflow: visible;
}

/*
 * Desktop ≥700 compose:
 * - keep 0.1.417 padding-bottom reclaim under the strip (H1 stays);
 * - nudge nav via relative top −1.5px (0.1.419; was −3px in 0.1.418).
 * Mobile ≤699 unchanged. Solo / Contacts unchanged.
 */
@media (min-width: 700px) {
	.ital-hero.ital-hero--bc-compose > .ital-breadcrumbs--in-hero {
		padding-bottom: calc(0.15rem + 3.5px);
		top: -2.5px;
	}
}

/*
 * Wide V1: same box as `.ital-hero__inner` (header-container, desktop pad-x:0).
 * hero.css @min-width 900px zeros .ital-hero__inner padding — crumbs must too,
 * or the path sits ~24px right of H1.
 */
.ital-hero.ital-hero--bc-compose:not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
	width: 100%;
	max-width: var(--ital-header-container, 1200px);
	margin: 0 auto !important;
	padding-inline: 0;
	box-sizing: border-box;
	height: auto !important;
	min-height: 32px !important;
	max-height: none !important;
}

@media (max-width: 899px) {
	.ital-hero.ital-hero--bc-compose:not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
		padding-inline: calc(4 * var(--q2-rem, 1rem));
	}
}

@media (max-width: 699px) {
	.ital-hero.ital-hero--bc-compose:not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
		padding-inline: 15px;
	}
}

/* Mirror hero.css wide-desktop __inner growth (has-media / media grid). */
@media (min-width: 1600px) {
	body.italplast-theme .ital-hero.ital-hero--has-media.ital-hero--bc-compose:not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner,
	body.italplast-theme .ital-hero.ital-hero--bc-compose:has(.ital-hero__grid--media):not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
		max-width: min(1360px, 94vw);
	}
}

@media (min-width: 1800px) {
	body.italplast-theme .ital-hero.ital-hero--has-media.ital-hero--bc-compose:not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner,
	body.italplast-theme .ital-hero.ital-hero--bc-compose:has(.ital-hero__grid--media):not(.ital-hero--shell-rounded) > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
		max-width: min(1480px, 92vw);
	}
}

/* Allow long in-Hero paths to wrap instead of clipping «Главная». */
.ital-hero.ital-hero--bc-compose > .ital-breadcrumbs--in-hero .ital-breadcrumbs__list {
	flex-wrap: wrap;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	row-gap: 0.15rem;
	max-width: 100%;
}

.ital-hero.ital-hero--bc-compose > .ital-hero__inner {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
}

/*
 * Rounded V1/V2: shell pad-inline owns the page axis.
 * Late rules (this file loads after hero-v2) — kill any leftover gutter width
 * on crumbs __inner so crumbs/H1/product grid share one left edge.
 */
body.italplast-theme .ital-hero.ital-hero--shell-rounded.ital-hero--bc-compose > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner,
body.italplast-theme .ital-hero-v2--shell-rounded.ital-hero-v2--bc-compose > .ital-breadcrumbs--in-hero .ital-breadcrumbs__inner {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}

body.italplast-theme .ital-hero-v2--shell-rounded > .ital-hero-v2__inner,
body.italplast-theme .ital-hero-v2--shell-rounded.ital-hero-v2--bc-compose > .ital-hero-v2__inner {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}

/*
 * Desktop/tablet: Header spacer under-clearance must match breadcrumbs
 * margin-top so the strip sits flush under the fixed bar (no empty band).
 *
 * History:
 * - spacer was `H - 16px` while margin-top grew to 24px → net ~8px gap
 * - the old Header divider-shadow (::after ~12px) masked that gap
 * - after 0.1.169 shadow removal the 8px band read as residual Header bottom
 *   (same color as Header → content looked optically high / off-center)
 *
 * 0.1.170: align spacer pull with margin-top (24px). Strip height / margin /
 * padding / mobile hide unchanged.
 */
@media (min-width: 700px) {
	/* Outside-Hero crumbs only — compose keeps full spacer (crumbs are in Hero). */
	body.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .sp-header-spacer {
		height: calc(var(--sp-header-h) - 24px);
	}

	body.admin-bar.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .sp-header-spacer {
		height: calc(var(--sp-header-h) + var(--sp-admin-bar-visible, 32px) - 24px);
	}

	body.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .ital-breadcrumbs:not(.ital-breadcrumbs--in-hero) {
		margin-top: 24px !important;
	}
}

@media screen and (min-width: 700px) and (max-width: 782px) {
	body.admin-bar.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .sp-header-spacer {
		height: calc(var(--sp-header-h) + var(--sp-admin-bar-visible, 46px) - 24px);
	}
}

/*
 * Outside crumbs (not compose): Hero starts below the strip.
 * Compose: crumbs are inside Hero — shell/full rules live in hero-v2.css / hero.css.
 */
body.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .main-content-container:not(.ital-hero--shell-rounded):not(.ital-hero-v2--shell-rounded),
body.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .ital-hero:not(.ital-hero--shell-rounded):not(.ital-hero--bc-compose) {
	margin-top: 0 !important;
}

body.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .ital-hero-v2--shell-full:not(.ital-hero-v2--bc-compose),
body.ital-has-breadcrumbs.italplast-theme:not(.ital-bc-hero-compose) .ital-landing-instance[data-ital-layout="hero"] .ital-hero-v2--shell-full:not(.ital-hero-v2--bc-compose) {
	margin-top: 0 !important;
	padding-top: clamp(1.35rem, 2.8vh, 2.25rem) !important;
}

/*
 * Mobile ≤699px — same breakpoint as section headings / theme mobile.
 * Default (and explicit show): compact strip, no empty reserved band when hide.
 */
@media (max-width: 699px) {
	/* Hide: zero geometry, no empty wrapper gap. */
	body.ital-bc-mobile-off .ital-breadcrumbs,
	.ital-breadcrumbs.ital-breadcrumbs--mobile-hide {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border: 0 !important;
		visibility: hidden !important;
	}

	/* When mobile crumbs are off, keep prior Hero pull under fixed header. */
	body.ital-has-breadcrumbs.ital-bc-mobile-off.italplast-theme .main-content-container:not(.ital-hero--shell-rounded):not(.ital-hero-v2--shell-rounded),
	body.ital-has-breadcrumbs.ital-bc-mobile-off.italplast-theme .ital-hero:not(.ital-hero--shell-rounded) {
		margin-top: calc(-1 * var(--sp-header-h)) !important;
	}

	body.ital-has-breadcrumbs.ital-bc-mobile-off.italplast-theme .ital-hero-v2--shell-full,
	body.ital-has-breadcrumbs.ital-bc-mobile-off.italplast-theme .ital-landing-instance[data-ital-layout="hero"] .ital-hero-v2--shell-full {
		margin-top: calc(-1 * var(--sp-header-h, 70px)) !important;
		padding-top: calc(
			var(--sp-header-h, 56px) + var(--ital-hero-v2-mobile-top-air, 31px)
		) !important;
	}

	/* Show: compact vertical padding (~7px), readable 12px type, wrap long paths. */
	body.ital-bc-mobile-on .ital-breadcrumbs.ital-breadcrumbs--mobile-show,
	body.ital-bc-mobile-on .ital-breadcrumbs:not(.ital-breadcrumbs--mobile-hide) {
		display: flex !important;
		align-items: center;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding-top: 7px !important;
		padding-bottom: 7px !important;
		padding-inline: 0 !important;
		overflow: visible !important;
		visibility: visible !important;
	}

	body.ital-bc-mobile-on .ital-breadcrumbs.ital-breadcrumbs--mobile-show .ital-breadcrumbs__inner,
	body.ital-bc-mobile-on .ital-breadcrumbs:not(.ital-breadcrumbs--mobile-hide) .ital-breadcrumbs__inner {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding-top: 0;
		padding-bottom: 0;
	}

	body.ital-bc-mobile-on .ital-breadcrumbs.ital-breadcrumbs--mobile-show .ital-breadcrumbs__list,
	body.ital-bc-mobile-on .ital-breadcrumbs:not(.ital-breadcrumbs--mobile-hide) .ital-breadcrumbs__list {
		flex-wrap: wrap;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		row-gap: 0.15rem;
		font-size: 12px;
		line-height: 1.25;
	}

	/* Compose: no leftover crumb band when mobile hide. */
	body.ital-bc-mobile-off .ital-hero.ital-hero--bc-compose > .ital-breadcrumbs--in-hero,
	body.ital-bc-mobile-off .ital-hero-v2--bc-compose > .ital-breadcrumbs--in-hero {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}