/**
 * Liquid glass — materiál ve stylu novějších macOS (průsvit, sytost, odlesk čočky).
 * Na katalogu oknaokenice sedí na hlavičku, hero a produktové řady: sklo jako obsah i jako plocha webu.
 * Načítá se samostatně (filemtime), až po technical-catalog.css a mobile-nav.css.
 */

:root {
	--lg-blur: 18px;
	--lg-saturate: 1.75;
	--lg-header-clearance: 6.55rem;
	--lg-x: 72%;
	--lg-y: 0%;
}

@media (min-width: 1024px) {
	:root {
		--lg-header-clearance: 6.9rem;
	}
}

@keyframes lg-sheen {
	0%,
	100% {
		transform: translateX(-18%) skewX(-12deg);
		opacity: 0.35;
	}
	50% {
		transform: translateX(18%) skewX(-12deg);
		opacity: 0.85;
	}
}

/*
 * Stránky bez vlastního hero: fotka je jen ve výšce hlavičky a jede s ní při scrollu.
 * Na úvodu a stránkách s .infissi-page-hero už fotku tvoří samotný blok.
 */
.infissi-header-glass-photo {
	display: none;
}

body.infissi-technical:not(:has(.infissi-hero)):not(:has(.infissi-page-hero)) .infissi-header-glass-photo {
	display: block;
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

body.infissi-technical:not(:has(.infissi-hero)):not(:has(.infissi-page-hero)) .infissi-header-glass-photo::before {
	content: "";
	position: absolute;
	inset: -1.5rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.84)),
		radial-gradient(36rem 11rem at var(--lg-x) var(--lg-y), rgba(255, 255, 255, 0.5), transparent 62%),
		url("../../images/okenice/dum-s-okenicemi.jpg") center 22% / cover no-repeat;
	filter: blur(14px) saturate(1.35);
}

body.infissi-technical:not(:has(.infissi-hero)):not(:has(.infissi-page-hero)) #masthead.site-header {
	background-color: transparent;
	background-image: none;
}

/* --- Hlavička: tabule skla, pod kterou při scrollu projíždí stránka --- */
#masthead.site-header {
	position: relative;
	z-index: 40;
	isolation: isolate;
	background-color: rgba(255, 255, 255, 0.58);
	background-image: radial-gradient(
		36rem 11rem at var(--lg-x) var(--lg-y),
		rgba(255, 255, 255, 0.55),
		transparent 62%
	);
	-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
	backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
	border-bottom-color: rgba(255, 255, 255, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(12, 92, 56, 0.06),
		0 10px 36px rgba(7, 37, 24, 0.06);
}

#masthead.site-header::before {
	content: "";
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: -10%;
	width: 42%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 40%,
		rgba(255, 255, 255, 0.75) 50%,
		rgba(255, 255, 255, 0.08) 60%,
		transparent 100%
	);
	mix-blend-mode: soft-light;
	animation: lg-sheen 11s ease-in-out infinite;
}

body.infissi-technical #masthead.site-header {
	border-bottom: 0;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.96),
		0 8px 22px rgba(7, 25, 16, 0.05);
}

body.infissi-technical #masthead.site-header::before {
	opacity: 0.28;
}

/* Italský pruh zůstává ::after; odlesk končí nad ním. */
body.infissi-technical #masthead.site-header::before {
	bottom: 4px;
}

/* Fotka hero zajede pod sklo, text zůstane pod lištou. */
body.infissi-technical .infissi-hero {
	margin-top: calc(-1 * var(--lg-header-clearance));
}

body.infissi-technical .infissi-page-hero {
	margin-top: calc(0.75rem - var(--lg-header-clearance));
}

body.infissi-technical .infissi-hero__layout {
	padding-top: calc(var(--lg-header-clearance) + 1.35rem);
}

body.infissi-technical .infissi-page-hero__copy {
	padding-top: calc(var(--lg-header-clearance) + 0.85rem);
}

/* --- Parametry na hero: tmavá čočka přes fotografii okna --- */
body.infissi-technical .infissi-hero__rail {
	position: relative;
	isolation: isolate;
	overflow: visible;
	margin-top: 0.25rem;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 1.35rem;
	background-color: rgba(15, 15, 15, 0.78);
	background-image: none;
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 22px 40px rgba(0, 0, 0, 0.48);
	text-shadow: none;
}

body.infissi-technical .infissi-hero__rail::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
	pointer-events: none;
}

