@layer components {
	.klt-site-header--kiro {
		--klt-kiro-edge: clamp(0.5rem, 1.5vw, 1.25rem);
		--klt-kiro-top-gap: clamp(0.5rem, 1.2vw, 0.75rem);
		--klt-kiro-content-width: 82rem;
		--klt-sticky-inline-size: 100%;
		--klt-sticky-top: var(--klt-admin-bar-offset, 0px);

		inline-size: var(--klt-sticky-inline-size);
		margin-block-start: 0;
		margin-inline: auto;
	}

	.klt-site-header--kiro.klt-site-header--sticky.is-sticky-ready:not(.is-at-top) {
		--klt-sticky-top: calc(var(--klt-admin-bar-offset, 0px) + var(--klt-kiro-top-gap));
	}

	.klt-site-header--kiro.klt-site-header--sticky:not(.is-sticky-ready),
	.klt-site-header--kiro.klt-site-header--sticky.is-at-top {
		--klt-sticky-inline-size: 100%;
		--klt-sticky-top: var(--klt-admin-bar-offset, 0px);

		margin-block-start: 0;
	}

	.klt-site-header--kiro.is-sticky-ready {
		transition: top var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), inline-size var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), margin-block-start var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), background-color var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), border-color var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), border-radius var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), transform var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1);
	}

	.klt-site-header--kiro.is-sticky-ready:not(.is-at-top):not(.is-past-opening) {
		--klt-sticky-inline-size: calc(100% - 2 * var(--klt-kiro-edge));
	}

	.klt-site-header--kiro.klt-site-header.is-past-opening {
		--klt-sticky-inline-size: min(calc(100% - 2 * var(--klt-kiro-edge)), var(--klt-kiro-content-width));
	}

	.klt-site-header--kiro::before {
		position: absolute;
		z-index: -1;
		inset-block-start: -1px;
		inset-inline: -1px;
		block-size: calc(var(--klt-kiro-shade-depth, clamp(7rem, 14vw, 11rem)) + 1px);
		background: var(--klt-kiro-top-shade, transparent);
		content: "";
		opacity: 0;
		pointer-events: none;
		transform: translateY(-100%);
	}

	.klt-site-header--kiro:not(.is-sticky-ready)::before,
	.klt-site-header--kiro.is-at-top::before {
		opacity: 1;
		transform: translateY(0);
	}

	.klt-site-header--kiro.is-sticky-ready::before {
		transition: opacity var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1), transform var(--klt-kiro-transition-duration, 220ms) cubic-bezier(0.22, 1, 0.36, 1);
	}

	@media (prefers-reduced-motion: reduce) {
		.klt-site-header--kiro.is-sticky-ready,
		.klt-site-header--kiro.is-sticky-ready::before {
			transition: none;
		}
	}
}