@media (min-width: 960px) {
	body.infissi-technical .infissi-hero__rail {
		margin-top: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		border-left: 1px solid rgba(255, 255, 255, 0.2);
		padding: 1.75rem;
	}
}

body.infissi-technical .infissi-hero__rail-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-family: var(--sk-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fcd34d;
}

body.infissi-technical .infissi-hero__rail-title > span:first-child {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: #fcd34d;
}

body.infissi-technical .infissi-note--rail {
	position: absolute;
	z-index: 2;
	top: -0.875rem;
	right: 1rem;
	margin: 0;
	padding: 0.125rem 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0;
	text-transform: none;
	color: #0c0a09;
}

body.infissi-technical .infissi-hero__rail-chip {
	flex: 0 0 auto;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.1);
	font-family: var(--sk-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #e7e5e4;
}

body.infissi-technical .infissi-hero__rail ol {
	gap: 0.875rem;
}

body.infissi-technical .infissi-hero__rail li {
	gap: 0.875rem;
	align-items: center;
	font-size: 0.875rem;
}

body.infissi-technical .infissi-hero__rail li > span:first-child {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fbbf24;
}

body.infissi-technical .infissi-hero__rail .infissi-hero__fact {
	font-family: var(--sk-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	color: #f5f5f4;
}

body.infissi-technical .infissi-hero__rail li:last-child .infissi-hero__fact {
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(251, 191, 36, 0.75);
	text-underline-offset: 0.28em;
}

body.infissi-technical .infissi-hero__rail li {
	color: #f4f1ea;
}

/* Sekundární tlačítko na fotce — skleněná destička vedle plného bílého CTA. */
body.infissi-technical .infissi-btn--ghost {
	background-color: rgba(255, 255, 255, 0.14);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05));
	border-color: rgba(255, 255, 255, 0.42);
	background-clip: padding-box;
	-webkit-backdrop-filter: blur(12px) saturate(1.5);
	backdrop-filter: blur(12px) saturate(1.5);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 16px 28px rgba(0, 0, 0, 0.38);
}

body.infissi-technical .infissi-btn--ghost:hover,
body.infissi-technical .infissi-btn--ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.92);
	background-image: none;
	color: var(--infissi-ink);
}

/* Produktové řady: každá karta je tabule. */
body.infissi-technical .infissi-line {
	position: relative;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.46);
	background-image: radial-gradient(
		18rem 12rem at var(--lg-x) var(--lg-y),
		rgba(255, 255, 255, 0.7),
		transparent 60%
	);
	border-color: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 12px 28px rgba(7, 53, 36, 0.06);
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s ease;
}

body.infissi-technical .infissi-line__fig {
	background-color: rgba(255, 255, 255, 0.28);
}

body.infissi-technical .infissi-line::after {
	content: "";
	position: absolute;
	inset: -20% -40%;
	background: linear-gradient(
		105deg,
		transparent 38%,
		rgba(255, 255, 255, 0.55) 50%,
		transparent 62%
	);
	transform: translateX(-55%);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.7s ease,
		opacity 0.7s ease;
}

body.infissi-technical .infissi-line:hover,
body.infissi-technical .infissi-line:focus-visible {
	border-color: rgba(12, 92, 56, 0.35);
	box-shadow:
		inset 0 1px 0 #fff,
		0 18px 36px rgba(7, 53, 36, 0.12);
	transform: translateY(-2px);
}

body.infissi-technical .infissi-line:hover::after,
body.infissi-technical .infissi-line:focus-visible::after {
	transform: translateX(55%);
	opacity: 1;
}

/* Plovoucí menu — stejné sklo jako lišta. */
.grohman-theme-okna-primary-menu .sub-menu:not(.mega-menu-fabric) {
	background-color: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(18px) saturate(1.55);
	backdrop-filter: blur(18px) saturate(1.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 22px 44px -18px rgba(7, 53, 36, 0.35);
}

/* Obal megamenu je průhledný — sklo je jen vnitřní tabule, ať se nemlží dvakrát. */
.grohman-theme-okna-primary-menu .sub-menu.grohman-theme-okna-mega-shop-list {
	background: transparent;
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.infissi-technical .mega-menu-fabric {
	isolation: isolate;
	background-color: rgba(255, 255, 255, 0.94);
	background-image: radial-gradient(
		22rem 14rem at var(--lg-x) var(--lg-y),
		rgba(255, 255, 255, 0.55),
		transparent 62%
	);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 1.25rem;
	-webkit-backdrop-filter: blur(20px) saturate(1.75);
	backdrop-filter: blur(20px) saturate(1.75);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		0 24px 50px -18px rgba(7, 37, 24, 0.32);
}

body.infissi-technical .mega-menu-fabric::before {
	top: 0;
	left: 1.45rem;
}

body.infissi-technical .grohman-theme-okna-mega-shop__inner {
	position: relative;
	isolation: isolate;
}

body.infissi-technical .grohman-theme-okna-mega-shop__inner::before {
	content: "";
	position: absolute;
	top: -45%;
	bottom: -45%;
	left: -15%;
	width: 42%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.04) 40%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0.04) 60%,
		transparent 100%
	);
	mix-blend-mode: soft-light;
	animation: lg-sheen 11s ease-in-out infinite;
}

body.infissi-technical .grohman-theme-okna-mega-shop__head {
	border-bottom-color: rgba(12, 92, 56, 0.14);
}

body.infissi-technical .grohman-theme-okna-mega-shop__icon {
	border-radius: 0.85rem;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(12, 92, 56, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(8px) saturate(1.4);
	backdrop-filter: blur(8px) saturate(1.4);
}

/* Pravý sloupec — tmavá čočka jako panel parametrů na hero. */
body.infissi-technical .grohman-theme-okna-mega-shop__promo {
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 1.15rem;
	background-color: rgba(7, 28, 20, 0.72);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		0 14px 32px rgba(0, 0, 0, 0.2);
}

body.infissi-technical .grohman-theme-okna-mega-shop__promo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	z-index: 12;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
	pointer-events: none;
}

body.infissi-technical .grohman-theme-okna-mega-shop__promo-img {
	opacity: 0.5;
}

body.infissi-technical .grohman-theme-okna-mega-shop__promo-overlay {
	background: linear-gradient(
		180deg,
		rgba(7, 28, 20, 0.12) 0%,
		rgba(7, 28, 20, 0.45) 36%,
		rgba(7, 28, 20, 0.9) 100%
	);
}

/*
 * Patička — sklo jen jako rám.
 * Výplň je plná #073524, ať šedý text nesedí na prosvětleném podkladu.
 */
body.infissi-technical #colophon.site-footer {
	margin: 0.75rem;
	padding-top: 3.25rem;
	overflow: hidden;
	border: 1px solid #292524;
	border-radius: 1.35rem;
	background-color: #1c1917;
	background-image: none;
	color: #e7e5e4;
	font-family: var(--font-sans);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 32px 28px -30px rgba(255, 255, 255, 0.22),
		0 18px 40px rgba(7, 25, 16, 0.16);
}

body.infissi-technical #colophon .grohman-theme-okna-footer-copyright,
body.infissi-technical #colophon .grohman-theme-okna-footer-tagline,
body.infissi-technical #colophon .grohman-theme-okna-footer-trust-badges,
body.infissi-technical #colophon .grohman-theme-okna-footer-trust-badges .ph,
body.infissi-technical #colophon .footer-link,
body.infissi-technical #colophon .oo-legal,
body.infissi-technical #colophon .oo-legal__note,
body.infissi-technical #colophon .oo-legal a {
	color: #a8a29e;
	font-family: var(--font-sans);
}

body.infissi-technical #colophon .oo-legal strong,
body.infissi-technical #colophon .oo-legal a {
	color: var(--oo-yellow);
	font-family: var(--font-sans);
	font-weight: 700;
}

body.infissi-technical #colophon .oo-legal a {
	font-weight: 600;
}

body.infissi-technical #colophon h4,
body.infissi-technical #colophon .contact-tag h4 {
	color: var(--oo-yellow);
	font-family: var(--font-sans);
	font-weight: 700;
}

body.infissi-technical #colophon .oo-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

body.infissi-technical #colophon .oo-mark,
body.infissi-technical #colophon .oo-mark__name {
	color: #f5f5f4;
}

body.infissi-technical #colophon .oo-logo-tagline {
	color: #a8a29e;
}

body.infissi-technical .grohman-theme-okna-footer-contact-icon {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid #44403c;
	color: var(--oo-yellow);
}

body.infissi-technical .grohman-theme-okna-footer-contact-item:hover .grohman-theme-okna-footer-contact-icon {
	background-color: var(--oo-green);
	color: #fff;
}

body.infissi-technical .grohman-theme-okna-footer-contact-item:hover a {
	color: var(--oo-yellow);
}

body.infissi-technical #colophon p.text-gray-400,
body.infissi-technical #colophon .grohman-theme-okna-footer-trust-badges,
body.infissi-technical #colophon .grohman-theme-okna-footer-trust-badges .ph {
	color: #a8a29e;
	font-family: var(--font-sans);
}

body.infissi-technical #colophon .footer-link::before {
	background-color: var(--oo-yellow);
}

body.infissi-technical #colophon .footer-link:hover,
body.infissi-technical #colophon .footer-link:focus-visible,
body.infissi-technical #colophon .grohman-theme-okna-footer-copyright__link:hover,
body.infissi-technical #colophon .grohman-theme-okna-footer-copyright__link:focus-visible {
	color: var(--oo-yellow);
}

body.infissi-technical #colophon.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	z-index: 5;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
	pointer-events: none;
}

/* Cikcak a čárkovaný šev patří látce, na skle by řezaly hranu. */
body.infissi-technical #colophon.site-footer > .absolute {
	display: none;
}

body.infissi-technical .contact-tag {
	border: 1px solid #d6d3d1;
	border-radius: 1.15rem;
	background-color: rgba(41, 37, 36, 0.72);
	background-image: none;
	color: #d6d3d1;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.infissi-technical .contact-tag p,
body.infissi-technical .contact-tag a,
body.infissi-technical .contact-tag li,
body.infissi-technical .contact-tag .text-gray-500,
body.infissi-technical .contact-tag .text-gray-600,
body.infissi-technical .contact-tag .text-gray-700,
body.infissi-technical .contact-tag .text-gray-900 {
	color: #d6d3d1;
}

body.infissi-technical .contact-tag .border-t {
	border-color: #44403c;
}

body.infissi-technical .contact-tag::before,
body.infissi-technical .contact-tag > svg {
	display: none;
}

/* Menu musí zůstat čitelné přes světlý nadpis hero — sklo je na liště, ne na seznamu odkazů. */
.grohman-theme-okna-mobile-nav__panel {
	background-color: #fff;
	background-image: none;
	border-color: rgba(12, 92, 56, 0.08);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 20px 40px -12px rgba(7, 37, 24, 0.16);
}

@media (max-width: 1023px) {
	.grohman-theme-okna-header-icon-btn,
	.grohman-theme-okna-header-actions .grohman-theme-okna-mini-cart__icon-wrap {
		background-color: rgba(255, 255, 255, 0.42);
		border-color: rgba(255, 255, 255, 0.72);
		-webkit-backdrop-filter: blur(10px) saturate(1.4);
		backdrop-filter: blur(10px) saturate(1.4);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	}
}

@media (prefers-reduced-motion: reduce) {
	#masthead.site-header::before,
	body.infissi-technical .grohman-theme-okna-mega-shop__inner::before,
	body.infissi-technical .infissi-line,
	body.infissi-technical .infissi-line::after {
		animation: none;
		transition: none;
	}

	body.infissi-technical .infissi-line:hover,
	body.infissi-technical .infissi-line:focus-visible {
		transform: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	#masthead.site-header,
	body.infissi-technical .mega-menu-fabric,
	.grohman-theme-okna-primary-menu .sub-menu:not(.mega-menu-fabric),
	.grohman-theme-okna-mobile-nav__panel,
	body.infissi-technical .infissi-line {
		background-color: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.infissi-technical .infissi-hero__rail,
	body.infissi-technical .infissi-btn--ghost,
	body.infissi-technical .grohman-theme-okna-mega-shop__promo {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.infissi-technical .infissi-hero__rail,
	body.infissi-technical .grohman-theme-okna-mega-shop__promo {
		background-color: rgba(7, 28, 20, 0.82);
	}

	body.infissi-technical #colophon.site-footer {
		background-color: #1c1917;
		background-image: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#masthead.site-header,
	body.infissi-technical .mega-menu-fabric,
	.grohman-theme-okna-mobile-nav__panel,
	body.infissi-technical .infissi-line {
		background-color: rgba(255, 255, 255, 0.94);
	}

	body.infissi-technical .infissi-hero__rail,
	body.infissi-technical .grohman-theme-okna-mega-shop__promo {
		background-color: rgba(7, 28, 20, 0.78);
	}

	body.infissi-technical #colophon.site-footer {
		background-color: #1c1917;
		background-image: none;
	}
}